feat(webview): add Playwright CT coverage & pre-bundle webview toolkit

Author: edelauna

.github/workflows/visual-regression.yml

@@ -32,6 +32,14 @@ jobs:
                   install-args: "--frozen-lockfile"
             - name: Run webview visual tests
               run: pnpm --filter @roo-code/vscode-webview test:visual
+            - name: Upload visual test coverage to Codecov
+              if: always()
+              uses: codecov/codecov-action@b9fd7d16f6d7d1b5d2bec1a2887e65ceed900238 # v4
+              with:
+                  files: webview-ui/coverage-ct/lcov.info
+                  disable_search: true
+                  flags: webview-ui-ct
+                  token: ${{ secrets.CODECOV_TOKEN }}
             - name: Upload visual test artifacts
               if: failure()
               uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4

codecov.yml

@@ -11,6 +11,7 @@ coverage:
         threshold: 0.5%
         flags:
           - webview-ui
+          - webview-ui-ct
     patch:
       default:
         target: 80%       # new lines must be 80% covered
@@ -20,13 +21,18 @@ coverage:
         threshold: 0%
         flags:
           - webview-ui
+          - webview-ui-ct
 
 flag_management:
   individual_flags:
     - name: webview-ui
       paths:
         - webview-ui/src/
       carryforward: true
+    - name: webview-ui-ct
+      paths:
+        - webview-ui/src/
+      carryforward: true
     - name: core-unit
       paths:
         - packages/core/src/

knip.json

@@ -31,7 +31,8 @@
 				"react-compiler-runtime",
 				"source-map",
 				"tailwindcss",
-				"tailwindcss-animate"
+				"tailwindcss-animate",
+				"monocart-coverage-reports"
 			]
 		},
 		"apps/cli": {

pnpm-lock.yaml

@@ -108,6 +108,7 @@
 		"@vitest/ui": "4.1.9",
 		"babel-plugin-react-compiler": "1.0.0",
 		"jsdom": "26.1.0",
+		"monocart-coverage-reports": "^2.12.12",
 		"vite": "8.1.0",
 		"vitest": "4.1.9"
 	}

webview-ui/package.json

@@ -2,20 +2,41 @@ import path from "path"
 import { fileURLToPath } from "url"
 
 import { defineConfig } from "@playwright/experimental-ct-react"
+import type { ReporterDescription } from "@playwright/test"
 import react from "@vitejs/plugin-react"
 import tailwindcss from "@tailwindcss/vite"
 
 const dirname = path.dirname(fileURLToPath(import.meta.url))
 
+const monocartCoverageReporter: ReporterDescription = [
+	"monocart-coverage-reports",
+	{
+		name: "Webview Playwright CT Coverage",
+		outputDir: path.resolve(dirname, "coverage-ct"),
+		reports: ["lcov", "html"],
+		entryFilter: (entry: { url: string }) => entry.url.includes("/src/"),
+		sourceFilter: (sourcePath: string) => sourcePath.includes("src/"),
+	},
+]
+
 export default defineConfig({
 	testDir: "./src",
 	testMatch: "**/*.visual.tsx",
 	outputDir: process.env.CI ? path.resolve(dirname, "test-results") : "/tmp/webview-ui-playwright-test-results",
 	snapshotPathTemplate: "{testDir}/{testFileDir}/__screenshots__/{arg}{ext}",
 	fullyParallel: true,
 	reporter: process.env.CI
-		? [["html", { open: "never", outputFolder: path.resolve(dirname, "playwright-report") }], ["github"], ["list"]]
-		: [["html", { open: "never", outputFolder: "/tmp/webview-ui-playwright-report" }], ["list"]],
+		? [
+				["html", { open: "never", outputFolder: path.resolve(dirname, "playwright-report") }],
+				["github"],
+				["list"],
+				monocartCoverageReporter,
+			]
+		: [
+				["html", { open: "never", outputFolder: "/tmp/webview-ui-playwright-report" }],
+				["list"],
+				monocartCoverageReporter,
+			],
 	use: {
 		ctTemplateDir: "./playwright",
 		ctViteConfig: {
@@ -44,6 +65,7 @@ export default defineConfig({
 				"process.env.PKG_RELEASE_CHANNEL": JSON.stringify("stable"),
 			},
 			optimizeDeps: {
+				include: ["@vscode/webview-ui-toolkit"],
 				exclude: ["@vscode/codicons"],
 			},
 		},

webview-ui/playwright-ct.config.ts

@@ -33,6 +33,8 @@ export default defineConfig({
 				"**/*.test.tsx",
 				"**/*.spec.ts",
 				"**/*.spec.tsx",
+				"**/*.visual.ts",
+				"**/*.visual.tsx",
 				"**/vitest.setup.ts",
 				"**/vitest.config.ts",
 				"**/vite.config.ts",