fix(pdf-viewer): use PDF.js with client-side rendering

- Created PDFViewerClient component with PDF.js
- Uses dynamic import with ssr: false to avoid server-side issues
- Full page navigation and zoom controls
- Upload or load from URL

app/mission-control/pdf-viewer/page.tsx

@@ -1,69 +1,22 @@
 "use client";
 
 import BackToMC from "@/components/mission-control/BackToMC";
-import { useState } from "react";
+import dynamic from "next/dynamic";
+
+// Dynamically import PDFViewer with SSR disabled
+const PDFViewer = dynamic(() => import("@/components/mission-control/PDFViewerClient"), {
+  ssr: false,
+  loading: () => (
+    <div className="flex items-center justify-center h-full">
+      <div className="text-center">
+        <div className="animate-spin text-6xl mb-4">⏳</div>
+        <p className="text-slate-400">Loading PDF viewer...</p>
+      </div>
+    </div>
+  ),
+});
 
 export default function PdfViewerPage() {
-  const [pdfData, setPdfData] = useState<string | null>(null);
-  const [pdfName, setPdfName] = useState<string>("");
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [viewMode, setViewMode] = useState<"embed" | "download">("embed");
-
-  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-
-    if (file.type !== "application/pdf") {
-      setError("Please select a PDF file");
-      return;
-    }
-
-    setLoading(true);
-    setError(null);
-    setPdfName(file.name);
-
-    const reader = new FileReader();
-    reader.onload = (event) => {
-      const base64 = event.target?.result as string;
-      setPdfData(base64);
-      setLoading(false);
-    };
-    reader.onerror = () => {
-      setError("Failed to read file");
-      setLoading(false);
-    };
-    reader.readAsDataURL(file);
-  };
-
-  const handleUrlSubmit = async () => {
-    const input = prompt("Enter PDF URL:");
-    if (!input) return;
-
-    setLoading(true);
-    setError(null);
-
-    try {
-      new URL(input);
-      // Use Google Docs viewer for external URLs
-      const googleViewerUrl = `https://docs.google.com/gview?url=${encodeURIComponent(input)}&embedded=true`;
-      setPdfData(googleViewerUrl);
-      setPdfName(input.split("/").pop() || "document.pdf");
-      setLoading(false);
-    } catch {
-      setError("Invalid URL");
-      setLoading(false);
-    }
-  };
-
-  const handleDownload = () => {
-    if (!pdfData) return;
-    const link = document.createElement("a");
-    link.href = pdfData;
-    link.download = pdfName || "document.pdf";
-    link.click();
-  };
-
   return (
     <div className="min-h-screen bg-slate-950 text-white flex flex-col">
       {/* Header */}
@@ -72,131 +25,9 @@ export default function PdfViewerPage() {
         <p className="text-slate-400 text-sm">View and analyze PDF documents</p>
       </div>
 
-      {/* Toolbar */}
-      <div className="bg-slate-900/50 border-b border-slate-800 px-6 py-3 flex-shrink-0">
-        <div className="flex items-center gap-4 flex-wrap">
-          <label className="cursor-pointer bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
-            📁 Upload PDF
-            <input
-              type="file"
-              accept="application/pdf"
-              onChange={handleFileUpload}
-              className="hidden"
-            />
-          </label>
-          
-          <button
-            onClick={handleUrlSubmit}
-            className="bg-slate-700 hover:bg-slate-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"
-          >
-            🔗 Load from URL
-          </button>
-
-          {pdfData && (
-            <>
-              <button
-                onClick={handleDownload}
-                className="bg-green-700 hover:bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"
-              >
-                ⬇️ Download
-              </button>
-              
-              {pdfData.startsWith("data:") && (
-                <a
-                  href={pdfData}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="bg-slate-700 hover:bg-slate-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"
-                >
-                  ↗ Open in New Tab
-                </a>
-              )}
-            </>
-          )}
-        </div>
-      </div>
-
       {/* Content */}
-      <div className="flex-1 overflow-hidden flex flex-col">
+      <div className="flex-1 overflow-hidden">
-        {error && (
+        <PDFViewer />
-          <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>
-            <button
-              onClick={() => setError(null)}
-              className="mt-2 bg-red-700 hover:bg-red-600 text-white px-4 py-1 rounded text-sm"
-            >
-              Dismiss
-            </button>
-          </div>
-        )}
-
-        {!pdfData && !loading && (
-          <div className="flex-1 flex items-center justify-center">
-            <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>
-              <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>
-        )}
-
-        {loading && (
-          <div className="flex-1 flex items-center justify-center">
-            <div className="text-center">
-              <div className="animate-spin text-6xl mb-4">⏳</div>
-              <p className="text-slate-400">Loading PDF...</p>
-            </div>
-          </div>
-        )}
-
-        {pdfData && !loading && (
-          <div className="flex-1 overflow-auto bg-slate-800 p-4">
-            {pdfData.startsWith("data:") ? (
-              // For uploaded files, show download prompt since browser PDF rendering in iframe is blocked
-              <div className="flex flex-col items-center justify-center h-full">
-                <div className="text-8xl mb-6">📄</div>
-                <h2 className="text-xl font-bold text-white mb-2">{pdfName}</h2>
-                <p className="text-slate-400 mb-6">PDF loaded successfully</p>
-                <div className="flex gap-4">
-                  <button
-                    onClick={handleDownload}
-                    className="bg-blue-600 hover:bg-blue-500 text-white px-6 py-3 rounded-lg font-medium"
-                  >
-                    ⬇️ Download PDF
-                  </button>
-                  <a
-                    href={pdfData}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="bg-slate-700 hover:bg-slate-600 text-white px-6 py-3 rounded-lg font-medium"
-                  >
-                    ↗ Open in New Tab
-                  </a>
-                </div>
-              </div>
-            ) : (
-              // For external URLs, use Google Docs viewer
-              <iframe
-                src={pdfData}
-                className="w-full h-full min-h-[700px] bg-white shadow-2xl rounded"
-                title="PDF Viewer"
-              />
-            )}
-          </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>
   );

components/mission-control/PDFViewerClient.tsx

@@ -0,0 +1,241 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import * as pdfjsLib from "pdfjs-dist";
+
+// Set worker source - use CDN
+pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`;
+
+export default function PDFViewerClient() {
+  const [pdfData, setPdfData] = useState<string | null>(null);
+  const [pdfName, setPdfName] = useState<string>("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [numPages, setNumPages] = useState(0);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [scale, setScale] = useState(1.5);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const pdfDocRef = useRef<any>(null);
+
+  const renderPage = async (pageNum: number) => {
+    if (!pdfDocRef.current || !canvasRef.current) return;
+    
+    try {
+      const page = await pdfDocRef.current.getPage(pageNum);
+      const viewport = page.getViewport({ scale });
+      const canvas = canvasRef.current;
+      const context = canvas.getContext("2d");
+      
+      canvas.height = viewport.height;
+      canvas.width = viewport.width;
+      
+      await page.render({
+        canvasContext: context,
+        viewport: viewport,
+      }).promise;
+    } catch (err) {
+      console.error("Error rendering page:", err);
+    }
+  };
+
+  useEffect(() => {
+    if (pdfDocRef.current && currentPage) {
+      renderPage(currentPage);
+    }
+  }, [currentPage, scale]);
+
+  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (file.type !== "application/pdf") {
+      setError("Please select a PDF file");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    setPdfName(file.name);
+    setCurrentPage(1);
+
+    try {
+      const arrayBuffer = await file.arrayBuffer();
+      const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
+      pdfDocRef.current = pdf;
+      setNumPages(pdf.numPages);
+      setPdfData("local");
+      await renderPage(1);
+    } catch (err) {
+      setError("Failed to load PDF");
+      console.error(err);
+    }
+    setLoading(false);
+  };
+
+  const handleUrlSubmit = async () => {
+    const input = prompt("Enter PDF URL:");
+    if (!input) return;
+
+    setLoading(true);
+    setError(null);
+    setCurrentPage(1);
+
+    try {
+      new URL(input);
+      setPdfName(input.split("/").pop() || "document.pdf");
+      
+      const response = await fetch(input);
+      const arrayBuffer = await response.arrayBuffer();
+      const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
+      pdfDocRef.current = pdf;
+      setNumPages(pdf.numPages);
+      setPdfData("url");
+      await renderPage(1);
+    } catch (err) {
+      setError("Failed to load PDF from URL. Make sure the URL is publicly accessible.");
+      console.error(err);
+    }
+    setLoading(false);
+  };
+
+  const goToPrevPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
+  const goToNextPage = () => {
+    if (currentPage < numPages) {
+      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 */}
+      <div className="bg-slate-900/50 border-b border-slate-800 px-6 py-3 flex-shrink-0">
+        <div className="flex items-center gap-4 flex-wrap">
+          <label className="cursor-pointer bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
+            📁 Upload PDF
+            <input
+              type="file"
+              accept="application/pdf"
+              onChange={handleFileUpload}
+              className="hidden"
+            />
+          </label>
+          
+          <button
+            onClick={handleUrlSubmit}
+            className="bg-slate-700 hover:bg-slate-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"
+          >
+            🔗 Load from URL
+          </button>
+
+          {pdfData && (
+            <>
+              <div className="h-6 w-px bg-slate-600 mx-2" />
+              
+              {/* Page navigation */}
+              <button
+                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">
+                Page {currentPage} of {numPages}
+              </span>
+              <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" />
+              
+              {/* Zoom controls */}
+              <button
+                onClick={zoomOut}
+                className="bg-slate-700 hover:bg-slate-600 text-white px-3 py-2 rounded-lg text-sm font-medium transition-colors"
+              >
+                ➖
+              </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 */}
+      <div className="flex-1 overflow-auto bg-slate-800 p-4">
+        {error && (
+          <div className="bg-red-900/50 border border-red-700 rounded-lg p-4 mb-4 max-w-md">
+            <h3 className="text-red-400 font-bold mb-2">Error</h3>
+            <p className="text-red-300">{error}</p>
+            <button
+              onClick={() => setError(null)}
+              className="mt-2 bg-red-700 hover:bg-red-600 text-white px-4 py-1 rounded text-sm"
+            >
+              Dismiss
+            </button>
+          </div>
+        )}
+
+        {!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>
+              <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>
+        )}
+
+        {loading && (
+          <div className="flex items-center justify-center h-full">
+            <div className="text-center">
+              <div className="animate-spin text-6xl mb-4">⏳</div>
+              <p className="text-slate-400">Loading PDF...</p>
+            </div>
+          </div>
+        )}
+
+        {pdfData && !loading && (
+          <div className="flex justify-center">
+            <canvas
+              ref={canvasRef}
+              className="shadow-2xl rounded bg-white"
+            />
+          </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>
+  );
+}

data/eod_briefs.json

@@ -1,4 +1,16 @@
 [
+  {
+    "id": "eod-1774296002482",
+    "date": "2026-03-23",
+    "completed": [
+      "See Mission Control for details",
+      "🛡️ SECURITY: 10 advisories found today! Check MC."
+    ],
+    "progress": {},
+    "council": {},
+    "tomorrow": [],
+    "created_at": "2026-03-23T20:00:02.482Z"
+  },
   {
     "id": "eod-1774209602462",
     "date": "2026-03-22",

package-lock.json

@@ -19,6 +19,7 @@
         "framer-motion": "^12.23.12",
         "lightweight-charts": "^5.1.0",
         "next": "^15.5.3",
+        "pdfjs-dist": "^5.5.207",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
         "react-pdf": "^10.4.1",
@@ -3484,6 +3485,13 @@
         "url": "https://opencollective.com/node-fetch"
       }
     },
+    "node_modules/node-readable-to-web-readable-stream": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/node-readable-to-web-readable-stream/-/node-readable-to-web-readable-stream-0.4.2.tgz",
+      "integrity": "sha512-/cMZNI34v//jUTrI+UIo4ieHAB5EZRY/+7OmXZgBxaWBMcW2tGdceIw06RFxWxrKZ5Jp3sI2i5TsRo+CBhtVLQ==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/node-releases": {
       "version": "2.0.27",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
@@ -3639,15 +3647,16 @@
       "license": "ISC"
     },
     "node_modules/pdfjs-dist": {
-      "version": "5.4.296",
+      "version": "5.5.207",
-      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-5.4.296.tgz",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-5.5.207.tgz",
-      "integrity": "sha512-DlOzet0HO7OEnmUmB6wWGJrrdvbyJKftI1bhMitK7O2N8W2gc757yyYBbINy9IDafXAV9wmKr9t7xsTaNKRG5Q==",
+      "integrity": "sha512-WMqqw06w1vUt9ZfT0gOFhMf3wHsWhaCrxGrckGs5Cci6ybDW87IvPaOd2pnBwT6BJuP/CzXDZxjFgmSULLdsdw==",
       "license": "Apache-2.0",
       "engines": {
-        "node": ">=20.16.0 || >=22.3.0"
+        "node": ">=20.19.0 || >=22.13.0 || >=24"
       },
       "optionalDependencies": {
-        "@napi-rs/canvas": "^0.1.80"
+        "@napi-rs/canvas": "^0.1.95",
+        "node-readable-to-web-readable-stream": "^0.4.2"
       }
     },
     "node_modules/picocolors": {
@@ -3984,6 +3993,18 @@
         }
       }
     },
+    "node_modules/react-pdf/node_modules/pdfjs-dist": {
+      "version": "5.4.296",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-5.4.296.tgz",
+      "integrity": "sha512-DlOzet0HO7OEnmUmB6wWGJrrdvbyJKftI1bhMitK7O2N8W2gc757yyYBbINy9IDafXAV9wmKr9t7xsTaNKRG5Q==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=20.16.0 || >=22.3.0"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas": "^0.1.80"
+      }
+    },
     "node_modules/react-use-measure": {
       "version": "2.1.7",
       "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz",

package.json

@@ -21,6 +21,7 @@
     "framer-motion": "^12.23.12",
     "lightweight-charts": "^5.1.0",
     "next": "^15.5.3",
+    "pdfjs-dist": "^5.5.207",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-pdf": "^10.4.1",