fix(webview): isolate visual test dependencies

Author: WebMad

packages/types/package.json

@@ -11,6 +11,14 @@
 				"types": "./dist/index.d.cts",
 				"default": "./dist/index.cjs"
 			}
+		},
+		"./model": {
+			"types": "./src/model.ts",
+			"import": "./src/model.ts"
+		},
+		"./provider-identifiers": {
+			"types": "./src/provider-identifiers.ts",
+			"import": "./src/provider-identifiers.ts"
 		}
 	},
 	"scripts": {

webview-ui/playwright-ct.config.ts

@@ -58,10 +58,15 @@ export default defineConfig({
 			],
 			resolve: {
 				alias: {
+					"@src/i18n/TranslationContext": path.resolve(dirname, "./playwright/TranslationContext.ts"),
 					"@": path.resolve(dirname, "./src"),
 					"@src": path.resolve(dirname, "./src"),
 					"@roo": path.resolve(dirname, "../src/shared"),
-					vscode: path.resolve(dirname, "./src/__mocks__/vscode.ts"),
+					"@vscode/webview-ui-toolkit/react": path.resolve(
+						dirname,
+						"./src/__mocks__/@vscode/webview-ui-toolkit/react.tsx",
+					),
+					vscode: path.resolve(dirname, "../src/__mocks__/vscode.js"),
 				},
 			},
 			define: {

webview-ui/playwright/TranslationContext.ts

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react"
+
+type TranslationContextValue = {
+	t: (key: string, options?: Record<string, any>) => string
+	i18n: unknown
+}
+
+export const TranslationContext = createContext<TranslationContextValue>({
+	t: (key: string) => key,
+	i18n: null,
+})
+
+export const useAppTranslation = () => useContext(TranslationContext)

webview-ui/src/components/settings/ModelDescriptionMarkdown.tsx

@@ -3,7 +3,7 @@ import { memo, useEffect, useRef, useState } from "react"
 import { useRemark } from "react-remark"
 
 import { cn } from "@/lib/utils"
-import { Collapsible, CollapsibleTrigger } from "@/components/ui"
+import { Collapsible, CollapsibleTrigger } from "@/components/ui/collapsible"
 
 import { StyledMarkdown } from "./styles"
 

webview-ui/src/components/settings/ModelInfoView.tsx

@@ -1,6 +1,7 @@
 import { VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 
-import { OpenAiServiceTier, providerIdentifiers, type ModelInfo, type ServiceTier } from "@roo-code/types"
+import { OpenAiServiceTier, type ModelInfo, type ServiceTier } from "@roo-code/types/model"
+import { providerIdentifiers } from "@roo-code/types/provider-identifiers"
 
 import { formatPrice } from "@src/utils/formatPrice"
 import { cn } from "@src/lib/utils"

webview-ui/src/components/settings/__tests__/ModelInfoView.visual.fixture.tsx

@@ -1,8 +1,9 @@
 import React from "react"
 
-import { OpenAiServiceTier, providerIdentifiers, type ModelInfo } from "@roo-code/types"
+import { OpenAiServiceTier, type ModelInfo } from "@roo-code/types/model"
+import { providerIdentifiers } from "@roo-code/types/provider-identifiers"
 
-import { TranslationContext } from "../../../i18n/TranslationContext"
+import { TranslationContext } from "@src/i18n/TranslationContext"
 import { ModelInfoView } from "../ModelInfoView"
 
 const modelInfo: ModelInfo = {