feat(ui): click-to-filter chips on test names (#231)

## Summary
Each chip on a test name (gas, opcode, fork, params, labels) is now a
button. Click toggles the matching term in the page search; the chip
lights up blue while that term is pinned. Lets you drill into "all 90M
tests" or "all ORIGIN tests" without typing.

To make chip filters precise without losing typed-search convenience,
the filter syntax now supports two separators:
- **`key:value`** — substring (existing behavior). `opcode:ORIG` matches
`ORIGIN`.
- **`key=value`** — exact match. `calldata_size=0` matches only
`calldata_size_0`, not `calldata_size_1024`. Chip clicks emit this form.

A shared `TEST_FILTER_HINT` constant feeds every search-box tooltip so
they stay in sync.

## Wired in
- `run-detail/TestsTable` name cell
- `run-detail/TestHeatmap` modal
- `suite-detail/TestHeatmap` row labels
- `compare/TestComparisonTable` (plumbed from ComparePage)
- `compare/TestDetailModal` (plumbed from CompareGroupsPage)

Heatmap tooltips stay non-interactive on purpose
(`pointer-events-none`).

## Test plan
- [ ] Click an `ORIGIN` opcode chip in the tests table — `opcode=ORIGIN`
is added to the search, chip turns blue, the table filters. Click again
— term removed, chip un-styled.
- [ ] Type `opcode:ORIG` manually — table filters by substring; chips
don't light up since the typed term is the substring form.
- [ ] Click `0` on a `calldata_size:0` chip — only `calldata_size_0`
rows remain (not `calldata_size_1024`).
- [ ] Click a chip in the run-detail heatmap modal and the compare
detail modal — both pin the term to the page filter.
- [ ] Active chips stay highlighted across name-mode and theme toggles.

Author: skylenet

ui/src/components/compare/StickyRunBar.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react'
 import clsx from 'clsx'
 import { type CompareRun, type LabelMode, buildLabelModeOptions, RUN_SLOTS, formatRunLabel } from './constants'
 import { FilterInput } from '@/components/shared/FilterInput'
+import { TEST_FILTER_HINT } from '@/utils/eestNameFilter'
 
 interface StickyRunBarProps {
   runs: CompareRun[]
@@ -77,9 +78,7 @@ export function StickyRunBar({ runs, sentinelRef, labelMode, onLabelModeChange,
           <span>Filter:</span>
           <FilterInput
             placeholder={testFilterRegex ? 'Regex...' : 'Filter or e.g. opcode:ORIGIN'}
-            title={testFilterRegex
-              ? 'Regex against the raw test name.'
-              : 'Free text matches the raw name. Or filter by extracted fields:\nopcode:ORIGIN  gas:90M  fork:Amsterdam  file:tx_context  fn:codecopy  path:compute  label:LOG1\nUnrecognized keys hit params: mem_size:1024  code_size:0\nMultiple terms are AND.'}
+            title={testFilterRegex ? 'Regex against the raw test name.' : TEST_FILTER_HINT}
             value={testFilter}
             onValueChange={onTestFilterChange}
             className={clsx(

ui/src/components/compare/TestComparisonTable.tsx

@@ -20,6 +20,10 @@ interface TestComparisonTableProps {
   sortDir: SortDirection
   onSortChange: (column: SortColumn, direction: SortDirection) => void
   testNameFilter?: (name: string) => boolean
+  /** Current search query string used to highlight matching chips. */
+  searchQuery?: string
+  /** Toggle a `key:value` term in the page-level search. */
+  onChipFilterToggle?: (term: string) => void
   /** When provided, clicking a row calls this with the test name (for opening a detail modal). */
   onTestClick?: (testName: string) => void
 }
@@ -134,7 +138,7 @@ function SortableHeader({
 
 const PAGE_SIZE = 50
 
-export function TestComparisonTable({ runs, suiteTests, stepFilter, blockLogsPerRun, labelMode, tableBaseline, onTableBaselineChange, sortBy, sortDir, onSortChange, testNameFilter, onTestClick }: TestComparisonTableProps) {
+export function TestComparisonTable({ runs, suiteTests, stepFilter, blockLogsPerRun, labelMode, tableBaseline, onTableBaselineChange, sortBy, sortDir, onSortChange, testNameFilter, searchQuery, onChipFilterToggle, onTestClick }: TestComparisonTableProps) {
   const [activeTab, setActiveTab] = useState('mgas')
   const [currentPage, setCurrentPage] = useState(1)
 
@@ -403,7 +407,7 @@ export function TestComparisonTable({ runs, suiteTests, stepFilter, blockLogsPer
                     {test.order || '-'}
                   </td>
                   <td className="max-w-sm truncate px-4 py-2 text-sm/6 text-gray-900 dark:text-gray-100">
-                    <TestName name={test.name} />
+                    <TestName name={test.name} onChipClick={onChipFilterToggle} activeQuery={searchQuery} />
                   </td>
                   <td className="whitespace-nowrap px-4 py-2 text-right text-xs/5 text-gray-500 dark:text-gray-400">
                     {test.gasUsed !== undefined ? `${Math.round(test.gasUsed / 1_000_000)}M` : '-'}

ui/src/components/compare/TestDetailModal.tsx

@@ -21,6 +21,10 @@ interface TestDetailModalProps {
   groupRunIds: string[][]
   stepFilter: StepTypeOption[]
   sampleSize: number
+  /** Current page-level search query (used to highlight active chips). */
+  searchQuery?: string
+  /** Toggle a `key:value` term in the page-level search. */
+  onChipFilterToggle?: (term: string) => void
   onClose: () => void
 }
 
@@ -38,6 +42,8 @@ export function TestDetailModal({
   groupRunIds,
   stepFilter,
   sampleSize,
+  searchQuery,
+  onChipFilterToggle,
   onClose,
 }: TestDetailModalProps) {
   const SLOT_COLORS = ['text-blue-700 dark:text-blue-300', 'text-orange-700 dark:text-orange-300', 'text-purple-700 dark:text-purple-300', 'text-green-700 dark:text-green-300', 'text-red-700 dark:text-red-300']
@@ -148,7 +154,7 @@ export function TestDetailModal({
               {testOrder !== undefined ? `Test #${testOrder}` : 'Test Detail'}
             </h3>
             <div className="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
-              <TestName name={testName} showRawBelow showCopy />
+              <TestName name={testName} showRawBelow showCopy onChipClick={onChipFilterToggle} activeQuery={searchQuery} />
             </div>
           </div>
           <button onClick={onClose} className="shrink-0 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300">

ui/src/components/run-detail/TestHeatmap.tsx

@@ -6,7 +6,7 @@ import type { TestEntry, SuiteTest, AggregatedStats, MethodsAggregated, StepResu
 import { fetchHead } from '@/api/client'
 import { Modal } from '@/components/shared/Modal'
 import { TestName } from '@/components/shared/TestName'
-import { testNameMatches } from '@/utils/eestNameFilter'
+import { testNameMatches, toggleSearchTerm } from '@/utils/eestNameFilter'
 import { TimeBreakdown } from './TimeBreakdown'
 import { MGasBreakdown } from './MGasBreakdown'
 import { ExecutionsList } from './ExecutionsList'
@@ -377,6 +377,7 @@ export function TestHeatmap({
   postTestRPCCalls,
   inProgressTestKey,
   onSelectedTestChange,
+  onSearchChange,
   onSortModeChange,
   onGroupModeChange,
   onThresholdChange,
@@ -945,7 +946,14 @@ export function TestHeatmap({
               <div className="flex flex-col gap-2">
                 <div>
                   <div className="text-sm/6 text-gray-900 dark:text-gray-100">
-                    <TestName name={selectedTest} showRawBelow showCopy className="min-w-0" />
+                    <TestName
+                      name={selectedTest}
+                      showRawBelow
+                      showCopy
+                      onChipClick={onSearchChange ? (term) => onSearchChange(toggleSearchTerm(searchQuery, term)) : undefined}
+                      activeQuery={searchQuery}
+                      className="min-w-0"
+                    />
                   </div>
                 </div>
                 {entry.dir && (

ui/src/components/run-detail/TestsTable.tsx

@@ -6,7 +6,7 @@ import { Badge } from '@/components/shared/Badge'
 import { Duration } from '@/components/shared/Duration'
 import { Pagination } from '@/components/shared/Pagination'
 import { TestName } from '@/components/shared/TestName'
-import { testNameMatches } from '@/utils/eestNameFilter'
+import { testNameMatches, toggleSearchTerm, TEST_FILTER_HINT } from '@/utils/eestNameFilter'
 import { type StepTypeOption, ALL_STEP_TYPES } from '@/pages/RunDetailPage'
 
 export type TestSortColumn = 'order' | 'name' | 'genesis' | 'time' | 'mgas' | 'passed' | 'failed'
@@ -310,7 +310,7 @@ export function TestsTable({
           <input
             type="text"
             placeholder="Search… or e.g. opcode:ORIGIN gas:90M"
-            title={`Free text matches anywhere in the raw name. Or filter by extracted fields:\nopcode:ORIGIN  gas:90M  fork:Amsterdam  file:tx_context  fn:codecopy  path:compute  label:LOG1\nUnrecognized keys hit params: mem_size:1024  code_size:0\nMultiple terms are AND.`}
+            title={TEST_FILTER_HINT}
             value={searchQuery}
             onChange={(e) => handleSearchInput(e.target.value)}
             className="w-72 rounded-sm border border-gray-300 bg-white px-3 py-2 text-sm/6 placeholder:text-gray-400 focus:border-blue-500 focus:outline-hidden focus:ring-1 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500"
@@ -359,7 +359,12 @@ export function TestsTable({
                     {executionOrder.get(testName) ?? '-'}
                   </td>
                   <td className="max-w-md px-4 py-3">
-                    <TestName name={testName} className="text-sm/6 font-medium text-gray-900 dark:text-gray-100" />
+                    <TestName
+                      name={testName}
+                      onChipClick={onSearchChange ? (term) => onSearchChange(toggleSearchTerm(searchQuery, term)) : undefined}
+                      activeQuery={searchQuery}
+                      className="text-sm/6 font-medium text-gray-900 dark:text-gray-100"
+                    />
                     {entry.dir && (
                       <div className="truncate text-xs/5 text-gray-500 dark:text-gray-400" title={entry.dir}>
                         {entry.dir}

ui/src/components/shared/TestName.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import clsx from 'clsx'
 import { Check, Copy } from 'lucide-react'
 import { parseEESTName } from '@/utils/eestName'
+import { searchQueryContains } from '@/utils/eestNameFilter'
 import { useNameDisplayMode } from '@/hooks/useNameDisplayMode'
 
 interface TestNameProps {
@@ -19,6 +20,16 @@ interface TestNameProps {
    * mode (in raw mode the primary line already shows the raw name).
    */
   showRawBelow?: boolean
+  /**
+   * If provided, chips become buttons. Called with the search-query term
+   * to toggle (e.g. `opcode:ORIGIN`, `gas:90M`, `mem_size:1024`).
+   */
+  onChipClick?: (term: string) => void
+  /**
+   * Current search query. Chips whose term is present here render with
+   * an "active" style so users can see what's pinned.
+   */
+  activeQuery?: string
   className?: string
 }
 
@@ -59,8 +70,53 @@ const chipAccent =
   'bg-indigo-50 text-indigo-700 ring-indigo-200 dark:bg-indigo-950/50 dark:text-indigo-300 dark:ring-indigo-800'
 const chipGas =
   'bg-emerald-50 text-emerald-700 ring-emerald-200 dark:bg-emerald-950/50 dark:text-emerald-300 dark:ring-emerald-800'
+const chipActive =
+  'bg-blue-500 text-white ring-blue-500 dark:bg-blue-500 dark:text-white dark:ring-blue-500'
+
+function Chip({
+  variant,
+  label,
+  term,
+  onClick,
+  active,
+}: {
+  variant: 'gas' | 'accent' | 'neutral'
+  label: string
+  term: string
+  onClick?: (term: string) => void
+  active?: boolean
+}) {
+  const variantClasses =
+    active ? chipActive
+      : variant === 'gas' ? chipGas
+        : variant === 'accent' ? chipAccent
+          : chipNeutral
+
+  if (!onClick) {
+    return <span className={clsx(chipBase, variantClasses)}>{label}</span>
+  }
+  return (
+    <button
+      type="button"
+      onClick={(e) => {
+        e.stopPropagation()
+        e.preventDefault()
+        onClick(term)
+      }}
+      className={clsx(
+        chipBase,
+        variantClasses,
+        'cursor-pointer transition-colors',
+        !active && 'hover:bg-blue-100 hover:text-blue-700 hover:ring-blue-300 dark:hover:bg-blue-950/60 dark:hover:text-blue-300 dark:hover:ring-blue-700',
+      )}
+      title={active ? `Click to remove ${term} from filter` : `Click to filter by ${term}`}
+    >
+      {label}
+    </button>
+  )
+}
 
-export function TestName({ name, variant = 'full', showCopy = false, showRawBelow = false, className }: TestNameProps) {
+export function TestName({ name, variant = 'full', showCopy = false, showRawBelow = false, onChipClick, activeQuery, className }: TestNameProps) {
   const { mode } = useNameDisplayMode()
   const parsed = mode === 'decomposed' ? parseEESTName(name) : null
 
@@ -112,24 +168,58 @@ export function TestName({ name, variant = 'full', showCopy = false, showRawBelo
       {hasChips && (
         <span className="inline-flex flex-wrap items-baseline gap-1">
           {parsed.benchmark && (
-            <span className={clsx(chipBase, chipGas)}>{parsed.benchmark}</span>
+            <Chip
+              variant="gas"
+              label={parsed.benchmark}
+              term={`gas=${parsed.benchmark}`}
+              onClick={onChipClick}
+              active={!!activeQuery && searchQueryContains(activeQuery, `gas=${parsed.benchmark}`)}
+            />
           )}
           {parsed.opcode && (
-            <span className={clsx(chipBase, chipAccent)}>{parsed.opcode}</span>
+            <Chip
+              variant="accent"
+              label={parsed.opcode}
+              term={`opcode=${parsed.opcode}`}
+              onClick={onChipClick}
+              active={!!activeQuery && searchQueryContains(activeQuery, `opcode=${parsed.opcode}`)}
+            />
           )}
           {parsed.fork && (
-            <span className={clsx(chipBase, chipNeutral)}>fork:{parsed.fork}</span>
+            <Chip
+              variant="neutral"
+              label={`fork:${parsed.fork}`}
+              term={`fork=${parsed.fork}`}
+              onClick={onChipClick}
+              active={!!activeQuery && searchQueryContains(activeQuery, `fork=${parsed.fork}`)}
+            />
           )}
-          {parsed.params.map(({ key, value }) => (
-            <span key={`${key}=${value}`} className={clsx(chipBase, chipNeutral)}>
-              {key}:{value}
-            </span>
-          ))}
-          {parsed.labels.map((label) => (
-            <span key={label} className={clsx(chipBase, chipNeutral)}>
-              {label}
-            </span>
-          ))}
+          {parsed.params.map(({ key, value }) => {
+            const term = `${key}=${value}`
+            return (
+              <Chip
+                key={term}
+                variant="neutral"
+                label={`${key}:${value}`}
+                term={term}
+                onClick={onChipClick}
+                active={!!activeQuery && searchQueryContains(activeQuery, term)}
+              />
+            )
+          })}
+          {parsed.labels.map((label) => {
+            const term = `label=${label}`
+            return (
+              <Chip
+                key={label}
+                variant="neutral"
+                label={label}
+                term={term}
+                onClick={onChipClick}
+                active={!!activeQuery && searchQueryContains(activeQuery, term)}
+              />
+            )
+          })}
         </span>
       )}
       {showRawBelow && (

ui/src/components/suite-detail/OpcodeHeatmap.tsx

@@ -5,7 +5,7 @@ import type { SuiteTest } from '@/api/types'
 import { getGroupedOpcodes, getCategoryColor } from '@/utils/opcodeCategories'
 import type { CategorySpan, GroupedResult } from '@/utils/opcodeCategories'
 import { TestName } from '@/components/shared/TestName'
-import { testNameMatches } from '@/utils/eestNameFilter'
+import { testNameMatches, TEST_FILTER_HINT } from '@/utils/eestNameFilter'
 
 /** Returns the opcode count map from the top-level field or EEST info fallback. */
 function getOpcodeCount(test: SuiteTest): Record<string, number> | undefined {
@@ -945,7 +945,7 @@ export function OpcodeHeatmap({ tests, onTestClick, extraColumns = [], searchQue
           <input
             type="text"
             placeholder="Filter… or e.g. opcode:ORIGIN"
-            title={'Free text matches the raw name. Or filter by extracted fields:\nopcode:ORIGIN  gas:90M  fork:Amsterdam  file:tx_context  fn:codecopy  path:compute  label:LOG1\nUnrecognized keys hit params: mem_size:1024  code_size:0\nMultiple terms are AND.'}
+            title={TEST_FILTER_HINT}
             value={search}
             onChange={(e) => setSearch(e.target.value)}
             className="rounded-xs border border-gray-300 bg-white px-3 py-1 text-sm/6 placeholder-gray-400 focus:border-blue-500 focus:outline-hidden focus:ring-1 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-500"

ui/src/components/suite-detail/TestHeatmap.tsx

@@ -8,7 +8,7 @@ import { JDenticon } from '@/components/shared/JDenticon'
 import { Pagination } from '@/components/shared/Pagination'
 import { Spinner } from '@/components/shared/Spinner'
 import { TestName } from '@/components/shared/TestName'
-import { testNameMatches } from '@/utils/eestNameFilter'
+import { testNameMatches, toggleSearchTerm, TEST_FILTER_HINT } from '@/utils/eestNameFilter'
 import { formatTimestamp } from '@/utils/date'
 
 const DEFAULT_PAGE_SIZE = 20
@@ -528,9 +528,7 @@ export function TestHeatmap({ stats, testFiles, isDark, isLoading, suiteHash, su
           value={search}
           onChange={(e) => handleSearchChange(e.target.value)}
           placeholder={useRegex ? 'Regex...' : 'Filter or e.g. opcode:ORIGIN'}
-          title={useRegex
-            ? 'Regex against the raw test name.'
-            : 'Free text matches the raw name. Or filter by extracted fields:\nopcode:ORIGIN  gas:90M  fork:Amsterdam  file:tx_context  fn:codecopy  path:compute  label:LOG1\nUnrecognized keys hit params: mem_size:1024  code_size:0\nMultiple terms are AND.'}
+          title={useRegex ? 'Regex against the raw test name.' : TEST_FILTER_HINT}
           className={clsx(
             'w-28 rounded-xs border bg-white px-2 py-1 text-sm placeholder-gray-400 focus:outline-hidden focus:ring-1 sm:w-auto sm:px-3 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-500',
             useRegex && search && (() => { try { new RegExp(search); return false } catch { return true } })()
@@ -734,7 +732,11 @@ export function TestHeatmap({ stats, testFiles, isDark, isLoading, suiteHash, su
                         <HighlightedName name={test.name} search={search} useRegex={useRegex} />
                       </span>
                     ) : (
-                      <TestName name={test.name} />
+                      <TestName
+                        name={test.name}
+                        onChipClick={(term) => onSearchChange?.(toggleSearchTerm(search, term) || undefined)}
+                        activeQuery={search}
+                      />
                     )}
                   </td>
                 </tr>

ui/src/pages/CompareGroupsPage.tsx

@@ -4,7 +4,7 @@ import { useQueries } from '@tanstack/react-query'
 import clsx from 'clsx'
 import type { RunConfig, RunResult } from '@/api/types'
 import { fetchData } from '@/api/client'
-import { testNameMatches } from '@/utils/eestNameFilter'
+import { testNameMatches, toggleSearchTerm, TEST_FILTER_HINT } from '@/utils/eestNameFilter'
 import { useIndex } from '@/api/hooks/useIndex'
 import { useSuite } from '@/api/hooks/useSuite'
 import { LoadingState } from '@/components/shared/Spinner'
@@ -450,7 +450,7 @@ export function CompareGroupsPage() {
                   placeholder={testFilterRegex ? 'Regex...' : 'Filter or e.g. opcode:ORIGIN'}
                   title={testFilterRegex
                     ? 'Regex against the raw test name.'
-                    : 'Free text matches the raw name. Or filter by extracted fields:\nopcode:ORIGIN  gas:90M  fork:Amsterdam  file:tx_context  fn:codecopy  path:compute  label:LOG1\nUnrecognized keys hit params: mem_size:1024  code_size:0\nMultiple terms are AND.'}
+                    : TEST_FILTER_HINT}
                   value={testFilter}
                   onChange={(e) => updateSearch({ filter: e.target.value || undefined })}
                   className={clsx(
@@ -579,9 +579,7 @@ export function CompareGroupsPage() {
               <input
                 type="text"
                 placeholder={testFilterRegex ? 'Regex pattern...' : 'Filter… or e.g. opcode:ORIGIN'}
-                title={testFilterRegex
-                  ? 'Regex against the raw test name.'
-                  : 'Free text matches the raw name. Or filter by extracted fields:\nopcode:ORIGIN  gas:90M  fork:Amsterdam  file:tx_context  fn:codecopy  path:compute  label:LOG1\nUnrecognized keys hit params: mem_size:1024  code_size:0\nMultiple terms are AND.'}
+                title={testFilterRegex ? 'Regex against the raw test name.' : TEST_FILTER_HINT}
                 value={testFilter}
                 onChange={(e) => updateSearch({ filter: e.target.value || undefined })}
                 className={clsx(
@@ -741,6 +739,8 @@ export function CompareGroupsPage() {
           groupRunIds={groupRuns}
           stepFilter={stepFilter}
           sampleSize={sampleSize}
+          searchQuery={testFilter}
+          onChipFilterToggle={(term) => updateSearch({ filter: toggleSearchTerm(testFilter, term) || undefined })}
           onClose={() => setSelectedTest(null)}
         />
       )}