fix(ui): persist trace step-iframe split pane sizes (#11027)

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

Author: hi-ogawa

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

@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import type { SplitpanesResizedPayload } from 'splitpanes'
 import type { NormalizedBrowserTraceData, NormalizedBrowserTraceEntry, TraceSelection } from '~/composables/trace-view'
 import { createCache, createMirror, rebuild } from 'rrweb-snapshot'
 import { Pane, Splitpanes } from 'splitpanes'
 import { computed, ref, watch } from 'vue'
 import { openLocation } from '~/composables/location'
+import { traceViewSplitSizes } from '~/composables/navigation'
 import { getTraceEntryClass, selectActiveTraceStep, showTraceSelectorHighlight } from '~/composables/trace-view'
 
 const props = defineProps<{
@@ -181,13 +183,20 @@ function formatStepName(step: NormalizedBrowserTraceEntry) {
 function isTraceStepInProgress(step: NormalizedBrowserTraceEntry) {
   return step.range?.phase === 'start'
 }
+
+function onSplitpanesResized({ panes }: SplitpanesResizedPayload) {
+  if (panes.length === 2) {
+    traceViewSplitSizes.value = [panes[0].size, panes[1].size]
+  }
+}
 </script>
 
 <template>
   <Splitpanes
     class="h-full min-h-0"
+    @resized="onSplitpanesResized"
   >
-    <Pane :size="30" min-size="20">
+    <Pane :size="traceViewSplitSizes[0]" min-size="20">
       <div
         class="h-full min-h-0 p-4"
         flex="~ col gap-1"
@@ -246,7 +255,7 @@ function isTraceStepInProgress(step: NormalizedBrowserTraceEntry) {
         </button>
       </div>
     </Pane>
-    <Pane :size="70" min-size="20">
+    <Pane :size="traceViewSplitSizes[1]" min-size="20">
       <div class="h-full min-h-0" flex="~ col" overflow-auto>
         <iframe
           v-if="selectedStep"

packages/ui/client/composables/navigation.ts

@@ -34,6 +34,10 @@ export const detailSizes = useLocalStorage<[left: number, right: number]>(
     67,
   ],
 )
+export const traceViewSplitSizes = useLocalStorage<[steps: number, iframe: number]>(
+  'vitest-ui_splitpanes-traceViewSplitSizes',
+  [30, 70],
+)
 
 export const detailsPanelVisible = useLocalStorage<boolean>(
   'vitest-ui_details-panel-visible',

test/ui/test/trace.spec.ts

@@ -72,6 +72,10 @@ test.describe('ui', () => {
   test('persists attempt in URL', async ({ page }) => {
     await testPersistsAttemptInURL(page)
   })
+
+  test('persists resized trace panes across reloads', async ({ page }) => {
+    await testPersistsResizedTracePanes(page)
+  })
 })
 
 test.describe('html reporter', () => {
@@ -154,6 +158,10 @@ test.describe('html reporter', () => {
   test('persists attempt in URL', async ({ page }) => {
     await testPersistsAttemptInURL(page)
   })
+
+  test('persists resized trace panes across reloads', async ({ page }) => {
+    await testPersistsResizedTracePanes(page)
+  })
 })
 
 async function testBasic(page: Page) {
@@ -498,3 +506,70 @@ function getHashParams(page: Page) {
   const hash = new URL(page.url()).hash
   return Object.fromEntries(new URLSearchParams(hash.split('?')[1]))
 }
+
+async function testPersistsResizedTracePanes(page: Page) {
+  // Opening a trace renders resizable step list and iframe panes.
+  await openExplorerItem(page, 'simple')
+
+  const traceView = page.getByTestId('trace-view')
+  const traceSteps = traceView.getByRole('listbox', { name: 'Trace steps' })
+  const splitpanes = traceView.locator('.splitpanes').first()
+  const splitter = splitpanes.locator('.splitpanes__splitter').first()
+  await expect(traceView).toBeVisible()
+  await expect(splitter).toBeVisible()
+
+  const initialTraceStepsBox = await traceSteps.boundingBox()
+  const traceViewBox = await traceView.boundingBox()
+  const splitterBox = await splitter.boundingBox()
+  if (!initialTraceStepsBox || !traceViewBox || !splitterBox) {
+    throw new Error('Trace split panes are not visible')
+  }
+
+  // Resize the step list from its 30% default to roughly 60% and persist both pane sizes.
+  expect(initialTraceStepsBox.width).toBeLessThan(traceViewBox.width / 2)
+  await page.mouse.move(
+    splitterBox.x + splitterBox.width / 2,
+    splitterBox.y + splitterBox.height / 2,
+  )
+  await page.mouse.down()
+  await page.mouse.move(
+    traceViewBox.x + traceViewBox.width * 0.6,
+    splitterBox.y + splitterBox.height / 2,
+    { steps: 5 },
+  )
+  await page.mouse.up()
+
+  // wait for storage update
+  await expect.poll(async () => (await getStoredTracePaneSizes(page))?.[0]).toBeGreaterThan(55)
+  const expectedTraceStepsBox = await traceSteps.boundingBox()
+  if (!expectedTraceStepsBox) {
+    throw new Error('Trace steps are not visible')
+  }
+  // The resize visibly expands the step list without moving it.
+  expect(expectedTraceStepsBox).toEqual({
+    x: expect.closeTo(initialTraceStepsBox.x, 1),
+    y: expect.closeTo(initialTraceStepsBox.y, 1),
+    width: expect.any(Number),
+    height: expect.closeTo(initialTraceStepsBox.height, 1),
+  })
+  expect(expectedTraceStepsBox.width).toBeGreaterThan(traceViewBox.width / 2)
+
+  // Reloading repeatedly preserves the resized trace step geometry.
+  for (let i = 0; i < 2; i++) {
+    await page.reload()
+    await expect(traceView).toBeVisible()
+    await expect.poll(() => traceSteps.boundingBox()).toEqual({
+      x: expect.closeTo(expectedTraceStepsBox.x, 1),
+      y: expect.closeTo(expectedTraceStepsBox.y, 1),
+      width: expect.closeTo(expectedTraceStepsBox.width, 1),
+      height: expect.closeTo(expectedTraceStepsBox.height, 1),
+    })
+  }
+}
+
+function getStoredTracePaneSizes(page: Page): Promise<number[] | null> {
+  return page.evaluate(() => {
+    const value = localStorage.getItem('vitest-ui_splitpanes-traceViewSplitSizes')
+    return value ? JSON.parse(value) : null
+  })
+}