feat: overview mode, expanded sitemap, and UI improvements (#3168)

## Summary

- **Overview/Detail Mode Navigation**: New URL structure for spec pages
  - `/{spec_id}` → Overview grid showing all implementations
  - `/{spec_id}/{library}` → Detail view with carousel
- **Action Buttons on Overview**: Copy code, download PNG, and open
interactive buttons appear on hover
- **Library Tooltips**: Shows library description and documentation URL
(like home page)
- **Interactive Page Fix**: postMessage origin now works correctly on
localhost
- **Expanded Sitemap**: Includes all implementation URLs (~1500 pages)
for better SEO
- **Spacing Fixes**: Consistent footer spacing across all pages
- **ClickAwayListener**: Tooltips close when clicking outside

## Test plan

- [ ] Visit `/scatter-basic` - should show overview grid with all
libraries
- [ ] Click on an implementation - should navigate to
`/scatter-basic/matplotlib`
- [ ] Hover over grid cards - action buttons should appear
- [ ] Click library name in overview - tooltip should open
- [ ] Click elsewhere - tooltip should close
- [ ] Check `/sitemap.xml` - should include implementation URLs
- [ ] Test interactive page on localhost - iframe should load correctly
- [ ] Verify footer spacing is consistent across `/`, `/catalog`, and
spec pages

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

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: MarkusNeusinger

api/routers/libraries.py

@@ -8,6 +8,7 @@
 from api.exceptions import raise_not_found
 from core.constants import LIBRARIES_METADATA, SUPPORTED_LIBRARIES
 from core.database import LibraryRepository, SpecRepository
+from core.utils import strip_noqa_comments
 
 
 router = APIRouter(tags=["libraries"])
@@ -82,7 +83,7 @@ async def get_library_images(library_id: str, db: AsyncSession = Depends(require
                         "url": impl.preview_url,
                         "thumb": impl.preview_thumb,
                         "html": impl.preview_html,
-                        "code": impl.code,
+                        "code": strip_noqa_comments(impl.code),
                     }
                 )
 

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)

api/routers/specs.py

@@ -8,6 +8,7 @@
 from api.exceptions import raise_not_found
 from api.schemas import ImplementationResponse, SpecDetailResponse, SpecListItem
 from core.database import SpecRepository
+from core.utils import strip_noqa_comments
 
 
 router = APIRouter(tags=["specs"])
@@ -76,7 +77,7 @@ async def get_spec(spec_id: str, db: AsyncSession = Depends(require_db)):
             preview_thumb=impl.preview_thumb,
             preview_html=impl.preview_html,
             quality_score=impl.quality_score,
-            code=impl.code,
+            code=strip_noqa_comments(impl.code),
             generated_at=impl.generated_at.isoformat() if impl.generated_at else None,
             generated_by=impl.generated_by,
             python_version=impl.python_version,

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',