npm - @stacksjs/ts-analytics - Versions diffs - 0.1.6 - Mend

@stacksjs/ts-analytics 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (237) hide show

package/CHANGELOG.md +68 -0
package/LICENSE.md +21 -0
package/README.md +361 -0
package/bin/cli.ts +169 -0
package/dist/Analytics.d.ts +558 -0
package/dist/api.d.ts +109 -0
package/dist/batching.d.ts +93 -0
package/dist/chunk-2mx7fq49.js +4 -0
package/dist/chunk-3z29508k.js +204 -0
package/dist/chunk-deephkz6.js +56 -0
package/dist/chunk-j261vgyp.js +305 -0
package/dist/chunk-xga17tz7.js +207 -0
package/dist/config.d.ts +132 -0
package/dist/dashboard/components/index.d.ts +80 -0
package/dist/dashboard/composables/useAnalytics.d.ts +99 -0
package/dist/dashboard/index.d.ts +110 -0
package/dist/dashboard/types/index.d.ts +144 -0
package/dist/dashboard/utils/index.d.ts +81 -0
package/dist/dynamodb.d.ts +86 -0
package/dist/funnels.d.ts +104 -0
package/dist/geolocation.d.ts +96 -0
package/dist/index.d.ts +371 -0
package/dist/index.js +10211 -0
package/dist/infrastructure/cdk.d.ts +60 -0
package/dist/infrastructure/cloudformation.d.ts +44 -0
package/dist/infrastructure/index.d.ts +45 -0
package/dist/infrastructure/setup.d.ts +133 -0
package/dist/integrations/cloudflare.d.ts +76 -0
package/dist/integrations/hono.d.ts +60 -0
package/dist/integrations/index.d.ts +24 -0
package/dist/integrations/nuxt.d.ts +7 -0
package/dist/integrations/nuxt.js +42 -0
package/dist/integrations/runtime/use-ts-analytics.d.ts +18 -0
package/dist/integrations/runtime/use-ts-analytics.js +17 -0
package/dist/integrations/stx.d.ts +88 -0
package/dist/integrations/stx.js +18 -0
package/dist/lib/crypto-random.d.ts +4 -0
package/dist/lib/salt.d.ts +16 -0
package/dist/local.d.ts +56 -0
package/dist/model-connector.d.ts +145 -0
package/dist/models/AggregatedStats.d.ts +9 -0
package/dist/models/CampaignStats.d.ts +9 -0
package/dist/models/Conversion.d.ts +11 -0
package/dist/models/CustomEvent.d.ts +11 -0
package/dist/models/DeviceStats.d.ts +9 -0
package/dist/models/EventStats.d.ts +9 -0
package/dist/models/GeoStats.d.ts +9 -0
package/dist/models/Goal.d.ts +9 -0
package/dist/models/GoalStats.d.ts +9 -0
package/dist/models/PageStats.d.ts +11 -0
package/dist/models/PageView.d.ts +13 -0
package/dist/models/RealtimeStats.d.ts +9 -0
package/dist/models/ReferrerStats.d.ts +9 -0
package/dist/models/Session.d.ts +11 -0
package/dist/models/Site.d.ts +11 -0
package/dist/models/index.d.ts +28 -0
package/dist/models/types.d.ts +60 -0
package/dist/sqs-buffering.d.ts +243 -0
package/dist/stacks-integration.d.ts +159 -0
package/dist/tracking-script.d.ts +71 -0
package/dist/tracking.d.ts +17 -0
package/dist/tracking.js +26 -0
package/dist/types.d.ts +595 -0
package/dist/utils/geolocation.d.ts +111 -0
package/dist/utils/user-agent.d.ts +17 -0
package/dist/version.d.ts +7 -0
package/package.json +119 -0
package/src/Analytics.ts +3349 -0
package/src/api.ts +1286 -0
package/src/assets/crosswind.css +2220 -0
package/src/batching.ts +452 -0
package/src/components/dashboard/index.ts +18 -0
package/src/config.ts +456 -0
package/src/dashboard/Dashboard.stx +1517 -0
package/src/dashboard/components/AlertCard.stx +177 -0
package/src/dashboard/components/AnalyticsDashboard.stx +354 -0
package/src/dashboard/components/AnimatedNumber.stx +86 -0
package/src/dashboard/components/BarChart.stx +220 -0
package/src/dashboard/components/BrowserBreakdown.stx +98 -0
package/src/dashboard/components/BrowsersTable.stx +125 -0
package/src/dashboard/components/CampaignBreakdown.stx +163 -0
package/src/dashboard/components/CampaignTable.stx +238 -0
package/src/dashboard/components/CountryList.stx +101 -0
package/src/dashboard/components/DataTable.stx +226 -0
package/src/dashboard/components/DateRangePicker.stx +77 -0
package/src/dashboard/components/DeviceBreakdown.stx +94 -0
package/src/dashboard/components/DevicesTable.stx +163 -0
package/src/dashboard/components/DonutChart.stories.ts +55 -0
package/src/dashboard/components/DonutChart.stx +157 -0
package/src/dashboard/components/EmptyState.stx +90 -0
package/src/dashboard/components/EngagementMetrics.stx +183 -0
package/src/dashboard/components/EventsSection.stx +192 -0
package/src/dashboard/components/FilterBar.stx +104 -0
package/src/dashboard/components/FullAnalyticsDashboard.stx +455 -0
package/src/dashboard/components/FunnelChart.stx +142 -0
package/src/dashboard/components/GeoTable.stx +337 -0
package/src/dashboard/components/GoalsPanel.stx +109 -0
package/src/dashboard/components/Header.stx +39 -0
package/src/dashboard/components/HeatmapChart.stx +140 -0
package/src/dashboard/components/LiveActivityFeed.stx +172 -0
package/src/dashboard/components/MetricComparison.stx +106 -0
package/src/dashboard/components/MiniStats.stx +96 -0
package/src/dashboard/components/OSBreakdown.stx +124 -0
package/src/dashboard/components/PageDetailCard.stx +102 -0
package/src/dashboard/components/PagesTable.stx +127 -0
package/src/dashboard/components/ProgressRing.stx +89 -0
package/src/dashboard/components/RealtimeCounter.stories.ts +45 -0
package/src/dashboard/components/RealtimeCounter.stx +46 -0
package/src/dashboard/components/ReferrersTable.stx +180 -0
package/src/dashboard/components/SparklineChart.stx +160 -0
package/src/dashboard/components/StatCard.stories.ts +58 -0
package/src/dashboard/components/StatCard.stx +90 -0
package/src/dashboard/components/SummaryStats.stx +81 -0
package/src/dashboard/components/TabNav.stx +66 -0
package/src/dashboard/components/ThemeSwitcher.stx +124 -0
package/src/dashboard/components/TimeSeriesChart.stx +106 -0
package/src/dashboard/components/TopList.stories.ts +58 -0
package/src/dashboard/components/TopList.stx +74 -0
package/src/dashboard/components/TrendIndicator.stx +84 -0
package/src/dashboard/components/heatmap/ClickHeatmap.stx +264 -0
package/src/dashboard/components/heatmap/ElementClickList.stx +125 -0
package/src/dashboard/components/heatmap/HeatmapControls.stx +125 -0
package/src/dashboard/components/heatmap/HeatmapLegend.stx +69 -0
package/src/dashboard/components/heatmap/PageHeatmap.stx +264 -0
package/src/dashboard/components/heatmap/ScrollHeatmap.stx +127 -0
package/src/dashboard/components/heatmap/index.ts +12 -0
package/src/dashboard/components/index.ts +86 -0
package/src/dashboard/composables/useAnalytics.ts +465 -0
package/src/dashboard/demo/DemoApp.stx +370 -0
package/src/dashboard/demo/index.ts +8 -0
package/src/dashboard/demo/mockData.ts +234 -0
package/src/dashboard/index.ts +117 -0
package/src/dashboard/stx-shim.d.ts +4 -0
package/src/dashboard/types/index.ts +203 -0
package/src/dashboard/utils/index.ts +426 -0
package/src/dynamodb.ts +344 -0
package/src/funnels.ts +534 -0
package/src/geolocation.ts +515 -0
package/src/handlers/alerts.ts +328 -0
package/src/handlers/annotations.ts +128 -0
package/src/handlers/api-keys.ts +240 -0
package/src/handlers/auth.ts +1020 -0
package/src/handlers/authz.ts +137 -0
package/src/handlers/collect.ts +724 -0
package/src/handlers/data.ts +625 -0
package/src/handlers/experiments.ts +138 -0
package/src/handlers/funnels.ts +216 -0
package/src/handlers/goals.ts +218 -0
package/src/handlers/heatmaps.ts +272 -0
package/src/handlers/index.ts +56 -0
package/src/handlers/lib/read-cache.ts +63 -0
package/src/handlers/misc.ts +486 -0
package/src/handlers/oauth.ts +233 -0
package/src/handlers/performance.ts +388 -0
package/src/handlers/sessions.ts +413 -0
package/src/handlers/sharing.ts +198 -0
package/src/handlers/stats.ts +1368 -0
package/src/handlers/team.ts +161 -0
package/src/handlers/uptime.ts +283 -0
package/src/handlers/views.ts +390 -0
package/src/handlers/webhooks.ts +226 -0
package/src/heatmap/index.ts +32 -0
package/src/heatmap/tracking-script.ts +452 -0
package/src/heatmap/types.ts +79 -0
package/src/index.ts +387 -0
package/src/infrastructure/cdk.ts +496 -0
package/src/infrastructure/cloudformation.ts +595 -0
package/src/infrastructure/index.ts +48 -0
package/src/infrastructure/setup.ts +611 -0
package/src/integrations/cloudflare.ts +732 -0
package/src/integrations/hono.ts +589 -0
package/src/integrations/index.ts +27 -0
package/src/integrations/nuxt.ts +78 -0
package/src/integrations/runtime/use-ts-analytics.ts +32 -0
package/src/integrations/stx.ts +138 -0
package/src/jobs/index.ts +127 -0
package/src/lib/crypto-random.ts +41 -0
package/src/lib/ddb-errors.ts +20 -0
package/src/lib/dynamodb.ts +216 -0
package/src/lib/email.ts +38 -0
package/src/lib/ga-import.ts +471 -0
package/src/lib/ga4-api.ts +244 -0
package/src/lib/goals.ts +205 -0
package/src/lib/index.ts +6 -0
package/src/lib/ingest-counters.ts +123 -0
package/src/lib/log.ts +36 -0
package/src/lib/membership.ts +98 -0
package/src/lib/plans.ts +90 -0
package/src/lib/quota.ts +46 -0
package/src/lib/rate-limit.ts +27 -0
package/src/lib/rollups.ts +472 -0
package/src/lib/salt.ts +97 -0
package/src/lib/scheduler.ts +97 -0
package/src/lib/significance.ts +66 -0
package/src/lib/site-retention.ts +56 -0
package/src/local.ts +360 -0
package/src/model-connector.ts +616 -0
package/src/models/AggregatedStats.ts +162 -0
package/src/models/CampaignStats.ts +141 -0
package/src/models/Conversion.ts +135 -0
package/src/models/CustomEvent.ts +123 -0
package/src/models/DeviceStats.ts +105 -0
package/src/models/EventStats.ts +108 -0
package/src/models/GeoStats.ts +112 -0
package/src/models/Goal.ts +105 -0
package/src/models/GoalStats.ts +106 -0
package/src/models/PageStats.ts +152 -0
package/src/models/PageView.ts +277 -0
package/src/models/RealtimeStats.ts +96 -0
package/src/models/ReferrerStats.ts +115 -0
package/src/models/Session.ts +235 -0
package/src/models/Site.ts +115 -0
package/src/models/index.ts +50 -0
package/src/models/orm/index.ts +2043 -0
package/src/models/types.ts +71 -0
package/src/router.ts +521 -0
package/src/sqs-buffering.ts +806 -0
package/src/stacks-integration.ts +527 -0
package/src/tracking-script.ts +944 -0
package/src/tracking.ts +27 -0
package/src/types/analytics.ts +219 -0
package/src/types/api.ts +75 -0
package/src/types/bun-router.d.ts +15 -0
package/src/types/dashboard.ts +62 -0
package/src/types/index.ts +66 -0
package/src/types/stx.d.ts +27 -0
package/src/types/window.d.ts +101 -0
package/src/types.ts +911 -0
package/src/utils/cache.ts +148 -0
package/src/utils/date.ts +118 -0
package/src/utils/filters.ts +71 -0
package/src/utils/geolocation.ts +323 -0
package/src/utils/index.ts +9 -0
package/src/utils/response.ts +180 -0
package/src/utils/timezone-country.ts +242 -0
package/src/utils/user-agent.ts +110 -0
package/src/version.ts +7 -0

package/src/dashboard/Dashboard.stx ADDED Viewed

@@ -0,0 +1,1517 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{ siteName }} - Analytics</title>
+  <script>
+    // Configuration - auto-detect from current URL or use overrides
+    const urlParams = new URLSearchParams(window.location.search)
+    const API_ENDPOINT = window.ANALYTICS_API_ENDPOINT || urlParams.get('api') || window.location.origin
+    const SITE_ID = urlParams.get('siteId') || window.ANALYTICS_SITE_ID || ''
+    const USE_STEALTH = urlParams.get('stealth') !== 'false'
+    // Stealth API path mapper - bypass content blockers
+    const STEALTH_MAP = {
+      sites: 'projects', stats: 'summary', realtime: 'pulse', pages: 'content',
+      referrers: 'sources', devices: 'clients', browsers: 'agents', countries: 'geo',
+      timeseries: 'series', events: 'actions', campaigns: 'promo', comparison: 'diff',
+      sessions: 'visits', flow: 'journey', live: 'now', heatmap: 'touch', errors: 'issues',
+      vitals: 'metrics', goals: 'targets', funnels: 'pipelines', annotations: 'notes'
+    }
+    function apiPath(path) {
+      if (!USE_STEALTH) return path
+      let result = path.replace('/api/sites/', '/api/p/').replace('/api/sites', '/api/projects')
+      Object.keys(STEALTH_MAP).sort((a, b) => b.length - a.length).forEach(k => {
+        result = result.replace(new RegExp(`/${k}(?=/|\\?|$)`, 'g'), `/${STEALTH_MAP[k]}`)
+      })
+      return result
+    }
+    window.apiPath = apiPath
+    // Sites list
+    let availableSites = []
+    let sitesLoading = true
+    let sitesError = null
+    // Dashboard state
+    let siteName = "Analytics Dashboard"
+    let siteId = SITE_ID
+    let dateRange = "Last 30 days"
+    let activeView = 'dashboard' // 'dashboard' or 'heatmap'
+    // Heatmap state
+    let heatmapPages = []
+    let selectedHeatmapPage = ''
+    let heatmapViewMode = 'click' // 'click' or 'scroll'
+    let heatmapClicks = []
+    let heatmapTopElements = []
+    let heatmapTotalClicks = 0
+    let heatmapScrollData = []
+    let heatmapAvgScrollDepth = 0
+    let heatmapTotalSessions = 0
+    let heatmapLoading = false
+    // Summary stats
+    let stats = {
+      realtime: 0,
+      people: 0,
+      views: 0,
+      avgTime: "00:00",
+      bounceRate: 0,
+      events: 0
+    }
+    // Table data
+    let pages = []
+    let referrers = []
+    let deviceTypes = []
+    let operatingSystems = []
+    let browsers = []
+    let countries = []
+    let campaigns = []
+    let events = []
+    let timeSeriesData = []
+    // Fetch available sites
+    async function fetchAvailableSites() {
+      sitesLoading = true
+      sitesError = null
+      try {
+        const res = await fetch(apiPath(`${API_ENDPOINT}/api/sites`))
+        if (!res.ok) throw new Error('Failed to fetch sites')
+        const data = await res.json()
+        availableSites = data.sites || []
+        sitesLoading = false
+        renderSiteSelector()
+      } catch (err) {
+        sitesError = err.message || 'Failed to load sites'
+        sitesLoading = false
+        renderSiteSelector()
+      }
+    }
+    function renderSiteSelector() {
+      const container = document.getElementById('site-selector-container')
+      if (!container) return
+      if (sitesLoading) {
+        container.innerHTML = `
+          <div class="site-selector-loading">
+            <div class="spinner"></div>
+            <p>Loading sites...</p>
+          </div>
+        `
+        return
+      }
+      if (sitesError) {
+        container.innerHTML = `
+          <div class="site-selector-error">
+            <svg width="48" height="48" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+            <p>${sitesError}</p>
+            <button onclick="fetchAvailableSites()">Try Again</button>
+          </div>
+        `
+        return
+      }
+      if (availableSites.length === 0) {
+        container.innerHTML = `
+          <div class="site-selector-empty">
+            <svg width="48" height="48" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
+            </svg>
+            <h2>No Sites Found</h2>
+            <p>Create a site to start tracking analytics.</p>
+          </div>
+        `
+        return
+      }
+      container.innerHTML = `
+        <div class="site-selector-grid">
+          ${availableSites.map(site => `
+            <button class="site-card" onclick="selectSite('${site.id}', '${site.name.replace(/'/g, "\\'")}')">
+              <div class="site-card-icon">
+                <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
+                </svg>
+              </div>
+              <div class="site-card-info">
+                <span class="site-card-name">${site.name}</span>
+                <span class="site-card-domain">${site.domains?.[0] || site.id}</span>
+              </div>
+              <svg class="site-card-arrow" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+              </svg>
+            </button>
+          `).join('')}
+        </div>
+      `
+    }
+    function selectSite(id, name) {
+      siteId = id
+      siteName = name
+      document.getElementById('site-selector-screen').style.display = 'none'
+      document.getElementById('dashboard-content').style.display = 'block'
+      // Update URL without reload
+      const url = new URL(window.location.href)
+      url.searchParams.set('siteId', id)
+      window.history.pushState({}, '', url)
+      // Update site name in header
+      document.querySelector('.site-selector select').innerHTML = `<option>${name}</option>`
+      // Fetch dashboard data
+      fetchDashboardData()
+    }
+    // Fetch data from API
+    async function fetchDashboardData() {
+      if (!siteId) {
+        console.error('No siteId configured. Add ?siteId=YOUR_SITE_ID to the URL.')
+        return
+      }
+      const baseUrl = `${API_ENDPOINT}/api/sites/${siteId}`
+      const now = new Date()
+      const thirtyDaysAgo = new Date(now)
+      thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
+      const params = `?startDate=${thirtyDaysAgo.toISOString()}&endDate=${now.toISOString()}`
+      try {
+        // Fetch all data in parallel - using stealth API paths
+        const [statsRes, realtimeRes, pagesRes, referrersRes, devicesRes, browsersRes, countriesRes, timeseriesRes, eventsRes, campaignsRes] = await Promise.all([
+          fetch(apiPath(`${baseUrl}/stats${params}`)).then(r => r.json()).catch(() => ({})),
+          fetch(apiPath(`${baseUrl}/realtime`)).then(r => r.json()).catch(() => ({ currentVisitors: 0 })),
+          fetch(apiPath(`${baseUrl}/pages${params}`)).then(r => r.json()).catch(() => ({ pages: [] })),
+          fetch(apiPath(`${baseUrl}/referrers${params}`)).then(r => r.json()).catch(() => ({ referrers: [] })),
+          fetch(apiPath(`${baseUrl}/devices${params}`)).then(r => r.json()).catch(() => ({ deviceTypes: [], operatingSystems: [] })),
+          fetch(apiPath(`${baseUrl}/browsers${params}`)).then(r => r.json()).catch(() => ({ browsers: [] })),
+          fetch(apiPath(`${baseUrl}/countries${params}`)).then(r => r.json()).catch(() => ({ countries: [] })),
+          fetch(apiPath(`${baseUrl}/timeseries${params}`)).then(r => r.json()).catch(() => ({ timeSeries: [] })),
+          fetch(apiPath(`${baseUrl}/events${params}`)).then(r => r.json()).catch(() => ({ events: [] })),
+          fetch(apiPath(`${baseUrl}/campaigns${params}`)).then(r => r.json()).catch(() => ({ campaigns: [] })),
+        ])
+        // Update stats
+        stats = {
+          realtime: realtimeRes.currentVisitors || 0,
+          people: statsRes.people || 0,
+          views: statsRes.views || 0,
+          avgTime: statsRes.avgTime || "00:00",
+          bounceRate: statsRes.bounceRate || 0,
+          events: statsRes.events || 0
+        }
+        // Update tables
+        pages = pagesRes.pages || []
+        referrers = referrersRes.referrers || []
+        deviceTypes = devicesRes.deviceTypes || []
+        operatingSystems = devicesRes.operatingSystems || []
+        browsers = browsersRes.browsers || []
+        countries = countriesRes.countries || []
+        campaigns = campaignsRes.campaigns || []
+        events = eventsRes.events || []
+        timeSeriesData = timeseriesRes.timeSeries || []
+        // Re-render the dashboard
+        renderDashboard()
+      } catch (error) {
+        console.error('Failed to fetch dashboard data:', error)
+      }
+    }
+    function formatNumber(num) {
+      if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M'
+      if (num >= 1000) return (num / 1000).toFixed(1) + 'k'
+      return String(num)
+    }
+    // Heatmap functions
+    async function fetchHeatmapPages() {
+      if (!siteId) return
+      try {
+        const res = await fetch(apiPath(`${API_ENDPOINT}/api/sites/${siteId}/heatmap/pages`))
+        const data = await res.json()
+        heatmapPages = data.pages || []
+        renderHeatmapPageSelector()
+      } catch (err) {
+        console.error('Failed to fetch heatmap pages:', err)
+      }
+    }
+    async function fetchHeatmapData() {
+      if (!siteId || !selectedHeatmapPage) return
+      heatmapLoading = true
+      renderHeatmapLoading()
+      const now = new Date()
+      const thirtyDaysAgo = new Date(now)
+      thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
+      const params = `path=${encodeURIComponent(selectedHeatmapPage)}&startDate=${thirtyDaysAgo.toISOString()}&endDate=${now.toISOString()}`
+      try {
+        if (heatmapViewMode === 'click') {
+          const res = await fetch(apiPath(`${API_ENDPOINT}/api/sites/${siteId}/heatmap/clicks?${params}`))
+          const data = await res.json()
+          heatmapClicks = data.clicks || []
+          heatmapTopElements = data.topElements || []
+          heatmapTotalClicks = data.totalClicks || 0
+        } else {
+          const res = await fetch(apiPath(`${API_ENDPOINT}/api/sites/${siteId}/heatmap/scroll?${params}`))
+          const data = await res.json()
+          heatmapScrollData = data.scrollDepths || []
+          heatmapAvgScrollDepth = data.avgMaxDepth || 0
+          heatmapTotalSessions = data.totalSessions || 0
+        }
+        renderHeatmap()
+      } catch (err) {
+        console.error('Failed to fetch heatmap data:', err)
+      } finally {
+        heatmapLoading = false
+      }
+    }
+    function renderHeatmapPageSelector() {
+      const selector = document.getElementById('heatmap-page-select')
+      if (!selector) return
+      selector.innerHTML = '<option value="">Select a page...</option>' +
+        heatmapPages.map(p => `<option value="${p.path}">${p.path} (${p.clickCount || 0} clicks)</option>`).join('')
+    }
+    function renderHeatmapLoading() {
+      const container = document.getElementById('heatmap-viz')
+      if (!container) return
+      container.innerHTML = `
+        <div class="heatmap-loading">
+          <div class="spinner"></div>
+          <span>Loading heatmap data...</span>
+        </div>
+      `
+    }
+    function renderHeatmap() {
+      if (heatmapViewMode === 'click') {
+        renderClickHeatmap()
+      } else {
+        renderScrollHeatmap()
+      }
+      renderHeatmapSidebar()
+    }
+    function renderClickHeatmap() {
+      const container = document.getElementById('heatmap-viz')
+      if (!container) return
+      if (heatmapClicks.length === 0) {
+        container.innerHTML = `
+          <div class="heatmap-empty">
+            <svg width="48" height="48" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"/>
+            </svg>
+            <p>No click data for this page yet</p>
+          </div>
+        `
+        return
+      }
+      // Create canvas-based heatmap
+      const width = container.offsetWidth
+      const height = 500
+      const maxCount = Math.max(...heatmapClicks.map(c => c.count), 1)
+      container.innerHTML = `
+        <div class="heatmap-canvas-container" style="position:relative;width:100%;height:${height}px;background:#1a1f2e;border-radius:8px;overflow:hidden;">
+          <canvas id="heatmap-canvas" width="${width}" height="${height}"></canvas>
+          <div class="heatmap-stats">
+            <span>${heatmapTotalClicks.toLocaleString()} total clicks</span>
+          </div>
+        </div>
+      `
+      const canvas = document.getElementById('heatmap-canvas')
+      const ctx = canvas.getContext('2d')
+      // Draw click points as heat
+      for (const click of heatmapClicks) {
+        const intensity = click.count / maxCount
+        const x = (click.x / 100) * width
+        const y = (click.y / 100) * height
+        drawHeatPoint(ctx, x, y, intensity, 30)
+      }
+      // Colorize
+      colorizeHeatmap(ctx, width, height)
+    }
+    function drawHeatPoint(ctx, x, y, intensity, radius) {
+      const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius)
+      gradient.addColorStop(0, `rgba(255, 255, 255, ${intensity * 0.6})`)
+      gradient.addColorStop(1, 'rgba(255, 255, 255, 0)')
+      ctx.fillStyle = gradient
+      ctx.beginPath()
+      ctx.arc(x, y, radius, 0, Math.PI * 2)
+      ctx.fill()
+    }
+    function colorizeHeatmap(ctx, width, height) {
+      const imageData = ctx.getImageData(0, 0, width, height)
+      const data = imageData.data
+      for (let i = 0; i < data.length; i += 4) {
+        const alpha = data[i + 3]
+        if (alpha > 0) {
+          const ratio = alpha / 255
+          // Blue -> Green -> Yellow -> Red gradient
+          if (ratio < 0.25) {
+            data[i] = 0
+            data[i + 1] = Math.floor(ratio * 4 * 255)
+            data[i + 2] = 255
+          } else if (ratio < 0.5) {
+            data[i] = 0
+            data[i + 1] = 255
+            data[i + 2] = Math.floor((1 - (ratio - 0.25) * 4) * 255)
+          } else if (ratio < 0.75) {
+            data[i] = Math.floor((ratio - 0.5) * 4 * 255)
+            data[i + 1] = 255
+            data[i + 2] = 0
+          } else {
+            data[i] = 255
+            data[i + 1] = Math.floor((1 - (ratio - 0.75) * 4) * 255)
+            data[i + 2] = 0
+          }
+          data[i + 3] = Math.min(255, alpha * 2)
+        }
+      }
+      ctx.putImageData(imageData, 0, 0)
+    }
+    function renderScrollHeatmap() {
+      const container = document.getElementById('heatmap-viz')
+      if (!container) return
+      if (heatmapScrollData.length === 0) {
+        container.innerHTML = `
+          <div class="heatmap-empty">
+            <svg width="48" height="48" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
+            </svg>
+            <p>No scroll data for this page yet</p>
+          </div>
+        `
+        return
+      }
+      const getColor = (pct) => {
+        if (pct >= 80) return '#10b981'
+        if (pct >= 60) return '#34d399'
+        if (pct >= 40) return '#fbbf24'
+        if (pct >= 20) return '#f97316'
+        return '#ef4444'
+      }
+      // Create depth buckets 0-100 in 10% increments
+      const buckets = []
+      for (let d = 0; d <= 90; d += 10) {
+        const dataPoint = heatmapScrollData.find(s => s.depth === d)
+        buckets.push({
+          depth: d,
+          reachPercentage: dataPoint?.reachPercentage ?? (d === 0 ? 100 : 0),
+          avgTimeMs: dataPoint?.avgTimeMs ?? 0
+        })
+      }
+      container.innerHTML = `
+        <div class="scroll-heatmap">
+          <div class="scroll-stats">
+            <div class="scroll-stat">
+              <span class="scroll-stat-value">${Math.round(heatmapAvgScrollDepth)}%</span>
+              <span class="scroll-stat-label">Avg. Scroll Depth</span>
+            </div>
+            <div class="scroll-stat">
+              <span class="scroll-stat-value">${heatmapTotalSessions.toLocaleString()}</span>
+              <span class="scroll-stat-label">Total Sessions</span>
+            </div>
+          </div>
+          <div class="scroll-bars">
+            ${buckets.map(b => `
+              <div class="scroll-bar-row">
+                <span class="scroll-depth-label">${b.depth}%</span>
+                <div class="scroll-bar-track">
+                  <div class="scroll-bar-fill" style="width:${b.reachPercentage}%;background:${getColor(b.reachPercentage)}"></div>
+                </div>
+                <span class="scroll-reach-label">${b.reachPercentage}%</span>
+              </div>
+            `).join('')}
+          </div>
+          <div class="scroll-legend">
+            <span><span class="legend-dot" style="background:#10b981"></span>80%+ reach</span>
+            <span><span class="legend-dot" style="background:#fbbf24"></span>40-60% reach</span>
+            <span><span class="legend-dot" style="background:#ef4444"></span>&lt;20% reach</span>
+          </div>
+        </div>
+      `
+    }
+    function renderHeatmapSidebar() {
+      const sidebar = document.getElementById('heatmap-sidebar')
+      if (!sidebar) return
+      if (heatmapViewMode === 'click' && heatmapTopElements.length > 0) {
+        const maxClicks = heatmapTopElements[0]?.clicks || 1
+        sidebar.innerHTML = `
+          <div class="heatmap-panel">
+            <h3>Top Clicked Elements</h3>
+            <div class="element-list">
+              ${heatmapTopElements.slice(0, 15).map(el => `
+                <div class="element-item">
+                  <div class="element-info">
+                    <span class="element-tag">&lt;${el.tag}&gt;</span>
+                    <span class="element-selector" title="${el.selector}">${el.selector}</span>
+                  </div>
+                  <div class="element-stats">
+                    <div class="element-bar-track">
+                      <div class="element-bar-fill" style="width:${(el.clicks / maxClicks) * 100}%"></div>
+                    </div>
+                    <span class="element-clicks">${el.clicks}</span>
+                  </div>
+                </div>
+              `).join('')}
+            </div>
+          </div>
+        `
+      } else if (heatmapViewMode === 'scroll') {
+        sidebar.innerHTML = `
+          <div class="heatmap-panel">
+            <h3>Scroll Insights</h3>
+            <div class="insight-list">
+              <div class="insight-item">
+                <span class="insight-label">Average scroll depth</span>
+                <span class="insight-value">${Math.round(heatmapAvgScrollDepth)}%</span>
+              </div>
+              <div class="insight-item">
+                <span class="insight-label">Sessions analyzed</span>
+                <span class="insight-value">${heatmapTotalSessions.toLocaleString()}</span>
+              </div>
+              <div class="insight-item">
+                <span class="insight-label">Reached 50%</span>
+                <span class="insight-value">${heatmapScrollData.find(s => s.depth === 50)?.reachPercentage || 0}%</span>
+              </div>
+              <div class="insight-item">
+                <span class="insight-label">Reached bottom</span>
+                <span class="insight-value">${heatmapScrollData.find(s => s.depth === 90)?.reachPercentage || 0}%</span>
+              </div>
+            </div>
+          </div>
+        `
+      } else {
+        sidebar.innerHTML = `
+          <div class="heatmap-panel">
+            <h3>No Data</h3>
+            <p class="text-muted">Select a page to view heatmap data</p>
+          </div>
+        `
+      }
+    }
+    function switchView(view) {
+      activeView = view
+      document.getElementById('dashboard-view').style.display = view === 'dashboard' ? 'block' : 'none'
+      document.getElementById('heatmap-view').style.display = view === 'heatmap' ? 'block' : 'none'
+      document.querySelectorAll('.view-tab').forEach(t => t.classList.remove('active'))
+      document.querySelector(`.view-tab[data-view="${view}"]`)?.classList.add('active')
+      if (view === 'heatmap' && heatmapPages.length === 0) {
+        fetchHeatmapPages()
+      }
+    }
+    function switchHeatmapMode(mode) {
+      heatmapViewMode = mode
+      document.querySelectorAll('.heatmap-mode-btn').forEach(b => b.classList.remove('active'))
+      document.querySelector(`.heatmap-mode-btn[data-mode="${mode}"]`)?.classList.add('active')
+      if (selectedHeatmapPage) {
+        fetchHeatmapData()
+      }
+    }
+    function selectHeatmapPage(path) {
+      selectedHeatmapPage = path
+      if (path) {
+        fetchHeatmapData()
+      }
+    }
+    function renderDashboard() {
+      // Update stats
+      document.getElementById('stat-realtime').textContent = formatNumber(stats.realtime)
+      document.getElementById('stat-people').textContent = formatNumber(stats.people)
+      document.getElementById('stat-views').textContent = formatNumber(stats.views)
+      document.getElementById('stat-avgtime').textContent = stats.avgTime
+      document.getElementById('stat-bounce').textContent = stats.bounceRate + '%'
+      document.getElementById('stat-events').textContent = formatNumber(stats.events)
+      document.getElementById('realtime-count').textContent = stats.realtime + ' current visitors'
+      // Update pages table
+      const pagesBody = document.getElementById('pages-body')
+      pagesBody.innerHTML = pages.length ? pages.map(p => `
+        <tr>
+          <td class="name" title="${p.path}">${p.path}</td>
+          <td class="value">${formatNumber(p.entries || 0)}</td>
+          <td class="value">${formatNumber(p.visitors || 0)}</td>
+          <td class="value">${formatNumber(p.views || 0)}</td>
+        </tr>
+      `).join('') : '<tr><td colspan="4" style="text-align:center;color:var(--text-muted);padding:1rem">No data</td></tr>'
+      // Update referrers table
+      const referrersBody = document.getElementById('referrers-body')
+      referrersBody.innerHTML = referrers.length ? referrers.map(r => `
+        <tr>
+          <td class="name" title="${r.source}">${r.source}</td>
+          <td class="value">${formatNumber(r.visitors || 0)}</td>
+          <td class="value">${formatNumber(r.views || 0)}</td>
+        </tr>
+      `).join('') : '<tr><td colspan="3" style="text-align:center;color:var(--text-muted);padding:1rem">No data</td></tr>'
+      // Update devices table
+      const devicesBody = document.getElementById('devices-body')
+      devicesBody.innerHTML = deviceTypes.length ? deviceTypes.map(d => `
+        <tr>
+          <td class="name">${d.type}</td>
+          <td class="value">${formatNumber(d.visitors || 0)}</td>
+        </tr>
+      `).join('') : '<tr><td colspan="2" style="text-align:center;color:var(--text-muted);padding:1rem">No data</td></tr>'
+      // Update browsers table
+      const browsersBody = document.getElementById('browsers-body')
+      browsersBody.innerHTML = browsers.length ? browsers.map(b => `
+        <tr>
+          <td class="name">${b.name}</td>
+          <td class="value">${formatNumber(b.visitors || 0)}</td>
+        </tr>
+      `).join('') : '<tr><td colspan="2" style="text-align:center;color:var(--text-muted);padding:1rem">No data</td></tr>'
+      // Update countries table
+      const countriesBody = document.getElementById('countries-body')
+      countriesBody.innerHTML = countries.length ? countries.map(c => `
+        <tr>
+          <td class="name">${c.name}</td>
+          <td class="value">${formatNumber(c.visitors || 0)}</td>
+        </tr>
+      `).join('') : '<tr><td colspan="2" style="text-align:center;color:var(--text-muted);padding:1rem">No data</td></tr>'
+      // Update campaigns table
+      const campaignsBody = document.getElementById('campaigns-body')
+      campaignsBody.innerHTML = campaigns.length ? campaigns.map(c => `
+        <tr>
+          <td class="name" title="${c.name}">${c.name}</td>
+          <td class="value">${formatNumber(c.visitors || 0)}</td>
+          <td class="value">${formatNumber(c.views || 0)}</td>
+        </tr>
+      `).join('') : '<tr><td colspan="3" style="text-align:center;color:var(--text-muted);padding:1rem">No data</td></tr>'
+      // Update events section
+      const eventsContainer = document.getElementById('events-container')
+      eventsContainer.innerHTML = events.length ? `
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>Event Name</th>
+              <th style="text-align:right">Count</th>
+              <th style="text-align:right">Unique</th>
+              <th style="text-align:right">Value</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${events.map(e => `
+              <tr>
+                <td class="name">${e.name}</td>
+                <td class="value">${formatNumber(e.count || 0)}</td>
+                <td class="value">${formatNumber(e.unique || 0)}</td>
+                <td class="value">${e.totalValue ? formatNumber(e.totalValue) : '-'}</td>
+              </tr>
+            `).join('')}
+          </tbody>
+        </table>
+      ` : `
+        <div class="empty-state">
+          <p>You haven't created any events yet.</p>
+          <a href="#">Learn how to use events</a>
+        </div>
+      `
+      // Render time series chart if data available
+      renderChart()
+    }
+    function renderChart() {
+      const canvas = document.getElementById('timeSeriesChart')
+      const tooltip = document.getElementById('chartTooltip')
+      if (!canvas || !timeSeriesData.length) return
+      const ctx = canvas.getContext('2d')
+      const rect = canvas.parentElement.getBoundingClientRect()
+      canvas.width = rect.width - 48
+      canvas.height = 220
+      const padding = { top: 20, right: 20, bottom: 50, left: 50 }
+      const width = canvas.width - padding.left - padding.right
+      const height = canvas.height - padding.top - padding.bottom
+      const maxViews = Math.max(...timeSeriesData.map(d => d.views), 1)
+      const xScale = width / (timeSeriesData.length - 1 || 1)
+      const yScale = height / maxViews
+      // Store point positions for hover detection
+      const points = timeSeriesData.map((d, i) => ({
+        x: padding.left + i * xScale,
+        y: padding.top + height - d.views * yScale,
+        data: d
+      }))
+      function draw(hoverIndex = -1) {
+        ctx.clearRect(0, 0, canvas.width, canvas.height)
+        // Draw grid lines
+        ctx.strokeStyle = '#374151'
+        ctx.lineWidth = 1
+        for (let i = 0; i <= 4; i++) {
+          const y = padding.top + (height / 4) * i
+          ctx.beginPath()
+          ctx.moveTo(padding.left, y)
+          ctx.lineTo(padding.left + width, y)
+          ctx.stroke()
+        }
+        // Draw area fill
+        ctx.beginPath()
+        ctx.fillStyle = 'rgba(129, 140, 248, 0.1)'
+        points.forEach((p, i) => {
+          if (i === 0) {
+            ctx.moveTo(p.x, padding.top + height)
+            ctx.lineTo(p.x, p.y)
+          } else {
+            ctx.lineTo(p.x, p.y)
+          }
+        })
+        ctx.lineTo(points[points.length - 1].x, padding.top + height)
+        ctx.closePath()
+        ctx.fill()
+        // Draw line
+        ctx.beginPath()
+        ctx.strokeStyle = '#818cf8'
+        ctx.lineWidth = 2
+        points.forEach((p, i) => {
+          if (i === 0) ctx.moveTo(p.x, p.y)
+          else ctx.lineTo(p.x, p.y)
+        })
+        ctx.stroke()
+        // Draw data points
+        points.forEach((p, i) => {
+          ctx.beginPath()
+          ctx.fillStyle = i === hoverIndex ? '#ffffff' : '#818cf8'
+          ctx.arc(p.x, p.y, i === hoverIndex ? 6 : 3, 0, Math.PI * 2)
+          ctx.fill()
+          if (i === hoverIndex) {
+            ctx.strokeStyle = '#818cf8'
+            ctx.lineWidth = 2
+            ctx.stroke()
+          }
+        })
+        // Draw Y axis labels
+        ctx.fillStyle = '#6b7280'
+        ctx.font = '11px -apple-system, sans-serif'
+        ctx.textAlign = 'right'
+        for (let i = 0; i <= 4; i++) {
+          const value = Math.round(maxViews - (maxViews / 4) * i)
+          const y = padding.top + (height / 4) * i
+          ctx.fillText(formatNumber(value), padding.left - 10, y + 4)
+        }
+        // Draw X axis labels
+        ctx.textAlign = 'center'
+        ctx.fillStyle = '#6b7280'
+        const labelCount = Math.min(timeSeriesData.length, 7)
+        const step = Math.max(1, Math.floor((timeSeriesData.length - 1) / (labelCount - 1)))
+        for (let i = 0; i < timeSeriesData.length; i += step) {
+          const d = timeSeriesData[i]
+          const x = padding.left + i * xScale
+          const dateStr = formatChartDate(d.date)
+          ctx.fillText(dateStr, x, canvas.height - 10)
+        }
+        // Always show last label if not already shown
+        if ((timeSeriesData.length - 1) % step !== 0) {
+          const d = timeSeriesData[timeSeriesData.length - 1]
+          const x = padding.left + (timeSeriesData.length - 1) * xScale
+          ctx.fillText(formatChartDate(d.date), x, canvas.height - 10)
+        }
+        // Draw vertical hover line
+        if (hoverIndex >= 0) {
+          ctx.beginPath()
+          ctx.strokeStyle = 'rgba(129, 140, 248, 0.5)'
+          ctx.lineWidth = 1
+          ctx.setLineDash([4, 4])
+          ctx.moveTo(points[hoverIndex].x, padding.top)
+          ctx.lineTo(points[hoverIndex].x, padding.top + height)
+          ctx.stroke()
+          ctx.setLineDash([])
+        }
+      }
+      function formatChartDate(dateStr) {
+        const date = new Date(dateStr)
+        const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+        return months[date.getMonth()] + ' ' + date.getDate()
+      }
+      // Initial draw
+      draw()
+      // Hover interaction
+      canvas.onmousemove = function(e) {
+        const canvasRect = canvas.getBoundingClientRect()
+        const mouseX = e.clientX - canvasRect.left
+        const mouseY = e.clientY - canvasRect.top
+        // Find closest point
+        let closestIdx = -1
+        let closestDist = 30 // Max distance to trigger hover
+        points.forEach((p, i) => {
+          const dist = Math.abs(mouseX - p.x)
+          if (dist < closestDist) {
+            closestDist = dist
+            closestIdx = i
+          }
+        })
+        if (closestIdx >= 0) {
+          const p = points[closestIdx]
+          const d = p.data
+          tooltip.innerHTML = `
+            <div class="tooltip-date">${formatChartDate(d.date)}</div>
+            <div class="tooltip-row"><span class="tooltip-dot views"></span>Views: <strong>${formatNumber(d.views)}</strong></div>
+            <div class="tooltip-row"><span class="tooltip-dot visitors"></span>Visitors: <strong>${formatNumber(d.visitors || 0)}</strong></div>
+          `
+          tooltip.style.display = 'block'
+          // Position tooltip
+          let left = p.x + 10
+          if (left + 150 > canvas.width) left = p.x - 160
+          tooltip.style.left = left + 'px'
+          tooltip.style.top = (p.y - 30) + 'px'
+          draw(closestIdx)
+          canvas.style.cursor = 'pointer'
+        } else {
+          tooltip.style.display = 'none'
+          draw()
+          canvas.style.cursor = 'default'
+        }
+      }
+      canvas.onmouseleave = function() {
+        tooltip.style.display = 'none'
+        draw()
+      }
+    }
+    // Initial load
+    document.addEventListener('DOMContentLoaded', () => {
+      if (siteId) {
+        // Site ID provided - show dashboard directly
+        document.getElementById('site-selector-screen').style.display = 'none'
+        document.getElementById('dashboard-content').style.display = 'block'
+        fetchDashboardData()
+        // Refresh realtime every 30 seconds
+        setInterval(fetchDashboardData, 30000)
+      } else {
+        // No site ID - show site selector
+        document.getElementById('site-selector-screen').style.display = 'flex'
+        document.getElementById('dashboard-content').style.display = 'none'
+        fetchAvailableSites()
+      }
+    })
+  </script>
+  <style>
+    :root {
+      --bg-primary: #1a1f2e;
+      --bg-secondary: #242938;
+      --bg-tertiary: #2d3344;
+      --text-primary: #ffffff;
+      --text-secondary: #9ca3af;
+      --text-muted: #6b7280;
+      --accent: #818cf8;
+      --accent-hover: #6366f1;
+      --success: #10b981;
+      --border: #374151;
+      --chart-line: #818cf8;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    /* ===== Classes referenced by innerHTML (JS-rendered) ===== */
+    /* Site selector states */
+    .site-selector-loading,
+    .site-selector-error,
+    .site-selector-empty {
+      display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; text-align: center; gap: 1rem;
+      color: var(--text-muted);
+    }
+    .site-selector-error button,
+    .site-selector-empty button {
+      border: none; padding: 0.5rem 1.5rem; border-radius: 0.375rem; cursor: pointer; font-size: 0.875rem; margin-top: 0.5rem;
+      background: var(--accent);
+      color: white;
+    }
+    .site-selector-empty h2 {
+      font-size: 1.125rem; line-height: 1.75rem; margin: 0;
+      color: var(--text-primary);
+    }
+    .site-selector-grid {
+      display: flex; flex-direction: column; gap: 0.75rem;
+    }
+    .site-card {
+      display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: 0.5rem; cursor: pointer; transition: all 150ms; text-align: left; width: 100%;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+    }
+    .site-card:hover {
+      background: var(--bg-tertiary);
+      border-color: var(--accent);
+    }
+    .site-card-icon {
+      width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem;
+      background: var(--bg-tertiary);
+      color: var(--accent);
+    }
+    .site-card-info {
+      flex: 1 1 0%; display: flex; flex-direction: column; gap: 0.25rem;
+    }
+    .site-card-name {
+      font-weight: 500;
+      color: var(--text-primary);
+    }
+    .site-card-domain {
+      font-size: 0.75rem; line-height: 1rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      color: var(--text-muted);
+    }
+    .site-card-arrow {
+      color: var(--text-muted);
+    }
+    .site-card:hover .site-card-arrow {
+      color: var(--accent);
+    }
+    /* Data table (used in innerHTML) */
+    .data-table {
+      width: 100%;
+      font-size: 0.8125rem;
+    }
+    .data-table th {
+      text-align: left; font-weight: 500; padding: 0.5rem 0; text-transform: uppercase; letter-spacing: 0.05em;
+      color: var(--text-muted);
+      padding-bottom: 0.5rem;
+      border-bottom: 1px solid var(--border);
+      font-size: 0.6875rem;
+    }
+    .data-table td {
+      border-bottom: 1px solid var(--bg-tertiary);
+      padding: 0.625rem 0;
+    }
+    .data-table tr:last-child td {
+      border-bottom: none;
+    }
+    .data-table .name {
+      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+      color: var(--text-primary);
+      max-width: 180px;
+    }
+    .data-table .value {
+      text-align: right;
+      color: var(--text-secondary);
+    }
+    /* Empty state (used in innerHTML) */
+    .empty-state {
+      text-align: center; padding: 2rem;
+      color: var(--text-muted);
+    }
+    .empty-state p {
+      margin-bottom: 1rem;
+    }
+    .empty-state a {
+      text-decoration: none;
+      color: var(--accent);
+    }
+    .empty-state a:hover {
+      text-decoration: underline;
+    }
+    /* Chart tooltip (used in innerHTML) */
+    .chart-tooltip {
+      display: none; position: absolute; border-radius: 0.5rem; pointer-events: none; z-index: 100;
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border);
+      padding: 0.75rem 1rem;
+      font-size: 0.8125rem;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+      min-width: 140px;
+    }
+    .tooltip-date {
+      font-size: 0.75rem; line-height: 1rem; margin-bottom: 0.5rem; font-weight: 500;
+      color: var(--text-secondary);
+    }
+    .tooltip-row {
+      display: flex; align-items: center; gap: 0.5rem;
+      color: var(--text-secondary);
+      margin: 0.25rem 0;
+    }
+    .tooltip-row strong {
+      margin-left: auto;
+      color: var(--text-primary);
+    }
+    .tooltip-dot {
+      width: 0.5rem; height: 0.5rem; border-radius: 0.125rem;
+    }
+    .tooltip-dot.views {
+      background: var(--accent);
+    }
+    .tooltip-dot.visitors {
+      background: var(--success);
+    }
+    /* Heatmap states (used in innerHTML) */
+    .heatmap-loading, .heatmap-empty {
+      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
+      height: 500px;
+      color: var(--text-muted);
+    }
+    .heatmap-stats {
+      position: absolute; bottom: 1rem; right: 1rem; padding: 0.5rem 1rem; border-radius: 0.25rem; font-size: 0.75rem; color: white;
+      background: rgba(0,0,0,0.7);
+    }
+    /* Heatmap panel (used in innerHTML) */
+    .heatmap-panel {
+      border-radius: 0.5rem; padding: 1rem;
+      background: var(--bg-secondary);
+    }
+    .heatmap-panel h3 {
+      font-size: 0.875rem; font-weight: 500; margin-bottom: 1rem;
+      color: var(--text-primary);
+    }
+    /* Scroll heatmap (used in innerHTML) */
+    .scroll-heatmap {
+      padding: 1rem;
+    }
+    .scroll-stats {
+      display: flex; gap: 2rem; margin-bottom: 1.5rem;
+    }
+    .scroll-stat {
+      display: flex; flex-direction: column;
+    }
+    .scroll-stat-value {
+      font-size: 1.875rem; line-height: 2.25rem; font-weight: 600;
+      color: var(--text-primary);
+    }
+    .scroll-stat-label {
+      font-size: 0.75rem; line-height: 1rem;
+      color: var(--text-muted);
+    }
+    .scroll-bars {
+      display: flex; flex-direction: column; gap: 0.5rem;
+    }
+    .scroll-bar-row {
+      display: flex; align-items: center; gap: 0.75rem;
+    }
+    .scroll-depth-label {
+      font-size: 0.75rem; text-align: right;
+      width: 40px;
+      color: var(--text-muted);
+    }
+    .scroll-bar-track {
+      flex: 1 1 0%; border-radius: 0.25rem; overflow: hidden;
+      height: 24px;
+      background: var(--bg-tertiary);
+    }
+    .scroll-bar-fill {
+      height: 100%; border-radius: 0.25rem; transition: width 300ms;
+    }
+    .scroll-reach-label {
+      font-size: 0.8125rem; font-weight: 500;
+      width: 50px;
+      color: var(--text-primary);
+    }
+    .scroll-legend {
+      display: flex; justify-content: center; gap: 1.5rem; margin-top: 1.5rem; padding-top: 1rem; font-size: 0.75rem;
+      border-top: 1px solid var(--border);
+      color: var(--text-muted);
+    }
+    .legend-dot {
+      display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 0.125rem; margin-right: 0.375rem;
+    }
+    /* Element list (used in innerHTML) */
+    .element-list {
+      display: flex; flex-direction: column; gap: 0.75rem;
+    }
+    .element-item {
+      display: flex; flex-direction: column; gap: 0.375rem;
+    }
+    .element-info {
+      display: flex; align-items: center; gap: 0.5rem;
+    }
+    .element-tag {
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; border-radius: 0.25rem;
+      font-size: 0.6875rem;
+      color: var(--accent);
+      background: var(--bg-tertiary);
+      padding: 0.125rem 0.375rem;
+    }
+    .element-selector {
+      font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+      color: var(--text-secondary);
+      max-width: 200px;
+    }
+    .element-stats {
+      display: flex; align-items: center; gap: 0.5rem;
+    }
+    .element-bar-track {
+      flex: 1 1 0%; border-radius: 0.125rem; overflow: hidden;
+      height: 6px;
+      background: var(--bg-tertiary);
+    }
+    .element-bar-fill {
+      height: 100%; border-radius: 0.125rem;
+      background: var(--accent);
+    }
+    .element-clicks {
+      font-size: 0.75rem; font-weight: 500; text-align: right;
+      color: var(--text-primary);
+      min-width: 40px;
+    }
+    /* Insight list (used in innerHTML) */
+    .insight-list {
+      display: flex; flex-direction: column; gap: 0.75rem;
+    }
+    .insight-item {
+      display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0;
+      border-bottom: 1px solid var(--bg-tertiary);
+    }
+    .insight-item:last-child {
+      border-bottom: none;
+    }
+    .insight-label {
+      font-size: 0.8125rem;
+      color: var(--text-secondary);
+    }
+    .insight-value {
+      font-size: 0.875rem; font-weight: 500;
+      color: var(--text-primary);
+    }
+    /* text-muted helper (used in innerHTML) */
+    .text-muted {
+      font-size: 0.8125rem;
+      color: var(--text-muted);
+    }
+    /* View tab active state (toggled by JS classList) */
+    .view-tab.active {
+      background: var(--accent);
+      border-color: var(--accent);
+      color: white;
+    }
+    /* Heatmap mode button active state (toggled by JS classList) */
+    .heatmap-mode-btn.active {
+      background: var(--accent);
+      color: white;
+    }
+    /* Tab button active state (toggled by JS classList) */
+    .tab-btn.active {
+      color: var(--accent);
+      border-bottom-color: var(--accent);
+    }
+    /* Pulse animation */
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+    /* Responsive */
+    @media (max-width: 1024px) {
+      .summary-stats {
+        grid-template-columns: repeat(3, 1fr);
+      }
+      .data-grid {
+        grid-template-columns: 1fr;
+      }
+      .heatmap-container {
+        grid-template-columns: 1fr;
+      }
+      .heatmap-sidebar {
+        order: -1;
+      }
+    }
+    @media (max-width: 640px) {
+      .summary-stats {
+        grid-template-columns: repeat(2, 1fr);
+      }
+      .header {
+        flex-direction: column;
+        gap: 1rem;
+      }
+      .heatmap-controls {
+        flex-direction: column;
+        align-items: stretch;
+      }
+      .heatmap-controls select {
+        max-width: none;
+      }
+    }
+  </style>
+</head>
+<body class="font-sans leading-normal min-h-screen" style="background:var(--bg-primary);color:var(--text-primary);">
+  <!-- Site Selector Screen (shown when no siteId) -->
+  <div id="site-selector-screen" class="min-h-screen flex flex-col items-center justify-center p-8" style="display:none">
+    <div class="text-center mb-8">
+      <h1 class="text-2xl font-semibold mb-2" style="color:var(--text-primary);">Analytics Dashboard</h1>
+      <p class="text-sm" style="color:var(--text-secondary);">Select a site to view analytics</p>
+    </div>
+    <div id="site-selector-container" class="w-full max-w-[600px]">
+      <div class="site-selector-loading">
+        <div class="spinner"></div>
+        <p>Loading sites...</p>
+      </div>
+    </div>
+  </div>
+  <!-- Dashboard Content -->
+  <div id="dashboard-content" class="max-w-[1400px] mx-auto p-4" style="display:none">
+    <!-- Header -->
+    <header class="header flex justify-between items-center py-4 border-b border-border mb-4">
+      <div class="site-selector flex items-center gap-2">
+        <select class="py-2 px-4 rounded-md text-sm cursor-pointer" style="background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-primary);">
+          <option>{{ siteName }}</option>
+        </select>
+      </div>
+      <div class="flex items-center gap-4">
+        <div class="flex items-center gap-2 py-2 px-4 rounded-full text-sm" style="background:var(--bg-secondary);">
+          <span class="w-2 h-2 rounded-full" style="background:var(--success);animation:pulse 2s infinite;"></span>
+          <span id="realtime-count">0 current visitors</span>
+        </div>
+        <button class="icon-btn" title="Notifications">
+          <Icon name="bell" size="20" />
+        </button>
+        <button class="icon-btn" title="Settings">
+          <Icon name="settings" size="20" />
+        </button>
+      </div>
+    </header>
+    <!-- View Tabs -->
+    <div class="flex gap-2 mb-4">
+      <button class="view-tab py-2 px-4 rounded-md text-sm cursor-pointer transition-all duration-150 border active" style="background:var(--bg-secondary);border-color:var(--border);color:var(--text-secondary);" data-view="dashboard" onclick="switchView('dashboard')">
+        <Icon name="bar-chart-3" size="16" class="inline align-middle mr-1.5" />
+        Dashboard
+      </button>
+      <button class="view-tab py-2 px-4 rounded-md text-sm cursor-pointer transition-all duration-150 border" style="background:var(--bg-secondary);border-color:var(--border);color:var(--text-secondary);" data-view="heatmap" onclick="switchView('heatmap')">
+        <Icon name="flame" size="16" class="inline align-middle mr-1.5" />
+        Heatmaps
+      </button>
+    </div>
+    <!-- Dashboard View -->
+    <div id="dashboard-view">
+    <!-- Date Range Bar -->
+    <div class="flex items-center gap-4 py-3 mb-4">
+      <select class="py-2 px-4 rounded-md text-sm cursor-pointer" style="background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-primary);">
+        <option>Last 30 days</option>
+        <option>Last 7 days</option>
+        <option>Today</option>
+        <option>Yesterday</option>
+        <option>Last 12 months</option>
+        <option>Custom range</option>
+      </select>
+      <span class="text-sm" style="color:var(--text-secondary);">compared to</span>
+      <select class="py-2 px-4 rounded-md text-sm cursor-pointer" style="background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-primary);">
+        <option>No comparison</option>
+        <option>Previous period</option>
+        <option>Same period last year</option>
+      </select>
+      <select class="py-2 px-4 rounded-md text-sm cursor-pointer" style="background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-primary);">
+        <option>Auto</option>
+        <option>Hourly</option>
+        <option>Daily</option>
+        <option>Monthly</option>
+      </select>
+    </div>
+    <!-- Summary Stats -->
+    <div class="summary-stats grid grid-cols-6 gap-4 mb-6">
+      <div class="stat-card text-center" style="background:var(--bg-secondary);padding:1.25rem;border-radius:8px;">
+        <div class="text-3xl font-semibold mb-1" style="color:var(--text-primary);" id="stat-realtime">0</div>
+        <div class="text-xs uppercase tracking-wider" style="color:var(--text-secondary);">Realtime</div>
+      </div>
+      <div class="stat-card text-center" style="background:var(--bg-secondary);padding:1.25rem;border-radius:8px;">
+        <div class="text-3xl font-semibold mb-1" style="color:var(--text-primary);" id="stat-people">0</div>
+        <div class="text-xs uppercase tracking-wider" style="color:var(--text-secondary);">People</div>
+      </div>
+      <div class="stat-card text-center" style="background:var(--bg-secondary);padding:1.25rem;border-radius:8px;">
+        <div class="text-3xl font-semibold mb-1" style="color:var(--text-primary);" id="stat-views">0</div>
+        <div class="text-xs uppercase tracking-wider" style="color:var(--text-secondary);">Views</div>
+      </div>
+      <div class="stat-card text-center" style="background:var(--bg-secondary);padding:1.25rem;border-radius:8px;">
+        <div class="text-3xl font-semibold mb-1" style="color:var(--text-primary);" id="stat-avgtime">00:00</div>
+        <div class="text-xs uppercase tracking-wider" style="color:var(--text-secondary);">Avg time</div>
+      </div>
+      <div class="stat-card text-center" style="background:var(--bg-secondary);padding:1.25rem;border-radius:8px;">
+        <div class="text-3xl font-semibold mb-1" style="color:var(--text-primary);" id="stat-bounce">0%</div>
+        <div class="text-xs uppercase tracking-wider" style="color:var(--text-secondary);">Bounce</div>
+      </div>
+      <div class="stat-card text-center" style="background:var(--bg-secondary);padding:1.25rem;border-radius:8px;">
+        <div class="text-3xl font-semibold mb-1" style="color:var(--text-primary);" id="stat-events">0</div>
+        <div class="text-xs uppercase tracking-wider" style="color:var(--text-secondary);">Events</div>
+      </div>
+    </div>
+    <!-- Time Series Chart -->
+    <div class="rounded-lg p-6 mb-6 min-h-[250px] relative" style="background:var(--bg-secondary);">
+      <canvas id="timeSeriesChart"></canvas>
+      <div id="chartTooltip" class="chart-tooltip"></div>
+    </div>
+    <!-- Data Grid - Row 1 -->
+    <div class="data-grid grid grid-cols-2 gap-4 mb-6">
+      <!-- Pages -->
+      <div class="rounded-lg p-4" style="background:var(--bg-secondary);">
+        <div class="panel-header flex items-center gap-2 mb-4">
+          <span class="panel-title text-sm font-medium" style="color:var(--text-primary);">Pages</span>
+        </div>
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>Path</th>
+              <th style="text-align:right">Entries</th>
+              <th style="text-align:right">Visitors</th>
+              <th style="text-align:right">Views</th>
+            </tr>
+          </thead>
+          <tbody id="pages-body">
+            <tr>
+              <td colspan="4" style="text-align:center;color:var(--text-muted);padding:1rem">Loading...</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <!-- Referrers / Sources -->
+      <div class="rounded-lg p-4" style="background:var(--bg-secondary);">
+        <div class="tabs flex gap-1 border-b border-border mb-4">
+          <button class="tab-btn active">Referrers</button>
+          <button class="tab-btn" data-tab="sources">Sources</button>
+        </div>
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>Source</th>
+              <th style="text-align:right">Visitors</th>
+              <th style="text-align:right">Views</th>
+            </tr>
+          </thead>
+          <tbody id="referrers-body">
+            <tr>
+              <td colspan="3" style="text-align:center;color:var(--text-muted);padding:1rem">Loading...</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <!-- Data Grid - Row 2 -->
+    <div class="data-grid grid grid-cols-2 gap-4 mb-6">
+      <!-- Device Types / OS -->
+      <div class="rounded-lg p-4" style="background:var(--bg-secondary);">
+        <div class="tabs flex gap-1 border-b border-border mb-4">
+          <button class="tab-btn active" data-tab="types">Device Types</button>
+          <button class="tab-btn" data-tab="os">OS</button>
+        </div>
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>Type</th>
+              <th style="text-align:right">Visitors</th>
+            </tr>
+          </thead>
+          <tbody id="devices-body">
+            <tr>
+              <td colspan="2" style="text-align:center;color:var(--text-muted);padding:1rem">Loading...</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <!-- Browsers -->
+      <div class="rounded-lg p-4" style="background:var(--bg-secondary);">
+        <div class="panel-header flex items-center gap-2 mb-4">
+          <span class="panel-title text-sm font-medium" style="color:var(--text-primary);">Browsers</span>
+        </div>
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>Browser</th>
+              <th style="text-align:right">Visitors</th>
+            </tr>
+          </thead>
+          <tbody id="browsers-body">
+            <tr>
+              <td colspan="2" style="text-align:center;color:var(--text-muted);padding:1rem">Loading...</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <!-- Data Grid - Row 3 -->
+    <div class="data-grid grid grid-cols-2 gap-4 mb-6">
+      <!-- Countries / Regions / Cities -->
+      <div class="rounded-lg p-4" style="background:var(--bg-secondary);">
+        <div class="tabs flex gap-1 border-b border-border mb-4">
+          <button class="tab-btn active" data-tab="countries">Countries</button>
+          <button class="tab-btn" data-tab="regions">Regions</button>
+          <button class="tab-btn" data-tab="cities">Cities</button>
+        </div>
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>Country</th>
+              <th style="text-align:right">Visitors</th>
+            </tr>
+          </thead>
+          <tbody id="countries-body">
+            <tr>
+              <td colspan="2" style="text-align:center;color:var(--text-muted);padding:1rem">Loading...</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <!-- Campaigns -->
+      <div class="rounded-lg p-4" style="background:var(--bg-secondary);">
+        <div class="tabs flex gap-1 border-b border-border mb-4">
+          <button class="tab-btn active" data-tab="campaign">Campaign</button>
+          <button class="tab-btn" data-tab="source">Source</button>
+          <button class="tab-btn" data-tab="medium">Medium</button>
+          <button class="tab-btn" data-tab="content">Content</button>
+          <button class="tab-btn" data-tab="term">Term</button>
+        </div>
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>Campaign</th>
+              <th style="text-align:right">Visitors</th>
+              <th style="text-align:right">Views</th>
+            </tr>
+          </thead>
+          <tbody id="campaigns-body">
+            <tr>
+              <td colspan="3" style="text-align:center;color:var(--text-muted);padding:1rem">Loading...</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <!-- Events Section -->
+    <div class="rounded-lg p-6" style="background:var(--bg-secondary);">
+      <div class="flex justify-between items-center mb-4">
+        <span class="text-sm font-medium">Events</span>
+      </div>
+      <div id="events-container">
+        <div class="empty-state">
+          <p>Loading events...</p>
+        </div>
+      </div>
+    </div>
+    </div><!-- End Dashboard View -->
+    <!-- Heatmap View -->
+    <div id="heatmap-view" style="display:none">
+      <div class="heatmap-container grid gap-4" style="grid-template-columns:1fr 320px;">
+        <div class="heatmap-main flex flex-col gap-4">
+          <!-- Controls -->
+          <div class="heatmap-controls flex items-center gap-4 p-4 rounded-lg" style="background:var(--bg-secondary);">
+            <select id="heatmap-page-select" class="flex-1 max-w-[400px] py-2 px-4 rounded-md text-sm" style="background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-primary);" onchange="selectHeatmapPage(this.value)">
+              <option value="">Select a page...</option>
+            </select>
+            <div class="flex gap-1 p-1 rounded-md" style="background:var(--bg-tertiary);">
+              <button class="heatmap-mode-btn py-2 px-4 rounded text-[0.8125rem] cursor-pointer transition-all duration-150 border-none active" style="background:transparent;color:var(--text-secondary);" data-mode="click" onclick="switchHeatmapMode('click')">
+                <Icon name="mouse-pointer-click" size="14" class="inline align-middle mr-1" />
+                Clicks
+              </button>
+              <button class="heatmap-mode-btn py-2 px-4 rounded text-[0.8125rem] cursor-pointer transition-all duration-150 border-none" style="background:transparent;color:var(--text-secondary);" data-mode="scroll" onclick="switchHeatmapMode('scroll')">
+                <Icon name="arrow-down" size="14" class="inline align-middle mr-1" />
+                Scroll
+              </button>
+            </div>
+            <button class="icon-btn" title="Refresh" onclick="fetchHeatmapData()">
+              <Icon name="refresh-cw" size="18" />
+            </button>
+          </div>
+          <!-- Visualization -->
+          <div class="rounded-lg p-4 min-h-[540px]" style="background:var(--bg-secondary);">
+            <div id="heatmap-viz">
+              <div class="heatmap-empty">
+                <Icon name="flame" size="48" />
+                <p>Select a page to view its heatmap</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Sidebar -->
+        <div class="heatmap-sidebar flex flex-col gap-4" id="heatmap-sidebar">
+          <div class="heatmap-panel">
+            <h3>Getting Started</h3>
+            <p class="text-muted">Select a page from the dropdown to view click or scroll heatmaps. Heatmap data is collected from user interactions on your site.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div><!-- End dashboard-content -->
+  <script>
+    // Tab switching logic
+    document.querySelectorAll('.tabs').forEach(tabContainer => {
+      const buttons = tabContainer.querySelectorAll('.tab-btn')
+      buttons.forEach(btn => {
+        btn.addEventListener('click', () => {
+          buttons.forEach(b => b.classList.remove('active'))
+          btn.classList.add('active')
+        })
+      })
+    })
+    // Handle window resize for chart
+    window.addEventListener('resize', () => {
+      if (timeSeriesData.length) renderChart()
+    })
+  </script>
+</body>
+</html>