added changes

apps/web/app/admin/bots/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useSuperAdmin } from '../../_lib/super-admin-context';
 import { useRouter } from 'next/navigation';
 
@@ -9,7 +9,10 @@ export default function BotsPage() {
   const router = useRouter();
   const [bots, setBots] = useState<any[]>([]);
   const [initiating, setInitiating] = useState(false);
-  const [pairingInfo, setPairingInfo] = useState<{ token: string; expiresAt: string } | null>(null);
+  const [pairingInfo, setPairingInfo] = useState<{ pairingToken: string; expiresAt: string } | null>(null);
+  const [qrDataUrl, setQrDataUrl] = useState<string | null>(null);
+  const [qrStatus, setQrStatus] = useState<string>('PAIRING');
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
   async function load() {
     const res = await fetch('/api/admin/bots');
@@ -22,8 +25,30 @@ export default function BotsPage() {
     void load();
   }, [admin, loading, router]);
 
+  const pollQr = useCallback(async (token: string) => {
+    const res = await fetch(`/api/admin/bots/qr/${token}`);
+    if (!res.ok) { clearInterval(pollRef.current!); return; }
+    const data = await res.json();
+    setQrStatus(data.status);
+    if (data.qrDataUrl) {
+      setQrDataUrl(data.qrDataUrl);
+      clearInterval(pollRef.current!);
+    }
+    if (data.status === 'ACTIVE') {
+      clearInterval(pollRef.current!);
+      setPairingInfo(null);
+      void load();
+    }
+  }, []);
+
+  useEffect(() => {
+    return () => { if (pollRef.current) clearInterval(pollRef.current); };
+  }, []);
+
   async function initiateBot() {
     setInitiating(true);
+    setQrDataUrl(null);
+    setQrStatus('PAIRING');
     try {
       const res = await fetch('/api/admin/bots', {
         method: 'POST',
@@ -33,6 +58,8 @@ export default function BotsPage() {
       if (res.ok) {
         const data = await res.json();
         setPairingInfo(data);
+        pollRef.current = setInterval(() => void pollQr(data.pairingToken), 2000);
+        void pollQr(data.pairingToken);
       }
     } finally {
       setInitiating(false);
@@ -51,11 +78,6 @@ export default function BotsPage() {
     }
   }
 
-  function getQrUrl() {
-    if (!pairingInfo) return null;
-    return `/api/admin/bots/qr/${pairingInfo.token}`;
-  }
-
   if (loading) return <p className="text-gray-500">Loading...</p>;
   if (!admin) return null;
 
@@ -73,17 +95,21 @@ export default function BotsPage() {
       </div>
 
       {pairingInfo && (
-        <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-4 mb-6">
-          <p className="text-sm font-medium mb-2">New bot created — scan QR to pair</p>
-          <p className="text-xs text-gray-600 mb-2">Expires: {pairingInfo.expiresAt}</p>
-          <a
-            href={getQrUrl() ?? '#'}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-blue-600 text-sm underline"
-          >
-            View QR Code
-          </a>
+        <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-4 mb-6 flex items-start gap-6">
+          <div className="flex-1">
+            <p className="text-sm font-medium mb-1">
+              {qrStatus === 'ACTIVE' ? 'Bot connected!' : 'New bot created — waiting for QR scan...'}
+            </p>
+            <p className="text-xs text-gray-600">Status: {qrStatus}</p>
+            <p className="text-xs text-gray-600">Expires: {pairingInfo.expiresAt}</p>
+          </div>
+          {qrDataUrl ? (
+            <img src={qrDataUrl} alt="QR Code" className="w-40 h-40 border-2 border-gray-300 rounded-lg" />
+          ) : (
+            <div className="w-40 h-40 bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center text-xs text-gray-400">
+              {qrStatus === 'ACTIVE' ? 'Connected' : 'Waiting for QR...'}
+            </div>
+          )}
         </div>
       )}