refactor(web): unify react-grab opt-in var to VITE_REACT_GRAB

Use the same env var name as the desktop renderer so one variable name controls both apps. The desktop renderer is bundled by Vite, which only exposes VITE_-prefixed vars to client code, so the shared name must carry the VITE_ prefix; web reads it server-side where the name is unconstrained. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
feat(desktop): add opt-in react-grab dev element inspector
2026-06-22 06:59:19 +02:00 · 2026-06-22 09:19:08 +08:00 · 2026-06-22 09:11:00 +08:00 · 2026-06-22 08:55:02 +08:00
2 changed files with 33 additions and 0 deletions
--- a/apps/desktop/src/renderer/src/main.tsx
+++ b/apps/desktop/src/renderer/src/main.tsx
@@ -13,4 +13,18 @@ import "@fontsource/geist-mono/400.css";
 import "@fontsource/geist-mono/700.css";
 import "./globals.css";

+// react-grab: dev-only element inspector. Hold ⌘C (Mac) / Ctrl+C and click any
+// element to copy its source path + line + component stack for pasting to an AI.
+// Opt-in per developer: only loads when VITE_REACT_GRAB is set in a local,
+// gitignored apps/desktop/.env.development.local — it never activates for anyone
+// else, and the whole branch is tree-shaken out of production builds. The web app
+// wires the same tool via next/script in apps/web/app/layout.tsx.
+// See https://www.react-grab.com/
+if (import.meta.env.DEV && import.meta.env.VITE_REACT_GRAB) {
+  const grab = document.createElement("script");
+  grab.src = "//unpkg.com/react-grab/dist/index.global.js";
+  grab.crossOrigin = "anonymous";
+  document.head.appendChild(grab);
+}
+
 ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata, Viewport } from "next";
+import Script from "next/script";
 import { Inter, Geist_Mono, Source_Serif_4 } from "next/font/google";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@multica/ui/components/ui/sonner";
@@ -116,6 +117,24 @@ export default async function RootLayout({
      className={cn("antialiased font-sans h-full", inter.variable, geistMono.variable, sourceSerif.variable)}
    >
      <body className="h-full overflow-hidden">
+        {/*
+          react-grab: dev-only element inspector. Hold ⌘C (Mac) / Ctrl+C and click
+          any element to copy its source path + line + component stack for pasting
+          to an AI. Opt-in per developer: only loads when VITE_REACT_GRAB is set in
+          a local, gitignored apps/web/.env.local — it never activates for anyone
+          else. Both guards are read server-side, so the <Script> is omitted from
+          the HTML entirely unless you opted in. The VITE_ prefix is shared with the
+          desktop renderer (apps/desktop/src/renderer/src/main.tsx), where Vite only
+          exposes VITE_-prefixed vars to client code, so one var name covers both
+          apps. See https://www.react-grab.com/
+        */}
+        {process.env.NODE_ENV === "development" && process.env.VITE_REACT_GRAB && (
+          <Script
+            src="//unpkg.com/react-grab/dist/index.global.js"
+            crossOrigin="anonymous"
+            strategy="beforeInteractive"
+          />
+        )}
        <ThemeProvider>
          <WebProviders locale={locale} resources={resources}>
            {children}