From 740f3a70a608580a4d9501827a1e4289a776cfea Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <4232207+hi-ogawa@users.noreply.github.com>
Date: Mon, 7 Sep 2026 13:16:44 +0900
Subject: [PATCH] docs: position Trace View section

Co-authored-by: OpenCode (gpt-5.6-sol) <noreply@opencode.ai>
---
 README.md | 48 ++++++++++++++++++++++++------------------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/README.md b/README.md
index 3510778..0f5369c 100644
--- a/README.md
+++ b/README.md
@@ -66,30 +66,6 @@ When viewing a test file, you'll notice test icons in the gutter next to each te
   - `Reveal in Test Explorer`: Locate and highlight the test in the centralized Testing view.
   - `Breakpoint Settings`: Set breakpoints to pause execution during debugging. You can add a standard breakpoint, a conditional breakpoint, a logpoint, or a triggered breakpoint.
 
-### Trace View
-
-With Vitest 5, the extension can open recorded browser interactions for a selected test in [Vitest Trace View](https://vitest.dev/guide/browser/trace-view.html). Enable Trace View and the HTML reporter in your existing Browser Mode configuration:
-
-```ts
-import { defineConfig } from 'vitest/config'
-
-export default defineConfig({
-  test: {
-    reporters: ['default', 'html'],
-    browser: {
-      // Your existing Browser Mode configuration
-      traceView: true,
-    },
-  },
-})
-```
-
-After running a browser test through the extension, right-click the test in the Testing view or its editor gutter icon and select **Open Trace View**. The extension opens the generated HTML report at that test's first recorded step, using Visual Studio Code's Integrated Browser when available.
-
-The HTML reporter persists the recorded trace for replay. Normal test results remain available in Visual Studio Code's Testing view.
-
-<!-- TODO: Add a screenshot showing the Open Trace View action and Integrated Browser. -->
-
 ## Configuration
 
 You can identify if your config is loaded by the extension with `process.env.VITEST_VSCODE` and change the configuration accordingly.
@@ -159,6 +135,30 @@ If you hover over it, you can get a more detailed diagnostic.
 
 You can disable this feature by turning off `vitest.showImportsDuration`.
 
+### Trace View
+
+With Vitest 5, the extension can open recorded browser interactions for a selected test in [Vitest Trace View](https://vitest.dev/guide/browser/trace-view.html). Enable Trace View and the HTML reporter in your existing Browser Mode configuration:
+
+```ts
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    reporters: ['default', 'html'],
+    browser: {
+      // Your existing Browser Mode configuration
+      traceView: true,
+    },
+  },
+})
+```
+
+After running a browser test through the extension, right-click the test in the Testing view or its editor gutter icon and select **Open Trace View**. The extension opens the generated HTML report at that test's first recorded step, using Visual Studio Code's Integrated Browser when available.
+
+The HTML reporter persists the recorded trace for replay. Normal test results remain available in Visual Studio Code's Testing view.
+
+<img width="1323" height="730" alt="Vitest Trace View open in Visual Studio Code" src="https://github.com/user-attachments/assets/91268887-aa95-4181-aa83-e78d169f9ee5" />
+
 ## FAQs (Frequently Asked Questions)
 
 ### How can I use it in monorepo?
-- 
2.51.2