fix(pdf-viewer): add debug info to troubleshoot rendering

components/mission-control/PDFViewerClient.tsx

@@ -17,6 +17,7 @@ export default function PDFViewerClient() {
   const [currentPage, setCurrentPage] = useState(1);
   const [scale, setScale] = useState(1.5);
   const [pdfjsLoaded, setPdfjsLoaded] = useState(false);
+  const [debugInfo, setDebugInfo] = useState<string>("");
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const pdfDocRef = useRef<any>(null);
 
@@ -26,19 +27,31 @@ export default function PDFViewerClient() {
     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;
+        window.pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";
         setPdfjsLoaded(true);
+        setDebugInfo("PDF.js loaded successfully");
+      } catch (e) {
+        setError("Failed to initialize PDF.js");
+        setDebugInfo("Error loading PDF.js: " + e);
+      }
     };
     script.onerror = () => {
       setError("Failed to load PDF.js library");
+      setDebugInfo("Script failed to load");
     };
     document.body.appendChild(script);
   }, []);
 
   const renderPage = async (pageNum: number) => {
-    if (!pdfDocRef.current || !canvasRef.current || !window.pdfjsLib) return;
+    if (!pdfDocRef.current || !canvasRef.current || !window.pdfjsLib) {
+      setDebugInfo("Cannot render: pdfDoc=" + !!pdfDocRef.current + ", canvas=" + !!canvasRef.current + ", pdfjs=" + !!window.pdfjsLib);
+      return;
+    }
     
     try {
+      setDebugInfo("Rendering page " + pageNum);
       const page = await pdfDocRef.current.getPage(pageNum);
       const viewport = page.getViewport({ scale });
       const canvas = canvasRef.current;
@@ -51,7 +64,9 @@ export default function PDFViewerClient() {
         canvasContext: context,
         viewport: viewport,
       }).promise;
+      setDebugInfo("Page " + pageNum + " rendered successfully");
     } catch (err) {
+      setDebugInfo("Render error: " + err);
       console.error("Error rendering page:", err);
     }
   };
@@ -64,7 +79,10 @@ export default function PDFViewerClient() {
 
   const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
-    if (!file || !window.pdfjsLib) return;
+    if (!file || !window.pdfjsLib) {
+      setError("Please wait for PDF.js to load or check console");
+      return;
+    }
 
     if (file.type !== "application/pdf") {
       setError("Please select a PDF file");
@@ -75,16 +93,20 @@ export default function PDFViewerClient() {
     setError(null);
     setPdfName(file.name);
     setCurrentPage(1);
+    setDebugInfo("Loading file: " + file.name);
 
     try {
       const arrayBuffer = await file.arrayBuffer();
+      setDebugInfo("File loaded, parsing PDF...");
       const pdf = await window.pdfjsLib.getDocument({ data: arrayBuffer }).promise;
       pdfDocRef.current = pdf;
       setNumPages(pdf.numPages);
       setPdfData("local");
+      setDebugInfo("PDF parsed, " + pdf.numPages + " pages");
       await renderPage(1);
     } catch (err) {
-      setError("Failed to load PDF");
+      setError("Failed to load PDF: " + err);
+      setDebugInfo("Error: " + err);
       console.error(err);
     }
     setLoading(false);
@@ -103,6 +125,7 @@ export default function PDFViewerClient() {
       setPdfName(input.split("/").pop() || "document.pdf");
       
       const response = await fetch(input);
+      if (!response.ok) throw new Error("Failed to fetch PDF");
       const arrayBuffer = await response.arrayBuffer();
       const pdf = await window.pdfjsLib.getDocument({ data: arrayBuffer }).promise;
       pdfDocRef.current = pdf;
@@ -117,20 +140,13 @@ export default function PDFViewerClient() {
   };
 
   const goToPrevPage = () => {
-    if (currentPage > 1) {
+    if (currentPage > 1) setCurrentPage(currentPage - 1);
-      setCurrentPage(currentPage - 1);
-    }
   };
 
   const goToNextPage = () => {
-    if (currentPage < numPages) {
+    if (currentPage < numPages) setCurrentPage(currentPage + 1);
-      setCurrentPage(currentPage + 1);
-    }
   };
 
-  const zoomIn = () => setScale(scale + 0.25);
-  const zoomOut = () => setScale(Math.max(0.5, scale - 0.25));
-
   return (
     <div className="flex flex-col h-full">
       {/* Toolbar */}
@@ -156,79 +172,59 @@ export default function PDFViewerClient() {
           </button>
 
           {!pdfjsLoaded && (
-            <span className="text-slate-400 text-sm">Loading PDF.js...</span>
+            <span className="text-yellow-400 text-sm animate-pulse">Loading PDF.js...</span>
           )}
 
           {pdfData && (
             <>
               <div className="h-6 w-px bg-slate-600 mx-2" />
-              
+              <button onClick={goToPrevPage} disabled={currentPage <= 1}
-              <button
+                className="bg-slate-700 hover:bg-slate-600 disabled:opacity-50 text-white px-3 py-2 rounded-lg text-sm">
-                onClick={goToPrevPage}
-                disabled={currentPage <= 1}
-                className="bg-slate-700 hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed text-white px-3 py-2 rounded-lg text-sm font-medium transition-colors"
-              >
                 ◀ Prev
               </button>
-              <span className="text-slate-300 text-sm">
+              <span className="text-slate-300 text-sm">Page {currentPage} of {numPages}</span>
-                Page {currentPage} of {numPages}
+              <button onClick={goToNextPage} disabled={currentPage >= numPages}
-              </span>
+                className="bg-slate-700 hover:bg-slate-600 disabled:opacity-50 text-white px-3 py-2 rounded-lg text-sm">
-              <button
-                onClick={goToNextPage}
-                disabled={currentPage >= numPages}
-                className="bg-slate-700 hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed text-white px-3 py-2 rounded-lg text-sm font-medium transition-colors"
-              >
                 Next ▶
               </button>
-              
               <div className="h-6 w-px bg-slate-600 mx-2" />
-              
+              <button onClick={() => setScale(Math.max(0.5, scale - 0.25))}
-              <button
+                className="bg-slate-700 hover:bg-slate-600 text-white px-3 py-2 rounded-lg text-sm">➖</button>
-                onClick={zoomOut}
+              <span className="text-slate-300 text-sm w-16 text-center">{Math.round(scale * 100)}%</span>
-                className="bg-slate-700 hover:bg-slate-600 text-white px-3 py-2 rounded-lg text-sm font-medium transition-colors"
+              <button onClick={() => setScale(scale + 0.25)}
-              >
+                className="bg-slate-700 hover:bg-slate-600 text-white px-3 py-2 rounded-lg text-sm">➕</button>
-                ➖
-              </button>
-              <span className="text-slate-300 text-sm w-16 text-center">
-                {Math.round(scale * 100)}%
-              </span>
-              <button
-                onClick={zoomIn}
-                className="bg-slate-700 hover:bg-slate-600 text-white px-3 py-2 rounded-lg text-sm font-medium transition-colors"
-              >
-                ➕
-              </button>
             </>
           )}
         </div>
       </div>
 
-      {/* Content */}
+      {/* Debug info */}
-      <div className="flex-1 overflow-auto bg-slate-800 p-4">
+      {debugInfo && (
+        <div className="bg-slate-900 px-6 py-1 text-xs text-slate-500 border-b border-slate-800">
+          Debug: {debugInfo}
+        </div>
+      )}
+
+      {/* Error */}
       {error && (
-          <div className="bg-red-900/50 border border-red-700 rounded-lg p-4 mb-4 max-w-md">
+        <div className="bg-red-900/50 border border-red-700 rounded-lg p-4 m-4 max-w-md">
           <h3 className="text-red-400 font-bold mb-2">Error</h3>
-            <p className="text-red-300">{error}</p>
+          <p className="text-red-300 text-sm">{error}</p>
-            <button
+          <button onClick={() => setError(null)}
-              onClick={() => setError(null)}
+            className="mt-2 bg-red-700 hover:bg-red-600 text-white px-4 py-1 rounded text-sm">
-              className="mt-2 bg-red-700 hover:bg-red-600 text-white px-4 py-1 rounded text-sm"
-            >
             Dismiss
           </button>
         </div>
       )}
 
+      {/* Content */}
+      <div className="flex-1 overflow-auto bg-slate-800 p-4">
         {!pdfData && !loading && (
           <div className="flex items-center justify-center h-full">
             <div className="text-center">
               <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 to view it</p>
+              <p className="text-slate-400 mb-6">Upload a PDF or enter a URL</p>
-              <div className="text-slate-500 text-sm space-y-1">
-                <p>• Upload your resume to let Horus analyze it</p>
-                <p>• Supports PDF files up to 50MB</p>
-                <p>• Or load from any public PDF URL</p>
-              </div>
             </div>
           </div>
         )}
@@ -247,17 +243,11 @@ export default function PDFViewerClient() {
             <canvas
               ref={canvasRef}
               className="shadow-2xl rounded bg-white"
+              style={{ maxWidth: "100%", height: "auto" }}
             />
           </div>
         )}
       </div>
-
-      {/* Instructions */}
-      <div className="bg-slate-900/50 border-t border-slate-800 px-6 py-2 flex-shrink-0">
-        <p className="text-slate-500 text-xs">
-          💡 Tip: Upload your resume PDF and Horus can analyze the design to recreate it
-        </p>
-      </div>
     </div>
   );
 }