Inject React DevTools hook only in dev via Vite plugin

vite.config.ts

@@ -2,10 +2,26 @@ import { defineConfig } from 'vite'
 import react, { reactCompilerPreset } from '@vitejs/plugin-react'
 import babel from '@rolldown/plugin-babel'
 
+// Inject the React DevTools standalone hook only during `vite` dev (serve),
+// so it never ships in a production build.
+const devtools = () => ({
+  name: 'react-devtools-dev-only',
+  apply: 'serve' as const,
+  transformIndexHtml: {
+    order: 'pre' as const,
+    handler: (html: string) =>
+      html.replace(
+        '</head>',
+        '    <script src="http://localhost:8097"></script>\n  </head>',
+      ),
+  },
+})
+
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
     react(),
-    babel({ presets: [reactCompilerPreset()] })
+    babel({ presets: [reactCompilerPreset()] }),
+    devtools(),
   ],
 })