feat(pdf-viewer): add proxy endpoint to bypass CSP for PDF loading

- Created /api/pdf-proxy route
- PDF viewer now uses proxy for URL loading
- Bypasses Content-Security-Policy restrictions

app/api/pdf-proxy/route.ts

@@ -0,0 +1,29 @@
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const url = searchParams.get("url");
+
+  if (!url) {
+    return NextResponse.json({ error: "No URL provided" }, { status: 400 });
+  }
+
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      return NextResponse.json({ error: "Failed to fetch PDF" }, { status: response.status });
+    }
+    
+    const arrayBuffer = await response.arrayBuffer();
+    
+    return new NextResponse(arrayBuffer, {
+      headers: {
+        "Content-Type": "application/pdf",
+        "Content-Disposition": "inline",
+        "Cache-Control": "public, max-age=3600",
+      },
+    });
+  } catch (error) {
+    return NextResponse.json({ error: "Failed to fetch PDF" }, { status: 500 });
+  }
+}

components/mission-control/PDFViewerClient.tsx

@@ -21,16 +21,13 @@ export default function PDFViewerClient() {
   const pdfDocRef = useRef<any>(null);
 
   useEffect(() => {
-    // Load PDF.js from CDN
     const script = document.createElement("script");
     script.src = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js";
     script.async = true;
     script.onload = () => {
       try {
         window.pdfjsLib = window.pdfjsLib;
-        // Disable worker to avoid CSP issues
+        window.pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";
-        window.pdfjsLib.GlobalWorkerOptions.workerSrc = "";
-        window.pdfjsLib.GlobalWorkerOptions.workerPort = null;
         setPdfjsLoaded(true);
       } catch (e) {
         setError("Failed to initialize PDF.js");
@@ -54,14 +51,10 @@ export default function PDFViewerClient() {
       canvas.height = viewport.height;
       canvas.width = viewport.width;
       
-      // Use synchronous rendering to avoid worker
+      await page.render({
-      const renderContext = {
         canvasContext: context,
         viewport: viewport,
-      };
+      }).promise;
-      
-      // For older pdf.js without worker, use direct render
-      await page.render(renderContext).promise;
     } catch (err) {
       console.error("Error rendering page:", err);
     }
@@ -89,19 +82,13 @@ export default function PDFViewerClient() {
 
     try {
       const arrayBuffer = await file.arrayBuffer();
-      // Disable worker for this load
+      const pdf = await window.pdfjsLib.getDocument({ data: arrayBuffer }).promise;
-      const loadingTask = window.pdfjsLib.getDocument({
-        data: arrayBuffer,
-        disableWorker: true,
-        verbosity: 0
-      });
-      const pdf = await loadingTask.promise;
       pdfDocRef.current = pdf;
       setNumPages(pdf.numPages);
       setPdfData("local");
       await renderPage(1);
     } catch (err) {
-      setError("Failed to load PDF. Try using 'Load from URL' instead.");
+      setError("Failed to load PDF. Try uploading to a public URL and use 'Load from URL'.");
       console.error(err);
     }
     setLoading(false);
@@ -119,11 +106,20 @@ export default function PDFViewerClient() {
       new URL(input);
       setPdfName(input.split("/").pop() || "document.pdf");
       
-      // Use Google Docs viewer for external URLs
+      // Use our proxy to fetch the PDF
-      setPdfData(`https://docs.google.com/gview?url=${encodeURIComponent(input)}&embedded=true`);
+      const proxyUrl = `https://sitemente.com/api/pdf-proxy?url=${encodeURIComponent(input)}`;
-      setNumPages(1); // We don't know the page count for external URLs
+      
+      const response = await fetch(proxyUrl);
+      if (!response.ok) throw new Error("Failed to fetch through proxy");
+      
+      const arrayBuffer = await response.arrayBuffer();
+      const pdf = await window.pdfjsLib.getDocument({ data: arrayBuffer }).promise;
+      pdfDocRef.current = pdf;
+      setNumPages(pdf.numPages);
+      setPdfData("proxied");
+      await renderPage(1);
     } catch (err) {
-      setError("Failed to load PDF from URL.");
+      setError("Failed to load PDF. Try another URL or upload file directly.");
       console.error(err);
     }
     setLoading(false);
@@ -208,7 +204,7 @@ export default function PDFViewerClient() {
               <div className="text-8xl mb-6 opacity-50">📄</div>
               <h2 className="text-xl font-bold text-white mb-2">No PDF Loaded</h2>
               <p className="text-slate-400 mb-6">Upload a PDF or enter a URL</p>
-              <p className="text-slate-500 text-sm">💡 Tip: For best results, use "Load from URL" with a public PDF link</p>
+              <p className="text-slate-500 text-sm">💡 Tip: Upload PDF file directly or paste a public URL</p>
             </div>
           </div>
         )}
@@ -224,21 +220,11 @@ export default function PDFViewerClient() {
 
         {pdfData && !loading && (
           <div className="flex justify-center">
-            {pdfData.startsWith("https://docs.google.com") ? (
+            <canvas
-              // Google Docs viewer for external URLs
+              ref={canvasRef}
-              <iframe
+              className="shadow-2xl rounded bg-white"
-                src={pdfData}
+              style={{ maxWidth: "100%", height: "auto" }}
-                className="w-full h-full min-h-[700px] bg-white rounded shadow-2xl"
+            />
-                title="PDF Viewer"
-              />
-            ) : (
-              // Canvas for uploaded files
-              <canvas
-                ref={canvasRef}
-                className="shadow-2xl rounded bg-white"
-                style={{ maxWidth: "100%", height: "auto" }}
-              />
-            )}
           </div>
         )}
       </div>