Merge remote-tracking branch 'origin/main'

Author: MarkusNeusinger

app/package.json

@@ -27,7 +27,8 @@
     "react-dom": "^19.2.4",
     "react-helmet-async": "^3.0.0",
     "react-router-dom": "^7.13.1",
-    "react-syntax-highlighter": "^16.1.1"
+    "react-syntax-highlighter": "^16.1.1",
+    "web-vitals": "^5.1.0"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",

app/src/analytics/reportWebVitals.ts

@@ -0,0 +1,43 @@
+/**
+ * Core Web Vitals tracking via web-vitals library.
+ * Reports LCP, CLS, and INP to Plausible as custom events.
+ * Only runs in production (pyplots.ai), dynamically imported for zero dev cost.
+ */
+export function reportWebVitals() {
+  if (
+    typeof window === 'undefined' ||
+    window.location.hostname !== 'pyplots.ai'
+  ) {
+    return;
+  }
+
+  import('web-vitals').then(({ onLCP, onCLS, onINP }) => {
+    onLCP((metric) => {
+      window.plausible?.('LCP', {
+        props: {
+          value: String(Math.round(metric.value / 100) * 100),
+          rating: metric.rating,
+        },
+      });
+    });
+
+    onCLS((metric) => {
+      window.plausible?.('CLS', {
+        props: {
+          value: String(Math.round(metric.value * 100) / 100),
+          rating: metric.rating,
+        },
+      });
+    });
+
+    onINP((metric) => {
+      window.plausible?.('INP', {
+        props: {
+          value: String(Math.round(metric.value / 50) * 50),
+          rating: metric.rating,
+        },
+      });
+    });
+  })
+  .catch(() => {});
+}

app/src/components/SpecTabs.tsx

@@ -202,17 +202,18 @@ export function SpecTabs({
   }, [code, specId, libraryId, onTrackEvent]);
 
   const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
+    // In overview mode, only Spec tab exists at index 0
+    const tabNames = overviewMode
+      ? ['specification']
+      : ['code', 'specification', 'implementation', 'quality'];
+
     // Toggle: clicking same tab collapses it
     if (tabIndex === newValue) {
+      onTrackEvent?.('tab_toggle', { action: 'close', tab: tabNames[tabIndex], library: libraryId || undefined });
       setTabIndex(null);
-      onTrackEvent?.('tab_collapse', { library: libraryId });
     } else {
       setTabIndex(newValue);
-      // In overview mode, only Spec tab exists at index 0
-      const tabNames = overviewMode
-        ? ['specification']
-        : ['code', 'specification', 'implementation', 'quality'];
-      onTrackEvent?.('tab_click', { tab: tabNames[newValue], library: libraryId });
+      onTrackEvent?.('tab_toggle', { action: 'open', tab: tabNames[newValue], library: libraryId || undefined });
     }
   };
 

app/src/components/ToolbarActions.tsx

@@ -50,7 +50,7 @@ export function GridSizeToggle({ imageSize, onImageSizeChange, onTrackEvent }: T
   const handleToggle = () => {
     const newSize = imageSize === 'normal' ? 'compact' : 'normal';
     onImageSizeChange(newSize);
-    onTrackEvent('toggle_grid_size', { size: newSize });
+    onTrackEvent('grid_resize', { size: newSize });
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {

app/src/hooks/useFilterState.ts

@@ -225,7 +225,7 @@ export function useFilterState({
       // Clear animation state
       setTimeout(() => setRandomAnimation(null), 1000);
 
-      onTrackEvent('random', { category: randomCategory, value: randomValue, method });
+      onTrackEvent('random_filter', { category: randomCategory, value: randomValue, method });
     },
     [filterCounts, globalCounts, onTrackEvent]
   );

app/src/main.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { AppRouter } from './router';
+import { reportWebVitals } from './analytics/reportWebVitals';
 
 // Import MonoLisa font - hosted on GCS (all text uses MonoLisa)
 import './styles/fonts.css';
@@ -46,3 +47,5 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
     </ThemeProvider>
   </React.StrictMode>
 );
+
+reportWebVitals();

app/src/pages/HomePage.tsx

@@ -112,9 +112,8 @@ export function HomePage() {
       const specId = img.spec_id || '';
       const library = img.library;
       navigate(`/${specId}/${library}`);
-      trackEvent('navigate_to_spec', { spec: specId, library });
     },
-    [navigate, trackEvent, saveScrollPosition]
+    [navigate, saveScrollPosition]
   );
 
   // Close tooltip when clicking anywhere

app/src/pages/LegalPage.tsx

@@ -404,7 +404,7 @@ export function LegalPage() {
         </Paper>
 
         <Typography sx={{ textAlign: 'center', fontSize: '0.8rem', color: '#9ca3af', mt: 2 }}>
-          Last updated: January 2026
+          Last updated: March 2026
         </Typography>
       </Box>
 

app/src/pages/SpecPage.tsx

@@ -34,7 +34,7 @@ interface SpecDetail {
 export function SpecPage() {
   const { specId, library: urlLibrary } = useParams();
   const navigate = useNavigate();
-  const { trackEvent } = useAnalytics();
+  const { trackPageview, trackEvent } = useAnalytics();
   const { librariesData } = useAppData();
 
   const [specData, setSpecData] = useState<SpecDetail | null>(null);
@@ -100,25 +100,22 @@ export function SpecPage() {
     (libraryId: string) => {
       setImageLoaded(false);
       navigate(`/${specId}/${libraryId}`, { replace: true });
-      trackEvent('switch_library', { spec: specId, library: libraryId });
     },
-    [specId, navigate, trackEvent]
+    [specId, navigate]
   );
 
   // Handle implementation click (in overview mode)
   const handleImplClick = useCallback(
     (libraryId: string) => {
       navigate(`/${specId}/${libraryId}`);
-      trackEvent('select_implementation', { spec: specId, library: libraryId });
     },
-    [specId, navigate, trackEvent]
+    [specId, navigate]
   );
 
   // Handle image click (in detail mode - go back to overview)
   const handleImageClick = useCallback(() => {
     navigate(`/${specId}`);
-    trackEvent('back_to_overview', { spec: specId, library: selectedLibrary || undefined });
-  }, [specId, selectedLibrary, navigate, trackEvent]);
+  }, [specId, navigate]);
 
   // Handle download
   const handleDownload = useCallback(
@@ -171,12 +168,12 @@ export function SpecPage() {
   useEffect(() => {
     if (specData) {
       if (isOverviewMode) {
-        trackEvent('view_spec_overview', { spec: specId });
+        trackPageview(`/${specId}`);
       } else if (selectedLibrary) {
-        trackEvent('view_spec', { spec: specId, library: selectedLibrary });
+        trackPageview(`/${specId}/${selectedLibrary}`);
       }
     }
-  }, [specData, isOverviewMode, selectedLibrary, specId, trackEvent]);
+  }, [specData, isOverviewMode, selectedLibrary, specId, trackPageview]);
 
   // Loading state
   if (loading) {

app/yarn.lock

@@ -2653,6 +2653,11 @@ w3c-xmlserializer@^5.0.0:
   dependencies:
     xml-name-validator "^5.0.0"
 
+web-vitals@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-5.1.0.tgz#2f117e92c8c4eeb107cb163cbb482ac20d685ebd"
+  integrity sha512-ArI3kx5jI0atlTtmV0fWU3fjpLmq/nD3Zr1iFFlJLaqa5wLBkUSzINwBPySCX/8jRyjlmy1Volw1kz1g9XE4Jg==
+
 webidl-conversions@^8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-8.0.1.tgz#0657e571fe6f06fcb15ca50ed1fdbcb495cd1686"