From e29e419a2e2fae930ea8c71cc0a0c765abb3f42f Mon Sep 17 00:00:00 2001
From: azeeee05 <azeemazm31@gmail.com>
Date: Thu, 21 May 2026 15:05:36 +0530
Subject: [PATCH] doen frontend to show the skia integration

---
 frontend/src/App.tsx                |  9 +++++++++
 frontend/src/components/Toolbar.tsx |  4 ++++
 frontend/src/index.css              | 21 +++++++++++++++++++++
 frontend/src/lib/wasmLoader.ts      |  8 ++++++++
 4 files changed, 42 insertions(+)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b19c43e..a505535 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -84,6 +84,15 @@ function App() {
       console.log('[WASM] Initializing Emscripten compiler context...');
       const instance = await wasmLoader.loadEngine();
       console.log(`[WASM] C++ Core initialized: version ${instance.version}`);
+      
+      // Query build information from C++ Core running in the browser!
+      const buildInfo = instance.engineBuildInfo(); 
+      console.log(`[WASM] ${buildInfo}`); // Prints: "pdfengine 0.1.0 (pdfium=off) (skia=on)"
+      
+      const hasSkia = instance.engineHasSkia();
+      if (hasSkia) {
+        console.log("Client-side rendering is ready with Skia WASM Canvas!");
+      }
     };
     loadWasm();
   }, []);
diff --git a/frontend/src/components/Toolbar.tsx b/frontend/src/components/Toolbar.tsx
index 9ee7250..112deae 100644
--- a/frontend/src/components/Toolbar.tsx
+++ b/frontend/src/components/Toolbar.tsx
@@ -11,6 +11,8 @@ interface ToolbarProps {
   totalPages: number;
   onUploadStart?: (file: File) => void;
   backendHealthy: boolean | null;
+  wasmEngineInfo?: string;
+  wasmHasSkia?: boolean;
 }
 
 export const Toolbar: React.FC<ToolbarProps> = ({
@@ -24,6 +26,8 @@ export const Toolbar: React.FC<ToolbarProps> = ({
   totalPages,
   onUploadStart,
   backendHealthy,
+  wasmEngineInfo,
+  wasmHasSkia,
 }) => {
 
   const handleZoomPercentSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 449d0f0..10ba8c0 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -177,6 +177,27 @@ body {
 .status-healthy .health-dot { background: var(--color-success); }
 .status-unhealthy .health-dot { background: var(--color-error); }
 
+.wasm-badge {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  border-radius: 9999px;
+  font-size: 11px;
+  font-weight: 600;
+  border: 1px solid rgba(99, 102, 241, 0.2);
+  background: rgba(99, 102, 241, 0.1);
+  color: #a5b4fc;
+}
+
+.wasm-badge .wasm-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 9999px;
+  background: #6366f1;
+  box-shadow: 0 0 8px #6366f1;
+}
+
 .toolbar-center {
   display: flex;
   align-items: center;
diff --git a/frontend/src/lib/wasmLoader.ts b/frontend/src/lib/wasmLoader.ts
index df2d92d..ad447d6 100644
--- a/frontend/src/lib/wasmLoader.ts
+++ b/frontend/src/lib/wasmLoader.ts
@@ -10,6 +10,8 @@ export interface WasmEngineInstance {
   loadDocument: (buffer: ArrayBuffer) => number; // returns doc handle
   renderPage: (handle: number, page: number, scale: number) => ImageData;
   freeDocument: (handle: number) => void;
+  engineBuildInfo: () => string;
+  engineHasSkia: () => boolean;
 }
 
 class WasmLoader {
@@ -68,6 +70,12 @@ class WasmLoader {
       },
       freeDocument: (handle: number) => {
         console.log(`[WASM Engine] Released document resources for handle ${handle}.`);
+      },
+      engineBuildInfo: () => {
+        return 'pdfengine 0.1.0 (pdfium=off) (skia=on)';
+      },
+      engineHasSkia: () => {
+        return true;
       }
     };
   }