feat: add overview mode, sitemap improvements, and UI polish

- Add overview/detail mode navigation for spec pages
  - /scatter-basic → overview grid showing all implementations
  - /scatter-basic/matplotlib → detail view with carousel
- Add action buttons (copy code, download, interactive) to overview grid
- Add library tooltip with description and doc URL in overview
- Fix interactive page postMessage origin for localhost development
- Update catalog links to go to overview page
- Expand sitemap to include all implementation URLs (~1500 pages)
- Fix spacing consistency between pages
- Add ClickAwayListener to close tooltips on outside click

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: MarkusNeusinger

api/routers/proxy.py

@@ -9,13 +9,17 @@
 
 router = APIRouter(tags=["proxy"])
 
-# Script injected to report content size to parent window
-# Uses specific origin (pyplots.ai) for postMessage security
-SIZE_REPORTER_SCRIPT = """
+# Allowed origins for postMessage
+ALLOWED_ORIGINS = ["https://pyplots.ai", "http://localhost:3000"]
+
+
+def get_size_reporter_script(target_origin: str) -> str:
+    """Generate size reporter script with specified target origin."""
+    return f"""
 <script>
-(function() {
-  function reportSize() {
-    try {
+(function() {{
+  function reportSize() {{
+    try {{
       // Find the main content element (try common patterns for different libraries)
       var content = document.querySelector(
         '.bk-root, .vega-embed, .plotly, .chart-container, #container, .lp-plot, svg, canvas'
@@ -32,34 +36,38 @@
       height += padding;
 
       // Send to parent with specific origin for security
-      if (width > 0 && height > 0 && window.parent !== window) {
-        window.parent.postMessage({
+      if (width > 0 && height > 0 && window.parent !== window) {{
+        window.parent.postMessage({{
           type: 'pyplots-size',
           width: Math.ceil(width),
           height: Math.ceil(height)
-        }, 'https://pyplots.ai');
-      }
-    } catch (e) {
+        }}, '{target_origin}');
+      }}
+    }} catch (e) {{
       // Silently fail if postMessage is blocked
-    }
-  }
+    }}
+  }}
 
   // Report after load and after delays (for async rendering libraries)
-  if (document.readyState === 'complete') {
+  if (document.readyState === 'complete') {{
     setTimeout(reportSize, 100);
     setTimeout(reportSize, 500);
     setTimeout(reportSize, 1000);
-  } else {
-    window.addEventListener('load', function() {
+  }} else {{
+    window.addEventListener('load', function() {{
       setTimeout(reportSize, 100);
       setTimeout(reportSize, 500);
       setTimeout(reportSize, 1000);
-    });
-  }
-})();
+    }});
+  }}
+}})();
 </script>
 """
 
+
+# Legacy constant for backwards compatibility with tests
+SIZE_REPORTER_SCRIPT = get_size_reporter_script("https://pyplots.ai")
+
 # Allowed GCS bucket for security
 ALLOWED_HOST = "storage.googleapis.com"
 ALLOWED_BUCKET = "pyplots-images"
@@ -107,7 +115,7 @@ def build_safe_gcs_url(url: str) -> str | None:
 
 
 @router.get("/proxy/html", response_class=HTMLResponse)
-async def proxy_html(url: str):
+async def proxy_html(url: str, origin: str | None = None):
     """
     Proxy an HTML file and inject size reporting script.
 
@@ -118,6 +126,7 @@ async def proxy_html(url: str):
 
     Args:
         url: The GCS URL to fetch (must be from allowed bucket)
+        origin: Target origin for postMessage (must be in ALLOWED_ORIGINS)
 
     Returns:
         Modified HTML with size reporting script injected
@@ -127,6 +136,11 @@ async def proxy_html(url: str):
     if safe_url is None:
         raise HTTPException(status_code=400, detail=f"Only URLs from {ALLOWED_HOST}/{ALLOWED_BUCKET} are allowed")
 
+    # Validate origin parameter - default to production if not specified or invalid
+    target_origin = "https://pyplots.ai"
+    if origin and origin in ALLOWED_ORIGINS:
+        target_origin = origin
+
     # Fetch the HTML with shorter timeout
     async with httpx.AsyncClient(timeout=10.0) as client:
         try:
@@ -139,13 +153,16 @@ async def proxy_html(url: str):
 
     html_content = response.text
 
+    # Generate script with correct target origin
+    size_script = get_size_reporter_script(target_origin)
+
     # Inject the size reporter script before </body>
     if "</body>" in html_content:
-        html_content = html_content.replace("</body>", f"{SIZE_REPORTER_SCRIPT}</body>")
+        html_content = html_content.replace("</body>", f"{size_script}</body>")
     elif "</html>" in html_content:
-        html_content = html_content.replace("</html>", f"{SIZE_REPORTER_SCRIPT}</html>")
+        html_content = html_content.replace("</html>", f"{size_script}</html>")
     else:
         # Fallback: append to end
-        html_content += SIZE_REPORTER_SCRIPT
+        html_content += size_script
 
     return HTMLResponse(content=html_content)

api/routers/seo.py

@@ -34,14 +34,19 @@ async def get_sitemap(db: AsyncSession | None = Depends(optional_db)):
         "  <url><loc>https://pyplots.ai/catalog</loc></url>",
     ]
 
-    # Add spec URLs (only specs with implementations)
+    # Add spec URLs (overview + all implementations)
     if db is not None:
         repo = SpecRepository(db)
         specs = await repo.get_all()
         for spec in specs:
             if spec.impls:  # Only include specs with implementations
                 spec_id = html.escape(spec.id)
+                # Overview page
                 xml_lines.append(f"  <url><loc>https://pyplots.ai/{spec_id}</loc></url>")
+                # Individual implementation pages
+                for impl in spec.impls:
+                    library_id = html.escape(impl.library_id)
+                    xml_lines.append(f"  <url><loc>https://pyplots.ai/{spec_id}/{library_id}</loc></url>")
 
     xml_lines.append("</urlset>")
     xml = "\n".join(xml_lines)

app/src/components/Footer.tsx

@@ -10,7 +10,7 @@ interface FooterProps {
 
 export function Footer({ onTrackEvent, selectedSpec, selectedLibrary }: FooterProps) {
   return (
-    <Box sx={{ textAlign: 'center', mt: 8, pt: 5, borderTop: '1px solid #f3f4f6' }}>
+    <Box sx={{ textAlign: 'center', mt: 4, pt: 4, borderTop: '1px solid #f3f4f6' }}>
       <Box
         sx={{
           display: 'flex',