From 795a54d876852d76299b0eb6f01aa6fd3a239f80 Mon Sep 17 00:00:00 2001
From: Mike Shi <mike@hyperdx.io>
Date: Sat, 30 May 2026 14:40:04 -0700
Subject: [PATCH 1/5] feat: render active filters as inline chips in search
 where input

Replaces the separate ActiveFilterPills row below the search input with
inline filter chips rendered directly inside SearchWhereInput. The chips
slot is wired through both SQLInlineEditor (CodeMirror) and
AutocompleteInput (Lucene), and Backspace at cursor position 0 removes
the last chip.

- Add InlineFilterChips component and filterPillUtils helpers
- Add filterChips + onRemoveLastChip props to SQLInlineEditor,
  AutocompleteInput, and SearchInputV2
- Wire SearchWhereInput to flatten searchFilters into chips and handle
  last-chip removal
- Remove ActiveFilterPills component and its test
- Add unit tests for InlineFilterChips and filterPillUtils, plus an
  E2E suite (filter-chips.spec.ts)
---
 packages/app/src/DBSearchPage.tsx             |   3 +-
 .../app/src/components/ActiveFilterPills.tsx  | 270 ---------
 .../SQLEditor/SQLInlineEditor.module.scss     |  32 +-
 .../components/SQLEditor/SQLInlineEditor.tsx  |  21 +
 .../SearchInput/AutocompleteInput.module.scss |  46 +-
 .../SearchInput/AutocompleteInput.tsx         | 219 ++++----
 .../SearchInput/InlineFilterChips.module.scss |  64 +++
 .../SearchInput/InlineFilterChips.tsx         |  95 ++++
 .../components/SearchInput/SearchInputV2.tsx  |   6 +
 .../SearchInput/SearchWhereInput.module.scss  |  24 +-
 .../SearchInput/SearchWhereInput.tsx          |  43 ++
 .../__tests__/InlineFilterChips.test.tsx      | 203 +++++++
 .../__tests__/ActiveFilterPills.test.tsx      | 278 ----------
 .../__tests__/filterPillUtils.test.ts         | 184 +++++++
 .../app/src/components/filterPillUtils.ts     |  56 ++
 .../e2e/components/FilterChipsComponent.ts    |  98 ++++
 .../e2e/features/search/filter-chips.spec.ts  | 511 ++++++++++++++++++
 .../app/tests/e2e/page-objects/SearchPage.ts  |   3 +
 18 files changed, 1474 insertions(+), 682 deletions(-)
 delete mode 100644 packages/app/src/components/ActiveFilterPills.tsx
 create mode 100644 packages/app/src/components/SearchInput/InlineFilterChips.module.scss
 create mode 100644 packages/app/src/components/SearchInput/InlineFilterChips.tsx
 create mode 100644 packages/app/src/components/SearchInput/__tests__/InlineFilterChips.test.tsx
 delete mode 100644 packages/app/src/components/__tests__/ActiveFilterPills.test.tsx
 create mode 100644 packages/app/src/components/__tests__/filterPillUtils.test.ts
 create mode 100644 packages/app/src/components/filterPillUtils.ts
 create mode 100644 packages/app/tests/e2e/components/FilterChipsComponent.ts
 create mode 100644 packages/app/tests/e2e/features/search/filter-chips.spec.ts

diff --git a/packages/app/src/DBSearchPage.tsx b/packages/app/src/DBSearchPage.tsx
index 2862d3b857..b7d201a18c 100644
--- a/packages/app/src/DBSearchPage.tsx
+++ b/packages/app/src/DBSearchPage.tsx
@@ -82,7 +82,6 @@ import { useIsFetching } from '@tanstack/react-query';
 import { SortingState } from '@tanstack/react-table';
 import CodeMirror from '@uiw/react-codemirror';
 
-import { ActiveFilterPills } from '@/components/ActiveFilterPills';
 import { AlertStatusIcon } from '@/components/AlertStatusIcon';
 import { ContactSupportText } from '@/components/ContactSupportText';
 import { DBSearchPageFilters } from '@/components/DBSearchPageFilters';
@@ -2019,6 +2018,7 @@ export function DBSearchPage() {
             dateRange={searchedTimeRange}
             sourceId={inputSource}
             size="xs"
+            searchFilters={searchFilters}
           />
           <Flex
             gap="sm"
@@ -2063,7 +2063,6 @@ export function DBSearchPage() {
             <SearchSubmitButton isFormStateDirty={formState.isDirty} />
           </Flex>
         </Flex>
-        <ActiveFilterPills searchFilters={searchFilters} mt={6} />
       </form>
       {searchedConfig != null && searchedSource != null && (
         <SaveSearchModal
diff --git a/packages/app/src/components/ActiveFilterPills.tsx b/packages/app/src/components/ActiveFilterPills.tsx
deleted file mode 100644
index 763cafbb19..0000000000
--- a/packages/app/src/components/ActiveFilterPills.tsx
+++ /dev/null
@@ -1,270 +0,0 @@
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { ActionIcon, Flex, FlexProps, Text, Tooltip } from '@mantine/core';
-import { IconX } from '@tabler/icons-react';
-
-import type { FilterStateHook } from '@/searchFilters';
-
-const MAX_VISIBLE_PILLS = 8;
-
-type PillItem = {
-  field: string;
-  value: string;
-  type: 'included' | 'excluded' | 'range';
-  rawValue?: string | boolean;
-};
-
-function flattenFilters(filters: FilterStateHook['filters']): PillItem[] {
-  const pills: PillItem[] = [];
-  for (const [field, state] of Object.entries(filters)) {
-    for (const val of state.included) {
-      pills.push({
-        field,
-        value: String(val),
-        type: 'included',
-        rawValue: val,
-      });
-    }
-    for (const val of state.excluded) {
-      pills.push({
-        field,
-        value: String(val),
-        type: 'excluded',
-        rawValue: val,
-      });
-    }
-    if (state.range != null) {
-      pills.push({
-        field,
-        value: `${state.range.min} – ${state.range.max}`,
-        type: 'range',
-      });
-    }
-  }
-  return pills;
-}
-
-const pillStyle = {
-  display: 'inline-flex',
-  alignItems: 'center',
-  gap: 4,
-  padding: '1px 6px',
-  borderRadius: 3,
-  fontSize: 11,
-  lineHeight: '18px',
-  cursor: 'default',
-  whiteSpace: 'nowrap' as const,
-  maxWidth: 260,
-  overflow: 'hidden',
-};
-
-function FilterPill({
-  pill,
-  isInvalid,
-  invalidReason,
-  onRemove,
-}: {
-  pill: PillItem;
-  isInvalid?: boolean;
-  invalidReason?: string;
-  onRemove: () => void;
-}) {
-  const isExcluded = pill.type === 'excluded';
-  const operator = isExcluded ? ' != ' : pill.type === 'range' ? ': ' : ' = ';
-
-  const tooltipLabel = isInvalid
-    ? (invalidReason ??
-      `Filter not applied: "${pill.field}" isn't a column on the current source. It will reapply if you switch back.`)
-    : `${pill.field}${operator}${pill.value}`;
-
-  const showDangerAccent = isExcluded && !isInvalid;
-
-  return (
-    <Tooltip label={tooltipLabel} openDelay={300} multiline maw={280}>
-      <span
-        data-testid={`active-filter-pill-${pill.field}`}
-        data-invalid={isInvalid ? 'true' : undefined}
-        style={{
-          ...pillStyle,
-          backgroundColor: isInvalid
-            ? 'transparent'
-            : isExcluded
-              ? 'var(--color-bg-danger)'
-              : 'var(--color-bg-hover)',
-          border: isInvalid
-            ? '1px dashed var(--color-border-emphasis)'
-            : '1px solid transparent',
-          opacity: isInvalid ? 0.75 : 1,
-        }}
-      >
-        <Text
-          span
-          size="xxs"
-          c="dimmed"
-          fw={500}
-          style={{
-            flexShrink: 0,
-            maxWidth: 100,
-            textDecoration: isInvalid ? 'line-through' : undefined,
-          }}
-          truncate="start"
-        >
-          {pill.field}
-        </Text>
-        <Text
-          span
-          size="xxs"
-          c="dimmed"
-          style={{
-            color: showDangerAccent ? 'var(--color-text-danger)' : undefined,
-            textDecoration: isInvalid ? 'line-through' : undefined,
-          }}
-        >
-          {operator}
-        </Text>
-        <Text
-          span
-          size="xxs"
-          fw={500}
-          truncate
-          style={{ textDecoration: isInvalid ? 'line-through' : undefined }}
-        >
-          {pill.value}
-        </Text>
-        <ActionIcon
-          size={14}
-          variant="transparent"
-          color="gray"
-          onClick={onRemove}
-          style={{
-            flexShrink: 0,
-            marginLeft: 2,
-            color: showDangerAccent ? 'var(--color-text-danger)' : undefined,
-          }}
-          aria-label="Remove filter"
-        >
-          <IconX size={9} />
-        </ActionIcon>
-      </span>
-    </Tooltip>
-  );
-}
-
-export const ActiveFilterPills = memo(function ActiveFilterPills({
-  searchFilters,
-  invalidFields,
-  invalidFieldReason,
-  ...flexProps
-}: {
-  searchFilters: FilterStateHook;
-  /**
-   * Field names whose filters are present in state but not applied to the
-   * current query (e.g. column doesn't exist on the active source). These
-   * render in a muted, strikethrough, dashed-border style and are preserved
-   * so the user can switch back without losing their selection.
-   */
-  invalidFields?: Set<string>;
-  /**
-   * Optional tooltip override for invalid pills. Receives the field name and
-   * returns the tooltip text.
-   */
-  invalidFieldReason?: (field: string) => string;
-} & FlexProps) {
-  const { filters, setFilterValue, clearFilter, clearAllFilters } =
-    searchFilters;
-
-  const pills = useMemo(() => flattenFilters(filters), [filters]);
-  const [expanded, setExpanded] = useState(false);
-  const [confirmClear, setConfirmClear] = useState(false);
-  const confirmTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
-
-  useEffect(() => {
-    return () => clearTimeout(confirmTimerRef.current);
-  }, []);
-
-  const handleRemove = useCallback(
-    (pill: PillItem) => {
-      if (pill.type === 'range') {
-        clearFilter(pill.field);
-      } else {
-        setFilterValue(
-          pill.field,
-          pill.rawValue!,
-          pill.type === 'excluded' ? 'exclude' : undefined,
-        );
-      }
-    },
-    [setFilterValue, clearFilter],
-  );
-
-  const handleClearAll = useCallback(() => {
-    if (!confirmClear) {
-      setConfirmClear(true);
-      clearTimeout(confirmTimerRef.current);
-      confirmTimerRef.current = setTimeout(() => setConfirmClear(false), 2000);
-      return;
-    }
-    clearAllFilters();
-    setConfirmClear(false);
-    clearTimeout(confirmTimerRef.current);
-  }, [confirmClear, clearAllFilters]);
-
-  if (pills.length === 0) {
-    return null;
-  }
-
-  const visiblePills = expanded ? pills : pills.slice(0, MAX_VISIBLE_PILLS);
-  const hiddenCount = pills.length - MAX_VISIBLE_PILLS;
-
-  return (
-    <Flex gap={4} px="sm" wrap="wrap" align="center" {...flexProps}>
-      {visiblePills.map((pill, i) => {
-        const isInvalid = invalidFields?.has(pill.field) ?? false;
-        return (
-          <FilterPill
-            key={`${pill.field}-${pill.type}-${pill.value}-${i}`}
-            pill={pill}
-            isInvalid={isInvalid}
-            invalidReason={
-              isInvalid ? invalidFieldReason?.(pill.field) : undefined
-            }
-            onRemove={() => handleRemove(pill)}
-          />
-        );
-      })}
-      {!expanded && hiddenCount > 0 && (
-        <Text
-          size="xxs"
-          c="dimmed"
-          style={{ cursor: 'pointer' }}
-          td="underline"
-          onClick={() => setExpanded(true)}
-        >
-          +{hiddenCount} more
-        </Text>
-      )}
-      {expanded && hiddenCount > 0 && (
-        <Text
-          size="xxs"
-          c="dimmed"
-          style={{ cursor: 'pointer' }}
-          td="underline"
-          onClick={() => setExpanded(false)}
-        >
-          Show less
-        </Text>
-      )}
-      {pills.length >= 2 && (
-        <Text
-          size="xxs"
-          c={confirmClear ? 'red.4' : 'dimmed'}
-          style={{ cursor: 'pointer' }}
-          td="underline"
-          onClick={handleClearAll}
-          onMouseLeave={() => setConfirmClear(false)}
-        >
-          {confirmClear ? 'Confirm clear all?' : 'Clear all'}
-        </Text>
-      )}
-    </Flex>
-  );
-});
diff --git a/packages/app/src/components/SQLEditor/SQLInlineEditor.module.scss b/packages/app/src/components/SQLEditor/SQLInlineEditor.module.scss
index 91d7b01863..a039c8deee 100644
--- a/packages/app/src/components/SQLEditor/SQLInlineEditor.module.scss
+++ b/packages/app/src/components/SQLEditor/SQLInlineEditor.module.scss
@@ -14,9 +14,13 @@
   background-color: var(--color-bg-field);
   border: 1px solid var(--color-border);
   display: flex;
-  align-items: flex-start;
+  flex-wrap: wrap;
+  align-items: center;
   min-height: var(--editor-base-height, 36px);
   box-shadow: none;
+  gap: 2px;
+  padding-top: 2px;
+  padding-bottom: 2px;
 
   &.error {
     border-color: var(--color-bg-danger);
@@ -34,31 +38,31 @@
 
   &:not(.expanded) {
     position: relative;
-    max-height: var(--editor-base-height, 36px);
     overflow: hidden;
   }
+
+  /* When no chips, keep original single-line height cap */
+  &:not(.expanded):not([data-has-chips]) {
+    max-height: var(--editor-base-height, 36px);
+  }
 }
 
 .label {
   white-space: nowrap;
-
-  &.sizeXs {
-    padding-top: 6px;
-  }
-
-  &:not(.sizeXs) {
-    padding-top: 8px;
-  }
+  flex-shrink: 0;
 }
 
 .cmWrapper {
-  min-width: 10px;
-  width: 100%;
-  padding-top: 3.4px;
+  min-width: 100px;
+  flex: 1 1 auto;
   font-size: var(--mantine-font-size-sm);
 
+  /* When expanded with chips, require enough space or wrap to next line */
+  .expanded[data-has-chips] > & {
+    min-width: min(100%, 300px);
+  }
+
   &.sizeXs {
-    padding-top: 2.4px;
     font-size: var(--mantine-font-size-xs);
   }
 
diff --git a/packages/app/src/components/SQLEditor/SQLInlineEditor.tsx b/packages/app/src/components/SQLEditor/SQLInlineEditor.tsx
index 8d7829e3e1..56cc9be74f 100644
--- a/packages/app/src/components/SQLEditor/SQLInlineEditor.tsx
+++ b/packages/app/src/components/SQLEditor/SQLInlineEditor.tsx
@@ -65,6 +65,9 @@ type SQLInlineEditorProps = {
   allowMultiline?: boolean;
   dateRange?: [Date, Date];
   sourceId?: string;
+  filterChips?: React.ReactNode;
+  /** Returns true if a chip was actually removed so the host can consume the keystroke. */
+  onRemoveLastChip?: () => boolean | void;
 };
 
 const MAX_EDITOR_HEIGHT = '150px';
@@ -91,6 +94,8 @@ export default function SQLInlineEditor({
   allowMultiline = true,
   dateRange,
   sourceId,
+  filterChips,
+  onRemoveLastChip,
 }: SQLInlineEditorProps & TableConnectionChoice) {
   const { colorScheme } = useMantineColorScheme();
   const _tableConnections = tableConnection
@@ -152,6 +157,10 @@ export default function SQLInlineEditor({
   const ref = useRef<ReactCodeMirrorRef>(null);
 
   const compartmentRef = useRef<Compartment>(new Compartment());
+  const onRemoveLastChipRef = useRef(onRemoveLastChip);
+  useEffect(() => {
+    onRemoveLastChipRef.current = onRemoveLastChip;
+  }, [onRemoveLastChip]);
 
   const hasNonEmptyValue = value.trim().length > 0;
 
@@ -274,6 +283,16 @@ export default function SQLInlineEditor({
               return true;
             },
           },
+          {
+            key: 'Backspace',
+            run: view => {
+              const { from, to } = view.state.selection.main;
+              if (from === 0 && to === 0 && onRemoveLastChipRef.current) {
+                return onRemoveLastChipRef.current() === true;
+              }
+              return false;
+            },
+          },
           ...(allowMultiline
             ? [
                 {
@@ -324,6 +343,7 @@ export default function SQLInlineEditor({
           allowMultiline && !isExpanded ? styles.collapseFade : undefined,
         )}
         ps="4px"
+        data-has-chips={filterChips != null ? 'true' : undefined}
       >
         {label != null && (
           <Text
@@ -344,6 +364,7 @@ export default function SQLInlineEditor({
             </Tooltip>
           </Text>
         )}
+        {filterChips}
         <div
           className={cx(
             styles.cmWrapper,
diff --git a/packages/app/src/components/SearchInput/AutocompleteInput.module.scss b/packages/app/src/components/SearchInput/AutocompleteInput.module.scss
index 3539687b8f..df089c4b7a 100644
--- a/packages/app/src/components/SearchInput/AutocompleteInput.module.scss
+++ b/packages/app/src/components/SearchInput/AutocompleteInput.module.scss
@@ -4,20 +4,17 @@
   min-height: var(--autocomplete-base-height, 36px);
 }
 
-.textarea {
+.inputContainer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
   flex-grow: 1;
-  resize: none;
   border: 1px solid var(--color-border);
   border-radius: var(--mantine-radius-default);
-
-  textarea {
-    border: none !important;
-    word-break: break-all;
-  }
-
-  textarea::placeholder {
-    transform: translateY(1px);
-  }
+  background-color: var(--color-bg-field);
+  min-height: var(--autocomplete-base-height, 36px);
+  gap: 2px;
+  padding: 2px 0 2px 4px;
 
   &.focused {
     position: absolute;
@@ -29,11 +26,12 @@
     border-bottom: 2px solid var(--color-bg-brand) !important;
   }
 
-  /* Fade at the bottom when collapsed (single-line, not focused); applied to textarea */
+  /* Fade at the bottom when collapsed (single-line, not focused); applied to container */
   &.collapseFade {
     position: relative;
+    overflow: hidden;
 
-    &::after {
+    &:not([data-has-chips])::after {
       content: '';
       position: absolute;
       left: 0;
@@ -51,6 +49,28 @@
   }
 }
 
+.textarea {
+  flex: 1 1 auto;
+  min-width: 100px;
+  resize: none;
+  border: none !important;
+
+  /* When focused with chips, require enough space or wrap to next line */
+  .focused[data-has-chips] > & {
+    min-width: min(100%, 300px);
+  }
+
+  textarea {
+    border: none !important;
+    background: transparent !important;
+    word-break: break-all;
+  }
+
+  textarea::placeholder {
+    transform: translateY(1px);
+  }
+}
+
 /* Dropdown content */
 .aboveSuggestions {
   display: flex;
diff --git a/packages/app/src/components/SearchInput/AutocompleteInput.tsx b/packages/app/src/components/SearchInput/AutocompleteInput.tsx
index 0669f30a11..a224bc149b 100644
--- a/packages/app/src/components/SearchInput/AutocompleteInput.tsx
+++ b/packages/app/src/components/SearchInput/AutocompleteInput.tsx
@@ -28,6 +28,8 @@ export default function AutocompleteInput({
   language,
   onSubmit,
   queryHistoryType,
+  filterChips,
+  onRemoveLastChip,
   'data-testid': dataTestId,
 }: {
   inputRef: React.RefObject<HTMLTextAreaElement | null>;
@@ -47,6 +49,9 @@ export default function AutocompleteInput({
   onLanguageChange?: (language: 'sql' | 'lucene') => void;
   language?: 'sql' | 'lucene';
   queryHistoryType?: string;
+  filterChips?: React.ReactNode;
+  /** Returns true if a chip was actually removed so the host can consume the keystroke. */
+  onRemoveLastChip?: () => boolean | void;
   'data-testid'?: string;
 }) {
   const suggestionsLimit = 10;
@@ -180,117 +185,143 @@ export default function AutocompleteInput({
         }}
       >
         <Popover.Target>
-          <Textarea
-            ref={inputRef}
-            placeholder={placeholder}
+          <div
             className={cx(
-              styles.textarea,
+              styles.inputContainer,
               !isSearchInputFocused && styles.collapseFade,
               isSearchInputFocused && styles.focused,
             )}
-            value={value}
-            size={size}
-            autosize
-            minRows={1}
-            maxRows={isSearchInputFocused ? 4 : 1}
-            data-testid={dataTestId}
-            onChange={e => onChange(e.target.value)}
-            onFocus={() => {
-              setSelectedAutocompleteIndex(-1);
-              setSelectedQueryHistoryIndex(-1);
-              setIsSearchInputFocused(true);
-            }}
-            onBlur={() => {
-              setSelectedAutocompleteIndex(-1);
-              setSelectedQueryHistoryIndex(-1);
-              setIsSearchInputFocused(false);
-            }}
-            onKeyDown={e => {
-              if (
-                e.key === 'Escape' &&
-                e.target instanceof HTMLTextAreaElement
-              ) {
-                e.preventDefault();
-                setIsInputDropdownOpen(false);
-                e.target.blur();
-              }
-
-              // Autocomplete Navigation/Acceptance Keys
-              if (e.key === 'Tab' && e.target instanceof HTMLTextAreaElement) {
+            data-autocomplete-container
+            data-has-chips={filterChips != null ? 'true' : undefined}
+          >
+            {filterChips}
+            <Textarea
+              ref={inputRef}
+              placeholder={placeholder}
+              className={styles.textarea}
+              value={value}
+              size={size}
+              autosize
+              minRows={1}
+              maxRows={isSearchInputFocused ? 4 : 1}
+              data-testid={dataTestId}
+              onChange={e => onChange(e.target.value)}
+              onFocus={() => {
+                setSelectedAutocompleteIndex(-1);
+                setSelectedQueryHistoryIndex(-1);
+                setIsSearchInputFocused(true);
+              }}
+              onBlur={() => {
+                setSelectedAutocompleteIndex(-1);
+                setSelectedQueryHistoryIndex(-1);
+                setIsSearchInputFocused(false);
+              }}
+              onKeyDown={e => {
                 if (
-                  suggestedProperties.length > 0 &&
-                  selectedAutocompleteIndex < suggestedProperties.length &&
-                  selectedAutocompleteIndex >= 0
+                  e.key === 'Escape' &&
+                  e.target instanceof HTMLTextAreaElement
                 ) {
                   e.preventDefault();
-                  onAcceptSuggestion(
-                    suggestedProperties[selectedAutocompleteIndex].value,
-                  );
+                  setIsInputDropdownOpen(false);
+                  e.target.blur();
                 }
-              }
-              if (
-                e.key === 'Enter' &&
-                e.target instanceof HTMLTextAreaElement
-              ) {
+
+                // Backspace at cursor position 0 removes last chip (only if
+                // a chip was actually present — otherwise let backspace behave
+                // normally).
                 if (
-                  suggestedProperties.length > 0 &&
-                  selectedAutocompleteIndex < suggestedProperties.length &&
-                  selectedAutocompleteIndex >= 0
+                  e.key === 'Backspace' &&
+                  e.target instanceof HTMLTextAreaElement &&
+                  e.target.selectionStart === 0 &&
+                  e.target.selectionEnd === 0 &&
+                  onRemoveLastChip
                 ) {
-                  e.preventDefault();
-                  onAcceptSuggestion(
-                    suggestedProperties[selectedAutocompleteIndex].value,
-                  );
-                } else {
-                  // Allow shift+enter to still create new lines
-                  if (!e.shiftKey) {
+                  const removed = onRemoveLastChip();
+                  if (removed) {
+                    e.preventDefault();
+                  }
+                }
+
+                // Autocomplete Navigation/Acceptance Keys
+                if (
+                  e.key === 'Tab' &&
+                  e.target instanceof HTMLTextAreaElement
+                ) {
+                  if (
+                    suggestedProperties.length > 0 &&
+                    selectedAutocompleteIndex < suggestedProperties.length &&
+                    selectedAutocompleteIndex >= 0
+                  ) {
+                    e.preventDefault();
+                    onAcceptSuggestion(
+                      suggestedProperties[selectedAutocompleteIndex].value,
+                    );
+                  }
+                }
+                if (
+                  e.key === 'Enter' &&
+                  e.target instanceof HTMLTextAreaElement
+                ) {
+                  if (
+                    suggestedProperties.length > 0 &&
+                    selectedAutocompleteIndex < suggestedProperties.length &&
+                    selectedAutocompleteIndex >= 0
+                  ) {
                     e.preventDefault();
-                    if (queryHistoryType && value) {
-                      setQueryHistory(value);
+                    onAcceptSuggestion(
+                      suggestedProperties[selectedAutocompleteIndex].value,
+                    );
+                  } else {
+                    // Allow shift+enter to still create new lines
+                    if (!e.shiftKey) {
+                      e.preventDefault();
+                      if (queryHistoryType && value) {
+                        setQueryHistory(value);
+                      }
+                      onSubmit?.();
                     }
-                    onSubmit?.();
                   }
                 }
-              }
-              if (
-                e.key === 'ArrowDown' &&
-                e.target instanceof HTMLTextAreaElement
-              ) {
-                if (suggestedProperties.length > 0) {
-                  e.preventDefault();
-                  setSelectedAutocompleteIndex(
-                    Math.min(
-                      selectedAutocompleteIndex + 1,
-                      suggestedProperties.length - 1,
-                      suggestionsLimit - 1,
-                    ),
-                  );
+                if (
+                  e.key === 'ArrowDown' &&
+                  e.target instanceof HTMLTextAreaElement
+                ) {
+                  if (suggestedProperties.length > 0) {
+                    e.preventDefault();
+                    setSelectedAutocompleteIndex(
+                      Math.min(
+                        selectedAutocompleteIndex + 1,
+                        suggestedProperties.length - 1,
+                        suggestionsLimit - 1,
+                      ),
+                    );
+                  }
                 }
-              }
-              if (
-                e.key === 'ArrowUp' &&
-                e.target instanceof HTMLTextAreaElement
-              ) {
-                if (suggestedProperties.length > 0) {
-                  e.preventDefault();
-                  setSelectedAutocompleteIndex(
-                    Math.max(selectedAutocompleteIndex - 1, 0),
-                  );
+                if (
+                  e.key === 'ArrowUp' &&
+                  e.target instanceof HTMLTextAreaElement
+                ) {
+                  if (suggestedProperties.length > 0) {
+                    e.preventDefault();
+                    setSelectedAutocompleteIndex(
+                      Math.max(selectedAutocompleteIndex - 1, 0),
+                    );
+                  }
                 }
+              }}
+              rightSectionWidth={rightSectionWidth}
+              rightSection={
+                language != null && onLanguageChange != null ? (
+                  <div ref={ref}>
+                    <InputLanguageSwitch
+                      language={language}
+                      onLanguageChange={onLanguageChange}
+                    />
+                  </div>
+                ) : undefined
               }
-            }}
-            rightSectionWidth={rightSectionWidth}
-            rightSection={
-              language != null && onLanguageChange != null ? (
-                <div ref={ref}>
-                  <InputLanguageSwitch
-                    language={language}
-                    onLanguageChange={onLanguageChange}
-                  />
-                </div>
-              ) : undefined
-            }
-          />
+            />
+          </div>
         </Popover.Target>
         <Popover.Dropdown className={styles.dropdown}>
           {aboveSuggestions != null && (
diff --git a/packages/app/src/components/SearchInput/InlineFilterChips.module.scss b/packages/app/src/components/SearchInput/InlineFilterChips.module.scss
new file mode 100644
index 0000000000..0794b0006d
--- /dev/null
+++ b/packages/app/src/components/SearchInput/InlineFilterChips.module.scss
@@ -0,0 +1,64 @@
+.chipsGroup {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  min-width: 0;
+  max-width: 100%;
+  max-height: 46px;
+  overflow: hidden;
+}
+
+/* When the parent input is focused/expanded, show all chips */
+/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
+:global([data-expanded='true']) .chipsGroup {
+  max-height: none;
+}
+
+.chip,
+.chipExcluded {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 1px 4px;
+  border-radius: 3px;
+  font-size: 11px;
+  line-height: 16px;
+  cursor: default;
+  white-space: nowrap;
+  max-width: 200px;
+  overflow: hidden;
+  flex-shrink: 0;
+  border: 1px solid var(--color-border-emphasis);
+  background: transparent;
+}
+
+.chipExcluded {
+  border-color: var(--mantine-color-red-light);
+}
+
+.chipField {
+  font-size: 10px;
+  flex-shrink: 0;
+  max-width: 80px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--color-text-secondary);
+}
+
+.chipOperator {
+  font-size: 10px;
+  flex-shrink: 0;
+  color: var(--color-text-muted);
+}
+
+.chipValue {
+  font-size: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--color-text);
+}
+
+.chipClose {
+  flex-shrink: 0;
+  margin-left: 1px;
+}
diff --git a/packages/app/src/components/SearchInput/InlineFilterChips.tsx b/packages/app/src/components/SearchInput/InlineFilterChips.tsx
new file mode 100644
index 0000000000..a0730bde68
--- /dev/null
+++ b/packages/app/src/components/SearchInput/InlineFilterChips.tsx
@@ -0,0 +1,95 @@
+import { memo, useCallback } from 'react';
+import { ActionIcon, Tooltip } from '@mantine/core';
+import { IconX } from '@tabler/icons-react';
+
+import type { FilterStateHook } from '@/searchFilters';
+
+import { type PillItem, removePill } from '../filterPillUtils';
+
+import styles from './InlineFilterChips.module.scss';
+
+type InlineFilterChipsProps = {
+  pills: PillItem[];
+  setFilterValue: FilterStateHook['setFilterValue'];
+  clearFilter: FilterStateHook['clearFilter'];
+};
+
+function InlineFilterChip({
+  pill,
+  onRemove,
+}: {
+  pill: PillItem;
+  onRemove: () => void;
+}) {
+  const isExcluded = pill.type === 'excluded';
+  const operator = isExcluded ? '!=' : pill.type === 'range' ? ':' : '=';
+  const ariaLabel = `Filter ${pill.field} ${operator} ${pill.value}`;
+
+  return (
+    <Tooltip label={`${pill.field} ${operator} ${pill.value}`} openDelay={300}>
+      <span
+        className={isExcluded ? styles.chipExcluded : styles.chip}
+        onMouseDown={e => e.preventDefault()}
+        data-testid="filter-chip"
+        data-field={pill.field}
+        data-type={pill.type}
+        data-value={pill.value}
+        aria-label={ariaLabel}
+      >
+        <span className={styles.chipField} data-testid="filter-chip-field">
+          {pill.field}
+        </span>
+        <span
+          className={styles.chipOperator}
+          data-testid="filter-chip-operator"
+        >
+          {operator}
+        </span>
+        <span className={styles.chipValue} data-testid="filter-chip-value">
+          {pill.value}
+        </span>
+        <ActionIcon
+          size={14}
+          variant="transparent"
+          color={isExcluded ? 'red.4' : 'gray'}
+          onClick={onRemove}
+          onMouseDown={e => e.preventDefault()}
+          className={styles.chipClose}
+          data-testid="filter-chip-remove"
+          aria-label={`Remove ${ariaLabel}`}
+        >
+          <IconX size={8} />
+        </ActionIcon>
+      </span>
+    </Tooltip>
+  );
+}
+
+export default memo(function InlineFilterChips({
+  pills,
+  setFilterValue,
+  clearFilter,
+}: InlineFilterChipsProps) {
+  const handleRemove = useCallback(
+    (pill: PillItem) => {
+      removePill(pill, setFilterValue, clearFilter);
+    },
+    [setFilterValue, clearFilter],
+  );
+
+  if (pills.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={styles.chipsGroup} data-testid="filter-chips-group">
+      {pills.map((pill, i) => (
+        <InlineFilterChip
+          key={`${pill.field}-${pill.type}-${pill.value}-${i}`}
+          pill={pill}
+          onRemove={() => handleRemove(pill)}
+        />
+      ))}
+    </div>
+  );
+});
diff --git a/packages/app/src/components/SearchInput/SearchInputV2.tsx b/packages/app/src/components/SearchInput/SearchInputV2.tsx
index 904b281f32..443db018df 100644
--- a/packages/app/src/components/SearchInput/SearchInputV2.tsx
+++ b/packages/app/src/components/SearchInput/SearchInputV2.tsx
@@ -46,6 +46,8 @@ export default function SearchInputV2({
   queryHistoryType,
   dateRange,
   sourceId,
+  filterChips,
+  onRemoveLastChip,
   'data-testid': dataTestId,
   ...props
 }: {
@@ -60,6 +62,8 @@ export default function SearchInputV2({
   queryHistoryType?: string;
   dateRange?: [Date, Date];
   sourceId?: string;
+  filterChips?: React.ReactNode;
+  onRemoveLastChip?: () => void;
   'data-testid'?: string;
 } & UseControllerProps<any> &
   TableConnectionChoice) {
@@ -129,6 +133,8 @@ export default function SearchInputV2({
       onLanguageChange={onLanguageChange}
       onSubmit={onSubmit}
       queryHistoryType={queryHistoryType}
+      filterChips={filterChips}
+      onRemoveLastChip={onRemoveLastChip}
       data-testid={dataTestId}
       aboveSuggestions={
         <>
diff --git a/packages/app/src/components/SearchInput/SearchWhereInput.module.scss b/packages/app/src/components/SearchInput/SearchWhereInput.module.scss
index 21674397ad..d5f9902363 100644
--- a/packages/app/src/components/SearchInput/SearchWhereInput.module.scss
+++ b/packages/app/src/components/SearchInput/SearchWhereInput.module.scss
@@ -23,15 +23,11 @@
     border-bottom: 2px solid var(--color-bg-brand) !important;
   }
 
-  /* When AutocompleteInput (Lucene) is expanded, round the input wrapper bottom-left corner */
+  /* When AutocompleteInput (Lucene) inputContainer is expanded (focused),
+     round the bottom-left corner */
   /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
-  :global([data-expanded='true']) :global(.mantine-InputWrapper-root) {
+  :global([data-expanded='true']) :global([data-autocomplete-container]) {
     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) */
@@ -41,15 +37,21 @@
     border-bottom-left-radius: 0;
   }
 
-  /* target only the AutocompleteInput Paper (not the SQLInlineEditor) */
+  /* target the AutocompleteInput container (Lucene mode) */
+  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
+  :global([data-autocomplete-container]) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  /* legacy: InputWrapper styles for textarea within the container */
   /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
   :global(.mantine-InputWrapper-root) {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 
     textarea {
-      border-radius: 0 var(--mantine-radius-default)
-        var(--mantine-radius-default) 0;
+      border-radius: 0;
 
       /* Prevent scrollbar when placeholder text wraps in narrow containers (maxRows=1 when unfocused) */
       overflow: hidden;
@@ -86,7 +88,7 @@
   }
 
   &.sizeSm {
-    height: 36px;
+    min-height: 36px;
   }
 }
 
diff --git a/packages/app/src/components/SearchInput/SearchWhereInput.tsx b/packages/app/src/components/SearchInput/SearchWhereInput.tsx
index f4fbd4be3d..673e882908 100644
--- a/packages/app/src/components/SearchInput/SearchWhereInput.tsx
+++ b/packages/app/src/components/SearchInput/SearchWhereInput.tsx
@@ -1,9 +1,14 @@
+import { useCallback, useMemo } from 'react';
 import { FieldPath, useController, UseControllerProps } from 'react-hook-form';
 import { TableConnectionChoice } from '@hyperdx/common-utils/dist/core/metadata';
 import { Box, Flex, Kbd } from '@mantine/core';
 
 import { SQLInlineEditorControlled } from '@/components/SQLEditor/SQLInlineEditor';
+import type { FilterStateHook } from '@/searchFilters';
 
+import { flattenFilters, removePill } from '../filterPillUtils';
+
+import InlineFilterChips from './InlineFilterChips';
 import InputLanguageSwitch from './InputLanguageSwitch';
 import SearchInputV2 from './SearchInputV2';
 
@@ -116,6 +121,11 @@ export type SearchWhereInputProps = {
    * Source id used in various queries
    */
   sourceId?: string;
+  /**
+   * Filter state hook for rendering inline filter chips inside the input.
+   * When provided, chips are shown inline before the query text.
+   */
+  searchFilters?: FilterStateHook;
 } & TableConnectionChoice &
   UseControllerProps<any>;
 
@@ -163,6 +173,7 @@ export default function SearchWhereInput({
   dateRange,
   languageName = `${name}Language`,
   sourceId,
+  searchFilters,
 }: SearchWhereInputProps) {
   const { field: languageField } = useController({
     control,
@@ -181,6 +192,34 @@ export default function SearchWhereInput({
   const tc = tableConnection ? { tableConnection } : { tableConnections };
   const sizeClass = size === 'xs' ? styles.sizeXs : styles.sizeSm;
 
+  // Inline filter chips
+  const filters = searchFilters?.filters;
+  const pills = useMemo(
+    () => (filters ? flattenFilters(filters) : []),
+    [filters],
+  );
+
+  const filterChips = searchFilters ? (
+    <InlineFilterChips
+      pills={pills}
+      setFilterValue={searchFilters.setFilterValue}
+      clearFilter={searchFilters.clearFilter}
+    />
+  ) : null;
+
+  // Returns true only when a chip was actually removed, so the input's
+  // Backspace-at-position-0 handler knows whether to consume the keystroke.
+  const onRemoveLastChip = useCallback((): boolean => {
+    if (!searchFilters || pills.length === 0) return false;
+    const lastPill = pills[pills.length - 1];
+    removePill(
+      lastPill,
+      searchFilters.setFilterValue,
+      searchFilters.clearFilter,
+    );
+    return true;
+  }, [searchFilters, pills]);
+
   return (
     <Box
       className={styles.root}
@@ -217,6 +256,8 @@ export default function SearchWhereInput({
             additionalSuggestions={additionalSuggestions}
             dateRange={dateRange}
             sourceId={sourceId}
+            filterChips={filterChips}
+            onRemoveLastChip={onRemoveLastChip}
           />
         ) : (
           <SearchInputV2
@@ -232,6 +273,8 @@ export default function SearchWhereInput({
             additionalSuggestions={additionalSuggestions}
             dateRange={dateRange}
             sourceId={sourceId}
+            filterChips={filterChips}
+            onRemoveLastChip={onRemoveLastChip}
           />
         )}
         {enableHotkey && (
diff --git a/packages/app/src/components/SearchInput/__tests__/InlineFilterChips.test.tsx b/packages/app/src/components/SearchInput/__tests__/InlineFilterChips.test.tsx
new file mode 100644
index 0000000000..bf5cde38cd
--- /dev/null
+++ b/packages/app/src/components/SearchInput/__tests__/InlineFilterChips.test.tsx
@@ -0,0 +1,203 @@
+import { fireEvent, screen } from '@testing-library/react';
+
+import type { FilterStateHook } from '@/searchFilters';
+
+import { flattenFilters } from '../../filterPillUtils';
+import InlineFilterChips from '../InlineFilterChips';
+
+function makeChipProps(filters: FilterStateHook['filters']) {
+  return {
+    pills: flattenFilters(filters),
+    setFilterValue: jest.fn(),
+    clearFilter: jest.fn(),
+  };
+}
+
+describe('InlineFilterChips', () => {
+  it('renders nothing when there are no filters', () => {
+    const props = makeChipProps({});
+    renderWithMantine(<InlineFilterChips {...props} />);
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('renders included filter chips with = operator', () => {
+    const props = makeChipProps({
+      status: {
+        included: new Set<string | boolean>(['200']),
+        excluded: new Set<string | boolean>(),
+      },
+    });
+    renderWithMantine(<InlineFilterChips {...props} />);
+    expect(screen.getByText('status')).toBeInTheDocument();
+    expect(screen.getByText('200')).toBeInTheDocument();
+  });
+
+  it('renders excluded filter chips with != operator', () => {
+    const props = makeChipProps({
+      status: {
+        included: new Set<string | boolean>(),
+        excluded: new Set<string | boolean>(['500']),
+      },
+    });
+    renderWithMantine(<InlineFilterChips {...props} />);
+    expect(screen.getByText('status')).toBeInTheDocument();
+    expect(screen.getByText('500')).toBeInTheDocument();
+  });
+
+  it('renders range filter chips', () => {
+    const props = makeChipProps({
+      duration: {
+        included: new Set<string | boolean>(),
+        excluded: new Set<string | boolean>(),
+        range: { min: 10, max: 200 },
+      },
+    });
+    renderWithMantine(<InlineFilterChips {...props} />);
+    expect(screen.getByText('duration')).toBeInTheDocument();
+    expect(screen.getByText('10 – 200')).toBeInTheDocument();
+  });
+
+  it('calls setFilterValue when removing an included chip', () => {
+    const props = makeChipProps({
+      status: {
+        included: new Set<string | boolean>(['200']),
+        excluded: new Set<string | boolean>(),
+      },
+    });
+    renderWithMantine(<InlineFilterChips {...props} />);
+    const removeButtons = screen.getAllByRole('button');
+    fireEvent.click(removeButtons[0]);
+    expect(props.setFilterValue).toHaveBeenCalledWith(
+      'status',
+      '200',
+      undefined,
+    );
+  });
+
+  it('calls setFilterValue with exclude action when removing an excluded chip', () => {
+    const props = makeChipProps({
+      status: {
+        included: new Set<string | boolean>(),
+        excluded: new Set<string | boolean>(['500']),
+      },
+    });
+    renderWithMantine(<InlineFilterChips {...props} />);
+    const removeButtons = screen.getAllByRole('button');
+    fireEvent.click(removeButtons[0]);
+    expect(props.setFilterValue).toHaveBeenCalledWith(
+      'status',
+      '500',
+      'exclude',
+    );
+  });
+
+  it('calls clearFilter when removing a range chip', () => {
+    const props = makeChipProps({
+      duration: {
+        included: new Set<string | boolean>(),
+        excluded: new Set<string | boolean>(),
+        range: { min: 0, max: 100 },
+      },
+    });
+    renderWithMantine(<InlineFilterChips {...props} />);
+    const removeButtons = screen.getAllByRole('button');
+    fireEvent.click(removeButtons[0]);
+    expect(props.clearFilter).toHaveBeenCalledWith('duration');
+  });
+
+  it('prevents default on mouseDown to avoid input blur', () => {
+    const props = makeChipProps({
+      status: {
+        included: new Set<string | boolean>(['200']),
+        excluded: new Set<string | boolean>(),
+      },
+    });
+    renderWithMantine(<InlineFilterChips {...props} />);
+    const removeButton = screen.getAllByRole('button')[0];
+    const mouseDownEvent = new MouseEvent('mousedown', {
+      bubbles: true,
+      cancelable: true,
+    });
+    const preventDefaultSpy = jest.spyOn(mouseDownEvent, 'preventDefault');
+    removeButton.dispatchEvent(mouseDownEvent);
+    expect(preventDefaultSpy).toHaveBeenCalled();
+  });
+
+  it('renders multiple chips from different fields', () => {
+    const props = makeChipProps({
+      status: {
+        included: new Set<string | boolean>(['200']),
+        excluded: new Set<string | boolean>(['500']),
+      },
+      service: {
+        included: new Set<string | boolean>(['api']),
+        excluded: new Set<string | boolean>(),
+      },
+    });
+    renderWithMantine(<InlineFilterChips {...props} />);
+    expect(screen.getByText('200')).toBeInTheDocument();
+    expect(screen.getByText('500')).toBeInTheDocument();
+    expect(screen.getByText('api')).toBeInTheDocument();
+    expect(screen.getAllByRole('button')).toHaveLength(3);
+  });
+
+  describe('overflow / container structure', () => {
+    it('wraps all chips in a single group container', () => {
+      const props = makeChipProps({
+        status: {
+          included: new Set<string | boolean>(['200', '404']),
+          excluded: new Set<string | boolean>(),
+        },
+      });
+      renderWithMantine(<InlineFilterChips {...props} />);
+      // All chips should be inside a single wrapper div (the chipsGroup)
+      const buttons = screen.getAllByRole('button');
+      const groupEl = buttons[0].closest('div');
+      expect(groupEl).toBeTruthy();
+      // All buttons share the same parent group
+      for (const btn of buttons) {
+        expect(btn.closest('div')).toBe(groupEl);
+      }
+    });
+
+    it('renders all chips even with many filters (no artificial limit)', () => {
+      const values = new Set<string | boolean>(
+        Array.from({ length: 15 }, (_, i) => `val${i}`),
+      );
+      const props = makeChipProps({
+        field: {
+          included: values,
+          excluded: new Set<string | boolean>(),
+        },
+      });
+      renderWithMantine(<InlineFilterChips {...props} />);
+      // All 15 chips should be rendered
+      expect(screen.getAllByRole('button')).toHaveLength(15);
+      for (let i = 0; i < 15; i++) {
+        expect(screen.getByText(`val${i}`)).toBeInTheDocument();
+      }
+    });
+
+    it('chips group container has flex-wrap for overflow', () => {
+      const props = makeChipProps({
+        status: {
+          included: new Set<string | boolean>(['200']),
+          excluded: new Set<string | boolean>(),
+        },
+      });
+      renderWithMantine(<InlineFilterChips {...props} />);
+      // The chips group div should have display:flex and flex-wrap:wrap
+      // (applied via CSS module, so we check the computed class is present)
+      const groupEl = screen.getByRole('button').closest('div');
+      expect(groupEl).toBeTruthy();
+      expect(groupEl!.className).toBeTruthy();
+    });
+
+    it('does not render group container when no pills', () => {
+      const props = makeChipProps({});
+      renderWithMantine(<InlineFilterChips {...props} />);
+      // No chip group rendered
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/packages/app/src/components/__tests__/ActiveFilterPills.test.tsx b/packages/app/src/components/__tests__/ActiveFilterPills.test.tsx
deleted file mode 100644
index 99dac06164..0000000000
--- a/packages/app/src/components/__tests__/ActiveFilterPills.test.tsx
+++ /dev/null
@@ -1,278 +0,0 @@
-import { act, fireEvent, screen } from '@testing-library/react';
-
-import type { FilterStateHook } from '@/searchFilters';
-
-import { ActiveFilterPills } from '../ActiveFilterPills';
-
-function makeSearchFilters(
-  filters: FilterStateHook['filters'],
-): FilterStateHook {
-  return {
-    filters,
-    setFilters: jest.fn(),
-    setFilterValue: jest.fn(),
-    setFilterRange: jest.fn(),
-    clearFilter: jest.fn(),
-    clearAllFilters: jest.fn(),
-    retainFiltersByColumns: jest.fn(() => []),
-  };
-}
-
-describe('ActiveFilterPills', () => {
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-  afterEach(() => {
-    jest.useRealTimers();
-  });
-
-  it('renders nothing when there are no filters', () => {
-    const searchFilters = makeSearchFilters({});
-    renderWithMantine(<ActiveFilterPills searchFilters={searchFilters} />);
-    expect(screen.queryByText('Clear all')).not.toBeInTheDocument();
-    expect(screen.queryByText(' = ')).not.toBeInTheDocument();
-  });
-
-  it('renders included filter pills', () => {
-    const searchFilters = makeSearchFilters({
-      status: {
-        included: new Set<string | boolean>(['200', '404']),
-        excluded: new Set<string | boolean>(),
-      },
-    });
-    renderWithMantine(<ActiveFilterPills searchFilters={searchFilters} />);
-    expect(screen.getByText('200')).toBeInTheDocument();
-    expect(screen.getByText('404')).toBeInTheDocument();
-    expect(screen.getAllByText('status')).toHaveLength(2);
-  });
-
-  it('renders excluded filter pills', () => {
-    const searchFilters = makeSearchFilters({
-      status: {
-        included: new Set<string | boolean>(),
-        excluded: new Set<string | boolean>(['500']),
-      },
-    });
-    renderWithMantine(<ActiveFilterPills searchFilters={searchFilters} />);
-    expect(screen.getByText('500')).toBeInTheDocument();
-    expect(screen.getByText('status')).toBeInTheDocument();
-  });
-
-  it('renders range filter pills', () => {
-    const searchFilters = makeSearchFilters({
-      duration: {
-        included: new Set<string | boolean>(),
-        excluded: new Set<string | boolean>(),
-        range: { min: 100, max: 500 },
-      },
-    });
-    renderWithMantine(<ActiveFilterPills searchFilters={searchFilters} />);
-    expect(screen.getByText('duration')).toBeInTheDocument();
-    expect(screen.getByText('100 – 500')).toBeInTheDocument();
-  });
-
-  it('calls setFilterValue when removing an included pill', () => {
-    const searchFilters = makeSearchFilters({
-      status: {
-        included: new Set<string | boolean>(['200']),
-        excluded: new Set<string | boolean>(),
-      },
-    });
-    renderWithMantine(<ActiveFilterPills searchFilters={searchFilters} />);
-    // Click the x button (the svg icon's parent ActionIcon)
-    const removeButtons = screen.getAllByRole('button');
-    fireEvent.click(removeButtons[0]);
-    expect(searchFilters.setFilterValue).toHaveBeenCalledWith(
-      'status',
-      '200',
-      undefined,
-    );
-  });
-
-  it('calls setFilterValue with exclude action when removing an excluded pill', () => {
-    const searchFilters = makeSearchFilters({
-      status: {
-        included: new Set<string | boolean>(),
-        excluded: new Set<string | boolean>(['500']),
-      },
-    });
-    renderWithMantine(<ActiveFilterPills searchFilters={searchFilters} />);
-    const removeButtons = screen.getAllByRole('button');
-    fireEvent.click(removeButtons[0]);
-    expect(searchFilters.setFilterValue).toHaveBeenCalledWith(
-      'status',
-      '500',
-      'exclude',
-    );
-  });
-
-  it('calls clearFilter when removing a range pill', () => {
-    const searchFilters = makeSearchFilters({
-      duration: {
-        included: new Set<string | boolean>(),
-        excluded: new Set<string | boolean>(),
-        range: { min: 0, max: 100 },
-      },
-    });
-    renderWithMantine(<ActiveFilterPills searchFilters={searchFilters} />);
-    const removeButtons = screen.getAllByRole('button');
-    fireEvent.click(removeButtons[0]);
-    expect(searchFilters.clearFilter).toHaveBeenCalledWith('duration');
-  });
-
-  it('does not show "Clear all" when there is only one pill', () => {
-    const searchFilters = makeSearchFilters({
-      status: {
-        included: new Set<string | boolean>(['200']),
-        excluded: new Set<string | boolean>(),
-      },
-    });
-    renderWithMantine(<ActiveFilterPills searchFilters={searchFilters} />);
-    expect(screen.queryByText('Clear all')).not.toBeInTheDocument();
-  });
-
-  it('shows "Clear all" when there are 2+ pills', () => {
-    const searchFilters = makeSearchFilters({
-      status: {
-        included: new Set<string | boolean>(['200', '404']),
-        excluded: new Set<string | boolean>(),
-      },
-    });
-    renderWithMantine(<ActiveFilterPills searchFilters={searchFilters} />);
-    expect(screen.getByText('Clear all')).toBeInTheDocument();
-  });
-
-  it('requires double click to clear all filters', () => {
-    const searchFilters = makeSearchFilters({
-      status: {
-        included: new Set<string | boolean>(['200', '404']),
-        excluded: new Set<string | boolean>(),
-      },
-    });
-    renderWithMantine(<ActiveFilterPills searchFilters={searchFilters} />);
-
-    // First click shows confirmation
-    fireEvent.click(screen.getByText('Clear all'));
-    expect(searchFilters.clearAllFilters).not.toHaveBeenCalled();
-    expect(screen.getByText('Confirm clear all?')).toBeInTheDocument();
-
-    // Second click actually clears
-    fireEvent.click(screen.getByText('Confirm clear all?'));
-    expect(searchFilters.clearAllFilters).toHaveBeenCalledTimes(1);
-  });
-
-  it('resets confirm state after 2s timeout', () => {
-    const searchFilters = makeSearchFilters({
-      status: {
-        included: new Set<string | boolean>(['200', '404']),
-        excluded: new Set<string | boolean>(),
-      },
-    });
-    renderWithMantine(<ActiveFilterPills searchFilters={searchFilters} />);
-
-    fireEvent.click(screen.getByText('Clear all'));
-    expect(screen.getByText('Confirm clear all?')).toBeInTheDocument();
-
-    act(() => {
-      jest.advanceTimersByTime(2000);
-    });
-
-    expect(screen.getByText('Clear all')).toBeInTheDocument();
-    expect(screen.queryByText('Confirm clear all?')).not.toBeInTheDocument();
-  });
-
-  it('resets confirm state on mouse leave', () => {
-    const searchFilters = makeSearchFilters({
-      status: {
-        included: new Set<string | boolean>(['200', '404']),
-        excluded: new Set<string | boolean>(),
-      },
-    });
-    renderWithMantine(<ActiveFilterPills searchFilters={searchFilters} />);
-
-    fireEvent.click(screen.getByText('Clear all'));
-    expect(screen.getByText('Confirm clear all?')).toBeInTheDocument();
-
-    fireEvent.mouseLeave(screen.getByText('Confirm clear all?'));
-    expect(screen.getByText('Clear all')).toBeInTheDocument();
-  });
-
-  it('collapses pills beyond MAX_VISIBLE_PILLS and shows "+N more"', () => {
-    // Create 10 included values to exceed the limit of 8
-    const values = new Set<string | boolean>(
-      Array.from({ length: 10 }, (_, i) => `val${i}`),
-    );
-    const searchFilters = makeSearchFilters({
-      field: {
-        included: values,
-        excluded: new Set<string | boolean>(),
-      },
-    });
-    renderWithMantine(<ActiveFilterPills searchFilters={searchFilters} />);
-
-    expect(screen.getByText('+2 more')).toBeInTheDocument();
-    // Only 8 value pills should be visible
-    expect(screen.queryByText('val8')).not.toBeInTheDocument();
-    expect(screen.queryByText('val9')).not.toBeInTheDocument();
-  });
-
-  it('expands to show all pills when clicking "+N more"', () => {
-    const values = new Set<string | boolean>(
-      Array.from({ length: 10 }, (_, i) => `val${i}`),
-    );
-    const searchFilters = makeSearchFilters({
-      field: {
-        included: values,
-        excluded: new Set<string | boolean>(),
-      },
-    });
-    renderWithMantine(<ActiveFilterPills searchFilters={searchFilters} />);
-
-    fireEvent.click(screen.getByText('+2 more'));
-
-    // All values should now be visible
-    for (let i = 0; i < 10; i++) {
-      expect(screen.getByText(`val${i}`)).toBeInTheDocument();
-    }
-    expect(screen.getByText('Show less')).toBeInTheDocument();
-    expect(screen.queryByText('+2 more')).not.toBeInTheDocument();
-  });
-
-  it('collapses back when clicking "Show less"', () => {
-    const values = new Set<string | boolean>(
-      Array.from({ length: 10 }, (_, i) => `val${i}`),
-    );
-    const searchFilters = makeSearchFilters({
-      field: {
-        included: values,
-        excluded: new Set<string | boolean>(),
-      },
-    });
-    renderWithMantine(<ActiveFilterPills searchFilters={searchFilters} />);
-
-    fireEvent.click(screen.getByText('+2 more'));
-    fireEvent.click(screen.getByText('Show less'));
-
-    expect(screen.getByText('+2 more')).toBeInTheDocument();
-    expect(screen.queryByText('val8')).not.toBeInTheDocument();
-  });
-
-  it('renders mixed included, excluded, and range filters together', () => {
-    const searchFilters = makeSearchFilters({
-      status: {
-        included: new Set<string | boolean>(['200']),
-        excluded: new Set<string | boolean>(['500']),
-      },
-      duration: {
-        included: new Set<string | boolean>(),
-        excluded: new Set<string | boolean>(),
-        range: { min: 10, max: 200 },
-      },
-    });
-    renderWithMantine(<ActiveFilterPills searchFilters={searchFilters} />);
-
-    expect(screen.getByText('200')).toBeInTheDocument();
-    expect(screen.getByText('500')).toBeInTheDocument();
-    expect(screen.getByText('10 – 200')).toBeInTheDocument();
-  });
-});
diff --git a/packages/app/src/components/__tests__/filterPillUtils.test.ts b/packages/app/src/components/__tests__/filterPillUtils.test.ts
new file mode 100644
index 0000000000..fa2f753cb2
--- /dev/null
+++ b/packages/app/src/components/__tests__/filterPillUtils.test.ts
@@ -0,0 +1,184 @@
+import { flattenFilters, PillItem, removePill } from '../filterPillUtils';
+
+describe('filterPillUtils', () => {
+  describe('removePill', () => {
+    it('calls setFilterValue for included pills', () => {
+      const setFilterValue = jest.fn();
+      const clearFilter = jest.fn();
+      const pill: PillItem = {
+        field: 'status',
+        value: '200',
+        type: 'included',
+        rawValue: '200',
+      };
+      removePill(pill, setFilterValue, clearFilter);
+      expect(setFilterValue).toHaveBeenCalledWith('status', '200', undefined);
+      expect(clearFilter).not.toHaveBeenCalled();
+    });
+
+    it('calls setFilterValue with exclude action for excluded pills', () => {
+      const setFilterValue = jest.fn();
+      const clearFilter = jest.fn();
+      const pill: PillItem = {
+        field: 'status',
+        value: '500',
+        type: 'excluded',
+        rawValue: '500',
+      };
+      removePill(pill, setFilterValue, clearFilter);
+      expect(setFilterValue).toHaveBeenCalledWith('status', '500', 'exclude');
+      expect(clearFilter).not.toHaveBeenCalled();
+    });
+
+    it('calls clearFilter for range pills', () => {
+      const setFilterValue = jest.fn();
+      const clearFilter = jest.fn();
+      const pill: PillItem = {
+        field: 'duration',
+        value: '100 – 500',
+        type: 'range',
+      };
+      removePill(pill, setFilterValue, clearFilter);
+      expect(clearFilter).toHaveBeenCalledWith('duration');
+      expect(setFilterValue).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('flattenFilters', () => {
+    it('returns empty array for empty filters', () => {
+      expect(flattenFilters({})).toEqual([]);
+    });
+
+    it('flattens included filters', () => {
+      const result = flattenFilters({
+        status: {
+          included: new Set<string | boolean>(['200', '404']),
+          excluded: new Set<string | boolean>(),
+        },
+      });
+      expect(result).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            field: 'status',
+            value: '200',
+            type: 'included',
+            rawValue: '200',
+          }),
+          expect.objectContaining({
+            field: 'status',
+            value: '404',
+            type: 'included',
+            rawValue: '404',
+          }),
+        ]),
+      );
+      expect(result).toHaveLength(2);
+    });
+
+    it('flattens excluded filters', () => {
+      const result = flattenFilters({
+        status: {
+          included: new Set<string | boolean>(),
+          excluded: new Set<string | boolean>(['500']),
+        },
+      });
+      expect(result).toEqual([
+        expect.objectContaining({
+          field: 'status',
+          value: '500',
+          type: 'excluded',
+          rawValue: '500',
+        }),
+      ]);
+    });
+
+    it('flattens range filters', () => {
+      const result = flattenFilters({
+        duration: {
+          included: new Set<string | boolean>(),
+          excluded: new Set<string | boolean>(),
+          range: { min: 100, max: 500 },
+        },
+      });
+      expect(result).toEqual([
+        expect.objectContaining({
+          field: 'duration',
+          value: '100 – 500',
+          type: 'range',
+        }),
+      ]);
+      // range pills should not have rawValue
+      expect(result[0].rawValue).toBeUndefined();
+    });
+
+    it('flattens mixed filters from multiple fields', () => {
+      const result = flattenFilters({
+        status: {
+          included: new Set<string | boolean>(['200']),
+          excluded: new Set<string | boolean>(['500']),
+        },
+        duration: {
+          included: new Set<string | boolean>(),
+          excluded: new Set<string | boolean>(),
+          range: { min: 10, max: 200 },
+        },
+      });
+      expect(result).toHaveLength(3);
+      expect(result).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            field: 'status',
+            type: 'included',
+            value: '200',
+          }),
+          expect.objectContaining({
+            field: 'status',
+            type: 'excluded',
+            value: '500',
+          }),
+          expect.objectContaining({
+            field: 'duration',
+            type: 'range',
+            value: '10 – 200',
+          }),
+        ]),
+      );
+    });
+
+    it('handles boolean values', () => {
+      const result = flattenFilters({
+        active: {
+          included: new Set<string | boolean>([true]),
+          excluded: new Set<string | boolean>([false]),
+        },
+      });
+      expect(result).toHaveLength(2);
+      expect(result).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            field: 'active',
+            value: 'true',
+            type: 'included',
+            rawValue: true,
+          }),
+          expect.objectContaining({
+            field: 'active',
+            value: 'false',
+            type: 'excluded',
+            rawValue: false,
+          }),
+        ]),
+      );
+    });
+
+    it('skips fields with no included, excluded, or range values', () => {
+      const result = flattenFilters({
+        empty: {
+          included: new Set<string | boolean>(),
+          excluded: new Set<string | boolean>(),
+        },
+      });
+      expect(result).toEqual([]);
+    });
+  });
+});
diff --git a/packages/app/src/components/filterPillUtils.ts b/packages/app/src/components/filterPillUtils.ts
new file mode 100644
index 0000000000..9b8e452f24
--- /dev/null
+++ b/packages/app/src/components/filterPillUtils.ts
@@ -0,0 +1,56 @@
+import type { FilterState } from '@hyperdx/common-utils/dist/filters';
+
+import type { FilterStateHook } from '@/searchFilters';
+
+export type PillItem = {
+  field: string;
+  value: string;
+  type: 'included' | 'excluded' | 'range';
+  rawValue?: string | boolean;
+};
+
+export function flattenFilters(filters: FilterState): PillItem[] {
+  const pills: PillItem[] = [];
+  for (const [field, state] of Object.entries(filters)) {
+    for (const val of state.included) {
+      pills.push({
+        field,
+        value: String(val),
+        type: 'included',
+        rawValue: val,
+      });
+    }
+    for (const val of state.excluded) {
+      pills.push({
+        field,
+        value: String(val),
+        type: 'excluded',
+        rawValue: val,
+      });
+    }
+    if (state.range != null) {
+      pills.push({
+        field,
+        value: `${state.range.min} – ${state.range.max}`,
+        type: 'range',
+      });
+    }
+  }
+  return pills;
+}
+
+export function removePill(
+  pill: PillItem,
+  setFilterValue: FilterStateHook['setFilterValue'],
+  clearFilter: FilterStateHook['clearFilter'],
+): void {
+  if (pill.type === 'range') {
+    clearFilter(pill.field);
+  } else {
+    setFilterValue(
+      pill.field,
+      pill.rawValue!,
+      pill.type === 'excluded' ? 'exclude' : undefined,
+    );
+  }
+}
diff --git a/packages/app/tests/e2e/components/FilterChipsComponent.ts b/packages/app/tests/e2e/components/FilterChipsComponent.ts
new file mode 100644
index 0000000000..27ae0f984e
--- /dev/null
+++ b/packages/app/tests/e2e/components/FilterChipsComponent.ts
@@ -0,0 +1,98 @@
+/**
+ * FilterChipsComponent — interactions for the inline filter chips rendered
+ * inside the WHERE input on the search page.
+ *
+ * Chips are emitted by InlineFilterChips. Each chip element is tagged with:
+ *   - data-testid="filter-chip"
+ *   - data-field={field}, data-type={included|excluded|range}, data-value={value}
+ * and contains a remove button with data-testid="filter-chip-remove".
+ *
+ * The group container has data-testid="filter-chips-group".
+ */
+import { Locator, Page } from '@playwright/test';
+
+export type ChipType = 'included' | 'excluded' | 'range';
+
+/**
+ * Describes a single filter to seed via the URL. Used by buildFiltersUrl to
+ * bypass the sidebar — important when multi-value tests would otherwise be
+ * blocked by the sidebar facet collapsing to "only currently matching values"
+ * after the first filter is applied.
+ */
+export type SeedFilter =
+  | { field: string; values: string[]; mode: 'included' | 'excluded' }
+  | { field: string; range: { min: number; max: number } };
+
+/**
+ * Encode the array of filters into a value matching DBSearchPage's URL state
+ * encoding (parseAsJsonEncoded = encodeURIComponent(JSON.stringify(...))).
+ */
+export function buildFiltersUrlParam(filters: SeedFilter[]): string {
+  const sqlFilters = filters.map(f => {
+    if ('range' in f) {
+      return {
+        type: 'sql' as const,
+        condition: `${f.field} BETWEEN ${f.range.min} AND ${f.range.max}`,
+      };
+    }
+    const op = f.mode === 'excluded' ? 'NOT IN' : 'IN';
+    const list = f.values.map(v => `'${v.replace(/'/g, "''")}'`).join(', ');
+    return { type: 'sql' as const, condition: `${f.field} ${op} (${list})` };
+  });
+  return encodeURIComponent(JSON.stringify(sqlFilters));
+}
+
+export class FilterChipsComponent {
+  readonly page: Page;
+
+  constructor(page: Page) {
+    this.page = page;
+  }
+
+  /** Container for the chip group inside the input. */
+  get group(): Locator {
+    return this.page.getByTestId('filter-chips-group');
+  }
+
+  /** All chip elements currently rendered. */
+  get chips(): Locator {
+    return this.page.getByTestId('filter-chip');
+  }
+
+  /** Locate a chip by (field, value, type). */
+  chip(field: string, value: string, type: ChipType = 'included'): Locator {
+    return this.page.locator(
+      `[data-testid="filter-chip"][data-field="${field}"][data-value="${value}"][data-type="${type}"]`,
+    );
+  }
+
+  /** Remove button inside a specific chip. */
+  remove(field: string, value: string, type: ChipType = 'included'): Locator {
+    return this.chip(field, value, type).getByTestId('filter-chip-remove');
+  }
+
+  async getCount(): Promise<number> {
+    return this.chips.count();
+  }
+
+  /** Read the displayed "<field> <op> <value>" text from a chip. */
+  async readChipText(
+    field: string,
+    value: string,
+    type: ChipType = 'included',
+  ): Promise<string> {
+    const chip = this.chip(field, value, type);
+    const f = await chip.getByTestId('filter-chip-field').textContent();
+    const op = await chip.getByTestId('filter-chip-operator').textContent();
+    const v = await chip.getByTestId('filter-chip-value').textContent();
+    return `${(f ?? '').trim()} ${(op ?? '').trim()} ${(v ?? '').trim()}`;
+  }
+
+  async clickRemove(
+    field: string,
+    value: string,
+    type: ChipType = 'included',
+  ): Promise<void> {
+    await this.remove(field, value, type).click();
+  }
+}
diff --git a/packages/app/tests/e2e/features/search/filter-chips.spec.ts b/packages/app/tests/e2e/features/search/filter-chips.spec.ts
new file mode 100644
index 0000000000..befec921fc
--- /dev/null
+++ b/packages/app/tests/e2e/features/search/filter-chips.spec.ts
@@ -0,0 +1,511 @@
+/**
+ * Inline filter chips inside the WHERE input
+ *
+ * These tests exercise the chips rendered by `InlineFilterChips` and the
+ * surrounding `SearchWhereInput` / `AutocompleteInput` / `SQLInlineEditor`
+ * integration — rendering, removal, persistence, keyboard interactions,
+ * focus/blur, language switching, and visual overflow.
+ *
+ * Strategy
+ * --------
+ * - "Sidebar" tests apply filters via the sidebar to exercise the full user
+ *   flow. They need the time range to cover the seed data, which is what
+ *   the `setupSidebarReadyPage` helper does.
+ * - "URL-seeded" tests seed filters via the `?filters=` URL parameter (the
+ *   exact same encoding used by DBSearchPage's `parseAsJsonEncoded`). This
+ *   bypasses the sidebar's "show only matching values" facet behavior —
+ *   without it, you can't reliably click multiple values within the same
+ *   field after the first one is applied. The chip subsystem renders purely
+ *   from URL/form state, so URL-seeding is faithful coverage.
+ */
+import { Page } from '@playwright/test';
+
+import {
+  buildFiltersUrlParam,
+  SeedFilter,
+} from '../../components/FilterChipsComponent';
+import { SearchPage } from '../../page-objects/SearchPage';
+import { expect, test } from '../../utils/base-test';
+
+const SEVERITY = 'SeverityText';
+const SERVICE = 'ServiceName';
+const SEV_INFO = 'info';
+const SEV_ERROR = 'error';
+const SEV_WARN = 'warn';
+const SEV_DEBUG = 'debug';
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+async function ensureGroupOpen(
+  searchPage: SearchPage,
+  column: string,
+  value: string,
+): Promise<void> {
+  const cb = searchPage.filters.getFilterCheckboxInput(column, value);
+  if (await cb.isVisible()) return;
+  await searchPage.filters.openFilterGroup(column);
+  await cb.waitFor({ state: 'visible', timeout: 10000 });
+}
+
+async function applySidebarFilter(
+  searchPage: SearchPage,
+  column: string,
+  value: string,
+): Promise<void> {
+  await ensureGroupOpen(searchPage, column, value);
+  await searchPage.filters.applyFilter(column, value);
+  await expect(searchPage.chips.chip(column, value, 'included')).toBeVisible();
+  // The form-to-URL write is debounced ~1s; wait for the URL to reflect the
+  // filter so subsequent page.reload() / page.goto() preserve the state.
+  await searchPage.page.waitForFunction(
+    v => decodeURIComponent(window.location.search).includes(`'${v}'`),
+    value,
+    { timeout: 5000 },
+  );
+}
+
+async function excludeSidebarFilter(
+  searchPage: SearchPage,
+  column: string,
+  value: string,
+): Promise<void> {
+  await ensureGroupOpen(searchPage, column, value);
+  await searchPage.filters.excludeFilter(column, value);
+  await expect(searchPage.chips.chip(column, value, 'excluded')).toBeVisible();
+}
+
+/**
+ * Bootstrap a search page where the seed data falls inside the time window.
+ * Needed for sidebar-driven tests because the facets only populate when the
+ * query window covers the seed range.
+ */
+async function setupSidebarReadyPage(
+  page: Page,
+  searchPage: SearchPage,
+): Promise<void> {
+  await page.goto('/search', { waitUntil: 'domcontentloaded' });
+  await searchPage.timePicker.input.waitFor({
+    state: 'visible',
+    timeout: 30000,
+  });
+  await searchPage.timePicker.selectRelativeTime('Last 1 days');
+}
+
+/**
+ * Navigate to /search with pre-seeded filters and wait for the chip subsystem
+ * to render the expected number of chips. Chip rendering is derived from URL
+ * state alone, so we don't need the table or sidebar facets to populate.
+ */
+async function gotoWithFilters(
+  page: Page,
+  searchPage: SearchPage,
+  filters: SeedFilter[],
+): Promise<void> {
+  const filtersParam = buildFiltersUrlParam(filters);
+  // Set an explicit 1-day window so Live Tail's 15-minute default doesn't
+  // interfere with first-paint timing.
+  const now = Date.now();
+  const oneDayAgo = now - 24 * 60 * 60 * 1000;
+  const url = `/search?filters=${filtersParam}&isLive=false&from=${oneDayAgo}&to=${now}`;
+  const expectedCount = filters.reduce(
+    (acc, f) => acc + ('range' in f ? 1 : f.values.length),
+    0,
+  );
+
+  await page.goto(url, { waitUntil: 'load' });
+  await searchPage.timePicker.input.waitFor({
+    state: 'visible',
+    timeout: 30000,
+  });
+  await searchPage.input.waitFor({ state: 'visible', timeout: 15000 });
+
+  if (expectedCount === 0) return;
+
+  // Wait for the URL filters to materialize as chips. In dev mode webpack the
+  // initial hydration can race with the chip subsystem's first read of
+  // URL filters, so we reload once as a fallback to force a clean re-mount.
+  try {
+    await expect(searchPage.chips.chips).toHaveCount(expectedCount, {
+      timeout: 15000,
+    });
+  } catch {
+    await page.reload({ waitUntil: 'load' });
+    await searchPage.input.waitFor({ state: 'visible', timeout: 15000 });
+    await expect(searchPage.chips.chips).toHaveCount(expectedCount, {
+      timeout: 20000,
+    });
+  }
+}
+
+// ─── Sidebar-driven flow ────────────────────────────────────────────────────
+
+test.describe(
+  'Filter chips — sidebar-driven flow',
+  { tag: ['@search'] },
+  () => {
+    let searchPage: SearchPage;
+
+    test.beforeEach(async ({ page }) => {
+      searchPage = new SearchPage(page);
+      await setupSidebarReadyPage(page, searchPage);
+    });
+
+    test('Renders no chips when no filters are applied', async () => {
+      await expect(searchPage.chips.group).toBeHidden();
+      await expect(searchPage.chips.chips).toHaveCount(0);
+    });
+
+    test('Renders an included chip with = operator when a filter is applied', async () => {
+      await applySidebarFilter(searchPage, SEVERITY, SEV_INFO);
+      const text = await searchPage.chips.readChipText(SEVERITY, SEV_INFO);
+      expect(text).toBe(`${SEVERITY} = ${SEV_INFO}`);
+    });
+
+    test('Renders an excluded chip with != operator when a filter is excluded', async () => {
+      await excludeSidebarFilter(searchPage, SEVERITY, SEV_ERROR);
+      const text = await searchPage.chips.readChipText(
+        SEVERITY,
+        SEV_ERROR,
+        'excluded',
+      );
+      expect(text).toBe(`${SEVERITY} != ${SEV_ERROR}`);
+    });
+
+    test('Clicking remove button on a chip removes the filter', async () => {
+      await applySidebarFilter(searchPage, SEVERITY, SEV_INFO);
+
+      await searchPage.chips.clickRemove(SEVERITY, SEV_INFO);
+      await expect(searchPage.chips.chip(SEVERITY, SEV_INFO)).toBeHidden();
+
+      // Sidebar checkbox should also reflect the removal
+      const input = searchPage.filters.getFilterCheckboxInput(
+        SEVERITY,
+        SEV_INFO,
+      );
+      await expect(input).not.toBeChecked();
+    });
+
+    test('Removing an excluded chip clears the exclusion', async () => {
+      await excludeSidebarFilter(searchPage, SEVERITY, SEV_ERROR);
+
+      await searchPage.chips.clickRemove(SEVERITY, SEV_ERROR, 'excluded');
+      await expect(
+        searchPage.chips.chip(SEVERITY, SEV_ERROR, 'excluded'),
+      ).toBeHidden();
+    });
+
+    test('Clicking the chip body does not blur the WHERE input', async () => {
+      await applySidebarFilter(searchPage, SEVERITY, SEV_INFO);
+
+      await searchPage.input.click();
+      await expect(searchPage.input).toBeFocused();
+
+      await searchPage.chips
+        .chip(SEVERITY, SEV_INFO)
+        .getByTestId('filter-chip-value')
+        .click();
+
+      await expect(searchPage.input).toBeFocused();
+    });
+
+    test('Typed text in WHERE input is preserved when a chip is removed', async () => {
+      await applySidebarFilter(searchPage, SEVERITY, SEV_INFO);
+
+      await searchPage.input.click();
+      await searchPage.input.fill('hello world');
+      await expect(searchPage.input).toHaveValue('hello world');
+
+      await searchPage.chips.clickRemove(SEVERITY, SEV_INFO);
+
+      await expect(searchPage.chips.chip(SEVERITY, SEV_INFO)).toBeHidden();
+      await expect(searchPage.input).toHaveValue('hello world');
+    });
+
+    test('Backspace with no chips and empty input is a no-op', async ({
+      page,
+    }) => {
+      await searchPage.input.click();
+      await page.keyboard.press('Backspace');
+      await expect(searchPage.chips.chips).toHaveCount(0);
+      await expect(searchPage.input).toHaveValue('');
+    });
+
+    test('Backspace mid-text deletes a character (not a chip)', async ({
+      page,
+    }) => {
+      await applySidebarFilter(searchPage, SEVERITY, SEV_INFO);
+
+      await searchPage.input.click();
+      await searchPage.input.fill('hello');
+      await page.keyboard.press('Backspace');
+
+      await expect(searchPage.input).toHaveValue('hell');
+      await expect(searchPage.chips.chip(SEVERITY, SEV_INFO)).toBeVisible();
+    });
+
+    test('Backspace at start of non-empty text removes a chip but preserves the text', async ({
+      page,
+    }) => {
+      await applySidebarFilter(searchPage, SEVERITY, SEV_INFO);
+
+      await searchPage.input.click();
+      await searchPage.input.fill('text');
+      await page.keyboard.press('Home');
+      await page.keyboard.press('Backspace');
+
+      await expect(searchPage.chips.chip(SEVERITY, SEV_INFO)).toBeHidden();
+      await expect(searchPage.input).toHaveValue('text');
+    });
+
+    test('Chips persist through page reload', async ({ page }) => {
+      await applySidebarFilter(searchPage, SEVERITY, SEV_INFO);
+
+      await page.reload();
+      await searchPage.timePicker.input.waitFor({
+        state: 'visible',
+        timeout: 30000,
+      });
+      await expect(searchPage.chips.chip(SEVERITY, SEV_INFO)).toBeVisible({
+        timeout: 15000,
+      });
+    });
+
+    test('Chips persist when switching from Lucene to SQL mode', async () => {
+      await applySidebarFilter(searchPage, SEVERITY, SEV_INFO);
+
+      await searchPage.switchToSQLMode();
+
+      await expect(searchPage.chips.chip(SEVERITY, SEV_INFO)).toBeVisible();
+    });
+
+    test('Chips persist when switching from SQL back to Lucene', async () => {
+      await searchPage.switchToSQLMode();
+      await applySidebarFilter(searchPage, SEVERITY, SEV_INFO);
+
+      await searchPage.switchToLuceneMode();
+
+      await expect(searchPage.chips.chip(SEVERITY, SEV_INFO)).toBeVisible();
+    });
+
+    test('Chips have accessible labels for screen readers', async () => {
+      await applySidebarFilter(searchPage, SEVERITY, SEV_INFO);
+
+      const chip = searchPage.chips.chip(SEVERITY, SEV_INFO);
+      await expect(chip).toHaveAttribute(
+        'aria-label',
+        `Filter ${SEVERITY} = ${SEV_INFO}`,
+      );
+
+      const remove = searchPage.chips.remove(SEVERITY, SEV_INFO);
+      await expect(remove).toHaveAttribute(
+        'aria-label',
+        `Remove Filter ${SEVERITY} = ${SEV_INFO}`,
+      );
+    });
+
+    test('Hovering a chip shows a tooltip with the full filter description', async ({
+      page,
+    }) => {
+      await applySidebarFilter(searchPage, SEVERITY, SEV_INFO);
+
+      await searchPage.chips.chip(SEVERITY, SEV_INFO).hover();
+
+      await expect(
+        page.getByRole('tooltip', { name: `${SEVERITY} = ${SEV_INFO}` }),
+      ).toBeVisible({ timeout: 2000 });
+    });
+
+    test('Removing a chip updates the search results table', async ({
+      page,
+    }) => {
+      await applySidebarFilter(searchPage, SEVERITY, SEV_INFO);
+
+      await searchPage.chips.clickRemove(SEVERITY, SEV_INFO);
+      await expect(searchPage.chips.chips).toHaveCount(0);
+      // Filter change is debounced (~1s); allow the query to settle.
+      await page.waitForLoadState('networkidle').catch(() => {});
+    });
+  },
+);
+
+// ─── URL-seeded multi-chip flow ─────────────────────────────────────────────
+
+test.describe(
+  'Filter chips — URL-seeded multi-chip flow',
+  { tag: ['@search'] },
+  () => {
+    let searchPage: SearchPage;
+
+    test.beforeEach(async ({ page }) => {
+      searchPage = new SearchPage(page);
+    });
+
+    test('Renders separate chips for each value in the same field', async ({
+      page,
+    }) => {
+      await gotoWithFilters(page, searchPage, [
+        { field: SEVERITY, values: [SEV_INFO, SEV_WARN], mode: 'included' },
+      ]);
+
+      await expect(searchPage.chips.chip(SEVERITY, SEV_INFO)).toBeVisible();
+      await expect(searchPage.chips.chip(SEVERITY, SEV_WARN)).toBeVisible();
+      await expect(searchPage.chips.chips).toHaveCount(2);
+    });
+
+    test('Renders chips for multiple fields simultaneously', async ({
+      page,
+    }) => {
+      await gotoWithFilters(page, searchPage, [
+        { field: SEVERITY, values: [SEV_INFO], mode: 'included' },
+        { field: SERVICE, values: ['api-server'], mode: 'included' },
+      ]);
+
+      await expect(searchPage.chips.chip(SEVERITY, SEV_INFO)).toBeVisible();
+      await expect(searchPage.chips.chip(SERVICE, 'api-server')).toBeVisible();
+      await expect(searchPage.chips.chips).toHaveCount(2);
+    });
+
+    test('Renders included and excluded chips for the same field side-by-side', async ({
+      page,
+    }) => {
+      await gotoWithFilters(page, searchPage, [
+        { field: SEVERITY, values: [SEV_INFO], mode: 'included' },
+        { field: SEVERITY, values: [SEV_ERROR], mode: 'excluded' },
+      ]);
+
+      await expect(
+        searchPage.chips.chip(SEVERITY, SEV_INFO, 'included'),
+      ).toBeVisible();
+      await expect(
+        searchPage.chips.chip(SEVERITY, SEV_ERROR, 'excluded'),
+      ).toBeVisible();
+      await expect(searchPage.chips.chips).toHaveCount(2);
+    });
+
+    test('Removing one chip keeps other chips intact', async ({ page }) => {
+      await gotoWithFilters(page, searchPage, [
+        { field: SEVERITY, values: [SEV_INFO, SEV_WARN], mode: 'included' },
+      ]);
+
+      await searchPage.chips.clickRemove(SEVERITY, SEV_INFO);
+
+      await expect(searchPage.chips.chip(SEVERITY, SEV_INFO)).toBeHidden();
+      await expect(searchPage.chips.chip(SEVERITY, SEV_WARN)).toBeVisible();
+      await expect(searchPage.chips.chips).toHaveCount(1);
+    });
+
+    test('Removing each chip in turn reaches an empty chip set', async ({
+      page,
+    }) => {
+      await gotoWithFilters(page, searchPage, [
+        { field: SEVERITY, values: [SEV_INFO, SEV_WARN], mode: 'included' },
+      ]);
+
+      await searchPage.chips.clickRemove(SEVERITY, SEV_INFO);
+      await expect(searchPage.chips.chips).toHaveCount(1);
+      await searchPage.chips.clickRemove(SEVERITY, SEV_WARN);
+      await expect(searchPage.chips.chips).toHaveCount(0);
+      await expect(searchPage.chips.group).toBeHidden();
+    });
+
+    test('Clicking remove button keeps the WHERE input focused', async ({
+      page,
+    }) => {
+      await gotoWithFilters(page, searchPage, [
+        { field: SEVERITY, values: [SEV_INFO, SEV_WARN], mode: 'included' },
+      ]);
+
+      await searchPage.input.click();
+      await expect(searchPage.input).toBeFocused();
+
+      await searchPage.chips.clickRemove(SEVERITY, SEV_INFO);
+
+      await expect(searchPage.input).toBeFocused();
+    });
+
+    test('Backspace at position 0 removes the last chip (Lucene)', async ({
+      page,
+    }) => {
+      await gotoWithFilters(page, searchPage, [
+        { field: SEVERITY, values: [SEV_INFO, SEV_WARN], mode: 'included' },
+      ]);
+
+      await searchPage.input.click();
+      await page.keyboard.press('Backspace');
+
+      await expect(searchPage.chips.chips).toHaveCount(1);
+    });
+
+    test('Excluded chip is visually distinguished from included chip', async ({
+      page,
+    }) => {
+      await gotoWithFilters(page, searchPage, [
+        { field: SEVERITY, values: [SEV_INFO], mode: 'included' },
+        { field: SEVERITY, values: [SEV_ERROR], mode: 'excluded' },
+      ]);
+
+      const included = searchPage.chips.chip(SEVERITY, SEV_INFO, 'included');
+      const excluded = searchPage.chips.chip(SEVERITY, SEV_ERROR, 'excluded');
+
+      const includedBorder = await included.evaluate(
+        el => getComputedStyle(el).borderColor,
+      );
+      const excludedBorder = await excluded.evaluate(
+        el => getComputedStyle(el).borderColor,
+      );
+
+      expect(includedBorder).not.toBe(excludedBorder);
+    });
+
+    test('Many chips render and the chip group does not push the input off-screen', async ({
+      page,
+    }) => {
+      await gotoWithFilters(page, searchPage, [
+        {
+          field: SEVERITY,
+          values: [SEV_INFO, SEV_WARN, SEV_ERROR, SEV_DEBUG],
+          mode: 'included',
+        },
+        {
+          field: SERVICE,
+          values: ['api-server', 'frontend', 'CartService', 'worker'],
+          mode: 'included',
+        },
+      ]);
+
+      const overflowX = await searchPage.chips.group.evaluate(el => {
+        return el.scrollWidth - el.clientWidth;
+      });
+      expect(overflowX).toBeLessThanOrEqual(1);
+    });
+
+    test('Focusing the WHERE input expands the chip area', async ({ page }) => {
+      await gotoWithFilters(page, searchPage, [
+        {
+          field: SEVERITY,
+          values: [SEV_INFO, SEV_WARN, SEV_ERROR, SEV_DEBUG],
+          mode: 'included',
+        },
+        {
+          field: SERVICE,
+          values: ['api-server', 'frontend', 'CartService', 'worker'],
+          mode: 'included',
+        },
+      ]);
+
+      await page.locator('body').click({ position: { x: 1, y: 1 } });
+      const collapsedHeight = await searchPage.chips.group.evaluate(el =>
+        Math.round(el.getBoundingClientRect().height),
+      );
+
+      await searchPage.input.click();
+      await expect(searchPage.input).toBeFocused();
+
+      const expandedHeight = await searchPage.chips.group.evaluate(el =>
+        Math.round(el.getBoundingClientRect().height),
+      );
+
+      expect(expandedHeight).toBeGreaterThanOrEqual(collapsedHeight);
+    });
+  },
+);
diff --git a/packages/app/tests/e2e/page-objects/SearchPage.ts b/packages/app/tests/e2e/page-objects/SearchPage.ts
index 9682c977f1..2d58fe010e 100644
--- a/packages/app/tests/e2e/page-objects/SearchPage.ts
+++ b/packages/app/tests/e2e/page-objects/SearchPage.ts
@@ -4,6 +4,7 @@
  */
 import { expect, Locator, Page } from '@playwright/test';
 
+import { FilterChipsComponent } from '../components/FilterChipsComponent';
 import { FilterComponent } from '../components/FilterComponent';
 import { InfrastructurePanelComponent } from '../components/InfrastructurePanelComponent';
 import { SavedSearchModalComponent } from '../components/SavedSearchModalComponent';
@@ -22,6 +23,7 @@ export class SearchPage {
   readonly sidePanel: SidePanelComponent;
   readonly infrastructure: InfrastructurePanelComponent;
   readonly filters: FilterComponent;
+  readonly chips: FilterChipsComponent;
   readonly savedSearchModal: SavedSearchModalComponent;
   readonly savedSearchNameTitle: Locator;
   readonly alertModal: SearchPageAlertModalComponent;
@@ -51,6 +53,7 @@ export class SearchPage {
     this.sidePanel = new SidePanelComponent(page, 'row-side-panel');
     this.infrastructure = new InfrastructurePanelComponent(page);
     this.filters = new FilterComponent(page);
+    this.chips = new FilterChipsComponent(page);
     this.savedSearchModal = new SavedSearchModalComponent(page);
     this.alertModal = new SearchPageAlertModalComponent(page);
     this.alertsButtonLocator = page.getByTestId('alerts-button');

From 42ca493fae7caf7968a151484b20523fb55f5d84 Mon Sep 17 00:00:00 2001
From: Mike Shi <mike@hyperdx.io>
Date: Sat, 30 May 2026 16:15:39 -0700
Subject: [PATCH 2/5] fix: address lint, unit, and e2e CI failures

- SCSS: collapse `:not(.expanded):not([data-has-chips])` into a single
  complex `:not(.expanded, [data-has-chips])` to satisfy stylelint's
  `selector-not-notation` rule.
- Unit: remove the `@/components/ActiveFilterPills` jest.mock from
  DBSearchPage.directTrace.test.tsx since the component was deleted.
- E2E: the sidebar writes filters in Lucene form (`field:"value"`), not
  SQL `'value'`, so the URL-sync wait check in `applySidebarFilter`
  never matched. Switch to a value-substring check and bump the timeout
  to 10s for slower CI environments.
---
 .../app/src/__tests__/DBSearchPage.directTrace.test.tsx     | 3 ---
 .../src/components/SQLEditor/SQLInlineEditor.module.scss    | 2 +-
 packages/app/tests/e2e/features/search/filter-chips.spec.ts | 6 ++++--
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/app/src/__tests__/DBSearchPage.directTrace.test.tsx b/packages/app/src/__tests__/DBSearchPage.directTrace.test.tsx
index cb5327aa5c..4e0257db49 100644
--- a/packages/app/src/__tests__/DBSearchPage.directTrace.test.tsx
+++ b/packages/app/src/__tests__/DBSearchPage.directTrace.test.tsx
@@ -165,9 +165,6 @@ jest.mock('@/components/DBTimeChart', () => ({
   DBTimeChart: () => <div />,
 }));
 
-jest.mock('@/components/ActiveFilterPills', () => ({
-  ActiveFilterPills: () => <div />,
-}));
 jest.mock('@/components/ContactSupportText', () => ({
   ContactSupportText: () => <div />,
 }));
diff --git a/packages/app/src/components/SQLEditor/SQLInlineEditor.module.scss b/packages/app/src/components/SQLEditor/SQLInlineEditor.module.scss
index a039c8deee..3e6eedd34a 100644
--- a/packages/app/src/components/SQLEditor/SQLInlineEditor.module.scss
+++ b/packages/app/src/components/SQLEditor/SQLInlineEditor.module.scss
@@ -42,7 +42,7 @@
   }
 
   /* When no chips, keep original single-line height cap */
-  &:not(.expanded):not([data-has-chips]) {
+  &:not(.expanded, [data-has-chips]) {
     max-height: var(--editor-base-height, 36px);
   }
 }
diff --git a/packages/app/tests/e2e/features/search/filter-chips.spec.ts b/packages/app/tests/e2e/features/search/filter-chips.spec.ts
index befec921fc..1a866ebf1b 100644
--- a/packages/app/tests/e2e/features/search/filter-chips.spec.ts
+++ b/packages/app/tests/e2e/features/search/filter-chips.spec.ts
@@ -57,10 +57,12 @@ async function applySidebarFilter(
   await expect(searchPage.chips.chip(column, value, 'included')).toBeVisible();
   // The form-to-URL write is debounced ~1s; wait for the URL to reflect the
   // filter so subsequent page.reload() / page.goto() preserve the state.
+  // The sidebar writes filters as Lucene (`field:"value"`), so the encoded
+  // URL contains the value somewhere in the filters= param.
   await searchPage.page.waitForFunction(
-    v => decodeURIComponent(window.location.search).includes(`'${v}'`),
+    v => decodeURIComponent(window.location.search).includes(v),
     value,
-    { timeout: 5000 },
+    { timeout: 10000 },
   );
 }
 

From f9d6e5493418bd80980427115d233dba7b2a4ffe Mon Sep 17 00:00:00 2001
From: Mike Shi <mike@hyperdx.io>
Date: Sat, 30 May 2026 17:25:11 -0700
Subject: [PATCH 3/5] chore: add changeset for filter chips feature

---
 .changeset/filter-chips-in-where-input.md | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 .changeset/filter-chips-in-where-input.md

diff --git a/.changeset/filter-chips-in-where-input.md b/.changeset/filter-chips-in-where-input.md
new file mode 100644
index 0000000000..f49bf2f2ad
--- /dev/null
+++ b/.changeset/filter-chips-in-where-input.md
@@ -0,0 +1,11 @@
+---
+'@hyperdx/app': minor
+---
+
+feat: render active filters as inline chips in search where input
+
+Active sidebar filters now appear as chips rendered inline inside the
+search WHERE input itself, replacing the separate row of pills that
+previously sat below the input. Chips render in both SQL and Lucene
+modes, can be removed with the chip's × button, and Backspace at the
+start of an empty input removes the last chip.

From d7ada9cbd01f3dfa4d9a3b28443122d3e09e1b7b Mon Sep 17 00:00:00 2001
From: Mike Shi <mike@hyperdx.io>
Date: Mon, 1 Jun 2026 14:34:24 -0700
Subject: [PATCH 4/5] fix: address deep-review feedback on filter chips
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SearchWhereInput: gate `filterChips` slot and `data-has-chips` on
  `pills.length > 0`, not on `searchFilters` being wired. Previously
  DBSearchPage (which always passes the hook) flipped the attribute on
  unconditionally, breaking the SQL Paper's `:not(.expanded,
  [data-has-chips]) { max-height: 36px }` cap and the Lucene
  collapse-fade gradient for the empty-filter state.
- AutocompleteInput: when Backspace removes a chip, reset
  `selectedAutocompleteIndex` and close the suggestion dropdown,
  mirroring the Escape branch. Without this, an arrow-key-highlighted
  suggestion lingers and the next Enter inserts an unintended token.
- AutocompleteInput + SQLInlineEditor: skip the Backspace-removes-chip
  handler during IME composition (CJK input). The textarea value is
  empty mid-composition, which previously caused Backspace to eat a
  chip instead of editing the composition.
- Tighten `onRemoveLastChip` to `() => boolean` across SearchInputV2,
  AutocompleteInput, and SQLInlineEditor so the "consume the keystroke"
  contract is enforced by the type system end to end.
- InlineFilterChips: drop the array index from the chip key. Field +
  type + value is already unique (the underlying sets dedupe), and
  removing a middle chip no longer remounts every subsequent chip's
  Tooltip / focus state.
- Re-comment the `.mantine-InputWrapper-root` SCSS rule — Mantine still
  emits that wrapper, so the rule is live and load-bearing for Lucene
  sizing, not legacy.
---
 .../components/SQLEditor/SQLInlineEditor.tsx  |  8 +++++--
 .../SearchInput/AutocompleteInput.tsx         | 17 +++++++++++++-
 .../SearchInput/InlineFilterChips.tsx         |  4 ++--
 .../components/SearchInput/SearchInputV2.tsx  |  3 ++-
 .../SearchInput/SearchWhereInput.module.scss  |  4 +++-
 .../SearchInput/SearchWhereInput.tsx          | 23 +++++++++++--------
 6 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/packages/app/src/components/SQLEditor/SQLInlineEditor.tsx b/packages/app/src/components/SQLEditor/SQLInlineEditor.tsx
index 56cc9be74f..597d830018 100644
--- a/packages/app/src/components/SQLEditor/SQLInlineEditor.tsx
+++ b/packages/app/src/components/SQLEditor/SQLInlineEditor.tsx
@@ -67,7 +67,7 @@ type SQLInlineEditorProps = {
   sourceId?: string;
   filterChips?: React.ReactNode;
   /** Returns true if a chip was actually removed so the host can consume the keystroke. */
-  onRemoveLastChip?: () => boolean | void;
+  onRemoveLastChip?: () => boolean;
 };
 
 const MAX_EDITOR_HEIGHT = '150px';
@@ -286,9 +286,13 @@ export default function SQLInlineEditor({
           {
             key: 'Backspace',
             run: view => {
+              // Skip during IME composition so the chip-removal shortcut
+              // doesn't fire while uncommitted CJK glyphs are still in the
+              // composition layer.
+              if (view.composing) return false;
               const { from, to } = view.state.selection.main;
               if (from === 0 && to === 0 && onRemoveLastChipRef.current) {
-                return onRemoveLastChipRef.current() === true;
+                return onRemoveLastChipRef.current();
               }
               return false;
             },
diff --git a/packages/app/src/components/SearchInput/AutocompleteInput.tsx b/packages/app/src/components/SearchInput/AutocompleteInput.tsx
index a224bc149b..acc6c828f0 100644
--- a/packages/app/src/components/SearchInput/AutocompleteInput.tsx
+++ b/packages/app/src/components/SearchInput/AutocompleteInput.tsx
@@ -51,7 +51,7 @@ export default function AutocompleteInput({
   queryHistoryType?: string;
   filterChips?: React.ReactNode;
   /** Returns true if a chip was actually removed so the host can consume the keystroke. */
-  onRemoveLastChip?: () => boolean | void;
+  onRemoveLastChip?: () => boolean;
   'data-testid'?: string;
 }) {
   const suggestionsLimit = 10;
@@ -217,6 +217,15 @@ export default function AutocompleteInput({
                 setIsSearchInputFocused(false);
               }}
               onKeyDown={e => {
+                // Ignore keystrokes that belong to an in-progress IME
+                // composition (CJK input). At this point the textarea value
+                // is still empty while uncommitted glyphs live in the
+                // composition layer, so Backspace would otherwise eat a chip
+                // instead of editing the composition.
+                if (e.nativeEvent.isComposing || e.keyCode === 229) {
+                  return;
+                }
+
                 if (
                   e.key === 'Escape' &&
                   e.target instanceof HTMLTextAreaElement
@@ -239,6 +248,12 @@ export default function AutocompleteInput({
                   const removed = onRemoveLastChip();
                   if (removed) {
                     e.preventDefault();
+                    // Removing a chip changes what the user is targeting,
+                    // so a stale arrow-key suggestion selection would cause
+                    // the next Enter to insert an unintended token. Reset
+                    // and close the dropdown to mirror the Escape branch.
+                    setSelectedAutocompleteIndex(-1);
+                    setIsInputDropdownOpen(false);
                   }
                 }
 
diff --git a/packages/app/src/components/SearchInput/InlineFilterChips.tsx b/packages/app/src/components/SearchInput/InlineFilterChips.tsx
index a0730bde68..407e76e6af 100644
--- a/packages/app/src/components/SearchInput/InlineFilterChips.tsx
+++ b/packages/app/src/components/SearchInput/InlineFilterChips.tsx
@@ -83,9 +83,9 @@ export default memo(function InlineFilterChips({
 
   return (
     <div className={styles.chipsGroup} data-testid="filter-chips-group">
-      {pills.map((pill, i) => (
+      {pills.map(pill => (
         <InlineFilterChip
-          key={`${pill.field}-${pill.type}-${pill.value}-${i}`}
+          key={`${pill.field}-${pill.type}-${pill.value}`}
           pill={pill}
           onRemove={() => handleRemove(pill)}
         />
diff --git a/packages/app/src/components/SearchInput/SearchInputV2.tsx b/packages/app/src/components/SearchInput/SearchInputV2.tsx
index 443db018df..de288a4593 100644
--- a/packages/app/src/components/SearchInput/SearchInputV2.tsx
+++ b/packages/app/src/components/SearchInput/SearchInputV2.tsx
@@ -63,7 +63,8 @@ export default function SearchInputV2({
   dateRange?: [Date, Date];
   sourceId?: string;
   filterChips?: React.ReactNode;
-  onRemoveLastChip?: () => void;
+  /** Returns true if a chip was actually removed so the host can consume the keystroke. */
+  onRemoveLastChip?: () => boolean;
   'data-testid'?: string;
 } & UseControllerProps<any> &
   TableConnectionChoice) {
diff --git a/packages/app/src/components/SearchInput/SearchWhereInput.module.scss b/packages/app/src/components/SearchInput/SearchWhereInput.module.scss
index d5f9902363..f62c4246e4 100644
--- a/packages/app/src/components/SearchInput/SearchWhereInput.module.scss
+++ b/packages/app/src/components/SearchInput/SearchWhereInput.module.scss
@@ -44,7 +44,9 @@
     border-bottom-left-radius: 0;
   }
 
-  /* legacy: InputWrapper styles for textarea within the container */
+  /* Mantine's <Textarea> in AutocompleteInput (Lucene mode) still renders
+     an `.mantine-InputWrapper-root` wrapper, so these rules are live and
+     load-bearing for Lucene-mode sizing — don't strip them as dead code. */
   /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
   :global(.mantine-InputWrapper-root) {
     border-top-left-radius: 0;
diff --git a/packages/app/src/components/SearchInput/SearchWhereInput.tsx b/packages/app/src/components/SearchInput/SearchWhereInput.tsx
index 673e882908..b6d5bae094 100644
--- a/packages/app/src/components/SearchInput/SearchWhereInput.tsx
+++ b/packages/app/src/components/SearchInput/SearchWhereInput.tsx
@@ -198,19 +198,24 @@ export default function SearchWhereInput({
     () => (filters ? flattenFilters(filters) : []),
     [filters],
   );
+  const hasChips = pills.length > 0;
 
-  const filterChips = searchFilters ? (
-    <InlineFilterChips
-      pills={pills}
-      setFilterValue={searchFilters.setFilterValue}
-      clearFilter={searchFilters.clearFilter}
-    />
-  ) : null;
+  // Only render the chip slot when there are pills to show. Passing `null`
+  // when the slot is empty keeps `data-has-chips` off downstream so the
+  // single-line height cap and the collapse-fade gradient stay engaged.
+  const filterChips =
+    searchFilters && hasChips ? (
+      <InlineFilterChips
+        pills={pills}
+        setFilterValue={searchFilters.setFilterValue}
+        clearFilter={searchFilters.clearFilter}
+      />
+    ) : null;
 
   // Returns true only when a chip was actually removed, so the input's
   // Backspace-at-position-0 handler knows whether to consume the keystroke.
   const onRemoveLastChip = useCallback((): boolean => {
-    if (!searchFilters || pills.length === 0) return false;
+    if (!searchFilters || !hasChips) return false;
     const lastPill = pills[pills.length - 1];
     removePill(
       lastPill,
@@ -218,7 +223,7 @@ export default function SearchWhereInput({
       searchFilters.clearFilter,
     );
     return true;
-  }, [searchFilters, pills]);
+  }, [searchFilters, hasChips, pills]);
 
   return (
     <Box

From 1dbfe5575ad2bbbccacd8fca7b2ac6b3ae59913f Mon Sep 17 00:00:00 2001
From: Mike Shi <mike@hyperdx.io>
Date: Mon, 1 Jun 2026 15:26:26 -0700
Subject: [PATCH 5/5] fix: address Aaron's review feedback on filter chips
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- AutocompleteInput: pull the inline onKeyDown handler out into a
  named `handleKeyDown` useCallback so the JSX body stays readable.
  Also wrap `onAcceptSuggestion` in useCallback now that it's a
  dependency of `handleKeyDown`.
- InlineFilterChips.module.scss: swap the excluded chip border from
  `--mantine-color-red-light` (a pink background tint that barely
  reads as red in light mode) to `--color-text-danger`, which already
  swings red-3 ↔ red-8 by theme.
- filterPillUtils: `flattenFilters` now accepts `FilterState |
  undefined` and returns `[]` for the undefined case, so callers
  don't need to guard externally. SearchWhereInput's memo collapses
  to a single call.
---
 .../SearchInput/AutocompleteInput.tsx         | 260 +++++++++---------
 .../SearchInput/InlineFilterChips.module.scss |   6 +-
 .../SearchInput/SearchWhereInput.tsx          |   5 +-
 .../app/src/components/filterPillUtils.ts     |   3 +-
 4 files changed, 138 insertions(+), 136 deletions(-)

diff --git a/packages/app/src/components/SearchInput/AutocompleteInput.tsx b/packages/app/src/components/SearchInput/AutocompleteInput.tsx
index acc6c828f0..7a8de086be 100644
--- a/packages/app/src/components/SearchInput/AutocompleteInput.tsx
+++ b/packages/app/src/components/SearchInput/AutocompleteInput.tsx
@@ -120,34 +120,37 @@ export default function AutocompleteInput({
     onSubmit?.(); // search
   };
 
-  const onAcceptSuggestion = (suggestion: string) => {
-    setSelectedAutocompleteIndex(-1);
+  const onAcceptSuggestion = useCallback(
+    (suggestion: string) => {
+      setSelectedAutocompleteIndex(-1);
 
-    if (value == null || !tokenInfo) {
-      onChange(suggestion);
-      inputRef.current?.focus();
-      return;
-    }
+      if (value == null || !tokenInfo) {
+        onChange(suggestion);
+        inputRef.current?.focus();
+        return;
+      }
 
-    // Replace the token at cursor with the suggestion
-    const tokens = [...tokenInfo.tokens];
-    tokens[tokenInfo.index] = suggestion;
-    const newValue = tokens.join(' ');
+      // Replace the token at cursor with the suggestion
+      const tokens = [...tokenInfo.tokens];
+      tokens[tokenInfo.index] = suggestion;
+      const newValue = tokens.join(' ');
 
-    // Place cursor right after the inserted suggestion
-    let newCursorPos = 0;
-    for (let i = 0; i <= tokenInfo.index; i++) {
-      newCursorPos += tokens[i].length;
-      if (i < tokenInfo.index) newCursorPos++; // space
-    }
+      // Place cursor right after the inserted suggestion
+      let newCursorPos = 0;
+      for (let i = 0; i <= tokenInfo.index; i++) {
+        newCursorPos += tokens[i].length;
+        if (i < tokenInfo.index) newCursorPos++; // space
+      }
 
-    onChange(newValue);
+      onChange(newValue);
 
-    requestAnimationFrame(() => {
-      inputRef.current?.setSelectionRange(newCursorPos, newCursorPos);
-      inputRef.current?.focus();
-    });
-  };
+      requestAnimationFrame(() => {
+        inputRef.current?.setSelectionRange(newCursorPos, newCursorPos);
+        inputRef.current?.focus();
+      });
+    },
+    [value, tokenInfo, onChange, inputRef],
+  );
   const ref = useRef<HTMLDivElement>(null);
   useLayoutEffect(() => {
     if (ref.current) {
@@ -161,6 +164,108 @@ export default function AutocompleteInput({
   // Height including the 2px border from .textarea (1px top + 1px bottom)
   const baseHeight = size === 'xs' ? 30 : size === 'lg' ? 44 : 38;
 
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      // Ignore keystrokes that belong to an in-progress IME composition
+      // (CJK input). At this point the textarea value is still empty while
+      // uncommitted glyphs live in the composition layer, so Backspace
+      // would otherwise eat a chip instead of editing the composition.
+      if (e.nativeEvent.isComposing || e.keyCode === 229) {
+        return;
+      }
+
+      if (e.key === 'Escape' && e.target instanceof HTMLTextAreaElement) {
+        e.preventDefault();
+        setIsInputDropdownOpen(false);
+        e.target.blur();
+        return;
+      }
+
+      // Backspace at cursor position 0 removes last chip (only if a chip
+      // was actually present — otherwise let backspace behave normally).
+      if (
+        e.key === 'Backspace' &&
+        e.target instanceof HTMLTextAreaElement &&
+        e.target.selectionStart === 0 &&
+        e.target.selectionEnd === 0 &&
+        onRemoveLastChip
+      ) {
+        const removed = onRemoveLastChip();
+        if (removed) {
+          e.preventDefault();
+          // Removing a chip changes what the user is targeting, so a
+          // stale arrow-key suggestion selection would cause the next
+          // Enter to insert an unintended token. Reset and close the
+          // dropdown to mirror the Escape branch.
+          setSelectedAutocompleteIndex(-1);
+          setIsInputDropdownOpen(false);
+        }
+        return;
+      }
+
+      if (!(e.target instanceof HTMLTextAreaElement)) return;
+
+      const hasSelectableSuggestion =
+        suggestedProperties.length > 0 &&
+        selectedAutocompleteIndex >= 0 &&
+        selectedAutocompleteIndex < suggestedProperties.length;
+
+      if (e.key === 'Tab' && hasSelectableSuggestion) {
+        e.preventDefault();
+        onAcceptSuggestion(
+          suggestedProperties[selectedAutocompleteIndex].value,
+        );
+        return;
+      }
+
+      if (e.key === 'Enter') {
+        if (hasSelectableSuggestion) {
+          e.preventDefault();
+          onAcceptSuggestion(
+            suggestedProperties[selectedAutocompleteIndex].value,
+          );
+        } else if (!e.shiftKey) {
+          // Allow shift+enter to still create new lines
+          e.preventDefault();
+          if (queryHistoryType && value) {
+            setQueryHistory(value);
+          }
+          onSubmit?.();
+        }
+        return;
+      }
+
+      if (e.key === 'ArrowDown' && suggestedProperties.length > 0) {
+        e.preventDefault();
+        setSelectedAutocompleteIndex(
+          Math.min(
+            selectedAutocompleteIndex + 1,
+            suggestedProperties.length - 1,
+            suggestionsLimit - 1,
+          ),
+        );
+        return;
+      }
+
+      if (e.key === 'ArrowUp' && suggestedProperties.length > 0) {
+        e.preventDefault();
+        setSelectedAutocompleteIndex(
+          Math.max(selectedAutocompleteIndex - 1, 0),
+        );
+      }
+    },
+    [
+      onRemoveLastChip,
+      suggestedProperties,
+      selectedAutocompleteIndex,
+      onAcceptSuggestion,
+      queryHistoryType,
+      value,
+      setQueryHistory,
+      onSubmit,
+    ],
+  );
+
   return (
     <div
       className={styles.root}
@@ -216,114 +321,7 @@ export default function AutocompleteInput({
                 setSelectedQueryHistoryIndex(-1);
                 setIsSearchInputFocused(false);
               }}
-              onKeyDown={e => {
-                // Ignore keystrokes that belong to an in-progress IME
-                // composition (CJK input). At this point the textarea value
-                // is still empty while uncommitted glyphs live in the
-                // composition layer, so Backspace would otherwise eat a chip
-                // instead of editing the composition.
-                if (e.nativeEvent.isComposing || e.keyCode === 229) {
-                  return;
-                }
-
-                if (
-                  e.key === 'Escape' &&
-                  e.target instanceof HTMLTextAreaElement
-                ) {
-                  e.preventDefault();
-                  setIsInputDropdownOpen(false);
-                  e.target.blur();
-                }
-
-                // Backspace at cursor position 0 removes last chip (only if
-                // a chip was actually present — otherwise let backspace behave
-                // normally).
-                if (
-                  e.key === 'Backspace' &&
-                  e.target instanceof HTMLTextAreaElement &&
-                  e.target.selectionStart === 0 &&
-                  e.target.selectionEnd === 0 &&
-                  onRemoveLastChip
-                ) {
-                  const removed = onRemoveLastChip();
-                  if (removed) {
-                    e.preventDefault();
-                    // Removing a chip changes what the user is targeting,
-                    // so a stale arrow-key suggestion selection would cause
-                    // the next Enter to insert an unintended token. Reset
-                    // and close the dropdown to mirror the Escape branch.
-                    setSelectedAutocompleteIndex(-1);
-                    setIsInputDropdownOpen(false);
-                  }
-                }
-
-                // Autocomplete Navigation/Acceptance Keys
-                if (
-                  e.key === 'Tab' &&
-                  e.target instanceof HTMLTextAreaElement
-                ) {
-                  if (
-                    suggestedProperties.length > 0 &&
-                    selectedAutocompleteIndex < suggestedProperties.length &&
-                    selectedAutocompleteIndex >= 0
-                  ) {
-                    e.preventDefault();
-                    onAcceptSuggestion(
-                      suggestedProperties[selectedAutocompleteIndex].value,
-                    );
-                  }
-                }
-                if (
-                  e.key === 'Enter' &&
-                  e.target instanceof HTMLTextAreaElement
-                ) {
-                  if (
-                    suggestedProperties.length > 0 &&
-                    selectedAutocompleteIndex < suggestedProperties.length &&
-                    selectedAutocompleteIndex >= 0
-                  ) {
-                    e.preventDefault();
-                    onAcceptSuggestion(
-                      suggestedProperties[selectedAutocompleteIndex].value,
-                    );
-                  } else {
-                    // Allow shift+enter to still create new lines
-                    if (!e.shiftKey) {
-                      e.preventDefault();
-                      if (queryHistoryType && value) {
-                        setQueryHistory(value);
-                      }
-                      onSubmit?.();
-                    }
-                  }
-                }
-                if (
-                  e.key === 'ArrowDown' &&
-                  e.target instanceof HTMLTextAreaElement
-                ) {
-                  if (suggestedProperties.length > 0) {
-                    e.preventDefault();
-                    setSelectedAutocompleteIndex(
-                      Math.min(
-                        selectedAutocompleteIndex + 1,
-                        suggestedProperties.length - 1,
-                        suggestionsLimit - 1,
-                      ),
-                    );
-                  }
-                }
-                if (
-                  e.key === 'ArrowUp' &&
-                  e.target instanceof HTMLTextAreaElement
-                ) {
-                  if (suggestedProperties.length > 0) {
-                    e.preventDefault();
-                    setSelectedAutocompleteIndex(
-                      Math.max(selectedAutocompleteIndex - 1, 0),
-                    );
-                  }
-                }
-              }}
+              onKeyDown={handleKeyDown}
               rightSectionWidth={rightSectionWidth}
               rightSection={
                 language != null && onLanguageChange != null ? (
diff --git a/packages/app/src/components/SearchInput/InlineFilterChips.module.scss b/packages/app/src/components/SearchInput/InlineFilterChips.module.scss
index 0794b0006d..38f201f7b6 100644
--- a/packages/app/src/components/SearchInput/InlineFilterChips.module.scss
+++ b/packages/app/src/components/SearchInput/InlineFilterChips.module.scss
@@ -33,7 +33,11 @@
 }
 
 .chipExcluded {
-  border-color: var(--mantine-color-red-light);
+  /* `--mantine-color-red-light` is a near-pink background tint that
+     barely reads as red against the input's chrome in light mode. The
+     `--color-text-danger` token swings between red-3 (dark) and red-8
+     (light) so the border stays clearly red in both themes. */
+  border-color: var(--color-text-danger);
 }
 
 .chipField {
diff --git a/packages/app/src/components/SearchInput/SearchWhereInput.tsx b/packages/app/src/components/SearchInput/SearchWhereInput.tsx
index b6d5bae094..dbb9225b15 100644
--- a/packages/app/src/components/SearchInput/SearchWhereInput.tsx
+++ b/packages/app/src/components/SearchInput/SearchWhereInput.tsx
@@ -193,10 +193,9 @@ export default function SearchWhereInput({
   const sizeClass = size === 'xs' ? styles.sizeXs : styles.sizeSm;
 
   // Inline filter chips
-  const filters = searchFilters?.filters;
   const pills = useMemo(
-    () => (filters ? flattenFilters(filters) : []),
-    [filters],
+    () => flattenFilters(searchFilters?.filters),
+    [searchFilters?.filters],
   );
   const hasChips = pills.length > 0;
 
diff --git a/packages/app/src/components/filterPillUtils.ts b/packages/app/src/components/filterPillUtils.ts
index 9b8e452f24..7c55a0251e 100644
--- a/packages/app/src/components/filterPillUtils.ts
+++ b/packages/app/src/components/filterPillUtils.ts
@@ -9,7 +9,8 @@ export type PillItem = {
   rawValue?: string | boolean;
 };
 
-export function flattenFilters(filters: FilterState): PillItem[] {
+export function flattenFilters(filters: FilterState | undefined): PillItem[] {
+  if (!filters) return [];
   const pills: PillItem[] = [];
   for (const [field, state] of Object.entries(filters)) {
     for (const val of state.included) {