fix(web): Miscellaneous test and CI improvements

.github/workflows/playwright-extension.yml

@@ -100,50 +100,49 @@ jobs:
           retention-days: 1
           if-no-files-found: error
 
-  # TODO: remove merging reports for now. Enable after merging extension into monorepo
-  # merge-reports:
-  #   name: Merge reports
-  #   if: always()
-  #   needs: test
-  #   runs-on: ubuntu-latest
-  #   defaults:
-  #     run:
-  #       working-directory: apps/extension
-  #   steps:
-  #     - uses: actions/checkout@v4
-  #
-  #     - name: Download blob reports from GitHub Actions Artifacts
-  #       uses: actions/download-artifact@v4
-  #       with:
-  #         path: all-blob-reports
-  #         pattern: blob-report-*
-  #         merge-multiple: true
-  #
-  #     - name: Merge into HTML Report
-  #       run: npx playwright merge-reports --reporter html ./all-blob-reports
-  #
-  #     - name: Extract branch name
-  #       shell: bash
-  #       run: echo "branch=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}" >> $GITHUB_OUTPUT
-  #       id: extract_branch
-  #
-  #     - uses: Wandalen/wretry.action@master
-  #       if: github.event_name == 'pull_request'
-  #       with:
-  #         action: peaceiris/actions-gh-pages@v3
-  #         with: |
-  #           personal_token: ${{ secrets.SEMANTIC_RELEASE_TOKEN }}
-  #           external_repository: leather-io/playwright-reports
-  #           publish_branch: main
-  #           publish_dir: ./playwright-report
-  #           destination_dir: ${{ steps.extract_branch.outputs.branch }}
-  #
-  #     - name: Deploy specs.leather.io
-  #       uses: peaceiris/actions-gh-pages@v3
-  #       if: steps.extract_branch.outputs.branch == 'dev'
-  #       with:
-  #         personal_token: ${{ secrets.SEMANTIC_RELEASE_TOKEN }}
-  #         external_repository: leather-io/specs.leather.io
-  #         publish_branch: main
-  #         publish_dir: ./playwright-report
-  #         cname: specs.leather.io
+  merge-reports:
+    name: Merge reports
+    if: always()
+    needs: test
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: apps/extension
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Download blob reports from GitHub Actions Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: all-blob-reports
+          pattern: blob-report-*
+          merge-multiple: true
+
+      - name: Merge into HTML Report
+        run: npx playwright merge-reports --reporter html ./all-blob-reports
+
+      - name: Extract branch name
+        shell: bash
+        run: echo "branch=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}" >> $GITHUB_OUTPUT
+        id: extract_branch
+
+      - uses: Wandalen/wretry.action@master
+        if: github.event_name == 'pull_request'
+        with:
+          action: peaceiris/actions-gh-pages@v3
+          with: |
+            personal_token: ${{ secrets.LEATHER_BOT }}
+            external_repository: leather-io/playwright-reports
+            publish_branch: main
+            publish_dir: ./playwright-report
+            destination_dir: ${{ steps.extract_branch.outputs.branch }}
+
+      - name: Deploy specs.leather.io
+        uses: peaceiris/actions-gh-pages@v3
+        if: steps.extract_branch.outputs.branch == 'dev'
+        with:
+          personal_token: ${{ secrets.LEATHER_BOT }}
+          external_repository: leather-io/specs.leather.io
+          publish_branch: main
+          publish_dir: ./playwright-report
+          cname: specs.leather.io

apps/extension/package.json

@@ -233,6 +233,7 @@
     "@types/webpack": "5.28.5",
     "@types/zxcvbn": "4.4.5",
     "@typescript-eslint/parser": "7.5.0",
+    "@typescript/native-preview": "7.0.0-dev.20251121.1",
     "base64-loader": "1.0.0",
     "bip32": "4.0.0",
     "blns": "2.0.4",

apps/web/app/app.tsx

@@ -1,20 +1,12 @@
 import { useEffect } from 'react';
-import { Links, Meta, Outlet, Scripts, ScrollRestoration, useNavigate } from 'react-router';
+import { Outlet, useNavigate } from 'react-router';
 
 import { QueryClientProvider } from '@tanstack/react-query';
-import { css } from 'leather-styles/css';
-import { Box, Flex, styled } from 'leather-styles/jsx';
 import { queryClient } from '~/constants/query-client';
 
 import type { LeatherProvider } from '@leather.io/rpc';
-import { HasChildren, Tooltip } from '@leather.io/ui';
+import { Tooltip } from '@leather.io/ui';
 
-import { defaultMetaTags } from './constants/meta-tags';
-import { InstallDialog } from './features/install-dialog/install-dialog';
-import { MockLeatherDialog } from './features/mock-dialog/mock-dialog';
-import { Footer } from './layouts/footer/footer';
-import { GlobalLoader } from './layouts/nav/global-loader';
-import { Nav } from './layouts/nav/nav';
 import { analytics } from './utils/analytics/analytics';
 import { useOnRouteChange } from './utils/analytics/use-on-route-change';
 
@@ -24,47 +16,6 @@ declare global {
   }
 }
 
-const maxWidthCss = css({
-  maxWidth: '1200px',
-  margin: '0 auto',
-  width: '100%',
-});
-
-export function Layout({ children }: HasChildren) {
-  return (
-    <html lang="en">
-      <head>
-        <Meta />
-        {defaultMetaTags.map((meta, i) => (
-          <meta key={'meta' + i} {...meta} />
-        ))}
-        <Links />
-      </head>
-      <styled.body>
-        <GlobalLoader />
-        <Nav />
-        <Flex
-          flexDir="column"
-          marginLeft={[null, null, 'navbar']}
-          minHeight="100vh"
-          px={['space.04', null, 'space.07']}
-        >
-          <styled.main flex={1} bg="ink.background-primary" className={maxWidthCss}>
-            {children}
-          </styled.main>
-          <Box className={maxWidthCss}>
-            <Footer />
-          </Box>
-        </Flex>
-        <InstallDialog />
-        <MockLeatherDialog />
-        <ScrollRestoration />
-        <Scripts />
-      </styled.body>
-    </html>
-  );
-}
-
 export default function App() {
   const navigate = useNavigate();
 

apps/web/app/entry.client.tsx

@@ -5,7 +5,7 @@ import { HydratedRouter } from 'react-router/dom';
 import * as Sentry from '@sentry/react-router';
 
 import { LEATHER_MOCK_MODE } from './constants/environment';
-import { createLDProvider } from './features/feature-flags';
+import { createLaunchDarklyProvider } from './features/feature-flags';
 
 Sentry.init({
   dsn: import.meta.env.LEATHER_SENTRY_DSN,
@@ -36,16 +36,20 @@ async function enableApiMocking() {
   });
 }
 
-const LDProvider = await createLDProvider();
+const LaunchDarklyProvider = await createLaunchDarklyProvider();
 
 void enableApiMocking().then(() =>
   startTransition(() => {
     hydrateRoot(
       document,
       <StrictMode>
-        <LDProvider>
+        {LaunchDarklyProvider ? (
+          <LaunchDarklyProvider>
+            <HydratedRouter />
+          </LaunchDarklyProvider>
+        ) : (
           <HydratedRouter />
-        </LDProvider>
+        )}
       </StrictMode>
     );
   })

apps/web/app/features/feature-flags/index.ts

@@ -2,9 +2,11 @@ import { asyncWithLDProvider, useFlags } from 'launchdarkly-react-client-sdk';
 import { VERSION } from '~/constants/constants';
 import { getClientId } from '~/utils/client-id';
 
-export function createLDProvider() {
+export function createLaunchDarklyProvider() {
+  if (!import.meta.env.LEATHER_LAUNCH_DARKLY_KEY) return null;
+
   return asyncWithLDProvider({
-    clientSideID: import.meta.env.LEATHER_LAUNCH_DARKLY_KEY ?? '',
+    clientSideID: import.meta.env.LEATHER_LAUNCH_DARKLY_KEY,
     options: {
       application: {
         id: 'leather-web',

apps/web/app/root.tsx

@@ -1,9 +1,20 @@
+import { Links, Meta, Scripts, ScrollRestoration } from 'react-router';
+
+import { css } from 'leather-styles/css';
+import { Box, Flex, styled } from 'leather-styles/jsx';
 import { Buffer } from 'safe-buffer';
 
+import { HasChildren } from '@leather.io/ui';
 import leatherUiStyles from '@leather.io/ui/styles?url';
 
 import type { Route } from './+types/root';
 import stylesheet from './app.css?url';
+import { defaultMetaTags } from './constants/meta-tags';
+import { InstallDialog } from './features/install-dialog/install-dialog';
+import { MockLeatherDialog } from './features/mock-dialog/mock-dialog';
+import { Footer } from './layouts/footer/footer';
+import { GlobalLoader } from './layouts/nav/global-loader';
+import { Nav } from './layouts/nav/nav';
 import { ErrorPage } from './layouts/page/error';
 
 // Polyfill global Buffer
@@ -20,4 +31,45 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
   return <ErrorPage error={error} />;
 }
 
-export { default, Layout } from './app';
+const maxWidthCss = css({
+  maxWidth: '1200px',
+  margin: '0 auto',
+  width: '100%',
+});
+
+export function Layout({ children }: HasChildren) {
+  return (
+    <html lang="en">
+      <head>
+        <Meta />
+        {defaultMetaTags.map((meta, i) => (
+          <meta key={'meta' + i} {...meta} />
+        ))}
+        <Links />
+      </head>
+      <styled.body>
+        <GlobalLoader />
+        <Nav />
+        <Flex
+          flexDir="column"
+          marginLeft={[null, null, 'navbar']}
+          minHeight="100vh"
+          px={['space.04', null, 'space.07']}
+        >
+          <styled.main flex={1} bg="ink.background-primary" className={maxWidthCss}>
+            {children}
+          </styled.main>
+          <Box className={maxWidthCss}>
+            <Footer />
+          </Box>
+        </Flex>
+        <InstallDialog />
+        <MockLeatherDialog />
+        <ScrollRestoration />
+        <Scripts />
+      </styled.body>
+    </html>
+  );
+}
+
+export { default } from './app';

apps/web/package.json

@@ -7,7 +7,7 @@
     "build:watch": "pnpm dev",
     "cf-typegen": "wrangler types",
     "deploy": "pnpm build && wrangler deploy",
-    "dev": "NODE_OPTIONS='--import ./instrument.server.mjs' react-router dev",
+    "dev": "react-router dev",
     "format": "prettier --write \"app/**/*.{ts,tsx}\" --ignore-path ../../.prettierignore",
     "format:check": "prettier --check \"app/**/*.{ts,tsx}\" --ignore-path ../../.prettierignore",
     "lint": "eslint \"app/**/*.{ts,tsx}\"",
@@ -41,8 +41,8 @@
     "@leather.io/utils": "workspace:*",
     "@portabletext/react": "4.0.2",
     "@portabletext/to-html": "3.0.0",
-    "@react-router/node": "7.9.4",
-    "@react-router/serve": "7.9.4",
+    "@react-router/node": "7.9.6",
+    "@react-router/serve": "7.9.6",
     "@sanity/image-url": "1.2.0",
     "@segment/analytics-next": "1.81.0",
     "@sentry/profiling-node": "9.15.0",
@@ -71,7 +71,7 @@
     "react-dom": "19.0.0",
     "react-hook-form": "7.62.0",
     "react-markdown": "10.1.0",
-    "react-router": "7.9.4",
+    "react-router": "7.9.6",
     "react-syntax-highlighter": "15.6.6",
     "react-virtuoso": "4.9.0",
     "rehype-raw": "7.0.0",
@@ -84,14 +84,14 @@
     "zod": "4.0.17"
   },
   "devDependencies": {
-    "@cloudflare/vite-plugin": "1.13.12",
-    "@cloudflare/workers-types": "4.20251011.0",
+    "@cloudflare/vite-plugin": "1.15.2",
+    "@cloudflare/workers-types": "4.20251121.0",
     "@msw/playwright": "0.4.2",
     "@originjs/vite-plugin-commonjs": "1.0.3",
     "@pandacss/dev": "0.53.6",
     "@playwright/test": "1.56.0",
-    "@react-router/cloudflare": "7.9.4",
-    "@react-router/dev": "7.9.4",
+    "@react-router/cloudflare": "7.9.6",
+    "@react-router/dev": "7.9.6",
     "@types/d3": "7.4.3",
     "@types/node": "24.0.8",
     "@types/nprogress": "0.2.3",
@@ -101,7 +101,7 @@
     "@types/valid-url": "1.0.7",
     "jsdom": "26.1.0",
     "msw": "2.10.4",
-    "react-router-devtools": "5.1.3",
+    "react-router-devtools": "6.0.0",
     "rollup-plugin-node-polyfills": "0.2.1",
     "ts-node": "10.9.2",
     "tty-browserify": "0.0.1",
@@ -110,6 +110,6 @@
     "vite-plugin-svgr": "4.3.0",
     "vite-tsconfig-paths": "5.1.4",
     "vitest": "2.1.9",
-    "wrangler": "4.42.2"
+    "wrangler": "4.50.0"
   }
 }

apps/web/playwright.config.ts

@@ -4,7 +4,9 @@ export default defineConfig({
   testDir: './tests',
   testMatch: '**/*.spec.ts',
 
-  fullyParallel: true,
+  // MSW, used via @msw/playwright is not fully isolated to an individual test,
+  // so this settings must be disabled
+  fullyParallel: false,
 
   forbidOnly: !!process.env.CI,