chore: slim bundle, drop Faro, isolate CSS from Overleaf (#168)

## Summary

- **Slim code highlighting** — replace `@streamdown/code` (bundles all
50+ Shiki grammars) with a custom plugin loading only 13 languages + 2
themes. `paperdebugger.js` 17 MB → 9.4 MB.
- **Remove Grafana Faro** observability SDK from the extension bundle
and build pipeline.
- **Isolate extension CSS from Overleaf** — scope all CSS under a
`.pd-scope` class (via `postcss-prefix-selector`, content-script build
only) so Tailwind preflight + heroui no longer leak into and mutate the
Overleaf page. All UI surfaces (floating window, embed sidebar, heroui
popovers via a dedicated `#pd-portal`, toolbar buttons) are self-scoped.
- **Telemetry** — LLM TTFT, JS heap gauge, event capture.

## Testing notes
Automated: tsc + build clean. Manual (needs a browser on Overleaf):
- Overleaf's own styling no longer altered
- All 5 display modes render styled (floating, right-fixed,
bottom-fixed, fullscreen, embed)
- Dark mode in floating + embed
- heroui modals/tooltips/selects styled
- Toolbar button + "Add to Chat" styled

🤖 Generated with [Claude Code](https://claude.com/claude-code)

https://claude.ai/code/session_01ECe2qZWextwVCycC9EveFe

---------

Co-authored-by: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

Author: Junyi-99

webapp/_webapp/package-lock.json

@@ -25,11 +25,21 @@
     "@buf/googleapis_googleapis.bufbuild_es": "^2.2.3-20250211200939-546238c53f73.1",
     "@bufbuild/protobuf": "^2.5.1",
     "@capacitor-community/apple-sign-in": "^7.0.1",
-    "@grafana/faro-web-sdk": "^2.0.2",
-    "@grafana/faro-web-tracing": "^2.0.2",
     "@heroui/react": "^2.7.9",
     "@iconify/react": "^6.0.0",
     "@lukemorales/query-key-factory": "^1.3.4",
+    "@opentelemetry/exporter-logs-otlp-http": "^0.219.0",
+    "@opentelemetry/exporter-metrics-otlp-http": "^0.219.0",
+    "@opentelemetry/exporter-metrics-otlp-proto": "^0.219.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.219.0",
+    "@opentelemetry/instrumentation": "^0.219.0",
+    "@opentelemetry/instrumentation-document-load": "^0.64.0",
+    "@opentelemetry/instrumentation-fetch": "^0.219.0",
+    "@opentelemetry/resources": "^2.8.0",
+    "@opentelemetry/sdk-logs": "^0.219.0",
+    "@opentelemetry/sdk-metrics": "^2.8.0",
+    "@opentelemetry/sdk-trace-web": "^2.8.0",
+    "@opentelemetry/semantic-conventions": "^1.41.1",
     "@r2wc/react-to-web-component": "^2.1.0",
     "@streamdown/cjk": "^1.0.1",
     "@streamdown/code": "^1.0.1",
@@ -56,13 +66,13 @@
     "semver": "^7.7.2",
     "streamdown": "^2.1.0",
     "uuid": "^11.1.0",
+    "web-vitals": "^5.3.0",
     "zustand": "^5.0.5"
   },
   "devDependencies": {
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.37.1",
     "@eslint/js": "^9.28.0",
-    "@grafana/faro-rollup-plugin": "^0.7.0",
     "@types/bun": "^1.3.5",
     "@types/chrome": "^0.0.326",
     "@types/codemirror": "^5.60.16",
@@ -78,6 +88,7 @@
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.2.0",
     "nodemon": "^3.1.10",
+    "postcss-prefix-selector": "^2.1.1",
     "prettier": "3.5.3",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.8.3",

webapp/_webapp/package.json

@@ -1,6 +1,38 @@
+// ponytail: scope ALL css under .pd-scope ONLY for the content-script build
+// (VITE_CONFIG=default) so preflight/heroui don't leak into Overleaf. The
+// .pd-scope class sits on every container we mount into (#paper-debugger-root
+// and #pd-embed-sidebar). Settings/popup are standalone pages and stay unscoped.
+const SCOPE = ".pd-scope";
+const scoped = process.env.VITE_CONFIG === "default";
+
 export default {
   plugins: {
     tailwindcss: {},
+    ...(scoped && {
+      "postcss-prefix-selector": {
+        prefix: SCOPE,
+        transform(prefix, selector, prefixedSelector) {
+          // Root-level globals apply to the scope container itself.
+          if (selector === "html" || selector === "body" || selector === ":root") return prefix;
+          // box-sizing/* reset: cover the scope element and everything inside it.
+          if (selector === "*") return `${prefix}, ${prefix} *`;
+          // Theme toggles + :root variants live ON the scope element → compound, not descendant.
+          if (/^\.(dark|light)\b/.test(selector)) return prefix + selector;
+          if (selector.startsWith(":root")) return prefix + selector.slice(":root".length);
+          if (selector.startsWith("[data-theme")) return prefix + selector;
+          // These elements ARE scope roots (carry .pd-scope on themselves) → compound,
+          // so rules targeting the element itself keep matching after scoping.
+          if (
+            selector.startsWith("#pd-embed-sidebar") ||
+            selector.startsWith("#paper-debugger-root") ||
+            selector.startsWith(".pd-rnd")
+          ) {
+            return prefix + selector;
+          }
+          return prefixedSelector;
+        },
+      },
+    }),
     autoprefixer: {},
   },
 };

webapp/_webapp/postcss.config.js

@@ -1,6 +1,6 @@
 import { memo } from "react";
 import { Streamdown } from "streamdown";
-import { code } from "@streamdown/code";
+import { code } from "../libs/code-plugin";
 import { mermaid } from "@streamdown/mermaid";
 import { math } from "@streamdown/math";
 import { cjk } from "@streamdown/cjk";

webapp/_webapp/src/components/markdown.tsx

@@ -1,7 +1,7 @@
 import { cn } from "@heroui/react";
 import { useEffect, useState, useRef } from "react";
 import { Streamdown } from "streamdown";
-import { code } from "@streamdown/code";
+import { code } from "../../../libs/code-plugin";
 import { mermaid } from "@streamdown/mermaid";
 import { math } from "@streamdown/math";
 import { cjk } from "@streamdown/cjk";

webapp/_webapp/src/components/message-entry-container/tools/general.tsx

@@ -7,7 +7,7 @@ export function PdAppContainer({
   ...props
 }: React.HTMLAttributes<HTMLDivElement> & { children: ReactNode }) {
   return (
-    <div className={cn("pd-app-container", className)} {...props}>
+    <div className={cn("pd-app-container", className)} id="pd-container" {...props}>
       {children}
     </div>
   );

webapp/_webapp/src/components/pd-app-container.tsx

@@ -50,33 +50,42 @@ export const TopMenuButton = () => {
       id="paper-debugger-button"
       onContextMenu={(event) => handleContextMenu(event)}
     >
+      {/* Native Overleaf button stays OUTSIDE .pd-scope so Overleaf's own color
+          rules win (our preflight would otherwise reset its color to black).
+          Layout utilities are inlined; inner content is scoped for our utilities. */}
       <button
-        className="btn btn-full-height flex gap-1 items-center justify-center ide-redesign-toolbar-dropdown-toggle-subdued ide-redesign-toolbar-button-subdued menu-bar-toggle"
+        className="btn btn-full-height ide-redesign-toolbar-dropdown-toggle-subdued ide-redesign-toolbar-button-subdued menu-bar-toggle"
+        style={{ display: "flex", gap: "0.25rem", alignItems: "center", justifyContent: "center" }}
         onClick={() => setIsOpen(!isOpen)}
       >
-        <Logo className="bg-transparent p-0 m-0 flex items-center justify-center w-6 h-6 align-middle" />
-        <p className={`text-exo-2 toolbar-label ${settings?.fullWidthPaperDebuggerButton ? "" : "hidden"}`}>
-          <span className="font-light">Paper</span>
-          <span className="font-bold">Debugger</span>
-          <span className="text-xs text-white bg-gray-700 rounded-md px-2 py-1 ms-2">
-            {getBrowser() === Browser.Chrome ? "⌘ + L" : "⌃ + L"}
-          </span>
-        </p>
+        {/* Use Overleaf's button color var so the logo (fill=currentColor) and label track the toolbar theme. */}
+        <span className="pd-scope" style={{ display: "contents", color: "var(--bs-btn-color)" }}>
+          <Logo className="bg-transparent p-0 m-0 flex items-center justify-center w-6 h-6 align-middle" />
+          <p className={`text-exo-2 toolbar-label ${settings?.fullWidthPaperDebuggerButton ? "" : "hidden"}`}>
+            <span className="font-light">Paper</span>
+            <span className="font-bold">Debugger</span>
+            <span className="text-xs text-white bg-gray-700 rounded-md px-2 py-1 ms-2">
+              {getBrowser() === Browser.Chrome ? "⌘ + L" : "⌃ + L"}
+            </span>
+          </p>
+        </span>
       </button>
       {/* Position reset menu */}
-      <div
-        className={`pd-context-menu noselect ${contextMenuVisible ? "show" : ""}`}
-        style={{
-          zIndex: 998,
-        }}
-      >
-        <div className="pd-context-menu-item-group">
-          <p className="text-xs text-gray-400 px-2">If you can't find the PaperDebugger window, try to:</p>
-          <div className="pd-context-menu-item noselect" onClick={handleResetPosition}>
-            <p>Reset Position</p>
+      <span className="pd-scope" style={{ display: "contents" }}>
+        <div
+          className={`pd-context-menu noselect ${contextMenuVisible ? "show" : ""}`}
+          style={{
+            zIndex: 998,
+          }}
+        >
+          <div className="pd-context-menu-item-group">
+            <p className="text-xs text-gray-400 px-2">If you can't find the PaperDebugger window, try to:</p>
+            <div className="pd-context-menu-item noselect" onClick={handleResetPosition}>
+              <p>Reset Position</p>
+            </div>
           </div>
         </div>
-      </div>
+      </span>
     </div>
   );
 };

webapp/_webapp/src/components/top-menu-button.tsx

@@ -27,7 +27,7 @@
           ></div>
 
           <!-- Paper Debugger Root -->
-          <div id="root-paper-debugger" class="hidden"></div>
+          <div id="paper-debugger-root" class="hidden"></div>
         </div>
       </div>
     </div>

webapp/_webapp/src/devtool/index.html

@@ -7,7 +7,7 @@ import { AdapterProvider, getOverleafAdapter } from "../adapters";
 const devTool = createRoot(document.getElementById("root-devtools")!);
 devTool.render(<App />);
 
-const paperDebugger = createRoot(document.getElementById("root-paper-debugger")!);
+const paperDebugger = createRoot(document.getElementById("paper-debugger-root")!);
 const adapter = getOverleafAdapter();
 paperDebugger.render(
   <Providers>

webapp/_webapp/src/devtool/index.tsx

@@ -1,11 +1,10 @@
 import { useEffect } from "react";
 import { useSettingStore } from "../stores/setting-store";
 
-const THEME_ROOT_ID = "paper-debugger-root";
-
-function getThemeRoot(): HTMLElement {
-  return document.getElementById(THEME_ROOT_ID) ?? document.documentElement;
-}
+// Every container that carries .pd-scope; the .dark class must sit on these so
+// scoped heroui rules (.pd-scope.dark ...) resolve. Falls back to <html> on
+// standalone pages (settings/popup) where no scope root exists.
+const SCOPE_ROOT_IDS = ["paper-debugger-root", "pd-portal", "pd-embed-sidebar"];
 
 function applyThemeToElement(el: HTMLElement, isDark: boolean): void {
   if (isDark) {
@@ -15,37 +14,31 @@ function applyThemeToElement(el: HTMLElement, isDark: boolean): void {
   }
 }
 
-/**
- * Apply theme to all elements that may contain our UI.
- * In Overleaf embed mode, the sidebar is rendered via portal into #pd-embed-sidebar
- * (inside .ide-redesign-body), which is outside #paper-debugger-root. So we must
- * also set the theme on documentElement so that portal content gets dark mode.
- */
-function applyTheme(root: HTMLElement, isDark: boolean): void {
-  applyThemeToElement(root, isDark);
-  if (root.id === THEME_ROOT_ID && root !== document.documentElement) {
+function applyTheme(isDark: boolean): void {
+  const roots = SCOPE_ROOT_IDS.map((id) => document.getElementById(id)).filter((el): el is HTMLElement => !!el);
+  if (roots.length === 0) {
     applyThemeToElement(document.documentElement, isDark);
+    return;
   }
+  for (const root of roots) applyThemeToElement(root, isDark);
 }
 
 export function useThemeSync(): void {
   const themeMode = useSettingStore((s) => s.themeMode);
 
   useEffect(() => {
-    const root = getThemeRoot();
-
     if (themeMode === "light") {
-      applyTheme(root, false);
+      applyTheme(false);
       return;
     }
     if (themeMode === "dark") {
-      applyTheme(root, true);
+      applyTheme(true);
       return;
     }
 
     // themeMode === "auto": follow system
     const media = window.matchMedia("(prefers-color-scheme: dark)");
-    const update = () => applyTheme(root, media.matches);
+    const update = () => applyTheme(media.matches);
     update();
     media.addEventListener("change", update);
     return () => media.removeEventListener("change", update);