update viewers page

server.cjs

@@ -664,16 +664,33 @@ function viewerDashboard() {
   const daySince = new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString()
   const thirtyDaysSince = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString()
   const active = db.prepare(`
-    select session_id, visitor_id, first_seen_at, last_seen_at, page_path, page_title,
+    select
-           referrer, browser, os, device, screen, language, timezone,
+      visitor_id,
-           country, region, city, latitude, longitude
+      page_path,
+      page_title,
+      min(first_seen_at) as first_seen_at,
+      max(last_seen_at) as last_seen_at,
+      max(referrer) as referrer,
+      max(browser) as browser,
+      max(os) as os,
+      max(device) as device,
+      max(screen) as screen,
+      max(language) as language,
+      max(timezone) as timezone,
+      max(country) as country,
+      max(region) as region,
+      max(city) as city,
+      avg(latitude) as latitude,
+      avg(longitude) as longitude,
+      count(*) as sessions
       from active_viewers
      where last_seen_at >= ?
+     group by visitor_id, page_path, page_title
      order by last_seen_at desc
      limit 100
   `).all(activeSince).map((row) => ({
-    session: row.session_id.slice(0, 8),
     visitor: row.visitor_id.slice(0, 8),
+    sessions: row.sessions || 1,
     first_seen_at: row.first_seen_at,
     last_seen_at: row.last_seen_at,
     page_path: row.page_path,
@@ -705,7 +722,7 @@ function viewerDashboard() {
       last_seen_at: viewer.last_seen_at,
     }
 
-    existing.viewers += 1
+    existing.viewers += viewer.sessions || 1
     existing.visitors.add(viewer.visitor)
     if (viewer.country) existing.countries.add(viewer.country)
     const clientKey = `${viewer.browser} on ${viewer.os}`

src/App.jsx

@@ -2254,7 +2254,7 @@ function ViewersPage({ viewers }) {
               </p>
             </div>
             <p className="text-sm font-semibold text-fury-cyan">
-              {formatNumber(active.length)} active sessions
+              {formatNumber(active.length)} active visitors
             </p>
           </div>
         </div>
@@ -2295,9 +2295,9 @@ function ViewersPage({ viewers }) {
 
       <div className="overflow-hidden rounded-lg border border-border bg-fury-white shadow-sm">
         <div className="border-b border-surface px-5 py-4">
-          <h2 className="text-lg font-semibold">Active sessions</h2>
+          <h2 className="text-lg font-semibold">Active visitors</h2>
           <p className="mt-1 text-sm text-text-soft">
-            Individual sessions currently contributing to the active page counts
+            Visitors currently contributing to the active page counts
           </p>
         </div>
         {active.map((viewer) => (
@@ -2319,7 +2319,9 @@ function ViewersPage({ viewers }) {
             </div>
             <p className="text-text-soft">{viewer.language || 'unknown language'}</p>
             <p className="text-text-soft">Seen {relativeSeconds(viewer.last_seen_at)}</p>
-            <p className="font-mono text-xs text-text-muted">#{viewer.session}</p>
+            <p className="font-mono text-xs text-text-muted">
+              {formatNumber(viewer.sessions || 1)} {(viewer.sessions || 1) === 1 ? 'tab' : 'tabs'} · #{viewer.visitor}
+            </p>
           </div>
         ))}
         {!active.length ? (