Add NextAuth or MetaMask Login: OAuth with Google/GitHub/email or Web3 wallet signature. With the ability to continue without signing in, bringing you back to the home page - Follow Up Deployment

dashboard.html

@@ -19,6 +19,10 @@
     .stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); }
     .active-tab { border-bottom: 2px solid #4F46E5; color: #4F46E5; }
     .badge { font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 9999px; }
+    /* Fix the “descending page” by constraining chart height and forcing canvas to fill */
+    .chart-box { position: relative; }
+    .chart-box canvas { display:block; width:100% !important; height:100% !important; }
+
     @media (max-width: 768px) {
       .sidebar { position: fixed; z-index: 50; left: -280px; }
       .sidebar.open { left: 0; }
@@ -71,37 +75,11 @@
             </li>
           </ul>
         </div>
-        <div class="mb-8">
-          <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-4 sidebar-section-title">Tools</h3>
-          <ul class="space-y-1">
-            <li>
-              <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-600 hover:bg-gray-100 transition">
-                <i data-feather="database" class="w-5 h-5"></i>
-                <span class="sidebar-item-text">Datasets</span>
-              </a>
-            </li>
-            <li>
-              <a href="#" class="flex items-center space-x-3 p-2 rounded-lg text-gray-600 hover:bg-gray-100 transition">
-                <i data-feather="sliders" class="w-5 h-5"></i>
-                <span class="sidebar-item-text">Settings</span>
-              </a>
-            </li>
-          </ul>
-        </div>
       </div>
     </aside>
 
     <!-- Main Content -->
     <main class="main-content flex-1 ml-0 md:ml-[280px]">
-      <!-- Top bar (mobile) -->
-      <div class="md:hidden bg-white border-b border-gray-200 sticky top-0 z-40 flex items-center justify-between px-4 py-3">
-        <button id="mobileMenu" class="text-gray-600">
-          <i data-feather="menu" class="w-6 h-6"></i>
-        </button>
-        <div class="font-semibold">Dashboard</div>
-        <div></div>
-      </div>
-
       <section class="p-6 md:p-8" data-aos="fade-up">
         <div class="flex items-center justify-between mb-6">
           <div>
@@ -119,17 +97,17 @@
           <div class="stat-card bg-white rounded-2xl p-4 border border-gray-200">
             <div class="flex items-center justify-between">
               <div>
-                <p class="text-sm text-gray-500">Total Feedback</p>
+                <p class="text-sm text-gray-700">Total Feedback</p>
                 <p id="kpiTotal" class="text-2xl font-bold">—</p>
               </div>
               <i data-feather="message-circle" class="w-8 h-8 text-indigo-600"></i>
             </div>
-            <p id="kpiTotalDelta" class="text-xs text-gray-500 mt-2">—</p>
+            <p id="kpiTotalDelta" class="text-xs text-gray-500 mt-2">7d vs prev: —</p>
           </div>
           <div class="stat-card bg-white rounded-2xl p-4 border border-gray-200">
             <div class="flex items-center justify-between">
               <div>
-                <p class="text-sm text-gray-500">Avg. Rating</p>
+                <p class="text-sm text-gray-700">Avg. Rating</p>
                 <p id="kpiAvg" class="text-2xl font-bold">—</p>
               </div>
               <i data-feather="star" class="w-8 h-8 text-yellow-500"></i>
@@ -139,7 +117,7 @@
           <div class="stat-card bg-white rounded-2xl p-4 border border-gray-200">
             <div class="flex items-center justify-between">
               <div>
-                <p class="text-sm text-gray-500">Positive Sentiment</p>
+                <p class="text-sm text-gray-700">Positive Sentiment</p>
                 <p id="kpiSentPos" class="text-2xl font-bold">—</p>
               </div>
               <i data-feather="smile" class="w-8 h-8 text-green-500"></i>
@@ -149,7 +127,7 @@
           <div class="stat-card bg-white rounded-2xl p-4 border border-gray-200">
             <div class="flex items-center justify-between">
               <div>
-                <p class="text-sm text-gray-500">Top Agent</p>
+                <p class="text-sm text-gray-700">Top Agent</p>
                 <p id="kpiTopAgent" class="text-2xl font-bold">—</p>
               </div>
               <i data-feather="award" class="w-8 h-8 text-amber-600"></i>
@@ -165,18 +143,22 @@
               <h3 class="font-semibold">Feedback Volume (14 days)</h3>
               <span class="text-xs text-gray-500">live</span>
             </div>
-            <canvas id="chartVolume" height="120"></canvas>
+            <div class="chart-box h-72 md:h-72 lg:h-80">
+              <canvas id="chartVolume"></canvas>
+            </div>
           </div>
           <div class="bg-white rounded-2xl p-4 border border-gray-200">
             <div class="flex items-center justify-between mb-2">
               <h3 class="font-semibold">Sentiment Mix</h3>
               <span class="text-xs text-gray-500">auto</span>
             </div>
-            <canvas id="chartSentiment" height="120"></canvas>
+            <div class="chart-box h-72 md:h-72 lg:h-80">
+              <canvas id="chartSentiment"></canvas>
+            </div>
           </div>
         </div>
 
-        <!-- Top agents -->
+        <!-- Leaderboard -->
         <div class="bg-white rounded-2xl p-4 border border-gray-200 mb-8">
           <div class="flex items-center justify-between">
             <h3 class="font-semibold">Agents Leaderboard</h3>
@@ -216,13 +198,7 @@
     // --- CONFIG ---
     const HF_OWNER = 'BlackTesla';
     const HF_SPACE = 'archindus';
-    /**
-     * How this works
-     * 1) We try to read Space discussions via a HUB endpoint (public read). If CORS blocks in your env,
-     *    point PROXY_URL to a tiny server you control that calls the Hugging Face Hub API using an access token.
-     *    Example proxy response shape: { items: [{ id, title, createdAt, url, author, text, rating, agent }], total, windowDelta }
-     */
-    const PROXY_URL = ''; // e.g. '/api/agents-feedback' (leave blank to use experimental direct read)
+    const PROXY_URL = ''; // set to your proxy endpoint to avoid CORS
 
     // --- UTILITIES ---
     const el = (id) => document.getElementById(id);
@@ -235,7 +211,7 @@
       return `${Math.floor(diff/86400)}d ago`;
     };
 
-    // Lightweight sentiment heuristic
+    // Sentiment heuristic
     const POS = ['great','good','love','fast','helpful','amazing','excellent','awesome','smooth','wow'];
     const NEG = ['bad','slow','hate','bug','issue','error','crash','broken','lag','confusing','terrible'];
     function sentimentScore(text=''){
@@ -246,21 +222,16 @@
 
     // --- DATA ACCESS ---
     async function fetchFeedback(){
-      // 1) Preferred: your proxy (handles auth + shaping)
       if(PROXY_URL){
         const r = await fetch(PROXY_URL);
         if(!r.ok) throw new Error('Proxy fetch failed');
         return await r.json();
       }
-      // 2) Experimental: attempt to read public discussions from the Hub
-      // NOTE: Depending on CORS and API policy, this may require a proxy.
-      // Fallback to mock if blocked.
       const url = `https://huggingface.co/api/spaces/${HF_OWNER}/${HF_SPACE}/discussions?limit=50`;
       try{
         const r = await fetch(url, { headers: { 'Accept': 'application/json' } });
         if(!r.ok) throw new Error('HF discussions not accessible from browser');
         const data = await r.json();
-        // Map HF discussions -> generic items
         const items = (data.discussions || data.items || []).map(d => ({
           id: d.id || d.num,
           title: d.title || 'Feedback',
@@ -268,7 +239,6 @@
           url: d.url || `https://huggingface.co/spaces/${HF_OWNER}/${HF_SPACE}/discussions/${d.num}`,
           author: d.author || (d.user && d.user.name) || 'user',
           text: (d.first ? d.first.content : d.body) || d.summary || '',
-          // Try parse rating/agent from title like "[Agent: Visioneer] Rating: 4"
           rating: (()=>{ const m=(d.title||'').match(/rating\s*[:=]\s*(\d+(?:\.\d+)?)/i); return m?Number(m[1]):null; })(),
           agent: (()=>{ const m=(d.title||'').match(/agent\s*[:=]\s*([^\]\)\-:]+)/i); return m?m[1].trim():null; })()
         }));
@@ -324,7 +294,6 @@
         return { ...a, avg: Number(avg.toFixed(2)), score: Number(score.toFixed(2)) };
       }).sort((a,b)=> b.score - a.score);
 
-      // last 14 days labels
       const days = Array.from({length:14}).map((_,i)=>{
         const d = new Date(); d.setDate(d.getDate()-(13-i));
         return d.toISOString().slice(0,10);
@@ -349,7 +318,7 @@
       chartVolume = new Chart(ctx1, {
         type: 'line',
         data: { labels: agg.volumeLabels, datasets: [{ label: 'Feedback', data: agg.volumeValues, tension: 0.35, fill: false }]},
-        options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } } }
+        options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } } }
       });
 
       const ctx2 = document.getElementById('chartSentiment');
@@ -363,6 +332,7 @@
 
     function renderLeaderboard(rows){
       const tbody = el('leaderboard');
+      if(!tbody) return;
       tbody.innerHTML = rows.map(r => `
         <tr class="border-b last:border-b-0">
           <td class="py-2 pr-4">
@@ -380,6 +350,7 @@
 
     function renderRecent(items){
       const ul = el('recentFeedback');
+      if(!ul) return;
       ul.innerHTML = items.slice(0,10).map(it=> `
         <li class="py-3">
           <a class="block" href="${it.url||'#'}" target="_blank">
@@ -405,40 +376,59 @@
       const delta = prev7 ? ((last7 - prev7)/prev7) : 0;
       el('kpiTotalDelta').textContent = `7d vs prev: ${(delta*100).toFixed(0)}%`;
 
-      const avg = agg.leaderboard.reduce((acc,r)=> acc + r.avg*r.count, 0) / (agg.leaderboard.reduce((a,r)=>a+r.count,0) || 1);
+      const weightedSum = agg.leaderboard.reduce((acc,r)=> acc + r.avg*r.count, 0);
+      const totalCount = agg.leaderboard.reduce((a,r)=>a+r.count,0) || 1;
+      const avg = weightedSum / totalCount;
       el('kpiAvg').textContent = avg.toFixed(2);
-      const posRate = (agg.pos / Math.max(1, agg.total));
-      el('kpiSentPos').textContent = fmtPct(posRate);
+      el('kpiSentPos').textContent = fmtPct(agg.pos / Math.max(1, agg.total));
       const top = agg.leaderboard[0];
       el('kpiTopAgent').textContent = top ? top.name : '—';
       el('kpiTopAgentScore').textContent = top ? `score ${top.score.toFixed(2)} · avg ${top.avg.toFixed(2)}` : '—';
     }
 
+    // Cache last non-empty payload to avoid zeroed KPIs on transient empty responses
+    let lastItems = [];
     async function refresh(){
-      const { items } = await fetchFeedback();
-      const agg = aggregate(items);
-      renderCharts(agg);
-      renderLeaderboard(agg.leaderboard);
-      renderRecent(items.sort((a,b)=> new Date(b.createdAt) - new Date(a.createdAt)));
-      renderKpis(agg);
-      el('lastUpdated').textContent = `Last update: ${new Date().toLocaleTimeString()}`;
+      try{
+        const resp = await fetchFeedback();
+        let items = Array.isArray(resp?.items) ? resp.items : [];
+        if(!items.length){
+          items = lastItems.length ? lastItems : mockFeedback().items;
+        } else {
+          lastItems = items;
+        }
+        const agg = aggregate(items);
+        renderCharts(agg);
+        renderLeaderboard(agg.leaderboard);
+        renderRecent(items.sort((a,b)=> new Date(b.createdAt) - new Date(a.createdAt)));
+        renderKpis(agg);
+        const lu = document.getElementById('lastUpdated');
+        if(lu){ lu.textContent = `Last update: ${new Date().toLocaleTimeString()}`; lu.classList.remove('text-red-600'); }
+      } catch(e){
+        const { items } = mockFeedback();
+        const agg = aggregate(items);
+        renderCharts(agg);
+        renderLeaderboard(agg.leaderboard);
+        renderRecent(items);
+        renderKpis(agg);
+        const lu = document.getElementById('lastUpdated');
+        if(lu){ lu.textContent = `Last update: fallback ${new Date().toLocaleTimeString()}`; lu.classList.add('text-red-600'); }
+      }
     }
 
     // --- WIRE-UP ---
-    document.getElementById('mobileMenu').addEventListener('click', ()=>{
-      document.querySelector('.sidebar').classList.toggle('open');
-    });
-    document.getElementById('sidebarToggle').addEventListener('click', ()=>{
+    document.getElementById('sidebarToggle')?.addEventListener('click', ()=>{
       const s = document.querySelector('.sidebar');
       const m = document.querySelector('.main-content');
       s.classList.toggle('collapsed');
       m.classList.toggle('expanded');
     });
-    document.getElementById('manualRefresh').addEventListener('click', refresh);
+    document.getElementById('manualRefresh')?.addEventListener('click', refresh);
 
     // Kickoff + Polling
     refresh();
-    setInterval(refresh, 15000); // 15s
+    setInterval(refresh, 15000);
   </script>
 </body>
 </html>
+