feat(ui): toggle trace target highlight (#11049)

Co-authored-by: Hiroshi Ogawa <4232207+hi-ogawa@users.noreply.github.com>
Co-authored-by: OpenCode (gpt-5.6-sol) <noreply@opencode.ai>

Author: hi-ogawa

packages/ui/client/components/trace/TraceView.vue

@@ -4,7 +4,7 @@ import { createCache, createMirror, rebuild } from 'rrweb-snapshot'
 import { Pane, Splitpanes } from 'splitpanes'
 import { computed, ref, watch } from 'vue'
 import { openLocation } from '~/composables/location'
-import { getTraceEntryClass, selectActiveTraceStep } from '~/composables/trace-view'
+import { getTraceEntryClass, selectActiveTraceStep, showTraceSelectorHighlight } from '~/composables/trace-view'
 
 const props = defineProps<{
   trace: NormalizedBrowserTraceData
@@ -120,12 +120,21 @@ watch([selectedStep, iframeEl], ([step, iframe]) => {
           border: 2px solid #3b82f6;
           box-sizing: border-box;
         `
+        overlay.style.display = showTraceSelectorHighlight.value ? '' : 'none'
         doc.documentElement.appendChild(overlay)
       })
     }
   }
 }, { immediate: true })
 
+watch(showTraceSelectorHighlight, (show) => {
+  const overlay = iframeEl.value?.contentDocument
+    ?.querySelector<HTMLElement>('[data-testid="trace-view-highlight"]')
+  if (overlay) {
+    overlay.style.display = show ? '' : 'none'
+  }
+})
+
 function getStepButtonClass(step: NormalizedBrowserTraceEntry, index: number) {
   const selected = props.selection.selectedStepIndex === index
   // TODO: move trace step state colors to shared semantic UI shortcuts.

packages/ui/client/components/trace/TraceViewPane.vue

@@ -2,7 +2,7 @@
 import type { TraceSelection } from '~/composables/trace-view'
 import { computed } from 'vue'
 import IconButton from '~/components/IconButton.vue'
-import { closeTrace, getSelectedTrace, getTraceAttemptLabel } from '~/composables/trace-view'
+import { closeTrace, getSelectedTrace, getTraceAttemptLabel, showTraceSelectorHighlight } from '~/composables/trace-view'
 import TraceView from './TraceView.vue'
 
 const props = defineProps<{
@@ -25,6 +25,13 @@ const attemptLabel = computed(() => trace.value ? getTraceAttemptLabel(trace.val
       >
         {{ attemptLabel }}
       </span>
+      <label class="flex items-center gap-1 text-xs ws-nowrap select-none cursor-pointer">
+        <input
+          v-model="showTraceSelectorHighlight"
+          type="checkbox"
+        >
+        <span>Show highlight</span>
+      </label>
       <IconButton
         v-tooltip.bottom="'Close Trace Viewer'"
         title="Close Trace Viewer"

packages/ui/client/composables/trace-view.ts

@@ -1,5 +1,6 @@
 import type { RunnerTestCase, RunnerTestFile, TestArtifact } from 'vitest'
 import type { BrowserTraceData, BrowserTraceEntry } from '../../../browser/src/client/tester/trace'
+import { useLocalStorage } from '@vueuse/core'
 import { computed, ref, watch, watchEffect } from 'vue'
 import { getProjectConfigByName } from '~/utils/task'
 import { browserState, client, config } from './client'
@@ -30,6 +31,11 @@ export interface NormalizedBrowserTraceEntry extends BrowserTraceEntry {
 
 export const activeTraceView = ref<TraceSelection>()
 
+export const showTraceSelectorHighlight = useLocalStorage(
+  'vitest-ui_trace-selector-highlight',
+  true,
+)
+
 function getTraceAttemptKey(trace: BrowserTraceData): string {
   return `${trace.repeats}:${trace.retry}`
 }

test/ui/test/trace.spec.ts

@@ -192,7 +192,20 @@ async function testBasic(page: Page) {
   await expect(traceFrame.getByRole('button', { name: 'Simple' })).toBeVisible()
 
   // verify selector highlight
-  await expect(traceFrame.getByTestId('trace-view-highlight')).toBeVisible()
+  const traceHighlight = traceFrame.getByTestId('trace-view-highlight')
+  const showHighlightCheckbox = traceView.getByRole('checkbox', { name: 'Show highlight' })
+  await expect(traceHighlight).toBeVisible()
+  await expect(showHighlightCheckbox).toBeChecked()
+
+  // hide selector highlight and persist preference across reloads
+  await showHighlightCheckbox.uncheck()
+  await expect(traceHighlight).toBeHidden()
+  await page.reload()
+  await expect(traceView).toBeVisible()
+  await expect(traceHighlight).toBeHidden()
+  await expect(showHighlightCheckbox).not.toBeChecked()
+  await showHighlightCheckbox.check()
+  await expect(traceHighlight).toBeVisible()
 
   // selecting 2nd trace step with keyboard and verify again
   await traceSteps.nth(0).press('ArrowDown')