feat(ui): move trace attempts selector to viewer header (#11189)

Co-authored-by: Hiroshi Ogawa <4232207+hi-ogawa@users.noreply.github.com>
Co-authored-by: Codex <noreply@openai.com>

Author: hi-ogawa

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

@@ -1,48 +1,24 @@
 <script setup lang="ts">
 import type { RunnerTestCase } from 'vitest'
 import { computed } from 'vue'
-import { getTraceAttemptLabel, getTraceAttemptMap, openTrace } from '~/composables/trace-view'
+import { getTraceAttemptMap, openTrace } from '~/composables/trace-view'
 
 const props = defineProps<{
   test: RunnerTestCase
 }>()
 
-const traces = computed(() => {
-  const traceMap = getTraceAttemptMap(props.test.artifacts)
-  return [...traceMap.values()].map(trace => ({
-    trace,
-    label: getTraceAttemptLabel(trace),
-  }))
-})
+const hasTrace = computed(() => getTraceAttemptMap(props.test.artifacts).size > 0)
 </script>
 
 <template>
-  <template v-if="traces.length">
-    <h1 m-2>
-      Trace View
-    </h1>
-    <div
-      v-for="{ trace, label } of traces"
-      :key="`${trace.repeats}:${trace.retry}`"
-      bg="yellow-500/10"
-      text="yellow-500 sm"
-      p="x3 y2"
-      m-2
-      rounded
-      role="note"
-    >
-      <button
-        data-testid="trace-open-button"
-        type="button"
-        class="flex items-center gap-2 rounded px-2 py-1 hover:bg-yellow-500/10"
-        @click="openTrace(trace, test)"
-      >
-        <span class="i-carbon:play-outline block" />
-        Open trace viewer
-        <span v-if="label" class="text-xs opacity-70">
-          {{ label }}
-        </span>
-      </button>
-    </div>
-  </template>
+  <button
+    v-if="hasTrace"
+    data-testid="trace-open-button"
+    type="button"
+    class="m-2 flex items-center gap-2 rounded bg-yellow-500/10 px-3 py-2 text-sm text-yellow-500 hover:bg-yellow-500/20"
+    @click="openTrace(test)"
+  >
+    <span class="i-carbon:play-outline block" />
+    Open trace viewer
+  </button>
 </template>

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, showTraceSelectorHighlight } from '~/composables/trace-view'
+import { closeTrace, getSelectedTrace, getTraceAttemptLabel, getTraceAttemptMap, selectActiveTraceAttempt, showTraceSelectorHighlight } from '~/composables/trace-view'
 import TraceView from './TraceView.vue'
 
 const props = defineProps<{
@@ -11,16 +11,37 @@ const props = defineProps<{
 
 const trace = computed(() => getSelectedTrace(props.selection))
 const attemptLabel = computed(() => trace.value ? getTraceAttemptLabel(trace.value) : '')
+const traceAttempts = computed(() => [...getTraceAttemptMap(props.selection.test.artifacts)].map(([key, trace]) => ({
+  key,
+  label: getTraceAttemptLabel(trace) || 'Initial run',
+})))
+const selectedAttemptKey = computed({
+  get: () => props.selection.attemptKey ?? '0:0',
+  set: selectActiveTraceAttempt,
+})
 </script>
 
 <template>
   <div data-testid="trace-view" h-full min-h-0 flex="~ col">
     <div p="3" h-10 flex="~ gap-2" items-center bg-header border="b base">
       <div class="i-carbon:data-vis-4" />
       <span pl-1 font-bold text-sm flex-auto ws-nowrap overflow-hidden truncate>Trace Viewer</span>
-      <!-- TODO: pane should own attempt selector here? -->
+      <select
+        v-if="traceAttempts.length > 1"
+        v-model="selectedAttemptKey"
+        aria-label="Trace attempt"
+        class="max-w-40 cursor-pointer border border-base rounded bg-base px-2 py-1 text-xs"
+      >
+        <option
+          v-for="attempt in traceAttempts"
+          :key="attempt.key"
+          :value="attempt.key"
+        >
+          {{ attempt.label }}
+        </option>
+      </select>
       <span
-        v-if="attemptLabel"
+        v-else-if="attemptLabel"
         class="text-xs opacity-70"
       >
         {{ attemptLabel }}

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

@@ -178,13 +178,11 @@ export function getTraceEntryClass(entry: BrowserTraceEntry) {
   return 'text-gray-400 dark:text-gray-500'
 }
 
-export function openTrace(trace: BrowserTraceData, test: RunnerTestCase) {
+export function openTrace(test: RunnerTestCase) {
   detailsPosition.value = 'bottom'
-  setActiveTrace({
-    test,
-    attemptKey: getTraceAttemptKey(trace),
-    selectedStepIndex: 0,
-  })
+  if (activeTraceView.value?.test !== test) {
+    setActiveTrace({ test, selectedStepIndex: 0 })
+  }
 }
 
 function setActiveTrace(selection: TraceSelection) {
@@ -207,6 +205,17 @@ export function selectActiveTraceStep(index: number) {
   }
 }
 
+export function selectActiveTraceAttempt(attemptKey: string) {
+  const selection = activeTraceView.value
+  if (selection) {
+    setActiveTrace({
+      ...selection,
+      attemptKey,
+      selectedStepIndex: 0,
+    })
+  }
+}
+
 // Resolve the URL-selected task only when it can be shown in the trace view.
 const selectedTestTask = computed(() => {
   const test = selectedTest.value

test/ui/test/trace.spec.ts

@@ -250,6 +250,12 @@ async function testBasic(page: Page) {
   // verify closing trace viewer doesn't immediately auto-open it again
   await traceView.getByRole('button', { name: 'Close Trace Viewer' }).click()
   await expect(traceView).toBeHidden()
+
+  // reopen the trace viewer from the report
+  await page.getByTestId('btn-report').click()
+  await page.getByTestId('trace-open-button').click()
+  await expect(traceView).toBeVisible()
+  await expect(traceFrame.getByRole('button', { name: 'Switch Target' })).toBeVisible()
 }
 
 async function testViewport(page: Page) {
@@ -361,25 +367,28 @@ async function testAttempts(page: Page) {
 
   const traceView = page.getByTestId('trace-view')
   const traceFrame = traceView.frameLocator('iframe')
+  const traceSteps = traceView.getByTestId('trace-step')
 
   await expect(traceView).toBeVisible()
-
-  const traceOpenButtons = page.getByTestId('trace-open-button')
-  await expect(traceOpenButtons).toHaveText([
-    'Open trace viewer',
-    'Open trace viewer Retry 1',
-    'Open trace viewer Retry 2',
+  const attemptSelect = traceView.getByRole('combobox', { name: 'Trace attempt' })
+  await expect(attemptSelect.locator('option')).toHaveText([
+    'Initial run',
+    'Retry 1',
+    'Retry 2',
   ])
 
-  await traceOpenButtons.nth(0).click()
+  await expect(attemptSelect).toHaveValue('0:0')
   await expect(traceFrame.getByText('retryCount: 0')).toBeVisible()
   await expect(traceFrame.getByText('repeatCount: 0')).toBeVisible()
 
-  await traceOpenButtons.nth(1).click()
+  // trace step is reset to first step when switching attempts
+  await traceSteps.nth(1).click()
+  await attemptSelect.selectOption('0:1')
+  await expect(traceSteps.nth(0)).toHaveAttribute('aria-selected', 'true')
   await expect(traceFrame.getByText('retryCount: 1')).toBeVisible()
   await expect(traceFrame.getByText('repeatCount: 0')).toBeVisible()
 
-  await traceOpenButtons.nth(2).click()
+  await attemptSelect.selectOption('0:2')
   await expect(traceFrame.getByText('retryCount: 2')).toBeVisible()
   await expect(traceFrame.getByText('repeatCount: 0')).toBeVisible()
 }
@@ -483,8 +492,8 @@ async function testPersistsAttemptInURL(page: Page) {
   const traceView = page.getByTestId('trace-view')
   const traceFrame = traceView.frameLocator('iframe')
 
-  // Opening a retry writes its attempt key to the URL.
-  await page.getByTestId('trace-open-button').nth(1).click()
+  // Selecting a retry writes its attempt key to the URL.
+  await traceView.getByRole('combobox', { name: 'Trace attempt' }).selectOption('0:1')
   await expect.poll(() => getHashParams(page)).toMatchObject({
     traceAttempt: '0:1',
     traceStep: '0',
@@ -499,6 +508,7 @@ async function testPersistsAttemptInURL(page: Page) {
     traceStep: '0',
     test: testId,
   })
+  await expect(traceView.getByRole('combobox', { name: 'Trace attempt' })).toHaveValue('0:1')
   await expect(traceFrame.getByText('retryCount: 1')).toBeVisible()
 }