From 04d7f8fcd01cb5dc84b72f79e837900e58f78c45 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <4232207+hi-ogawa@users.noreply.github.com>
Date: Mon, 5 Oct 2026 19:15:12 +0900
Subject: [PATCH] feat(ui): add trace zoom reset button

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 packages/ui/client/components/trace/TraceView.vue | 11 +++++++++++
 test/ui/test/trace.spec.ts                        |  9 +++++++++
 2 files changed, 20 insertions(+)

diff --git a/packages/ui/client/components/trace/TraceView.vue b/packages/ui/client/components/trace/TraceView.vue
index e5b1cf414..2174a3514 100644
--- a/packages/ui/client/components/trace/TraceView.vue
+++ b/packages/ui/client/components/trace/TraceView.vue
@@ -71,6 +71,10 @@ function zoomOut() {
   traceZoom.value = nextZoomOut.value ?? scale.value
 }
 
+function resetZoom() {
+  traceZoom.value = 1
+}
+
 function fitToPane() {
   traceZoom.value = 'fit'
 }
@@ -318,6 +322,13 @@ function onSplitpanesResized({ panes }: SplitpanesResizedPayload) {
             :disabled="nextZoomIn == null"
             @click="zoomIn()"
           />
+          <IconButton
+            v-tooltip.bottom="'Reset Zoom'"
+            title="Reset Zoom"
+            icon="i-carbon:zoom-reset"
+            :disabled="traceZoom === 1"
+            @click="resetZoom()"
+          />
           <IconButton
             v-tooltip.bottom="'Fit to Pane'"
             title="Fit to Pane"
diff --git a/test/ui/test/trace.spec.ts b/test/ui/test/trace.spec.ts
index fe1d4389a..d8a4efde9 100644
--- a/test/ui/test/trace.spec.ts
+++ b/test/ui/test/trace.spec.ts
@@ -281,12 +281,14 @@ async function testZoom(page: Page) {
   const zoomLabel = traceView.getByTestId('trace-zoom-label')
   const zoomIn = traceView.getByRole('button', { name: 'Zoom In' })
   const zoomOut = traceView.getByRole('button', { name: 'Zoom Out' })
+  const resetZoom = traceView.getByRole('button', { name: 'Reset Zoom' })
   const fitToPane = traceView.getByRole('button', { name: 'Fit to Pane' })
   await expect(traceFrame.getByRole('button', { name: 'Simple' })).toBeVisible()
 
   // actual size by default
   await expect(zoomLabel).toHaveText('414x896 · 100%')
   await expect(fitToPane).toHaveAttribute('aria-pressed', 'false')
+  await expect(resetZoom).toBeDisabled()
   await expect.poll(async () => Math.round((await iframe.boundingBox())!.width)).toBe(414)
 
   // zoom out and persist across reloads
@@ -310,6 +312,13 @@ async function testZoom(page: Page) {
   // zooming leaves fit mode
   await zoomIn.click()
   await expect(fitToPane).toHaveAttribute('aria-pressed', 'false')
+
+  // reset to actual size
+  await fitToPane.click()
+  await resetZoom.click()
+  await expect(zoomLabel).toHaveText('414x896 · 100%')
+  await expect(fitToPane).toHaveAttribute('aria-pressed', 'false')
+  await expect(resetZoom).toBeDisabled()
 }
 
 async function testViewport(page: Page) {
-- 
2.51.2