From 8287a38b4303321b0af42f4a0d8bf5ccae1a8654 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 11:06:41 +0100
Subject: [PATCH 001/428] chore: add 429 errors

---
 docs/polish-audit.md | 80 ++++++++++++++++++++++++++++++++++++++++++++
 lib/api/client.ts    |  9 +++++
 lib/swr/dashboard.ts | 11 +++++-
 package-lock.json    |  8 ++---
 package.json         |  2 +-
 5 files changed, 104 insertions(+), 6 deletions(-)
 create mode 100644 docs/polish-audit.md

diff --git a/docs/polish-audit.md b/docs/polish-audit.md
new file mode 100644
index 0000000..9b6abcb
--- /dev/null
+++ b/docs/polish-audit.md
@@ -0,0 +1,80 @@
+# Pulse Polish Audit
+
+**Date:** 2026-03-16
+**Version:** 0.15.0-alpha
+
+## Current State
+
+Pulse is a mature product — 55+ routes, 156 API handlers, 50 migrations, 8 background workers, 3 third-party integrations. The codebase is clean with zero TODO/FIXME comments. Recent work has focused on UX refinements: empty state CTAs, animated number transitions, inline bar charts, and mobile responsiveness fixes.
+
+## Polish Opportunities
+
+### High Impact
+
+#### ~~1. Custom 404 Page~~ ✅ Already Done
+- Branded 404 page exists at `app/not-found.tsx` with "Go back home" and "View FAQ" CTAs
+
+#### 2. Rate Limit (429) UX Feedback
+- **Issue:** When rate limited, API requests fail silently with no user feedback
+- **Effort:** Low
+- **Action:** Catch 429 responses in the API client and show a toast with retry timing (`Retry-After` header)
+
+### Medium Impact
+
+#### 3. Export Progress Indicator
+- **Issue:** PDF/Excel exports have no progress bar and can appear frozen on large datasets
+- **Effort:** Low
+- **Action:** Add a determinate or indeterminate progress bar inside `ExportModal.tsx`
+
+#### 4. Filter Application Feedback
+- **Issue:** Applying filters has no loading/transition indicator
+- **Effort:** Low
+- **Action:** Show a subtle loading state on the dashboard when filters change and data is refetching
+
+#### 5. Inline Form Validation
+- **Issue:** All validation errors go to toasts only; no inline field-level error messages
+- **Effort:** Medium
+- **Action:** Add inline error messages below form fields (funnel creation, goal creation, site settings)
+
+#### 6. Accessibility: Modal Focus Trapping
+- **Issue:** Modals don't trap focus, breaking keyboard-only navigation
+- **Effort:** Medium
+- **Action:** Implement focus trapping in modal components (VerificationModal, ExportModal, settings modals)
+
+#### 7. Accessibility: ARIA Live Regions
+- **Issue:** Real-time visitor count updates aren't announced to screen readers
+- **Effort:** Low
+- **Action:** Add `aria-live="polite"` to `RealtimeVisitors.tsx` and other auto-updating elements
+
+#### 8. Table Pagination Loading
+- **Issue:** No loading indicator when paginating through table data
+- **Effort:** Low
+- **Action:** Show a loading spinner or skeleton overlay when fetching the next page of results
+
+### Low Impact
+
+#### 9. Remove Unused `axios` Dependency
+- **Issue:** `apiRequest` is the actual HTTP client; `axios` is dead weight in the bundle
+- **Effort:** Trivial
+- **Action:** `npm uninstall axios` and verify no imports reference it
+
+#### 10. PWA Service Worker Caching
+- **Issue:** `@ducanh2912/next-pwa` is configured but no offline caching strategy exists
+- **Effort:** Medium
+- **Action:** Define a caching strategy for static assets and API responses, or remove the PWA dependency
+
+#### 11. Image Lazy Loading
+- **Issue:** Table/list images (favicons, flags) don't use `loading="lazy"`
+- **Effort:** Low
+- **Action:** Add `loading="lazy"` to images in referrer lists, country tables, and similar components
+
+#### 12. OpenAPI Specification
+- **Issue:** Backend has no Swagger/OpenAPI doc; README serves as the only API documentation
+- **Effort:** High
+- **Action:** Generate an OpenAPI spec from Go handler annotations or write one manually
+
+## Additional Notes
+
+- **No i18n** — English only. Worth planning if expanding to international markets.
+- **Test coverage** — 16 backend test files cover core logic well, but GSC/BunnyCDN sync and report delivery e2e are gaps.
+- **Chart.tsx is 35KB** — A candidate for splitting into sub-components eventually.
diff --git a/lib/api/client.ts b/lib/api/client.ts
index 5014fc5..4d348e5 100644
--- a/lib/api/client.ts
+++ b/lib/api/client.ts
@@ -335,6 +335,15 @@ async function apiRequest<T>(
     }
 
     const errorBody = await response.json().catch(() => ({}))
+
+    // * Capture Retry-After header on 429 so callers can show precise timing
+    if (response.status === 429) {
+      const retryAfter = response.headers.get('Retry-After')
+      if (retryAfter) {
+        errorBody.retryAfter = parseInt(retryAfter, 10)
+      }
+    }
+
     const message = authMessageFromStatus(response.status)
     throw new ApiError(message, response.status, errorBody)
   }
diff --git a/lib/swr/dashboard.ts b/lib/swr/dashboard.ts
index 9dc62e1..8b15a85 100644
--- a/lib/swr/dashboard.ts
+++ b/lib/swr/dashboard.ts
@@ -2,6 +2,7 @@
 // * Implements stale-while-revalidate pattern for efficient data updates
 
 import useSWR from 'swr'
+import { toast } from '@ciphera-net/ui'
 import {
   getDashboard,
   getDashboardOverview,
@@ -105,7 +106,15 @@ const dashboardSWRConfig = {
   errorRetryInterval: 5000,
   // * Don't retry on 429 (rate limit) or 401/403 (auth) — retrying makes it worse
   onErrorRetry: (error: any, _key: string, _config: any, revalidate: any, { retryCount }: { retryCount: number }) => {
-    if (error?.status === 429 || error?.status === 401 || error?.status === 403) return
+    if (error?.status === 429) {
+      const retryAfter = error?.data?.retryAfter
+      const message = retryAfter
+        ? `Too many requests. Please try again in ${retryAfter} seconds.`
+        : 'Too many requests. Please wait a moment and try again.'
+      toast.error(message, { id: 'rate-limit' })
+      return
+    }
+    if (error?.status === 401 || error?.status === 403) return
     if (retryCount >= 3) return
     setTimeout(() => revalidate({ retryCount }), 5000 * Math.pow(2, retryCount))
   },
diff --git a/package-lock.json b/package-lock.json
index 5c13c9c..5148ded 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "pulse-frontend",
       "version": "0.15.0-alpha",
       "dependencies": {
-        "@ciphera-net/ui": "^0.2.6",
+        "@ciphera-net/ui": "^0.2.7",
         "@ducanh2912/next-pwa": "^10.2.9",
         "@phosphor-icons/react": "^2.1.10",
         "@simplewebauthn/browser": "^13.2.2",
@@ -1667,9 +1667,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.2.6",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.2.6/85b0deed2ec86461502209b098f64e028b49e63e",
-      "integrity": "sha512-mNlK4FNwWAYiScMcyTP7Y5EEZjSUf8H63EdQUlcTEWoFo4km5ZPrlJcfPsbUsN65YB9OtT+iAiu/XRG4dI0/Gg==",
+      "version": "0.2.7",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.2.7/f5f170676cdd1bf53c091a0baa98c2d55a7c999f",
+      "integrity": "sha512-yvag9cYfX6c8aZ3bKI+i3l9ALJBXg7XL6soIjd65F7NyZN+1mEo1Fb+ARfWgjdNa5HjfexAnEOOVpjwMNPFCfg==",
       "dependencies": {
         "@phosphor-icons/react": "^2.1.10",
         "class-variance-authority": "^0.7.1",
diff --git a/package.json b/package.json
index ea1f781..cf8b313 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.2.6",
+    "@ciphera-net/ui": "^0.2.7",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@phosphor-icons/react": "^2.1.10",
     "@simplewebauthn/browser": "^13.2.2",
-- 
2.49.1


From ed865c9a6fa5a23f15897c6164010420e16132b1 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 11:27:31 +0100
Subject: [PATCH 002/428] chore: remove unused axios dependency

All HTTP calls use the native fetch-based apiRequest client.
---
 package-lock.json | 81 -----------------------------------------------
 package.json      |  1 -
 2 files changed, 82 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5148ded..b0a4afe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,6 @@
         "@stripe/react-stripe-js": "^5.6.0",
         "@stripe/stripe-js": "^8.7.0",
         "@tanstack/react-virtual": "^3.13.21",
-        "axios": "^1.13.2",
         "class-variance-authority": "^0.7.1",
         "cobe": "^0.6.5",
         "country-flag-icons": "^1.6.4",
@@ -7066,12 +7065,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/asynckit": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "license": "MIT"
-    },
     "node_modules/at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -7143,17 +7136,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/axios": {
-      "version": "1.13.5",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.5.tgz",
-      "integrity": "sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q==",
-      "license": "MIT",
-      "dependencies": {
-        "follow-redirects": "^1.15.11",
-        "form-data": "^4.0.5",
-        "proxy-from-env": "^1.1.0"
-      }
-    },
     "node_modules/axobject-query": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
@@ -7641,18 +7623,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/combined-stream": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "license": "MIT",
-      "dependencies": {
-        "delayed-stream": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/comma-separated-tokens": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
@@ -8152,15 +8122,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/delayed-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -9249,26 +9210,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/follow-redirects": {
-      "version": "1.15.11",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
-      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/RubenVerborgh"
-        }
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": ">=4.0"
-      },
-      "peerDependenciesMeta": {
-        "debug": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/for-each": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
@@ -9284,22 +9225,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/form-data": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
-      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
-      "license": "MIT",
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "es-set-tostringtag": "^2.1.0",
-        "hasown": "^2.0.2",
-        "mime-types": "^2.1.12"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/frac": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
@@ -12477,12 +12402,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/proxy-from-env": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-      "license": "MIT"
-    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
diff --git a/package.json b/package.json
index cf8b313..cda1d08 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,6 @@
     "@stripe/react-stripe-js": "^5.6.0",
     "@stripe/stripe-js": "^8.7.0",
     "@tanstack/react-virtual": "^3.13.21",
-    "axios": "^1.13.2",
     "class-variance-authority": "^0.7.1",
     "cobe": "^0.6.5",
     "country-flag-icons": "^1.6.4",
-- 
2.49.1


From e4291c44a8ddf933e2c60aac22b3f24a30db416b Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 11:32:17 +0100
Subject: [PATCH 003/428] feat: add progress bar to export modal

Show step-by-step progress during PDF/XLSX exports with percentage,
stage label, and animated orange bar. Yields to UI thread between
stages so the browser can repaint.
---
 components/dashboard/ExportModal.tsx | 33 ++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/components/dashboard/ExportModal.tsx b/components/dashboard/ExportModal.tsx
index 39566d1..87f3fc1 100644
--- a/components/dashboard/ExportModal.tsx
+++ b/components/dashboard/ExportModal.tsx
@@ -51,6 +51,7 @@ export default function ExportModal({ isOpen, onClose, data, stats, topPages, to
   const [filename, setFilename] = useState(`pulse_export_${formatDateISO(new Date())}`)
   const [includeHeader, setIncludeHeader] = useState(true)
   const [isExporting, setIsExporting] = useState(false)
+  const [exportProgress, setExportProgress] = useState({ step: 0, total: 1, label: '' })
   const [selectedFields, setSelectedFields] = useState<Record<keyof DailyStat, boolean>>({
     date: true,
     pageviews: true,
@@ -63,8 +64,15 @@ export default function ExportModal({ isOpen, onClose, data, stats, topPages, to
     setSelectedFields((prev) => ({ ...prev, [field]: checked }))
   }
 
+  // Yield to the UI thread so the browser can paint progress updates
+  const updateProgress = useCallback(async (step: number, total: number, label: string) => {
+    setExportProgress({ step, total, label })
+    await new Promise(resolve => setTimeout(resolve, 0))
+  }, [])
+
   const handleExport = () => {
     setIsExporting(true)
+    setExportProgress({ step: 0, total: 1, label: 'Preparing...' })
     // Let the browser paint the loading state before starting heavy work
     requestAnimationFrame(() => {
       setTimeout(async () => {
@@ -100,6 +108,7 @@ export default function ExportModal({ isOpen, onClose, data, stats, topPages, to
             mimeType = 'text/csv;charset=utf-8;'
             extension = 'csv'
           } else if (format === 'xlsx') {
+            await updateProgress(1, 2, 'Building spreadsheet...')
             const ws = XLSX.utils.json_to_sheet(exportData)
             const wb = XLSX.utils.book_new()
             XLSX.utils.book_append_sheet(wb, ws, 'Data')
@@ -128,9 +137,12 @@ export default function ExportModal({ isOpen, onClose, data, stats, topPages, to
             onClose()
             return
           } else if (format === 'pdf') {
+            const totalSteps = 3 + (topPages?.length ? 1 : 0) + (topReferrers?.length ? 1 : 0) + (campaigns?.length ? 1 : 0)
+            let currentStep = 0
             const doc = new jsPDF()
 
             // Header Section
+            await updateProgress(++currentStep, totalSteps, 'Building header...')
             try {
               // Logo
               const logoData = await loadImage('/pulse_icon_no_margins.png')
@@ -195,6 +207,7 @@ export default function ExportModal({ isOpen, onClose, data, stats, topPages, to
               startY = 65 // Move table down
             }
 
+            await updateProgress(++currentStep, totalSteps, 'Generating data table...')
             // Check if data is hourly (same date for multiple rows)
             const isHourly = data.length > 1 && data[0].date.split('T')[0] === data[1].date.split('T')[0]
 
@@ -258,6 +271,7 @@ export default function ExportModal({ isOpen, onClose, data, stats, topPages, to
 
             // Top Pages Table
             if (topPages && topPages.length > 0) {
+              await updateProgress(++currentStep, totalSteps, 'Adding top pages...')
               // Check if we need a new page
               if (finalY + 40 > doc.internal.pageSize.height) {
                   doc.addPage()
@@ -286,6 +300,7 @@ export default function ExportModal({ isOpen, onClose, data, stats, topPages, to
 
             // Top Referrers Table
             if (topReferrers && topReferrers.length > 0) {
+              await updateProgress(++currentStep, totalSteps, 'Adding top referrers...')
                // Check if we need a new page
                if (finalY + 40 > doc.internal.pageSize.height) {
                   doc.addPage()
@@ -315,6 +330,7 @@ export default function ExportModal({ isOpen, onClose, data, stats, topPages, to
 
             // Campaigns Table
             if (campaigns && campaigns.length > 0) {
+              await updateProgress(++currentStep, totalSteps, 'Adding campaigns...')
               if (finalY + 40 > doc.internal.pageSize.height) {
                 doc.addPage()
                 finalY = 20
@@ -341,6 +357,7 @@ export default function ExportModal({ isOpen, onClose, data, stats, topPages, to
               })
             }
 
+            await updateProgress(totalSteps, totalSteps, 'Saving PDF...')
             doc.save(`${filename || 'export'}.pdf`)
             onClose()
             return
@@ -450,6 +467,22 @@ export default function ExportModal({ isOpen, onClose, data, stats, topPages, to
           </div>
         )}
 
+        {/* Progress Bar */}
+        {isExporting && (
+          <div className="space-y-2 pt-2">
+            <div className="flex items-center justify-between text-xs text-neutral-500 dark:text-neutral-400">
+              <span>{exportProgress.label}</span>
+              <span>{Math.round((exportProgress.step / exportProgress.total) * 100)}%</span>
+            </div>
+            <div className="h-1.5 w-full rounded-full bg-neutral-100 dark:bg-neutral-800 overflow-hidden">
+              <div
+                className="h-full rounded-full bg-brand-orange transition-all duration-300 ease-out"
+                style={{ width: `${(exportProgress.step / exportProgress.total) * 100}%` }}
+              />
+            </div>
+          </div>
+        )}
+
         {/* Actions */}
         <div className="flex justify-end gap-3 pt-4">
           <Button variant="secondary" onClick={onClose} disabled={isExporting}>
-- 
2.49.1


From be1d9a2f46a55b6e8874377b0da31d968220ab35 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 11:39:28 +0100
Subject: [PATCH 004/428] feat: add shimmer bar when dashboard is refetching
 after filter change

Shows a thin animated orange bar below the filter bar while SWR
revalidates, so users know their filter was applied. Hidden on
initial load where the skeleton already provides feedback.
---
 app/sites/[id]/page.tsx | 9 ++++++++-
 tailwind.config.ts      | 5 +++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx
index 9a0557b..a89999f 100644
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -237,7 +237,7 @@ export default function SiteDashboardPage() {
   // Single dashboard request replaces focused hooks (overview, pages, locations,
   // devices, referrers, goals). The backend runs all queries in parallel
   // and caches the result in Redis for efficient data loading.
-  const { data: dashboard, isLoading: dashboardLoading, error: dashboardError } = useDashboard(siteId, dateRange.start, dateRange.end, interval, filtersParam || undefined)
+  const { data: dashboard, isLoading: dashboardLoading, isValidating: dashboardValidating, error: dashboardError } = useDashboard(siteId, dateRange.start, dateRange.end, interval, filtersParam || undefined)
   const { data: realtimeData } = useRealtime(siteId)
   const { data: prevStats } = useStats(siteId, prevRange.start, prevRange.end)
   const { data: prevDailyStats } = useDailyStats(siteId, prevRange.start, prevRange.end, interval)
@@ -531,6 +531,13 @@ export default function SiteDashboardPage() {
         <FilterBar filters={filters} onRemove={handleRemoveFilter} onClear={handleClearFilters} />
       </div>
 
+      {/* Refetch indicator — visible when SWR is revalidating with stale data on screen */}
+      {dashboardValidating && !dashboardLoading && (
+        <div className="h-0.5 w-full rounded-full bg-neutral-100 dark:bg-neutral-800 overflow-hidden mb-2">
+          <div className="h-full w-1/3 rounded-full bg-brand-orange animate-[shimmer_1.2s_ease-in-out_infinite]" />
+        </div>
+      )}
+
       {/* Advanced Chart with Integrated Stats */}
       <div className="mb-8">
         <Chart
diff --git a/tailwind.config.ts b/tailwind.config.ts
index e4b09f6..9b05a68 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -27,11 +27,16 @@ const config: Config = {
           '0%': { opacity: '0' },
           '100%': { opacity: '1' },
         },
+        shimmer: {
+          '0%': { transform: 'translateX(-100%)' },
+          '100%': { transform: 'translateX(400%)' },
+        },
       },
       animation: {
         'cell-highlight': 'cell-highlight 0.5s ease forwards',
         'cell-flash': 'cell-flash 0.6s ease forwards',
         'fade-in': 'fade-in 150ms ease-out',
+        shimmer: 'shimmer 1.2s ease-in-out infinite',
       },
       fontFamily: {
         sans: ['var(--font-plus-jakarta-sans)', 'system-ui', 'sans-serif'],
-- 
2.49.1


From ec9f72455a7255a923e03c061f6e89f4b266dfa5 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 11:40:32 +0100
Subject: [PATCH 005/428] chore: remove polish-audit.md from tracking

---
 docs/polish-audit.md | 80 --------------------------------------------
 1 file changed, 80 deletions(-)
 delete mode 100644 docs/polish-audit.md

diff --git a/docs/polish-audit.md b/docs/polish-audit.md
deleted file mode 100644
index 9b6abcb..0000000
--- a/docs/polish-audit.md
+++ /dev/null
@@ -1,80 +0,0 @@
-# Pulse Polish Audit
-
-**Date:** 2026-03-16
-**Version:** 0.15.0-alpha
-
-## Current State
-
-Pulse is a mature product — 55+ routes, 156 API handlers, 50 migrations, 8 background workers, 3 third-party integrations. The codebase is clean with zero TODO/FIXME comments. Recent work has focused on UX refinements: empty state CTAs, animated number transitions, inline bar charts, and mobile responsiveness fixes.
-
-## Polish Opportunities
-
-### High Impact
-
-#### ~~1. Custom 404 Page~~ ✅ Already Done
-- Branded 404 page exists at `app/not-found.tsx` with "Go back home" and "View FAQ" CTAs
-
-#### 2. Rate Limit (429) UX Feedback
-- **Issue:** When rate limited, API requests fail silently with no user feedback
-- **Effort:** Low
-- **Action:** Catch 429 responses in the API client and show a toast with retry timing (`Retry-After` header)
-
-### Medium Impact
-
-#### 3. Export Progress Indicator
-- **Issue:** PDF/Excel exports have no progress bar and can appear frozen on large datasets
-- **Effort:** Low
-- **Action:** Add a determinate or indeterminate progress bar inside `ExportModal.tsx`
-
-#### 4. Filter Application Feedback
-- **Issue:** Applying filters has no loading/transition indicator
-- **Effort:** Low
-- **Action:** Show a subtle loading state on the dashboard when filters change and data is refetching
-
-#### 5. Inline Form Validation
-- **Issue:** All validation errors go to toasts only; no inline field-level error messages
-- **Effort:** Medium
-- **Action:** Add inline error messages below form fields (funnel creation, goal creation, site settings)
-
-#### 6. Accessibility: Modal Focus Trapping
-- **Issue:** Modals don't trap focus, breaking keyboard-only navigation
-- **Effort:** Medium
-- **Action:** Implement focus trapping in modal components (VerificationModal, ExportModal, settings modals)
-
-#### 7. Accessibility: ARIA Live Regions
-- **Issue:** Real-time visitor count updates aren't announced to screen readers
-- **Effort:** Low
-- **Action:** Add `aria-live="polite"` to `RealtimeVisitors.tsx` and other auto-updating elements
-
-#### 8. Table Pagination Loading
-- **Issue:** No loading indicator when paginating through table data
-- **Effort:** Low
-- **Action:** Show a loading spinner or skeleton overlay when fetching the next page of results
-
-### Low Impact
-
-#### 9. Remove Unused `axios` Dependency
-- **Issue:** `apiRequest` is the actual HTTP client; `axios` is dead weight in the bundle
-- **Effort:** Trivial
-- **Action:** `npm uninstall axios` and verify no imports reference it
-
-#### 10. PWA Service Worker Caching
-- **Issue:** `@ducanh2912/next-pwa` is configured but no offline caching strategy exists
-- **Effort:** Medium
-- **Action:** Define a caching strategy for static assets and API responses, or remove the PWA dependency
-
-#### 11. Image Lazy Loading
-- **Issue:** Table/list images (favicons, flags) don't use `loading="lazy"`
-- **Effort:** Low
-- **Action:** Add `loading="lazy"` to images in referrer lists, country tables, and similar components
-
-#### 12. OpenAPI Specification
-- **Issue:** Backend has no Swagger/OpenAPI doc; README serves as the only API documentation
-- **Effort:** High
-- **Action:** Generate an OpenAPI spec from Go handler annotations or write one manually
-
-## Additional Notes
-
-- **No i18n** — English only. Worth planning if expanding to international markets.
-- **Test coverage** — 16 backend test files cover core logic well, but GSC/BunnyCDN sync and report delivery e2e are gaps.
-- **Chart.tsx is 35KB** — A candidate for splitting into sub-components eventually.
-- 
2.49.1


From 336520e401658ffc6ea81e816c88c2b008aa70bf Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 11:48:47 +0100
Subject: [PATCH 006/428] feat: show brief success state before closing export
 modal

Progress bar turns green at 100%, button shows "Done", then modal
auto-closes after 600ms. Gives visual confirmation without fake delay.
---
 components/dashboard/ExportModal.tsx | 30 ++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/components/dashboard/ExportModal.tsx b/components/dashboard/ExportModal.tsx
index 87f3fc1..8993ab9 100644
--- a/components/dashboard/ExportModal.tsx
+++ b/components/dashboard/ExportModal.tsx
@@ -51,6 +51,7 @@ export default function ExportModal({ isOpen, onClose, data, stats, topPages, to
   const [filename, setFilename] = useState(`pulse_export_${formatDateISO(new Date())}`)
   const [includeHeader, setIncludeHeader] = useState(true)
   const [isExporting, setIsExporting] = useState(false)
+  const [exportDone, setExportDone] = useState(false)
   const [exportProgress, setExportProgress] = useState({ step: 0, total: 1, label: '' })
   const [selectedFields, setSelectedFields] = useState<Record<keyof DailyStat, boolean>>({
     date: true,
@@ -64,6 +65,15 @@ export default function ExportModal({ isOpen, onClose, data, stats, topPages, to
     setSelectedFields((prev) => ({ ...prev, [field]: checked }))
   }
 
+  const finishExport = useCallback(() => {
+    setExportDone(true)
+    setIsExporting(false)
+    setTimeout(() => {
+      setExportDone(false)
+      onClose()
+    }, 600)
+  }, [onClose])
+
   // Yield to the UI thread so the browser can paint progress updates
   const updateProgress = useCallback(async (step: number, total: number, label: string) => {
     setExportProgress({ step, total, label })
@@ -134,7 +144,7 @@ export default function ExportModal({ isOpen, onClose, data, stats, topPages, to
             document.body.appendChild(link)
             link.click()
             document.body.removeChild(link)
-            onClose()
+            finishExport()
             return
           } else if (format === 'pdf') {
             const totalSteps = 3 + (topPages?.length ? 1 : 0) + (topReferrers?.length ? 1 : 0) + (campaigns?.length ? 1 : 0)
@@ -359,7 +369,7 @@ export default function ExportModal({ isOpen, onClose, data, stats, topPages, to
 
             await updateProgress(totalSteps, totalSteps, 'Saving PDF...')
             doc.save(`${filename || 'export'}.pdf`)
-            onClose()
+            finishExport()
             return
           } else {
             content = JSON.stringify(exportData, null, 2)
@@ -376,7 +386,7 @@ export default function ExportModal({ isOpen, onClose, data, stats, topPages, to
           link.click()
           document.body.removeChild(link)
 
-          onClose()
+          finishExport()
         } catch (e) {
           console.error('Export failed:', e)
         } finally {
@@ -468,16 +478,16 @@ export default function ExportModal({ isOpen, onClose, data, stats, topPages, to
         )}
 
         {/* Progress Bar */}
-        {isExporting && (
+        {(isExporting || exportDone) && (
           <div className="space-y-2 pt-2">
             <div className="flex items-center justify-between text-xs text-neutral-500 dark:text-neutral-400">
-              <span>{exportProgress.label}</span>
-              <span>{Math.round((exportProgress.step / exportProgress.total) * 100)}%</span>
+              <span>{exportDone ? 'Export complete' : exportProgress.label}</span>
+              <span>{exportDone ? '100%' : `${Math.round((exportProgress.step / exportProgress.total) * 100)}%`}</span>
             </div>
             <div className="h-1.5 w-full rounded-full bg-neutral-100 dark:bg-neutral-800 overflow-hidden">
               <div
-                className="h-full rounded-full bg-brand-orange transition-all duration-300 ease-out"
-                style={{ width: `${(exportProgress.step / exportProgress.total) * 100}%` }}
+                className={`h-full rounded-full transition-all duration-300 ease-out ${exportDone ? 'bg-green-500' : 'bg-brand-orange'}`}
+                style={{ width: exportDone ? '100%' : `${(exportProgress.step / exportProgress.total) * 100}%` }}
               />
             </div>
           </div>
@@ -488,8 +498,8 @@ export default function ExportModal({ isOpen, onClose, data, stats, topPages, to
           <Button variant="secondary" onClick={onClose} disabled={isExporting}>
             Cancel
           </Button>
-          <Button variant="primary" onClick={handleExport} disabled={isExporting}>
-            {isExporting ? 'Exporting...' : 'Export Data'}
+          <Button variant="primary" onClick={handleExport} disabled={isExporting || exportDone}>
+            {exportDone ? '✓ Done' : isExporting ? 'Exporting...' : 'Export Data'}
           </Button>
         </div>
       </div>
-- 
2.49.1


From 4f419f8b0427c1e36296baa7b065aecc96ec04bc Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 12:40:01 +0100
Subject: [PATCH 007/428] fix: increase inline bar chart opacity for better
 brand visibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Light mode: 5% → 15%, dark mode: 10% → 25%
---
 components/behavior/FrustrationByPageTable.tsx | 2 +-
 components/dashboard/Campaigns.tsx             | 2 +-
 components/dashboard/ContentStats.tsx          | 2 +-
 components/dashboard/Locations.tsx             | 2 +-
 components/dashboard/TechSpecs.tsx             | 2 +-
 components/dashboard/TopReferrers.tsx          | 2 +-
 components/journeys/TopPathsTable.tsx          | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/behavior/FrustrationByPageTable.tsx b/components/behavior/FrustrationByPageTable.tsx
index 249da82..d8e3515 100644
--- a/components/behavior/FrustrationByPageTable.tsx
+++ b/components/behavior/FrustrationByPageTable.tsx
@@ -68,7 +68,7 @@ export default function FrustrationByPageTable({ pages, loading }: FrustrationBy
                 >
                   {/* Background bar */}
                   <div
-                    className="absolute inset-y-0 left-0 bg-brand-orange/5 dark:bg-brand-orange/10 rounded-lg transition-all"
+                    className="absolute inset-y-0 left-0 bg-brand-orange/15 dark:bg-brand-orange/25 rounded-lg transition-all"
                     style={{ width: `${barWidth}%` }}
                   />
                   <span
diff --git a/components/dashboard/Campaigns.tsx b/components/dashboard/Campaigns.tsx
index 02bf7c5..91e925e 100644
--- a/components/dashboard/Campaigns.tsx
+++ b/components/dashboard/Campaigns.tsx
@@ -164,7 +164,7 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
                     className={`relative flex items-center justify-between py-1.5 group hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
                   >
                     <div
-                      className="absolute inset-y-0.5 left-0.5 bg-brand-orange/5 dark:bg-brand-orange/10 rounded-md transition-all"
+                      className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/25 rounded-md transition-all"
                       style={{ width: `${barWidth}%` }}
                     />
                     <div className="relative flex-1 text-neutral-900 dark:text-white flex items-center gap-3 min-w-0">
diff --git a/components/dashboard/ContentStats.tsx b/components/dashboard/ContentStats.tsx
index 38e7209..4f37eaa 100644
--- a/components/dashboard/ContentStats.tsx
+++ b/components/dashboard/ContentStats.tsx
@@ -159,7 +159,7 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
                     className={`relative flex items-center justify-between h-9 group hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
                   >
                     <div
-                      className="absolute inset-y-0.5 left-0.5 bg-brand-orange/5 dark:bg-brand-orange/10 rounded-md transition-all"
+                      className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/25 rounded-md transition-all"
                       style={{ width: `${barWidth}%` }}
                     />
                     <div className="relative flex-1 truncate text-neutral-900 dark:text-white flex items-center">
diff --git a/components/dashboard/Locations.tsx b/components/dashboard/Locations.tsx
index 147963f..aad4c17 100644
--- a/components/dashboard/Locations.tsx
+++ b/components/dashboard/Locations.tsx
@@ -306,7 +306,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
                       className={`relative flex items-center justify-between h-9 group hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
                     >
                       <div
-                        className="absolute inset-y-0.5 left-0.5 bg-brand-orange/5 dark:bg-brand-orange/10 rounded-md transition-all"
+                        className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/25 rounded-md transition-all"
                         style={{ width: `${barWidth}%` }}
                       />
                       <div className="relative flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
diff --git a/components/dashboard/TechSpecs.tsx b/components/dashboard/TechSpecs.tsx
index d40f0ef..f18920e 100644
--- a/components/dashboard/TechSpecs.tsx
+++ b/components/dashboard/TechSpecs.tsx
@@ -191,7 +191,7 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
                     className={`relative flex items-center justify-between h-9 group hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
                   >
                     <div
-                      className="absolute inset-y-0.5 left-0.5 bg-brand-orange/5 dark:bg-brand-orange/10 rounded-md transition-all"
+                      className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/25 rounded-md transition-all"
                       style={{ width: `${barWidth}%` }}
                     />
                     <div className="relative flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
diff --git a/components/dashboard/TopReferrers.tsx b/components/dashboard/TopReferrers.tsx
index c8f5ce2..d7b5330 100644
--- a/components/dashboard/TopReferrers.tsx
+++ b/components/dashboard/TopReferrers.tsx
@@ -123,7 +123,7 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
                     className={`relative flex items-center justify-between h-9 group hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
                   >
                     <div
-                      className="absolute inset-y-0.5 left-0.5 bg-brand-orange/5 dark:bg-brand-orange/10 rounded-md transition-all"
+                      className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/25 rounded-md transition-all"
                       style={{ width: `${barWidth}%` }}
                     />
                     <div className="relative flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
diff --git a/components/journeys/TopPathsTable.tsx b/components/journeys/TopPathsTable.tsx
index 72bdcd1..50660bb 100644
--- a/components/journeys/TopPathsTable.tsx
+++ b/components/journeys/TopPathsTable.tsx
@@ -61,7 +61,7 @@ export default function TopPathsTable({ paths, loading }: TopPathsTableProps) {
               >
                 {/* Background bar */}
                 <div
-                  className="absolute inset-y-0.5 left-0.5 bg-brand-orange/5 dark:bg-brand-orange/10 rounded-md transition-all"
+                  className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/25 rounded-md transition-all"
                   style={{ width: `${barWidth}%` }}
                 />
 
-- 
2.49.1


From 3b09758881b395d8a6c528535b815266dc1772c1 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 12:44:32 +0100
Subject: [PATCH 008/428] fix: cap inline bar chart max width at 75%

Prevents the top item from spanning full width, making bars
read more clearly as proportional indicators.
---
 components/behavior/FrustrationByPageTable.tsx | 2 +-
 components/dashboard/Campaigns.tsx             | 2 +-
 components/dashboard/ContentStats.tsx          | 2 +-
 components/dashboard/Locations.tsx             | 2 +-
 components/dashboard/TechSpecs.tsx             | 2 +-
 components/dashboard/TopReferrers.tsx          | 2 +-
 components/journeys/TopPathsTable.tsx          | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/behavior/FrustrationByPageTable.tsx b/components/behavior/FrustrationByPageTable.tsx
index d8e3515..fa1169b 100644
--- a/components/behavior/FrustrationByPageTable.tsx
+++ b/components/behavior/FrustrationByPageTable.tsx
@@ -60,7 +60,7 @@ export default function FrustrationByPageTable({ pages, loading }: FrustrationBy
           {/* Rows */}
           <div className="space-y-0.5">
             {pages.map((page) => {
-              const barWidth = (page.total / maxTotal) * 100
+              const barWidth = (page.total / maxTotal) * 75
               return (
                 <div
                   key={page.page_path}
diff --git a/components/dashboard/Campaigns.tsx b/components/dashboard/Campaigns.tsx
index 91e925e..771e58a 100644
--- a/components/dashboard/Campaigns.tsx
+++ b/components/dashboard/Campaigns.tsx
@@ -156,7 +156,7 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
             <>
               {displayedData.map((item) => {
                 const maxVis = displayedData[0]?.visitors ?? 0
-                const barWidth = maxVis > 0 ? (item.visitors / maxVis) * 100 : 0
+                const barWidth = maxVis > 0 ? (item.visitors / maxVis) * 75 : 0
                 return (
                   <div
                     key={`${item.source}|${item.medium}|${item.campaign}`}
diff --git a/components/dashboard/ContentStats.tsx b/components/dashboard/ContentStats.tsx
index 4f37eaa..6436398 100644
--- a/components/dashboard/ContentStats.tsx
+++ b/components/dashboard/ContentStats.tsx
@@ -151,7 +151,7 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
             <>
               {displayedData.map((page, idx) => {
                 const maxPv = displayedData[0]?.pageviews ?? 0
-                const barWidth = maxPv > 0 ? (page.pageviews / maxPv) * 100 : 0
+                const barWidth = maxPv > 0 ? (page.pageviews / maxPv) * 75 : 0
                 return (
                   <div
                     key={page.path}
diff --git a/components/dashboard/Locations.tsx b/components/dashboard/Locations.tsx
index aad4c17..ddb9895 100644
--- a/components/dashboard/Locations.tsx
+++ b/components/dashboard/Locations.tsx
@@ -298,7 +298,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
                   const filterValue = activeTab === 'countries' ? item.country : activeTab === 'regions' ? item.region : item.city
                   const canFilter = onFilter && dim && filterValue
                   const maxPv = displayedData[0]?.pageviews ?? 0
-                  const barWidth = maxPv > 0 ? (item.pageviews / maxPv) * 100 : 0
+                  const barWidth = maxPv > 0 ? (item.pageviews / maxPv) * 75 : 0
                   return (
                     <div
                       key={`${item.country ?? ''}-${item.region ?? ''}-${item.city ?? ''}`}
diff --git a/components/dashboard/TechSpecs.tsx b/components/dashboard/TechSpecs.tsx
index f18920e..51f9ec8 100644
--- a/components/dashboard/TechSpecs.tsx
+++ b/components/dashboard/TechSpecs.tsx
@@ -183,7 +183,7 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
                 const dim = TAB_TO_DIMENSION[activeTab]
                 const canFilter = onFilter && dim
                 const maxPv = displayedData[0]?.pageviews ?? 0
-                const barWidth = maxPv > 0 ? (item.pageviews / maxPv) * 100 : 0
+                const barWidth = maxPv > 0 ? (item.pageviews / maxPv) * 75 : 0
                 return (
                   <div
                     key={item.name}
diff --git a/components/dashboard/TopReferrers.tsx b/components/dashboard/TopReferrers.tsx
index d7b5330..1f87352 100644
--- a/components/dashboard/TopReferrers.tsx
+++ b/components/dashboard/TopReferrers.tsx
@@ -115,7 +115,7 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
             <>
               {displayedReferrers.map((ref) => {
                 const maxPv = displayedReferrers[0]?.pageviews ?? 0
-                const barWidth = maxPv > 0 ? (ref.pageviews / maxPv) * 100 : 0
+                const barWidth = maxPv > 0 ? (ref.pageviews / maxPv) * 75 : 0
                 return (
                   <div
                     key={ref.referrer}
diff --git a/components/journeys/TopPathsTable.tsx b/components/journeys/TopPathsTable.tsx
index 50660bb..2f6b739 100644
--- a/components/journeys/TopPathsTable.tsx
+++ b/components/journeys/TopPathsTable.tsx
@@ -51,7 +51,7 @@ export default function TopPathsTable({ paths, loading }: TopPathsTableProps) {
       ) : hasData ? (
         <div className="space-y-0.5">
           {paths.map((path, i) => {
-            const barWidth = maxCount > 0 ? (path.session_count / maxCount) * 100 : 0
+            const barWidth = maxCount > 0 ? (path.session_count / maxCount) * 75 : 0
             const displaySeq = truncateSequence(path.page_sequence, 7)
 
             return (
-- 
2.49.1


From 47ea6fa6f6f2e43ba1007d4f6548a2f4cb791147 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 13:28:13 +0100
Subject: [PATCH 009/428] feat: add micro-animations to journey chart

- Connection lines draw-in with staggered stroke-dashoffset
- Bar widths grow from zero on mount with row stagger
- Columns fade + slide in from left with 50ms delay each
- Hover lift (-1px translate + shadow) on page rows
- Exit card fades in from top
- Drop-off percentages count up with eased animation
---
 components/journeys/ColumnJourney.tsx | 137 +++++++++++++++++++++-----
 1 file changed, 115 insertions(+), 22 deletions(-)

diff --git a/components/journeys/ColumnJourney.tsx b/components/journeys/ColumnJourney.tsx
index bae0d9c..1646450 100644
--- a/components/journeys/ColumnJourney.tsx
+++ b/components/journeys/ColumnJourney.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Fragment, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { TreeStructure } from '@phosphor-icons/react'
 import type { PathTransition } from '@/lib/api/journeys'
 
@@ -53,6 +53,34 @@ function smartLabel(path: string): string {
   return `…/${segments[segments.length - 1]}`
 }
 
+// ─── Animated count hook ────────────────────────────────────────────
+
+function useAnimatedCount(target: number, duration = 400): number {
+  const [display, setDisplay] = useState(0)
+  const prevTarget = useRef(target)
+
+  useEffect(() => {
+    const from = prevTarget.current
+    prevTarget.current = target
+    if (from === target) {
+      setDisplay(target)
+      return
+    }
+    const start = performance.now()
+    let raf: number
+    const tick = (now: number) => {
+      const t = Math.min((now - start) / duration, 1)
+      const eased = 1 - Math.pow(1 - t, 3) // ease-out cubic
+      setDisplay(Math.round(from + (target - from) * eased))
+      if (t < 1) raf = requestAnimationFrame(tick)
+    }
+    raf = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(raf)
+  }, [target, duration])
+
+  return display
+}
+
 // ─── Data transformation ────────────────────────────────────────────
 
 function buildColumns(
@@ -112,6 +140,21 @@ function buildColumns(
 
 // ─── Sub-components ─────────────────────────────────────────────────
 
+function AnimatedDropOff({ percent }: { percent: number }) {
+  const displayed = useAnimatedCount(percent)
+  if (displayed === 0 && percent === 0) return null
+  return (
+    <span
+      className={`text-xs font-medium ${
+        percent < 0 ? 'text-red-500' : 'text-emerald-500'
+      }`}
+    >
+      {percent > 0 ? '+' : displayed < 0 ? '' : ''}
+      {displayed}%
+    </span>
+  )
+}
+
 function ColumnHeader({
   column,
 }: {
@@ -127,14 +170,7 @@ function ColumnHeader({
           {column.totalSessions.toLocaleString()} visitors
         </span>
         {column.dropOffPercent !== 0 && (
-          <span
-            className={`text-xs font-medium ${
-              column.dropOffPercent < 0 ? 'text-red-500' : 'text-emerald-500'
-            }`}
-          >
-            {column.dropOffPercent > 0 ? '+' : ''}
-            {column.dropOffPercent}%
-          </span>
+          <AnimatedDropOff percent={column.dropOffPercent} />
         )}
       </div>
     </div>
@@ -144,18 +180,22 @@ function ColumnHeader({
 function PageRow({
   page,
   colIndex,
+  rowIndex,
   columnTotal,
   maxCount,
   isSelected,
   isOther,
+  isMounted,
   onClick,
 }: {
   page: ColumnPage
   colIndex: number
+  rowIndex: number
   columnTotal: number
   maxCount: number
   isSelected: boolean
   isOther: boolean
+  isMounted: boolean
   onClick: () => void
 }) {
   const pct = columnTotal > 0 ? Math.round((page.sessionCount / columnTotal) * 100) : 0
@@ -171,22 +211,23 @@ function PageRow({
       data-path={page.path}
       className={`
         group flex items-center justify-between w-full relative
-        h-9 px-3 rounded-lg text-left transition-colors
+        h-9 px-3 rounded-lg text-left transition-all duration-200
         ${isOther ? 'cursor-default' : 'cursor-pointer'}
         ${isSelected
           ? 'bg-brand-orange/10 dark:bg-brand-orange/10'
           : isOther
             ? ''
-            : 'hover:bg-neutral-50 dark:hover:bg-neutral-800/50'
+            : 'hover:bg-neutral-50 dark:hover:bg-neutral-800/50 hover:-translate-y-px hover:shadow-sm'
         }
       `}
     >
-      {/* Background bar */}
+      {/* Background bar — animates width on mount */}
       {!isOther && barWidth > 0 && (
         <div
-          className="absolute top-0.5 bottom-0.5 left-0.5 rounded-md transition-all"
+          className="absolute top-0.5 bottom-0.5 left-0.5 rounded-md transition-all duration-500 ease-out"
           style={{
-            width: `calc(${barWidth}% - 4px)`,
+            width: isMounted ? `calc(${barWidth}% - 4px)` : '0%',
+            transitionDelay: `${rowIndex * 30}ms`,
             backgroundColor: isSelected ? 'rgba(253, 94, 15, 0.15)' : 'rgba(253, 94, 15, 0.08)',
           }}
         />
@@ -233,9 +274,24 @@ function JourneyColumn({
   exitCount: number
   onSelect: (path: string) => void
 }) {
+  // Animation #2 & #3: trigger bar grow after mount
+  const [isMounted, setIsMounted] = useState(false)
+  useEffect(() => {
+    const raf = requestAnimationFrame(() => setIsMounted(true))
+    return () => {
+      cancelAnimationFrame(raf)
+      setIsMounted(false)
+    }
+  }, [column.pages])
+
   if (column.pages.length === 0 && exitCount === 0) {
     return (
-      <div className="w-56 shrink-0">
+      <div
+        className="w-56 shrink-0"
+        style={{
+          animation: `col-enter 300ms ease-out ${column.index * 50}ms backwards`,
+        }}
+      >
         <ColumnHeader column={column} />
         <div className="flex items-center justify-center h-16 px-2">
           <span className="text-xs text-neutral-400 dark:text-neutral-500">
@@ -249,31 +305,40 @@ function JourneyColumn({
   const maxCount = Math.max(...column.pages.map((p) => p.sessionCount), 0)
 
   return (
-    <div className="w-56 shrink-0 px-3">
+    <div
+      className="w-56 shrink-0 px-3"
+      style={{
+        animation: `col-enter 300ms ease-out ${column.index * 50}ms backwards`,
+      }}
+    >
       <ColumnHeader column={column} />
       <div className="space-y-0.5 max-h-[500px] overflow-y-auto">
-        {column.pages.map((page) => {
+        {column.pages.map((page, rowIndex) => {
           const isOther = page.path === '(other)'
           return (
             <PageRow
               key={page.path}
               page={page}
               colIndex={column.index}
+              rowIndex={rowIndex}
               columnTotal={column.totalSessions}
               maxCount={maxCount}
               isSelected={selectedPath === page.path}
               isOther={isOther}
+              isMounted={isMounted}
               onClick={() => {
                 if (!isOther) onSelect(page.path)
               }}
             />
           )
         })}
+        {/* Animation #5: exit card slides in */}
         {exitCount > 0 && (
           <div
             data-col={column.index}
             data-path="(exit)"
             className="flex items-center justify-between w-full relative h-9 px-3 rounded-lg bg-red-500/15 dark:bg-red-500/15"
+            style={{ animation: 'exit-reveal 300ms ease-out backwards' }}
           >
             <div
               className="absolute top-0.5 bottom-0.5 left-0.5 rounded-md"
@@ -308,7 +373,7 @@ function ConnectionLines({
   columns: Column[]
   transitions: PathTransition[]
 }) {
-  const [lines, setLines] = useState<(LineDef & { color: string })[]>([])
+  const [lines, setLines] = useState<(LineDef & { color: string; length: number })[]>([])
   const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
 
   useLayoutEffect(() => {
@@ -324,7 +389,7 @@ function ConnectionLines({
       height: container.scrollHeight,
     })
 
-    const newLines: (LineDef & { color: string })[] = []
+    const newLines: (LineDef & { color: string; length: number })[] = []
 
     for (const [colIdx, selectedPath] of selections) {
       const nextCol = columns[colIdx + 1]
@@ -362,7 +427,12 @@ function ConnectionLines({
 
         const weight = Math.max(1, Math.min(4, (t.session_count / maxCount) * 4))
 
-        newLines.push({ sourceY, destY, sourceX, destX, weight, color })
+        // Approximate bezier curve length for animation
+        const dx = destX - sourceX
+        const dy = destY - sourceY
+        const length = Math.sqrt(dx * dx + dy * dy) * 1.2
+
+        newLines.push({ sourceY, destY, sourceX, destX, weight, color, length })
       }
 
       // Draw line to exit card if it exists
@@ -374,7 +444,10 @@ function ConnectionLines({
         const exitY =
           exitRect.top + exitRect.height / 2 - containerRect.top + container.scrollTop
         const exitX = exitRect.left - containerRect.left + container.scrollLeft
-        newLines.push({ sourceY, destY: exitY, sourceX, destX: exitX, weight: 1, color: '#ef4444' })
+        const dx = exitX - sourceX
+        const dy = exitY - sourceY
+        const length = Math.sqrt(dx * dx + dy * dy) * 1.2
+        newLines.push({ sourceY, destY: exitY, sourceX, destX: exitX, weight: 1, color: '#ef4444', length })
       }
     }
 
@@ -400,9 +473,19 @@ function ConnectionLines({
             strokeWidth={line.weight}
             strokeOpacity={0.35}
             fill="none"
+            strokeDasharray={line.length}
+            strokeDashoffset={line.length}
+            style={{
+              animation: `draw-line 400ms ease-out ${i * 50}ms forwards`,
+            }}
           />
         )
       })}
+      <style>
+        {`@keyframes draw-line {
+          to { stroke-dashoffset: 0; }
+        }`}
+      </style>
     </svg>
   )
 }
@@ -488,6 +571,16 @@ export default function ColumnJourney({
 
   return (
     <div className="relative">
+      <style>
+        {`@keyframes col-enter {
+          from { opacity: 0; transform: translateX(-8px); }
+          to { opacity: 1; transform: translateX(0); }
+        }
+        @keyframes exit-reveal {
+          from { opacity: 0; transform: translateY(-4px); }
+          to { opacity: 1; transform: translateY(0); }
+        }`}
+      </style>
       <div
         ref={containerRef}
         className="overflow-x-auto -mx-6 px-6 pb-2 relative"
@@ -502,7 +595,7 @@ export default function ColumnJourney({
             return (
               <Fragment key={col.index}>
                 {i > 0 && (
-                  <div className="w-px shrink-0 bg-neutral-100 dark:bg-neutral-800" />
+                  <div className="w-px shrink-0 mx-3 bg-neutral-100 dark:bg-neutral-800" />
                 )}
                 <JourneyColumn
                   column={col}
-- 
2.49.1


From bb1ed9d8b580e8ada1b9b0e86bc97d5df08e7dc4 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 13:57:06 +0100
Subject: [PATCH 010/428] chore: add @nivo/sankey dependency

---
 package-lock.json | 346 ++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |   1 +
 2 files changed, 347 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index b0a4afe..55577fe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@ciphera-net/ui": "^0.2.7",
         "@ducanh2912/next-pwa": "^10.2.9",
+        "@nivo/sankey": "^0.99.0",
         "@phosphor-icons/react": "^2.1.10",
         "@simplewebauthn/browser": "^13.2.2",
         "@stripe/react-stripe-js": "^5.6.0",
@@ -3269,6 +3270,174 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@nivo/colors": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/colors/-/colors-0.99.0.tgz",
+      "integrity": "sha512-hyYt4lEFIfXOUmQ6k3HXm3KwhcgoJpocmoGzLUqzk7DzuhQYJo+4d5jIGGU0N/a70+9XbHIdpKNSblHAIASD3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/core": "0.99.0",
+        "@nivo/theming": "0.99.0",
+        "@types/d3-color": "^3.0.0",
+        "@types/d3-scale": "^4.0.8",
+        "@types/d3-scale-chromatic": "^3.0.0",
+        "d3-color": "^3.1.0",
+        "d3-scale": "^4.0.2",
+        "d3-scale-chromatic": "^3.0.0",
+        "lodash": "^4.17.21"
+      },
+      "peerDependencies": {
+        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+      }
+    },
+    "node_modules/@nivo/core": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/core/-/core-0.99.0.tgz",
+      "integrity": "sha512-olCItqhPG3xHL5ei+vg52aB6o+6S+xR2idpkd9RormTTUniZb8U2rOdcQojOojPY5i9kVeQyLFBpV4YfM7OZ9g==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/theming": "0.99.0",
+        "@nivo/tooltip": "0.99.0",
+        "@react-spring/web": "9.4.5 || ^9.7.2 || ^10.0",
+        "@types/d3-shape": "^3.1.6",
+        "d3-color": "^3.1.0",
+        "d3-format": "^1.4.4",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-scale-chromatic": "^3.0.0",
+        "d3-shape": "^3.2.0",
+        "d3-time-format": "^3.0.0",
+        "lodash": "^4.17.21",
+        "react-virtualized-auto-sizer": "^1.0.26",
+        "use-debounce": "^10.0.4"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/nivo/donate"
+      },
+      "peerDependencies": {
+        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+      }
+    },
+    "node_modules/@nivo/core/node_modules/d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "node_modules/@nivo/core/node_modules/d3-format": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz",
+      "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@nivo/core/node_modules/d3-time": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz",
+      "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "2"
+      }
+    },
+    "node_modules/@nivo/core/node_modules/d3-time-format": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
+      "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-time": "1 - 2"
+      }
+    },
+    "node_modules/@nivo/core/node_modules/internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
+      "license": "ISC"
+    },
+    "node_modules/@nivo/legends": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/legends/-/legends-0.99.0.tgz",
+      "integrity": "sha512-P16FjFqNceuTTZphINAh5p0RF0opu3cCKoWppe2aRD9IuVkvRm/wS5K1YwMCxDzKyKh5v0AuTlu9K6o3/hk8hA==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/colors": "0.99.0",
+        "@nivo/core": "0.99.0",
+        "@nivo/text": "0.99.0",
+        "@nivo/theming": "0.99.0",
+        "@types/d3-scale": "^4.0.8",
+        "d3-scale": "^4.0.2"
+      },
+      "peerDependencies": {
+        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+      }
+    },
+    "node_modules/@nivo/sankey": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/sankey/-/sankey-0.99.0.tgz",
+      "integrity": "sha512-u5hySywsachjo9cHdUxCR9qwD6gfRVPEAcpuIUKiA0WClDjdGbl3vkrQcQcFexJUBThqSSbwGCDWR+2INXSbTw==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/colors": "0.99.0",
+        "@nivo/core": "0.99.0",
+        "@nivo/legends": "0.99.0",
+        "@nivo/text": "0.99.0",
+        "@nivo/theming": "0.99.0",
+        "@nivo/tooltip": "0.99.0",
+        "@react-spring/web": "9.4.5 || ^9.7.2 || ^10.0",
+        "@types/d3-sankey": "^0.11.2",
+        "@types/d3-shape": "^3.1.6",
+        "d3-sankey": "^0.12.3",
+        "d3-shape": "^3.2.0",
+        "lodash": "^4.17.21"
+      },
+      "peerDependencies": {
+        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+      }
+    },
+    "node_modules/@nivo/text": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/text/-/text-0.99.0.tgz",
+      "integrity": "sha512-ho3oZpAZApsJNjsIL5WJSAdg/wjzTBcwo1KiHBlRGUmD+yUWO8qp7V+mnYRhJchwygtRVALlPgZ/rlcW2Xr/MQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/core": "0.99.0",
+        "@nivo/theming": "0.99.0",
+        "@react-spring/web": "9.4.5 || ^9.7.2 || ^10.0"
+      },
+      "peerDependencies": {
+        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+      }
+    },
+    "node_modules/@nivo/theming": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/theming/-/theming-0.99.0.tgz",
+      "integrity": "sha512-KvXlf0nqBzh/g2hAIV9bzscYvpq1uuO3TnFN3RDXGI72CrbbZFTGzprPju3sy/myVsauv+Bb+V4f5TZ0jkYKRg==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.17.21"
+      },
+      "peerDependencies": {
+        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+      }
+    },
+    "node_modules/@nivo/tooltip": {
+      "version": "0.99.0",
+      "resolved": "https://registry.npmjs.org/@nivo/tooltip/-/tooltip-0.99.0.tgz",
+      "integrity": "sha512-weoEGR3xAetV4k2P6k96cdamGzKQ5F2Pq+uyDaHr1P3HYArM879Pl+x+TkU0aWjP6wgUZPx/GOBiV1Hb1JxIqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nivo/core": "0.99.0",
+        "@nivo/theming": "0.99.0",
+        "@react-spring/web": "9.4.5 || ^9.7.2 || ^10.0"
+      },
+      "peerDependencies": {
+        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -4825,6 +4994,78 @@
       "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
       "license": "MIT"
     },
+    "node_modules/@react-spring/animated": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-10.0.3.tgz",
+      "integrity": "sha512-7MrxADV3vaUADn2V9iYhaIL6iOWRx9nCJjYrsk2AHD2kwPr6fg7Pt0v+deX5RnCDmCKNnD6W5fasiyM8D+wzJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/shared": "~10.0.3",
+        "@react-spring/types": "~10.0.3"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-spring/core": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-10.0.3.tgz",
+      "integrity": "sha512-D4DwNO68oohDf/0HG2G0Uragzb9IA1oXblxrd6MZAcBcUQG2EHUWXewjdECMPLNmQvlYVyyBRH6gPxXM5DX7DQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/animated": "~10.0.3",
+        "@react-spring/shared": "~10.0.3",
+        "@react-spring/types": "~10.0.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-spring/donate"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-spring/rafz": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-10.0.3.tgz",
+      "integrity": "sha512-Ri2/xqt8OnQ2iFKkxKMSF4Nqv0LSWnxXT4jXFzBDsHgeeH/cHxTLupAWUwmV9hAGgmEhBmh5aONtj3J6R/18wg==",
+      "license": "MIT"
+    },
+    "node_modules/@react-spring/shared": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-10.0.3.tgz",
+      "integrity": "sha512-geCal66nrkaQzUVhPkGomylo+Jpd5VPK8tPMEDevQEfNSWAQP15swHm+MCRG4wVQrQlTi9lOzKzpRoTL3CA84Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/rafz": "~10.0.3",
+        "@react-spring/types": "~10.0.3"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-spring/types": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-10.0.3.tgz",
+      "integrity": "sha512-H5Ixkd2OuSIgHtxuHLTt7aJYfhMXKXT/rK32HPD/kSrOB6q6ooeiWAXkBy7L8F3ZxdkBb9ini9zP9UwnEFzWgQ==",
+      "license": "MIT"
+    },
+    "node_modules/@react-spring/web": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-10.0.3.tgz",
+      "integrity": "sha512-ndU+kWY81rHsT7gTFtCJ6mrVhaJ6grFmgTnENipzmKqot4HGf5smPNK+cZZJqoGeDsj9ZsiWPW4geT/NyD484A==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/animated": "~10.0.3",
+        "@react-spring/core": "~10.0.3",
+        "@react-spring/shared": "~10.0.3",
+        "@react-spring/types": "~10.0.3"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-rc.3",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.3.tgz",
@@ -5625,6 +5866,30 @@
       "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
       "license": "MIT"
     },
+    "node_modules/@types/d3-sankey": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-sankey/-/d3-sankey-0.11.2.tgz",
+      "integrity": "sha512-U6SrTWUERSlOhnpSrgvMX64WblX1AxX6nEjI2t3mLK2USpQrnbwYYK+AS9SwiE7wgYmOsSSKoSdr8aoKBH0HgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-shape": "^1"
+      }
+    },
+    "node_modules/@types/d3-sankey/node_modules/@types/d3-path": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.11.tgz",
+      "integrity": "sha512-4pQMp8ldf7UaB/gR8Fvvy69psNHkTpD/pVw3vmEi8iZAB9EPMBruB1JvHO4BIq9QkUUd2lV1F5YXpMNj7JPBpw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-sankey/node_modules/@types/d3-shape": {
+      "version": "1.3.12",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.12.tgz",
+      "integrity": "sha512-8oMzcd4+poSLGgV0R1Q1rOlx/xdmozS4Xab7np0eamFFUYq71AU9pOCJEFnkXW2aI/oXdVYJzw6pssbSut7Z9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "^1"
+      }
+    },
     "node_modules/@types/d3-scale": {
       "version": "4.0.9",
       "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
@@ -5634,6 +5899,12 @@
         "@types/d3-time": "*"
       }
     },
+    "node_modules/@types/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-shape": {
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
@@ -7858,6 +8129,46 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-sankey": {
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.12.3.tgz",
+      "integrity": "sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "1 - 2",
+        "d3-shape": "^1.2.0"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-sankey/node_modules/d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-path": "1"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
+      "license": "ISC"
+    },
     "node_modules/d3-scale": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
@@ -7874,6 +8185,19 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-shape": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
@@ -12693,6 +13017,16 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-virtualized-auto-sizer": {
+      "version": "1.0.26",
+      "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.26.tgz",
+      "integrity": "sha512-CblNyiNVw2o+hsa5/49NH2ogGxZ+t+3aweRvNSq7TVjDIlwk7ir4lencEg5HxHeSzwNarSkNkiu0qJSOXtxm5A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -14643,6 +14977,18 @@
         }
       }
     },
+    "node_modules/use-debounce": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.1.0.tgz",
+      "integrity": "sha512-lu87Za35V3n/MyMoEpD5zJv0k7hCn0p+V/fK2kWD+3k2u3kOCwO593UArbczg1fhfs2rqPEnHpULJ3KmGdDzvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16.0.0"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/use-sidecar": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
diff --git a/package.json b/package.json
index cda1d08..bd8319e 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@ciphera-net/ui": "^0.2.7",
     "@ducanh2912/next-pwa": "^10.2.9",
+    "@nivo/sankey": "^0.99.0",
     "@phosphor-icons/react": "^2.1.10",
     "@simplewebauthn/browser": "^13.2.2",
     "@stripe/react-stripe-js": "^5.6.0",
-- 
2.49.1


From 71f922976dc3a5dd29b07329a21870966b10f70b Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 14:00:12 +0100
Subject: [PATCH 011/428] feat: add SankeyJourney component with data
 transformation and interactivity

---
 components/journeys/SankeyJourney.tsx | 347 ++++++++++++++++++++++++++
 1 file changed, 347 insertions(+)
 create mode 100644 components/journeys/SankeyJourney.tsx

diff --git a/components/journeys/SankeyJourney.tsx b/components/journeys/SankeyJourney.tsx
new file mode 100644
index 0000000..aa0ff92
--- /dev/null
+++ b/components/journeys/SankeyJourney.tsx
@@ -0,0 +1,347 @@
+'use client'
+
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { ResponsiveSankey } from '@nivo/sankey'
+import { TreeStructure, X } from '@phosphor-icons/react'
+import type { PathTransition } from '@/lib/api/journeys'
+
+// ─── Types ──────────────────────────────────────────────────────────
+
+interface SankeyJourneyProps {
+  transitions: PathTransition[]
+  totalSessions: number
+  depth: number
+}
+
+interface SankeyNode {
+  id: string
+  stepIndex: number
+}
+
+interface SankeyLink {
+  source: string
+  target: string
+  value: number
+}
+
+interface SankeyData {
+  nodes: SankeyNode[]
+  links: SankeyLink[]
+}
+
+// ─── Constants ──────────────────────────────────────────────────────
+
+const COLUMN_COLORS = [
+  '#FD5E0F', '#3B82F6', '#10B981', '#F59E0B', '#8B5CF6',
+  '#EC4899', '#06B6D4', '#EF4444', '#84CC16', '#F97316', '#6366F1',
+]
+
+const MAX_NODES_PER_STEP = 15
+
+// ─── Helpers ────────────────────────────────────────────────────────
+
+function smartLabel(path: string): string {
+  if (path === '/' || path === '(other)') return path
+  const segments = path.replace(/\/$/, '').split('/')
+  if (segments.length <= 2) return path
+  return `.../${segments[segments.length - 1]}`
+}
+
+/** Extract the original path from a step-prefixed node id like "0:/blog" */
+function pathFromId(id: string): string {
+  const idx = id.indexOf(':')
+  return idx >= 0 ? id.slice(idx + 1) : id
+}
+
+/** Extract the step index from a step-prefixed node id */
+function stepFromId(id: string): number {
+  const idx = id.indexOf(':')
+  return idx >= 0 ? parseInt(id.slice(0, idx), 10) : 0
+}
+
+// ─── Data Transformation ────────────────────────────────────────────
+
+function buildSankeyData(
+  transitions: PathTransition[],
+  filterPath?: string,
+): SankeyData {
+  if (transitions.length === 0) return { nodes: [], links: [] }
+
+  // Group transitions by step and count sessions per path at each step
+  const stepPaths = new Map<number, Map<string, number>>()
+
+  for (const t of transitions) {
+    // from_path at step_index
+    if (!stepPaths.has(t.step_index)) stepPaths.set(t.step_index, new Map())
+    const fromMap = stepPaths.get(t.step_index)!
+    fromMap.set(t.from_path, (fromMap.get(t.from_path) ?? 0) + t.session_count)
+
+    // to_path at step_index + 1
+    const nextStep = t.step_index + 1
+    if (!stepPaths.has(nextStep)) stepPaths.set(nextStep, new Map())
+    const toMap = stepPaths.get(nextStep)!
+    toMap.set(t.to_path, (toMap.get(t.to_path) ?? 0) + t.session_count)
+  }
+
+  // For each step, keep top N paths, group rest into (other)
+  const topPathsPerStep = new Map<number, Set<string>>()
+  for (const [step, pathMap] of stepPaths) {
+    const sorted = Array.from(pathMap.entries()).sort((a, b) => b[1] - a[1])
+    const kept = new Set(sorted.slice(0, MAX_NODES_PER_STEP).map(([p]) => p))
+    topPathsPerStep.set(step, kept)
+  }
+
+  // Build links with capping
+  const linkMap = new Map<string, number>()
+  for (const t of transitions) {
+    const fromStep = t.step_index
+    const toStep = t.step_index + 1
+    const fromTop = topPathsPerStep.get(fromStep)!
+    const toTop = topPathsPerStep.get(toStep)!
+
+    const fromPath = fromTop.has(t.from_path) ? t.from_path : '(other)'
+    const toPath = toTop.has(t.to_path) ? t.to_path : '(other)'
+
+    // Skip self-links where both collapse to (other)
+    if (fromPath === '(other)' && toPath === '(other)') continue
+
+    const sourceId = `${fromStep}:${fromPath}`
+    const targetId = `${toStep}:${toPath}`
+    const key = `${sourceId}|${targetId}`
+    linkMap.set(key, (linkMap.get(key) ?? 0) + t.session_count)
+  }
+
+  let links: SankeyLink[] = Array.from(linkMap.entries()).map(([key, value]) => {
+    const [source, target] = key.split('|')
+    return { source, target, value }
+  })
+
+  // Collect all node ids referenced by links
+  const nodeIdSet = new Set<string>()
+  for (const link of links) {
+    nodeIdSet.add(link.source)
+    nodeIdSet.add(link.target)
+  }
+
+  let nodes: SankeyNode[] = Array.from(nodeIdSet).map((id) => ({
+    id,
+    stepIndex: stepFromId(id),
+  }))
+
+  // ─── Filter by path (BFS forward + backward) ────────────────────
+  if (filterPath) {
+    const matchingNodeIds = nodes
+      .filter((n) => pathFromId(n.id) === filterPath)
+      .map((n) => n.id)
+
+    if (matchingNodeIds.length === 0) return { nodes: [], links: [] }
+
+    // Build adjacency
+    const forwardAdj = new Map<string, Set<string>>()
+    const backwardAdj = new Map<string, Set<string>>()
+    for (const link of links) {
+      if (!forwardAdj.has(link.source)) forwardAdj.set(link.source, new Set())
+      forwardAdj.get(link.source)!.add(link.target)
+      if (!backwardAdj.has(link.target)) backwardAdj.set(link.target, new Set())
+      backwardAdj.get(link.target)!.add(link.source)
+    }
+
+    const reachable = new Set<string>(matchingNodeIds)
+
+    // BFS forward
+    let queue = [...matchingNodeIds]
+    while (queue.length > 0) {
+      const next: string[] = []
+      for (const nodeId of queue) {
+        for (const neighbor of forwardAdj.get(nodeId) ?? []) {
+          if (!reachable.has(neighbor)) {
+            reachable.add(neighbor)
+            next.push(neighbor)
+          }
+        }
+      }
+      queue = next
+    }
+
+    // BFS backward
+    queue = [...matchingNodeIds]
+    while (queue.length > 0) {
+      const next: string[] = []
+      for (const nodeId of queue) {
+        for (const neighbor of backwardAdj.get(nodeId) ?? []) {
+          if (!reachable.has(neighbor)) {
+            reachable.add(neighbor)
+            next.push(neighbor)
+          }
+        }
+      }
+      queue = next
+    }
+
+    links = links.filter(
+      (l) => reachable.has(l.source) && reachable.has(l.target),
+    )
+
+    const filteredNodeIds = new Set<string>()
+    for (const link of links) {
+      filteredNodeIds.add(link.source)
+      filteredNodeIds.add(link.target)
+    }
+    nodes = nodes.filter((n) => filteredNodeIds.has(n.id))
+  }
+
+  return { nodes, links }
+}
+
+// ─── Component ──────────────────────────────────────────────────────
+
+export default function SankeyJourney({
+  transitions,
+  totalSessions,
+  depth,
+}: SankeyJourneyProps) {
+  const [filterPath, setFilterPath] = useState<string | null>(null)
+  const [isDark, setIsDark] = useState(false)
+
+  // Reactively detect dark mode via MutationObserver
+  useEffect(() => {
+    const el = document.documentElement
+    setIsDark(el.classList.contains('dark'))
+
+    const observer = new MutationObserver(() => {
+      setIsDark(el.classList.contains('dark'))
+    })
+    observer.observe(el, { attributes: true, attributeFilter: ['class'] })
+    return () => observer.disconnect()
+  }, [])
+
+  const data = useMemo(
+    () => buildSankeyData(transitions, filterPath ?? undefined),
+    [transitions, filterPath],
+  )
+
+  const handleClick = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (item: any) => {
+      if (!item.id || typeof item.id !== 'string') return // link click, ignore
+      const path = pathFromId(item.id)
+      if (path === '(other)') return
+      setFilterPath((prev) => (prev === path ? null : path))
+    },
+    [],
+  )
+
+  // Clear filter when data changes
+  const transitionsKey = transitions.length + '-' + depth
+  const [prevKey, setPrevKey] = useState(transitionsKey)
+  if (prevKey !== transitionsKey) {
+    setPrevKey(transitionsKey)
+    if (filterPath !== null) setFilterPath(null)
+  }
+
+  // ─── Empty state ────────────────────────────────────────────────
+  if (!transitions.length || data.nodes.length === 0) {
+    return (
+      <div className="h-[400px] flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
+        <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
+          <TreeStructure className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+        </div>
+        <h4 className="font-semibold text-neutral-900 dark:text-white">
+          No journey data yet
+        </h4>
+        <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-xs">
+          Navigation flows will appear here as visitors browse through your site.
+        </p>
+      </div>
+    )
+  }
+
+  const labelColor = isDark ? '#a3a3a3' : '#525252'
+
+  return (
+    <div>
+      {/* Filter reset bar */}
+      {filterPath && (
+        <div className="flex items-center gap-2 mb-3 px-3 py-2 rounded-lg bg-brand-orange/10 dark:bg-brand-orange/10 text-sm">
+          <span className="text-neutral-700 dark:text-neutral-300">
+            Showing flows through{' '}
+            <span className="font-medium text-neutral-900 dark:text-white">
+              {filterPath}
+            </span>
+          </span>
+          <button
+            type="button"
+            onClick={() => setFilterPath(null)}
+            className="ml-auto flex items-center gap-1 text-xs font-medium text-brand-orange hover:text-brand-orange/80 transition-colors"
+          >
+            <X weight="bold" className="w-3.5 h-3.5" />
+            Reset
+          </button>
+        </div>
+      )}
+
+      <div style={{ height: 500 }}>
+        <ResponsiveSankey<SankeyNode, SankeyLink>
+          data={data}
+          margin={{ top: 16, right: 140, bottom: 16, left: 140 }}
+          align="justify"
+          sort="descending"
+          colors={(node) =>
+            COLUMN_COLORS[node.stepIndex % COLUMN_COLORS.length]
+          }
+          nodeThickness={14}
+          nodeSpacing={16}
+          nodeInnerPadding={0}
+          nodeBorderWidth={0}
+          nodeBorderRadius={3}
+          nodeOpacity={1}
+          nodeHoverOpacity={1}
+          nodeHoverOthersOpacity={0.3}
+          linkOpacity={0.2}
+          linkHoverOpacity={0.5}
+          linkHoverOthersOpacity={0.05}
+          linkContract={1}
+          enableLinkGradient
+          enableLabels
+          label={(node) => smartLabel(pathFromId(node.id))}
+          labelPosition="outside"
+          labelPadding={12}
+          labelTextColor={labelColor}
+          isInteractive
+          onClick={handleClick}
+          nodeTooltip={({ node }) => (
+            <div className="rounded-lg px-3 py-2 text-sm shadow-lg bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700">
+              <div className="font-medium text-neutral-900 dark:text-white">
+                {pathFromId(node.id)}
+              </div>
+              <div className="text-neutral-500 dark:text-neutral-400 text-xs mt-0.5">
+                Step {node.stepIndex + 1} &middot;{' '}
+                {node.value.toLocaleString()} sessions
+              </div>
+            </div>
+          )}
+          linkTooltip={({ link }) => (
+            <div className="rounded-lg px-3 py-2 text-sm shadow-lg bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700">
+              <div className="font-medium text-neutral-900 dark:text-white">
+                {pathFromId(link.source.id)} &rarr;{' '}
+                {pathFromId(link.target.id)}
+              </div>
+              <div className="text-neutral-500 dark:text-neutral-400 text-xs mt-0.5">
+                {link.value.toLocaleString()} sessions
+              </div>
+            </div>
+          )}
+          theme={{
+            tooltip: {
+              container: {
+                background: 'transparent',
+                boxShadow: 'none',
+                padding: 0,
+              },
+            },
+          }}
+        />
+      </div>
+    </div>
+  )
+}
-- 
2.49.1


From 6f42d4d3def03204ee27dc661232cb634fab2b7c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 14:01:18 +0100
Subject: [PATCH 012/428] feat: add Columns/Flow view toggle to journeys page

---
 app/sites/[id]/journeys/page.tsx | 49 ++++++++++++++++++++++++++++----
 1 file changed, 43 insertions(+), 6 deletions(-)

diff --git a/app/sites/[id]/journeys/page.tsx b/app/sites/[id]/journeys/page.tsx
index ccf3ebc..f1ddb9d 100644
--- a/app/sites/[id]/journeys/page.tsx
+++ b/app/sites/[id]/journeys/page.tsx
@@ -2,9 +2,11 @@
 
 import { useEffect, useState } from 'react'
 import { useParams } from 'next/navigation'
+import { motion } from 'framer-motion'
 import { getDateRange, formatDate } from '@ciphera-net/ui'
 import { Select, DatePicker } from '@ciphera-net/ui'
 import ColumnJourney from '@/components/journeys/ColumnJourney'
+import SankeyJourney from '@/components/journeys/SankeyJourney'
 import TopPathsTable from '@/components/journeys/TopPathsTable'
 import { JourneysSkeleton, useMinimumLoading, useSkeletonFade } from '@/components/skeletons'
 import {
@@ -40,6 +42,7 @@ export default function JourneysPage() {
   const [depth, setDepth] = useState(DEFAULT_DEPTH)
   const [committedDepth, setCommittedDepth] = useState(DEFAULT_DEPTH)
   const [entryPath, setEntryPath] = useState('')
+  const [viewMode, setViewMode] = useState<'columns' | 'flow'>('columns')
 
   useEffect(() => {
     const t = setTimeout(() => setCommittedDepth(depth), 300)
@@ -182,15 +185,49 @@ export default function JourneysPage() {
               </button>
             </div>
           </div>
+
+          {/* View toggle */}
+          <div className="flex gap-1 mt-4 pt-4 border-t border-neutral-200 dark:border-neutral-800" role="tablist" aria-label="Journey view tabs">
+            {(['columns', 'flow'] as const).map((mode) => (
+              <button
+                key={mode}
+                onClick={() => setViewMode(mode)}
+                role="tab"
+                aria-selected={viewMode === mode}
+                className={`relative px-3 py-1 text-xs font-medium transition-colors capitalize focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded cursor-pointer ${
+                  viewMode === mode
+                    ? 'text-neutral-900 dark:text-white'
+                    : 'text-neutral-400 dark:text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300'
+                }`}
+              >
+                {mode === 'columns' ? 'Columns' : 'Flow'}
+                {viewMode === mode && (
+                  <motion.div
+                    layoutId="journeyViewTab"
+                    className="absolute inset-x-0 -bottom-px h-0.5 bg-brand-orange"
+                    transition={{ type: 'spring', stiffness: 500, damping: 35 }}
+                  />
+                )}
+              </button>
+            ))}
+          </div>
         </div>
 
-        {/* Journey Columns */}
+        {/* Journey Chart */}
         <div className="p-6">
-          <ColumnJourney
-            transitions={transitionsData?.transitions ?? []}
-            totalSessions={totalSessions}
-            depth={committedDepth}
-          />
+          {viewMode === 'columns' ? (
+            <ColumnJourney
+              transitions={transitionsData?.transitions ?? []}
+              totalSessions={totalSessions}
+              depth={committedDepth}
+            />
+          ) : (
+            <SankeyJourney
+              transitions={transitionsData?.transitions ?? []}
+              totalSessions={totalSessions}
+              depth={committedDepth}
+            />
+          )}
         </div>
 
         {/* Footer */}
-- 
2.49.1


From d3f5e6b361348a630eba0f0b42e3d8afa0bd1ce3 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 14:08:08 +0100
Subject: [PATCH 013/428] fix: disable sankey labels, reduce margins, dynamic
 height

Labels were overlapping badly with many nodes. Rely on hover
tooltips instead. Chart height now scales with node count
(400-700px range).
---
 components/journeys/SankeyJourney.tsx | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/components/journeys/SankeyJourney.tsx b/components/journeys/SankeyJourney.tsx
index aa0ff92..84875a7 100644
--- a/components/journeys/SankeyJourney.tsx
+++ b/components/journeys/SankeyJourney.tsx
@@ -280,17 +280,17 @@ export default function SankeyJourney({
         </div>
       )}
 
-      <div style={{ height: 500 }}>
+      <div style={{ height: Math.max(400, Math.min(700, data.nodes.length * 28)) }}>
         <ResponsiveSankey<SankeyNode, SankeyLink>
           data={data}
-          margin={{ top: 16, right: 140, bottom: 16, left: 140 }}
+          margin={{ top: 8, right: 8, bottom: 8, left: 8 }}
           align="justify"
           sort="descending"
           colors={(node) =>
             COLUMN_COLORS[node.stepIndex % COLUMN_COLORS.length]
           }
-          nodeThickness={14}
-          nodeSpacing={16}
+          nodeThickness={12}
+          nodeSpacing={20}
           nodeInnerPadding={0}
           nodeBorderWidth={0}
           nodeBorderRadius={3}
@@ -300,13 +300,9 @@ export default function SankeyJourney({
           linkOpacity={0.2}
           linkHoverOpacity={0.5}
           linkHoverOthersOpacity={0.05}
-          linkContract={1}
+          linkContract={2}
           enableLinkGradient
-          enableLabels
-          label={(node) => smartLabel(pathFromId(node.id))}
-          labelPosition="outside"
-          labelPadding={12}
-          labelTextColor={labelColor}
+          enableLabels={false}
           isInteractive
           onClick={handleClick}
           nodeTooltip={({ node }) => (
-- 
2.49.1


From 1aace48d7304087c5b6e53dea3f67bb43a6a9363 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 14:15:10 +0100
Subject: [PATCH 014/428] fix: cap sankey height at 500px, show labels for
 first/last steps only

---
 components/journeys/SankeyJourney.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/components/journeys/SankeyJourney.tsx b/components/journeys/SankeyJourney.tsx
index 84875a7..d1958cd 100644
--- a/components/journeys/SankeyJourney.tsx
+++ b/components/journeys/SankeyJourney.tsx
@@ -257,6 +257,9 @@ export default function SankeyJourney({
   }
 
   const labelColor = isDark ? '#a3a3a3' : '#525252'
+  const steps = data.nodes.map((n) => n.stepIndex)
+  const minStep = Math.min(...steps)
+  const maxStep = Math.max(...steps)
 
   return (
     <div>
@@ -280,10 +283,10 @@ export default function SankeyJourney({
         </div>
       )}
 
-      <div style={{ height: Math.max(400, Math.min(700, data.nodes.length * 28)) }}>
+      <div style={{ height: 500 }}>
         <ResponsiveSankey<SankeyNode, SankeyLink>
           data={data}
-          margin={{ top: 8, right: 8, bottom: 8, left: 8 }}
+          margin={{ top: 8, right: 140, bottom: 8, left: 140 }}
           align="justify"
           sort="descending"
           colors={(node) =>
@@ -302,7 +305,17 @@ export default function SankeyJourney({
           linkHoverOthersOpacity={0.05}
           linkContract={2}
           enableLinkGradient
-          enableLabels={false}
+          enableLabels
+          label={(node) => {
+            // Only show labels for first and last step columns
+            if (node.stepIndex === minStep || node.stepIndex === maxStep) {
+              return smartLabel(pathFromId(node.id))
+            }
+            return ''
+          }}
+          labelPosition="outside"
+          labelPadding={8}
+          labelTextColor={labelColor}
           isInteractive
           onClick={handleClick}
           nodeTooltip={({ node }) => (
-- 
2.49.1


From f797d89131041eb82fed47243ddf1768a7c94484 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 14:22:06 +0100
Subject: [PATCH 015/428] fix: restyle sankey to match reference - thinner
 nodes, all labels, scrollable

- Switch to fixed-width Sankey with horizontal scroll (250px per step)
- Thinner nodes (8px), tighter spacing (8px)
- Labels on all columns, not just first/last
- Lower link opacity (0.15) for cleaner look
- Increased node cap to 25 per step
---
 components/journeys/SankeyJourney.tsx | 136 +++++++++++++-------------
 1 file changed, 68 insertions(+), 68 deletions(-)

diff --git a/components/journeys/SankeyJourney.tsx b/components/journeys/SankeyJourney.tsx
index d1958cd..b084b66 100644
--- a/components/journeys/SankeyJourney.tsx
+++ b/components/journeys/SankeyJourney.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { ResponsiveSankey } from '@nivo/sankey'
+import { Sankey } from '@nivo/sankey'
 import { TreeStructure, X } from '@phosphor-icons/react'
 import type { PathTransition } from '@/lib/api/journeys'
 
@@ -36,7 +36,7 @@ const COLUMN_COLORS = [
   '#EC4899', '#06B6D4', '#EF4444', '#84CC16', '#F97316', '#6366F1',
 ]
 
-const MAX_NODES_PER_STEP = 15
+const MAX_NODES_PER_STEP = 25
 
 // ─── Helpers ────────────────────────────────────────────────────────
 
@@ -257,9 +257,11 @@ export default function SankeyJourney({
   }
 
   const labelColor = isDark ? '#a3a3a3' : '#525252'
-  const steps = data.nodes.map((n) => n.stepIndex)
-  const minStep = Math.min(...steps)
-  const maxStep = Math.max(...steps)
+
+  // Calculate dimensions: give each step ~250px of horizontal space
+  const numSteps = new Set(data.nodes.map((n) => n.stepIndex)).size
+  const chartWidth = Math.max(800, numSteps * 250)
+  const chartHeight = 500
 
   return (
     <div>
@@ -283,73 +285,71 @@ export default function SankeyJourney({
         </div>
       )}
 
-      <div style={{ height: 500 }}>
-        <ResponsiveSankey<SankeyNode, SankeyLink>
-          data={data}
-          margin={{ top: 8, right: 140, bottom: 8, left: 140 }}
-          align="justify"
-          sort="descending"
-          colors={(node) =>
-            COLUMN_COLORS[node.stepIndex % COLUMN_COLORS.length]
-          }
-          nodeThickness={12}
-          nodeSpacing={20}
-          nodeInnerPadding={0}
-          nodeBorderWidth={0}
-          nodeBorderRadius={3}
-          nodeOpacity={1}
-          nodeHoverOpacity={1}
-          nodeHoverOthersOpacity={0.3}
-          linkOpacity={0.2}
-          linkHoverOpacity={0.5}
-          linkHoverOthersOpacity={0.05}
-          linkContract={2}
-          enableLinkGradient
-          enableLabels
-          label={(node) => {
-            // Only show labels for first and last step columns
-            if (node.stepIndex === minStep || node.stepIndex === maxStep) {
-              return smartLabel(pathFromId(node.id))
+      <div className="overflow-x-auto -mx-6 px-6" style={{ maxHeight: chartHeight + 16 }}>
+        <div style={{ width: chartWidth, height: chartHeight }}>
+          <Sankey<SankeyNode, SankeyLink>
+            data={data}
+            width={chartWidth}
+            height={chartHeight}
+            margin={{ top: 8, right: 160, bottom: 8, left: 160 }}
+            align="justify"
+            sort="descending"
+            colors={(node) =>
+              COLUMN_COLORS[node.stepIndex % COLUMN_COLORS.length]
             }
-            return ''
-          }}
-          labelPosition="outside"
-          labelPadding={8}
-          labelTextColor={labelColor}
-          isInteractive
-          onClick={handleClick}
-          nodeTooltip={({ node }) => (
-            <div className="rounded-lg px-3 py-2 text-sm shadow-lg bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700">
-              <div className="font-medium text-neutral-900 dark:text-white">
-                {pathFromId(node.id)}
+            nodeThickness={8}
+            nodeSpacing={8}
+            nodeInnerPadding={0}
+            nodeBorderWidth={0}
+            nodeBorderRadius={2}
+            nodeOpacity={1}
+            nodeHoverOpacity={1}
+            nodeHoverOthersOpacity={0.3}
+            linkOpacity={0.15}
+            linkHoverOpacity={0.5}
+            linkHoverOthersOpacity={0.03}
+            linkContract={1}
+            enableLinkGradient
+            enableLabels
+            label={(node) => smartLabel(pathFromId(node.id))}
+            labelPosition="outside"
+            labelPadding={6}
+            labelTextColor={labelColor}
+            isInteractive
+            onClick={handleClick}
+            nodeTooltip={({ node }) => (
+              <div className="rounded-lg px-3 py-2 text-sm shadow-lg bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700">
+                <div className="font-medium text-neutral-900 dark:text-white">
+                  {pathFromId(node.id)}
+                </div>
+                <div className="text-neutral-500 dark:text-neutral-400 text-xs mt-0.5">
+                  Step {node.stepIndex + 1} &middot;{' '}
+                  {node.value.toLocaleString()} sessions
+                </div>
               </div>
-              <div className="text-neutral-500 dark:text-neutral-400 text-xs mt-0.5">
-                Step {node.stepIndex + 1} &middot;{' '}
-                {node.value.toLocaleString()} sessions
+            )}
+            linkTooltip={({ link }) => (
+              <div className="rounded-lg px-3 py-2 text-sm shadow-lg bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700">
+                <div className="font-medium text-neutral-900 dark:text-white">
+                  {pathFromId(link.source.id)} &rarr;{' '}
+                  {pathFromId(link.target.id)}
+                </div>
+                <div className="text-neutral-500 dark:text-neutral-400 text-xs mt-0.5">
+                  {link.value.toLocaleString()} sessions
+                </div>
               </div>
-            </div>
-          )}
-          linkTooltip={({ link }) => (
-            <div className="rounded-lg px-3 py-2 text-sm shadow-lg bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700">
-              <div className="font-medium text-neutral-900 dark:text-white">
-                {pathFromId(link.source.id)} &rarr;{' '}
-                {pathFromId(link.target.id)}
-              </div>
-              <div className="text-neutral-500 dark:text-neutral-400 text-xs mt-0.5">
-                {link.value.toLocaleString()} sessions
-              </div>
-            </div>
-          )}
-          theme={{
-            tooltip: {
-              container: {
-                background: 'transparent',
-                boxShadow: 'none',
-                padding: 0,
+            )}
+            theme={{
+              tooltip: {
+                container: {
+                  background: 'transparent',
+                  boxShadow: 'none',
+                  padding: 0,
+                },
               },
-            },
-          }}
-        />
+            }}
+          />
+        </div>
       </div>
     </div>
   )
-- 
2.49.1


From e444985295c7743b1bb1c485349fcd41b8941bad Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 16:59:37 +0100
Subject: [PATCH 016/428] refactor: extract frustration tracking into separate
 add-on script

Move rage click and dead click detection (35% of script.js) into
script.frustration.js as an optional add-on. Core script drops from
8.1KB to 5.7KB gzipped. Add-on auto-discovers core via window.pulse
polling and supports opt-out via data-no-rage/data-no-dead attributes.

- Expose cleanPath on window.pulse for add-on consumption
- Add script.frustration.js to middleware PUBLIC_ROUTES
- Update integration guides, ScriptSetupBlock, and FrustrationTable
  empty state to reference the add-on script
---
 components/IntegrationGuide.tsx          |  12 +
 components/behavior/FrustrationTable.tsx |   5 +-
 components/sites/ScriptSetupBlock.tsx    |   3 +
 middleware.ts                            |   1 +
 public/script.frustration.js             | 313 +++++++++++++++++++++++
 public/script.js                         | 271 +-------------------
 6 files changed, 334 insertions(+), 271 deletions(-)
 create mode 100644 public/script.frustration.js

diff --git a/components/IntegrationGuide.tsx b/components/IntegrationGuide.tsx
index efca796..fb53861 100644
--- a/components/IntegrationGuide.tsx
+++ b/components/IntegrationGuide.tsx
@@ -67,6 +67,18 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
 
         <div className="prose prose-neutral dark:prose-invert max-w-none">
           {children}
+
+          <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
+          <h3>Optional: Frustration Tracking</h3>
+          <p>
+            Detect rage clicks and dead clicks by adding the frustration tracking
+            add-on after the core script:
+          </p>
+          <pre><code>{`<script defer src="https://pulse.ciphera.net/script.frustration.js"></script>`}</code></pre>
+          <p>
+            No extra configuration needed. Add <code>data-no-rage</code> or{' '}
+            <code>data-no-dead</code> to disable individual signals.
+          </p>
         </div>
 
         {/* * --- Related Integrations --- */}
diff --git a/components/behavior/FrustrationTable.tsx b/components/behavior/FrustrationTable.tsx
index 8294b95..916b749 100644
--- a/components/behavior/FrustrationTable.tsx
+++ b/components/behavior/FrustrationTable.tsx
@@ -184,8 +184,11 @@ export default function FrustrationTable({
                 No {title.toLowerCase()} detected
               </h4>
               <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-md">
-                {description}. Data will appear here once frustration signals are detected on your site.
+                Frustration tracking requires the add-on script. Add it after your core Pulse script:
               </p>
+              <code className="text-xs bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 px-3 py-2 rounded-lg font-mono break-all">
+                {'<script defer src="https://pulse.ciphera.net/script.frustration.js"></script>'}
+              </code>
             </div>
           )}
         </div>
diff --git a/components/sites/ScriptSetupBlock.tsx b/components/sites/ScriptSetupBlock.tsx
index b853f27..fe3c44d 100644
--- a/components/sites/ScriptSetupBlock.tsx
+++ b/components/sites/ScriptSetupBlock.tsx
@@ -92,6 +92,9 @@ export default function ScriptSetupBlock({
         <p className="mt-2 text-xs text-neutral-500 dark:text-neutral-400">
           Default: cross-tab (localStorage). Optional: <code className="rounded px-1 bg-neutral-200 dark:bg-neutral-700">data-storage=&quot;session&quot;</code> to opt out (per-tab, ephemeral). Optional: <code className="rounded px-1 bg-neutral-200 dark:bg-neutral-700">data-storage-ttl=&quot;48&quot;</code> to set expiry in hours (default: 24).
         </p>
+        <p className="mt-1.5 text-xs text-neutral-500 dark:text-neutral-400">
+          Optional: add <code className="rounded px-1 bg-neutral-200 dark:bg-neutral-700">{`<script defer src="${APP_URL}/script.frustration.js"></script>`}</code> for rage click and dead click detection.
+        </p>
         <button
           type="button"
           onClick={copyScript}
diff --git a/middleware.ts b/middleware.ts
index 9241a5f..0a344a3 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -13,6 +13,7 @@ const PUBLIC_ROUTES = new Set([
   '/changelog',
   '/installation',
   '/script.js', // * Tracking script – must load without auth for embedded sites (Shopify, etc.)
+  '/script.frustration.js', // * Frustration tracking add-on (rage clicks, dead clicks)
 ])
 
 const PUBLIC_PREFIXES = [
diff --git a/public/script.frustration.js b/public/script.frustration.js
new file mode 100644
index 0000000..0339153
--- /dev/null
+++ b/public/script.frustration.js
@@ -0,0 +1,313 @@
+/**
+ * Pulse Frustration Tracking Add-on
+ * Detects rage clicks and dead clicks. Requires the core Pulse script.
+ * Opt-out: add data-no-rage or data-no-dead to either script tag.
+ */
+(function() {
+  'use strict';
+
+  // * Capture own script tag for opt-out attributes (must be at parse time)
+  // * Fallback to querySelector for dynamic insertion (e.g. tag managers) where currentScript is null
+  var addonScript = document.currentScript || document.querySelector('script[src*="script.frustration"]');
+
+  var MAX_WAIT = 5000;
+  var POLL_INTERVAL = 50;
+  var waited = 0;
+
+  function init() {
+    var pulse = window.pulse;
+    if (!pulse || typeof pulse.track !== 'function' || typeof pulse.cleanPath !== 'function') {
+      waited += POLL_INTERVAL;
+      if (waited < MAX_WAIT) {
+        setTimeout(init, POLL_INTERVAL);
+      } else {
+        if (typeof console !== 'undefined' && console.warn) {
+          console.warn('Pulse frustration add-on: core script not detected. Frustration tracking disabled.');
+        }
+      }
+      return;
+    }
+
+    var trackCustomEvent = pulse.track;
+    var cleanPath = pulse.cleanPath;
+
+    // * Check opt-out attributes on both the add-on script tag and the core script tag
+    var coreScript = document.querySelector('script[data-domain]');
+
+    function hasOptOut(attr) {
+      return (addonScript && addonScript.hasAttribute(attr)) ||
+             (coreScript && coreScript.hasAttribute(attr));
+    }
+
+    // * Strip HTML tags from a string (used for sanitizing attribute values)
+    function stripHtml(str) {
+      if (typeof str !== 'string') return '';
+      return str.replace(/<[^>]*>/g, '').trim();
+    }
+
+    // * Build a compact element identifier string for frustration tracking
+    // * Format: tag#id.class1.class2[href="/path"]
+    function getElementIdentifier(el) {
+      if (!el || !el.tagName) return '';
+      var result = el.tagName.toLowerCase();
+
+      // * Add #id if present
+      if (el.id) {
+        result += '#' + stripHtml(el.id);
+      }
+
+      // * Add classes (handle SVG elements where className is SVGAnimatedString)
+      var rawClassName = el.className;
+      if (rawClassName && typeof rawClassName !== 'string' && rawClassName.baseVal !== undefined) {
+        rawClassName = rawClassName.baseVal;
+      }
+      if (typeof rawClassName === 'string' && rawClassName.trim()) {
+        var classes = rawClassName.trim().split(/\s+/);
+        var filtered = [];
+        for (var ci = 0; ci < classes.length && filtered.length < 5; ci++) {
+          var cls = classes[ci];
+          if (cls.length > 50) continue;
+          if (/^(ng-|js-|is-|has-|animate)/.test(cls)) continue;
+          filtered.push(cls);
+        }
+        if (filtered.length > 0) {
+          result += '.' + filtered.join('.');
+        }
+      }
+
+      // * Add key attributes
+      var attrs = ['href', 'role', 'type', 'name', 'data-action'];
+      for (var ai = 0; ai < attrs.length; ai++) {
+        var attrName = attrs[ai];
+        var attrVal = el.getAttribute(attrName);
+        if (attrVal !== null && attrVal !== '') {
+          var sanitized = stripHtml(attrVal);
+          if (sanitized.length > 50) sanitized = sanitized.substring(0, 50);
+          result += '[' + attrName + '="' + sanitized + '"]';
+        }
+      }
+
+      // * Truncate to max 200 chars
+      if (result.length > 200) {
+        result = result.substring(0, 200);
+      }
+
+      return result;
+    }
+
+    // * Auto-track rage clicks (rapid repeated clicks on the same element)
+    // * Fires rage_click when same element is clicked 3+ times within 800ms
+    if (!hasOptOut('data-no-rage')) {
+      var rageClickHistory = {};  // * selector -> { times: [timestamps], lastFired: 0 }
+      var RAGE_CLICK_THRESHOLD = 3;
+      var RAGE_CLICK_WINDOW = 800;
+      var RAGE_CLICK_DEBOUNCE = 5000;
+      var RAGE_CLEANUP_INTERVAL = 10000;
+
+      // * Cleanup stale rage click entries every 10 seconds
+      setInterval(function() {
+        var now = Date.now();
+        for (var key in rageClickHistory) {
+          if (!rageClickHistory.hasOwnProperty(key)) continue;
+          var entry = rageClickHistory[key];
+          // * Remove if last click was more than 10 seconds ago
+          if (entry.times.length === 0 || now - entry.times[entry.times.length - 1] > RAGE_CLEANUP_INTERVAL) {
+            delete rageClickHistory[key];
+          }
+        }
+      }, RAGE_CLEANUP_INTERVAL);
+
+      document.addEventListener('click', function(e) {
+        var el = e.target;
+        if (!el || !el.tagName) return;
+
+        var selector = getElementIdentifier(el);
+        if (!selector) return;
+
+        var now = Date.now();
+        var currentPath = cleanPath();
+
+        if (!rageClickHistory[selector]) {
+          rageClickHistory[selector] = { times: [], lastFired: 0 };
+        }
+
+        var entry = rageClickHistory[selector];
+
+        // * Add current click timestamp
+        entry.times.push(now);
+
+        // * Remove clicks outside the time window
+        while (entry.times.length > 0 && now - entry.times[0] > RAGE_CLICK_WINDOW) {
+          entry.times.shift();
+        }
+
+        // * Check if rage click threshold is met
+        if (entry.times.length >= RAGE_CLICK_THRESHOLD) {
+          // * Skip if user is selecting text (triple-click to select paragraph)
+          try {
+            var sel = window.getSelection();
+            if (sel && sel.toString().trim().length > 0) {
+              entry.times = [];
+              return;
+            }
+          } catch (ex) {}
+
+          // * Debounce: max one rage_click per element per 5 seconds
+          if (now - entry.lastFired >= RAGE_CLICK_DEBOUNCE) {
+            var clickCount = entry.times.length;
+            trackCustomEvent('rage_click', {
+              selector: selector,
+              click_count: String(clickCount),
+              page_path: currentPath,
+              x: String(Math.round(e.clientX)),
+              y: String(Math.round(e.clientY))
+            });
+            entry.lastFired = now;
+          }
+          // * Reset tracker after firing or debounce skip
+          entry.times = [];
+        }
+      }, true); // * Capture phase
+    }
+
+    // * Auto-track dead clicks (clicks on interactive elements that produce no effect)
+    // * Fires dead_click when an interactive element is clicked but no DOM change, navigation,
+    // * or network request occurs within 1 second
+    if (!hasOptOut('data-no-dead')) {
+      var INTERACTIVE_SELECTOR = 'a,button,input,select,textarea,[role="button"],[role="link"],[role="tab"],[role="menuitem"],[onclick],[tabindex]:not([tabindex="-1"])';
+      var DEAD_CLICK_DEBOUNCE = 10000;
+      var DEAD_CLEANUP_INTERVAL = 30000;
+      var deadClickDebounce = {}; // * selector -> lastFiredTimestamp
+
+      // * Cleanup stale dead click debounce entries every 30 seconds
+      setInterval(function() {
+        var now = Date.now();
+        for (var key in deadClickDebounce) {
+          if (!deadClickDebounce.hasOwnProperty(key)) continue;
+          if (now - deadClickDebounce[key] > DEAD_CLEANUP_INTERVAL) {
+            delete deadClickDebounce[key];
+          }
+        }
+      }, DEAD_CLEANUP_INTERVAL);
+
+      // * Polyfill check for Element.matches
+      var matchesFn = (function() {
+        var ep = Element.prototype;
+        return ep.matches || ep.msMatchesSelector || ep.webkitMatchesSelector || null;
+      })();
+
+      // * Find the nearest interactive element by walking up max 3 levels
+      function findInteractiveElement(el) {
+        if (!matchesFn) return null;
+        var depth = 0;
+        var current = el;
+        while (current && depth <= 3) {
+          if (current.nodeType === 1 && matchesFn.call(current, INTERACTIVE_SELECTOR)) {
+            return current;
+          }
+          current = current.parentElement;
+          depth++;
+        }
+        return null;
+      }
+
+      document.addEventListener('click', function(e) {
+        var target = findInteractiveElement(e.target);
+        if (!target) return;
+
+        // * Skip form inputs — clicking to focus/interact is expected, not a dead click
+        var tag = target.tagName;
+        if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
+
+        var selector = getElementIdentifier(target);
+        if (!selector) return;
+
+        var now = Date.now();
+
+        // * Debounce: max one dead_click per element per 10 seconds
+        if (deadClickDebounce[selector] && now - deadClickDebounce[selector] < DEAD_CLICK_DEBOUNCE) {
+          return;
+        }
+
+        var currentPath = cleanPath();
+        var clickX = String(Math.round(e.clientX));
+        var clickY = String(Math.round(e.clientY));
+        var effectDetected = false;
+        var hrefBefore = location.href;
+        var mutationObs = null;
+        var perfObs = null;
+        var cleanupTimer = null;
+        var popstateHandler = null;
+        var hashchangeHandler = null;
+
+        function cleanup() {
+          if (mutationObs) { try { mutationObs.disconnect(); } catch (ex) {} mutationObs = null; }
+          if (perfObs) { try { perfObs.disconnect(); } catch (ex) {} perfObs = null; }
+          if (cleanupTimer) { clearTimeout(cleanupTimer); cleanupTimer = null; }
+          if (popstateHandler) { window.removeEventListener('popstate', popstateHandler); popstateHandler = null; }
+          if (hashchangeHandler) { window.removeEventListener('hashchange', hashchangeHandler); hashchangeHandler = null; }
+        }
+
+        function onEffect() {
+          effectDetected = true;
+          cleanup();
+        }
+
+        // * Set up MutationObserver to detect DOM changes on the element, its parent, and body
+        if (typeof MutationObserver !== 'undefined') {
+          try {
+            mutationObs = new MutationObserver(function() {
+              onEffect();
+            });
+            var mutOpts = { childList: true, attributes: true, characterData: true, subtree: true };
+            mutationObs.observe(target, mutOpts);
+            var parent = target.parentElement;
+            if (parent && parent.tagName !== 'HTML' && parent.tagName !== 'BODY') {
+              mutationObs.observe(parent, { childList: true });
+            }
+            // * Also observe body for top-level DOM changes (modals, drawers, overlays, toasts)
+            mutationObs.observe(document.body, { childList: true, attributes: true });
+          } catch (ex) {
+            mutationObs = null;
+          }
+        }
+
+        // * Set up PerformanceObserver to detect network requests
+        if (typeof PerformanceObserver !== 'undefined') {
+          try {
+            perfObs = new PerformanceObserver(function() {
+              onEffect();
+            });
+            perfObs.observe({ type: 'resource' });
+          } catch (ex) {
+            perfObs = null;
+          }
+        }
+
+        // * Listen for SPA navigation events (popstate, hashchange)
+        popstateHandler = function() { onEffect(); };
+        hashchangeHandler = function() { onEffect(); };
+        window.addEventListener('popstate', popstateHandler);
+        window.addEventListener('hashchange', hashchangeHandler);
+
+        // * After 1 second, check if any effect was detected
+        cleanupTimer = setTimeout(function() {
+          cleanup();
+          // * Also check if navigation occurred
+          if (effectDetected || location.href !== hrefBefore) return;
+
+          deadClickDebounce[selector] = Date.now();
+          trackCustomEvent('dead_click', {
+            selector: selector,
+            page_path: currentPath,
+            x: clickX,
+            y: clickY
+          });
+        }, 1000);
+      }, true); // * Capture phase
+    }
+  }
+
+  // * Start immediately — if core is already loaded, init succeeds on the first call
+  init();
+})();
diff --git a/public/script.js b/public/script.js
index 246be40..f66f4c8 100644
--- a/public/script.js
+++ b/public/script.js
@@ -417,6 +417,7 @@
   // * Expose pulse.track() for custom events (e.g. pulse.track('signup_click'))
   window.pulse = window.pulse || {};
   window.pulse.track = trackCustomEvent;
+  window.pulse.cleanPath = cleanPath;
 
   // * Auto-track 404 error pages (on by default)
   // * Detects pages where document.title contains "404" or "not found"
@@ -474,276 +475,6 @@
     }, { passive: true });
   }
 
-  // * Strip HTML tags from a string (used for sanitizing attribute values)
-  function stripHtml(str) {
-    if (typeof str !== 'string') return '';
-    return str.replace(/<[^>]*>/g, '').trim();
-  }
-
-  // * Build a compact element identifier string for frustration tracking
-  // * Format: tag#id.class1.class2[href="/path"]
-  function getElementIdentifier(el) {
-    if (!el || !el.tagName) return '';
-    var result = el.tagName.toLowerCase();
-
-    // * Add #id if present
-    if (el.id) {
-      result += '#' + stripHtml(el.id);
-    }
-
-    // * Add classes (handle SVG elements where className is SVGAnimatedString)
-    var rawClassName = el.className;
-    if (rawClassName && typeof rawClassName !== 'string' && rawClassName.baseVal !== undefined) {
-      rawClassName = rawClassName.baseVal;
-    }
-    if (typeof rawClassName === 'string' && rawClassName.trim()) {
-      var classes = rawClassName.trim().split(/\s+/);
-      var filtered = [];
-      for (var ci = 0; ci < classes.length && filtered.length < 5; ci++) {
-        var cls = classes[ci];
-        if (cls.length > 50) continue;
-        if (/^(ng-|js-|is-|has-|animate)/.test(cls)) continue;
-        filtered.push(cls);
-      }
-      if (filtered.length > 0) {
-        result += '.' + filtered.join('.');
-      }
-    }
-
-    // * Add key attributes
-    var attrs = ['href', 'role', 'type', 'name', 'data-action'];
-    for (var ai = 0; ai < attrs.length; ai++) {
-      var attrName = attrs[ai];
-      var attrVal = el.getAttribute(attrName);
-      if (attrVal !== null && attrVal !== '') {
-        var sanitized = stripHtml(attrVal);
-        if (sanitized.length > 50) sanitized = sanitized.substring(0, 50);
-        result += '[' + attrName + '="' + sanitized + '"]';
-      }
-    }
-
-    // * Truncate to max 200 chars
-    if (result.length > 200) {
-      result = result.substring(0, 200);
-    }
-
-    return result;
-  }
-
-  // * Auto-track rage clicks (rapid repeated clicks on the same element)
-  // * Fires rage_click when same element is clicked 3+ times within 800ms
-  // * Opt-out: add data-no-rage to the script tag
-  if (!script.hasAttribute('data-no-rage')) {
-    var rageClickHistory = {};  // * selector -> { times: [timestamps], lastFired: 0 }
-    var RAGE_CLICK_THRESHOLD = 3;
-    var RAGE_CLICK_WINDOW = 800;
-    var RAGE_CLICK_DEBOUNCE = 5000;
-    var RAGE_CLEANUP_INTERVAL = 10000;
-
-    // * Cleanup stale rage click entries every 10 seconds
-    setInterval(function() {
-      var now = Date.now();
-      for (var key in rageClickHistory) {
-        if (!rageClickHistory.hasOwnProperty(key)) continue;
-        var entry = rageClickHistory[key];
-        // * Remove if last click was more than 10 seconds ago
-        if (entry.times.length === 0 || now - entry.times[entry.times.length - 1] > RAGE_CLEANUP_INTERVAL) {
-          delete rageClickHistory[key];
-        }
-      }
-    }, RAGE_CLEANUP_INTERVAL);
-
-    document.addEventListener('click', function(e) {
-      var el = e.target;
-      if (!el || !el.tagName) return;
-
-      var selector = getElementIdentifier(el);
-      if (!selector) return;
-
-      var now = Date.now();
-      var currentPath = cleanPath();
-
-      if (!rageClickHistory[selector]) {
-        rageClickHistory[selector] = { times: [], lastFired: 0 };
-      }
-
-      var entry = rageClickHistory[selector];
-
-      // * Add current click timestamp
-      entry.times.push(now);
-
-      // * Remove clicks outside the time window
-      while (entry.times.length > 0 && now - entry.times[0] > RAGE_CLICK_WINDOW) {
-        entry.times.shift();
-      }
-
-      // * Check if rage click threshold is met
-      if (entry.times.length >= RAGE_CLICK_THRESHOLD) {
-        // * Skip if user is selecting text (triple-click to select paragraph)
-        try {
-          var sel = window.getSelection();
-          if (sel && sel.toString().trim().length > 0) {
-            entry.times = [];
-            return;
-          }
-        } catch (ex) {}
-
-        // * Debounce: max one rage_click per element per 5 seconds
-        if (now - entry.lastFired >= RAGE_CLICK_DEBOUNCE) {
-          var clickCount = entry.times.length;
-          trackCustomEvent('rage_click', {
-            selector: selector,
-            click_count: String(clickCount),
-            page_path: currentPath,
-            x: String(Math.round(e.clientX)),
-            y: String(Math.round(e.clientY))
-          });
-          entry.lastFired = now;
-        }
-        // * Reset tracker after firing or debounce skip
-        entry.times = [];
-      }
-    }, true); // * Capture phase
-  }
-
-  // * Auto-track dead clicks (clicks on interactive elements that produce no effect)
-  // * Fires dead_click when an interactive element is clicked but no DOM change, navigation,
-  // * or network request occurs within 1 second
-  // * Opt-out: add data-no-dead to the script tag
-  if (!script.hasAttribute('data-no-dead')) {
-    var INTERACTIVE_SELECTOR = 'a,button,input,select,textarea,[role="button"],[role="link"],[role="tab"],[role="menuitem"],[onclick],[tabindex]:not([tabindex="-1"])';
-    var DEAD_CLICK_DEBOUNCE = 10000;
-    var DEAD_CLEANUP_INTERVAL = 30000;
-    var deadClickDebounce = {}; // * selector -> lastFiredTimestamp
-
-    // * Cleanup stale dead click debounce entries every 30 seconds
-    setInterval(function() {
-      var now = Date.now();
-      for (var key in deadClickDebounce) {
-        if (!deadClickDebounce.hasOwnProperty(key)) continue;
-        if (now - deadClickDebounce[key] > DEAD_CLEANUP_INTERVAL) {
-          delete deadClickDebounce[key];
-        }
-      }
-    }, DEAD_CLEANUP_INTERVAL);
-
-    // * Polyfill check for Element.matches
-    var matchesFn = (function() {
-      var ep = Element.prototype;
-      return ep.matches || ep.msMatchesSelector || ep.webkitMatchesSelector || null;
-    })();
-
-    // * Find the nearest interactive element by walking up max 3 levels
-    function findInteractiveElement(el) {
-      if (!matchesFn) return null;
-      var depth = 0;
-      var current = el;
-      while (current && depth <= 3) {
-        if (current.nodeType === 1 && matchesFn.call(current, INTERACTIVE_SELECTOR)) {
-          return current;
-        }
-        current = current.parentElement;
-        depth++;
-      }
-      return null;
-    }
-
-    document.addEventListener('click', function(e) {
-      var target = findInteractiveElement(e.target);
-      if (!target) return;
-
-      // * Skip form inputs — clicking to focus/interact is expected, not a dead click
-      var tag = target.tagName;
-      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
-
-      var selector = getElementIdentifier(target);
-      if (!selector) return;
-
-      var now = Date.now();
-
-      // * Debounce: max one dead_click per element per 10 seconds
-      if (deadClickDebounce[selector] && now - deadClickDebounce[selector] < DEAD_CLICK_DEBOUNCE) {
-        return;
-      }
-
-      var currentPath = cleanPath();
-      var clickX = String(Math.round(e.clientX));
-      var clickY = String(Math.round(e.clientY));
-      var effectDetected = false;
-      var hrefBefore = location.href;
-      var mutationObs = null;
-      var perfObs = null;
-      var cleanupTimer = null;
-      var popstateHandler = null;
-      var hashchangeHandler = null;
-
-      function cleanup() {
-        if (mutationObs) { try { mutationObs.disconnect(); } catch (ex) {} mutationObs = null; }
-        if (perfObs) { try { perfObs.disconnect(); } catch (ex) {} perfObs = null; }
-        if (cleanupTimer) { clearTimeout(cleanupTimer); cleanupTimer = null; }
-        if (popstateHandler) { window.removeEventListener('popstate', popstateHandler); popstateHandler = null; }
-        if (hashchangeHandler) { window.removeEventListener('hashchange', hashchangeHandler); hashchangeHandler = null; }
-      }
-
-      function onEffect() {
-        effectDetected = true;
-        cleanup();
-      }
-
-      // * Set up MutationObserver to detect DOM changes on the element, its parent, and body
-      if (typeof MutationObserver !== 'undefined') {
-        try {
-          mutationObs = new MutationObserver(function() {
-            onEffect();
-          });
-          var mutOpts = { childList: true, attributes: true, characterData: true, subtree: true };
-          mutationObs.observe(target, mutOpts);
-          var parent = target.parentElement;
-          if (parent && parent.tagName !== 'HTML' && parent.tagName !== 'BODY') {
-            mutationObs.observe(parent, { childList: true });
-          }
-          // * Also observe body for top-level DOM changes (modals, drawers, overlays, toasts)
-          mutationObs.observe(document.body, { childList: true, attributes: true });
-        } catch (ex) {
-          mutationObs = null;
-        }
-      }
-
-      // * Set up PerformanceObserver to detect network requests
-      if (typeof PerformanceObserver !== 'undefined') {
-        try {
-          perfObs = new PerformanceObserver(function() {
-            onEffect();
-          });
-          perfObs.observe({ type: 'resource' });
-        } catch (ex) {
-          perfObs = null;
-        }
-      }
-
-      // * Listen for SPA navigation events (popstate, hashchange)
-      popstateHandler = function() { onEffect(); };
-      hashchangeHandler = function() { onEffect(); };
-      window.addEventListener('popstate', popstateHandler);
-      window.addEventListener('hashchange', hashchangeHandler);
-
-      // * After 1 second, check if any effect was detected
-      cleanupTimer = setTimeout(function() {
-        cleanup();
-        // * Also check if navigation occurred
-        if (effectDetected || location.href !== hrefBefore) return;
-
-        deadClickDebounce[selector] = Date.now();
-        trackCustomEvent('dead_click', {
-          selector: selector,
-          page_path: currentPath,
-          x: clickX,
-          y: clickY
-        });
-      }, 1000);
-    }, true); // * Capture phase
-  }
-
   // * Auto-track outbound link clicks and file downloads (on by default)
   // * Opt-out: add data-no-outbound or data-no-downloads to the script tag
   var trackOutbound = !script.hasAttribute('data-no-outbound');
-- 
2.49.1


From 16020a166c0de4892aad776f642285ac4f11b5e3 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 17:14:13 +0100
Subject: [PATCH 017/428] feat: redesign ScriptSetupBlock with feature toggles
 and dynamic script builder

Replace framework grid + static code block with:
- Dark terminal-style code block that updates in real-time
- Feature toggle switches (scroll depth, 404, outbound, downloads)
- Frustration tracking toggle (visually distinct as add-on)
- Storage mode + TTL dropdowns (TTL hides when per-tab selected)
- Compact framework dropdown replacing 10-button grid
---
 components/sites/ScriptSetupBlock.tsx | 296 ++++++++++++++++++--------
 1 file changed, 211 insertions(+), 85 deletions(-)

diff --git a/components/sites/ScriptSetupBlock.tsx b/components/sites/ScriptSetupBlock.tsx
index fe3c44d..08874e8 100644
--- a/components/sites/ScriptSetupBlock.tsx
+++ b/components/sites/ScriptSetupBlock.tsx
@@ -1,18 +1,44 @@
 'use client'
 
 /**
- * Shared block: framework picker, tracking script snippet with copy, and integration guide links.
+ * Shared block: script snippet with feature toggles, storage config, and framework guide link.
  * Used on welcome (step 5), /sites/new (step 2), and site settings.
  */
 
-import { useState, useCallback } from 'react'
+import { useState, useCallback, useMemo } from 'react'
 import Link from 'next/link'
 import { API_URL, APP_URL } from '@/lib/api/client'
 import { integrations, getIntegration } from '@/lib/integrations'
-import { toast } from '@ciphera-net/ui'
-import { CheckIcon } from '@ciphera-net/ui'
+import { toast, Toggle, Select, CheckIcon } from '@ciphera-net/ui'
 
-const POPULAR_INTEGRATIONS = integrations.filter((i) => i.category === 'framework').slice(0, 10)
+const FRAMEWORK_OPTIONS = [
+  { value: '', label: 'Choose framework' },
+  ...integrations
+    .filter((i) => i.category === 'framework')
+    .slice(0, 10)
+    .map((i) => ({ value: i.id, label: i.name })),
+]
+
+const STORAGE_OPTIONS = [
+  { value: 'local', label: 'Cross-tab (localStorage)' },
+  { value: 'session', label: 'Per-tab (sessionStorage)' },
+]
+
+const TTL_OPTIONS = [
+  { value: '24', label: '24 hours' },
+  { value: '48', label: '48 hours' },
+  { value: '168', label: '7 days' },
+  { value: '720', label: '30 days' },
+]
+
+const FEATURES = [
+  { key: 'scroll', label: 'Scroll depth', description: 'Track 25 / 50 / 75 / 100%', attr: 'data-no-scroll' },
+  { key: '404', label: '404 detection', description: 'Auto-detect error pages', attr: 'data-no-404' },
+  { key: 'outbound', label: 'Outbound links', description: 'Track external link clicks', attr: 'data-no-outbound' },
+  { key: 'downloads', label: 'File downloads', description: 'Track PDF, ZIP, and more', attr: 'data-no-downloads' },
+] as const
+
+type FeatureKey = (typeof FEATURES)[number]['key'] | 'frustration'
 
 export interface ScriptSetupBlockSite {
   domain: string
@@ -24,7 +50,7 @@ interface ScriptSetupBlockProps {
   site: ScriptSetupBlockSite
   /** Called when user copies the script (e.g. for analytics). */
   onScriptCopy?: () => void
-  /** Show framework picker and "View all integrations" / "See full guide" links. Default true. */
+  /** Show framework picker. Default true. */
   showFrameworkPicker?: boolean
   /** Optional class for the root wrapper. */
   className?: string
@@ -36,94 +62,194 @@ export default function ScriptSetupBlock({
   showFrameworkPicker = true,
   className = '',
 }: ScriptSetupBlockProps) {
-  const [selectedIntegrationSlug, setSelectedIntegrationSlug] = useState<string | null>(null)
-  const [scriptCopied, setScriptCopied] = useState(false)
+  const [features, setFeatures] = useState<Record<FeatureKey, boolean>>({
+    scroll: true,
+    '404': true,
+    outbound: true,
+    downloads: true,
+    frustration: false,
+  })
+  const [storage, setStorage] = useState('local')
+  const [ttl, setTtl] = useState('24')
+  const [framework, setFramework] = useState('')
+  const [copied, setCopied] = useState(false)
+
+  // * Build the script snippet dynamically based on toggles
+  const scriptSnippet = useMemo(() => {
+    const attrs: string[] = [
+      'defer',
+      `data-domain="${site.domain}"`,
+      `data-api="${API_URL}"`,
+    ]
+    if (storage === 'session') attrs.push('data-storage="session"')
+    if (storage === 'local' && ttl !== '24') attrs.push(`data-storage-ttl="${ttl}"`)
+    for (const f of FEATURES) {
+      if (!features[f.key]) attrs.push(f.attr)
+    }
+    attrs.push(`src="${APP_URL}/script.js"`)
+    let script = `<script ${attrs.join(' ')}></script>`
+    if (features.frustration) {
+      script += `\n<script defer src="${APP_URL}/script.frustration.js"></script>`
+    }
+    return script
+  }, [site.domain, features, storage, ttl])
 
   const copyScript = useCallback(() => {
-    const script = `<script defer data-domain="${site.domain}" data-api="${API_URL}" src="${APP_URL}/script.js"></script>`
-    navigator.clipboard.writeText(script)
-    setScriptCopied(true)
+    navigator.clipboard.writeText(scriptSnippet)
+    setCopied(true)
     toast.success('Script copied to clipboard')
     onScriptCopy?.()
-    setTimeout(() => setScriptCopied(false), 2000)
-  }, [site.domain, onScriptCopy])
+    setTimeout(() => setCopied(false), 2000)
+  }, [scriptSnippet, onScriptCopy])
+
+  const toggleFeature = (key: FeatureKey) => {
+    setFeatures((prev) => ({ ...prev, [key]: !prev[key] }))
+  }
+
+  const selectedIntegration = framework ? getIntegration(framework) : null
 
   return (
     <div className={className}>
-      {showFrameworkPicker && (
-        <>
-          <h3 className="text-sm font-semibold text-neutral-900 dark:text-white mb-1">
-            Add the script to your site
-          </h3>
-          <p className="text-xs text-neutral-500 dark:text-neutral-400 mb-3">
-            Choose your framework for setup instructions.
-          </p>
-          <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 mb-4">
-            {POPULAR_INTEGRATIONS.map((int) => (
-              <button
-                key={int.id}
-                type="button"
-                onClick={() => setSelectedIntegrationSlug(selectedIntegrationSlug === int.id ? null : int.id)}
-                className={`flex items-center gap-2 rounded-lg border px-3 py-2.5 text-left text-sm transition-colors ${
-                  selectedIntegrationSlug === int.id
-                    ? 'border-brand-orange bg-brand-orange/10 text-brand-orange'
-                    : 'border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800/50 hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-700 dark:text-neutral-300'
-                }`}
-              >
-                <span className="[&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0 flex items-center justify-center">
-                  {int.icon}
-                </span>
-                <span className="truncate font-medium">{int.name}</span>
-              </button>
-            ))}
-          </div>
-          <p className="text-xs text-neutral-500 dark:text-neutral-400 mb-2">
-            <Link href="/integrations" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-              View all integrations →
-            </Link>
-          </p>
-        </>
-      )}
-
-      <div className="rounded-xl bg-neutral-100 dark:bg-neutral-800 p-4 relative group">
-        <code className="text-xs text-neutral-900 dark:text-white break-all font-mono block pr-10">
-          {`<script defer data-domain="${site.domain}" data-api="${API_URL}" src="${APP_URL}/script.js"></script>`}
-        </code>
-        <p className="mt-2 text-xs text-neutral-500 dark:text-neutral-400">
-          Default: cross-tab (localStorage). Optional: <code className="rounded px-1 bg-neutral-200 dark:bg-neutral-700">data-storage=&quot;session&quot;</code> to opt out (per-tab, ephemeral). Optional: <code className="rounded px-1 bg-neutral-200 dark:bg-neutral-700">data-storage-ttl=&quot;48&quot;</code> to set expiry in hours (default: 24).
-        </p>
-        <p className="mt-1.5 text-xs text-neutral-500 dark:text-neutral-400">
-          Optional: add <code className="rounded px-1 bg-neutral-200 dark:bg-neutral-700">{`<script defer src="${APP_URL}/script.frustration.js"></script>`}</code> for rage click and dead click detection.
-        </p>
-        <button
-          type="button"
-          onClick={copyScript}
-          className="absolute top-2 right-2 p-2 bg-white dark:bg-neutral-700 rounded-lg shadow-sm hover:bg-neutral-50 dark:hover:bg-neutral-600 transition-colors"
-          title="Copy script"
-          aria-label={scriptCopied ? 'Copied' : 'Copy script to clipboard'}
-        >
-          {scriptCopied ? (
-            <CheckIcon className="w-4 h-4 text-green-500" />
-          ) : (
-            <svg className="w-4 h-4 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <rect x="9" y="9" width="13" height="13" rx="2" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-              <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-            </svg>
-          )}
-        </button>
+      {/* ── Script snippet ──────────────────────────────────────────────── */}
+      <div className="rounded-2xl border border-neutral-800 bg-neutral-950 overflow-hidden">
+        <div className="flex items-center justify-between px-5 py-3 border-b border-neutral-800">
+          <span className="text-xs font-medium text-neutral-400 uppercase tracking-wider">
+            Your tracking script
+          </span>
+          <button
+            type="button"
+            onClick={copyScript}
+            className="flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-lg transition-colors cursor-pointer bg-neutral-800 hover:bg-neutral-700 text-neutral-300 hover:text-white"
+          >
+            {copied ? (
+              <>
+                <CheckIcon className="w-3.5 h-3.5 text-green-400" />
+                <span className="text-green-400">Copied</span>
+              </>
+            ) : (
+              <>
+                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <rect x="9" y="9" width="13" height="13" rx="2" strokeLinecap="round" strokeLinejoin="round" />
+                  <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+                Copy
+              </>
+            )}
+          </button>
+        </div>
+        <pre className="px-5 py-4 text-[13px] leading-relaxed font-mono text-neutral-200 whitespace-pre-wrap break-all overflow-x-auto">
+          {scriptSnippet}
+        </pre>
       </div>
 
-      {showFrameworkPicker && selectedIntegrationSlug && getIntegration(selectedIntegrationSlug) && (
-        <p className="mt-3 text-xs">
-          <Link
-            href={`/integrations/${selectedIntegrationSlug}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-brand-orange hover:underline"
-          >
-            See full {getIntegration(selectedIntegrationSlug)!.name} guide →
-          </Link>
-        </p>
+      {/* ── Feature toggles ─────────────────────────────────────────────── */}
+      <div className="mt-6">
+        <h4 className="text-sm font-semibold text-neutral-900 dark:text-white mb-3">
+          Features
+        </h4>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          {FEATURES.map((f) => (
+            <div
+              key={f.key}
+              className="flex items-center justify-between rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 py-3"
+            >
+              <div className="min-w-0 mr-3">
+                <span className="text-sm font-medium text-neutral-900 dark:text-white block">
+                  {f.label}
+                </span>
+                <span className="text-xs text-neutral-500 dark:text-neutral-400">
+                  {f.description}
+                </span>
+              </div>
+              <Toggle checked={features[f.key]} onChange={() => toggleFeature(f.key)} />
+            </div>
+          ))}
+        </div>
+        {/* * Frustration — full-width, visually distinct as add-on */}
+        <div className="mt-3 flex items-center justify-between rounded-xl border border-dashed border-neutral-300 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900/50 px-4 py-3">
+          <div className="min-w-0 mr-3">
+            <span className="text-sm font-medium text-neutral-900 dark:text-white block">
+              Frustration tracking
+            </span>
+            <span className="text-xs text-neutral-500 dark:text-neutral-400">
+              Rage clicks &amp; dead clicks &middot; Loads separate add-on script
+            </span>
+          </div>
+          <Toggle checked={features.frustration} onChange={() => toggleFeature('frustration')} />
+        </div>
+      </div>
+
+      {/* ── Storage + TTL ───────────────────────────────────────────────── */}
+      <div className="mt-6">
+        <h4 className="text-sm font-semibold text-neutral-900 dark:text-white mb-3">
+          Visitor identity
+        </h4>
+        <div className="flex flex-col sm:flex-row gap-3">
+          <div className="flex-1">
+            <label className="text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1 block">
+              Storage mode
+            </label>
+            <Select
+              variant="input"
+              value={storage}
+              onChange={setStorage}
+              options={STORAGE_OPTIONS}
+            />
+          </div>
+          {storage === 'local' && (
+            <div className="sm:w-40">
+              <label className="text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1 block">
+                TTL (expiry)
+              </label>
+              <Select
+                variant="input"
+                value={ttl}
+                onChange={setTtl}
+                options={TTL_OPTIONS}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* ── Framework guide ─────────────────────────────────────────────── */}
+      {showFrameworkPicker && (
+        <div className="mt-6">
+          <h4 className="text-sm font-semibold text-neutral-900 dark:text-white mb-3">
+            Setup guide
+          </h4>
+          <div className="flex items-end gap-3">
+            <div className="flex-1">
+              <Select
+                variant="input"
+                value={framework}
+                onChange={setFramework}
+                options={FRAMEWORK_OPTIONS}
+                placeholder="Choose framework"
+              />
+            </div>
+            {selectedIntegration && (
+              <Link
+                href={`/integrations/${framework}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="shrink-0 text-sm font-medium text-brand-orange hover:text-brand-orange/80 transition-colors pb-2"
+              >
+                See {selectedIntegration.name} guide →
+              </Link>
+            )}
+            {!selectedIntegration && (
+              <Link
+                href="/integrations"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="shrink-0 text-sm font-medium text-neutral-500 hover:text-neutral-400 transition-colors pb-2"
+              >
+                All integrations →
+              </Link>
+            )}
+          </div>
+        </div>
       )}
     </div>
   )
-- 
2.49.1


From e9ec86b10b274cacd969bbff95275f5020b78691 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 17:20:27 +0100
Subject: [PATCH 018/428] =?UTF-8?q?fix:=20polish=20ScriptSetupBlock=20?=
 =?UTF-8?q?=E2=80=94=20orange=20accent=20bar,=20terminal=20dots,=20tighter?=
 =?UTF-8?q?=20storage/TTL,=20framework=20icons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add gradient orange accent bar and macOS-style terminal dots to code block
- Copy button uses brand-orange styling instead of plain gray
- Storage and TTL selects sit side-by-side tightly instead of spread apart
- TTL options shortened (24h, 48h, 7d, 30d)
- Replace framework dropdown with compact icon+label buttons (logos visible)
- Add "All integrations" link in section header
---
 components/sites/ScriptSetupBlock.tsx | 168 ++++++++++++++------------
 1 file changed, 91 insertions(+), 77 deletions(-)

diff --git a/components/sites/ScriptSetupBlock.tsx b/components/sites/ScriptSetupBlock.tsx
index 08874e8..ac988a8 100644
--- a/components/sites/ScriptSetupBlock.tsx
+++ b/components/sites/ScriptSetupBlock.tsx
@@ -11,13 +11,7 @@ import { API_URL, APP_URL } from '@/lib/api/client'
 import { integrations, getIntegration } from '@/lib/integrations'
 import { toast, Toggle, Select, CheckIcon } from '@ciphera-net/ui'
 
-const FRAMEWORK_OPTIONS = [
-  { value: '', label: 'Choose framework' },
-  ...integrations
-    .filter((i) => i.category === 'framework')
-    .slice(0, 10)
-    .map((i) => ({ value: i.id, label: i.name })),
-]
+const FRAMEWORKS = integrations.filter((i) => i.category === 'framework').slice(0, 10)
 
 const STORAGE_OPTIONS = [
   { value: 'local', label: 'Cross-tab (localStorage)' },
@@ -25,10 +19,10 @@ const STORAGE_OPTIONS = [
 ]
 
 const TTL_OPTIONS = [
-  { value: '24', label: '24 hours' },
-  { value: '48', label: '48 hours' },
-  { value: '168', label: '7 days' },
-  { value: '720', label: '30 days' },
+  { value: '24', label: '24h' },
+  { value: '48', label: '48h' },
+  { value: '168', label: '7d' },
+  { value: '720', label: '30d' },
 ]
 
 const FEATURES = [
@@ -111,35 +105,47 @@ export default function ScriptSetupBlock({
   return (
     <div className={className}>
       {/* ── Script snippet ──────────────────────────────────────────────── */}
-      <div className="rounded-2xl border border-neutral-800 bg-neutral-950 overflow-hidden">
-        <div className="flex items-center justify-between px-5 py-3 border-b border-neutral-800">
-          <span className="text-xs font-medium text-neutral-400 uppercase tracking-wider">
-            Your tracking script
-          </span>
-          <button
-            type="button"
-            onClick={copyScript}
-            className="flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-lg transition-colors cursor-pointer bg-neutral-800 hover:bg-neutral-700 text-neutral-300 hover:text-white"
-          >
-            {copied ? (
-              <>
-                <CheckIcon className="w-3.5 h-3.5 text-green-400" />
-                <span className="text-green-400">Copied</span>
-              </>
-            ) : (
-              <>
-                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                  <rect x="9" y="9" width="13" height="13" rx="2" strokeLinecap="round" strokeLinejoin="round" />
-                  <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" strokeLinecap="round" strokeLinejoin="round" />
-                </svg>
-                Copy
-              </>
-            )}
-          </button>
+      <div className="rounded-2xl border border-neutral-200 dark:border-neutral-800 overflow-hidden">
+        {/* * Orange accent bar */}
+        <div className="h-1 bg-gradient-to-r from-brand-orange via-brand-orange/60 to-transparent" />
+        <div className="bg-neutral-950">
+          <div className="flex items-center justify-between px-5 py-3">
+            <div className="flex items-center gap-2">
+              {/* * Terminal dots */}
+              <div className="flex gap-1.5">
+                <div className="w-2.5 h-2.5 rounded-full bg-red-500/70" />
+                <div className="w-2.5 h-2.5 rounded-full bg-yellow-500/70" />
+                <div className="w-2.5 h-2.5 rounded-full bg-green-500/70" />
+              </div>
+              <span className="text-xs font-medium text-neutral-500 ml-2">
+                tracking script
+              </span>
+            </div>
+            <button
+              type="button"
+              onClick={copyScript}
+              className="flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-lg transition-all cursor-pointer bg-brand-orange/10 hover:bg-brand-orange/20 text-brand-orange border border-brand-orange/20"
+            >
+              {copied ? (
+                <>
+                  <CheckIcon className="w-3.5 h-3.5" />
+                  Copied
+                </>
+              ) : (
+                <>
+                  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <rect x="9" y="9" width="13" height="13" rx="2" strokeLinecap="round" strokeLinejoin="round" />
+                    <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" strokeLinecap="round" strokeLinejoin="round" />
+                  </svg>
+                  Copy
+                </>
+              )}
+            </button>
+          </div>
+          <pre className="px-5 pb-5 text-[13px] leading-relaxed font-mono text-neutral-300 whitespace-pre-wrap break-all overflow-x-auto selection:bg-brand-orange/30">
+            {scriptSnippet}
+          </pre>
         </div>
-        <pre className="px-5 py-4 text-[13px] leading-relaxed font-mono text-neutral-200 whitespace-pre-wrap break-all overflow-x-auto">
-          {scriptSnippet}
-        </pre>
       </div>
 
       {/* ── Feature toggles ─────────────────────────────────────────────── */}
@@ -184,10 +190,10 @@ export default function ScriptSetupBlock({
         <h4 className="text-sm font-semibold text-neutral-900 dark:text-white mb-3">
           Visitor identity
         </h4>
-        <div className="flex flex-col sm:flex-row gap-3">
-          <div className="flex-1">
+        <div className="flex items-end gap-3">
+          <div className="min-w-0">
             <label className="text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1 block">
-              Storage mode
+              Storage
             </label>
             <Select
               variant="input"
@@ -197,9 +203,9 @@ export default function ScriptSetupBlock({
             />
           </div>
           {storage === 'local' && (
-            <div className="sm:w-40">
+            <div>
               <label className="text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1 block">
-                TTL (expiry)
+                TTL
               </label>
               <Select
                 variant="input"
@@ -215,40 +221,48 @@ export default function ScriptSetupBlock({
       {/* ── Framework guide ─────────────────────────────────────────────── */}
       {showFrameworkPicker && (
         <div className="mt-6">
-          <h4 className="text-sm font-semibold text-neutral-900 dark:text-white mb-3">
-            Setup guide
-          </h4>
-          <div className="flex items-end gap-3">
-            <div className="flex-1">
-              <Select
-                variant="input"
-                value={framework}
-                onChange={setFramework}
-                options={FRAMEWORK_OPTIONS}
-                placeholder="Choose framework"
-              />
-            </div>
-            {selectedIntegration && (
-              <Link
-                href={`/integrations/${framework}`}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="shrink-0 text-sm font-medium text-brand-orange hover:text-brand-orange/80 transition-colors pb-2"
-              >
-                See {selectedIntegration.name} guide →
-              </Link>
-            )}
-            {!selectedIntegration && (
-              <Link
-                href="/integrations"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="shrink-0 text-sm font-medium text-neutral-500 hover:text-neutral-400 transition-colors pb-2"
-              >
-                All integrations →
-              </Link>
-            )}
+          <div className="flex items-center justify-between mb-3">
+            <h4 className="text-sm font-semibold text-neutral-900 dark:text-white">
+              Setup guide
+            </h4>
+            <Link
+              href="/integrations"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs font-medium text-neutral-500 dark:text-neutral-400 hover:text-brand-orange transition-colors"
+            >
+              All integrations →
+            </Link>
           </div>
+          <div className="flex flex-wrap gap-2">
+            {FRAMEWORKS.map((fw) => (
+              <button
+                key={fw.id}
+                type="button"
+                onClick={() => setFramework(framework === fw.id ? '' : fw.id)}
+                className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-sm transition-all cursor-pointer ${
+                  framework === fw.id
+                    ? 'border-brand-orange bg-brand-orange/10 text-brand-orange'
+                    : 'border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-neutral-600 dark:text-neutral-400 hover:border-neutral-300 dark:hover:border-neutral-700 hover:text-neutral-900 dark:hover:text-white'
+                }`}
+              >
+                <span className="[&_svg]:h-4 [&_svg]:w-4 shrink-0 flex items-center">
+                  {fw.icon}
+                </span>
+                <span className="font-medium">{fw.name}</span>
+              </button>
+            ))}
+          </div>
+          {selectedIntegration && (
+            <Link
+              href={`/integrations/${framework}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 mt-3 text-sm font-medium text-brand-orange hover:text-brand-orange/80 transition-colors"
+            >
+              See full {selectedIntegration.name} guide →
+            </Link>
+          )}
         </div>
       )}
     </div>
-- 
2.49.1


From 40f223cf38b0ceab6604707e0136c5b071ddf6bf Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 21:25:21 +0100
Subject: [PATCH 019/428] =?UTF-8?q?fix:=20make=20sankey=20chart=20responsi?=
 =?UTF-8?q?ve=20=E2=80=94=20no=20horizontal=20scrolling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace fixed numSteps*250 width calculation with ResizeObserver
that measures the container and fits the chart within it.
---
 components/journeys/SankeyJourney.tsx | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/components/journeys/SankeyJourney.tsx b/components/journeys/SankeyJourney.tsx
index b084b66..23667b9 100644
--- a/components/journeys/SankeyJourney.tsx
+++ b/components/journeys/SankeyJourney.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Sankey } from '@nivo/sankey'
 import { TreeStructure, X } from '@phosphor-icons/react'
 import type { PathTransition } from '@/lib/api/journeys'
@@ -258,10 +258,20 @@ export default function SankeyJourney({
 
   const labelColor = isDark ? '#a3a3a3' : '#525252'
 
-  // Calculate dimensions: give each step ~250px of horizontal space
-  const numSteps = new Set(data.nodes.map((n) => n.stepIndex)).size
-  const chartWidth = Math.max(800, numSteps * 250)
   const chartHeight = 500
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [chartWidth, setChartWidth] = useState(800)
+
+  // * Measure container width and resize chart to fit without horizontal scroll
+  useEffect(() => {
+    const el = containerRef.current
+    if (!el) return
+    const measure = () => setChartWidth(el.clientWidth)
+    measure()
+    const observer = new ResizeObserver(measure)
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [])
 
   return (
     <div>
@@ -285,7 +295,7 @@ export default function SankeyJourney({
         </div>
       )}
 
-      <div className="overflow-x-auto -mx-6 px-6" style={{ maxHeight: chartHeight + 16 }}>
+      <div ref={containerRef} style={{ height: chartHeight }}>
         <div style={{ width: chartWidth, height: chartHeight }}>
           <Sankey<SankeyNode, SankeyLink>
             data={data}
-- 
2.49.1


From bec61c599e677f261287f80b8be6cdb0e8737fd9 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 21:30:09 +0100
Subject: [PATCH 020/428] =?UTF-8?q?fix:=20reduce=20sankey=20margins=20from?=
 =?UTF-8?q?=20160px=20to=2090px=20=E2=80=94=20less=20wasted=20space?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/journeys/SankeyJourney.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/journeys/SankeyJourney.tsx b/components/journeys/SankeyJourney.tsx
index 23667b9..cc2b268 100644
--- a/components/journeys/SankeyJourney.tsx
+++ b/components/journeys/SankeyJourney.tsx
@@ -301,7 +301,7 @@ export default function SankeyJourney({
             data={data}
             width={chartWidth}
             height={chartHeight}
-            margin={{ top: 8, right: 160, bottom: 8, left: 160 }}
+            margin={{ top: 8, right: 90, bottom: 8, left: 90 }}
             align="justify"
             sort="descending"
             colors={(node) =>
-- 
2.49.1


From 4007056e44909870199e21965872063e8200e3eb Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 21:45:08 +0100
Subject: [PATCH 021/428] feat: redesign sankey to block-style nodes with
 inside labels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- nodeThickness 8 → 100 (wide blocks like Rybbit)
- Labels inside nodes with white text instead of outside
- Margins 90px → 16px (labels no longer need outside space)
- Dynamic chart height based on max nodes per step
- Tighter nodeSpacing (4px) and subtle link opacity
- nodeBorderRadius 4 for rounded block corners
---
 components/journeys/SankeyJourney.tsx | 34 ++++++++++++++++-----------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/components/journeys/SankeyJourney.tsx b/components/journeys/SankeyJourney.tsx
index cc2b268..fe5b858 100644
--- a/components/journeys/SankeyJourney.tsx
+++ b/components/journeys/SankeyJourney.tsx
@@ -258,7 +258,13 @@ export default function SankeyJourney({
 
   const labelColor = isDark ? '#a3a3a3' : '#525252'
 
-  const chartHeight = 500
+  // * Scale height based on max nodes in any step so blocks aren't too compressed
+  const stepCounts = new Map<number, number>()
+  for (const n of data.nodes) {
+    stepCounts.set(n.stepIndex, (stepCounts.get(n.stepIndex) ?? 0) + 1)
+  }
+  const maxNodesInStep = Math.max(1, ...Array.from(stepCounts.values()))
+  const chartHeight = Math.max(400, Math.min(700, maxNodesInStep * 45))
   const containerRef = useRef<HTMLDivElement>(null)
   const [chartWidth, setChartWidth] = useState(800)
 
@@ -301,30 +307,30 @@ export default function SankeyJourney({
             data={data}
             width={chartWidth}
             height={chartHeight}
-            margin={{ top: 8, right: 90, bottom: 8, left: 90 }}
+            margin={{ top: 8, right: 16, bottom: 8, left: 16 }}
             align="justify"
             sort="descending"
             colors={(node) =>
               COLUMN_COLORS[node.stepIndex % COLUMN_COLORS.length]
             }
-            nodeThickness={8}
-            nodeSpacing={8}
-            nodeInnerPadding={0}
+            nodeThickness={100}
+            nodeSpacing={4}
+            nodeInnerPadding={2}
             nodeBorderWidth={0}
-            nodeBorderRadius={2}
-            nodeOpacity={1}
+            nodeBorderRadius={4}
+            nodeOpacity={0.9}
             nodeHoverOpacity={1}
             nodeHoverOthersOpacity={0.3}
-            linkOpacity={0.15}
-            linkHoverOpacity={0.5}
-            linkHoverOthersOpacity={0.03}
-            linkContract={1}
+            linkOpacity={0.12}
+            linkHoverOpacity={0.4}
+            linkHoverOthersOpacity={0.02}
+            linkContract={2}
             enableLinkGradient
             enableLabels
             label={(node) => smartLabel(pathFromId(node.id))}
-            labelPosition="outside"
-            labelPadding={6}
-            labelTextColor={labelColor}
+            labelPosition="inside"
+            labelPadding={8}
+            labelTextColor="#ffffff"
             isInteractive
             onClick={handleClick}
             nodeTooltip={({ node }) => (
-- 
2.49.1


From 17f2bdc9e90a5d2ee44c559119e72ac734eaf368 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 21:56:22 +0100
Subject: [PATCH 022/428] =?UTF-8?q?feat:=20rewrite=20sankey=20chart=20with?=
 =?UTF-8?q?=20D3=20=E2=80=94=20thin=20bars,=20labels=20beside=20nodes,=20p?=
 =?UTF-8?q?roper=20hover?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace @nivo/sankey with custom D3 implementation:
- 30px thin node bars with labels positioned beside them
- Links at 0.3 opacity, 0.6 on hover with full path highlighting
- Colors based on first URL segment for visual grouping
- Dynamic height based on tallest column
- Responsive width via ResizeObserver
- Click nodes to filter, hover for tooltips
- Invisible wider hit areas for easier link hovering
- Remove @nivo/sankey dependency, add d3
---
 components/journeys/SankeyJourney.tsx | 629 ++++++++++++-------
 package-lock.json                     | 835 ++++++++++++++++----------
 package.json                          |   3 +-
 3 files changed, 914 insertions(+), 553 deletions(-)

diff --git a/components/journeys/SankeyJourney.tsx b/components/journeys/SankeyJourney.tsx
index fe5b858..e097cf0 100644
--- a/components/journeys/SankeyJourney.tsx
+++ b/components/journeys/SankeyJourney.tsx
@@ -1,7 +1,7 @@
 'use client'
 
+import * as d3 from 'd3'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Sankey } from '@nivo/sankey'
 import { TreeStructure, X } from '@phosphor-icons/react'
 import type { PathTransition } from '@/lib/api/journeys'
 
@@ -13,33 +13,59 @@ interface SankeyJourneyProps {
   depth: number
 }
 
-interface SankeyNode {
+interface SNode {
   id: string
-  stepIndex: number
+  name: string
+  step: number
+  height: number
+  x: number
+  y: number
+  count: number
+  inLinks: SLink[]
+  outLinks: SLink[]
 }
 
-interface SankeyLink {
+interface SLink {
   source: string
   target: string
   value: number
-}
-
-interface SankeyData {
-  nodes: SankeyNode[]
-  links: SankeyLink[]
+  sourceY?: number
+  targetY?: number
 }
 
 // ─── Constants ──────────────────────────────────────────────────────
 
-const COLUMN_COLORS = [
-  '#FD5E0F', '#3B82F6', '#10B981', '#F59E0B', '#8B5CF6',
-  '#EC4899', '#06B6D4', '#EF4444', '#84CC16', '#F97316', '#6366F1',
-]
-
+const NODE_WIDTH = 30
+const NODE_GAP = 20
+const MIN_NODE_HEIGHT = 2
+const MAX_LINK_HEIGHT = 100
+const LINK_OPACITY = 0.3
+const LINK_HOVER_OPACITY = 0.6
 const MAX_NODES_PER_STEP = 25
 
+const COLOR_PALETTE = [
+  'hsl(160, 45%, 40%)', 'hsl(220, 45%, 50%)', 'hsl(270, 40%, 50%)',
+  'hsl(25, 50%, 50%)', 'hsl(340, 40%, 50%)', 'hsl(190, 45%, 45%)',
+  'hsl(45, 45%, 50%)', 'hsl(0, 45%, 50%)',
+]
+
 // ─── Helpers ────────────────────────────────────────────────────────
 
+function pathFromId(id: string): string {
+  const idx = id.indexOf(':')
+  return idx >= 0 ? id.slice(idx + 1) : id
+}
+
+function stepFromId(id: string): number {
+  const idx = id.indexOf(':')
+  return idx >= 0 ? parseInt(id.slice(0, idx), 10) : 0
+}
+
+function firstSegment(path: string): string {
+  const parts = path.split('/').filter(Boolean)
+  return parts.length > 0 ? `/${parts[0]}` : path
+}
+
 function smartLabel(path: string): string {
   if (path === '/' || path === '(other)') return path
   const segments = path.replace(/\/$/, '').split('/')
@@ -47,147 +73,105 @@ function smartLabel(path: string): string {
   return `.../${segments[segments.length - 1]}`
 }
 
-/** Extract the original path from a step-prefixed node id like "0:/blog" */
-function pathFromId(id: string): string {
-  const idx = id.indexOf(':')
-  return idx >= 0 ? id.slice(idx + 1) : id
-}
-
-/** Extract the step index from a step-prefixed node id */
-function stepFromId(id: string): number {
-  const idx = id.indexOf(':')
-  return idx >= 0 ? parseInt(id.slice(0, idx), 10) : 0
-}
-
 // ─── Data Transformation ────────────────────────────────────────────
 
-function buildSankeyData(
+function buildData(
   transitions: PathTransition[],
   filterPath?: string,
-): SankeyData {
+): { nodes: SNode[]; links: SLink[] } {
   if (transitions.length === 0) return { nodes: [], links: [] }
 
-  // Group transitions by step and count sessions per path at each step
+  // Group transitions by step, count per path per step
   const stepPaths = new Map<number, Map<string, number>>()
-
   for (const t of transitions) {
-    // from_path at step_index
     if (!stepPaths.has(t.step_index)) stepPaths.set(t.step_index, new Map())
     const fromMap = stepPaths.get(t.step_index)!
     fromMap.set(t.from_path, (fromMap.get(t.from_path) ?? 0) + t.session_count)
 
-    // to_path at step_index + 1
     const nextStep = t.step_index + 1
     if (!stepPaths.has(nextStep)) stepPaths.set(nextStep, new Map())
     const toMap = stepPaths.get(nextStep)!
     toMap.set(t.to_path, (toMap.get(t.to_path) ?? 0) + t.session_count)
   }
 
-  // For each step, keep top N paths, group rest into (other)
-  const topPathsPerStep = new Map<number, Set<string>>()
-  for (const [step, pathMap] of stepPaths) {
-    const sorted = Array.from(pathMap.entries()).sort((a, b) => b[1] - a[1])
-    const kept = new Set(sorted.slice(0, MAX_NODES_PER_STEP).map(([p]) => p))
-    topPathsPerStep.set(step, kept)
+  // Keep top N per step, rest → (other)
+  const topPaths = new Map<number, Set<string>>()
+  for (const [step, pm] of stepPaths) {
+    const sorted = Array.from(pm.entries()).sort((a, b) => b[1] - a[1])
+    topPaths.set(step, new Set(sorted.slice(0, MAX_NODES_PER_STEP).map(([p]) => p)))
   }
 
-  // Build links with capping
+  // Build links
   const linkMap = new Map<string, number>()
   for (const t of transitions) {
-    const fromStep = t.step_index
-    const toStep = t.step_index + 1
-    const fromTop = topPathsPerStep.get(fromStep)!
-    const toTop = topPathsPerStep.get(toStep)!
-
-    const fromPath = fromTop.has(t.from_path) ? t.from_path : '(other)'
-    const toPath = toTop.has(t.to_path) ? t.to_path : '(other)'
-
-    // Skip self-links where both collapse to (other)
-    if (fromPath === '(other)' && toPath === '(other)') continue
-
-    const sourceId = `${fromStep}:${fromPath}`
-    const targetId = `${toStep}:${toPath}`
-    const key = `${sourceId}|${targetId}`
+    const fromTop = topPaths.get(t.step_index)!
+    const toTop = topPaths.get(t.step_index + 1)!
+    const fp = fromTop.has(t.from_path) ? t.from_path : '(other)'
+    const tp = toTop.has(t.to_path) ? t.to_path : '(other)'
+    if (fp === '(other)' && tp === '(other)') continue
+    const src = `${t.step_index}:${fp}`
+    const tgt = `${t.step_index + 1}:${tp}`
+    const key = `${src}|${tgt}`
     linkMap.set(key, (linkMap.get(key) ?? 0) + t.session_count)
   }
 
-  let links: SankeyLink[] = Array.from(linkMap.entries()).map(([key, value]) => {
-    const [source, target] = key.split('|')
-    return { source, target, value }
+  let links: SLink[] = Array.from(linkMap.entries()).map(([k, v]) => {
+    const [source, target] = k.split('|')
+    return { source, target, value: v }
   })
 
-  // Collect all node ids referenced by links
+  // Collect node IDs
   const nodeIdSet = new Set<string>()
-  for (const link of links) {
-    nodeIdSet.add(link.source)
-    nodeIdSet.add(link.target)
-  }
+  for (const l of links) { nodeIdSet.add(l.source); nodeIdSet.add(l.target) }
 
-  let nodes: SankeyNode[] = Array.from(nodeIdSet).map((id) => ({
+  let nodes: SNode[] = Array.from(nodeIdSet).map((id) => ({
     id,
-    stepIndex: stepFromId(id),
+    name: pathFromId(id),
+    step: stepFromId(id),
+    height: 0, x: 0, y: 0, count: 0,
+    inLinks: [], outLinks: [],
   }))
 
-  // ─── Filter by path (BFS forward + backward) ────────────────────
+  // Filter by path (BFS forward + backward)
   if (filterPath) {
-    const matchingNodeIds = nodes
-      .filter((n) => pathFromId(n.id) === filterPath)
-      .map((n) => n.id)
+    const matchIds = nodes.filter((n) => n.name === filterPath).map((n) => n.id)
+    if (matchIds.length === 0) return { nodes: [], links: [] }
 
-    if (matchingNodeIds.length === 0) return { nodes: [], links: [] }
-
-    // Build adjacency
-    const forwardAdj = new Map<string, Set<string>>()
-    const backwardAdj = new Map<string, Set<string>>()
-    for (const link of links) {
-      if (!forwardAdj.has(link.source)) forwardAdj.set(link.source, new Set())
-      forwardAdj.get(link.source)!.add(link.target)
-      if (!backwardAdj.has(link.target)) backwardAdj.set(link.target, new Set())
-      backwardAdj.get(link.target)!.add(link.source)
+    const fwd = new Map<string, Set<string>>()
+    const bwd = new Map<string, Set<string>>()
+    for (const l of links) {
+      if (!fwd.has(l.source)) fwd.set(l.source, new Set())
+      fwd.get(l.source)!.add(l.target)
+      if (!bwd.has(l.target)) bwd.set(l.target, new Set())
+      bwd.get(l.target)!.add(l.source)
     }
 
-    const reachable = new Set<string>(matchingNodeIds)
-
-    // BFS forward
-    let queue = [...matchingNodeIds]
+    const reachable = new Set<string>(matchIds)
+    let queue = [...matchIds]
     while (queue.length > 0) {
       const next: string[] = []
-      for (const nodeId of queue) {
-        for (const neighbor of forwardAdj.get(nodeId) ?? []) {
-          if (!reachable.has(neighbor)) {
-            reachable.add(neighbor)
-            next.push(neighbor)
-          }
+      for (const id of queue) {
+        for (const nb of fwd.get(id) ?? []) {
+          if (!reachable.has(nb)) { reachable.add(nb); next.push(nb) }
+        }
+      }
+      queue = next
+    }
+    queue = [...matchIds]
+    while (queue.length > 0) {
+      const next: string[] = []
+      for (const id of queue) {
+        for (const nb of bwd.get(id) ?? []) {
+          if (!reachable.has(nb)) { reachable.add(nb); next.push(nb) }
         }
       }
       queue = next
     }
 
-    // BFS backward
-    queue = [...matchingNodeIds]
-    while (queue.length > 0) {
-      const next: string[] = []
-      for (const nodeId of queue) {
-        for (const neighbor of backwardAdj.get(nodeId) ?? []) {
-          if (!reachable.has(neighbor)) {
-            reachable.add(neighbor)
-            next.push(neighbor)
-          }
-        }
-      }
-      queue = next
-    }
-
-    links = links.filter(
-      (l) => reachable.has(l.source) && reachable.has(l.target),
-    )
-
-    const filteredNodeIds = new Set<string>()
-    for (const link of links) {
-      filteredNodeIds.add(link.source)
-      filteredNodeIds.add(link.target)
-    }
-    nodes = nodes.filter((n) => filteredNodeIds.has(n.id))
+    links = links.filter((l) => reachable.has(l.source) && reachable.has(l.target))
+    const kept = new Set<string>()
+    for (const l of links) { kept.add(l.source); kept.add(l.target) }
+    nodes = nodes.filter((n) => kept.has(n.id))
   }
 
   return { nodes, links }
@@ -202,43 +186,325 @@ export default function SankeyJourney({
 }: SankeyJourneyProps) {
   const [filterPath, setFilterPath] = useState<string | null>(null)
   const [isDark, setIsDark] = useState(false)
+  const svgRef = useRef<SVGSVGElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [containerWidth, setContainerWidth] = useState(900)
 
-  // Reactively detect dark mode via MutationObserver
+  // Detect dark mode
   useEffect(() => {
     const el = document.documentElement
     setIsDark(el.classList.contains('dark'))
+    const obs = new MutationObserver(() => setIsDark(el.classList.contains('dark')))
+    obs.observe(el, { attributes: true, attributeFilter: ['class'] })
+    return () => obs.disconnect()
+  }, [])
 
-    const observer = new MutationObserver(() => {
-      setIsDark(el.classList.contains('dark'))
-    })
-    observer.observe(el, { attributes: true, attributeFilter: ['class'] })
-    return () => observer.disconnect()
+  // Measure container
+  useEffect(() => {
+    const el = containerRef.current
+    if (!el) return
+    const measure = () => setContainerWidth(el.clientWidth)
+    measure()
+    const obs = new ResizeObserver(measure)
+    obs.observe(el)
+    return () => obs.disconnect()
   }, [])
 
   const data = useMemo(
-    () => buildSankeyData(transitions, filterPath ?? undefined),
+    () => buildData(transitions, filterPath ?? undefined),
     [transitions, filterPath],
   )
 
-  const handleClick = useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (item: any) => {
-      if (!item.id || typeof item.id !== 'string') return // link click, ignore
-      const path = pathFromId(item.id)
-      if (path === '(other)') return
-      setFilterPath((prev) => (prev === path ? null : path))
-    },
-    [],
-  )
-
-  // Clear filter when data changes
-  const transitionsKey = transitions.length + '-' + depth
-  const [prevKey, setPrevKey] = useState(transitionsKey)
-  if (prevKey !== transitionsKey) {
-    setPrevKey(transitionsKey)
+  // Clear filter on data change
+  const transKey = transitions.length + '-' + depth
+  const [prevKey, setPrevKey] = useState(transKey)
+  if (prevKey !== transKey) {
+    setPrevKey(transKey)
     if (filterPath !== null) setFilterPath(null)
   }
 
+  const handleNodeClick = useCallback((path: string) => {
+    if (path === '(other)') return
+    setFilterPath((prev) => (prev === path ? null : path))
+  }, [])
+
+  // ─── D3 Rendering ──────────────────────────────────────────────
+  useEffect(() => {
+    if (!svgRef.current || data.nodes.length === 0) return
+
+    const svg = d3.select(svgRef.current)
+    svg.selectAll('*').remove()
+
+    const { nodes, links } = data
+
+    const linkColor = isDark ? 'rgba(163,163,163,0.5)' : 'rgba(82,82,82,0.5)'
+    const textColor = isDark ? '#e5e5e5' : '#171717'
+
+    // Wire up node ↔ link references
+    for (const n of nodes) { n.inLinks = []; n.outLinks = []; n.count = 0 }
+    const nodeMap = new Map(nodes.map((n) => [n.id, n]))
+    for (const l of links) {
+      const src = nodeMap.get(l.source)
+      const tgt = nodeMap.get(l.target)
+      if (src) src.outLinks.push(l)
+      if (tgt) tgt.inLinks.push(l)
+    }
+    for (const n of nodes) {
+      const inVal = n.inLinks.reduce((s, l) => s + l.value, 0)
+      const outVal = n.outLinks.reduce((s, l) => s + l.value, 0)
+      n.count = n.step === 0 ? outVal : Math.max(inVal, outVal)
+    }
+
+    // Calculate node heights (proportional to value)
+    const maxVal = d3.max(links, (l) => l.value) || 1
+    const heightScale = d3.scaleLinear().domain([0, maxVal]).range([0, MAX_LINK_HEIGHT])
+    for (const n of nodes) {
+      const inVal = n.inLinks.reduce((s, l) => s + l.value, 0)
+      const outVal = n.outLinks.reduce((s, l) => s + l.value, 0)
+      n.height = Math.max(heightScale(Math.max(inVal, outVal)), MIN_NODE_HEIGHT)
+    }
+
+    // Group by step, determine layout
+    const byStep = d3.group(nodes, (n) => n.step)
+    const numSteps = byStep.size
+    const width = containerWidth
+    const stepWidth = width / numSteps
+
+    // Calculate chart height from tallest column
+    const stepHeights = Array.from(byStep.values()).map(
+      (ns) => ns.reduce((s, n) => s + n.height, 0) + (ns.length - 1) * NODE_GAP,
+    )
+    const height = Math.max(200, Math.max(...stepHeights) + 20)
+
+    // Position nodes in columns, aligned from top
+    byStep.forEach((stepNodes, step) => {
+      let cy = 0
+      for (const n of stepNodes) {
+        n.x = step * stepWidth
+        n.y = cy + n.height / 2
+        cy += n.height + NODE_GAP
+      }
+    })
+
+    // Calculate link y-positions (stacked within each node)
+    for (const n of nodes) {
+      n.outLinks.sort((a, b) => b.value - a.value)
+      n.inLinks.sort((a, b) => b.value - a.value)
+
+      let outY = n.y - n.height / 2
+      for (const l of n.outLinks) {
+        const lh = heightScale(l.value)
+        l.sourceY = outY + lh / 2
+        outY += lh
+      }
+
+      let inY = n.y - n.height / 2
+      for (const l of n.inLinks) {
+        const lh = heightScale(l.value)
+        l.targetY = inY + lh / 2
+        inY += lh
+      }
+    }
+
+    // Color by first path segment
+    const segCounts = new Map<string, number>()
+    for (const n of nodes) {
+      const seg = firstSegment(n.name)
+      segCounts.set(seg, (segCounts.get(seg) ?? 0) + 1)
+    }
+    const segColors = new Map<string, string>()
+    let ci = 0
+    segCounts.forEach((count, seg) => {
+      if (count > 1) { segColors.set(seg, COLOR_PALETTE[ci % COLOR_PALETTE.length]); ci++ }
+    })
+    const defaultColor = isDark ? 'hsl(0, 0%, 50%)' : 'hsl(0, 0%, 45%)'
+    const nodeColor = (n: SNode) => segColors.get(firstSegment(n.name)) ?? defaultColor
+    const linkSourceColor = (l: SLink) => {
+      const src = nodeMap.get(l.source)
+      return src ? nodeColor(src) : linkColor
+    }
+
+    // Link path generator
+    const linkPath = (l: SLink) => {
+      const src = nodeMap.get(l.source)
+      const tgt = nodeMap.get(l.target)
+      if (!src || !tgt) return ''
+      const sy = l.sourceY ?? src.y
+      const ty = l.targetY ?? tgt.y
+      const sx = src.x + NODE_WIDTH
+      const tx = tgt.x
+      const gap = tx - sx
+      const c1x = sx + gap / 3
+      const c2x = tx - gap / 3
+      return `M ${sx},${sy} C ${c1x},${sy} ${c2x},${ty} ${tx},${ty}`
+    }
+
+    svg.attr('width', width).attr('height', height)
+    const g = svg.append('g')
+
+    // ── Draw links ────────────────────────────────────────
+    g.selectAll('.link')
+      .data(links)
+      .join('path')
+      .attr('class', 'link')
+      .attr('d', linkPath)
+      .attr('fill', 'none')
+      .attr('stroke', (d) => linkSourceColor(d))
+      .attr('stroke-width', (d) => heightScale(d.value))
+      .attr('opacity', LINK_OPACITY)
+      .attr('data-source', (d) => d.source)
+      .attr('data-target', (d) => d.target)
+      .style('pointer-events', 'none')
+
+    // ── Tooltip ───────────────────────────────────────────
+    const tooltip = d3.select('body').append('div')
+      .style('position', 'absolute')
+      .style('visibility', 'hidden')
+      .style('background', isDark ? '#262626' : '#f5f5f5')
+      .style('border', `1px solid ${isDark ? '#404040' : '#d4d4d4'}`)
+      .style('border-radius', '8px')
+      .style('padding', '8px 12px')
+      .style('font-size', '12px')
+      .style('color', isDark ? '#fff' : '#171717')
+      .style('pointer-events', 'none')
+      .style('z-index', '9999')
+      .style('box-shadow', '0 4px 12px rgba(0,0,0,0.15)')
+
+    // ── Draw nodes ────────────────────────────────────────
+    const nodeGs = g.selectAll('.node')
+      .data(nodes)
+      .join('g')
+      .attr('class', 'node')
+      .attr('transform', (d) => `translate(${d.x},${d.y - d.height / 2})`)
+      .style('cursor', 'pointer')
+
+    // Node bars
+    nodeGs.append('rect')
+      .attr('class', 'node-rect')
+      .attr('width', NODE_WIDTH)
+      .attr('height', (d) => d.height)
+      .attr('fill', (d) => nodeColor(d))
+      .attr('rx', 2)
+      .attr('ry', 2)
+
+    // Node labels
+    nodeGs.append('text')
+      .attr('class', 'node-text')
+      .attr('x', NODE_WIDTH + 6)
+      .attr('y', (d) => d.height / 2 + 4)
+      .text((d) => smartLabel(d.name))
+      .attr('font-size', '12px')
+      .attr('fill', textColor)
+      .attr('text-anchor', 'start')
+
+    // ── Hover: find all connected paths ───────────────────
+    const findConnected = (startLink: SLink, dir: 'fwd' | 'bwd') => {
+      const result: SLink[] = []
+      const visited = new Set<string>()
+      const queue = [startLink]
+      while (queue.length > 0) {
+        const cur = queue.shift()!
+        const lid = `${cur.source}|${cur.target}`
+        if (visited.has(lid)) continue
+        visited.add(lid)
+        result.push(cur)
+        if (dir === 'fwd') {
+          const tgt = nodeMap.get(cur.target)
+          if (tgt) tgt.outLinks.forEach((l) => queue.push(l))
+        } else {
+          const src = nodeMap.get(cur.source)
+          if (src) src.inLinks.forEach((l) => queue.push(l))
+        }
+      }
+      return result
+    }
+
+    const highlightPaths = (nodeId: string) => {
+      const connectedLinks: SLink[] = []
+      const connectedNodes = new Set<string>([nodeId])
+      const directLinks = links.filter((l) => l.source === nodeId || l.target === nodeId)
+      for (const dl of directLinks) {
+        connectedLinks.push(dl, ...findConnected(dl, 'fwd'), ...findConnected(dl, 'bwd'))
+      }
+      const connectedLinkIds = new Set(connectedLinks.map((l) => `${l.source}|${l.target}`))
+      connectedLinks.forEach((l) => { connectedNodes.add(l.source); connectedNodes.add(l.target) })
+
+      g.selectAll<SVGPathElement, SLink>('.link')
+        .attr('opacity', function () {
+          const s = d3.select(this).attr('data-source')
+          const t = d3.select(this).attr('data-target')
+          return connectedLinkIds.has(`${s}|${t}`) ? LINK_HOVER_OPACITY : 0.05
+        })
+      g.selectAll<SVGRectElement, SNode>('.node-rect')
+        .attr('opacity', (d) => connectedNodes.has(d.id) ? 1 : 0.15)
+      g.selectAll<SVGTextElement, SNode>('.node-text')
+        .attr('opacity', (d) => connectedNodes.has(d.id) ? 1 : 0.2)
+    }
+
+    const resetHighlight = () => {
+      g.selectAll('.link').attr('opacity', LINK_OPACITY)
+        .attr('stroke', (d: unknown) => linkSourceColor(d as SLink))
+      g.selectAll('.node-rect').attr('opacity', 1)
+      g.selectAll('.node-text').attr('opacity', 1)
+      tooltip.style('visibility', 'hidden')
+    }
+
+    // Node hover
+    nodeGs
+      .on('mouseenter', function (event, d) {
+        tooltip.style('visibility', 'visible')
+          .html(`<div style="font-weight:600;margin-bottom:2px">${d.name}</div><div style="opacity:0.7">${d.count.toLocaleString()} sessions</div>`)
+          .style('top', `${event.pageY - 10}px`).style('left', `${event.pageX + 12}px`)
+        highlightPaths(d.id)
+      })
+      .on('mousemove', (event) => {
+        tooltip.style('top', `${event.pageY - 10}px`).style('left', `${event.pageX + 12}px`)
+      })
+      .on('mouseleave', resetHighlight)
+      .on('click', (_, d) => handleNodeClick(d.name))
+
+    // Link hit areas (wider invisible paths for easier hovering)
+    g.selectAll('.link-hit')
+      .data(links)
+      .join('path')
+      .attr('class', 'link-hit')
+      .attr('d', linkPath)
+      .attr('fill', 'none')
+      .attr('stroke', 'transparent')
+      .attr('stroke-width', (d) => Math.max(heightScale(d.value), 14))
+      .attr('data-source', (d) => d.source)
+      .attr('data-target', (d) => d.target)
+      .style('cursor', 'pointer')
+      .on('mouseenter', function (event, d) {
+        const src = nodeMap.get(d.source)
+        const tgt = nodeMap.get(d.target)
+        tooltip.style('visibility', 'visible')
+          .html(`<div style="font-weight:600;margin-bottom:2px">${src?.name ?? '?'} → ${tgt?.name ?? '?'}</div><div style="opacity:0.7">${d.value.toLocaleString()} sessions</div>`)
+          .style('top', `${event.pageY - 10}px`).style('left', `${event.pageX + 12}px`)
+        // Highlight this link's connected paths
+        const all = [d, ...findConnected(d, 'fwd'), ...findConnected(d, 'bwd')]
+        const lids = new Set(all.map((l) => `${l.source}|${l.target}`))
+        const nids = new Set<string>()
+        all.forEach((l) => { nids.add(l.source); nids.add(l.target) })
+        g.selectAll<SVGPathElement, SLink>('.link')
+          .attr('opacity', function () {
+            const s = d3.select(this).attr('data-source')
+            const t = d3.select(this).attr('data-target')
+            return lids.has(`${s}|${t}`) ? LINK_HOVER_OPACITY : 0.05
+          })
+        g.selectAll<SVGRectElement, SNode>('.node-rect')
+          .attr('opacity', (nd) => nids.has(nd.id) ? 1 : 0.15)
+        g.selectAll<SVGTextElement, SNode>('.node-text')
+          .attr('opacity', (nd) => nids.has(nd.id) ? 1 : 0.2)
+      })
+      .on('mousemove', (event) => {
+        tooltip.style('top', `${event.pageY - 10}px`).style('left', `${event.pageX + 12}px`)
+      })
+      .on('mouseleave', resetHighlight)
+
+    return () => { tooltip.remove() }
+  }, [data, containerWidth, isDark, handleNodeClick])
+
   // ─── Empty state ────────────────────────────────────────────────
   if (!transitions.length || data.nodes.length === 0) {
     return (
@@ -256,34 +522,10 @@ export default function SankeyJourney({
     )
   }
 
-  const labelColor = isDark ? '#a3a3a3' : '#525252'
-
-  // * Scale height based on max nodes in any step so blocks aren't too compressed
-  const stepCounts = new Map<number, number>()
-  for (const n of data.nodes) {
-    stepCounts.set(n.stepIndex, (stepCounts.get(n.stepIndex) ?? 0) + 1)
-  }
-  const maxNodesInStep = Math.max(1, ...Array.from(stepCounts.values()))
-  const chartHeight = Math.max(400, Math.min(700, maxNodesInStep * 45))
-  const containerRef = useRef<HTMLDivElement>(null)
-  const [chartWidth, setChartWidth] = useState(800)
-
-  // * Measure container width and resize chart to fit without horizontal scroll
-  useEffect(() => {
-    const el = containerRef.current
-    if (!el) return
-    const measure = () => setChartWidth(el.clientWidth)
-    measure()
-    const observer = new ResizeObserver(measure)
-    observer.observe(el)
-    return () => observer.disconnect()
-  }, [])
-
   return (
     <div>
-      {/* Filter reset bar */}
       {filterPath && (
-        <div className="flex items-center gap-2 mb-3 px-3 py-2 rounded-lg bg-brand-orange/10 dark:bg-brand-orange/10 text-sm">
+        <div className="flex items-center gap-2 mb-3 px-3 py-2 rounded-lg bg-brand-orange/10 text-sm">
           <span className="text-neutral-700 dark:text-neutral-300">
             Showing flows through{' '}
             <span className="font-medium text-neutral-900 dark:text-white">
@@ -301,71 +543,8 @@ export default function SankeyJourney({
         </div>
       )}
 
-      <div ref={containerRef} style={{ height: chartHeight }}>
-        <div style={{ width: chartWidth, height: chartHeight }}>
-          <Sankey<SankeyNode, SankeyLink>
-            data={data}
-            width={chartWidth}
-            height={chartHeight}
-            margin={{ top: 8, right: 16, bottom: 8, left: 16 }}
-            align="justify"
-            sort="descending"
-            colors={(node) =>
-              COLUMN_COLORS[node.stepIndex % COLUMN_COLORS.length]
-            }
-            nodeThickness={100}
-            nodeSpacing={4}
-            nodeInnerPadding={2}
-            nodeBorderWidth={0}
-            nodeBorderRadius={4}
-            nodeOpacity={0.9}
-            nodeHoverOpacity={1}
-            nodeHoverOthersOpacity={0.3}
-            linkOpacity={0.12}
-            linkHoverOpacity={0.4}
-            linkHoverOthersOpacity={0.02}
-            linkContract={2}
-            enableLinkGradient
-            enableLabels
-            label={(node) => smartLabel(pathFromId(node.id))}
-            labelPosition="inside"
-            labelPadding={8}
-            labelTextColor="#ffffff"
-            isInteractive
-            onClick={handleClick}
-            nodeTooltip={({ node }) => (
-              <div className="rounded-lg px-3 py-2 text-sm shadow-lg bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700">
-                <div className="font-medium text-neutral-900 dark:text-white">
-                  {pathFromId(node.id)}
-                </div>
-                <div className="text-neutral-500 dark:text-neutral-400 text-xs mt-0.5">
-                  Step {node.stepIndex + 1} &middot;{' '}
-                  {node.value.toLocaleString()} sessions
-                </div>
-              </div>
-            )}
-            linkTooltip={({ link }) => (
-              <div className="rounded-lg px-3 py-2 text-sm shadow-lg bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700">
-                <div className="font-medium text-neutral-900 dark:text-white">
-                  {pathFromId(link.source.id)} &rarr;{' '}
-                  {pathFromId(link.target.id)}
-                </div>
-                <div className="text-neutral-500 dark:text-neutral-400 text-xs mt-0.5">
-                  {link.value.toLocaleString()} sessions
-                </div>
-              </div>
-            )}
-            theme={{
-              tooltip: {
-                container: {
-                  background: 'transparent',
-                  boxShadow: 'none',
-                  padding: 0,
-                },
-              },
-            }}
-          />
-        </div>
+      <div ref={containerRef} className="w-full overflow-hidden">
+        <svg ref={svgRef} className="w-full" />
       </div>
     </div>
   )
diff --git a/package-lock.json b/package-lock.json
index 55577fe..df9c23b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,15 +10,16 @@
       "dependencies": {
         "@ciphera-net/ui": "^0.2.7",
         "@ducanh2912/next-pwa": "^10.2.9",
-        "@nivo/sankey": "^0.99.0",
         "@phosphor-icons/react": "^2.1.10",
         "@simplewebauthn/browser": "^13.2.2",
         "@stripe/react-stripe-js": "^5.6.0",
         "@stripe/stripe-js": "^8.7.0",
         "@tanstack/react-virtual": "^3.13.21",
+        "@types/d3": "^7.4.3",
         "class-variance-authority": "^0.7.1",
         "cobe": "^0.6.5",
         "country-flag-icons": "^1.6.4",
+        "d3": "^7.9.0",
         "d3-scale": "^4.0.2",
         "framer-motion": "^12.23.26",
         "html-to-image": "^1.11.13",
@@ -3270,174 +3271,6 @@
         "node": ">= 10"
       }
     },
-    "node_modules/@nivo/colors": {
-      "version": "0.99.0",
-      "resolved": "https://registry.npmjs.org/@nivo/colors/-/colors-0.99.0.tgz",
-      "integrity": "sha512-hyYt4lEFIfXOUmQ6k3HXm3KwhcgoJpocmoGzLUqzk7DzuhQYJo+4d5jIGGU0N/a70+9XbHIdpKNSblHAIASD3w==",
-      "license": "MIT",
-      "dependencies": {
-        "@nivo/core": "0.99.0",
-        "@nivo/theming": "0.99.0",
-        "@types/d3-color": "^3.0.0",
-        "@types/d3-scale": "^4.0.8",
-        "@types/d3-scale-chromatic": "^3.0.0",
-        "d3-color": "^3.1.0",
-        "d3-scale": "^4.0.2",
-        "d3-scale-chromatic": "^3.0.0",
-        "lodash": "^4.17.21"
-      },
-      "peerDependencies": {
-        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
-      }
-    },
-    "node_modules/@nivo/core": {
-      "version": "0.99.0",
-      "resolved": "https://registry.npmjs.org/@nivo/core/-/core-0.99.0.tgz",
-      "integrity": "sha512-olCItqhPG3xHL5ei+vg52aB6o+6S+xR2idpkd9RormTTUniZb8U2rOdcQojOojPY5i9kVeQyLFBpV4YfM7OZ9g==",
-      "license": "MIT",
-      "dependencies": {
-        "@nivo/theming": "0.99.0",
-        "@nivo/tooltip": "0.99.0",
-        "@react-spring/web": "9.4.5 || ^9.7.2 || ^10.0",
-        "@types/d3-shape": "^3.1.6",
-        "d3-color": "^3.1.0",
-        "d3-format": "^1.4.4",
-        "d3-interpolate": "^3.0.1",
-        "d3-scale": "^4.0.2",
-        "d3-scale-chromatic": "^3.0.0",
-        "d3-shape": "^3.2.0",
-        "d3-time-format": "^3.0.0",
-        "lodash": "^4.17.21",
-        "react-virtualized-auto-sizer": "^1.0.26",
-        "use-debounce": "^10.0.4"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/nivo/donate"
-      },
-      "peerDependencies": {
-        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
-      }
-    },
-    "node_modules/@nivo/core/node_modules/d3-array": {
-      "version": "2.12.1",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
-      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "internmap": "^1.0.0"
-      }
-    },
-    "node_modules/@nivo/core/node_modules/d3-format": {
-      "version": "1.4.5",
-      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz",
-      "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/@nivo/core/node_modules/d3-time": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz",
-      "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "d3-array": "2"
-      }
-    },
-    "node_modules/@nivo/core/node_modules/d3-time-format": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
-      "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "d3-time": "1 - 2"
-      }
-    },
-    "node_modules/@nivo/core/node_modules/internmap": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
-      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
-      "license": "ISC"
-    },
-    "node_modules/@nivo/legends": {
-      "version": "0.99.0",
-      "resolved": "https://registry.npmjs.org/@nivo/legends/-/legends-0.99.0.tgz",
-      "integrity": "sha512-P16FjFqNceuTTZphINAh5p0RF0opu3cCKoWppe2aRD9IuVkvRm/wS5K1YwMCxDzKyKh5v0AuTlu9K6o3/hk8hA==",
-      "license": "MIT",
-      "dependencies": {
-        "@nivo/colors": "0.99.0",
-        "@nivo/core": "0.99.0",
-        "@nivo/text": "0.99.0",
-        "@nivo/theming": "0.99.0",
-        "@types/d3-scale": "^4.0.8",
-        "d3-scale": "^4.0.2"
-      },
-      "peerDependencies": {
-        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
-      }
-    },
-    "node_modules/@nivo/sankey": {
-      "version": "0.99.0",
-      "resolved": "https://registry.npmjs.org/@nivo/sankey/-/sankey-0.99.0.tgz",
-      "integrity": "sha512-u5hySywsachjo9cHdUxCR9qwD6gfRVPEAcpuIUKiA0WClDjdGbl3vkrQcQcFexJUBThqSSbwGCDWR+2INXSbTw==",
-      "license": "MIT",
-      "dependencies": {
-        "@nivo/colors": "0.99.0",
-        "@nivo/core": "0.99.0",
-        "@nivo/legends": "0.99.0",
-        "@nivo/text": "0.99.0",
-        "@nivo/theming": "0.99.0",
-        "@nivo/tooltip": "0.99.0",
-        "@react-spring/web": "9.4.5 || ^9.7.2 || ^10.0",
-        "@types/d3-sankey": "^0.11.2",
-        "@types/d3-shape": "^3.1.6",
-        "d3-sankey": "^0.12.3",
-        "d3-shape": "^3.2.0",
-        "lodash": "^4.17.21"
-      },
-      "peerDependencies": {
-        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
-      }
-    },
-    "node_modules/@nivo/text": {
-      "version": "0.99.0",
-      "resolved": "https://registry.npmjs.org/@nivo/text/-/text-0.99.0.tgz",
-      "integrity": "sha512-ho3oZpAZApsJNjsIL5WJSAdg/wjzTBcwo1KiHBlRGUmD+yUWO8qp7V+mnYRhJchwygtRVALlPgZ/rlcW2Xr/MQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@nivo/core": "0.99.0",
-        "@nivo/theming": "0.99.0",
-        "@react-spring/web": "9.4.5 || ^9.7.2 || ^10.0"
-      },
-      "peerDependencies": {
-        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
-      }
-    },
-    "node_modules/@nivo/theming": {
-      "version": "0.99.0",
-      "resolved": "https://registry.npmjs.org/@nivo/theming/-/theming-0.99.0.tgz",
-      "integrity": "sha512-KvXlf0nqBzh/g2hAIV9bzscYvpq1uuO3TnFN3RDXGI72CrbbZFTGzprPju3sy/myVsauv+Bb+V4f5TZ0jkYKRg==",
-      "license": "MIT",
-      "dependencies": {
-        "lodash": "^4.17.21"
-      },
-      "peerDependencies": {
-        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
-      }
-    },
-    "node_modules/@nivo/tooltip": {
-      "version": "0.99.0",
-      "resolved": "https://registry.npmjs.org/@nivo/tooltip/-/tooltip-0.99.0.tgz",
-      "integrity": "sha512-weoEGR3xAetV4k2P6k96cdamGzKQ5F2Pq+uyDaHr1P3HYArM879Pl+x+TkU0aWjP6wgUZPx/GOBiV1Hb1JxIqg==",
-      "license": "MIT",
-      "dependencies": {
-        "@nivo/core": "0.99.0",
-        "@nivo/theming": "0.99.0",
-        "@react-spring/web": "9.4.5 || ^9.7.2 || ^10.0"
-      },
-      "peerDependencies": {
-        "react": "^16.14 || ^17.0 || ^18.0 || ^19.0"
-      }
-    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -4994,78 +4827,6 @@
       "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
       "license": "MIT"
     },
-    "node_modules/@react-spring/animated": {
-      "version": "10.0.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-10.0.3.tgz",
-      "integrity": "sha512-7MrxADV3vaUADn2V9iYhaIL6iOWRx9nCJjYrsk2AHD2kwPr6fg7Pt0v+deX5RnCDmCKNnD6W5fasiyM8D+wzJQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@react-spring/shared": "~10.0.3",
-        "@react-spring/types": "~10.0.3"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-spring/core": {
-      "version": "10.0.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-10.0.3.tgz",
-      "integrity": "sha512-D4DwNO68oohDf/0HG2G0Uragzb9IA1oXblxrd6MZAcBcUQG2EHUWXewjdECMPLNmQvlYVyyBRH6gPxXM5DX7DQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@react-spring/animated": "~10.0.3",
-        "@react-spring/shared": "~10.0.3",
-        "@react-spring/types": "~10.0.3"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/react-spring/donate"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-spring/rafz": {
-      "version": "10.0.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-10.0.3.tgz",
-      "integrity": "sha512-Ri2/xqt8OnQ2iFKkxKMSF4Nqv0LSWnxXT4jXFzBDsHgeeH/cHxTLupAWUwmV9hAGgmEhBmh5aONtj3J6R/18wg==",
-      "license": "MIT"
-    },
-    "node_modules/@react-spring/shared": {
-      "version": "10.0.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-10.0.3.tgz",
-      "integrity": "sha512-geCal66nrkaQzUVhPkGomylo+Jpd5VPK8tPMEDevQEfNSWAQP15swHm+MCRG4wVQrQlTi9lOzKzpRoTL3CA84Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@react-spring/rafz": "~10.0.3",
-        "@react-spring/types": "~10.0.3"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/@react-spring/types": {
-      "version": "10.0.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-10.0.3.tgz",
-      "integrity": "sha512-H5Ixkd2OuSIgHtxuHLTt7aJYfhMXKXT/rK32HPD/kSrOB6q6ooeiWAXkBy7L8F3ZxdkBb9ini9zP9UwnEFzWgQ==",
-      "license": "MIT"
-    },
-    "node_modules/@react-spring/web": {
-      "version": "10.0.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-10.0.3.tgz",
-      "integrity": "sha512-ndU+kWY81rHsT7gTFtCJ6mrVhaJ6grFmgTnENipzmKqot4HGf5smPNK+cZZJqoGeDsj9ZsiWPW4geT/NyD484A==",
-      "license": "MIT",
-      "dependencies": {
-        "@react-spring/animated": "~10.0.3",
-        "@react-spring/core": "~10.0.3",
-        "@react-spring/shared": "~10.0.3",
-        "@react-spring/types": "~10.0.3"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-rc.3",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.3.tgz",
@@ -5833,24 +5594,159 @@
         "assertion-error": "^2.0.1"
       }
     },
+    "node_modules/@types/d3": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
+      "integrity": "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/d3-axis": "*",
+        "@types/d3-brush": "*",
+        "@types/d3-chord": "*",
+        "@types/d3-color": "*",
+        "@types/d3-contour": "*",
+        "@types/d3-delaunay": "*",
+        "@types/d3-dispatch": "*",
+        "@types/d3-drag": "*",
+        "@types/d3-dsv": "*",
+        "@types/d3-ease": "*",
+        "@types/d3-fetch": "*",
+        "@types/d3-force": "*",
+        "@types/d3-format": "*",
+        "@types/d3-geo": "*",
+        "@types/d3-hierarchy": "*",
+        "@types/d3-interpolate": "*",
+        "@types/d3-path": "*",
+        "@types/d3-polygon": "*",
+        "@types/d3-quadtree": "*",
+        "@types/d3-random": "*",
+        "@types/d3-scale": "*",
+        "@types/d3-scale-chromatic": "*",
+        "@types/d3-selection": "*",
+        "@types/d3-shape": "*",
+        "@types/d3-time": "*",
+        "@types/d3-time-format": "*",
+        "@types/d3-timer": "*",
+        "@types/d3-transition": "*",
+        "@types/d3-zoom": "*"
+      }
+    },
     "node_modules/@types/d3-array": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
       "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
       "license": "MIT"
     },
+    "node_modules/@types/d3-axis": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.6.tgz",
+      "integrity": "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-brush": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.6.tgz",
+      "integrity": "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-chord": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.6.tgz",
+      "integrity": "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-color": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
       "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
       "license": "MIT"
     },
+    "node_modules/@types/d3-contour": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.6.tgz",
+      "integrity": "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-dispatch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.7.tgz",
+      "integrity": "sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-drag": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-dsv": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
+      "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-ease": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
       "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
       "license": "MIT"
     },
+    "node_modules/@types/d3-fetch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
+      "integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-dsv": "*"
+      }
+    },
+    "node_modules/@types/d3-force": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.10.tgz",
+      "integrity": "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-format": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
+      "integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-hierarchy": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz",
+      "integrity": "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-interpolate": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
@@ -5866,29 +5762,23 @@
       "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
       "license": "MIT"
     },
-    "node_modules/@types/d3-sankey": {
-      "version": "0.11.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-sankey/-/d3-sankey-0.11.2.tgz",
-      "integrity": "sha512-U6SrTWUERSlOhnpSrgvMX64WblX1AxX6nEjI2t3mLK2USpQrnbwYYK+AS9SwiE7wgYmOsSSKoSdr8aoKBH0HgQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/d3-shape": "^1"
-      }
-    },
-    "node_modules/@types/d3-sankey/node_modules/@types/d3-path": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.11.tgz",
-      "integrity": "sha512-4pQMp8ldf7UaB/gR8Fvvy69psNHkTpD/pVw3vmEi8iZAB9EPMBruB1JvHO4BIq9QkUUd2lV1F5YXpMNj7JPBpw==",
+    "node_modules/@types/d3-polygon": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.2.tgz",
+      "integrity": "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==",
       "license": "MIT"
     },
-    "node_modules/@types/d3-sankey/node_modules/@types/d3-shape": {
-      "version": "1.3.12",
-      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.12.tgz",
-      "integrity": "sha512-8oMzcd4+poSLGgV0R1Q1rOlx/xdmozS4Xab7np0eamFFUYq71AU9pOCJEFnkXW2aI/oXdVYJzw6pssbSut7Z9Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/d3-path": "^1"
-      }
+    "node_modules/@types/d3-quadtree": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
+      "integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-random": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.3.tgz",
+      "integrity": "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==",
+      "license": "MIT"
     },
     "node_modules/@types/d3-scale": {
       "version": "4.0.9",
@@ -5905,6 +5795,12 @@
       "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==",
       "license": "MIT"
     },
+    "node_modules/@types/d3-selection": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+      "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-shape": {
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
@@ -5920,12 +5816,37 @@
       "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
       "license": "MIT"
     },
+    "node_modules/@types/d3-time-format": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.3.tgz",
+      "integrity": "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-timer": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
       "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
       "license": "MIT"
     },
+    "node_modules/@types/d3-transition": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+      "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+      "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
     "node_modules/@types/debug": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
@@ -5977,6 +5898,12 @@
         "@types/estree": "*"
       }
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "license": "MIT"
+    },
     "node_modules/@types/hast": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
@@ -8078,6 +8005,47 @@
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
+    "node_modules/d3": {
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
+      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-array": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
@@ -8090,6 +8058,43 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-color": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
@@ -8099,6 +8104,121 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-contour": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "license": "ISC",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "license": "ISC",
+      "dependencies": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dsv": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-format": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
@@ -8108,6 +8228,27 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-geo": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-interpolate": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
@@ -8129,46 +8270,33 @@
         "node": ">=12"
       }
     },
-    "node_modules/d3-sankey": {
-      "version": "0.12.3",
-      "resolved": "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.12.3.tgz",
-      "integrity": "sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "d3-array": "1 - 2",
-        "d3-shape": "^1.2.0"
+    "node_modules/d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
       }
     },
-    "node_modules/d3-sankey/node_modules/d3-array": {
-      "version": "2.12.1",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
-      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "internmap": "^1.0.0"
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
       }
     },
-    "node_modules/d3-sankey/node_modules/d3-path": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
-      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/d3-sankey/node_modules/d3-shape": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
-      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "d3-path": "1"
+    "node_modules/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
       }
     },
-    "node_modules/d3-sankey/node_modules/internmap": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
-      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
-      "license": "ISC"
-    },
     "node_modules/d3-scale": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
@@ -8198,6 +8326,16 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-shape": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
@@ -8243,6 +8381,41 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -8446,6 +8619,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delaunator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "license": "ISC",
+      "dependencies": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -10074,6 +10256,18 @@
         "node": ">= 14"
       }
     },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/idb": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
@@ -13017,16 +13211,6 @@
         "react-dom": ">=16.6.0"
       }
     },
-    "node_modules/react-virtualized-auto-sizer": {
-      "version": "1.0.26",
-      "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.26.tgz",
-      "integrity": "sha512-CblNyiNVw2o+hsa5/49NH2ogGxZ+t+3aweRvNSq7TVjDIlwk7ir4lencEg5HxHeSzwNarSkNkiu0qJSOXtxm5A==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -13306,6 +13490,12 @@
         "node": ">= 0.8.15"
       }
     },
+    "node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==",
+      "license": "Unlicense"
+    },
     "node_modules/rollup": {
       "version": "2.79.2",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
@@ -13345,6 +13535,12 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/safe-array-concat": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
@@ -13417,6 +13613,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
     "node_modules/saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -14977,18 +15179,6 @@
         }
       }
     },
-    "node_modules/use-debounce": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.1.0.tgz",
-      "integrity": "sha512-lu87Za35V3n/MyMoEpD5zJv0k7hCn0p+V/fK2kWD+3k2u3kOCwO593UArbczg1fhfs2rqPEnHpULJ3KmGdDzvg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 16.0.0"
-      },
-      "peerDependencies": {
-        "react": "*"
-      }
-    },
     "node_modules/use-sidecar": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
@@ -15087,15 +15277,6 @@
         "d3-timer": "^3.0.1"
       }
     },
-    "node_modules/victory-vendor/node_modules/d3-ease": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
-      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/vite": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
diff --git a/package.json b/package.json
index bd8319e..0c5d64a 100644
--- a/package.json
+++ b/package.json
@@ -14,15 +14,16 @@
   "dependencies": {
     "@ciphera-net/ui": "^0.2.7",
     "@ducanh2912/next-pwa": "^10.2.9",
-    "@nivo/sankey": "^0.99.0",
     "@phosphor-icons/react": "^2.1.10",
     "@simplewebauthn/browser": "^13.2.2",
     "@stripe/react-stripe-js": "^5.6.0",
     "@stripe/stripe-js": "^8.7.0",
     "@tanstack/react-virtual": "^3.13.21",
+    "@types/d3": "^7.4.3",
     "class-variance-authority": "^0.7.1",
     "cobe": "^0.6.5",
     "country-flag-icons": "^1.6.4",
+    "d3": "^7.9.0",
     "d3-scale": "^4.0.2",
     "framer-motion": "^12.23.26",
     "html-to-image": "^1.11.13",
-- 
2.49.1


From 52427fea93cb4afaf4e027bbb9777a2cd756cab9 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 22:02:29 +0100
Subject: [PATCH 023/428] fix: change journey depth default to 4, max to 5

---
 app/sites/[id]/journeys/page.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/sites/[id]/journeys/page.tsx b/app/sites/[id]/journeys/page.tsx
index f1ddb9d..ec3c042 100644
--- a/app/sites/[id]/journeys/page.tsx
+++ b/app/sites/[id]/journeys/page.tsx
@@ -16,7 +16,7 @@ import {
   useJourneyEntryPoints,
 } from '@/lib/swr/dashboard'
 
-const DEFAULT_DEPTH = 10
+const DEFAULT_DEPTH = 4
 
 function getThisWeekRange(): { start: string; end: string } {
   const today = new Date()
@@ -148,12 +148,12 @@ export default function JourneysPage() {
                 <span className="text-brand-orange font-bold">
                   {depth} steps deep
                 </span>
-                <span>10 steps</span>
+                <span>5 steps</span>
               </div>
               <input
                 type="range"
                 min={2}
-                max={10}
+                max={5}
                 step={1}
                 value={depth}
                 onChange={(e) => setDepth(parseInt(e.target.value))}
-- 
2.49.1


From b16f01bd7f03c9a8cfcb1374db0bc9e47c257288 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 22:08:14 +0100
Subject: [PATCH 024/428] fix: rename Step 1 to Entry in columns view, max
 depth to 6

---
 app/sites/[id]/journeys/page.tsx      | 4 ++--
 components/journeys/ColumnJourney.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/sites/[id]/journeys/page.tsx b/app/sites/[id]/journeys/page.tsx
index ec3c042..10d66e6 100644
--- a/app/sites/[id]/journeys/page.tsx
+++ b/app/sites/[id]/journeys/page.tsx
@@ -148,12 +148,12 @@ export default function JourneysPage() {
                 <span className="text-brand-orange font-bold">
                   {depth} steps deep
                 </span>
-                <span>5 steps</span>
+                <span>6 steps</span>
               </div>
               <input
                 type="range"
                 min={2}
-                max={5}
+                max={6}
                 step={1}
                 value={depth}
                 onChange={(e) => setDepth(parseInt(e.target.value))}
diff --git a/components/journeys/ColumnJourney.tsx b/components/journeys/ColumnJourney.tsx
index 1646450..c03ca18 100644
--- a/components/journeys/ColumnJourney.tsx
+++ b/components/journeys/ColumnJourney.tsx
@@ -163,7 +163,7 @@ function ColumnHeader({
   return (
     <div className="flex flex-col items-center gap-0.5 mb-4">
       <span className="text-xs font-medium text-neutral-400 dark:text-neutral-500 uppercase tracking-wider">
-        Step {column.index + 1}
+        {column.index === 0 ? 'Entry' : `Step ${column.index + 1}`}
       </span>
       <div className="flex items-baseline gap-1.5">
         <span className="text-sm font-semibold text-neutral-900 dark:text-white tabular-nums">
-- 
2.49.1


From 1ba6f6609dbaea2c9337ec7c81ec88a342ddc125 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 22:27:11 +0100
Subject: [PATCH 025/428] fix: step numbering starts at 1 after Entry column

---
 components/journeys/ColumnJourney.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/journeys/ColumnJourney.tsx b/components/journeys/ColumnJourney.tsx
index c03ca18..fe6e706 100644
--- a/components/journeys/ColumnJourney.tsx
+++ b/components/journeys/ColumnJourney.tsx
@@ -163,7 +163,7 @@ function ColumnHeader({
   return (
     <div className="flex flex-col items-center gap-0.5 mb-4">
       <span className="text-xs font-medium text-neutral-400 dark:text-neutral-500 uppercase tracking-wider">
-        {column.index === 0 ? 'Entry' : `Step ${column.index + 1}`}
+        {column.index === 0 ? 'Entry' : `Step ${column.index}`}
       </span>
       <div className="flex items-baseline gap-1.5">
         <span className="text-sm font-semibold text-neutral-900 dark:text-white tabular-nums">
-- 
2.49.1


From 01222bf0a90af94a2bd3d9bcbc9fe76b0689b8b7 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 16 Mar 2026 23:14:07 +0100
Subject: [PATCH 026/428] =?UTF-8?q?fix:=20bump=20dark=20mode=20inline=20ba?=
 =?UTF-8?q?r=20opacity=20from=2025%=20to=2040%=20=E2=80=94=20less=20brown,?=
 =?UTF-8?q?=20more=20orange?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/dashboard/Campaigns.tsx    | 2 +-
 components/dashboard/ContentStats.tsx | 2 +-
 components/dashboard/Locations.tsx    | 2 +-
 components/dashboard/TechSpecs.tsx    | 2 +-
 components/dashboard/TopReferrers.tsx | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/dashboard/Campaigns.tsx b/components/dashboard/Campaigns.tsx
index 771e58a..1c7ed31 100644
--- a/components/dashboard/Campaigns.tsx
+++ b/components/dashboard/Campaigns.tsx
@@ -164,7 +164,7 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
                     className={`relative flex items-center justify-between py-1.5 group hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
                   >
                     <div
-                      className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/25 rounded-md transition-all"
+                      className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/40 rounded-md transition-all"
                       style={{ width: `${barWidth}%` }}
                     />
                     <div className="relative flex-1 text-neutral-900 dark:text-white flex items-center gap-3 min-w-0">
diff --git a/components/dashboard/ContentStats.tsx b/components/dashboard/ContentStats.tsx
index 6436398..f828889 100644
--- a/components/dashboard/ContentStats.tsx
+++ b/components/dashboard/ContentStats.tsx
@@ -159,7 +159,7 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
                     className={`relative flex items-center justify-between h-9 group hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
                   >
                     <div
-                      className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/25 rounded-md transition-all"
+                      className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/40 rounded-md transition-all"
                       style={{ width: `${barWidth}%` }}
                     />
                     <div className="relative flex-1 truncate text-neutral-900 dark:text-white flex items-center">
diff --git a/components/dashboard/Locations.tsx b/components/dashboard/Locations.tsx
index ddb9895..3fb9374 100644
--- a/components/dashboard/Locations.tsx
+++ b/components/dashboard/Locations.tsx
@@ -306,7 +306,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
                       className={`relative flex items-center justify-between h-9 group hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
                     >
                       <div
-                        className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/25 rounded-md transition-all"
+                        className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/40 rounded-md transition-all"
                         style={{ width: `${barWidth}%` }}
                       />
                       <div className="relative flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
diff --git a/components/dashboard/TechSpecs.tsx b/components/dashboard/TechSpecs.tsx
index 51f9ec8..bd39109 100644
--- a/components/dashboard/TechSpecs.tsx
+++ b/components/dashboard/TechSpecs.tsx
@@ -191,7 +191,7 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
                     className={`relative flex items-center justify-between h-9 group hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
                   >
                     <div
-                      className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/25 rounded-md transition-all"
+                      className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/40 rounded-md transition-all"
                       style={{ width: `${barWidth}%` }}
                     />
                     <div className="relative flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
diff --git a/components/dashboard/TopReferrers.tsx b/components/dashboard/TopReferrers.tsx
index 1f87352..04f1e19 100644
--- a/components/dashboard/TopReferrers.tsx
+++ b/components/dashboard/TopReferrers.tsx
@@ -123,7 +123,7 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
                     className={`relative flex items-center justify-between h-9 group hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
                   >
                     <div
-                      className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/25 rounded-md transition-all"
+                      className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/40 rounded-md transition-all"
                       style={{ width: `${barWidth}%` }}
                     />
                     <div className="relative flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
-- 
2.49.1


From d45d39aa607014974e886f4b2dc4ee5a356eafa8 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 17 Mar 2026 10:17:21 +0100
Subject: [PATCH 027/428] feat: add client-side headless browser detection

Skip events from headless Chrome (empty plugins, missing chrome
runtime), hidden browsers (zero outer dimensions), and known bot
viewports (1024x1024).
---
 public/script.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/public/script.js b/public/script.js
index f66f4c8..9dfc800 100644
--- a/public/script.js
+++ b/public/script.js
@@ -18,6 +18,21 @@
     return;
   }
 
+  // * Skip likely bots: headless Chrome fingerprints and known bot viewports
+  var isChrome = /Chrome/.test(navigator.userAgent) && !/Edg/.test(navigator.userAgent);
+  if (
+    // * Headless Chrome has zero plugins (real Chrome always has at least 1; Firefox excluded — it legitimately reports 0)
+    (isChrome && navigator.plugins && navigator.plugins.length === 0) ||
+    // * Headless Chrome lacks the chrome runtime object
+    (isChrome && !window.chrome) ||
+    // * No outer window dimensions — headless or hidden browser
+    (window.outerWidth === 0 || window.outerHeight === 0) ||
+    // * Default headless viewport: exactly 1024x1024 (no real monitor uses this)
+    (window.innerWidth === 1024 && window.innerHeight === 1024)
+  ) {
+    return;
+  }
+
   // * Get domain from script tag
   const script = document.currentScript || document.querySelector('script[data-domain]');
   if (!script || !script.getAttribute('data-domain')) {
-- 
2.49.1


From ebd25770b4d706d740604066212e803055a8f60d Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 17 Mar 2026 10:19:29 +0100
Subject: [PATCH 028/428] revert: remove client-side bot detection from
 tracking script

Server-side heuristic scoring already catches these patterns via
IsSuspiciousEvent. Client-side checks are trivially bypassable
(script is public) and add payload weight for all real users.
---
 public/script.js | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/public/script.js b/public/script.js
index 9dfc800..e864977 100644
--- a/public/script.js
+++ b/public/script.js
@@ -18,20 +18,6 @@
     return;
   }
 
-  // * Skip likely bots: headless Chrome fingerprints and known bot viewports
-  var isChrome = /Chrome/.test(navigator.userAgent) && !/Edg/.test(navigator.userAgent);
-  if (
-    // * Headless Chrome has zero plugins (real Chrome always has at least 1; Firefox excluded — it legitimately reports 0)
-    (isChrome && navigator.plugins && navigator.plugins.length === 0) ||
-    // * Headless Chrome lacks the chrome runtime object
-    (isChrome && !window.chrome) ||
-    // * No outer window dimensions — headless or hidden browser
-    (window.outerWidth === 0 || window.outerHeight === 0) ||
-    // * Default headless viewport: exactly 1024x1024 (no real monitor uses this)
-    (window.innerWidth === 1024 && window.innerHeight === 1024)
-  ) {
-    return;
-  }
 
   // * Get domain from script tag
   const script = document.currentScript || document.querySelector('script[data-domain]');
-- 
2.49.1


From e7ebe2a923464441c6680b3f5cde8a43b380586f Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 17 Mar 2026 10:20:52 +0100
Subject: [PATCH 029/428] refactor: remove client-side 0x0 screen check,
 handled server-side

IsSuspiciousEvent already scores 0x0 screens as +5 (bot threshold).
Keeping the check client-side hides bot traffic from analysis and
is trivially bypassable.
---
 public/script.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/public/script.js b/public/script.js
index e864977..68c70b3 100644
--- a/public/script.js
+++ b/public/script.js
@@ -284,11 +284,6 @@
       height: window.innerHeight || window.screen.height,
     };
 
-    // * Skip bots with no screen dimensions (0x0)
-    if (screenSize.width === 0 && screenSize.height === 0) {
-      return;
-    }
-
     const payload = {
       domain: domain,
       path: path,
-- 
2.49.1


From 109aca62c0fbb6030a5248d1e9edaf075440924c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 17 Mar 2026 10:24:44 +0100
Subject: [PATCH 030/428] docs: add bot filtering and script improvements to
 changelog

---
 CHANGELOG.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8bbcc5a..2cf374b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ### Improved
 
+- **Smarter bot filtering.** Pulse now catches more types of automated traffic that were slipping through — like headless browsers with default screen sizes, bot farms that rotate through different locations, and bots that fire duplicate events within milliseconds. Your analytics data will be cleaner with fewer fake visitors inflating your numbers.
+- **Leaner tracking script.** Bot detection checks that belonged on the server have been moved there, making the tracking script smaller and faster for your real visitors.
+
+### Improved
+
 - **Actionable empty states.** When a dashboard section has no data yet, you now get a direct action — like "Install tracking script" or "Build a UTM URL" — instead of just passive text. Gets you set up faster.
 - **Animated numbers across the dashboard.** Stats like visitors, pageviews, bounce rate, and visit duration now smoothly count up or down when you switch date ranges, apply filters, or when real-time visitor counts change — instead of just jumping to the new value.
 - **Inline bar charts on dashboard lists.** Pages, referrers, locations, technology, and campaigns now show subtle proportional bars behind each row, making it easier to compare values at a glance without reading numbers.
-- 
2.49.1


From 81e2e8bd6ca024cbc97a410cace6c528fe9b2052 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 17 Mar 2026 11:03:17 +0100
Subject: [PATCH 031/428] chore: consolidate unreleased changelog entries
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Merge duplicate section headers, remove duplicate visit duration entry,
trim granular sub-features into parent entries, and reorder sections to
follow Keep a Changelog convention (Added → Improved → Removed → Fixed).
---
 CHANGELOG.md | 66 +++++++++++++---------------------------------------
 1 file changed, 16 insertions(+), 50 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2cf374b..7ba9082 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,75 +6,44 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
-### Improved
+### Added
 
-- **Smarter bot filtering.** Pulse now catches more types of automated traffic that were slipping through — like headless browsers with default screen sizes, bot farms that rotate through different locations, and bots that fire duplicate events within milliseconds. Your analytics data will be cleaner with fewer fake visitors inflating your numbers.
-- **Leaner tracking script.** Bot detection checks that belonged on the server have been moved there, making the tracking script smaller and faster for your real visitors.
+- **BunnyCDN integration.** Connect your BunnyCDN account in Settings > Integrations to monitor your CDN performance right alongside your analytics. A new "CDN" tab on your dashboard shows total bandwidth served, request volume, cache hit rate, origin response time, and error counts — each with percentage changes compared to the previous period. Charts show bandwidth trends (total vs cached), daily request volume, and error breakdowns over time. A geographic breakdown shows which countries consume the most bandwidth. When connecting, Pulse automatically filters your pull zones to only show ones matching your site's domain. Pulse only stores your API key encrypted and only reads statistics — it never modifies anything in your BunnyCDN account. You can disconnect and fully remove all CDN data at any time.
+- **Google Search Console integration.** Connect your Google Search Console account in Settings > Integrations to see which search queries bring visitors to your site. A new "Search" tab on your dashboard shows total clicks, impressions, average CTR, and average ranking position — with percentage changes compared to the previous period. Browse your top search queries and top pages in sortable, paginated tables. Click any query to see which pages rank for it, or click any page to see which queries drive traffic to it. A trend chart shows how clicks and impressions change over time, and a green badge highlights new queries that appeared this period. Pulse only requests read-only access to your Search Console data, encrypts your Google credentials, and lets you disconnect and fully remove all search data at any time.
+- **Free plan now visible on the Pricing page.** The free tier is no longer hidden — it's displayed as the first option on the Pricing page so you can see exactly what you get before signing up: 1 site, 5,000 monthly pageviews, and 6 months of data retention, completely free.
+- **Free plan limited to 1 site.** Free accounts are now limited to a single site. If you need more, you can upgrade to Solo or above from the Pricing page.
 
 ### Improved
 
+- **Smarter bot filtering.** Pulse now catches more types of automated traffic that were slipping through — like headless browsers with default screen sizes, bot farms that rotate through different locations, and bots that fire duplicate events within milliseconds. Bot detection checks have also been moved from the tracking script to the server, making the script smaller and faster for real visitors.
 - **Actionable empty states.** When a dashboard section has no data yet, you now get a direct action — like "Install tracking script" or "Build a UTM URL" — instead of just passive text. Gets you set up faster.
 - **Animated numbers across the dashboard.** Stats like visitors, pageviews, bounce rate, and visit duration now smoothly count up or down when you switch date ranges, apply filters, or when real-time visitor counts change — instead of just jumping to the new value.
 - **Inline bar charts on dashboard lists.** Pages, referrers, locations, technology, and campaigns now show subtle proportional bars behind each row, making it easier to compare values at a glance without reading numbers.
-- **Redesigned Top Paths.** The Top Paths section on the Journeys page has been completely rebuilt — from bulky cards to a clean, compact list with inline bars that matches the rest of Pulse. Long path sequences are truncated so they stay readable.
-- **Redesigned Journeys page.** The depth slider now matches the rest of the UI and goes up to 10 steps. Controls are integrated into the chart card for a cleaner layout.
-- **More reliable visit duration tracking.** Visit duration was silently dropping to 0s for visitors who only viewed one page — especially on mobile or when closing a tab quickly. The tracking script now captures time-on-page more reliably across all browsers, and sessions where duration couldn't be measured are excluded from the average instead of counting as 0s.
+- **Redesigned Journeys page.** The Journeys page has been rebuilt — the depth slider now matches the rest of the UI and goes up to 10 steps, controls are integrated into the chart card, and Top Paths uses a clean compact list with inline bars instead of bulky cards.
+- **More reliable visit duration tracking.** Visit duration was silently dropping to 0s for visitors who only viewed one page — especially on mobile or when closing a tab quickly. The tracking script now captures time-on-page more reliably across all browsers, and sessions where duration couldn't be measured are excluded from the average instead of counting as 0s. This makes the Visit Duration metric, Journeys, and Top Paths much more accurate.
 - **More accurate rage click detection.** Rage clicks no longer fire when you triple-click to select text on a page. Previously, selecting a paragraph (a normal 3-click action) was being counted as a rage click, which inflated frustration metrics. Only genuinely frustrated rapid clicking is tracked now.
 - **Fresher CDN data.** BunnyCDN statistics now refresh every 3 hours instead of once a day, so your CDN tab shows much more current bandwidth, request, and cache data.
 - **More accurate dead click detection.** Dead clicks were being reported on elements that actually worked — like close buttons on cart drawers, modal dismiss buttons, and page content areas. Three fixes make dead clicks much more reliable:
   - Buttons that trigger changes elsewhere on the page (closing a drawer, opening a modal) are no longer flagged as dead.
   - Page content areas that aren't actually clickable (like `<main>` containers) are no longer treated as interactive elements.
   - Single-page app navigations are now properly detected, so links that use client-side routing aren't mistakenly reported as broken.
+- **Journeys page now shows data on low-traffic sites.** The Journeys page previously required at least 2–3 sessions following the same path before showing any data. It now shows all navigation flows immediately, so you can see how visitors move through your site from day one.
+- **European date and time formatting.** All dates across Pulse now use day-first ordering (14 Mar 2025) and 24-hour time (14:30) instead of the US-style month-first format. This applies everywhere — dashboard charts, exports, billing dates, invoices, uptime checks, audit logs, and more.
+- **Sites now show their verification status.** Each site on your dashboard now displays either a green "Active" badge (if verified) or an amber "Unverified" badge. The Settings page also shows a green confirmation bar once verified. When you verify your tracking script installation, the status is saved permanently — no more showing "Active" for sites that haven't been set up yet.
+- **Cleaner page paths in your reports.** Pages like `/products?_t=123456` or `/about?session=abc` now correctly show as `/products` and `/about`. Trailing slashes are also normalized — `/about/` and `/about` count as the same page. Only marketing attribution parameters (like UTM tags) are preserved for traffic source tracking — all other junk parameters are automatically removed, so your Top Pages and Journeys stay clean.
+- **Easier to hover country dots on the map.** The orange location markers on the world map are now much easier to interact with — you no longer need pixel-perfect aim to see the tooltip.
+- **Smoother chart curves and filled area.** The dashboard chart line now flows with natural curves instead of sharp flat tops at peaks. The area beneath the line is filled with a soft transparent orange gradient that fades toward the bottom, making trends easier to read at a glance.
+- **Smoother loading transitions.** When your data finishes loading, the page now fades in smoothly instead of appearing all at once. This applies across Dashboard, Journeys, Funnels, Behavior, Uptime, Settings, Notifications, and shared dashboards. If your data was already cached from a previous visit, it still loads instantly with no animation — the fade only kicks in when you're actually waiting for fresh data.
+- **Faster tab switching across the board.** Switching between Settings, Funnels, Uptime, and other tabs now shows your data instantly instead of flashing a loading skeleton every time. Previously visited tabs remember their data and show it right away, while quietly refreshing in the background so you always see the latest numbers without the wait.
 
 ### Removed
 
 - **Performance insights removed.** The Performance tab, Core Web Vitals tracking (LCP, CLS, INP), and the "Enable performance insights" toggle in Settings have been removed. The tracking script no longer collects Web Vitals data. Visit duration tracking continues to work as before.
 
-### Added
-
-- **BunnyCDN integration.** Connect your BunnyCDN account in Settings > Integrations to monitor your CDN performance right alongside your analytics. A new "CDN" tab on your dashboard shows total bandwidth served, request volume, cache hit rate, origin response time, and error counts — each with percentage changes compared to the previous period. Charts show bandwidth trends (total vs cached), daily request volume, and error breakdowns over time. A geographic breakdown shows which countries consume the most bandwidth. Pulse only stores your API key encrypted and only reads statistics — it never modifies anything in your BunnyCDN account. You can disconnect and fully remove all CDN data at any time.
-- **Smart pull zone matching.** When connecting BunnyCDN, Pulse automatically filters your pull zones to only show the ones that match your tracked site's domain — so you can't accidentally connect the wrong pull zone.
-
-- **Google Search Console integration.** Connect your Google Search Console account in Settings > Integrations to see which search queries bring visitors to your site. A new "Search" tab on your dashboard shows total clicks, impressions, average CTR, and average ranking position — with percentage changes compared to the previous period. Browse your top search queries and top pages in sortable, paginated tables. Click any query to see which pages rank for it, or click any page to see which queries drive traffic to it. Pulse only requests read-only access to your Search Console data, encrypts your Google credentials, and lets you disconnect and fully remove all search data at any time.
-- **Integrations tab in Settings.** A new "Integrations" section in your site settings is where you connect and manage external services. Google Search Console is the first integration available — more will follow.
-- **Search performance on your dashboard.** When Google Search Console is connected, a new "Search" panel appears on your main dashboard alongside Campaigns — showing your total clicks, impressions, and average position at a glance, plus your top 5 search queries. Click "View all" to dive deeper.
-- **Clicks & Impressions trend chart.** The Search tab now includes a chart showing how your clicks and impressions change over time, so you can spot trends and correlate them with content changes.
-- **Top query position cards.** Five compact cards at the top of the Search tab show your best-performing queries with their average ranking position and click count.
-- **New queries indicator.** A green badge on the Search tab tells you how many new search queries appeared this period compared to the last — so you can see your search footprint growing.
-
 ### Fixed
 
-- **BunnyCDN logo now displays correctly.** The BunnyCDN integration card in Settings previously showed a generic globe icon. It now shows the proper BunnyCDN bunny logo.
 - **Your BunnyCDN API key is no longer visible in network URLs.** When loading pull zones, the API key was previously sent as a URL parameter. It's now sent securely in the request body, just like when connecting.
-
 - **No more "Site not found" when switching back to Pulse.** If you left Pulse in the background and came back, you could see a wall of errors and a blank page. This happened because the browser fired several requests at once when the tab regained focus, and if any failed, they all retried repeatedly — flooding the connection and making it worse. Failed requests now back off gracefully instead of retrying in a loop.
-
-### Improved
-
-- **Visit duration now works for single-page sessions.** Previously, if a visitor viewed only one page and left, the visit duration showed as "0s" because there was no second pageview to measure against. Pulse now tracks how long you actually spent on the page and reports real durations — even for single-page visits. This makes the Visit Duration metric, Journeys, and Top Paths much more accurate.
-- **Journeys page now shows data on low-traffic sites.** The Journeys page previously required at least 2–3 sessions following the same path before showing any data. It now shows all navigation flows immediately, so you can see how visitors move through your site from day one.
-- **European date and time formatting.** All dates across Pulse now use day-first ordering (14 Mar 2025) and 24-hour time (14:30) instead of the US-style month-first format. This applies everywhere — dashboard charts, exports, billing dates, invoices, uptime checks, audit logs, and more.
-
-### Added
-
-- **Free plan now visible on the Pricing page.** The free tier is no longer hidden — it's displayed as the first option on the Pricing page so you can see exactly what you get before signing up: 1 site, 5,000 monthly pageviews, and 6 months of data retention, completely free.
-- **Free plan limited to 1 site.** Free accounts are now limited to a single site. If you need more, you can upgrade to Solo or above from the Pricing page.
-
-### Improved
-
-- **Sites now show their verification status.** Each site on your dashboard now displays either a green "Active" badge (if verified) or an amber "Unverified" badge. When you verify your tracking script installation, the status is saved permanently — no more showing "Active" for sites that haven't been set up yet.
-- **Verification status visible in Settings too.** Once your tracking script is verified, the Settings page shows a green confirmation bar instead of the verify button — so you can tell at a glance that everything is working. A "Re-verify" link is still there if you ever need to check again.
-- **Cleaner page paths in your reports.** Pages like `/products?_t=123456` or `/about?session=abc` now correctly show as `/products` and `/about`. Only marketing attribution parameters (like UTM tags) are preserved for traffic source tracking — all other junk parameters are automatically removed, so your Top Pages and Journeys stay clean without us having to chase down every new parameter format.
-- **Easier to hover country dots on the map.** The orange location markers on the world map are now much easier to interact with — you no longer need pixel-perfect aim to see the tooltip.
-- **Smoother chart curves and filled area.** The dashboard chart line now flows with natural curves instead of sharp flat tops at peaks. The area beneath the line is filled with a soft transparent orange gradient that fades toward the bottom, making trends easier to read at a glance.
-- **Refreshed chart background.** The dashboard chart now has subtle horizontal lines instead of the old dotted background, giving the chart area a cleaner look.
-- **Smoother loading transitions.** When your data finishes loading, the page now fades in smoothly instead of appearing all at once. This applies across Dashboard, Journeys, Funnels, Behavior, Uptime, Settings, Notifications, and shared dashboards. If your data was already cached from a previous visit, it still loads instantly with no animation — the fade only kicks in when you're actually waiting for fresh data.
-- **Faster tab switching across the board.** Switching between Settings, Funnels, Uptime, and other tabs now shows your data instantly instead of flashing a loading skeleton every time. Previously visited tabs remember their data and show it right away, while quietly refreshing in the background so you always see the latest numbers without the wait.
-- **Smoother loading on the Journeys page.** The Journeys tab now shows a polished skeleton placeholder while data loads, matching the loading experience on other tabs.
-- **Consistent chart colors.** All dashboard charts — Unique Visitors, Total Pageviews, Bounce Rate, and Visit Duration — now use the same brand orange color for a cleaner, more cohesive look.
-
-### Fixed
-
 - **No more random errors when switching tabs.** Navigating between Dashboard, Funnels, Uptime, and Settings no longer shows "Invalid credentials", "Something went wrong", or "Site not found" errors. This was caused by a timing issue when your login session refreshed in the background while multiple pages were loading at the same time — all those requests now wait for the refresh to finish and retry cleanly.
 - **More accurate pageview counts.** Refreshing a page no longer inflates your pageview numbers. The tracking script now detects when the same page is loaded again within a few seconds and skips the duplicate, so metrics like total pageviews, pages per session, and visit duration reflect real navigation instead of reload habits.
 - **Self-referrals no longer pollute your traffic sources.** Internal navigation within your own site (e.g. clicking from your homepage to your about page) no longer shows your own domain as a referrer. Only external traffic sources appear in your Referrers panel now.
@@ -82,11 +51,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 - **Browser back/forward no longer double-counts pageviews.** Pressing the back or forward button could occasionally register two pageviews instead of one. The tracking script now correctly deduplicates these navigations.
 - **Preloaded pages no longer count as visits.** Modern browsers sometimes preload pages in the background before you actually visit them. These ghost visits no longer inflate your pageview counts — only pages the visitor actually sees are tracked.
 - **Marketing parameters no longer fragment your pages.** Pages like `/about?utm_source=google` and `/about?utm_campaign=spring` now correctly show as just `/about` in your Top Pages. UTM tags, Facebook click IDs, Google click IDs, and other tracking parameters are stripped from the page path so all visits to the same page are grouped together.
-- **Trailing slashes no longer split pages.** `/about/` and `/about` now count as the same page instead of appearing as separate entries in your analytics.
 - **Traffic sources are no longer over-counted.** When a visitor arrived from Facebook (or any external source) and browsed multiple pages, every page was credited to Facebook instead of just the first. Now only the landing page shows the referrer, giving you accurate traffic source numbers.
 - **UTM attribution now works correctly.** Visitors arriving via campaign links (e.g. from Facebook Ads, Google Ads, or email campaigns) now have their traffic source, medium, and campaign properly recorded. Previously, this data was accidentally lost before it reached the server.
-- **More ad tracking clutter removed from page paths.** Facebook ad parameters and click IDs from various platforms are cleaned from your page URLs so your Top Pages stay tidy.
-- **Better bot detection.** Automated browsers (used by scrapers and testing tools) and bots with no screen dimensions are now filtered out before they can send events, keeping your visitor counts cleaner.
 - **Outbound links and file downloads now show the URL.** Previously you could only see how many outbound clicks or downloads happened. Now you can see exactly which external links visitors clicked and which files they downloaded.
 - **Dead click detection no longer triggers on form fields.** Clicking on a text input, dropdown, or text area to interact with it is normal — it no longer gets flagged as a dead click.
 
-- 
2.49.1


From c833a759f4ddc8a791236df95c99a2de5565efe2 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 17 Mar 2026 12:28:23 +0100
Subject: [PATCH 032/428] refactor: slim tracking script, move logic
 server-side

---
 public/script.js | 121 +++++------------------------------------------
 1 file changed, 13 insertions(+), 108 deletions(-)

diff --git a/public/script.js b/public/script.js
index 68c70b3..21632f6 100644
--- a/public/script.js
+++ b/public/script.js
@@ -189,40 +189,17 @@
     return cachedSessionId;
   }
 
-  // * Normalize path: strip trailing slash and all query params except UTM/attribution.
-  // * Allowlist approach — only UTM params pass through because the backend extracts
-  // * them for attribution before cleaning the stored path. Everything else (cache-busters,
-  // * ad click IDs, filter params, etc.) is stripped to prevent path fragmentation.
-  var KEEP_PARAMS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'source', 'ref'];
+  // * Normalize path: strip trailing slash, return pathname only.
+  // * UTM extraction and query handling moved server-side.
   function cleanPath() {
     var pathname = window.location.pathname;
     // * Strip trailing slash (but keep root /)
     if (pathname.length > 1 && pathname.charAt(pathname.length - 1) === '/') {
       pathname = pathname.slice(0, -1);
     }
-    // * Only keep allowlisted params, strip everything else
-    var search = window.location.search;
-    if (search) {
-      try {
-        var params = new URLSearchParams(search);
-        var kept = new URLSearchParams();
-        for (var i = 0; i < KEEP_PARAMS.length; i++) {
-          if (params.has(KEEP_PARAMS[i])) {
-            kept.set(KEEP_PARAMS[i], params.get(KEEP_PARAMS[i]));
-          }
-        }
-        var remaining = kept.toString();
-        if (remaining) pathname += '?' + remaining;
-      } catch (e) {
-        // * URLSearchParams not supported — send path without query
-      }
-    }
     return pathname;
   }
 
-  // * SPA referrer: only attribute external referrer to the landing page
-  var firstPageviewSent = false;
-
   // * Refresh dedup: skip pageview if the same path was tracked within 5 seconds
   // * Prevents inflated pageview counts from F5/refresh while allowing genuine revisits
   var REFRESH_DEDUP_WINDOW = 5000;
@@ -263,22 +240,7 @@
 
     currentEventId = null;
     pageStartTime = 0;
-    // * Only send external referrer on the first pageview (landing page).
-    // * SPA navigations keep document.referrer stale, so clear it after first hit
-    // * to avoid inflating traffic source attribution.
-    var referrer = '';
-    if (!firstPageviewSent) {
-      var rawReferrer = document.referrer || '';
-      if (rawReferrer) {
-        try {
-          var refHost = new URL(rawReferrer).hostname.replace(/^www\./, '');
-          var siteHost = domain.replace(/^www\./, '');
-          if (refHost !== siteHost) referrer = rawReferrer;
-        } catch (e) {
-          referrer = rawReferrer;
-        }
-      }
-    }
+
     const screenSize = {
       width: window.innerWidth || window.screen.width,
       height: window.innerHeight || window.screen.height,
@@ -286,8 +248,9 @@
 
     const payload = {
       domain: domain,
-      path: path,
-      referrer: referrer,
+      url: location.href,
+      title: document.title,
+      referrer: document.referrer || '',
       screen: screenSize,
       session_id: getSessionId(),
     };
@@ -303,7 +266,6 @@
     }).then(res => res.json())
     .then(data => {
       recordPageview(path);
-      firstPageviewSent = true;
       if (data && data.id) {
         currentEventId = data.id;
         pageStartTime = Date.now();
@@ -331,8 +293,6 @@
     if (url !== lastUrl) {
       lastUrl = url;
       trackPageview();
-      // * Check for 404 after SPA navigation (deferred so title updates first)
-      setTimeout(check404, 100);
       // * Reset scroll depth tracking for the new page
       if (trackScroll) scrollFired = {};
     }
@@ -349,58 +309,23 @@
     if (url === lastUrl) return;
     lastUrl = url;
     trackPageview();
-    setTimeout(check404, 100);
     if (trackScroll) scrollFired = {};
   });
 
-  // * Custom events / goals: validate event name (letters, numbers, underscores only; max 64 chars)
-  var EVENT_NAME_MAX = 64;
-  var EVENT_NAME_REGEX = /^[a-zA-Z0-9_]+$/;
-
+  // * Custom events / goals
   function trackCustomEvent(eventName, props) {
     if (typeof eventName !== 'string' || !eventName.trim()) return;
-    var name = eventName.trim().toLowerCase();
-    if (name.length > EVENT_NAME_MAX || !EVENT_NAME_REGEX.test(name)) {
-      if (typeof console !== 'undefined' && console.warn) {
-        console.warn('Pulse: event name must contain only letters, numbers, and underscores (max ' + EVENT_NAME_MAX + ' chars).');
-      }
-      return;
-    }
-    var path = cleanPath();
-    // * Custom events use same referrer logic: only on first pageview, empty after
-    var referrer = '';
-    if (!firstPageviewSent) {
-      var rawRef = document.referrer || '';
-      if (rawRef) {
-        try {
-          var rh = new URL(rawRef).hostname.replace(/^www\./, '');
-          var sh = domain.replace(/^www\./, '');
-          if (rh !== sh) referrer = rawRef;
-        } catch (e) { referrer = rawRef; }
-      }
-    }
-    var screenSize = { width: window.innerWidth || 0, height: window.innerHeight || 0 };
     var payload = {
       domain: domain,
-      path: path,
-      referrer: referrer,
-      screen: screenSize,
+      url: location.href,
+      title: document.title,
+      referrer: document.referrer || '',
+      screen: { width: window.innerWidth || 0, height: window.innerHeight || 0 },
       session_id: getSessionId(),
-      name: name,
+      name: eventName.trim().toLowerCase(),
     };
-    // * Attach custom properties if provided (max 30 props, key max 200 chars, value max 2000 chars)
     if (props && typeof props === 'object' && !Array.isArray(props)) {
-      var sanitized = {};
-      var count = 0;
-      for (var key in props) {
-        if (!props.hasOwnProperty(key)) continue;
-        if (count >= 30) break;
-        var k = String(key).substring(0, 200);
-        var v = String(props[key]).substring(0, 2000);
-        sanitized[k] = v;
-        count++;
-      }
-      if (count > 0) payload.props = sanitized;
+      payload.props = props;
     }
     fetch(apiUrl + '/api/v1/events', {
       method: 'POST',
@@ -415,26 +340,6 @@
   window.pulse.track = trackCustomEvent;
   window.pulse.cleanPath = cleanPath;
 
-  // * Auto-track 404 error pages (on by default)
-  // * Detects pages where document.title contains "404" or "not found"
-  // * Opt-out: add data-no-404 to the script tag
-  var track404 = !script.hasAttribute('data-no-404');
-  var sent404ForUrl = '';
-
-  function check404() {
-    if (!track404) return;
-    // * Only fire once per URL
-    var currentUrl = location.href;
-    if (sent404ForUrl === currentUrl) return;
-    if (/404|not found/i.test(document.title)) {
-      sent404ForUrl = currentUrl;
-      trackCustomEvent('404');
-    }
-  }
-
-  // * Check on initial load (deferred so SPAs can set title)
-  setTimeout(check404, 0);
-
   // * Auto-track scroll depth at 25%, 50%, 75%, and 100% (on by default)
   // * Each threshold fires once per pageview; resets on SPA navigation
   // * Opt-out: add data-no-scroll to the script tag
-- 
2.49.1


From dedb55b113c6da14ffcdbe4e49b8bf232422cc4f Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 17 Mar 2026 12:32:53 +0100
Subject: [PATCH 033/428] docs: add thin client changes to changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7ba9082..9cd8f94 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ### Improved
 
+- **Smaller, faster tracking script.** The tracking script is now about 20% smaller. Logic like page path cleaning, referrer filtering, error page detection, and input validation has been moved from your browser to the Pulse server. This means the script loads faster on every page, and Pulse can improve these features without needing you to update anything.
+- **Automatic 404 page detection.** Pulse now detects error pages (404 / "Page Not Found") automatically on the server by reading your page title — no extra setup needed. Previously this ran in the browser and couldn't be improved without updating the script. Now Pulse can recognize more error page patterns over time, including pages in other languages, without any changes on your end.
 - **Smarter bot filtering.** Pulse now catches more types of automated traffic that were slipping through — like headless browsers with default screen sizes, bot farms that rotate through different locations, and bots that fire duplicate events within milliseconds. Bot detection checks have also been moved from the tracking script to the server, making the script smaller and faster for real visitors.
 - **Actionable empty states.** When a dashboard section has no data yet, you now get a direct action — like "Install tracking script" or "Build a UTM URL" — instead of just passive text. Gets you set up faster.
 - **Animated numbers across the dashboard.** Stats like visitors, pageviews, bounce rate, and visit duration now smoothly count up or down when you switch date ranges, apply filters, or when real-time visitor counts change — instead of just jumping to the new value.
-- 
2.49.1


From 3aaf199a19947a2984000723be47e174d98e4abf Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 17 Mar 2026 19:47:54 +0100
Subject: [PATCH 034/428] chore: bump @ciphera-net/ui to ^0.2.8

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index df9c23b..c4243a9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "pulse-frontend",
       "version": "0.15.0-alpha",
       "dependencies": {
-        "@ciphera-net/ui": "^0.2.7",
+        "@ciphera-net/ui": "^0.2.8",
         "@ducanh2912/next-pwa": "^10.2.9",
         "@phosphor-icons/react": "^2.1.10",
         "@simplewebauthn/browser": "^13.2.2",
@@ -1668,9 +1668,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.2.7",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.2.7/f5f170676cdd1bf53c091a0baa98c2d55a7c999f",
-      "integrity": "sha512-yvag9cYfX6c8aZ3bKI+i3l9ALJBXg7XL6soIjd65F7NyZN+1mEo1Fb+ARfWgjdNa5HjfexAnEOOVpjwMNPFCfg==",
+      "version": "0.2.8",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.2.8/3a78342207ee2351625b9469ec6030033df183cc",
+      "integrity": "sha512-I6B7fE2YXjJaipmcVS60q2pzhsy/NKM4sfvHIv4awi6mcrXjGag8FznW0sI1SbsplFWpoT5iSMtWIi/lZdFhbA==",
       "dependencies": {
         "@phosphor-icons/react": "^2.1.10",
         "class-variance-authority": "^0.7.1",
diff --git a/package.json b/package.json
index 0c5d64a..bf3e35d 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.2.7",
+    "@ciphera-net/ui": "^0.2.8",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@phosphor-icons/react": "^2.1.10",
     "@simplewebauthn/browser": "^13.2.2",
-- 
2.49.1


From d97818dfd7377bab6d8de120f9349aa802b97923 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 17 Mar 2026 22:32:45 +0100
Subject: [PATCH 035/428] fix: use screen.width fallback in trackCustomEvent to
 prevent bot filter false positives

window.innerWidth is 0 in hidden/minimized tabs, causing the heuristic bot
scorer (added in #40) to drop legitimate custom events with a score of 5.
Use window.screen.width as fallback, matching the existing trackPageview logic.
---
 public/script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/script.js b/public/script.js
index 21632f6..34f078a 100644
--- a/public/script.js
+++ b/public/script.js
@@ -320,7 +320,7 @@
       url: location.href,
       title: document.title,
       referrer: document.referrer || '',
-      screen: { width: window.innerWidth || 0, height: window.innerHeight || 0 },
+      screen: { width: window.innerWidth || window.screen.width, height: window.innerHeight || window.screen.height },
       session_id: getSessionId(),
       name: eventName.trim().toLowerCase(),
     };
-- 
2.49.1


From 90944ce6bd0c4fe33fa7b251683c63ce84b564d9 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 17 Mar 2026 22:32:45 +0100
Subject: [PATCH 036/428] fix: use screen.width fallback in trackCustomEvent to
 prevent bot filter false positives

window.innerWidth is 0 in hidden/minimized tabs, causing the heuristic bot
scorer (added in #40) to drop legitimate custom events with a score of 5.
Use window.screen.width as fallback, matching the existing trackPageview logic.
---
 public/script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/script.js b/public/script.js
index 21632f6..34f078a 100644
--- a/public/script.js
+++ b/public/script.js
@@ -320,7 +320,7 @@
       url: location.href,
       title: document.title,
       referrer: document.referrer || '',
-      screen: { width: window.innerWidth || 0, height: window.innerHeight || 0 },
+      screen: { width: window.innerWidth || window.screen.width, height: window.innerHeight || window.screen.height },
       session_id: getSessionId(),
       name: eventName.trim().toLowerCase(),
     };
-- 
2.49.1


From 78fed269db45a52f9819defcb06314e651fa6380 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 17 Mar 2026 23:07:11 +0100
Subject: [PATCH 037/428] fix: replace developer jargon with user-friendly
 labels in visitor identity settings

Storage/TTL labels used implementation terms (localStorage, sessionStorage, TTL)
that only make sense to developers. Replaced with plain language and added a
description explaining the privacy trade-off.
---
 components/sites/ScriptSetupBlock.tsx | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/components/sites/ScriptSetupBlock.tsx b/components/sites/ScriptSetupBlock.tsx
index ac988a8..339fbfb 100644
--- a/components/sites/ScriptSetupBlock.tsx
+++ b/components/sites/ScriptSetupBlock.tsx
@@ -14,15 +14,15 @@ import { toast, Toggle, Select, CheckIcon } from '@ciphera-net/ui'
 const FRAMEWORKS = integrations.filter((i) => i.category === 'framework').slice(0, 10)
 
 const STORAGE_OPTIONS = [
-  { value: 'local', label: 'Cross-tab (localStorage)' },
-  { value: 'session', label: 'Per-tab (sessionStorage)' },
+  { value: 'local', label: 'Across all tabs' },
+  { value: 'session', label: 'Single tab only' },
 ]
 
 const TTL_OPTIONS = [
-  { value: '24', label: '24h' },
-  { value: '48', label: '48h' },
-  { value: '168', label: '7d' },
-  { value: '720', label: '30d' },
+  { value: '24', label: '24 hours' },
+  { value: '48', label: '2 days' },
+  { value: '168', label: '7 days' },
+  { value: '720', label: '30 days' },
 ]
 
 const FEATURES = [
@@ -187,13 +187,16 @@ export default function ScriptSetupBlock({
 
       {/* ── Storage + TTL ───────────────────────────────────────────────── */}
       <div className="mt-6">
-        <h4 className="text-sm font-semibold text-neutral-900 dark:text-white mb-3">
+        <h4 className="text-sm font-semibold text-neutral-900 dark:text-white mb-1">
           Visitor identity
         </h4>
+        <p className="text-xs text-neutral-500 dark:text-neutral-400 mb-3">
+          How returning visitors are recognized. Stricter settings increase privacy but may raise unique visitor counts.
+        </p>
         <div className="flex items-end gap-3">
           <div className="min-w-0">
             <label className="text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1 block">
-              Storage
+              Recognition
             </label>
             <Select
               variant="input"
@@ -205,7 +208,7 @@ export default function ScriptSetupBlock({
           {storage === 'local' && (
             <div>
               <label className="text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1 block">
-                TTL
+                Reset after
               </label>
               <Select
                 variant="input"
-- 
2.49.1


From 10ad276c38b6d138b392776ab01b0ba4a3770f03 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 10:48:22 +0100
Subject: [PATCH 038/428] feat: add soft-delete API functions and deleted_at to
 Site type

---
 lib/api/sites.ts | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/lib/api/sites.ts b/lib/api/sites.ts
index 60d2f4b..7093b57 100644
--- a/lib/api/sites.ts
+++ b/lib/api/sites.ts
@@ -26,6 +26,7 @@ export interface Site {
   is_verified?: boolean
   created_at: string
   updated_at: string
+  deleted_at?: string | null
 }
 
 export interface CreateSiteRequest {
@@ -77,8 +78,8 @@ export async function updateSite(id: string, data: UpdateSiteRequest): Promise<S
   })
 }
 
-export async function deleteSite(id: string): Promise<void> {
-  await apiRequest(`/sites/${id}`, {
+export async function deleteSite(id: string): Promise<{ message: string; purge_at: string }> {
+  return apiRequest<{ message: string; purge_at: string }>(`/sites/${id}`, {
     method: 'DELETE',
   })
 }
@@ -94,3 +95,20 @@ export async function verifySite(id: string): Promise<void> {
     method: 'POST',
   })
 }
+
+export async function restoreSite(id: string): Promise<void> {
+  await apiRequest(`/sites/${id}/restore`, {
+    method: 'POST',
+  })
+}
+
+export async function permanentDeleteSite(id: string): Promise<void> {
+  await apiRequest(`/sites/${id}/permanent`, {
+    method: 'DELETE',
+  })
+}
+
+export async function listDeletedSites(): Promise<Site[]> {
+  const response = await apiRequest<{ sites: Site[] }>('/sites/deleted')
+  return response?.sites || []
+}
-- 
2.49.1


From 7a0f106bc3b74615b0c81e5fb9123a9ee0565f40 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 10:49:06 +0100
Subject: [PATCH 039/428] feat: add DeleteSiteModal with soft-delete and
 permanent-delete options

---
 components/sites/DeleteSiteModal.tsx | 221 +++++++++++++++++++++++++++
 1 file changed, 221 insertions(+)
 create mode 100644 components/sites/DeleteSiteModal.tsx

diff --git a/components/sites/DeleteSiteModal.tsx b/components/sites/DeleteSiteModal.tsx
new file mode 100644
index 0000000..33c6c4e
--- /dev/null
+++ b/components/sites/DeleteSiteModal.tsx
@@ -0,0 +1,221 @@
+'use client'
+
+import { useState } from 'react'
+import { createPortal } from 'react-dom'
+import { motion, AnimatePresence } from 'framer-motion'
+import { toast } from '@ciphera-net/ui'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
+import { AlertTriangleIcon, XIcon } from '@ciphera-net/ui'
+import { deleteSite, permanentDeleteSite } from '@/lib/api/sites'
+
+interface DeleteSiteModalProps {
+  open: boolean
+  onClose: () => void
+  onDeleted: () => void
+  siteName: string
+  siteDomain: string
+  siteId: string
+}
+
+export default function DeleteSiteModal({ open, onClose, onDeleted, siteName, siteDomain, siteId }: DeleteSiteModalProps) {
+  const [deleteConfirm, setDeleteConfirm] = useState('')
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [showPermanent, setShowPermanent] = useState(false)
+  const [permanentConfirm, setPermanentConfirm] = useState('')
+  const [isPermanentDeleting, setIsPermanentDeleting] = useState(false)
+
+  const handleClose = () => {
+    setDeleteConfirm('')
+    setShowPermanent(false)
+    setPermanentConfirm('')
+    setIsDeleting(false)
+    setIsPermanentDeleting(false)
+    onClose()
+  }
+
+  const handleSoftDelete = async () => {
+    if (deleteConfirm !== 'DELETE') return
+    setIsDeleting(true)
+    try {
+      await deleteSite(siteId)
+      toast.success('Site scheduled for deletion. You have 7 days to restore it.')
+      handleClose()
+      onDeleted()
+    } catch (error: unknown) {
+      toast.error(getAuthErrorMessage(error) || 'Failed to delete site')
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+
+  const handlePermanentDelete = async () => {
+    if (permanentConfirm !== siteDomain) return
+    setIsPermanentDeleting(true)
+    try {
+      await permanentDeleteSite(siteId)
+      toast.success('Site permanently deleted')
+      handleClose()
+      onDeleted()
+    } catch (error: unknown) {
+      toast.error(getAuthErrorMessage(error) || 'Failed to permanently delete site')
+    } finally {
+      setIsPermanentDeleting(false)
+    }
+  }
+
+  if (typeof document === 'undefined') return null
+
+  return createPortal(
+    <AnimatePresence>
+      {open && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className="fixed inset-0 z-50 flex items-center justify-center bg-white/80 dark:bg-neutral-900/80 backdrop-blur-sm p-4 pointer-events-none"
+        >
+          <motion.div
+            initial={{ scale: 0.95, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 0.95, opacity: 0 }}
+            className="w-full max-w-sm bg-white dark:bg-neutral-900 p-6 rounded-2xl border border-red-200 dark:border-red-900 shadow-xl pointer-events-auto"
+          >
+            <div className="flex justify-between items-center mb-4">
+              <h3 className="text-lg font-semibold text-red-600 dark:text-red-500">Delete {siteName || 'Site'}?</h3>
+              <button
+                onClick={handleClose}
+                className="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-white"
+              >
+                <XIcon className="w-5 h-5" />
+              </button>
+            </div>
+
+            {!showPermanent ? (
+              <>
+                <p className="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
+                  This site will be scheduled for deletion with a <span className="font-bold">7-day grace period</span>. You can restore it at any time during this period.
+                </p>
+
+                <div className="mb-5 space-y-2">
+                  <div className="flex items-center gap-3 p-3 bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-900/20 rounded-lg">
+                    <AlertTriangleIcon className="h-4 w-4 text-red-500 shrink-0" />
+                    <span className="text-sm font-medium text-red-700 dark:text-red-300">
+                      Site will stop collecting data immediately
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-3 p-3 bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-900/20 rounded-lg">
+                    <AlertTriangleIcon className="h-4 w-4 text-red-500 shrink-0" />
+                    <span className="text-sm font-medium text-red-700 dark:text-red-300">
+                      All data will be purged after 7 days
+                    </span>
+                  </div>
+                </div>
+
+                <div className="space-y-4">
+                  <div>
+                    <label className="block text-xs font-medium text-neutral-700 dark:text-neutral-300 mb-1">
+                      Type <span className="font-mono font-bold text-red-600 dark:text-red-400">DELETE</span> to confirm
+                    </label>
+                    <input
+                      type="text"
+                      value={deleteConfirm}
+                      onChange={(e) => setDeleteConfirm(e.target.value)}
+                      autoComplete="off"
+                      className="w-full px-3 py-2 text-sm border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400"
+                      placeholder="DELETE"
+                    />
+                  </div>
+
+                  <div className="flex gap-3">
+                    <button
+                      type="button"
+                      onClick={handleClose}
+                      className="flex-1 px-4 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-xl transition-colors"
+                      disabled={isDeleting}
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      onClick={handleSoftDelete}
+                      disabled={deleteConfirm !== 'DELETE' || isDeleting}
+                      className="flex-1 px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 dark:bg-red-600 dark:hover:bg-red-700 rounded-xl transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                      {isDeleting ? 'Deleting...' : 'Schedule Deletion'}
+                    </button>
+                  </div>
+
+                  <button
+                    type="button"
+                    onClick={() => setShowPermanent(true)}
+                    className="w-full text-center text-xs text-neutral-400 hover:text-red-500 dark:hover:text-red-400 transition-colors"
+                  >
+                    Permanently delete now
+                  </button>
+                </div>
+              </>
+            ) : (
+              <>
+                <p className="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
+                  This action is <span className="font-bold">irreversible</span>. The site and all its data will be permanently deleted immediately.
+                </p>
+
+                <div className="mb-5 space-y-2">
+                  <div className="flex items-center gap-3 p-3 bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-900/20 rounded-lg">
+                    <AlertTriangleIcon className="h-4 w-4 text-red-500 shrink-0" />
+                    <span className="text-sm font-medium text-red-700 dark:text-red-300">
+                      All analytics data will be permanently lost
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-3 p-3 bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-900/20 rounded-lg">
+                    <AlertTriangleIcon className="h-4 w-4 text-red-500 shrink-0" />
+                    <span className="text-sm font-medium text-red-700 dark:text-red-300">
+                      This cannot be undone
+                    </span>
+                  </div>
+                </div>
+
+                <div className="space-y-4">
+                  <div>
+                    <label className="block text-xs font-medium text-neutral-700 dark:text-neutral-300 mb-1">
+                      Type <span className="font-mono font-bold text-red-600 dark:text-red-400">{siteDomain}</span> to confirm
+                    </label>
+                    <input
+                      type="text"
+                      value={permanentConfirm}
+                      onChange={(e) => setPermanentConfirm(e.target.value)}
+                      autoComplete="off"
+                      className="w-full px-3 py-2 text-sm border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400"
+                      placeholder={siteDomain}
+                    />
+                  </div>
+
+                  <div className="flex gap-3">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setShowPermanent(false)
+                        setPermanentConfirm('')
+                      }}
+                      className="flex-1 px-4 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-xl transition-colors"
+                      disabled={isPermanentDeleting}
+                    >
+                      Back
+                    </button>
+                    <button
+                      onClick={handlePermanentDelete}
+                      disabled={permanentConfirm !== siteDomain || isPermanentDeleting}
+                      className="flex-1 px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 dark:bg-red-600 dark:hover:bg-red-700 rounded-xl transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                      {isPermanentDeleting ? 'Deleting...' : 'Delete Forever'}
+                    </button>
+                  </div>
+                </div>
+              </>
+            )}
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>,
+    document.body
+  )
+}
-- 
2.49.1


From d7f374472afe0a8880a4ef39abf2089520c7c3b9 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 10:50:19 +0100
Subject: [PATCH 040/428] feat: integrate delete modal and soft-deleted sites
 list on dashboard

---
 app/page.tsx | 80 +++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 73 insertions(+), 7 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 4501e98..caa5ee6 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -5,12 +5,13 @@ import Link from 'next/link'
 import { motion } from 'framer-motion'
 import { useAuth } from '@/lib/auth/context'
 import { initiateOAuthFlow, initiateSignupFlow } from '@/lib/api/oauth'
-import { listSites, deleteSite, type Site } from '@/lib/api/sites'
+import { listSites, listDeletedSites, restoreSite, permanentDeleteSite, type Site } from '@/lib/api/sites'
 import { getStats } from '@/lib/api/stats'
 import type { Stats } from '@/lib/api/stats'
 import { getSubscription, type SubscriptionDetails } from '@/lib/api/billing'
 import { LoadingOverlay } from '@ciphera-net/ui'
 import SiteList from '@/components/sites/SiteList'
+import DeleteSiteModal from '@/components/sites/DeleteSiteModal'
 import { Button } from '@ciphera-net/ui'
 import Image from 'next/image'
 import { BarChartIcon, LockIcon, ZapIcon, CheckCircleIcon, XIcon, GlobeIcon } from '@ciphera-net/ui'
@@ -118,6 +119,8 @@ export default function HomePage() {
   const [subscription, setSubscription] = useState<SubscriptionDetails | null>(null)
   const [subscriptionLoading, setSubscriptionLoading] = useState(false)
   const [showFinishSetupBanner, setShowFinishSetupBanner] = useState(true)
+  const [deleteModalSite, setDeleteModalSite] = useState<Site | null>(null)
+  const [deletedSites, setDeletedSites] = useState<Site[]>([])
 
   useEffect(() => {
     if (user?.org_id) {
@@ -178,6 +181,12 @@ export default function HomePage() {
       setSitesLoading(true)
       const data = await listSites()
       setSites(Array.isArray(data) ? data : [])
+      try {
+        const deleted = await listDeletedSites()
+        setDeletedSites(deleted)
+      } catch {
+        setDeletedSites([])
+      }
     } catch (error: unknown) {
       toast.error(getAuthErrorMessage(error) || 'Failed to load your sites')
       setSites([])
@@ -198,14 +207,26 @@ export default function HomePage() {
     }
   }
 
-  const handleDelete = async (id: string) => {
-    if (!confirm('Are you sure you want to delete this site? This action cannot be undone.')) {
-      return
-    }
+  const handleDelete = (id: string) => {
+    const site = sites.find((s) => s.id === id)
+    if (site) setDeleteModalSite(site)
+  }
 
+  const handleRestore = async (id: string) => {
     try {
-      await deleteSite(id)
-      toast.success('Site deleted successfully')
+      await restoreSite(id)
+      toast.success('Site restored successfully')
+      loadSites()
+    } catch (error: unknown) {
+      toast.error(getAuthErrorMessage(error) || 'Failed to restore site')
+    }
+  }
+
+  const handlePermanentDelete = async (id: string) => {
+    if (!confirm('Permanently delete this site and all data? This cannot be undone.')) return
+    try {
+      await permanentDeleteSite(id)
+      toast.success('Site permanently deleted')
       loadSites()
     } catch (error: unknown) {
       toast.error(getAuthErrorMessage(error) || 'Failed to delete site')
@@ -512,6 +533,51 @@ export default function HomePage() {
       {(sitesLoading || sites.length > 0) && (
         <SiteList sites={sites} siteStats={siteStats} loading={sitesLoading} onDelete={handleDelete} />
       )}
+
+      <DeleteSiteModal
+        open={!!deleteModalSite}
+        onClose={() => setDeleteModalSite(null)}
+        onDeleted={loadSites}
+        siteName={deleteModalSite?.name || ''}
+        siteDomain={deleteModalSite?.domain || ''}
+        siteId={deleteModalSite?.id || ''}
+      />
+
+      {deletedSites.length > 0 && (
+        <div className="mt-8">
+          <h3 className="text-sm font-medium text-neutral-500 dark:text-neutral-400 mb-4">Scheduled for Deletion</h3>
+          <div className="space-y-3">
+            {deletedSites.map((site) => {
+              const purgeAt = site.deleted_at ? new Date(new Date(site.deleted_at).getTime() + 7 * 24 * 60 * 60 * 1000) : null
+              const daysLeft = purgeAt ? Math.max(0, Math.ceil((purgeAt.getTime() - Date.now()) / (1000 * 60 * 60 * 24))) : 0
+
+              return (
+                <div key={site.id} className="flex items-center justify-between p-4 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 opacity-60">
+                  <div>
+                    <span className="font-medium text-neutral-700 dark:text-neutral-300">{site.name}</span>
+                    <span className="ml-2 text-sm text-neutral-400">{site.domain}</span>
+                    <span className="ml-3 text-xs text-red-500 font-medium">Deleting in {daysLeft} day{daysLeft !== 1 ? 's' : ''}</span>
+                  </div>
+                  <div className="flex gap-2">
+                    <button
+                      onClick={() => handleRestore(site.id)}
+                      className="px-3 py-1.5 text-xs font-medium text-neutral-700 dark:text-neutral-300 border border-neutral-300 dark:border-neutral-700 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+                    >
+                      Restore
+                    </button>
+                    <button
+                      onClick={() => handlePermanentDelete(site.id)}
+                      className="px-3 py-1.5 text-xs font-medium text-red-600 dark:text-red-400 border border-red-200 dark:border-red-900 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+                    >
+                      Delete Now
+                    </button>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      )}
     </div>
   )
 }
-- 
2.49.1


From 51723bea5db5d561a0fce26d7a7ebd89367148bb Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 10:51:14 +0100
Subject: [PATCH 041/428] feat: replace prompt() delete with DeleteSiteModal on
 settings page

---
 app/sites/[id]/settings/page.tsx | 33 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index b5dc03c..f3d5f85 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState, useRef } from 'react'
 import { useParams, useRouter, useSearchParams } from 'next/navigation'
-import { updateSite, resetSiteData, deleteSite, type Site, type GeoDataLevel } from '@/lib/api/sites'
+import { updateSite, resetSiteData, type Site, type GeoDataLevel } from '@/lib/api/sites'
 import { createGoal, updateGoal, deleteGoal, type Goal } from '@/lib/api/goals'
 import { createReportSchedule, updateReportSchedule, deleteReportSchedule, testReportSchedule, type ReportSchedule, type CreateReportScheduleRequest, type EmailConfig, type WebhookConfig } from '@/lib/api/report-schedules'
 import { getGSCAuthURL, disconnectGSC } from '@/lib/api/gsc'
@@ -13,6 +13,7 @@ import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { formatDateTime } from '@/lib/utils/formatDate'
 import { SettingsFormSkeleton, GoalsListSkeleton, useMinimumLoading, useSkeletonFade } from '@/components/skeletons'
 import VerificationModal from '@/components/sites/VerificationModal'
+import DeleteSiteModal from '@/components/sites/DeleteSiteModal'
 import ScriptSetupBlock from '@/components/sites/ScriptSetupBlock'
 import { PasswordInput } from '@ciphera-net/ui'
 import { Select, Modal, Button } from '@ciphera-net/ui'
@@ -59,6 +60,7 @@ export default function SiteSettingsPage() {
 
   const { data: site, isLoading: siteLoading, mutate: mutateSite } = useSite(siteId)
   const [saving, setSaving] = useState(false)
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
   const [activeTab, setActiveTab] = useState<'general' | 'visibility' | 'data' | 'goals' | 'reports' | 'integrations'>('general')
   const searchParams = useSearchParams()
 
@@ -462,20 +464,8 @@ export default function SiteSettingsPage() {
     }
   }
 
-  const handleDeleteSite = async () => {
-    const confirmation = prompt('To confirm deletion, please type the site domain:')
-    if (confirmation !== site?.domain) {
-      if (confirmation) toast.error('Domain does not match')
-      return
-    }
-
-    try {
-      await deleteSite(siteId)
-      toast.success('Site deleted successfully')
-      router.push('/')
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to delete site')
-    }
+  const handleDeleteSite = () => {
+    setShowDeleteModal(true)
   }
 
   const copyLink = () => {
@@ -804,13 +794,13 @@ export default function SiteSettingsPage() {
                     <div className="p-4 border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-900/10 rounded-2xl flex items-center justify-between">
                       <div>
                         <h3 className="font-medium text-red-900 dark:text-red-200">Delete Site</h3>
-                        <p className="text-sm text-red-700 dark:text-red-300 mt-1">Permanently delete this site and all data.</p>
+                        <p className="text-sm text-red-700 dark:text-red-300 mt-1">Schedule this site for deletion with a 7-day grace period.</p>
                       </div>
                       <button
                         onClick={handleDeleteSite}
                         className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2"
                       >
-                        Delete Site
+                        Delete Site...
                       </button>
                     </div>
                   </div>
@@ -2038,6 +2028,15 @@ export default function SiteSettingsPage() {
         site={site}
         onVerified={() => mutateSite()}
       />
+
+      <DeleteSiteModal
+        open={showDeleteModal}
+        onClose={() => setShowDeleteModal(false)}
+        onDeleted={() => router.push('/')}
+        siteName={site?.name || ''}
+        siteDomain={site?.domain || ''}
+        siteId={siteId}
+      />
     </div>
   )
 }
-- 
2.49.1


From ad1c8c542072517d9c91eda2c86f9f31b2d6d260 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 10:58:47 +0100
Subject: [PATCH 042/428] fix: address spec compliance gaps in soft-delete
 frontend

---
 app/page.tsx                         | 29 ++++++++++++++++++----------
 components/sites/DeleteSiteModal.tsx |  6 +++---
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index caa5ee6..e577d7f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -408,15 +408,22 @@ export default function HomePage() {
           const siteLimit = getSitesLimitForPlan(subscription?.plan_id)
           const atLimit = siteLimit != null && sites.length >= siteLimit
           return atLimit ? (
-          <div className="flex items-center gap-3">
-            <span className="text-sm font-medium text-neutral-500 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-800 px-3 py-1.5 rounded-lg border border-neutral-200 dark:border-neutral-700">
-              Limit reached ({sites.length}/{siteLimit})
-            </span>
-            <Link href="/pricing">
-              <Button variant="primary" className="text-sm">
-                Upgrade
-              </Button>
-            </Link>
+          <div>
+            <div className="flex items-center gap-3">
+              <span className="text-sm font-medium text-neutral-500 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-800 px-3 py-1.5 rounded-lg border border-neutral-200 dark:border-neutral-700">
+                Limit reached ({sites.length}/{siteLimit})
+              </span>
+              <Link href="/pricing">
+                <Button variant="primary" className="text-sm">
+                  Upgrade
+                </Button>
+              </Link>
+            </div>
+            {deletedSites.length > 0 && (
+              <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-2">
+                You have a site pending deletion. Restore it or permanently delete it to free the slot.
+              </p>
+            )}
           </div>
         ) : null
         })() ?? (
@@ -556,7 +563,9 @@ export default function HomePage() {
                   <div>
                     <span className="font-medium text-neutral-700 dark:text-neutral-300">{site.name}</span>
                     <span className="ml-2 text-sm text-neutral-400">{site.domain}</span>
-                    <span className="ml-3 text-xs text-red-500 font-medium">Deleting in {daysLeft} day{daysLeft !== 1 ? 's' : ''}</span>
+                    <span className="ml-3 inline-flex items-center rounded-full bg-red-50 px-2 py-0.5 text-xs font-medium text-red-600 dark:bg-red-900/20 dark:text-red-400">
+                      Deleting in {daysLeft} day{daysLeft !== 1 ? 's' : ''}
+                    </span>
                   </div>
                   <div className="flex gap-2">
                     <button
diff --git a/components/sites/DeleteSiteModal.tsx b/components/sites/DeleteSiteModal.tsx
index 33c6c4e..5f01d26 100644
--- a/components/sites/DeleteSiteModal.tsx
+++ b/components/sites/DeleteSiteModal.tsx
@@ -100,13 +100,13 @@ export default function DeleteSiteModal({ open, onClose, onDeleted, siteName, si
                   <div className="flex items-center gap-3 p-3 bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-900/20 rounded-lg">
                     <AlertTriangleIcon className="h-4 w-4 text-red-500 shrink-0" />
                     <span className="text-sm font-medium text-red-700 dark:text-red-300">
-                      Site will stop collecting data immediately
+                      All events and analytics data
                     </span>
                   </div>
                   <div className="flex items-center gap-3 p-3 bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-900/20 rounded-lg">
                     <AlertTriangleIcon className="h-4 w-4 text-red-500 shrink-0" />
                     <span className="text-sm font-medium text-red-700 dark:text-red-300">
-                      All data will be purged after 7 days
+                      Report schedules and goals
                     </span>
                   </div>
                 </div>
@@ -149,7 +149,7 @@ export default function DeleteSiteModal({ open, onClose, onDeleted, siteName, si
                     onClick={() => setShowPermanent(true)}
                     className="w-full text-center text-xs text-neutral-400 hover:text-red-500 dark:hover:text-red-400 transition-colors"
                   >
-                    Permanently delete now
+                    Permanently delete now (cannot be undone)
                   </button>
                 </div>
               </>
-- 
2.49.1


From 311f54626136acc3bf611fd576d835e2e8a6f2e4 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 11:03:44 +0100
Subject: [PATCH 043/428] fix: improve code quality in soft-delete frontend
 (loading state, imports, confirm dialog)

---
 app/page.tsx                         | 25 ++++++++++++++----------
 components/sites/DeleteSiteModal.tsx | 29 +++++++++++++++++-----------
 2 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index e577d7f..b4ac71d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -5,7 +5,7 @@ import Link from 'next/link'
 import { motion } from 'framer-motion'
 import { useAuth } from '@/lib/auth/context'
 import { initiateOAuthFlow, initiateSignupFlow } from '@/lib/api/oauth'
-import { listSites, listDeletedSites, restoreSite, permanentDeleteSite, type Site } from '@/lib/api/sites'
+import { listSites, listDeletedSites, restoreSite, type Site } from '@/lib/api/sites'
 import { getStats } from '@/lib/api/stats'
 import type { Stats } from '@/lib/api/stats'
 import { getSubscription, type SubscriptionDetails } from '@/lib/api/billing'
@@ -121,6 +121,7 @@ export default function HomePage() {
   const [showFinishSetupBanner, setShowFinishSetupBanner] = useState(true)
   const [deleteModalSite, setDeleteModalSite] = useState<Site | null>(null)
   const [deletedSites, setDeletedSites] = useState<Site[]>([])
+  const [permanentDeleteSiteModal, setPermanentDeleteSiteModal] = useState<Site | null>(null)
 
   useEffect(() => {
     if (user?.org_id) {
@@ -222,15 +223,9 @@ export default function HomePage() {
     }
   }
 
-  const handlePermanentDelete = async (id: string) => {
-    if (!confirm('Permanently delete this site and all data? This cannot be undone.')) return
-    try {
-      await permanentDeleteSite(id)
-      toast.success('Site permanently deleted')
-      loadSites()
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to delete site')
-    }
+  const handlePermanentDelete = (id: string) => {
+    const site = deletedSites.find((s) => s.id === id)
+    if (site) setPermanentDeleteSiteModal(site)
   }
 
   if (authLoading) {
@@ -550,6 +545,16 @@ export default function HomePage() {
         siteId={deleteModalSite?.id || ''}
       />
 
+      <DeleteSiteModal
+        open={!!permanentDeleteSiteModal}
+        onClose={() => setPermanentDeleteSiteModal(null)}
+        onDeleted={loadSites}
+        siteName={permanentDeleteSiteModal?.name || ''}
+        siteDomain={permanentDeleteSiteModal?.domain || ''}
+        siteId={permanentDeleteSiteModal?.id || ''}
+        permanentOnly
+      />
+
       {deletedSites.length > 0 && (
         <div className="mt-8">
           <h3 className="text-sm font-medium text-neutral-500 dark:text-neutral-400 mb-4">Scheduled for Deletion</h3>
diff --git a/components/sites/DeleteSiteModal.tsx b/components/sites/DeleteSiteModal.tsx
index 5f01d26..b8f7bb7 100644
--- a/components/sites/DeleteSiteModal.tsx
+++ b/components/sites/DeleteSiteModal.tsx
@@ -1,11 +1,9 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { createPortal } from 'react-dom'
 import { motion, AnimatePresence } from 'framer-motion'
-import { toast } from '@ciphera-net/ui'
-import { getAuthErrorMessage } from '@ciphera-net/ui'
-import { AlertTriangleIcon, XIcon } from '@ciphera-net/ui'
+import { toast, getAuthErrorMessage, AlertTriangleIcon, XIcon } from '@ciphera-net/ui'
 import { deleteSite, permanentDeleteSite } from '@/lib/api/sites'
 
 interface DeleteSiteModalProps {
@@ -15,15 +13,22 @@ interface DeleteSiteModalProps {
   siteName: string
   siteDomain: string
   siteId: string
+  permanentOnly?: boolean
 }
 
-export default function DeleteSiteModal({ open, onClose, onDeleted, siteName, siteDomain, siteId }: DeleteSiteModalProps) {
+export default function DeleteSiteModal({ open, onClose, onDeleted, siteName, siteDomain, siteId, permanentOnly }: DeleteSiteModalProps) {
   const [deleteConfirm, setDeleteConfirm] = useState('')
   const [isDeleting, setIsDeleting] = useState(false)
-  const [showPermanent, setShowPermanent] = useState(false)
+  const [showPermanent, setShowPermanent] = useState(!!permanentOnly)
   const [permanentConfirm, setPermanentConfirm] = useState('')
   const [isPermanentDeleting, setIsPermanentDeleting] = useState(false)
 
+  useEffect(() => {
+    if (open && permanentOnly) {
+      setShowPermanent(true)
+    }
+  }, [open, permanentOnly])
+
   const handleClose = () => {
     setDeleteConfirm('')
     setShowPermanent(false)
@@ -43,7 +48,6 @@ export default function DeleteSiteModal({ open, onClose, onDeleted, siteName, si
       onDeleted()
     } catch (error: unknown) {
       toast.error(getAuthErrorMessage(error) || 'Failed to delete site')
-    } finally {
       setIsDeleting(false)
     }
   }
@@ -58,7 +62,6 @@ export default function DeleteSiteModal({ open, onClose, onDeleted, siteName, si
       onDeleted()
     } catch (error: unknown) {
       toast.error(getAuthErrorMessage(error) || 'Failed to permanently delete site')
-    } finally {
       setIsPermanentDeleting(false)
     }
   }
@@ -193,13 +196,17 @@ export default function DeleteSiteModal({ open, onClose, onDeleted, siteName, si
                     <button
                       type="button"
                       onClick={() => {
-                        setShowPermanent(false)
-                        setPermanentConfirm('')
+                        if (permanentOnly) {
+                          handleClose()
+                        } else {
+                          setShowPermanent(false)
+                          setPermanentConfirm('')
+                        }
                       }}
                       className="flex-1 px-4 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-xl transition-colors"
                       disabled={isPermanentDeleting}
                     >
-                      Back
+                      {permanentOnly ? 'Cancel' : 'Back'}
                     </button>
                     <button
                       onClick={handlePermanentDelete}
-- 
2.49.1


From d5b594d6f954d987e1e50846cd2c4932492528b7 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 14:20:15 +0100
Subject: [PATCH 044/428] feat(funnels): update frontend types and API client
 for funnels v2

---
 lib/api/funnels.ts | 71 ++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 69 insertions(+), 2 deletions(-)

diff --git a/lib/api/funnels.ts b/lib/api/funnels.ts
index f5e2d51..cc1faf8 100644
--- a/lib/api/funnels.ts
+++ b/lib/api/funnels.ts
@@ -1,10 +1,18 @@
 import apiRequest from './client'
 
+export interface StepPropertyFilter {
+  key: string
+  operator: 'is' | 'is_not' | 'contains' | 'not_contains'
+  value: string
+}
+
 export interface FunnelStep {
   order: number
   name: string
   value: string
   type: string // "exact", "contains", "regex"
+  category?: 'page' | 'event'
+  property_filters?: StepPropertyFilter[]
 }
 
 export interface Funnel {
@@ -13,15 +21,23 @@ export interface Funnel {
   name: string
   description: string
   steps: FunnelStep[]
+  conversion_window_value: number
+  conversion_window_unit: 'hours' | 'days'
   created_at: string
   updated_at: string
 }
 
+export interface ExitPage {
+  path: string
+  visitors: number
+}
+
 export interface FunnelStepStats {
   step: FunnelStep
   visitors: number
   dropoff: number
   conversion: number
+  exit_pages: ExitPage[]
 }
 
 export interface FunnelStats {
@@ -32,7 +48,27 @@ export interface FunnelStats {
 export interface CreateFunnelRequest {
   name: string
   description: string
-  steps: FunnelStep[]
+  steps: Omit<FunnelStep, 'order'>[]
+  conversion_window_value?: number
+  conversion_window_unit?: 'hours' | 'days'
+}
+
+export interface FunnelTrends {
+  dates: string[]
+  overall: number[]
+  steps: Record<string, number[]>
+}
+
+export interface FunnelBreakdownEntry {
+  value: string
+  visitors: number
+  conversion: number
+}
+
+export interface FunnelBreakdown {
+  step: number
+  dimension: string
+  entries: FunnelBreakdownEntry[]
 }
 
 export async function listFunnels(siteId: string): Promise<Funnel[]> {
@@ -64,10 +100,41 @@ export async function deleteFunnel(siteId: string, funnelId: string): Promise<vo
   })
 }
 
-export async function getFunnelStats(siteId: string, funnelId: string, startDate?: string, endDate?: string): Promise<FunnelStats> {
+export async function getFunnelStats(siteId: string, funnelId: string, startDate?: string, endDate?: string, filters?: string): Promise<FunnelStats> {
   const params = new URLSearchParams()
   if (startDate) params.append('start_date', startDate)
   if (endDate) params.append('end_date', endDate)
+  if (filters) params.append('filters', filters)
   const queryString = params.toString() ? `?${params.toString()}` : ''
   return apiRequest<FunnelStats>(`/sites/${siteId}/funnels/${funnelId}/stats${queryString}`)
 }
+
+export async function getFunnelTrends(
+  siteId: string, funnelId: string,
+  startDate?: string, endDate?: string,
+  interval: string = 'day', filters?: string
+): Promise<FunnelTrends> {
+  const params = new URLSearchParams()
+  if (startDate) params.append('start_date', startDate)
+  if (endDate) params.append('end_date', endDate)
+  params.append('interval', interval)
+  if (filters) params.append('filters', filters)
+  const queryString = params.toString() ? `?${params.toString()}` : ''
+  return apiRequest<FunnelTrends>(`/sites/${siteId}/funnels/${funnelId}/trends${queryString}`)
+}
+
+export async function getFunnelBreakdown(
+  siteId: string, funnelId: string,
+  step: number, dimension: string,
+  startDate?: string, endDate?: string,
+  filters?: string
+): Promise<FunnelBreakdown> {
+  const params = new URLSearchParams()
+  params.append('step', step.toString())
+  params.append('dimension', dimension)
+  if (startDate) params.append('start_date', startDate)
+  if (endDate) params.append('end_date', endDate)
+  if (filters) params.append('filters', filters)
+  const queryString = params.toString() ? `?${params.toString()}` : ''
+  return apiRequest<FunnelBreakdown>(`/sites/${siteId}/funnels/${funnelId}/breakdown${queryString}`)
+}
-- 
2.49.1


From 18e66917d3983e72e4ad8e3146992716d2793ae0 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 14:23:25 +0100
Subject: [PATCH 045/428] feat(funnels): extract reusable FunnelForm with
 category toggle, property filters, and conversion window

---
 app/sites/[id]/funnels/new/page.tsx | 227 +-----------
 components/funnels/FunnelForm.tsx   | 519 ++++++++++++++++++++++++++++
 2 files changed, 531 insertions(+), 215 deletions(-)
 create mode 100644 components/funnels/FunnelForm.tsx

diff --git a/app/sites/[id]/funnels/new/page.tsx b/app/sites/[id]/funnels/new/page.tsx
index 9891f21..7607733 100644
--- a/app/sites/[id]/funnels/new/page.tsx
+++ b/app/sites/[id]/funnels/new/page.tsx
@@ -3,90 +3,25 @@
 import { useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { useSWRConfig } from 'swr'
-import { createFunnel, type CreateFunnelRequest, type FunnelStep } from '@/lib/api/funnels'
-import { toast, Input, Button, ChevronLeftIcon, PlusIcon, TrashIcon } from '@ciphera-net/ui'
-import Link from 'next/link'
-
-function isValidRegex(pattern: string): boolean {
-  try {
-    new RegExp(pattern)
-    return true
-  } catch {
-    return false
-  }
-}
+import { createFunnel, type CreateFunnelRequest } from '@/lib/api/funnels'
+import { toast } from '@ciphera-net/ui'
+import FunnelForm from '@/components/funnels/FunnelForm'
 
 export default function CreateFunnelPage() {
   const params = useParams()
   const router = useRouter()
   const { mutate } = useSWRConfig()
   const siteId = params.id as string
-
-  const [name, setName] = useState('')
-  const [description, setDescription] = useState('')
-  // * Backend requires at least one step (API binding min=1, DB rejects empty steps)
-  const [steps, setSteps] = useState<Omit<FunnelStep, 'order'>[]>([
-    { name: 'Step 1', value: '/', type: 'exact' },
-    { name: 'Step 2', value: '', type: 'exact' }
-  ])
   const [saving, setSaving] = useState(false)
 
-  const handleAddStep = () => {
-    setSteps([...steps, { name: `Step ${steps.length + 1}`, value: '', type: 'exact' }])
-  }
-
-  const handleRemoveStep = (index: number) => {
-    if (steps.length <= 1) return
-    const newSteps = steps.filter((_, i) => i !== index)
-    setSteps(newSteps)
-  }
-
-  const handleUpdateStep = (index: number, field: keyof Omit<FunnelStep, 'order'>, value: string) => {
-    const newSteps = [...steps]
-    newSteps[index] = { ...newSteps[index], [field]: value }
-    setSteps(newSteps)
-  }
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    
-    if (!name.trim()) {
-      toast.error('Please enter a funnel name')
-      return
-    }
-
-    if (steps.some(s => !s.name.trim())) {
-      toast.error('Please enter a name for all steps')
-      return
-    }
-
-    if (steps.some(s => !s.value.trim())) {
-      toast.error('Please enter a path for all steps')
-      return
-    }
-    const invalidRegexStep = steps.find(s => s.type === 'regex' && !isValidRegex(s.value))
-    if (invalidRegexStep) {
-      toast.error(`Invalid regex pattern in step: ${invalidRegexStep.name}`)
-      return
-    }
-
+  const handleSubmit = async (data: CreateFunnelRequest) => {
     try {
       setSaving(true)
-      const funnelSteps = steps.map((s, i) => ({
-        ...s,
-        order: i
-      }))
-
-      await createFunnel(siteId, {
-        name,
-        description,
-        steps: funnelSteps
-      })
-
+      await createFunnel(siteId, data)
       await mutate(['funnels', siteId])
       toast.success('Funnel created')
       router.push(`/sites/${siteId}/funnels`)
-    } catch (error) {
+    } catch {
       toast.error('Failed to create funnel. Please try again.')
     } finally {
       setSaving(false)
@@ -94,149 +29,11 @@ export default function CreateFunnelPage() {
   }
 
   return (
-    <div className="w-full max-w-3xl mx-auto px-4 sm:px-6 pb-8">
-      <div className="mb-8">
-        <Link 
-          href={`/sites/${siteId}/funnels`}
-          className="inline-flex items-center gap-2 text-sm text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white mb-6 rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-800 px-2 py-1.5 -ml-2 transition-colors"
-        >
-          <ChevronLeftIcon className="w-4 h-4" />
-          Back to Funnels
-        </Link>
-        
-        <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">
-          Create New Funnel
-        </h1>
-        <p className="text-neutral-600 dark:text-neutral-400">
-          Define the steps users take to complete a goal.
-        </p>
-      </div>
-
-      <form onSubmit={handleSubmit}>
-        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 mb-6">
-          <div className="space-y-4">
-            <div>
-              <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
-                Funnel Name
-              </label>
-              <Input
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                placeholder="e.g. Signup Flow"
-                autoFocus
-                required
-                maxLength={100}
-              />
-              {name.length > 80 && (
-                <span className={`text-xs tabular-nums mt-1 ${name.length > 90 ? 'text-amber-500' : 'text-neutral-400'}`}>{name.length}/100</span>
-              )}
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
-                Description (Optional)
-              </label>
-              <Input
-                value={description}
-                onChange={(e) => setDescription(e.target.value)}
-                placeholder="Tracks users from landing page to signup"
-              />
-            </div>
-          </div>
-        </div>
-
-        <div className="space-y-4 mb-8">
-          <div className="flex items-center justify-between">
-            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
-              Funnel Steps
-            </h3>
-          </div>
-
-          {steps.map((step, index) => (
-            <div key={`step-${index}`} className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-4">
-              <div className="flex items-start gap-4">
-                <div className="mt-3 text-neutral-400">
-                  <div className="w-6 h-6 rounded-full bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center text-sm font-medium text-neutral-600 dark:text-neutral-400">
-                    {index + 1}
-                  </div>
-                </div>
-                
-                <div className="flex-1 grid gap-4 md:grid-cols-2">
-                  <div>
-                    <label className="block text-xs font-medium text-neutral-500 uppercase mb-1">
-                      Step Name
-                    </label>
-                    <Input
-                      value={step.name}
-                      onChange={(e) => handleUpdateStep(index, 'name', e.target.value)}
-                      placeholder="e.g. Landing Page"
-                    />
-                  </div>
-                  <div>
-                    <label className="block text-xs font-medium text-neutral-500 uppercase mb-1">
-                      Path / URL
-                    </label>
-                    <div className="flex gap-2">
-                      <select
-                        value={step.type}
-                        onChange={(e) => handleUpdateStep(index, 'type', e.target.value)}
-                        className="w-24 px-2 py-2 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-lg text-sm focus:ring-2 focus:ring-brand-orange/20 focus:border-brand-orange outline-none"
-                      >
-                        <option value="exact">Exact</option>
-                        <option value="contains">Contains</option>
-                        <option value="regex">Regex</option>
-                      </select>
-                      <Input
-                        value={step.value}
-                        onChange={(e) => handleUpdateStep(index, 'value', e.target.value)}
-                        placeholder={step.type === 'exact' ? '/pricing' : 'pricing'}
-                        className="flex-1"
-                      />
-                    </div>
-                  </div>
-                </div>
-
-                <button
-                  type="button"
-                  onClick={() => handleRemoveStep(index)}
-                  disabled={steps.length <= 1}
-                  aria-label="Remove step"
-                  className={`mt-3 p-2 rounded-xl transition-colors ${
-                    steps.length <= 1 
-                      ? 'text-neutral-300 cursor-not-allowed' 
-                      : 'text-neutral-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20'
-                  }`}
-                >
-                  <TrashIcon className="w-5 h-5" />
-                </button>
-              </div>
-            </div>
-          ))}
-
-          <button
-            type="button"
-            onClick={handleAddStep}
-            className="w-full py-3 border-2 border-dashed border-neutral-200 dark:border-neutral-800 rounded-xl text-neutral-500 hover:text-neutral-900 dark:hover:text-white hover:border-neutral-300 dark:hover:border-neutral-700 transition-colors flex items-center justify-center gap-2 font-medium"
-          >
-            <PlusIcon className="w-4 h-4" />
-            Add Step
-          </button>
-        </div>
-
-        <div className="flex justify-end gap-4">
-          <Link href={`/sites/${siteId}/funnels`}>
-            <Button variant="secondary">
-              Cancel
-            </Button>
-          </Link>
-          <Button
-            type="submit"
-            disabled={saving}
-            variant="primary"
-          >
-            {saving ? 'Creating...' : 'Create Funnel'}
-          </Button>
-        </div>
-      </form>
-    </div>
+    <FunnelForm
+      siteId={siteId}
+      onSubmit={handleSubmit}
+      submitLabel={saving ? 'Creating...' : 'Create Funnel'}
+      cancelHref={`/sites/${siteId}/funnels`}
+    />
   )
 }
diff --git a/components/funnels/FunnelForm.tsx b/components/funnels/FunnelForm.tsx
new file mode 100644
index 0000000..0c3b0a1
--- /dev/null
+++ b/components/funnels/FunnelForm.tsx
@@ -0,0 +1,519 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { Input, Button, ChevronLeftIcon, ChevronDownIcon, PlusIcon, TrashIcon } from '@ciphera-net/ui'
+import { CaretUp } from '@phosphor-icons/react'
+import type { FunnelStep, StepPropertyFilter, CreateFunnelRequest } from '@/lib/api/funnels'
+
+type StepWithoutOrder = Omit<FunnelStep, 'order'>
+
+interface FunnelFormProps {
+  siteId: string
+  initialData?: {
+    name: string
+    description: string
+    steps: StepWithoutOrder[]
+    conversion_window_value: number
+    conversion_window_unit: 'hours' | 'days'
+  }
+  onSubmit: (data: CreateFunnelRequest) => Promise<void>
+  submitLabel: string
+  cancelHref: string
+}
+
+function isValidRegex(pattern: string): boolean {
+  try {
+    new RegExp(pattern)
+    return true
+  } catch {
+    return false
+  }
+}
+
+const WINDOW_PRESETS = [
+  { label: '1h', value: 1, unit: 'hours' as const },
+  { label: '24h', value: 24, unit: 'hours' as const },
+  { label: '7d', value: 7, unit: 'days' as const },
+  { label: '14d', value: 14, unit: 'days' as const },
+  { label: '30d', value: 30, unit: 'days' as const },
+]
+
+const OPERATOR_OPTIONS: { value: StepPropertyFilter['operator']; label: string }[] = [
+  { value: 'is', label: 'is' },
+  { value: 'is_not', label: 'is not' },
+  { value: 'contains', label: 'contains' },
+  { value: 'not_contains', label: 'does not contain' },
+]
+
+const MAX_STEPS = 8
+const MAX_FILTERS = 10
+
+export default function FunnelForm({ siteId, initialData, onSubmit, submitLabel, cancelHref }: FunnelFormProps) {
+  const [name, setName] = useState(initialData?.name ?? '')
+  const [description, setDescription] = useState(initialData?.description ?? '')
+  const [steps, setSteps] = useState<StepWithoutOrder[]>(
+    initialData?.steps ?? [
+      { name: 'Step 1', value: '/', type: 'exact' },
+      { name: 'Step 2', value: '', type: 'exact' },
+    ]
+  )
+  const [windowValue, setWindowValue] = useState(initialData?.conversion_window_value ?? 7)
+  const [windowUnit, setWindowUnit] = useState<'hours' | 'days'>(initialData?.conversion_window_unit ?? 'days')
+
+  const handleAddStep = () => {
+    if (steps.length >= MAX_STEPS) return
+    setSteps([...steps, { name: `Step ${steps.length + 1}`, value: '', type: 'exact' }])
+  }
+
+  const handleRemoveStep = (index: number) => {
+    if (steps.length <= 1) return
+    setSteps(steps.filter((_, i) => i !== index))
+  }
+
+  const handleUpdateStep = (index: number, field: string, value: string) => {
+    const newSteps = [...steps]
+    const step = { ...newSteps[index] }
+
+    if (field === 'category') {
+      step.category = value as 'page' | 'event'
+      // Reset fields when switching category
+      if (value === 'event') {
+        step.type = 'exact'
+        step.value = ''
+      } else {
+        step.value = ''
+        step.property_filters = undefined
+      }
+    } else {
+      ;(step as Record<string, unknown>)[field] = value
+    }
+
+    newSteps[index] = step
+    setSteps(newSteps)
+  }
+
+  const moveStep = (index: number, direction: -1 | 1) => {
+    const targetIndex = index + direction
+    if (targetIndex < 0 || targetIndex >= steps.length) return
+    const newSteps = [...steps]
+    const temp = newSteps[index]
+    newSteps[index] = newSteps[targetIndex]
+    newSteps[targetIndex] = temp
+    setSteps(newSteps)
+  }
+
+  // Property filter handlers
+  const addPropertyFilter = (stepIndex: number) => {
+    const newSteps = [...steps]
+    const step = { ...newSteps[stepIndex] }
+    const filters = [...(step.property_filters || [])]
+    if (filters.length >= MAX_FILTERS) return
+    filters.push({ key: '', operator: 'is', value: '' })
+    step.property_filters = filters
+    newSteps[stepIndex] = step
+    setSteps(newSteps)
+  }
+
+  const updatePropertyFilter = (stepIndex: number, filterIndex: number, field: keyof StepPropertyFilter, value: string) => {
+    const newSteps = [...steps]
+    const step = { ...newSteps[stepIndex] }
+    const filters = [...(step.property_filters || [])]
+    filters[filterIndex] = { ...filters[filterIndex], [field]: value }
+    step.property_filters = filters
+    newSteps[stepIndex] = step
+    setSteps(newSteps)
+  }
+
+  const removePropertyFilter = (stepIndex: number, filterIndex: number) => {
+    const newSteps = [...steps]
+    const step = { ...newSteps[stepIndex] }
+    const filters = [...(step.property_filters || [])]
+    filters.splice(filterIndex, 1)
+    step.property_filters = filters.length > 0 ? filters : undefined
+    newSteps[stepIndex] = step
+    setSteps(newSteps)
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+
+    if (!name.trim()) {
+      const { toast } = await import('@ciphera-net/ui')
+      toast.error('Please enter a funnel name')
+      return
+    }
+
+    if (steps.some(s => !s.name.trim())) {
+      const { toast } = await import('@ciphera-net/ui')
+      toast.error('Please enter a name for all steps')
+      return
+    }
+
+    // Validate based on category
+    for (const step of steps) {
+      const category = step.category || 'page'
+
+      if (!step.value.trim()) {
+        const { toast } = await import('@ciphera-net/ui')
+        toast.error(category === 'event'
+          ? `Please enter an event name for step: ${step.name}`
+          : `Please enter a path for step: ${step.name}`)
+        return
+      }
+
+      if (category === 'page' && step.type === 'regex' && !isValidRegex(step.value)) {
+        const { toast } = await import('@ciphera-net/ui')
+        toast.error(`Invalid regex pattern in step: ${step.name}`)
+        return
+      }
+
+      if (category === 'event' && step.property_filters) {
+        for (const filter of step.property_filters) {
+          if (!filter.key.trim()) {
+            const { toast } = await import('@ciphera-net/ui')
+            toast.error(`Property filter key is required in step: ${step.name}`)
+            return
+          }
+        }
+      }
+    }
+
+    const funnelSteps = steps.map((s, i) => ({
+      ...s,
+      order: i,
+    }))
+
+    await onSubmit({
+      name,
+      description,
+      steps: funnelSteps,
+      conversion_window_value: windowValue,
+      conversion_window_unit: windowUnit,
+    })
+  }
+
+  const selectClass = 'px-2 py-2 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-lg text-sm focus:ring-2 focus:ring-brand-orange/20 focus:border-brand-orange outline-none'
+
+  return (
+    <div className="w-full max-w-3xl mx-auto px-4 sm:px-6 pb-8">
+      <div className="mb-8">
+        <Link
+          href={cancelHref}
+          className="inline-flex items-center gap-2 text-sm text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white mb-6 rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-800 px-2 py-1.5 -ml-2 transition-colors"
+        >
+          <ChevronLeftIcon className="w-4 h-4" />
+          Back to Funnels
+        </Link>
+
+        <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">
+          {initialData ? 'Edit Funnel' : 'Create New Funnel'}
+        </h1>
+        <p className="text-neutral-600 dark:text-neutral-400">
+          Define the steps users take to complete a goal.
+        </p>
+      </div>
+
+      <form onSubmit={handleSubmit}>
+        {/* Name & Description */}
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 mb-6">
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
+                Funnel Name
+              </label>
+              <Input
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="e.g. Signup Flow"
+                autoFocus
+                required
+                maxLength={100}
+              />
+              {name.length > 80 && (
+                <span className={`text-xs tabular-nums mt-1 ${name.length > 90 ? 'text-amber-500' : 'text-neutral-400'}`}>
+                  {name.length}/100
+                </span>
+              )}
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
+                Description (Optional)
+              </label>
+              <Input
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="Tracks users from landing page to signup"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Steps */}
+        <div className="space-y-4 mb-6">
+          <div className="flex items-center justify-between">
+            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+              Funnel Steps
+            </h3>
+          </div>
+
+          {steps.map((step, index) => {
+            const category = step.category || 'page'
+
+            return (
+              <div key={`step-${index}`} className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-4">
+                <div className="flex items-start gap-4">
+                  {/* Step number + reorder */}
+                  <div className="mt-3 text-neutral-400 flex items-center gap-1.5">
+                    <div className="w-6 h-6 rounded-full bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center text-sm font-medium text-neutral-600 dark:text-neutral-400">
+                      {index + 1}
+                    </div>
+                    <div className="flex flex-col gap-0.5">
+                      <button
+                        type="button"
+                        onClick={() => moveStep(index, -1)}
+                        disabled={index === 0}
+                        className="p-0.5 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 disabled:opacity-30 transition-colors"
+                      >
+                        <CaretUp className="w-3.5 h-3.5" />
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => moveStep(index, 1)}
+                        disabled={index === steps.length - 1}
+                        className="p-0.5 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 disabled:opacity-30 transition-colors"
+                      >
+                        <ChevronDownIcon className="w-3.5 h-3.5" />
+                      </button>
+                    </div>
+                  </div>
+
+                  <div className="flex-1">
+                    {/* Category toggle */}
+                    <div className="flex gap-1 mb-3">
+                      <button
+                        type="button"
+                        onClick={() => handleUpdateStep(index, 'category', 'page')}
+                        className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ${
+                          category === 'page'
+                            ? 'bg-brand-orange text-white'
+                            : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
+                        }`}
+                      >
+                        Page Visit
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => handleUpdateStep(index, 'category', 'event')}
+                        className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ${
+                          category === 'event'
+                            ? 'bg-brand-orange text-white'
+                            : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
+                        }`}
+                      >
+                        Custom Event
+                      </button>
+                    </div>
+
+                    <div className="grid gap-4 md:grid-cols-2">
+                      <div>
+                        <label className="block text-xs font-medium text-neutral-500 uppercase mb-1">
+                          Step Name
+                        </label>
+                        <Input
+                          value={step.name}
+                          onChange={(e) => handleUpdateStep(index, 'name', e.target.value)}
+                          placeholder="e.g. Landing Page"
+                        />
+                      </div>
+
+                      {category === 'page' ? (
+                        <div>
+                          <label className="block text-xs font-medium text-neutral-500 uppercase mb-1">
+                            Path / URL
+                          </label>
+                          <div className="flex gap-2">
+                            <select
+                              value={step.type}
+                              onChange={(e) => handleUpdateStep(index, 'type', e.target.value)}
+                              className={`w-24 ${selectClass}`}
+                            >
+                              <option value="exact">Exact</option>
+                              <option value="contains">Contains</option>
+                              <option value="regex">Regex</option>
+                            </select>
+                            <Input
+                              value={step.value}
+                              onChange={(e) => handleUpdateStep(index, 'value', e.target.value)}
+                              placeholder={step.type === 'exact' ? '/pricing' : 'pricing'}
+                              className="flex-1"
+                            />
+                          </div>
+                        </div>
+                      ) : (
+                        <div>
+                          <label className="block text-xs font-medium text-neutral-500 uppercase mb-1">
+                            Event Name
+                          </label>
+                          <Input
+                            value={step.value}
+                            onChange={(e) => handleUpdateStep(index, 'value', e.target.value)}
+                            placeholder="e.g. signup, purchase"
+                          />
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Property filters (event steps only) */}
+                    {category === 'event' && (
+                      <div className="mt-3">
+                        {step.property_filters && step.property_filters.length > 0 && (
+                          <div className="space-y-2 mb-2">
+                            {step.property_filters.map((filter, filterIndex) => (
+                              <div key={filterIndex} className="flex gap-2 items-center">
+                                <Input
+                                  value={filter.key}
+                                  onChange={(e) => updatePropertyFilter(index, filterIndex, 'key', e.target.value)}
+                                  placeholder="key"
+                                  className="flex-1"
+                                />
+                                <select
+                                  value={filter.operator}
+                                  onChange={(e) => updatePropertyFilter(index, filterIndex, 'operator', e.target.value)}
+                                  className={selectClass}
+                                >
+                                  {OPERATOR_OPTIONS.map(op => (
+                                    <option key={op.value} value={op.value}>{op.label}</option>
+                                  ))}
+                                </select>
+                                <Input
+                                  value={filter.value}
+                                  onChange={(e) => updatePropertyFilter(index, filterIndex, 'value', e.target.value)}
+                                  placeholder="value"
+                                  className="flex-1"
+                                />
+                                <button
+                                  type="button"
+                                  onClick={() => removePropertyFilter(index, filterIndex)}
+                                  className="p-1.5 text-neutral-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
+                                >
+                                  <TrashIcon className="w-4 h-4" />
+                                </button>
+                              </div>
+                            ))}
+                          </div>
+                        )}
+                        {(!step.property_filters || step.property_filters.length < MAX_FILTERS) && (
+                          <button
+                            type="button"
+                            onClick={() => addPropertyFilter(index)}
+                            className="text-xs text-neutral-500 hover:text-neutral-900 dark:hover:text-white flex items-center gap-1 transition-colors"
+                          >
+                            <PlusIcon className="w-3.5 h-3.5" />
+                            Add property filter
+                          </button>
+                        )}
+                      </div>
+                    )}
+                  </div>
+
+                  <button
+                    type="button"
+                    onClick={() => handleRemoveStep(index)}
+                    disabled={steps.length <= 1}
+                    aria-label="Remove step"
+                    className={`mt-3 p-2 rounded-xl transition-colors ${
+                      steps.length <= 1
+                        ? 'text-neutral-300 cursor-not-allowed'
+                        : 'text-neutral-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20'
+                    }`}
+                  >
+                    <TrashIcon className="w-5 h-5" />
+                  </button>
+                </div>
+              </div>
+            )
+          })}
+
+          {steps.length < MAX_STEPS ? (
+            <button
+              type="button"
+              onClick={handleAddStep}
+              className="w-full py-3 border-2 border-dashed border-neutral-200 dark:border-neutral-800 rounded-xl text-neutral-500 hover:text-neutral-900 dark:hover:text-white hover:border-neutral-300 dark:hover:border-neutral-700 transition-colors flex items-center justify-center gap-2 font-medium"
+            >
+              <PlusIcon className="w-4 h-4" />
+              Add Step
+            </button>
+          ) : (
+            <p className="text-center text-sm text-neutral-400">Maximum 8 steps</p>
+          )}
+        </div>
+
+        {/* Conversion Window */}
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 mb-6">
+          <h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-3">
+            Conversion Window
+          </h3>
+          <p className="text-xs text-neutral-500 mb-4">
+            Visitors must complete all steps within this time to count as converted.
+          </p>
+
+          {/* Quick presets */}
+          <div className="flex flex-wrap gap-2 mb-4">
+            {WINDOW_PRESETS.map(preset => (
+              <button
+                key={preset.label}
+                type="button"
+                onClick={() => {
+                  setWindowValue(preset.value)
+                  setWindowUnit(preset.unit)
+                }}
+                className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ${
+                  windowValue === preset.value && windowUnit === preset.unit
+                    ? 'bg-brand-orange text-white'
+                    : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
+                }`}
+              >
+                {preset.label}
+              </button>
+            ))}
+          </div>
+
+          {/* Custom input */}
+          <div className="flex gap-2 items-center">
+            <Input
+              type="number"
+              min={1}
+              max={2160}
+              value={windowValue}
+              onChange={(e) => setWindowValue(Math.max(1, parseInt(e.target.value) || 1))}
+              className="w-20"
+            />
+            <select
+              value={windowUnit}
+              onChange={(e) => setWindowUnit(e.target.value as 'hours' | 'days')}
+              className={selectClass}
+            >
+              <option value="hours">hours</option>
+              <option value="days">days</option>
+            </select>
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-4">
+          <Link href={cancelHref}>
+            <Button variant="secondary">
+              Cancel
+            </Button>
+          </Link>
+          <Button
+            type="submit"
+            variant="primary"
+          >
+            {submitLabel}
+          </Button>
+        </div>
+      </form>
+    </div>
+  )
+}
-- 
2.49.1


From 2811945d3e0fc996321ec42d8a6e86c0a2297b66 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 14:26:26 +0100
Subject: [PATCH 046/428] feat(funnels): add filter bar and exit path display
 to funnel detail

---
 app/sites/[id]/funnels/[funnelId]/page.tsx | 121 ++++++++++++++-------
 1 file changed, 84 insertions(+), 37 deletions(-)

diff --git a/app/sites/[id]/funnels/[funnelId]/page.tsx b/app/sites/[id]/funnels/[funnelId]/page.tsx
index 655abe3..4936335 100644
--- a/app/sites/[id]/funnels/[funnelId]/page.tsx
+++ b/app/sites/[id]/funnels/[funnelId]/page.tsx
@@ -1,9 +1,12 @@
 'use client'
 
-import { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { ApiError } from '@/lib/api/client'
 import { getFunnel, getFunnelStats, deleteFunnel, type Funnel, type FunnelStats } from '@/lib/api/funnels'
+import FilterBar from '@/components/dashboard/FilterBar'
+import AddFilterDropdown from '@/components/dashboard/AddFilterDropdown'
+import { type DimensionFilter, serializeFilters } from '@/lib/filters'
 import { toast, Select, DatePicker, ChevronLeftIcon, ArrowRightIcon, TrashIcon, Button } from '@ciphera-net/ui'
 import { FunnelDetailSkeleton, useMinimumLoading, useSkeletonFade } from '@/components/skeletons'
 import Link from 'next/link'
@@ -23,6 +26,8 @@ export default function FunnelReportPage() {
   const [datePreset, setDatePreset] = useState<'7' | '30' | 'custom'>('30')
   const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
   const [loadError, setLoadError] = useState<'not_found' | 'forbidden' | 'error' | null>(null)
+  const [filters, setFilters] = useState<DimensionFilter[]>([])
+  const [expandedExitStep, setExpandedExitStep] = useState<number | null>(null)
 
   const loadData = useCallback(async () => {
     setLoadError(null)
@@ -30,7 +35,7 @@ export default function FunnelReportPage() {
       setLoading(true)
       const [funnelData, statsData] = await Promise.all([
         getFunnel(siteId, funnelId),
-        getFunnelStats(siteId, funnelId, dateRange.start, dateRange.end)
+        getFunnelStats(siteId, funnelId, dateRange.start, dateRange.end, serializeFilters(filters) || undefined)
       ])
       setFunnel(funnelData)
       setStats(statsData)
@@ -43,7 +48,7 @@ export default function FunnelReportPage() {
     } finally {
       setLoading(false)
     }
-  }, [siteId, funnelId, dateRange])
+  }, [siteId, funnelId, dateRange, filters])
 
   useEffect(() => {
     loadData()
@@ -167,6 +172,18 @@ export default function FunnelReportPage() {
           </div>
         </div>
 
+        {/* Filters */}
+        <div className="flex flex-wrap items-center gap-2 mb-6">
+          <AddFilterDropdown
+            onAdd={(f) => setFilters(prev => [...prev, f])}
+          />
+          <FilterBar
+            filters={filters}
+            onRemove={(i) => setFilters(prev => prev.filter((_, idx) => idx !== i))}
+            onClear={() => setFilters([])}
+          />
+        </div>
+
         {/* Chart */}
         <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden shadow-sm p-6 mb-8">
           <h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-6">
@@ -195,42 +212,72 @@ export default function FunnelReportPage() {
               </thead>
               <tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
                 {stats.steps.map((step, i) => (
-                  <tr key={step.step.name} className="hover:bg-neutral-50 dark:hover:bg-neutral-800/30 transition-colors">
-                    <td className="px-6 py-4">
-                      <div className="flex items-center gap-3">
-                        <span className="w-6 h-6 rounded-full bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center text-xs font-medium text-neutral-600 dark:text-neutral-400">
-                          {i + 1}
-                        </span>
-                        <div>
-                          <p className="font-medium text-neutral-900 dark:text-white">{step.step.name}</p>
-                          <p className="text-neutral-500 dark:text-neutral-400 text-xs font-mono mt-0.5">{step.step.value}</p>
+                  <React.Fragment key={step.step.name}>
+                    <tr className="hover:bg-neutral-50 dark:hover:bg-neutral-800/30 transition-colors">
+                      <td className="px-6 py-4">
+                        <div className="flex items-center gap-3">
+                          <span className="w-6 h-6 rounded-full bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center text-xs font-medium text-neutral-600 dark:text-neutral-400">
+                            {i + 1}
+                          </span>
+                          <div>
+                            <p className="font-medium text-neutral-900 dark:text-white">{step.step.name}</p>
+                            <p className="text-neutral-500 dark:text-neutral-400 text-xs font-mono mt-0.5">{step.step.value}</p>
+                          </div>
                         </div>
-                      </div>
-                    </td>
-                    <td className="px-6 py-4 text-right">
-                      <span className="font-medium text-neutral-900 dark:text-white">
-                        {step.visitors.toLocaleString()}
-                      </span>
-                    </td>
-                    <td className="px-6 py-4 text-right">
-                      {i > 0 ? (
-                        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
-                          step.dropoff > 50 
-                            ? 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
-                            : 'bg-neutral-100 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-300'
-                        }`}>
-                          {Math.round(step.dropoff)}%
+                      </td>
+                      <td className="px-6 py-4 text-right">
+                        <span className="font-medium text-neutral-900 dark:text-white">
+                          {step.visitors.toLocaleString()}
                         </span>
-                      ) : (
-                        <span className="text-neutral-400">-</span>
-                      )}
-                    </td>
-                    <td className="px-6 py-4 text-right">
-                      <span className="text-green-600 dark:text-green-400 font-medium">
-                        {Math.round(step.conversion)}%
-                      </span>
-                    </td>
-                  </tr>
+                      </td>
+                      <td className="px-6 py-4 text-right">
+                        {i > 0 ? (
+                          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                            step.dropoff > 50
+                              ? 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
+                              : 'bg-neutral-100 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-300'
+                          }`}>
+                            {Math.round(step.dropoff)}%
+                          </span>
+                        ) : (
+                          <span className="text-neutral-400">-</span>
+                        )}
+                      </td>
+                      <td className="px-6 py-4 text-right">
+                        <span className="text-green-600 dark:text-green-400 font-medium">
+                          {Math.round(step.conversion)}%
+                        </span>
+                      </td>
+                    </tr>
+                    {step.exit_pages && step.exit_pages.length > 0 && (
+                      <tr className="bg-neutral-50/50 dark:bg-neutral-800/20">
+                        <td colSpan={4} className="px-6 py-3">
+                          <div className="ml-9">
+                            <p className="text-xs font-medium text-neutral-500 mb-2">
+                              Where visitors went after dropping off:
+                            </p>
+                            <div className="flex flex-wrap gap-2">
+                              {(expandedExitStep === i ? step.exit_pages : step.exit_pages.slice(0, 3)).map(ep => (
+                                <span key={ep.path} className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg text-xs">
+                                  <span className="font-mono text-neutral-600 dark:text-neutral-300">{ep.path}</span>
+                                  <span className="text-neutral-400">{ep.visitors}</span>
+                                </span>
+                              ))}
+                            </div>
+                            {step.exit_pages.length > 3 && (
+                              <button
+                                type="button"
+                                onClick={() => setExpandedExitStep(expandedExitStep === i ? null : i)}
+                                className="mt-2 text-xs text-brand-orange hover:underline"
+                              >
+                                {expandedExitStep === i ? 'Show less' : `See all ${step.exit_pages.length} exit pages`}
+                              </button>
+                            )}
+                          </div>
+                        </td>
+                      </tr>
+                    )}
+                  </React.Fragment>
                 ))}
               </tbody>
             </table>
-- 
2.49.1


From 585cb4fd8837d1e3fdc6418343ff5b984087e87e Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 14:27:45 +0100
Subject: [PATCH 047/428] feat(funnels): add edit funnel page with
 pre-populated form

---
 .../[id]/funnels/[funnelId]/edit/page.tsx     | 58 +++++++++++++++++++
 app/sites/[id]/funnels/[funnelId]/page.tsx    |  8 +++
 2 files changed, 66 insertions(+)
 create mode 100644 app/sites/[id]/funnels/[funnelId]/edit/page.tsx

diff --git a/app/sites/[id]/funnels/[funnelId]/edit/page.tsx b/app/sites/[id]/funnels/[funnelId]/edit/page.tsx
new file mode 100644
index 0000000..cea7f0f
--- /dev/null
+++ b/app/sites/[id]/funnels/[funnelId]/edit/page.tsx
@@ -0,0 +1,58 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import { useSWRConfig } from 'swr'
+import { getFunnel, updateFunnel, type Funnel, type CreateFunnelRequest } from '@/lib/api/funnels'
+import { toast } from '@ciphera-net/ui'
+import FunnelForm from '@/components/funnels/FunnelForm'
+import { FunnelDetailSkeleton } from '@/components/skeletons'
+
+export default function EditFunnelPage() {
+  const params = useParams()
+  const router = useRouter()
+  const { mutate } = useSWRConfig()
+  const siteId = params.id as string
+  const funnelId = params.funnelId as string
+  const [funnel, setFunnel] = useState<Funnel | null>(null)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    getFunnel(siteId, funnelId).then(setFunnel).catch(() => {
+      toast.error('Failed to load funnel')
+      router.push(`/sites/${siteId}/funnels`)
+    })
+  }, [siteId, funnelId, router])
+
+  const handleSubmit = async (data: CreateFunnelRequest) => {
+    try {
+      setSaving(true)
+      await updateFunnel(siteId, funnelId, data)
+      await mutate(['funnels', siteId])
+      toast.success('Funnel updated')
+      router.push(`/sites/${siteId}/funnels/${funnelId}`)
+    } catch {
+      toast.error('Failed to update funnel. Please try again.')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (!funnel) return <FunnelDetailSkeleton />
+
+  return (
+    <FunnelForm
+      siteId={siteId}
+      initialData={{
+        name: funnel.name,
+        description: funnel.description,
+        steps: funnel.steps.map(({ order, ...rest }) => rest),
+        conversion_window_value: funnel.conversion_window_value,
+        conversion_window_unit: funnel.conversion_window_unit,
+      }}
+      onSubmit={handleSubmit}
+      submitLabel={saving ? 'Saving...' : 'Save Changes'}
+      cancelHref={`/sites/${siteId}/funnels/${funnelId}`}
+    />
+  )
+}
diff --git a/app/sites/[id]/funnels/[funnelId]/page.tsx b/app/sites/[id]/funnels/[funnelId]/page.tsx
index 4936335..5e688d9 100644
--- a/app/sites/[id]/funnels/[funnelId]/page.tsx
+++ b/app/sites/[id]/funnels/[funnelId]/page.tsx
@@ -8,6 +8,7 @@ import FilterBar from '@/components/dashboard/FilterBar'
 import AddFilterDropdown from '@/components/dashboard/AddFilterDropdown'
 import { type DimensionFilter, serializeFilters } from '@/lib/filters'
 import { toast, Select, DatePicker, ChevronLeftIcon, ArrowRightIcon, TrashIcon, Button } from '@ciphera-net/ui'
+import { PencilSimple } from '@phosphor-icons/react'
 import { FunnelDetailSkeleton, useMinimumLoading, useSkeletonFade } from '@/components/skeletons'
 import Link from 'next/link'
 import { FunnelChart } from '@/components/ui/funnel-chart'
@@ -162,6 +163,13 @@ export default function FunnelReportPage() {
               ]}
             />
             
+            <Link
+              href={`/sites/${siteId}/funnels/${funnelId}/edit`}
+              className="p-2 text-neutral-400 hover:text-brand-orange hover:bg-orange-50 dark:hover:bg-orange-900/20 rounded-xl transition-colors"
+              aria-label="Edit funnel"
+            >
+              <PencilSimple className="w-5 h-5" />
+            </Link>
             <button
               onClick={handleDelete}
               className="p-2 text-neutral-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-xl transition-colors"
-- 
2.49.1


From efd0c144b5d57f4707eb81fecd82b8b8137b55ab Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 14:33:25 +0100
Subject: [PATCH 048/428] feat(funnels): add conversion trends line chart with
 per-step toggles

---
 app/sites/[id]/funnels/[funnelId]/page.tsx | 111 ++++++++++++++++++++-
 1 file changed, 108 insertions(+), 3 deletions(-)

diff --git a/app/sites/[id]/funnels/[funnelId]/page.tsx b/app/sites/[id]/funnels/[funnelId]/page.tsx
index 5e688d9..7050a1d 100644
--- a/app/sites/[id]/funnels/[funnelId]/page.tsx
+++ b/app/sites/[id]/funnels/[funnelId]/page.tsx
@@ -3,7 +3,7 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { ApiError } from '@/lib/api/client'
-import { getFunnel, getFunnelStats, deleteFunnel, type Funnel, type FunnelStats } from '@/lib/api/funnels'
+import { getFunnel, getFunnelStats, getFunnelTrends, deleteFunnel, type Funnel, type FunnelStats, type FunnelTrends } from '@/lib/api/funnels'
 import FilterBar from '@/components/dashboard/FilterBar'
 import AddFilterDropdown from '@/components/dashboard/AddFilterDropdown'
 import { type DimensionFilter, serializeFilters } from '@/lib/filters'
@@ -13,6 +13,7 @@ import { FunnelDetailSkeleton, useMinimumLoading, useSkeletonFade } from '@/comp
 import Link from 'next/link'
 import { FunnelChart } from '@/components/ui/funnel-chart'
 import { getDateRange } from '@ciphera-net/ui'
+import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid } from 'recharts'
 
 export default function FunnelReportPage() {
   const params = useParams()
@@ -29,17 +30,22 @@ export default function FunnelReportPage() {
   const [loadError, setLoadError] = useState<'not_found' | 'forbidden' | 'error' | null>(null)
   const [filters, setFilters] = useState<DimensionFilter[]>([])
   const [expandedExitStep, setExpandedExitStep] = useState<number | null>(null)
+  const [trends, setTrends] = useState<FunnelTrends | null>(null)
+  const [visibleSteps, setVisibleSteps] = useState<Set<string>>(new Set())
 
   const loadData = useCallback(async () => {
     setLoadError(null)
     try {
       setLoading(true)
-      const [funnelData, statsData] = await Promise.all([
+      const filterStr = serializeFilters(filters) || undefined
+      const [funnelData, statsData, trendsData] = await Promise.all([
         getFunnel(siteId, funnelId),
-        getFunnelStats(siteId, funnelId, dateRange.start, dateRange.end, serializeFilters(filters) || undefined)
+        getFunnelStats(siteId, funnelId, dateRange.start, dateRange.end, filterStr),
+        getFunnelTrends(siteId, funnelId, dateRange.start, dateRange.end, 'day', filterStr)
       ])
       setFunnel(funnelData)
       setStats(statsData)
+      setTrends(trendsData)
     } catch (error) {
       const status = error instanceof ApiError ? error.status : 0
       if (status === 404) setLoadError('not_found')
@@ -119,6 +125,21 @@ export default function FunnelReportPage() {
     value: s.visitors,
   }))
 
+  const STEP_COLORS = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4', '#84CC16']
+
+  const trendsChartData = trends ? trends.dates.map((date, idx) => {
+    const point: Record<string, any> = {
+      date: new Date(date).toLocaleDateString('en-GB', { day: 'numeric', month: 'short' }),
+      overall: Math.round(trends.overall[idx] * 10) / 10,
+    }
+    for (const [stepKey, values] of Object.entries(trends.steps)) {
+      if (visibleSteps.has(stepKey)) {
+        point[`step_${stepKey}`] = Math.round(values[idx] * 10) / 10
+      }
+    }
+    return point
+  }) : []
+
   return (
     <div className={`w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       <div className="mb-8">
@@ -206,6 +227,90 @@ export default function FunnelReportPage() {
           />
         </div>
 
+        {/* Conversion Trends */}
+        {trends && trends.dates.length > 1 && (
+          <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden shadow-sm p-6 mb-8">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+                Conversion Trends
+              </h3>
+              <div className="flex flex-wrap gap-2">
+                {stats?.steps.map((s, i) => (
+                  <button
+                    key={i}
+                    type="button"
+                    onClick={() => {
+                      setVisibleSteps(prev => {
+                        const next = new Set(prev)
+                        if (next.has(String(i))) next.delete(String(i))
+                        else next.add(String(i))
+                        return next
+                      })
+                    }}
+                    className={`px-2 py-1 text-xs rounded-md transition-colors ${
+                      visibleSteps.has(String(i))
+                        ? 'bg-brand-orange/10 text-brand-orange border border-brand-orange/30'
+                        : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-500 border border-transparent'
+                    }`}
+                  >
+                    {s.step.name}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            <div className="h-64">
+              <ResponsiveContainer width="100%" height="100%">
+                <LineChart data={trendsChartData}>
+                  <CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-neutral-200 dark:text-neutral-700" />
+                  <XAxis
+                    dataKey="date"
+                    tick={{ fontSize: 12 }}
+                    className="text-neutral-500"
+                  />
+                  <YAxis
+                    domain={[0, 100]}
+                    tickFormatter={(v) => `${v}%`}
+                    tick={{ fontSize: 12 }}
+                    className="text-neutral-500"
+                  />
+                  <Tooltip
+                    formatter={(value: number) => [`${value}%`]}
+                    contentStyle={{
+                      backgroundColor: 'var(--color-neutral-900, #171717)',
+                      border: '1px solid var(--color-neutral-700, #404040)',
+                      borderRadius: '8px',
+                      color: '#fff',
+                      fontSize: '12px',
+                    }}
+                  />
+                  <Line
+                    type="monotone"
+                    dataKey="overall"
+                    name="Overall"
+                    stroke="#F97316"
+                    strokeWidth={2}
+                    dot={false}
+                    activeDot={{ r: 4 }}
+                  />
+                  {Array.from(visibleSteps).map((stepKey) => (
+                    <Line
+                      key={stepKey}
+                      type="monotone"
+                      dataKey={`step_${stepKey}`}
+                      name={stats?.steps[Number(stepKey)]?.step.name || `Step ${stepKey}`}
+                      stroke={STEP_COLORS[Number(stepKey) % STEP_COLORS.length]}
+                      strokeWidth={2}
+                      dot={false}
+                      activeDot={{ r: 4 }}
+                    />
+                  ))}
+                </LineChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+        )}
+
         {/* Detailed Stats Table */}
         <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden">
           <div className="overflow-x-auto">
-- 
2.49.1


From 4c7ed858f71e17936c41449b7f4169d7e13780be Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 14:34:07 +0100
Subject: [PATCH 049/428] feat(funnels): add step-level breakdown drawer with
 dimension tabs

---
 app/sites/[id]/funnels/[funnelId]/page.tsx |  17 +++-
 components/funnels/BreakdownDrawer.tsx     | 111 +++++++++++++++++++++
 2 files changed, 127 insertions(+), 1 deletion(-)
 create mode 100644 components/funnels/BreakdownDrawer.tsx

diff --git a/app/sites/[id]/funnels/[funnelId]/page.tsx b/app/sites/[id]/funnels/[funnelId]/page.tsx
index 7050a1d..9fd7a5c 100644
--- a/app/sites/[id]/funnels/[funnelId]/page.tsx
+++ b/app/sites/[id]/funnels/[funnelId]/page.tsx
@@ -13,6 +13,7 @@ import { FunnelDetailSkeleton, useMinimumLoading, useSkeletonFade } from '@/comp
 import Link from 'next/link'
 import { FunnelChart } from '@/components/ui/funnel-chart'
 import { getDateRange } from '@ciphera-net/ui'
+import BreakdownDrawer from '@/components/funnels/BreakdownDrawer'
 import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid } from 'recharts'
 
 export default function FunnelReportPage() {
@@ -32,6 +33,7 @@ export default function FunnelReportPage() {
   const [expandedExitStep, setExpandedExitStep] = useState<number | null>(null)
   const [trends, setTrends] = useState<FunnelTrends | null>(null)
   const [visibleSteps, setVisibleSteps] = useState<Set<string>>(new Set())
+  const [breakdownStep, setBreakdownStep] = useState<number | null>(null)
 
   const loadData = useCallback(async () => {
     setLoadError(null)
@@ -326,7 +328,7 @@ export default function FunnelReportPage() {
               <tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
                 {stats.steps.map((step, i) => (
                   <React.Fragment key={step.step.name}>
-                    <tr className="hover:bg-neutral-50 dark:hover:bg-neutral-800/30 transition-colors">
+                    <tr className="hover:bg-neutral-50 dark:hover:bg-neutral-800/30 transition-colors cursor-pointer" onClick={() => setBreakdownStep(i)}>
                       <td className="px-6 py-4">
                         <div className="flex items-center gap-3">
                           <span className="w-6 h-6 rounded-full bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center text-xs font-medium text-neutral-600 dark:text-neutral-400">
@@ -398,6 +400,19 @@ export default function FunnelReportPage() {
         </div>
       </div>
 
+      {breakdownStep !== null && stats && (
+        <BreakdownDrawer
+          siteId={siteId}
+          funnelId={funnelId}
+          stepIndex={breakdownStep}
+          stepName={stats.steps[breakdownStep].step.name}
+          startDate={dateRange.start}
+          endDate={dateRange.end}
+          filters={serializeFilters(filters) || undefined}
+          onClose={() => setBreakdownStep(null)}
+        />
+      )}
+
       <DatePicker
         isOpen={isDatePickerOpen}
         onClose={() => setIsDatePickerOpen(false)}
diff --git a/components/funnels/BreakdownDrawer.tsx b/components/funnels/BreakdownDrawer.tsx
new file mode 100644
index 0000000..fc605ab
--- /dev/null
+++ b/components/funnels/BreakdownDrawer.tsx
@@ -0,0 +1,111 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { getFunnelBreakdown, type FunnelBreakdown } from '@/lib/api/funnels'
+import { DIMENSION_LABELS } from '@/lib/filters'
+
+const BREAKDOWN_DIMENSIONS = [
+  'device', 'country', 'browser', 'os',
+  'utm_source', 'utm_medium', 'utm_campaign'
+]
+
+interface BreakdownDrawerProps {
+  siteId: string
+  funnelId: string
+  stepIndex: number
+  stepName: string
+  startDate: string
+  endDate: string
+  filters?: string
+  onClose: () => void
+}
+
+export default function BreakdownDrawer({ siteId, funnelId, stepIndex, stepName, startDate, endDate, filters, onClose }: BreakdownDrawerProps) {
+  const [activeDimension, setActiveDimension] = useState('device')
+  const [breakdown, setBreakdown] = useState<FunnelBreakdown | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  const loadBreakdown = useCallback(async () => {
+    setLoading(true)
+    try {
+      const data = await getFunnelBreakdown(siteId, funnelId, stepIndex, activeDimension, startDate, endDate, filters)
+      setBreakdown(data)
+    } catch {
+      setBreakdown(null)
+    } finally {
+      setLoading(false)
+    }
+  }, [siteId, funnelId, stepIndex, activeDimension, startDate, endDate, filters])
+
+  useEffect(() => {
+    loadBreakdown()
+  }, [loadBreakdown])
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div className="fixed inset-0 z-40 bg-black/20" onClick={onClose} />
+
+      <div className="fixed inset-y-0 right-0 z-50 w-96 max-w-full bg-white dark:bg-neutral-900 border-l border-neutral-200 dark:border-neutral-800 shadow-xl flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-neutral-200 dark:border-neutral-800">
+          <div>
+            <h3 className="font-semibold text-neutral-900 dark:text-white">Step Breakdown</h3>
+            <p className="text-sm text-neutral-500">{stepName}</p>
+          </div>
+          <button onClick={onClose} className="p-2 text-neutral-400 hover:text-neutral-600 rounded-lg">
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Dimension tabs */}
+        <div className="flex overflow-x-auto gap-1 px-6 py-3 border-b border-neutral-200 dark:border-neutral-800">
+          {BREAKDOWN_DIMENSIONS.map(dim => (
+            <button
+              key={dim}
+              onClick={() => setActiveDimension(dim)}
+              className={`px-3 py-1.5 text-xs font-medium rounded-lg whitespace-nowrap transition-colors ${
+                activeDimension === dim
+                  ? 'bg-brand-orange text-white'
+                  : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-500 hover:bg-neutral-200 dark:hover:bg-neutral-700'
+              }`}
+            >
+              {DIMENSION_LABELS[dim] || dim}
+            </button>
+          ))}
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto px-6 py-4">
+          {loading ? (
+            <div className="space-y-3">
+              {Array.from({ length: 5 }).map((_, i) => (
+                <div key={i} className="h-10 bg-neutral-100 dark:bg-neutral-800 rounded-lg animate-pulse" />
+              ))}
+            </div>
+          ) : !breakdown || breakdown.entries.length === 0 ? (
+            <p className="text-sm text-neutral-500">No data for this dimension</p>
+          ) : (
+            <div className="space-y-2">
+              {breakdown.entries.map(entry => (
+                <div key={entry.value} className="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-neutral-50 dark:hover:bg-neutral-800/50">
+                  <span className="text-sm text-neutral-900 dark:text-white truncate mr-4">
+                    {entry.value || '(unknown)'}
+                  </span>
+                  <div className="flex items-center gap-4 text-sm shrink-0">
+                    <span className="text-neutral-500">{entry.visitors}</span>
+                    <span className="text-green-600 dark:text-green-400 font-medium w-16 text-right">
+                      {Math.round(entry.conversion)}%
+                    </span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  )
+}
-- 
2.49.1


From 94112161f07a5adbb580650445f898285821c95b Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 14:38:01 +0100
Subject: [PATCH 050/428] docs: update changelog for funnels v2

---
 CHANGELOG.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9cd8f94..1a68ccb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ### Added
 
+- **Funnels now track actions, not just pages.** When creating or editing a funnel, you can now choose between "Page Visit" and "Custom Event" for each step. Page Visit steps work as before — matching URLs. Custom Event steps let you track specific actions like signups, purchases, or button clicks. You can also add property filters to event steps (e.g., "purchase where plan is pro") to get even more specific about what you're measuring.
+- **Edit your funnels.** You can now edit existing funnels — change the name, description, steps, or conversion window without having to delete and recreate them. Click the pencil icon on any funnel's detail page.
+- **Conversion window.** Funnels now have a configurable time limit. Visitors must complete all steps within your chosen window (e.g., 7 days, 24 hours) to count as converted. Set it when creating or editing a funnel — quick presets for common windows, or type your own. Default is 7 days.
+- **Filter your funnels.** Apply the same filters you use on the dashboard — by device, country, browser, UTM source, and more — directly on your funnel stats. See how your funnel performs for mobile visitors vs desktop, or for traffic from a specific campaign.
+- **See where visitors go after dropping off.** Each funnel step now shows the top pages visitors navigated to after leaving the funnel. A quick preview appears inline, and you can expand to see the full list. Helps you understand why visitors aren't converting.
+- **Conversion trends over time.** A new chart below your funnel shows how conversion rates change day by day. See at a glance whether your funnel is improving or degrading. Toggle individual steps on or off to pinpoint which step is changing.
+- **Step-level breakdowns.** Click any step in your funnel stats to open a breakdown panel showing who converts at that step — split by device, country, browser, or traffic source. Useful for spotting segments that convert better or worse than average.
+- **Up to 8 steps per funnel.** The step limit has been increased from 5 to 8, so you can track longer user journeys like multi-page onboarding flows or detailed checkout processes.
 - **BunnyCDN integration.** Connect your BunnyCDN account in Settings > Integrations to monitor your CDN performance right alongside your analytics. A new "CDN" tab on your dashboard shows total bandwidth served, request volume, cache hit rate, origin response time, and error counts — each with percentage changes compared to the previous period. Charts show bandwidth trends (total vs cached), daily request volume, and error breakdowns over time. A geographic breakdown shows which countries consume the most bandwidth. When connecting, Pulse automatically filters your pull zones to only show ones matching your site's domain. Pulse only stores your API key encrypted and only reads statistics — it never modifies anything in your BunnyCDN account. You can disconnect and fully remove all CDN data at any time.
 - **Google Search Console integration.** Connect your Google Search Console account in Settings > Integrations to see which search queries bring visitors to your site. A new "Search" tab on your dashboard shows total clicks, impressions, average CTR, and average ranking position — with percentage changes compared to the previous period. Browse your top search queries and top pages in sortable, paginated tables. Click any query to see which pages rank for it, or click any page to see which queries drive traffic to it. A trend chart shows how clicks and impressions change over time, and a green badge highlights new queries that appeared this period. Pulse only requests read-only access to your Search Console data, encrypts your Google credentials, and lets you disconnect and fully remove all search data at any time.
 - **Free plan now visible on the Pricing page.** The free tier is no longer hidden — it's displayed as the first option on the Pricing page so you can see exactly what you get before signing up: 1 site, 5,000 monthly pageviews, and 6 months of data retention, completely free.
-- 
2.49.1


From 80ae8311dc7b60af1dc79799eb7163ba5f7546ef Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 15:30:17 +0100
Subject: [PATCH 051/428] feat: static header + collapsible sidebar navigation

Replace floating pill header with static variant for authenticated
views. Add collapsible sidebar with site picker, grouped navigation
(Analytics/Infrastructure), and mobile overlay drawer. Remove
horizontal SiteNav tab bar.
---
 app/layout-content.tsx                  |  68 +++--
 app/sites/[id]/SiteLayoutShell.tsx      |   9 +-
 components/dashboard/DashboardShell.tsx |  23 ++
 components/dashboard/Sidebar.tsx        | 364 ++++++++++++++++++++++++
 lib/sidebar-context.tsx                 |  31 ++
 package-lock.json                       |   8 +-
 package.json                            |   2 +-
 7 files changed, 474 insertions(+), 31 deletions(-)
 create mode 100644 components/dashboard/DashboardShell.tsx
 create mode 100644 components/dashboard/Sidebar.tsx
 create mode 100644 lib/sidebar-context.tsx

diff --git a/app/layout-content.tsx b/app/layout-content.tsx
index e5f2caa..ccf5075 100644
--- a/app/layout-content.tsx
+++ b/app/layout-content.tsx
@@ -2,7 +2,7 @@
 
 import { OfflineBanner } from '@/components/OfflineBanner'
 import { Footer } from '@/components/Footer'
-import { Header, type CipheraApp } from '@ciphera-net/ui'
+import { Header, type CipheraApp, MenuIcon } from '@ciphera-net/ui'
 import NotificationCenter from '@/components/notifications/NotificationCenter'
 import { useAuth } from '@/lib/auth/context'
 import { useOnlineStatus } from '@/lib/hooks/useOnlineStatus'
@@ -15,6 +15,7 @@ import { LoadingOverlay } from '@ciphera-net/ui'
 import { useRouter } from 'next/navigation'
 import { SettingsModalProvider, useSettingsModal } from '@/lib/settings-modal-context'
 import SettingsModalWrapper from '@/components/settings/SettingsModalWrapper'
+import { SidebarProvider, useSidebar } from '@/lib/sidebar-context'
 
 const ORG_SWITCH_KEY = 'pulse_switching_org'
 
@@ -46,6 +47,19 @@ const CIPHERA_APPS: CipheraApp[] = [
   },
 ]
 
+function MobileSidebarToggle() {
+  const { openMobile } = useSidebar()
+  return (
+    <button
+      onClick={openMobile}
+      className="lg:hidden p-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors"
+      aria-label="Open navigation"
+    >
+      <MenuIcon className="w-5 h-5" />
+    </button>
+  )
+}
+
 function LayoutInner({ children }: { children: React.ReactNode }) {
   const auth = useAuth()
   const router = useRouter()
@@ -91,23 +105,22 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
     router.push('/onboarding')
   }
 
-  const showOfflineBar = Boolean(auth.user && !isOnline);
-  const barHeightRem = 2.5;
-  const headerHeightRem = 6;
-  const mainTopPaddingRem = barHeightRem + headerHeightRem;
+  const isAuthenticated = !!auth.user
+  const showOfflineBar = Boolean(auth.user && !isOnline)
 
   if (isSwitchingOrg) {
     return <LoadingOverlay logoSrc="/pulse_icon_no_margins.png" title="Pulse" portal={false} />
   }
 
   return (
-    <>
+    <div className="flex flex-col min-h-screen">
       {auth.user && <OfflineBanner isOnline={isOnline} />}
       <Header
         auth={auth}
         LinkComponent={Link}
         logoSrc="/pulse_icon_no_margins.png"
         appName="Pulse"
+        variant={isAuthenticated ? 'static' : 'floating'}
         orgs={orgs}
         activeOrgId={auth.user?.org_id}
         onSwitchOrganization={handleSwitchOrganization}
@@ -116,11 +129,12 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
         showFaq={false}
         showSecurity={false}
         showPricing={true}
-        topOffset={showOfflineBar ? `${barHeightRem}rem` : undefined}
+        topOffset={!isAuthenticated && showOfflineBar ? '2.5rem' : undefined}
         rightSideActions={auth.user ? <NotificationCenter /> : null}
         apps={CIPHERA_APPS}
         currentAppId="pulse"
         onOpenSettings={openSettings}
+        leftActions={isAuthenticated ? <MobileSidebarToggle /> : undefined}
         customNavItems={
           <>
             {!auth.user && (
@@ -134,26 +148,40 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
           </>
         }
       />
-      <main
-        className={`flex-1 pb-8 ${showOfflineBar ? '' : 'pt-24'}`}
-        style={showOfflineBar ? { paddingTop: `${mainTopPaddingRem}rem` } : undefined}
-      >
-        {children}
-      </main>
-      <Footer
-        LinkComponent={Link}
-        appName="Pulse"
-        isAuthenticated={!!auth.user}
-      />
+      {isAuthenticated ? (
+        // Authenticated: sidebar layout — children include DashboardShell
+        <>{children}</>
+      ) : (
+        // Public: standard content with footer
+        <>
+          <main className="flex-1 pb-8 pt-24">
+            {children}
+          </main>
+          <Footer
+            LinkComponent={Link}
+            appName="Pulse"
+            isAuthenticated={false}
+          />
+        </>
+      )}
+      {isAuthenticated && (
+        <Footer
+          LinkComponent={Link}
+          appName="Pulse"
+          isAuthenticated={true}
+        />
+      )}
       <SettingsModalWrapper />
-    </>
+    </div>
   )
 }
 
 export default function LayoutContent({ children }: { children: React.ReactNode }) {
   return (
     <SettingsModalProvider>
-      <LayoutInner>{children}</LayoutInner>
+      <SidebarProvider>
+        <LayoutInner>{children}</LayoutInner>
+      </SidebarProvider>
     </SettingsModalProvider>
   )
 }
diff --git a/app/sites/[id]/SiteLayoutShell.tsx b/app/sites/[id]/SiteLayoutShell.tsx
index 1bc2a07..8879945 100644
--- a/app/sites/[id]/SiteLayoutShell.tsx
+++ b/app/sites/[id]/SiteLayoutShell.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import SiteNav from '@/components/dashboard/SiteNav'
+import DashboardShell from '@/components/dashboard/DashboardShell'
 
 export default function SiteLayoutShell({
   siteId,
@@ -10,11 +10,8 @@ export default function SiteLayoutShell({
   children: React.ReactNode
 }) {
   return (
-    <>
-      <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pt-8">
-        <SiteNav siteId={siteId} />
-      </div>
+    <DashboardShell siteId={siteId}>
       {children}
-    </>
+    </DashboardShell>
   )
 }
diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
new file mode 100644
index 0000000..0488ba5
--- /dev/null
+++ b/components/dashboard/DashboardShell.tsx
@@ -0,0 +1,23 @@
+'use client'
+
+import Sidebar from './Sidebar'
+import { useSidebar } from '@/lib/sidebar-context'
+
+export default function DashboardShell({
+  siteId,
+  children,
+}: {
+  siteId: string
+  children: React.ReactNode
+}) {
+  const { mobileOpen, closeMobile } = useSidebar()
+
+  return (
+    <div className="flex flex-1 min-h-0">
+      <Sidebar siteId={siteId} mobileOpen={mobileOpen} onMobileClose={closeMobile} />
+      <main className="flex-1 min-w-0 overflow-auto pb-8">
+        {children}
+      </main>
+    </div>
+  )
+}
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
new file mode 100644
index 0000000..34e9f9c
--- /dev/null
+++ b/components/dashboard/Sidebar.tsx
@@ -0,0 +1,364 @@
+'use client'
+
+import { useState, useEffect, useRef } from 'react'
+import Link from 'next/link'
+import { usePathname, useRouter } from 'next/navigation'
+import { listSites, type Site } from '@/lib/api/sites'
+import { useAuth } from '@/lib/auth/context'
+import {
+  LayoutDashboardIcon,
+  PathIcon,
+  FunnelIcon,
+  CursorClickIcon,
+  SearchIcon,
+  CloudUploadIcon,
+  HeartbeatIcon,
+  SettingsIcon,
+  CollapseLeftIcon,
+  CollapseRightIcon,
+  ChevronUpDownIcon,
+  PlusIcon,
+  XIcon,
+  MenuIcon,
+} from '@ciphera-net/ui'
+
+const SIDEBAR_COLLAPSED_KEY = 'pulse_sidebar_collapsed'
+
+interface NavItem {
+  label: string
+  href: (siteId: string) => string
+  icon: React.ComponentType<{ className?: string; weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone' }>
+  matchPrefix?: boolean
+}
+
+interface NavGroup {
+  label: string
+  items: NavItem[]
+}
+
+const NAV_GROUPS: NavGroup[] = [
+  {
+    label: 'Analytics',
+    items: [
+      { label: 'Dashboard', href: (id) => `/sites/${id}`, icon: LayoutDashboardIcon },
+      { label: 'Journeys', href: (id) => `/sites/${id}/journeys`, icon: PathIcon, matchPrefix: true },
+      { label: 'Funnels', href: (id) => `/sites/${id}/funnels`, icon: FunnelIcon, matchPrefix: true },
+      { label: 'Behavior', href: (id) => `/sites/${id}/behavior`, icon: CursorClickIcon, matchPrefix: true },
+      { label: 'Search', href: (id) => `/sites/${id}/search`, icon: SearchIcon, matchPrefix: true },
+    ],
+  },
+  {
+    label: 'Infrastructure',
+    items: [
+      { label: 'CDN', href: (id) => `/sites/${id}/cdn`, icon: CloudUploadIcon, matchPrefix: true },
+      { label: 'Uptime', href: (id) => `/sites/${id}/uptime`, icon: HeartbeatIcon, matchPrefix: true },
+    ],
+  },
+]
+
+const SETTINGS_ITEM: NavItem = {
+  label: 'Settings',
+  href: (id) => `/sites/${id}/settings`,
+  icon: SettingsIcon,
+  matchPrefix: true,
+}
+
+function SitePicker({
+  sites,
+  currentSiteId,
+  collapsed,
+}: {
+  sites: Site[]
+  currentSiteId: string
+  collapsed: boolean
+}) {
+  const [open, setOpen] = useState(false)
+  const [search, setSearch] = useState('')
+  const ref = useRef<HTMLDivElement>(null)
+  const pathname = usePathname()
+  const router = useRouter()
+
+  const currentSite = sites.find((s) => s.id === currentSiteId)
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false)
+        setSearch('')
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  const filtered = sites.filter(
+    (s) =>
+      s.name.toLowerCase().includes(search.toLowerCase()) ||
+      s.domain.toLowerCase().includes(search.toLowerCase())
+  )
+
+  const switchSite = (siteId: string) => {
+    // Preserve current page type
+    const currentPageType = pathname.replace(/^\/sites\/[^/]+/, '')
+    router.push(`/sites/${siteId}${currentPageType}`)
+    setOpen(false)
+    setSearch('')
+  }
+
+  const initial = currentSite?.name?.charAt(0)?.toUpperCase() || '?'
+
+  return (
+    <div className="relative px-3 mb-2" ref={ref}>
+      <button
+        onClick={() => setOpen(!open)}
+        className={`w-full flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors ${
+          collapsed ? 'justify-center' : ''
+        }`}
+        title={collapsed ? currentSite?.name || 'Select site' : undefined}
+      >
+        <span className="w-7 h-7 rounded-md bg-brand-orange/10 text-brand-orange flex items-center justify-center text-xs font-bold shrink-0">
+          {initial}
+        </span>
+        {!collapsed && (
+          <>
+            <span className="truncate flex-1 text-left">{currentSite?.name || 'Select site'}</span>
+            <ChevronUpDownIcon className="w-4 h-4 text-neutral-400 shrink-0" />
+          </>
+        )}
+      </button>
+
+      {open && (
+        <div className="absolute left-3 right-3 top-full mt-1 z-50 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden min-w-[220px]">
+          <div className="p-2">
+            <input
+              type="text"
+              placeholder="Search sites..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="w-full px-3 py-1.5 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg outline-none focus:ring-2 focus:ring-brand-orange/40 text-neutral-900 dark:text-white placeholder:text-neutral-400"
+              autoFocus
+            />
+          </div>
+          <div className="max-h-64 overflow-y-auto">
+            {filtered.map((site) => (
+              <button
+                key={site.id}
+                onClick={() => switchSite(site.id)}
+                className={`w-full flex items-center gap-2.5 px-4 py-2 text-sm transition-colors text-left ${
+                  site.id === currentSiteId
+                    ? 'bg-brand-orange/10 text-brand-orange font-medium'
+                    : 'text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800'
+                }`}
+              >
+                <span className="w-5 h-5 rounded bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center text-[10px] font-bold shrink-0">
+                  {site.name.charAt(0).toUpperCase()}
+                </span>
+                <span className="flex flex-col min-w-0">
+                  <span className="truncate">{site.name}</span>
+                  <span className="text-xs text-neutral-400 truncate">{site.domain}</span>
+                </span>
+              </button>
+            ))}
+            {filtered.length === 0 && (
+              <p className="px-4 py-3 text-sm text-neutral-400">No sites found</p>
+            )}
+          </div>
+          <div className="border-t border-neutral-200 dark:border-neutral-700 p-2">
+            <Link
+              href="/sites/new"
+              onClick={() => setOpen(false)}
+              className="flex items-center gap-2 px-3 py-1.5 text-sm text-brand-orange hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg transition-colors"
+            >
+              <PlusIcon className="w-4 h-4" />
+              Add new site
+            </Link>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function NavItemLink({
+  item,
+  siteId,
+  collapsed,
+  onClick,
+}: {
+  item: NavItem
+  siteId: string
+  collapsed: boolean
+  onClick?: () => void
+}) {
+  const pathname = usePathname()
+  const href = item.href(siteId)
+  const isActive = item.matchPrefix ? pathname.startsWith(href) : pathname === href
+
+  return (
+    <Link
+      href={href}
+      onClick={onClick}
+      title={collapsed ? item.label : undefined}
+      className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium transition-colors ${
+        collapsed ? 'justify-center' : ''
+      } ${
+        isActive
+          ? 'bg-brand-orange/10 text-brand-orange'
+          : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800'
+      }`}
+    >
+      <item.icon className="w-[18px] h-[18px] shrink-0" weight={isActive ? 'fill' : 'regular'} />
+      {!collapsed && <span>{item.label}</span>}
+    </Link>
+  )
+}
+
+export default function Sidebar({
+  siteId,
+  mobileOpen,
+  onMobileClose,
+}: {
+  siteId: string
+  mobileOpen: boolean
+  onMobileClose: () => void
+}) {
+  const { user } = useAuth()
+  const canEdit = user?.role === 'owner' || user?.role === 'admin'
+  const [collapsed, setCollapsed] = useState(() => {
+    if (typeof window === 'undefined') return false
+    return localStorage.getItem(SIDEBAR_COLLAPSED_KEY) === 'true'
+  })
+  const [sites, setSites] = useState<Site[]>([])
+  const pathname = usePathname()
+
+  // Close mobile drawer on navigation
+  useEffect(() => {
+    onMobileClose()
+  }, [pathname, onMobileClose])
+
+  useEffect(() => {
+    listSites()
+      .then(setSites)
+      .catch(() => {})
+  }, [])
+
+  const toggleCollapsed = () => {
+    const next = !collapsed
+    setCollapsed(next)
+    localStorage.setItem(SIDEBAR_COLLAPSED_KEY, String(next))
+  }
+
+  const sidebarContent = (isMobile: boolean) => {
+    const isCollapsed = isMobile ? false : collapsed
+
+    return (
+      <div className="flex flex-col h-full">
+        {/* Site Picker */}
+        <div className="pt-4 pb-2">
+          <SitePicker sites={sites} currentSiteId={siteId} collapsed={isCollapsed} />
+        </div>
+
+        {/* Nav Groups */}
+        <nav className="flex-1 overflow-y-auto px-3 space-y-4">
+          {NAV_GROUPS.map((group) => (
+            <div key={group.label}>
+              {!isCollapsed && (
+                <p className="px-2.5 mb-1 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider">
+                  {group.label}
+                </p>
+              )}
+              <div className="space-y-0.5">
+                {group.items.map((item) => (
+                  <NavItemLink
+                    key={item.label}
+                    item={item}
+                    siteId={siteId}
+                    collapsed={isCollapsed}
+                    onClick={isMobile ? () => onMobileClose() : undefined}
+                  />
+                ))}
+              </div>
+            </div>
+          ))}
+        </nav>
+
+        {/* Bottom: Settings + Collapse toggle */}
+        <div className="border-t border-neutral-200 dark:border-neutral-800 px-3 py-3 space-y-1">
+          {canEdit && (
+            <NavItemLink
+              item={SETTINGS_ITEM}
+              siteId={siteId}
+              collapsed={isCollapsed}
+              onClick={isMobile ? () => onMobileClose() : undefined}
+            />
+          )}
+          {!isMobile && (
+            <button
+              onClick={toggleCollapsed}
+              className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors w-full"
+              title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+            >
+              {collapsed ? (
+                <CollapseRightIcon className="w-[18px] h-[18px] shrink-0 mx-auto" />
+              ) : (
+                <>
+                  <CollapseLeftIcon className="w-[18px] h-[18px] shrink-0" />
+                  <span>Collapse</span>
+                </>
+              )}
+            </button>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      {/* Mobile hamburger trigger — rendered in the header via leftActions */}
+
+      {/* Desktop sidebar */}
+      <aside
+        className={`hidden lg:flex flex-col shrink-0 border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 transition-[width] duration-200 ${
+          collapsed ? 'w-16' : 'w-60'
+        }`}
+      >
+        {sidebarContent(false)}
+      </aside>
+
+      {/* Mobile overlay drawer */}
+      {mobileOpen && (
+        <>
+          <div
+            className="fixed inset-0 z-40 bg-black/30 lg:hidden"
+            onClick={() => onMobileClose()}
+          />
+          <aside className="fixed inset-y-0 left-0 z-50 w-72 bg-white dark:bg-neutral-900 border-r border-neutral-200 dark:border-neutral-800 shadow-xl lg:hidden animate-in slide-in-from-left duration-200">
+            <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-800">
+              <span className="text-sm font-semibold text-neutral-900 dark:text-white">Navigation</span>
+              <button
+                onClick={() => onMobileClose()}
+                className="p-1.5 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors"
+              >
+                <XIcon className="w-5 h-5" />
+              </button>
+            </div>
+            {sidebarContent(true)}
+          </aside>
+        </>
+      )}
+    </>
+  )
+}
+
+export function SidebarMobileToggle({ onClick }: { onClick: () => void }) {
+  return (
+    <button
+      onClick={onClick}
+      className="lg:hidden p-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors"
+      aria-label="Open navigation"
+    >
+      <MenuIcon className="w-5 h-5" />
+    </button>
+  )
+}
diff --git a/lib/sidebar-context.tsx b/lib/sidebar-context.tsx
new file mode 100644
index 0000000..482c3ba
--- /dev/null
+++ b/lib/sidebar-context.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import { createContext, useCallback, useContext, useState } from 'react'
+
+interface SidebarContextValue {
+  mobileOpen: boolean
+  openMobile: () => void
+  closeMobile: () => void
+}
+
+const SidebarContext = createContext<SidebarContextValue>({
+  mobileOpen: false,
+  openMobile: () => {},
+  closeMobile: () => {},
+})
+
+export function SidebarProvider({ children }: { children: React.ReactNode }) {
+  const [mobileOpen, setMobileOpen] = useState(false)
+  const openMobile = useCallback(() => setMobileOpen(true), [])
+  const closeMobile = useCallback(() => setMobileOpen(false), [])
+
+  return (
+    <SidebarContext.Provider value={{ mobileOpen, openMobile, closeMobile }}>
+      {children}
+    </SidebarContext.Provider>
+  )
+}
+
+export function useSidebar() {
+  return useContext(SidebarContext)
+}
diff --git a/package-lock.json b/package-lock.json
index c4243a9..2385d58 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "pulse-frontend",
       "version": "0.15.0-alpha",
       "dependencies": {
-        "@ciphera-net/ui": "^0.2.8",
+        "@ciphera-net/ui": "^0.2.10",
         "@ducanh2912/next-pwa": "^10.2.9",
         "@phosphor-icons/react": "^2.1.10",
         "@simplewebauthn/browser": "^13.2.2",
@@ -1668,9 +1668,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.2.8",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.2.8/3a78342207ee2351625b9469ec6030033df183cc",
-      "integrity": "sha512-I6B7fE2YXjJaipmcVS60q2pzhsy/NKM4sfvHIv4awi6mcrXjGag8FznW0sI1SbsplFWpoT5iSMtWIi/lZdFhbA==",
+      "version": "0.2.10",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.2.10/aeae8c3cb25cc9b5193bfba47ce2e444ac82f1d7",
+      "integrity": "sha512-yWHitk43epGjtwUxGVrKwGYZb+VtJhauy7fgmqYfDC8tq33eVlH+yOdi44J/OiWDl8ONSlt8i5Xptz3k79UuXQ==",
       "dependencies": {
         "@phosphor-icons/react": "^2.1.10",
         "class-variance-authority": "^0.7.1",
diff --git a/package.json b/package.json
index bf3e35d..635fb5f 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.2.8",
+    "@ciphera-net/ui": "^0.2.10",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@phosphor-icons/react": "^2.1.10",
     "@simplewebauthn/browser": "^13.2.2",
-- 
2.49.1


From 61ce505ee53309b86928e92d50815c975619f29a Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 15:34:48 +0100
Subject: [PATCH 052/428] fix: pin sidebar to viewport with sticky positioning

Sidebar was scrolling with page content. Fix by adding sticky top-0
h-screen. Widen collapsed width to 68px to prevent icon clipping.
---
 components/dashboard/DashboardShell.tsx | 4 ++--
 components/dashboard/Sidebar.tsx        | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 0488ba5..a2aeb3c 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -13,9 +13,9 @@ export default function DashboardShell({
   const { mobileOpen, closeMobile } = useSidebar()
 
   return (
-    <div className="flex flex-1 min-h-0">
+    <div className="flex flex-1">
       <Sidebar siteId={siteId} mobileOpen={mobileOpen} onMobileClose={closeMobile} />
-      <main className="flex-1 min-w-0 overflow-auto pb-8">
+      <main className="flex-1 min-w-0 pb-8">
         {children}
       </main>
     </div>
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 34e9f9c..ad08a1d 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -319,8 +319,8 @@ export default function Sidebar({
 
       {/* Desktop sidebar */}
       <aside
-        className={`hidden lg:flex flex-col shrink-0 border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 transition-[width] duration-200 ${
-          collapsed ? 'w-16' : 'w-60'
+        className={`hidden lg:flex flex-col shrink-0 sticky top-0 h-screen border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 transition-[width] duration-200 overflow-hidden ${
+          collapsed ? 'w-[68px]' : 'w-60'
         }`}
       >
         {sidebarContent(false)}
-- 
2.49.1


From 7ae5facd0cb19685c47d68f851488b222f72d620 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 15:38:58 +0100
Subject: [PATCH 053/428] =?UTF-8?q?fix:=20proper=20dashboard=20layout=20?=
 =?UTF-8?q?=E2=80=94=20header=20+=20sidebar=20+=20content=20fill=20viewpor?=
 =?UTF-8?q?t?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Use h-screen overflow-hidden on the root container for authenticated
views. Sidebar and content fill the remaining height below the header.
Remove footer from dashboard pages. Content scrolls inside its own
container, sidebar stays fixed in place.
---
 app/layout-content.tsx                  | 109 ++++++++++++------------
 components/dashboard/DashboardShell.tsx |   4 +-
 components/dashboard/Sidebar.tsx        |   2 +-
 3 files changed, 58 insertions(+), 57 deletions(-)

diff --git a/app/layout-content.tsx b/app/layout-content.tsx
index ccf5075..55111d5 100644
--- a/app/layout-content.tsx
+++ b/app/layout-content.tsx
@@ -112,65 +112,66 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
     return <LoadingOverlay logoSrc="/pulse_icon_no_margins.png" title="Pulse" portal={false} />
   }
 
+  const headerElement = (
+    <Header
+      auth={auth}
+      LinkComponent={Link}
+      logoSrc="/pulse_icon_no_margins.png"
+      appName="Pulse"
+      variant={isAuthenticated ? 'static' : 'floating'}
+      orgs={orgs}
+      activeOrgId={auth.user?.org_id}
+      onSwitchOrganization={handleSwitchOrganization}
+      onCreateOrganization={handleCreateOrganization}
+      allowPersonalOrganization={false}
+      showFaq={false}
+      showSecurity={false}
+      showPricing={true}
+      topOffset={!isAuthenticated && showOfflineBar ? '2.5rem' : undefined}
+      rightSideActions={auth.user ? <NotificationCenter /> : null}
+      apps={CIPHERA_APPS}
+      currentAppId="pulse"
+      onOpenSettings={openSettings}
+      leftActions={isAuthenticated ? <MobileSidebarToggle /> : undefined}
+      customNavItems={
+        <>
+          {!auth.user && (
+            <Link
+              href="/features"
+              className="px-4 py-2 text-sm font-medium text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white rounded-lg hover:bg-neutral-100/50 dark:hover:bg-neutral-800/50 transition-all duration-200"
+            >
+              Features
+            </Link>
+          )}
+        </>
+      }
+    />
+  )
+
+  if (isAuthenticated) {
+    // Dashboard layout: header pinned, sidebar + content fill remaining viewport
+    return (
+      <div className="flex flex-col h-screen overflow-hidden">
+        {auth.user && <OfflineBanner isOnline={isOnline} />}
+        <div className="shrink-0">{headerElement}</div>
+        {children}
+        <SettingsModalWrapper />
+      </div>
+    )
+  }
+
+  // Public/marketing layout: floating header, scrollable page, footer
   return (
     <div className="flex flex-col min-h-screen">
-      {auth.user && <OfflineBanner isOnline={isOnline} />}
-      <Header
-        auth={auth}
+      {headerElement}
+      <main className="flex-1 pb-8 pt-24">
+        {children}
+      </main>
+      <Footer
         LinkComponent={Link}
-        logoSrc="/pulse_icon_no_margins.png"
         appName="Pulse"
-        variant={isAuthenticated ? 'static' : 'floating'}
-        orgs={orgs}
-        activeOrgId={auth.user?.org_id}
-        onSwitchOrganization={handleSwitchOrganization}
-        onCreateOrganization={handleCreateOrganization}
-        allowPersonalOrganization={false}
-        showFaq={false}
-        showSecurity={false}
-        showPricing={true}
-        topOffset={!isAuthenticated && showOfflineBar ? '2.5rem' : undefined}
-        rightSideActions={auth.user ? <NotificationCenter /> : null}
-        apps={CIPHERA_APPS}
-        currentAppId="pulse"
-        onOpenSettings={openSettings}
-        leftActions={isAuthenticated ? <MobileSidebarToggle /> : undefined}
-        customNavItems={
-          <>
-            {!auth.user && (
-              <Link
-                href="/features"
-                className="px-4 py-2 text-sm font-medium text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white rounded-lg hover:bg-neutral-100/50 dark:hover:bg-neutral-800/50 transition-all duration-200"
-              >
-                Features
-              </Link>
-            )}
-          </>
-        }
+        isAuthenticated={false}
       />
-      {isAuthenticated ? (
-        // Authenticated: sidebar layout — children include DashboardShell
-        <>{children}</>
-      ) : (
-        // Public: standard content with footer
-        <>
-          <main className="flex-1 pb-8 pt-24">
-            {children}
-          </main>
-          <Footer
-            LinkComponent={Link}
-            appName="Pulse"
-            isAuthenticated={false}
-          />
-        </>
-      )}
-      {isAuthenticated && (
-        <Footer
-          LinkComponent={Link}
-          appName="Pulse"
-          isAuthenticated={true}
-        />
-      )}
       <SettingsModalWrapper />
     </div>
   )
diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index a2aeb3c..bd83581 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -13,9 +13,9 @@ export default function DashboardShell({
   const { mobileOpen, closeMobile } = useSidebar()
 
   return (
-    <div className="flex flex-1">
+    <div className="flex flex-1 overflow-hidden">
       <Sidebar siteId={siteId} mobileOpen={mobileOpen} onMobileClose={closeMobile} />
-      <main className="flex-1 min-w-0 pb-8">
+      <main className="flex-1 min-w-0 overflow-y-auto">
         {children}
       </main>
     </div>
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index ad08a1d..b47884d 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -319,7 +319,7 @@ export default function Sidebar({
 
       {/* Desktop sidebar */}
       <aside
-        className={`hidden lg:flex flex-col shrink-0 sticky top-0 h-screen border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 transition-[width] duration-200 overflow-hidden ${
+        className={`hidden lg:flex flex-col shrink-0 border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 transition-[width] duration-200 overflow-hidden ${
           collapsed ? 'w-[68px]' : 'w-60'
         }`}
       >
-- 
2.49.1


From 1d25368292920a730ba8ebc2b1eb4312b1230101 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 15:58:06 +0100
Subject: [PATCH 054/428] feat: Dokploy-style sidebar layout for site pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sidebar takes full viewport height with Pulse logo at top. No Header
on site pages — UtilityBar in content area provides theme toggle, app
launcher, notifications, and user menu. Non-site authenticated pages
keep static Header. No footer on dashboard pages.
---
 app/layout-content.tsx                  | 132 ++++++++++++------------
 components/dashboard/DashboardShell.tsx |  12 ++-
 components/dashboard/Sidebar.tsx        |  19 +++-
 components/dashboard/UtilityBar.tsx     | 102 ++++++++++++++++++
 4 files changed, 193 insertions(+), 72 deletions(-)
 create mode 100644 components/dashboard/UtilityBar.tsx

diff --git a/app/layout-content.tsx b/app/layout-content.tsx
index 55111d5..47d8698 100644
--- a/app/layout-content.tsx
+++ b/app/layout-content.tsx
@@ -8,6 +8,7 @@ import { useAuth } from '@/lib/auth/context'
 import { useOnlineStatus } from '@/lib/hooks/useOnlineStatus'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
+import { usePathname } from 'next/navigation'
 import { logger } from '@/lib/utils/logger'
 import { getUserOrganizations, switchContext, type OrganizationMember } from '@/lib/api/organization'
 import { setSessionAction } from '@/app/actions/auth'
@@ -15,11 +16,10 @@ import { LoadingOverlay } from '@ciphera-net/ui'
 import { useRouter } from 'next/navigation'
 import { SettingsModalProvider, useSettingsModal } from '@/lib/settings-modal-context'
 import SettingsModalWrapper from '@/components/settings/SettingsModalWrapper'
-import { SidebarProvider, useSidebar } from '@/lib/sidebar-context'
+import { SidebarProvider } from '@/lib/sidebar-context'
 
 const ORG_SWITCH_KEY = 'pulse_switching_org'
 
-// * Available Ciphera apps for the app switcher
 const CIPHERA_APPS: CipheraApp[] = [
   {
     id: 'pulse',
@@ -27,7 +27,7 @@ const CIPHERA_APPS: CipheraApp[] = [
     description: 'Your current app — Privacy-first analytics',
     icon: 'https://ciphera.net/pulse_icon_no_margins.png',
     href: 'https://pulse.ciphera.net',
-    isAvailable: false, // * Current app
+    isAvailable: false,
   },
   {
     id: 'drop',
@@ -47,22 +47,10 @@ const CIPHERA_APPS: CipheraApp[] = [
   },
 ]
 
-function MobileSidebarToggle() {
-  const { openMobile } = useSidebar()
-  return (
-    <button
-      onClick={openMobile}
-      className="lg:hidden p-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors"
-      aria-label="Open navigation"
-    >
-      <MenuIcon className="w-5 h-5" />
-    </button>
-  )
-}
-
 function LayoutInner({ children }: { children: React.ReactNode }) {
   const auth = useAuth()
   const router = useRouter()
+  const pathname = usePathname()
   const isOnline = useOnlineStatus()
   const { openSettings } = useSettingsModal()
   const [orgs, setOrgs] = useState<OrganizationMember[]>([])
@@ -71,7 +59,6 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
     return sessionStorage.getItem(ORG_SWITCH_KEY) === 'true'
   })
 
-  // * Clear the switching flag once the page has settled after reload
   useEffect(() => {
     if (isSwitchingOrg) {
       sessionStorage.removeItem(ORG_SWITCH_KEY)
@@ -80,7 +67,6 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
     }
   }, [isSwitchingOrg])
 
-  // * Fetch organizations for the header organization switcher
   useEffect(() => {
     if (auth.user) {
       getUserOrganizations()
@@ -90,7 +76,7 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
   }, [auth.user])
 
   const handleSwitchOrganization = async (orgId: string | null) => {
-    if (!orgId) return // Pulse doesn't support personal organization context
+    if (!orgId) return
     try {
       const { access_token } = await switchContext(orgId)
       await setSessionAction(access_token)
@@ -101,69 +87,83 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
     }
   }
 
-  const handleCreateOrganization = () => {
-    router.push('/onboarding')
-  }
-
   const isAuthenticated = !!auth.user
   const showOfflineBar = Boolean(auth.user && !isOnline)
+  // Site pages use DashboardShell with full sidebar — no Header needed
+  const isSitePage = pathname.startsWith('/sites/') && pathname !== '/sites/new'
 
   if (isSwitchingOrg) {
     return <LoadingOverlay logoSrc="/pulse_icon_no_margins.png" title="Pulse" portal={false} />
   }
 
-  const headerElement = (
-    <Header
-      auth={auth}
-      LinkComponent={Link}
-      logoSrc="/pulse_icon_no_margins.png"
-      appName="Pulse"
-      variant={isAuthenticated ? 'static' : 'floating'}
-      orgs={orgs}
-      activeOrgId={auth.user?.org_id}
-      onSwitchOrganization={handleSwitchOrganization}
-      onCreateOrganization={handleCreateOrganization}
-      allowPersonalOrganization={false}
-      showFaq={false}
-      showSecurity={false}
-      showPricing={true}
-      topOffset={!isAuthenticated && showOfflineBar ? '2.5rem' : undefined}
-      rightSideActions={auth.user ? <NotificationCenter /> : null}
-      apps={CIPHERA_APPS}
-      currentAppId="pulse"
-      onOpenSettings={openSettings}
-      leftActions={isAuthenticated ? <MobileSidebarToggle /> : undefined}
-      customNavItems={
-        <>
-          {!auth.user && (
-            <Link
-              href="/features"
-              className="px-4 py-2 text-sm font-medium text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white rounded-lg hover:bg-neutral-100/50 dark:hover:bg-neutral-800/50 transition-all duration-200"
-            >
-              Features
-            </Link>
-          )}
-        </>
-      }
-    />
-  )
-
-  if (isAuthenticated) {
-    // Dashboard layout: header pinned, sidebar + content fill remaining viewport
+  // Authenticated site pages: full Dokploy-style layout (sidebar + utility bar)
+  // DashboardShell inside children handles everything
+  if (isAuthenticated && isSitePage) {
     return (
-      <div className="flex flex-col h-screen overflow-hidden">
-        {auth.user && <OfflineBanner isOnline={isOnline} />}
-        <div className="shrink-0">{headerElement}</div>
+      <>
+        {showOfflineBar && <OfflineBanner isOnline={isOnline} />}
         {children}
         <SettingsModalWrapper />
+      </>
+    )
+  }
+
+  // Authenticated non-site pages (sites list, onboarding, etc.): static header
+  if (isAuthenticated) {
+    return (
+      <div className="flex flex-col min-h-screen">
+        {showOfflineBar && <OfflineBanner isOnline={isOnline} />}
+        <Header
+          auth={auth}
+          LinkComponent={Link}
+          logoSrc="/pulse_icon_no_margins.png"
+          appName="Pulse"
+          variant="static"
+          orgs={orgs}
+          activeOrgId={auth.user?.org_id}
+          onSwitchOrganization={handleSwitchOrganization}
+          onCreateOrganization={() => router.push('/onboarding')}
+          allowPersonalOrganization={false}
+          showFaq={false}
+          showSecurity={false}
+          showPricing={false}
+          rightSideActions={<NotificationCenter />}
+          apps={CIPHERA_APPS}
+          currentAppId="pulse"
+          onOpenSettings={openSettings}
+        />
+        <main className="flex-1 pb-8">
+          {children}
+        </main>
+        <SettingsModalWrapper />
       </div>
     )
   }
 
-  // Public/marketing layout: floating header, scrollable page, footer
+  // Public/marketing: floating header + footer
   return (
     <div className="flex flex-col min-h-screen">
-      {headerElement}
+      <Header
+        auth={auth}
+        LinkComponent={Link}
+        logoSrc="/pulse_icon_no_margins.png"
+        appName="Pulse"
+        variant="floating"
+        showFaq={false}
+        showSecurity={false}
+        showPricing={true}
+        topOffset={showOfflineBar ? '2.5rem' : undefined}
+        apps={CIPHERA_APPS}
+        currentAppId="pulse"
+        customNavItems={
+          <Link
+            href="/features"
+            className="px-4 py-2 text-sm font-medium text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white rounded-lg hover:bg-neutral-100/50 dark:hover:bg-neutral-800/50 transition-all duration-200"
+          >
+            Features
+          </Link>
+        }
+      />
       <main className="flex-1 pb-8 pt-24">
         {children}
       </main>
diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index bd83581..8b3d6cb 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import Sidebar from './Sidebar'
+import UtilityBar from './UtilityBar'
 import { useSidebar } from '@/lib/sidebar-context'
 
 export default function DashboardShell({
@@ -13,11 +14,14 @@ export default function DashboardShell({
   const { mobileOpen, closeMobile } = useSidebar()
 
   return (
-    <div className="flex flex-1 overflow-hidden">
+    <div className="flex h-screen overflow-hidden">
       <Sidebar siteId={siteId} mobileOpen={mobileOpen} onMobileClose={closeMobile} />
-      <main className="flex-1 min-w-0 overflow-y-auto">
-        {children}
-      </main>
+      <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
+        <UtilityBar />
+        <main className="flex-1 overflow-y-auto">
+          {children}
+        </main>
+      </div>
     </div>
   )
 }
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index b47884d..b478151 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -253,8 +253,23 @@ export default function Sidebar({
 
     return (
       <div className="flex flex-col h-full">
+        {/* Logo */}
+        <Link
+          href="/"
+          className={`flex items-center gap-2.5 px-4 py-4 border-b border-neutral-200 dark:border-neutral-800 shrink-0 ${isCollapsed ? 'justify-center' : ''}`}
+        >
+          <img
+            src="/pulse_icon_no_margins.png"
+            alt="Pulse"
+            className="w-8 h-8 shrink-0"
+          />
+          {!isCollapsed && (
+            <span className="text-lg font-bold text-neutral-900 dark:text-white tracking-tight">Pulse</span>
+          )}
+        </Link>
+
         {/* Site Picker */}
-        <div className="pt-4 pb-2">
+        <div className="pt-3 pb-2">
           <SitePicker sites={sites} currentSiteId={siteId} collapsed={isCollapsed} />
         </div>
 
@@ -319,7 +334,7 @@ export default function Sidebar({
 
       {/* Desktop sidebar */}
       <aside
-        className={`hidden lg:flex flex-col shrink-0 border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 transition-[width] duration-200 overflow-hidden ${
+        className={`hidden lg:flex flex-col shrink-0 border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 transition-[width] duration-200 ${
           collapsed ? 'w-[68px]' : 'w-60'
         }`}
       >
diff --git a/components/dashboard/UtilityBar.tsx b/components/dashboard/UtilityBar.tsx
new file mode 100644
index 0000000..6024512
--- /dev/null
+++ b/components/dashboard/UtilityBar.tsx
@@ -0,0 +1,102 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+import { ThemeToggle, AppLauncher, UserMenu, type CipheraApp, MenuIcon } from '@ciphera-net/ui'
+import { useAuth } from '@/lib/auth/context'
+import { useSettingsModal } from '@/lib/settings-modal-context'
+import { getUserOrganizations, switchContext, type OrganizationMember } from '@/lib/api/organization'
+import { setSessionAction } from '@/app/actions/auth'
+import { logger } from '@/lib/utils/logger'
+import { useSidebar } from '@/lib/sidebar-context'
+import NotificationCenter from '@/components/notifications/NotificationCenter'
+
+const CIPHERA_APPS: CipheraApp[] = [
+  {
+    id: 'pulse',
+    name: 'Pulse',
+    description: 'Your current app — Privacy-first analytics',
+    icon: 'https://ciphera.net/pulse_icon_no_margins.png',
+    href: 'https://pulse.ciphera.net',
+    isAvailable: false,
+  },
+  {
+    id: 'drop',
+    name: 'Drop',
+    description: 'Secure file sharing',
+    icon: 'https://ciphera.net/drop_icon_no_margins.png',
+    href: 'https://drop.ciphera.net',
+    isAvailable: true,
+  },
+  {
+    id: 'auth',
+    name: 'Auth',
+    description: 'Your Ciphera account settings',
+    icon: 'https://ciphera.net/auth_icon_no_margins.png',
+    href: 'https://auth.ciphera.net',
+    isAvailable: true,
+  },
+]
+
+export default function UtilityBar() {
+  const auth = useAuth()
+  const router = useRouter()
+  const { openSettings } = useSettingsModal()
+  const { openMobile } = useSidebar()
+  const [orgs, setOrgs] = useState<OrganizationMember[]>([])
+
+  useEffect(() => {
+    if (auth.user) {
+      getUserOrganizations()
+        .then((organizations) => setOrgs(Array.isArray(organizations) ? organizations : []))
+        .catch(err => logger.error('Failed to fetch orgs for utility bar', err))
+    }
+  }, [auth.user])
+
+  const handleSwitchOrganization = async (orgId: string | null) => {
+    if (!orgId) return
+    try {
+      const { access_token } = await switchContext(orgId)
+      await setSessionAction(access_token)
+      sessionStorage.setItem('pulse_switching_org', 'true')
+      window.location.reload()
+    } catch (err) {
+      logger.error('Failed to switch organization', err)
+    }
+  }
+
+  return (
+    <div className="shrink-0 flex items-center justify-between border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 sm:px-6 py-2">
+      {/* Left: mobile sidebar toggle */}
+      <button
+        onClick={openMobile}
+        className="lg:hidden p-2 -ml-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors"
+        aria-label="Open navigation"
+      >
+        <MenuIcon className="w-5 h-5" />
+      </button>
+      <div className="hidden lg:block" />
+
+      {/* Right: actions */}
+      <div className="flex items-center gap-3">
+        <ThemeToggle />
+        <AppLauncher
+          apps={CIPHERA_APPS}
+          currentAppId="pulse"
+        />
+        <NotificationCenter />
+        <UserMenu
+          auth={auth}
+          LinkComponent={Link}
+          orgs={orgs}
+          activeOrgId={auth.user?.org_id}
+          onSwitchOrganization={handleSwitchOrganization}
+          onCreateOrganization={() => router.push('/onboarding')}
+          allowPersonalOrganization={false}
+          onOpenSettings={openSettings}
+        />
+      </div>
+    </div>
+  )
+}
-- 
2.49.1


From d00d2e55925553efb1bcafad89e682bd041e4486 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 16:04:50 +0100
Subject: [PATCH 055/428] =?UTF-8?q?fix:=20sidebar=20polish=20=E2=80=94=20l?=
 =?UTF-8?q?ogo,=20scrollbar,=20utility=20bar=20height,=20icon=20flash?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix stretched logo with object-contain
- Remove border below logo
- Add overflow-hidden to prevent scrollbar flash during transition
- Match utility bar height to old header (py-3.5)
- Remove transition-colors from active nav items to prevent white flash
---
 components/dashboard/Sidebar.tsx    | 10 +++++-----
 components/dashboard/UtilityBar.tsx |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index b478151..b1058e0 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -199,12 +199,12 @@ function NavItemLink({
       href={href}
       onClick={onClick}
       title={collapsed ? item.label : undefined}
-      className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium transition-colors ${
+      className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium ${
         collapsed ? 'justify-center' : ''
       } ${
         isActive
           ? 'bg-brand-orange/10 text-brand-orange'
-          : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800'
+          : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors'
       }`}
     >
       <item.icon className="w-[18px] h-[18px] shrink-0" weight={isActive ? 'fill' : 'regular'} />
@@ -252,16 +252,16 @@ export default function Sidebar({
     const isCollapsed = isMobile ? false : collapsed
 
     return (
-      <div className="flex flex-col h-full">
+      <div className="flex flex-col h-full overflow-hidden">
         {/* Logo */}
         <Link
           href="/"
-          className={`flex items-center gap-2.5 px-4 py-4 border-b border-neutral-200 dark:border-neutral-800 shrink-0 ${isCollapsed ? 'justify-center' : ''}`}
+          className={`flex items-center gap-2.5 px-4 py-4 shrink-0 ${isCollapsed ? 'justify-center' : ''}`}
         >
           <img
             src="/pulse_icon_no_margins.png"
             alt="Pulse"
-            className="w-8 h-8 shrink-0"
+            className="w-8 h-8 shrink-0 object-contain"
           />
           {!isCollapsed && (
             <span className="text-lg font-bold text-neutral-900 dark:text-white tracking-tight">Pulse</span>
diff --git a/components/dashboard/UtilityBar.tsx b/components/dashboard/UtilityBar.tsx
index 6024512..7c9f01e 100644
--- a/components/dashboard/UtilityBar.tsx
+++ b/components/dashboard/UtilityBar.tsx
@@ -67,7 +67,7 @@ export default function UtilityBar() {
   }
 
   return (
-    <div className="shrink-0 flex items-center justify-between border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 sm:px-6 py-2">
+    <div className="shrink-0 flex items-center justify-between border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 sm:px-8 py-3.5">
       {/* Left: mobile sidebar toggle */}
       <button
         onClick={openMobile}
-- 
2.49.1


From 66a70f676f134f3980894f9a5469dc10c49e68f2 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 16:12:20 +0100
Subject: [PATCH 056/428] fix: full-width top bar with logo, sidebar below

Restructure layout: top bar spans full width (Pulse logo left, user
actions right) with continuous bottom border. Sidebar sits below with
no vertical border collision. Remove logo from sidebar. Remove all
transition-colors from nav items to prevent white flash on click.
---
 components/dashboard/DashboardShell.tsx | 12 +++++----
 components/dashboard/Sidebar.tsx        | 17 +------------
 components/dashboard/UtilityBar.tsx     | 34 ++++++++++++++++++-------
 3 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 8b3d6cb..3914598 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -14,11 +14,13 @@ export default function DashboardShell({
   const { mobileOpen, closeMobile } = useSidebar()
 
   return (
-    <div className="flex h-screen overflow-hidden">
-      <Sidebar siteId={siteId} mobileOpen={mobileOpen} onMobileClose={closeMobile} />
-      <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
-        <UtilityBar />
-        <main className="flex-1 overflow-y-auto">
+    <div className="flex flex-col h-screen overflow-hidden">
+      {/* Top bar: full width — logo left, actions right */}
+      <UtilityBar />
+      {/* Below: sidebar + content */}
+      <div className="flex flex-1 overflow-hidden">
+        <Sidebar siteId={siteId} mobileOpen={mobileOpen} onMobileClose={closeMobile} />
+        <main className="flex-1 min-w-0 overflow-y-auto">
           {children}
         </main>
       </div>
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index b1058e0..c4cd017 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -204,7 +204,7 @@ function NavItemLink({
       } ${
         isActive
           ? 'bg-brand-orange/10 text-brand-orange'
-          : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors'
+          : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800'
       }`}
     >
       <item.icon className="w-[18px] h-[18px] shrink-0" weight={isActive ? 'fill' : 'regular'} />
@@ -253,21 +253,6 @@ export default function Sidebar({
 
     return (
       <div className="flex flex-col h-full overflow-hidden">
-        {/* Logo */}
-        <Link
-          href="/"
-          className={`flex items-center gap-2.5 px-4 py-4 shrink-0 ${isCollapsed ? 'justify-center' : ''}`}
-        >
-          <img
-            src="/pulse_icon_no_margins.png"
-            alt="Pulse"
-            className="w-8 h-8 shrink-0 object-contain"
-          />
-          {!isCollapsed && (
-            <span className="text-lg font-bold text-neutral-900 dark:text-white tracking-tight">Pulse</span>
-          )}
-        </Link>
-
         {/* Site Picker */}
         <div className="pt-3 pb-2">
           <SitePicker sites={sites} currentSiteId={siteId} collapsed={isCollapsed} />
diff --git a/components/dashboard/UtilityBar.tsx b/components/dashboard/UtilityBar.tsx
index 7c9f01e..36359f9 100644
--- a/components/dashboard/UtilityBar.tsx
+++ b/components/dashboard/UtilityBar.tsx
@@ -68,15 +68,31 @@ export default function UtilityBar() {
 
   return (
     <div className="shrink-0 flex items-center justify-between border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 sm:px-8 py-3.5">
-      {/* Left: mobile sidebar toggle */}
-      <button
-        onClick={openMobile}
-        className="lg:hidden p-2 -ml-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors"
-        aria-label="Open navigation"
-      >
-        <MenuIcon className="w-5 h-5" />
-      </button>
-      <div className="hidden lg:block" />
+      {/* Left: Pulse logo + mobile toggle */}
+      <div className="flex items-center gap-3">
+        <button
+          onClick={openMobile}
+          className="lg:hidden p-2 -ml-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors"
+          aria-label="Open navigation"
+        >
+          <MenuIcon className="w-5 h-5" />
+        </button>
+        <Link
+          href="/"
+          className="flex items-center gap-3 group relative"
+        >
+          <div className="relative w-10 h-10 sm:w-11 sm:h-11 flex items-center justify-center shrink-0">
+            <img
+              src="/pulse_icon_no_margins.png"
+              alt="Pulse Logo"
+              className="w-full h-full object-contain group-hover:scale-105 transition-transform duration-300 transform-gpu will-change-transform [backface-visibility:hidden]"
+            />
+          </div>
+          <span className="text-xl sm:text-2xl font-bold text-neutral-900 dark:text-white tracking-tight group-hover:text-brand-orange transition-colors duration-300">
+            Pulse
+          </span>
+        </Link>
+      </div>
 
       {/* Right: actions */}
       <div className="flex items-center gap-3">
-- 
2.49.1


From db5cd4cbcb6f3e96cf6a70243185708bf80ee18c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 16:20:32 +0100
Subject: [PATCH 057/428] feat: replace sidebar with 21st.dev hover-to-expand
 component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Use framer-motion animated sidebar from 21st.dev — collapses to icons,
expands on hover. Phosphor icons instead of lucide. Remove old manual
collapse/expand and sidebar-context. Top bar has Pulse logo + user
actions, sidebar below with site picker and nav groups.
---
 app/layout-content.tsx                  |   7 +-
 components/dashboard/DashboardShell.tsx |   9 +-
 components/dashboard/Sidebar.tsx        | 298 +++++++++---------------
 components/dashboard/UtilityBar.tsx     |  13 +-
 components/ui/sidebar.tsx               | 191 +++++++++++++++
 package-lock.json                       |  18 +-
 package.json                            |   2 +
 7 files changed, 320 insertions(+), 218 deletions(-)
 create mode 100644 components/ui/sidebar.tsx

diff --git a/app/layout-content.tsx b/app/layout-content.tsx
index 47d8698..b40ab9b 100644
--- a/app/layout-content.tsx
+++ b/app/layout-content.tsx
@@ -2,7 +2,7 @@
 
 import { OfflineBanner } from '@/components/OfflineBanner'
 import { Footer } from '@/components/Footer'
-import { Header, type CipheraApp, MenuIcon } from '@ciphera-net/ui'
+import { Header, type CipheraApp } from '@ciphera-net/ui'
 import NotificationCenter from '@/components/notifications/NotificationCenter'
 import { useAuth } from '@/lib/auth/context'
 import { useOnlineStatus } from '@/lib/hooks/useOnlineStatus'
@@ -16,7 +16,6 @@ import { LoadingOverlay } from '@ciphera-net/ui'
 import { useRouter } from 'next/navigation'
 import { SettingsModalProvider, useSettingsModal } from '@/lib/settings-modal-context'
 import SettingsModalWrapper from '@/components/settings/SettingsModalWrapper'
-import { SidebarProvider } from '@/lib/sidebar-context'
 
 const ORG_SWITCH_KEY = 'pulse_switching_org'
 
@@ -180,9 +179,7 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
 export default function LayoutContent({ children }: { children: React.ReactNode }) {
   return (
     <SettingsModalProvider>
-      <SidebarProvider>
-        <LayoutInner>{children}</LayoutInner>
-      </SidebarProvider>
+      <LayoutInner>{children}</LayoutInner>
     </SettingsModalProvider>
   )
 }
diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 3914598..a50b048 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -1,8 +1,7 @@
 'use client'
 
-import Sidebar from './Sidebar'
+import PulseSidebar from './Sidebar'
 import UtilityBar from './UtilityBar'
-import { useSidebar } from '@/lib/sidebar-context'
 
 export default function DashboardShell({
   siteId,
@@ -11,15 +10,11 @@ export default function DashboardShell({
   siteId: string
   children: React.ReactNode
 }) {
-  const { mobileOpen, closeMobile } = useSidebar()
-
   return (
     <div className="flex flex-col h-screen overflow-hidden">
-      {/* Top bar: full width — logo left, actions right */}
       <UtilityBar />
-      {/* Below: sidebar + content */}
       <div className="flex flex-1 overflow-hidden">
-        <Sidebar siteId={siteId} mobileOpen={mobileOpen} onMobileClose={closeMobile} />
+        <PulseSidebar siteId={siteId} />
         <main className="flex-1 min-w-0 overflow-y-auto">
           {children}
         </main>
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index c4cd017..cf6bed2 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -3,8 +3,15 @@
 import { useState, useEffect, useRef } from 'react'
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
+import { motion } from 'framer-motion'
 import { listSites, type Site } from '@/lib/api/sites'
 import { useAuth } from '@/lib/auth/context'
+import {
+  Sidebar as SidebarPrimitive,
+  SidebarBody,
+  SidebarLink,
+  useSidebar,
+} from '@/components/ui/sidebar'
 import {
   LayoutDashboardIcon,
   PathIcon,
@@ -14,16 +21,10 @@ import {
   CloudUploadIcon,
   HeartbeatIcon,
   SettingsIcon,
-  CollapseLeftIcon,
-  CollapseRightIcon,
   ChevronUpDownIcon,
   PlusIcon,
-  XIcon,
-  MenuIcon,
 } from '@ciphera-net/ui'
 
-const SIDEBAR_COLLAPSED_KEY = 'pulse_sidebar_collapsed'
-
 interface NavItem {
   label: string
   href: (siteId: string) => string
@@ -63,22 +64,15 @@ const SETTINGS_ITEM: NavItem = {
   matchPrefix: true,
 }
 
-function SitePicker({
-  sites,
-  currentSiteId,
-  collapsed,
-}: {
-  sites: Site[]
-  currentSiteId: string
-  collapsed: boolean
-}) {
+function SitePicker({ sites, siteId }: { sites: Site[]; siteId: string }) {
+  const { open: sidebarOpen } = useSidebar()
   const [open, setOpen] = useState(false)
   const [search, setSearch] = useState('')
   const ref = useRef<HTMLDivElement>(null)
   const pathname = usePathname()
   const router = useRouter()
 
-  const currentSite = sites.find((s) => s.id === currentSiteId)
+  const currentSite = sites.find((s) => s.id === siteId)
 
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent) => {
@@ -97,10 +91,9 @@ function SitePicker({
       s.domain.toLowerCase().includes(search.toLowerCase())
   )
 
-  const switchSite = (siteId: string) => {
-    // Preserve current page type
+  const switchSite = (id: string) => {
     const currentPageType = pathname.replace(/^\/sites\/[^/]+/, '')
-    router.push(`/sites/${siteId}${currentPageType}`)
+    router.push(`/sites/${id}${currentPageType}`)
     setOpen(false)
     setSearch('')
   }
@@ -108,18 +101,15 @@ function SitePicker({
   const initial = currentSite?.name?.charAt(0)?.toUpperCase() || '?'
 
   return (
-    <div className="relative px-3 mb-2" ref={ref}>
+    <div className="relative mb-4" ref={ref}>
       <button
         onClick={() => setOpen(!open)}
-        className={`w-full flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors ${
-          collapsed ? 'justify-center' : ''
-        }`}
-        title={collapsed ? currentSite?.name || 'Select site' : undefined}
+        className="w-full flex items-center gap-2.5 rounded-lg px-1 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-white/10 dark:hover:bg-white/5"
       >
         <span className="w-7 h-7 rounded-md bg-brand-orange/10 text-brand-orange flex items-center justify-center text-xs font-bold shrink-0">
           {initial}
         </span>
-        {!collapsed && (
+        {sidebarOpen && (
           <>
             <span className="truncate flex-1 text-left">{currentSite?.name || 'Select site'}</span>
             <ChevronUpDownIcon className="w-4 h-4 text-neutral-400 shrink-0" />
@@ -128,7 +118,7 @@ function SitePicker({
       </button>
 
       {open && (
-        <div className="absolute left-3 right-3 top-full mt-1 z-50 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden min-w-[220px]">
+        <div className="absolute left-0 right-0 top-full mt-1 z-50 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden min-w-[220px]">
           <div className="p-2">
             <input
               type="text"
@@ -144,8 +134,8 @@ function SitePicker({
               <button
                 key={site.id}
                 onClick={() => switchSite(site.id)}
-                className={`w-full flex items-center gap-2.5 px-4 py-2 text-sm transition-colors text-left ${
-                  site.id === currentSiteId
+                className={`w-full flex items-center gap-2.5 px-4 py-2 text-sm text-left ${
+                  site.id === siteId
                     ? 'bg-brand-orange/10 text-brand-orange font-medium'
                     : 'text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800'
                 }`}
@@ -167,7 +157,7 @@ function SitePicker({
             <Link
               href="/sites/new"
               onClick={() => setOpen(false)}
-              className="flex items-center gap-2 px-3 py-1.5 text-sm text-brand-orange hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg transition-colors"
+              className="flex items-center gap-2 px-3 py-1.5 text-sm text-brand-orange hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg"
             >
               <PlusIcon className="w-4 h-4" />
               Add new site
@@ -179,186 +169,110 @@ function SitePicker({
   )
 }
 
-function NavItemLink({
-  item,
-  siteId,
-  collapsed,
-  onClick,
-}: {
-  item: NavItem
-  siteId: string
-  collapsed: boolean
-  onClick?: () => void
-}) {
-  const pathname = usePathname()
-  const href = item.href(siteId)
-  const isActive = item.matchPrefix ? pathname.startsWith(href) : pathname === href
-
-  return (
-    <Link
-      href={href}
-      onClick={onClick}
-      title={collapsed ? item.label : undefined}
-      className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium ${
-        collapsed ? 'justify-center' : ''
-      } ${
-        isActive
-          ? 'bg-brand-orange/10 text-brand-orange'
-          : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800'
-      }`}
-    >
-      <item.icon className="w-[18px] h-[18px] shrink-0" weight={isActive ? 'fill' : 'regular'} />
-      {!collapsed && <span>{item.label}</span>}
-    </Link>
-  )
-}
-
-export default function Sidebar({
-  siteId,
-  mobileOpen,
-  onMobileClose,
-}: {
-  siteId: string
-  mobileOpen: boolean
-  onMobileClose: () => void
-}) {
+function SidebarContent({ siteId }: { siteId: string }) {
   const { user } = useAuth()
-  const canEdit = user?.role === 'owner' || user?.role === 'admin'
-  const [collapsed, setCollapsed] = useState(() => {
-    if (typeof window === 'undefined') return false
-    return localStorage.getItem(SIDEBAR_COLLAPSED_KEY) === 'true'
-  })
-  const [sites, setSites] = useState<Site[]>([])
+  const { open } = useSidebar()
   const pathname = usePathname()
-
-  // Close mobile drawer on navigation
-  useEffect(() => {
-    onMobileClose()
-  }, [pathname, onMobileClose])
+  const canEdit = user?.role === 'owner' || user?.role === 'admin'
+  const [sites, setSites] = useState<Site[]>([])
 
   useEffect(() => {
-    listSites()
-      .then(setSites)
-      .catch(() => {})
+    listSites().then(setSites).catch(() => {})
   }, [])
 
-  const toggleCollapsed = () => {
-    const next = !collapsed
-    setCollapsed(next)
-    localStorage.setItem(SIDEBAR_COLLAPSED_KEY, String(next))
-  }
-
-  const sidebarContent = (isMobile: boolean) => {
-    const isCollapsed = isMobile ? false : collapsed
-
-    return (
-      <div className="flex flex-col h-full overflow-hidden">
-        {/* Site Picker */}
-        <div className="pt-3 pb-2">
-          <SitePicker sites={sites} currentSiteId={siteId} collapsed={isCollapsed} />
-        </div>
-
-        {/* Nav Groups */}
-        <nav className="flex-1 overflow-y-auto px-3 space-y-4">
-          {NAV_GROUPS.map((group) => (
-            <div key={group.label}>
-              {!isCollapsed && (
-                <p className="px-2.5 mb-1 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider">
-                  {group.label}
-                </p>
-              )}
-              <div className="space-y-0.5">
-                {group.items.map((item) => (
-                  <NavItemLink
-                    key={item.label}
-                    item={item}
-                    siteId={siteId}
-                    collapsed={isCollapsed}
-                    onClick={isMobile ? () => onMobileClose() : undefined}
-                  />
-                ))}
-              </div>
-            </div>
-          ))}
-        </nav>
-
-        {/* Bottom: Settings + Collapse toggle */}
-        <div className="border-t border-neutral-200 dark:border-neutral-800 px-3 py-3 space-y-1">
-          {canEdit && (
-            <NavItemLink
-              item={SETTINGS_ITEM}
-              siteId={siteId}
-              collapsed={isCollapsed}
-              onClick={isMobile ? () => onMobileClose() : undefined}
-            />
-          )}
-          {!isMobile && (
-            <button
-              onClick={toggleCollapsed}
-              className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors w-full"
-              title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-            >
-              {collapsed ? (
-                <CollapseRightIcon className="w-[18px] h-[18px] shrink-0 mx-auto" />
-              ) : (
-                <>
-                  <CollapseLeftIcon className="w-[18px] h-[18px] shrink-0" />
-                  <span>Collapse</span>
-                </>
-              )}
-            </button>
-          )}
-        </div>
-      </div>
-    )
+  const isActive = (item: NavItem) => {
+    const href = item.href(siteId)
+    return item.matchPrefix ? pathname.startsWith(href) : pathname === href
   }
 
   return (
     <>
-      {/* Mobile hamburger trigger — rendered in the header via leftActions */}
+      <div className="flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
+        {/* Site Picker */}
+        <SitePicker sites={sites} siteId={siteId} />
 
-      {/* Desktop sidebar */}
-      <aside
-        className={`hidden lg:flex flex-col shrink-0 border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 transition-[width] duration-200 ${
-          collapsed ? 'w-[68px]' : 'w-60'
-        }`}
-      >
-        {sidebarContent(false)}
-      </aside>
-
-      {/* Mobile overlay drawer */}
-      {mobileOpen && (
-        <>
-          <div
-            className="fixed inset-0 z-40 bg-black/30 lg:hidden"
-            onClick={() => onMobileClose()}
-          />
-          <aside className="fixed inset-y-0 left-0 z-50 w-72 bg-white dark:bg-neutral-900 border-r border-neutral-200 dark:border-neutral-800 shadow-xl lg:hidden animate-in slide-in-from-left duration-200">
-            <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-800">
-              <span className="text-sm font-semibold text-neutral-900 dark:text-white">Navigation</span>
-              <button
-                onClick={() => onMobileClose()}
-                className="p-1.5 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors"
+        {/* Nav Groups */}
+        {NAV_GROUPS.map((group) => (
+          <div key={group.label} className="mb-4">
+            {open && (
+              <motion.p
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                className="px-1 mb-1 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider"
               >
-                <XIcon className="w-5 h-5" />
-              </button>
+                {group.label}
+              </motion.p>
+            )}
+            <div className="flex flex-col gap-0.5">
+              {group.items.map((item) => (
+                <SidebarLink
+                  key={item.label}
+                  active={isActive(item)}
+                  link={{
+                    label: item.label,
+                    href: item.href(siteId),
+                    icon: (
+                      <item.icon
+                        className={`h-5 w-5 flex-shrink-0 ${
+                          isActive(item)
+                            ? 'text-brand-orange'
+                            : 'text-neutral-700 dark:text-neutral-200'
+                        }`}
+                        weight={isActive(item) ? 'fill' : 'regular'}
+                      />
+                    ),
+                  }}
+                  className={
+                    isActive(item)
+                      ? 'bg-brand-orange/10 text-brand-orange rounded-lg px-1'
+                      : 'rounded-lg px-1'
+                  }
+                />
+              ))}
             </div>
-            {sidebarContent(true)}
-          </aside>
-        </>
-      )}
+          </div>
+        ))}
+      </div>
+
+      {/* Bottom: Settings */}
+      <div className="border-t border-neutral-700/30 pt-3">
+        {canEdit && (
+          <SidebarLink
+            active={isActive(SETTINGS_ITEM)}
+            link={{
+              label: SETTINGS_ITEM.label,
+              href: SETTINGS_ITEM.href(siteId),
+              icon: (
+                <SETTINGS_ITEM.icon
+                  className={`h-5 w-5 flex-shrink-0 ${
+                    isActive(SETTINGS_ITEM)
+                      ? 'text-brand-orange'
+                      : 'text-neutral-700 dark:text-neutral-200'
+                  }`}
+                  weight={isActive(SETTINGS_ITEM) ? 'fill' : 'regular'}
+                />
+              ),
+            }}
+            className={
+              isActive(SETTINGS_ITEM)
+                ? 'bg-brand-orange/10 text-brand-orange rounded-lg px-1'
+                : 'rounded-lg px-1'
+            }
+          />
+        )}
+      </div>
     </>
   )
 }
 
-export function SidebarMobileToggle({ onClick }: { onClick: () => void }) {
+export default function PulseSidebar({ siteId }: { siteId: string }) {
+  const [open, setOpen] = useState(false)
+
   return (
-    <button
-      onClick={onClick}
-      className="lg:hidden p-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors"
-      aria-label="Open navigation"
-    >
-      <MenuIcon className="w-5 h-5" />
-    </button>
+    <SidebarPrimitive open={open} setOpen={setOpen}>
+      <SidebarBody className="justify-between gap-6 border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
+        <SidebarContent siteId={siteId} />
+      </SidebarBody>
+    </SidebarPrimitive>
   )
 }
diff --git a/components/dashboard/UtilityBar.tsx b/components/dashboard/UtilityBar.tsx
index 36359f9..d304451 100644
--- a/components/dashboard/UtilityBar.tsx
+++ b/components/dashboard/UtilityBar.tsx
@@ -3,13 +3,12 @@
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import Link from 'next/link'
-import { ThemeToggle, AppLauncher, UserMenu, type CipheraApp, MenuIcon } from '@ciphera-net/ui'
+import { ThemeToggle, AppLauncher, UserMenu, type CipheraApp } from '@ciphera-net/ui'
 import { useAuth } from '@/lib/auth/context'
 import { useSettingsModal } from '@/lib/settings-modal-context'
 import { getUserOrganizations, switchContext, type OrganizationMember } from '@/lib/api/organization'
 import { setSessionAction } from '@/app/actions/auth'
 import { logger } from '@/lib/utils/logger'
-import { useSidebar } from '@/lib/sidebar-context'
 import NotificationCenter from '@/components/notifications/NotificationCenter'
 
 const CIPHERA_APPS: CipheraApp[] = [
@@ -43,7 +42,6 @@ export default function UtilityBar() {
   const auth = useAuth()
   const router = useRouter()
   const { openSettings } = useSettingsModal()
-  const { openMobile } = useSidebar()
   const [orgs, setOrgs] = useState<OrganizationMember[]>([])
 
   useEffect(() => {
@@ -68,15 +66,8 @@ export default function UtilityBar() {
 
   return (
     <div className="shrink-0 flex items-center justify-between border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 sm:px-8 py-3.5">
-      {/* Left: Pulse logo + mobile toggle */}
+      {/* Left: Pulse logo */}
       <div className="flex items-center gap-3">
-        <button
-          onClick={openMobile}
-          className="lg:hidden p-2 -ml-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors"
-          aria-label="Open navigation"
-        >
-          <MenuIcon className="w-5 h-5" />
-        </button>
         <Link
           href="/"
           className="flex items-center gap-3 group relative"
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
new file mode 100644
index 0000000..e7ab5dd
--- /dev/null
+++ b/components/ui/sidebar.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import Link, { LinkProps } from "next/link";
+import React, { useState, createContext, useContext } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { List as Menu, X } from "@phosphor-icons/react";
+
+interface Links {
+  label: string;
+  href: string;
+  icon: React.JSX.Element | React.ReactNode;
+}
+
+interface SidebarContextProps {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  animate: boolean;
+}
+
+const SidebarContext = createContext<SidebarContextProps | undefined>(
+  undefined
+);
+
+export const useSidebar = () => {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  }
+  return context;
+};
+
+export const SidebarProvider = ({
+  children,
+  open: openProp,
+  setOpen: setOpenProp,
+  animate = true,
+}: {
+  children: React.ReactNode;
+  open?: boolean;
+  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+  animate?: boolean;
+}) => {
+  const [openState, setOpenState] = useState(false);
+
+  const open = openProp !== undefined ? openProp : openState;
+  const setOpen = setOpenProp !== undefined ? setOpenProp : setOpenState;
+
+  return (
+    <SidebarContext.Provider value={{ open, setOpen, animate }}>
+      {children}
+    </SidebarContext.Provider>
+  );
+};
+
+export const Sidebar = ({
+  children,
+  open,
+  setOpen,
+  animate,
+}: {
+  children: React.ReactNode;
+  open?: boolean;
+  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+  animate?: boolean;
+}) => {
+  return (
+    <SidebarProvider open={open} setOpen={setOpen} animate={animate}>
+      {children}
+    </SidebarProvider>
+  );
+};
+
+export const SidebarBody = (props: React.ComponentProps<typeof motion.div>) => {
+  return (
+    <>
+      <DesktopSidebar {...props} />
+      <MobileSidebar {...(props as React.ComponentProps<"div">)} />
+    </>
+  );
+};
+
+export const DesktopSidebar = ({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof motion.div>) => {
+  const { open, setOpen, animate } = useSidebar();
+  return (
+    <motion.div
+      className={cn(
+        "h-full px-4 py-4 hidden md:flex md:flex-col bg-neutral-100 dark:bg-neutral-800 w-[300px] flex-shrink-0",
+        className
+      )}
+      animate={{
+        width: animate ? (open ? "300px" : "60px") : "300px",
+      }}
+      onMouseEnter={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+      {...props}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+export const MobileSidebar = ({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div">) => {
+  const { open, setOpen } = useSidebar();
+  return (
+    <>
+      <div
+        className={cn(
+          "h-10 px-4 py-4 flex flex-row md:hidden items-center justify-between bg-neutral-100 dark:bg-neutral-800 w-full"
+        )}
+        {...props}
+      >
+        <div className="flex justify-end z-20 w-full">
+          <Menu
+            className="text-neutral-800 dark:text-neutral-200 cursor-pointer"
+            onClick={() => setOpen(!open)}
+          />
+        </div>
+        <AnimatePresence>
+          {open && (
+            <motion.div
+              initial={{ x: "-100%", opacity: 0 }}
+              animate={{ x: 0, opacity: 1 }}
+              exit={{ x: "-100%", opacity: 0 }}
+              transition={{
+                duration: 0.3,
+                ease: "easeInOut",
+              }}
+              className={cn(
+                "fixed h-full w-full inset-0 bg-white dark:bg-neutral-900 p-10 z-[100] flex flex-col justify-between",
+                className
+              )}
+            >
+              <div
+                className="absolute right-10 top-10 z-50 text-neutral-800 dark:text-neutral-200 cursor-pointer"
+                onClick={() => setOpen(!open)}
+              >
+                <X />
+              </div>
+              {children}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </>
+  );
+};
+
+export const SidebarLink = ({
+  link,
+  className,
+  active,
+  ...props
+}: {
+  link: Links;
+  className?: string;
+  active?: boolean;
+  props?: LinkProps;
+}) => {
+  const { open, animate } = useSidebar();
+  return (
+    <Link
+      href={link.href}
+      className={cn(
+        "flex items-center justify-start gap-2 group/sidebar py-2",
+        active && "text-brand-orange",
+        className
+      )}
+      {...props}
+    >
+      {link.icon}
+      <motion.span
+        animate={{
+          display: animate ? (open ? "inline-block" : "none") : "inline-block",
+          opacity: animate ? (open ? 1 : 0) : 1,
+        }}
+        className="text-neutral-700 dark:text-neutral-200 text-sm group-hover/sidebar:translate-x-1 transition duration-150 whitespace-pre inline-block !p-0 !m-0"
+      >
+        {link.label}
+      </motion.span>
+    </Link>
+  );
+};
diff --git a/package-lock.json b/package-lock.json
index 2385d58..778b994 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "@tanstack/react-virtual": "^3.13.21",
         "@types/d3": "^7.4.3",
         "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
         "cobe": "^0.6.5",
         "country-flag-icons": "^1.6.4",
         "d3": "^7.9.0",
@@ -36,6 +37,7 @@
         "sonner": "^2.0.7",
         "svg-dotted-map": "^2.0.1",
         "swr": "^2.3.3",
+        "tailwind-merge": "^3.5.0",
         "xlsx": "^0.18.5"
       },
       "devDependencies": {
@@ -1684,6 +1686,16 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/@ciphera-net/ui/node_modules/tailwind-merge": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.1.tgz",
+      "integrity": "sha512-Oo6tHdpZsGpkKG88HJ8RR1rg/RdnEkQEfMoEk2x1XRI3F1AxeU+ijRXpiVUF4UbLfcxxRGw6TbUINKYdWVsQTQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/@csstools/color-helpers": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.0.2.tgz",
@@ -14352,9 +14364,9 @@
       "license": "MIT"
     },
     "node_modules/tailwind-merge": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.1.tgz",
-      "integrity": "sha512-Oo6tHdpZsGpkKG88HJ8RR1rg/RdnEkQEfMoEk2x1XRI3F1AxeU+ijRXpiVUF4UbLfcxxRGw6TbUINKYdWVsQTQ==",
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.5.0.tgz",
+      "integrity": "sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==",
       "license": "MIT",
       "funding": {
         "type": "github",
diff --git a/package.json b/package.json
index 635fb5f..4b352b5 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@tanstack/react-virtual": "^3.13.21",
     "@types/d3": "^7.4.3",
     "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "cobe": "^0.6.5",
     "country-flag-icons": "^1.6.4",
     "d3": "^7.9.0",
@@ -40,6 +41,7 @@
     "sonner": "^2.0.7",
     "svg-dotted-map": "^2.0.1",
     "swr": "^2.3.3",
+    "tailwind-merge": "^3.5.0",
     "xlsx": "^0.18.5"
   },
   "overrides": {
-- 
2.49.1


From 2474d6558f706c7f779a75b66aad9609dd5b3349 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 16:33:35 +0100
Subject: [PATCH 058/428] feat: Linear-style sidebar with explicit toggle

Rewrite sidebar from scratch: 256px expanded, 56px collapsed via
click toggle + [ keyboard shortcut. Two-phase CSS transitions (labels
fade then width contracts). Contextual ContentHeader replaces
UtilityBar (no logo, just actions). Remove framer-motion sidebar
primitive, hover-to-expand, and sidebar-context.
---
 .../{UtilityBar.tsx => ContentHeader.tsx}     |  39 +-
 components/dashboard/DashboardShell.tsx       |  24 +-
 components/dashboard/Sidebar.tsx              | 373 ++++++++++++------
 components/ui/sidebar.tsx                     | 191 ---------
 lib/sidebar-context.tsx                       |  31 --
 5 files changed, 283 insertions(+), 375 deletions(-)
 rename components/dashboard/{UtilityBar.tsx => ContentHeader.tsx} (70%)
 delete mode 100644 components/ui/sidebar.tsx
 delete mode 100644 lib/sidebar-context.tsx

diff --git a/components/dashboard/UtilityBar.tsx b/components/dashboard/ContentHeader.tsx
similarity index 70%
rename from components/dashboard/UtilityBar.tsx
rename to components/dashboard/ContentHeader.tsx
index d304451..26ba486 100644
--- a/components/dashboard/UtilityBar.tsx
+++ b/components/dashboard/ContentHeader.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import Link from 'next/link'
-import { ThemeToggle, AppLauncher, UserMenu, type CipheraApp } from '@ciphera-net/ui'
+import { ThemeToggle, AppLauncher, UserMenu, type CipheraApp, MenuIcon } from '@ciphera-net/ui'
 import { useAuth } from '@/lib/auth/context'
 import { useSettingsModal } from '@/lib/settings-modal-context'
 import { getUserOrganizations, switchContext, type OrganizationMember } from '@/lib/api/organization'
@@ -38,7 +38,11 @@ const CIPHERA_APPS: CipheraApp[] = [
   },
 ]
 
-export default function UtilityBar() {
+export default function ContentHeader({
+  onMobileMenuOpen,
+}: {
+  onMobileMenuOpen: () => void
+}) {
   const auth = useAuth()
   const router = useRouter()
   const { openSettings } = useSettingsModal()
@@ -48,7 +52,7 @@ export default function UtilityBar() {
     if (auth.user) {
       getUserOrganizations()
         .then((organizations) => setOrgs(Array.isArray(organizations) ? organizations : []))
-        .catch(err => logger.error('Failed to fetch orgs for utility bar', err))
+        .catch(err => logger.error('Failed to fetch orgs', err))
     }
   }, [auth.user])
 
@@ -65,33 +69,22 @@ export default function UtilityBar() {
   }
 
   return (
-    <div className="shrink-0 flex items-center justify-between border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 sm:px-8 py-3.5">
-      {/* Left: Pulse logo */}
+    <div className="shrink-0 flex items-center justify-between border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 sm:px-6 py-3.5">
+      {/* Left: mobile hamburger */}
       <div className="flex items-center gap-3">
-        <Link
-          href="/"
-          className="flex items-center gap-3 group relative"
+        <button
+          onClick={onMobileMenuOpen}
+          className="md:hidden p-2 -ml-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white"
+          aria-label="Open navigation"
         >
-          <div className="relative w-10 h-10 sm:w-11 sm:h-11 flex items-center justify-center shrink-0">
-            <img
-              src="/pulse_icon_no_margins.png"
-              alt="Pulse Logo"
-              className="w-full h-full object-contain group-hover:scale-105 transition-transform duration-300 transform-gpu will-change-transform [backface-visibility:hidden]"
-            />
-          </div>
-          <span className="text-xl sm:text-2xl font-bold text-neutral-900 dark:text-white tracking-tight group-hover:text-brand-orange transition-colors duration-300">
-            Pulse
-          </span>
-        </Link>
+          <MenuIcon className="w-5 h-5" />
+        </button>
       </div>
 
       {/* Right: actions */}
       <div className="flex items-center gap-3">
         <ThemeToggle />
-        <AppLauncher
-          apps={CIPHERA_APPS}
-          currentAppId="pulse"
-        />
+        <AppLauncher apps={CIPHERA_APPS} currentAppId="pulse" />
         <NotificationCenter />
         <UserMenu
           auth={auth}
diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index a50b048..2e099f5 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -1,7 +1,8 @@
 'use client'
 
-import PulseSidebar from './Sidebar'
-import UtilityBar from './UtilityBar'
+import { useState, useCallback } from 'react'
+import Sidebar from './Sidebar'
+import ContentHeader from './ContentHeader'
 
 export default function DashboardShell({
   siteId,
@@ -10,12 +11,21 @@ export default function DashboardShell({
   siteId: string
   children: React.ReactNode
 }) {
+  const [mobileOpen, setMobileOpen] = useState(false)
+  const closeMobile = useCallback(() => setMobileOpen(false), [])
+  const openMobile = useCallback(() => setMobileOpen(true), [])
+
   return (
-    <div className="flex flex-col h-screen overflow-hidden">
-      <UtilityBar />
-      <div className="flex flex-1 overflow-hidden">
-        <PulseSidebar siteId={siteId} />
-        <main className="flex-1 min-w-0 overflow-y-auto">
+    <div className="flex h-screen overflow-hidden">
+      <Sidebar
+        siteId={siteId}
+        mobileOpen={mobileOpen}
+        onMobileClose={closeMobile}
+        onMobileOpen={openMobile}
+      />
+      <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
+        <ContentHeader onMobileMenuOpen={openMobile} />
+        <main className="flex-1 overflow-y-auto">
           {children}
         </main>
       </div>
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index cf6bed2..84acc61 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -1,17 +1,10 @@
 'use client'
 
-import { useState, useEffect, useRef } from 'react'
+import { useState, useEffect, useRef, useCallback } from 'react'
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
-import { motion } from 'framer-motion'
 import { listSites, type Site } from '@/lib/api/sites'
 import { useAuth } from '@/lib/auth/context'
-import {
-  Sidebar as SidebarPrimitive,
-  SidebarBody,
-  SidebarLink,
-  useSidebar,
-} from '@/components/ui/sidebar'
 import {
   LayoutDashboardIcon,
   PathIcon,
@@ -21,14 +14,22 @@ import {
   CloudUploadIcon,
   HeartbeatIcon,
   SettingsIcon,
+  CollapseLeftIcon,
+  CollapseRightIcon,
   ChevronUpDownIcon,
   PlusIcon,
+  XIcon,
+  MenuIcon,
 } from '@ciphera-net/ui'
 
+const SIDEBAR_KEY = 'pulse_sidebar_collapsed'
+
+type IconWeight = 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'
+
 interface NavItem {
   label: string
   href: (siteId: string) => string
-  icon: React.ComponentType<{ className?: string; weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone' }>
+  icon: React.ComponentType<{ className?: string; weight?: IconWeight }>
   matchPrefix?: boolean
 }
 
@@ -64,61 +65,72 @@ const SETTINGS_ITEM: NavItem = {
   matchPrefix: true,
 }
 
-function SitePicker({ sites, siteId }: { sites: Site[]; siteId: string }) {
-  const { open: sidebarOpen } = useSidebar()
+// ─── Site Picker ────────────────────────────────────────────
+
+function SitePicker({
+  sites,
+  siteId,
+  collapsed,
+}: {
+  sites: Site[]
+  siteId: string
+  collapsed: boolean
+}) {
   const [open, setOpen] = useState(false)
   const [search, setSearch] = useState('')
   const ref = useRef<HTMLDivElement>(null)
   const pathname = usePathname()
   const router = useRouter()
-
   const currentSite = sites.find((s) => s.id === siteId)
+  const initial = currentSite?.name?.charAt(0)?.toUpperCase() || '?'
 
   useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
+    const handler = (e: MouseEvent) => {
       if (ref.current && !ref.current.contains(e.target as Node)) {
         setOpen(false)
         setSearch('')
       }
     }
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => document.removeEventListener('mousedown', handleClickOutside)
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
   }, [])
 
+  const switchSite = (id: string) => {
+    router.push(`/sites/${id}${pathname.replace(/^\/sites\/[^/]+/, '')}`)
+    setOpen(false)
+    setSearch('')
+  }
+
   const filtered = sites.filter(
     (s) =>
       s.name.toLowerCase().includes(search.toLowerCase()) ||
       s.domain.toLowerCase().includes(search.toLowerCase())
   )
 
-  const switchSite = (id: string) => {
-    const currentPageType = pathname.replace(/^\/sites\/[^/]+/, '')
-    router.push(`/sites/${id}${currentPageType}`)
-    setOpen(false)
-    setSearch('')
-  }
-
-  const initial = currentSite?.name?.charAt(0)?.toUpperCase() || '?'
-
   return (
-    <div className="relative mb-4" ref={ref}>
+    <div className="relative px-3 mb-4" ref={ref}>
       <button
         onClick={() => setOpen(!open)}
-        className="w-full flex items-center gap-2.5 rounded-lg px-1 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-white/10 dark:hover:bg-white/5"
+        className={`w-full flex items-center gap-2.5 rounded-lg px-2 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 ${
+          collapsed ? 'justify-center' : ''
+        }`}
+        title={collapsed ? currentSite?.name || 'Select site' : undefined}
       >
         <span className="w-7 h-7 rounded-md bg-brand-orange/10 text-brand-orange flex items-center justify-center text-xs font-bold shrink-0">
           {initial}
         </span>
-        {sidebarOpen && (
-          <>
-            <span className="truncate flex-1 text-left">{currentSite?.name || 'Select site'}</span>
-            <ChevronUpDownIcon className="w-4 h-4 text-neutral-400 shrink-0" />
-          </>
-        )}
+        <span
+          className={`flex items-center gap-1 min-w-0 flex-1 overflow-hidden transition-opacity duration-150 ${
+            collapsed ? 'opacity-0 w-0' : 'opacity-100'
+          }`}
+        >
+          <span className="truncate flex-1 text-left">{currentSite?.name || 'Select site'}</span>
+          <ChevronUpDownIcon className="w-4 h-4 text-neutral-400 shrink-0" />
+        </span>
       </button>
 
       {open && (
-        <div className="absolute left-0 right-0 top-full mt-1 z-50 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden min-w-[220px]">
+        <div className="absolute left-3 right-3 top-full mt-1 z-50 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden min-w-[220px]">
           <div className="p-2">
             <input
               type="text"
@@ -169,110 +181,225 @@ function SitePicker({ sites, siteId }: { sites: Site[]; siteId: string }) {
   )
 }
 
-function SidebarContent({ siteId }: { siteId: string }) {
-  const { user } = useAuth()
-  const { open } = useSidebar()
+// ─── Nav Item ───────────────────────────────────────────────
+
+function NavLink({
+  item,
+  siteId,
+  collapsed,
+  onClick,
+}: {
+  item: NavItem
+  siteId: string
+  collapsed: boolean
+  onClick?: () => void
+}) {
   const pathname = usePathname()
+  const href = item.href(siteId)
+  const active = item.matchPrefix ? pathname.startsWith(href) : pathname === href
+
+  return (
+    <Link
+      href={href}
+      onClick={onClick}
+      title={collapsed ? item.label : undefined}
+      className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium ${
+        collapsed ? 'justify-center' : ''
+      } ${
+        active
+          ? 'bg-brand-orange/10 text-brand-orange'
+          : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800'
+      }`}
+    >
+      <item.icon className="w-[18px] h-[18px] shrink-0" weight={active ? 'fill' : 'regular'} />
+      <span
+        className={`whitespace-nowrap overflow-hidden transition-opacity duration-150 ${
+          collapsed ? 'opacity-0 w-0' : 'opacity-100'
+        }`}
+      >
+        {item.label}
+      </span>
+    </Link>
+  )
+}
+
+// ─── Main Sidebar ───────────────────────────────────────────
+
+export default function Sidebar({
+  siteId,
+  mobileOpen,
+  onMobileClose,
+  onMobileOpen,
+}: {
+  siteId: string
+  mobileOpen: boolean
+  onMobileClose: () => void
+  onMobileOpen: () => void
+}) {
+  const { user } = useAuth()
   const canEdit = user?.role === 'owner' || user?.role === 'admin'
+  const pathname = usePathname()
   const [sites, setSites] = useState<Site[]>([])
+  const [collapsed, setCollapsed] = useState(() => {
+    if (typeof window === 'undefined') return false
+    return localStorage.getItem(SIDEBAR_KEY) === 'true'
+  })
 
   useEffect(() => {
     listSites().then(setSites).catch(() => {})
   }, [])
 
-  const isActive = (item: NavItem) => {
-    const href = item.href(siteId)
-    return item.matchPrefix ? pathname.startsWith(href) : pathname === href
+  // Close mobile on navigation
+  useEffect(() => {
+    onMobileClose()
+  }, [pathname, onMobileClose])
+
+  // Keyboard shortcut: [ to toggle
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === '[' && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        const tag = (e.target as HTMLElement)?.tagName
+        if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return
+        e.preventDefault()
+        toggle()
+      }
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [collapsed])
+
+  const toggle = useCallback(() => {
+    setCollapsed((prev) => {
+      const next = !prev
+      localStorage.setItem(SIDEBAR_KEY, String(next))
+      return next
+    })
+  }, [])
+
+  const sidebarContent = (isMobile: boolean) => {
+    const isCollapsed = isMobile ? false : collapsed
+
+    return (
+      <div className="flex flex-col h-full overflow-x-hidden">
+        {/* Logo */}
+        <Link
+          href="/"
+          className={`flex items-center gap-3 px-5 py-5 shrink-0 group ${isCollapsed ? 'justify-center px-0' : ''}`}
+        >
+          <img
+            src="/pulse_icon_no_margins.png"
+            alt="Pulse"
+            className="w-8 h-8 shrink-0 object-contain group-hover:scale-105 transition-transform duration-200"
+          />
+          <span
+            className={`text-lg font-bold text-neutral-900 dark:text-white tracking-tight group-hover:text-brand-orange transition-all duration-150 whitespace-nowrap overflow-hidden ${
+              isCollapsed ? 'opacity-0 w-0' : 'opacity-100'
+            }`}
+          >
+            Pulse
+          </span>
+        </Link>
+
+        {/* Site Picker */}
+        <SitePicker sites={sites} siteId={siteId} collapsed={isCollapsed} />
+
+        {/* Nav Groups */}
+        <nav className="flex-1 overflow-y-auto overflow-x-hidden px-3 space-y-4">
+          {NAV_GROUPS.map((group) => (
+            <div key={group.label}>
+              <div
+                className={`overflow-hidden transition-all duration-150 ${
+                  isCollapsed ? 'h-2' : 'h-auto'
+                }`}
+              >
+                {!isCollapsed && (
+                  <p className="px-2.5 mb-1 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider">
+                    {group.label}
+                  </p>
+                )}
+              </div>
+              <div className="space-y-0.5">
+                {group.items.map((item) => (
+                  <NavLink
+                    key={item.label}
+                    item={item}
+                    siteId={siteId}
+                    collapsed={isCollapsed}
+                    onClick={isMobile ? onMobileClose : undefined}
+                  />
+                ))}
+              </div>
+            </div>
+          ))}
+        </nav>
+
+        {/* Bottom */}
+        <div className="border-t border-neutral-200 dark:border-neutral-800 px-3 py-3 space-y-0.5 shrink-0">
+          {canEdit && (
+            <NavLink
+              item={SETTINGS_ITEM}
+              siteId={siteId}
+              collapsed={isCollapsed}
+              onClick={isMobile ? onMobileClose : undefined}
+            />
+          )}
+          {!isMobile && (
+            <button
+              onClick={toggle}
+              className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 w-full ${
+                isCollapsed ? 'justify-center' : ''
+              }`}
+              title={collapsed ? 'Expand sidebar (press [)' : 'Collapse sidebar (press [)'}
+            >
+              {collapsed ? (
+                <CollapseRightIcon className="w-[18px] h-[18px] shrink-0" />
+              ) : (
+                <>
+                  <CollapseLeftIcon className="w-[18px] h-[18px] shrink-0" />
+                  <span className="whitespace-nowrap overflow-hidden">Collapse</span>
+                </>
+              )}
+            </button>
+          )}
+        </div>
+      </div>
+    )
   }
 
   return (
     <>
-      <div className="flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
-        {/* Site Picker */}
-        <SitePicker sites={sites} siteId={siteId} />
+      {/* Desktop */}
+      <aside
+        className="hidden md:flex flex-col shrink-0 border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 overflow-hidden"
+        style={{
+          width: collapsed ? 56 : 256,
+          transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)',
+        }}
+      >
+        {sidebarContent(false)}
+      </aside>
 
-        {/* Nav Groups */}
-        {NAV_GROUPS.map((group) => (
-          <div key={group.label} className="mb-4">
-            {open && (
-              <motion.p
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                className="px-1 mb-1 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider"
-              >
-                {group.label}
-              </motion.p>
-            )}
-            <div className="flex flex-col gap-0.5">
-              {group.items.map((item) => (
-                <SidebarLink
-                  key={item.label}
-                  active={isActive(item)}
-                  link={{
-                    label: item.label,
-                    href: item.href(siteId),
-                    icon: (
-                      <item.icon
-                        className={`h-5 w-5 flex-shrink-0 ${
-                          isActive(item)
-                            ? 'text-brand-orange'
-                            : 'text-neutral-700 dark:text-neutral-200'
-                        }`}
-                        weight={isActive(item) ? 'fill' : 'regular'}
-                      />
-                    ),
-                  }}
-                  className={
-                    isActive(item)
-                      ? 'bg-brand-orange/10 text-brand-orange rounded-lg px-1'
-                      : 'rounded-lg px-1'
-                  }
-                />
-              ))}
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {/* Bottom: Settings */}
-      <div className="border-t border-neutral-700/30 pt-3">
-        {canEdit && (
-          <SidebarLink
-            active={isActive(SETTINGS_ITEM)}
-            link={{
-              label: SETTINGS_ITEM.label,
-              href: SETTINGS_ITEM.href(siteId),
-              icon: (
-                <SETTINGS_ITEM.icon
-                  className={`h-5 w-5 flex-shrink-0 ${
-                    isActive(SETTINGS_ITEM)
-                      ? 'text-brand-orange'
-                      : 'text-neutral-700 dark:text-neutral-200'
-                  }`}
-                  weight={isActive(SETTINGS_ITEM) ? 'fill' : 'regular'}
-                />
-              ),
-            }}
-            className={
-              isActive(SETTINGS_ITEM)
-                ? 'bg-brand-orange/10 text-brand-orange rounded-lg px-1'
-                : 'rounded-lg px-1'
-            }
+      {/* Mobile overlay */}
+      {mobileOpen && (
+        <>
+          <div
+            className="fixed inset-0 z-40 bg-black/30 md:hidden"
+            onClick={onMobileClose}
           />
-        )}
-      </div>
+          <aside className="fixed inset-y-0 left-0 z-50 w-72 bg-white dark:bg-neutral-900 border-r border-neutral-200 dark:border-neutral-800 shadow-xl md:hidden animate-in slide-in-from-left duration-200">
+            <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-800">
+              <span className="text-sm font-semibold text-neutral-900 dark:text-white">Navigation</span>
+              <button
+                onClick={onMobileClose}
+                className="p-1.5 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300"
+              >
+                <XIcon className="w-5 h-5" />
+              </button>
+            </div>
+            {sidebarContent(true)}
+          </aside>
+        </>
+      )}
     </>
   )
 }
-
-export default function PulseSidebar({ siteId }: { siteId: string }) {
-  const [open, setOpen] = useState(false)
-
-  return (
-    <SidebarPrimitive open={open} setOpen={setOpen}>
-      <SidebarBody className="justify-between gap-6 border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
-        <SidebarContent siteId={siteId} />
-      </SidebarBody>
-    </SidebarPrimitive>
-  )
-}
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
deleted file mode 100644
index e7ab5dd..0000000
--- a/components/ui/sidebar.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-"use client";
-
-import { cn } from "@/lib/utils";
-import Link, { LinkProps } from "next/link";
-import React, { useState, createContext, useContext } from "react";
-import { AnimatePresence, motion } from "framer-motion";
-import { List as Menu, X } from "@phosphor-icons/react";
-
-interface Links {
-  label: string;
-  href: string;
-  icon: React.JSX.Element | React.ReactNode;
-}
-
-interface SidebarContextProps {
-  open: boolean;
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  animate: boolean;
-}
-
-const SidebarContext = createContext<SidebarContextProps | undefined>(
-  undefined
-);
-
-export const useSidebar = () => {
-  const context = useContext(SidebarContext);
-  if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider");
-  }
-  return context;
-};
-
-export const SidebarProvider = ({
-  children,
-  open: openProp,
-  setOpen: setOpenProp,
-  animate = true,
-}: {
-  children: React.ReactNode;
-  open?: boolean;
-  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;
-  animate?: boolean;
-}) => {
-  const [openState, setOpenState] = useState(false);
-
-  const open = openProp !== undefined ? openProp : openState;
-  const setOpen = setOpenProp !== undefined ? setOpenProp : setOpenState;
-
-  return (
-    <SidebarContext.Provider value={{ open, setOpen, animate }}>
-      {children}
-    </SidebarContext.Provider>
-  );
-};
-
-export const Sidebar = ({
-  children,
-  open,
-  setOpen,
-  animate,
-}: {
-  children: React.ReactNode;
-  open?: boolean;
-  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;
-  animate?: boolean;
-}) => {
-  return (
-    <SidebarProvider open={open} setOpen={setOpen} animate={animate}>
-      {children}
-    </SidebarProvider>
-  );
-};
-
-export const SidebarBody = (props: React.ComponentProps<typeof motion.div>) => {
-  return (
-    <>
-      <DesktopSidebar {...props} />
-      <MobileSidebar {...(props as React.ComponentProps<"div">)} />
-    </>
-  );
-};
-
-export const DesktopSidebar = ({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof motion.div>) => {
-  const { open, setOpen, animate } = useSidebar();
-  return (
-    <motion.div
-      className={cn(
-        "h-full px-4 py-4 hidden md:flex md:flex-col bg-neutral-100 dark:bg-neutral-800 w-[300px] flex-shrink-0",
-        className
-      )}
-      animate={{
-        width: animate ? (open ? "300px" : "60px") : "300px",
-      }}
-      onMouseEnter={() => setOpen(true)}
-      onMouseLeave={() => setOpen(false)}
-      {...props}
-    >
-      {children}
-    </motion.div>
-  );
-};
-
-export const MobileSidebar = ({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"div">) => {
-  const { open, setOpen } = useSidebar();
-  return (
-    <>
-      <div
-        className={cn(
-          "h-10 px-4 py-4 flex flex-row md:hidden items-center justify-between bg-neutral-100 dark:bg-neutral-800 w-full"
-        )}
-        {...props}
-      >
-        <div className="flex justify-end z-20 w-full">
-          <Menu
-            className="text-neutral-800 dark:text-neutral-200 cursor-pointer"
-            onClick={() => setOpen(!open)}
-          />
-        </div>
-        <AnimatePresence>
-          {open && (
-            <motion.div
-              initial={{ x: "-100%", opacity: 0 }}
-              animate={{ x: 0, opacity: 1 }}
-              exit={{ x: "-100%", opacity: 0 }}
-              transition={{
-                duration: 0.3,
-                ease: "easeInOut",
-              }}
-              className={cn(
-                "fixed h-full w-full inset-0 bg-white dark:bg-neutral-900 p-10 z-[100] flex flex-col justify-between",
-                className
-              )}
-            >
-              <div
-                className="absolute right-10 top-10 z-50 text-neutral-800 dark:text-neutral-200 cursor-pointer"
-                onClick={() => setOpen(!open)}
-              >
-                <X />
-              </div>
-              {children}
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </div>
-    </>
-  );
-};
-
-export const SidebarLink = ({
-  link,
-  className,
-  active,
-  ...props
-}: {
-  link: Links;
-  className?: string;
-  active?: boolean;
-  props?: LinkProps;
-}) => {
-  const { open, animate } = useSidebar();
-  return (
-    <Link
-      href={link.href}
-      className={cn(
-        "flex items-center justify-start gap-2 group/sidebar py-2",
-        active && "text-brand-orange",
-        className
-      )}
-      {...props}
-    >
-      {link.icon}
-      <motion.span
-        animate={{
-          display: animate ? (open ? "inline-block" : "none") : "inline-block",
-          opacity: animate ? (open ? 1 : 0) : 1,
-        }}
-        className="text-neutral-700 dark:text-neutral-200 text-sm group-hover/sidebar:translate-x-1 transition duration-150 whitespace-pre inline-block !p-0 !m-0"
-      >
-        {link.label}
-      </motion.span>
-    </Link>
-  );
-};
diff --git a/lib/sidebar-context.tsx b/lib/sidebar-context.tsx
deleted file mode 100644
index 482c3ba..0000000
--- a/lib/sidebar-context.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-'use client'
-
-import { createContext, useCallback, useContext, useState } from 'react'
-
-interface SidebarContextValue {
-  mobileOpen: boolean
-  openMobile: () => void
-  closeMobile: () => void
-}
-
-const SidebarContext = createContext<SidebarContextValue>({
-  mobileOpen: false,
-  openMobile: () => {},
-  closeMobile: () => {},
-})
-
-export function SidebarProvider({ children }: { children: React.ReactNode }) {
-  const [mobileOpen, setMobileOpen] = useState(false)
-  const openMobile = useCallback(() => setMobileOpen(true), [])
-  const closeMobile = useCallback(() => setMobileOpen(false), [])
-
-  return (
-    <SidebarContext.Provider value={{ mobileOpen, openMobile, closeMobile }}>
-      {children}
-    </SidebarContext.Provider>
-  )
-}
-
-export function useSidebar() {
-  return useContext(SidebarContext)
-}
-- 
2.49.1


From 5807a5009228262f5f6a36ab215a4b292bb32132 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 16:40:00 +0100
Subject: [PATCH 059/428] fix: center icons in collapsed sidebar, eliminate
 white flash on click
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Icons now use justify-center + px-0 when collapsed so they sit
perfectly centered in the 56px rail. Track pending navigation href
optimistically — clicked item shows orange immediately instead of
flashing through the inactive hover state during route transition.
---
 components/dashboard/Sidebar.tsx | 110 +++++++++++++++++--------------
 1 file changed, 62 insertions(+), 48 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 84acc61..f63f2db 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -19,7 +19,6 @@ import {
   ChevronUpDownIcon,
   PlusIcon,
   XIcon,
-  MenuIcon,
 } from '@ciphera-net/ui'
 
 const SIDEBAR_KEY = 'pulse_sidebar_collapsed'
@@ -108,29 +107,27 @@ function SitePicker({
   )
 
   return (
-    <div className="relative px-3 mb-4" ref={ref}>
+    <div className={`relative mb-4 ${collapsed ? 'px-2' : 'px-3'}`} ref={ref}>
       <button
         onClick={() => setOpen(!open)}
-        className={`w-full flex items-center gap-2.5 rounded-lg px-2 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 ${
-          collapsed ? 'justify-center' : ''
+        className={`w-full flex items-center rounded-lg py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 ${
+          collapsed ? 'justify-center px-0' : 'gap-2.5 px-2'
         }`}
         title={collapsed ? currentSite?.name || 'Select site' : undefined}
       >
         <span className="w-7 h-7 rounded-md bg-brand-orange/10 text-brand-orange flex items-center justify-center text-xs font-bold shrink-0">
           {initial}
         </span>
-        <span
-          className={`flex items-center gap-1 min-w-0 flex-1 overflow-hidden transition-opacity duration-150 ${
-            collapsed ? 'opacity-0 w-0' : 'opacity-100'
-          }`}
-        >
-          <span className="truncate flex-1 text-left">{currentSite?.name || 'Select site'}</span>
-          <ChevronUpDownIcon className="w-4 h-4 text-neutral-400 shrink-0" />
-        </span>
+        {!collapsed && (
+          <>
+            <span className="truncate flex-1 text-left">{currentSite?.name || 'Select site'}</span>
+            <ChevronUpDownIcon className="w-4 h-4 text-neutral-400 shrink-0" />
+          </>
+        )}
       </button>
 
       {open && (
-        <div className="absolute left-3 right-3 top-full mt-1 z-50 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden min-w-[220px]">
+        <div className={`absolute top-full mt-1 z-50 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden min-w-[220px] ${collapsed ? 'left-1 right-auto' : 'left-3 right-3'}`}>
           <div className="p-2">
             <input
               type="text"
@@ -188,23 +185,36 @@ function NavLink({
   siteId,
   collapsed,
   onClick,
+  pendingHref,
+  onNavigate,
 }: {
   item: NavItem
   siteId: string
   collapsed: boolean
   onClick?: () => void
+  pendingHref: string | null
+  onNavigate: (href: string) => void
 }) {
   const pathname = usePathname()
   const href = item.href(siteId)
-  const active = item.matchPrefix ? pathname.startsWith(href) : pathname === href
+
+  // Active if pathname matches OR if this link was just clicked (optimistic)
+  const matchesPathname = item.matchPrefix ? pathname.startsWith(href) : pathname === href
+  const matchesPending = pendingHref !== null && (item.matchPrefix ? pendingHref.startsWith(href) : pendingHref === href)
+  const active = matchesPathname || matchesPending
+
+  const handleClick = () => {
+    onNavigate(href)
+    onClick?.()
+  }
 
   return (
     <Link
       href={href}
-      onClick={onClick}
+      onClick={handleClick}
       title={collapsed ? item.label : undefined}
-      className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium ${
-        collapsed ? 'justify-center' : ''
+      className={`flex items-center rounded-lg py-2 text-sm font-medium ${
+        collapsed ? 'justify-center px-0' : 'gap-2.5 px-2.5'
       } ${
         active
           ? 'bg-brand-orange/10 text-brand-orange'
@@ -212,13 +222,11 @@ function NavLink({
       }`}
     >
       <item.icon className="w-[18px] h-[18px] shrink-0" weight={active ? 'fill' : 'regular'} />
-      <span
-        className={`whitespace-nowrap overflow-hidden transition-opacity duration-150 ${
-          collapsed ? 'opacity-0 w-0' : 'opacity-100'
-        }`}
-      >
-        {item.label}
-      </span>
+      {!collapsed && (
+        <span className="whitespace-nowrap overflow-hidden">
+          {item.label}
+        </span>
+      )}
     </Link>
   )
 }
@@ -240,6 +248,7 @@ export default function Sidebar({
   const canEdit = user?.role === 'owner' || user?.role === 'admin'
   const pathname = usePathname()
   const [sites, setSites] = useState<Site[]>([])
+  const [pendingHref, setPendingHref] = useState<string | null>(null)
   const [collapsed, setCollapsed] = useState(() => {
     if (typeof window === 'undefined') return false
     return localStorage.getItem(SIDEBAR_KEY) === 'true'
@@ -249,8 +258,9 @@ export default function Sidebar({
     listSites().then(setSites).catch(() => {})
   }, [])
 
-  // Close mobile on navigation
+  // Clear pending href once navigation completes
   useEffect(() => {
+    setPendingHref(null)
     onMobileClose()
   }, [pathname, onMobileClose])
 
@@ -276,6 +286,10 @@ export default function Sidebar({
     })
   }, [])
 
+  const handleNavigate = useCallback((href: string) => {
+    setPendingHref(href)
+  }, [])
+
   const sidebarContent = (isMobile: boolean) => {
     const isCollapsed = isMobile ? false : collapsed
 
@@ -284,40 +298,36 @@ export default function Sidebar({
         {/* Logo */}
         <Link
           href="/"
-          className={`flex items-center gap-3 px-5 py-5 shrink-0 group ${isCollapsed ? 'justify-center px-0' : ''}`}
+          className={`flex items-center shrink-0 group py-5 ${
+            isCollapsed ? 'justify-center px-0' : 'gap-3 px-5'
+          }`}
         >
           <img
             src="/pulse_icon_no_margins.png"
             alt="Pulse"
             className="w-8 h-8 shrink-0 object-contain group-hover:scale-105 transition-transform duration-200"
           />
-          <span
-            className={`text-lg font-bold text-neutral-900 dark:text-white tracking-tight group-hover:text-brand-orange transition-all duration-150 whitespace-nowrap overflow-hidden ${
-              isCollapsed ? 'opacity-0 w-0' : 'opacity-100'
-            }`}
-          >
-            Pulse
-          </span>
+          {!isCollapsed && (
+            <span className="text-lg font-bold text-neutral-900 dark:text-white tracking-tight group-hover:text-brand-orange transition-colors duration-150 whitespace-nowrap">
+              Pulse
+            </span>
+          )}
         </Link>
 
         {/* Site Picker */}
         <SitePicker sites={sites} siteId={siteId} collapsed={isCollapsed} />
 
         {/* Nav Groups */}
-        <nav className="flex-1 overflow-y-auto overflow-x-hidden px-3 space-y-4">
+        <nav className={`flex-1 overflow-y-auto overflow-x-hidden space-y-4 ${isCollapsed ? 'px-2' : 'px-3'}`}>
           {NAV_GROUPS.map((group) => (
             <div key={group.label}>
-              <div
-                className={`overflow-hidden transition-all duration-150 ${
-                  isCollapsed ? 'h-2' : 'h-auto'
-                }`}
-              >
-                {!isCollapsed && (
-                  <p className="px-2.5 mb-1 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider">
-                    {group.label}
-                  </p>
-                )}
-              </div>
+              {isCollapsed ? (
+                <div className="h-2" />
+              ) : (
+                <p className="px-2.5 mb-1 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider">
+                  {group.label}
+                </p>
+              )}
               <div className="space-y-0.5">
                 {group.items.map((item) => (
                   <NavLink
@@ -326,6 +336,8 @@ export default function Sidebar({
                     siteId={siteId}
                     collapsed={isCollapsed}
                     onClick={isMobile ? onMobileClose : undefined}
+                    pendingHref={pendingHref}
+                    onNavigate={handleNavigate}
                   />
                 ))}
               </div>
@@ -334,20 +346,22 @@ export default function Sidebar({
         </nav>
 
         {/* Bottom */}
-        <div className="border-t border-neutral-200 dark:border-neutral-800 px-3 py-3 space-y-0.5 shrink-0">
+        <div className={`border-t border-neutral-200 dark:border-neutral-800 py-3 space-y-0.5 shrink-0 ${isCollapsed ? 'px-2' : 'px-3'}`}>
           {canEdit && (
             <NavLink
               item={SETTINGS_ITEM}
               siteId={siteId}
               collapsed={isCollapsed}
               onClick={isMobile ? onMobileClose : undefined}
+              pendingHref={pendingHref}
+              onNavigate={handleNavigate}
             />
           )}
           {!isMobile && (
             <button
               onClick={toggle}
-              className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 w-full ${
-                isCollapsed ? 'justify-center' : ''
+              className={`flex items-center rounded-lg py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 w-full ${
+                isCollapsed ? 'justify-center px-0' : 'gap-2.5 px-2.5'
               }`}
               title={collapsed ? 'Expand sidebar (press [)' : 'Collapse sidebar (press [)'}
             >
-- 
2.49.1


From 5c8f3340172329e70d6a6b77a655ec8849285331 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 16:45:39 +0100
Subject: [PATCH 060/428] fix: eliminate sidebar jitter on collapse/expand
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root cause: class switching (px-2↔px-3, justify-center↔gap-2.5,
conditional DOM rendering) caused instant layout jumps during the
200ms width transition.

Fix: internal layout is now 100% static — same padding, same gap,
same DOM structure in both states. Only opacity transitions on text
labels (via Label component). The sidebar overflow:hidden + width
transition handles the visual collapse. Collapse icon rotates 180deg
instead of swapping between two icons.
---
 components/dashboard/Sidebar.tsx | 234 +++++++++----------------------
 1 file changed, 66 insertions(+), 168 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index f63f2db..585667f 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -22,6 +22,8 @@ import {
 } from '@ciphera-net/ui'
 
 const SIDEBAR_KEY = 'pulse_sidebar_collapsed'
+const EXPANDED = 256
+const COLLAPSED = 56
 
 type IconWeight = 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'
 
@@ -32,10 +34,7 @@ interface NavItem {
   matchPrefix?: boolean
 }
 
-interface NavGroup {
-  label: string
-  items: NavItem[]
-}
+interface NavGroup { label: string; items: NavItem[] }
 
 const NAV_GROUPS: NavGroup[] = [
   {
@@ -58,23 +57,24 @@ const NAV_GROUPS: NavGroup[] = [
 ]
 
 const SETTINGS_ITEM: NavItem = {
-  label: 'Settings',
-  href: (id) => `/sites/${id}/settings`,
-  icon: SettingsIcon,
-  matchPrefix: true,
+  label: 'Settings', href: (id) => `/sites/${id}/settings`, icon: SettingsIcon, matchPrefix: true,
+}
+
+// Label that fades with the sidebar — always in the DOM, never removed
+function Label({ children, collapsed }: { children: React.ReactNode; collapsed: boolean }) {
+  return (
+    <span
+      className="whitespace-nowrap overflow-hidden transition-opacity duration-150"
+      style={{ opacity: collapsed ? 0 : 1 }}
+    >
+      {children}
+    </span>
+  )
 }
 
 // ─── Site Picker ────────────────────────────────────────────
 
-function SitePicker({
-  sites,
-  siteId,
-  collapsed,
-}: {
-  sites: Site[]
-  siteId: string
-  collapsed: boolean
-}) {
+function SitePicker({ sites, siteId, collapsed }: { sites: Site[]; siteId: string; collapsed: boolean }) {
   const [open, setOpen] = useState(false)
   const [search, setSearch] = useState('')
   const ref = useRef<HTMLDivElement>(null)
@@ -85,10 +85,7 @@ function SitePicker({
 
   useEffect(() => {
     const handler = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
-        setOpen(false)
-        setSearch('')
-      }
+      if (ref.current && !ref.current.contains(e.target as Node)) { setOpen(false); setSearch('') }
     }
     document.addEventListener('mousedown', handler)
     return () => document.removeEventListener('mousedown', handler)
@@ -96,38 +93,33 @@ function SitePicker({
 
   const switchSite = (id: string) => {
     router.push(`/sites/${id}${pathname.replace(/^\/sites\/[^/]+/, '')}`)
-    setOpen(false)
-    setSearch('')
+    setOpen(false); setSearch('')
   }
 
   const filtered = sites.filter(
-    (s) =>
-      s.name.toLowerCase().includes(search.toLowerCase()) ||
-      s.domain.toLowerCase().includes(search.toLowerCase())
+    (s) => s.name.toLowerCase().includes(search.toLowerCase()) || s.domain.toLowerCase().includes(search.toLowerCase())
   )
 
   return (
-    <div className={`relative mb-4 ${collapsed ? 'px-2' : 'px-3'}`} ref={ref}>
+    <div className="relative mb-4 px-3" ref={ref}>
       <button
         onClick={() => setOpen(!open)}
-        className={`w-full flex items-center rounded-lg py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 ${
-          collapsed ? 'justify-center px-0' : 'gap-2.5 px-2'
-        }`}
+        className="w-full flex items-center gap-2.5 rounded-lg px-2 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 overflow-hidden"
         title={collapsed ? currentSite?.name || 'Select site' : undefined}
       >
         <span className="w-7 h-7 rounded-md bg-brand-orange/10 text-brand-orange flex items-center justify-center text-xs font-bold shrink-0">
           {initial}
         </span>
-        {!collapsed && (
-          <>
-            <span className="truncate flex-1 text-left">{currentSite?.name || 'Select site'}</span>
+        <Label collapsed={collapsed}>
+          <span className="flex items-center gap-1">
+            <span className="truncate">{currentSite?.name || 'Select site'}</span>
             <ChevronUpDownIcon className="w-4 h-4 text-neutral-400 shrink-0" />
-          </>
-        )}
+          </span>
+        </Label>
       </button>
 
       {open && (
-        <div className={`absolute top-full mt-1 z-50 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden min-w-[220px] ${collapsed ? 'left-1 right-auto' : 'left-3 right-3'}`}>
+        <div className="absolute left-3 top-full mt-1 z-50 w-[240px] bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden">
           <div className="p-2">
             <input
               type="text"
@@ -158,16 +150,10 @@ function SitePicker({
                 </span>
               </button>
             ))}
-            {filtered.length === 0 && (
-              <p className="px-4 py-3 text-sm text-neutral-400">No sites found</p>
-            )}
+            {filtered.length === 0 && <p className="px-4 py-3 text-sm text-neutral-400">No sites found</p>}
           </div>
           <div className="border-t border-neutral-200 dark:border-neutral-700 p-2">
-            <Link
-              href="/sites/new"
-              onClick={() => setOpen(false)}
-              className="flex items-center gap-2 px-3 py-1.5 text-sm text-brand-orange hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg"
-            >
+            <Link href="/sites/new" onClick={() => setOpen(false)} className="flex items-center gap-2 px-3 py-1.5 text-sm text-brand-orange hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg">
               <PlusIcon className="w-4 h-4" />
               Add new site
             </Link>
@@ -181,52 +167,30 @@ function SitePicker({
 // ─── Nav Item ───────────────────────────────────────────────
 
 function NavLink({
-  item,
-  siteId,
-  collapsed,
-  onClick,
-  pendingHref,
-  onNavigate,
+  item, siteId, collapsed, onClick, pendingHref, onNavigate,
 }: {
-  item: NavItem
-  siteId: string
-  collapsed: boolean
-  onClick?: () => void
-  pendingHref: string | null
-  onNavigate: (href: string) => void
+  item: NavItem; siteId: string; collapsed: boolean; onClick?: () => void
+  pendingHref: string | null; onNavigate: (href: string) => void
 }) {
   const pathname = usePathname()
   const href = item.href(siteId)
-
-  // Active if pathname matches OR if this link was just clicked (optimistic)
   const matchesPathname = item.matchPrefix ? pathname.startsWith(href) : pathname === href
   const matchesPending = pendingHref !== null && (item.matchPrefix ? pendingHref.startsWith(href) : pendingHref === href)
   const active = matchesPathname || matchesPending
 
-  const handleClick = () => {
-    onNavigate(href)
-    onClick?.()
-  }
-
   return (
     <Link
       href={href}
-      onClick={handleClick}
+      onClick={() => { onNavigate(href); onClick?.() }}
       title={collapsed ? item.label : undefined}
-      className={`flex items-center rounded-lg py-2 text-sm font-medium ${
-        collapsed ? 'justify-center px-0' : 'gap-2.5 px-2.5'
-      } ${
+      className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden ${
         active
           ? 'bg-brand-orange/10 text-brand-orange'
           : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800'
       }`}
     >
       <item.icon className="w-[18px] h-[18px] shrink-0" weight={active ? 'fill' : 'regular'} />
-      {!collapsed && (
-        <span className="whitespace-nowrap overflow-hidden">
-          {item.label}
-        </span>
-      )}
+      <Label collapsed={collapsed}>{item.label}</Label>
     </Link>
   )
 }
@@ -234,15 +198,9 @@ function NavLink({
 // ─── Main Sidebar ───────────────────────────────────────────
 
 export default function Sidebar({
-  siteId,
-  mobileOpen,
-  onMobileClose,
-  onMobileOpen,
+  siteId, mobileOpen, onMobileClose, onMobileOpen,
 }: {
-  siteId: string
-  mobileOpen: boolean
-  onMobileClose: () => void
-  onMobileOpen: () => void
+  siteId: string; mobileOpen: boolean; onMobileClose: () => void; onMobileOpen: () => void
 }) {
   const { user } = useAuth()
   const canEdit = user?.role === 'owner' || user?.role === 'admin'
@@ -254,24 +212,15 @@ export default function Sidebar({
     return localStorage.getItem(SIDEBAR_KEY) === 'true'
   })
 
-  useEffect(() => {
-    listSites().then(setSites).catch(() => {})
-  }, [])
+  useEffect(() => { listSites().then(setSites).catch(() => {}) }, [])
+  useEffect(() => { setPendingHref(null); onMobileClose() }, [pathname, onMobileClose])
 
-  // Clear pending href once navigation completes
-  useEffect(() => {
-    setPendingHref(null)
-    onMobileClose()
-  }, [pathname, onMobileClose])
-
-  // Keyboard shortcut: [ to toggle
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
       if (e.key === '[' && !e.metaKey && !e.ctrlKey && !e.altKey) {
         const tag = (e.target as HTMLElement)?.tagName
         if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return
-        e.preventDefault()
-        toggle()
+        e.preventDefault(); toggle()
       }
     }
     document.addEventListener('keydown', handler)
@@ -279,66 +228,39 @@ export default function Sidebar({
   }, [collapsed])
 
   const toggle = useCallback(() => {
-    setCollapsed((prev) => {
-      const next = !prev
-      localStorage.setItem(SIDEBAR_KEY, String(next))
-      return next
-    })
+    setCollapsed((prev) => { const next = !prev; localStorage.setItem(SIDEBAR_KEY, String(next)); return next })
   }, [])
 
-  const handleNavigate = useCallback((href: string) => {
-    setPendingHref(href)
-  }, [])
+  const handleNavigate = useCallback((href: string) => { setPendingHref(href) }, [])
 
   const sidebarContent = (isMobile: boolean) => {
-    const isCollapsed = isMobile ? false : collapsed
+    const c = isMobile ? false : collapsed
 
     return (
-      <div className="flex flex-col h-full overflow-x-hidden">
-        {/* Logo */}
-        <Link
-          href="/"
-          className={`flex items-center shrink-0 group py-5 ${
-            isCollapsed ? 'justify-center px-0' : 'gap-3 px-5'
-          }`}
-        >
-          <img
-            src="/pulse_icon_no_margins.png"
-            alt="Pulse"
-            className="w-8 h-8 shrink-0 object-contain group-hover:scale-105 transition-transform duration-200"
-          />
-          {!isCollapsed && (
-            <span className="text-lg font-bold text-neutral-900 dark:text-white tracking-tight group-hover:text-brand-orange transition-colors duration-150 whitespace-nowrap">
-              Pulse
-            </span>
-          )}
+      <div className="flex flex-col h-full overflow-hidden">
+        {/* Logo — fixed layout, text fades */}
+        <Link href="/" className="flex items-center gap-3 px-4 py-5 shrink-0 group overflow-hidden">
+          <img src="/pulse_icon_no_margins.png" alt="Pulse" className="w-8 h-8 shrink-0 object-contain group-hover:scale-105 transition-transform duration-200" />
+          <span className={`text-lg font-bold text-neutral-900 dark:text-white tracking-tight group-hover:text-brand-orange whitespace-nowrap transition-opacity duration-150 ${c ? 'opacity-0' : 'opacity-100'}`}>
+            Pulse
+          </span>
         </Link>
 
         {/* Site Picker */}
-        <SitePicker sites={sites} siteId={siteId} collapsed={isCollapsed} />
+        <SitePicker sites={sites} siteId={siteId} collapsed={c} />
 
         {/* Nav Groups */}
-        <nav className={`flex-1 overflow-y-auto overflow-x-hidden space-y-4 ${isCollapsed ? 'px-2' : 'px-3'}`}>
+        <nav className="flex-1 overflow-y-auto overflow-x-hidden px-3 space-y-4">
           {NAV_GROUPS.map((group) => (
             <div key={group.label}>
-              {isCollapsed ? (
-                <div className="h-2" />
-              ) : (
-                <p className="px-2.5 mb-1 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider">
+              <div className="h-5 flex items-center overflow-hidden">
+                <p className={`px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap transition-opacity duration-150 ${c ? 'opacity-0' : 'opacity-100'}`}>
                   {group.label}
                 </p>
-              )}
+              </div>
               <div className="space-y-0.5">
                 {group.items.map((item) => (
-                  <NavLink
-                    key={item.label}
-                    item={item}
-                    siteId={siteId}
-                    collapsed={isCollapsed}
-                    onClick={isMobile ? onMobileClose : undefined}
-                    pendingHref={pendingHref}
-                    onNavigate={handleNavigate}
-                  />
+                  <NavLink key={item.label} item={item} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={handleNavigate} />
                 ))}
               </div>
             </div>
@@ -346,33 +268,18 @@ export default function Sidebar({
         </nav>
 
         {/* Bottom */}
-        <div className={`border-t border-neutral-200 dark:border-neutral-800 py-3 space-y-0.5 shrink-0 ${isCollapsed ? 'px-2' : 'px-3'}`}>
+        <div className="border-t border-neutral-200 dark:border-neutral-800 px-3 py-3 space-y-0.5 shrink-0">
           {canEdit && (
-            <NavLink
-              item={SETTINGS_ITEM}
-              siteId={siteId}
-              collapsed={isCollapsed}
-              onClick={isMobile ? onMobileClose : undefined}
-              pendingHref={pendingHref}
-              onNavigate={handleNavigate}
-            />
+            <NavLink item={SETTINGS_ITEM} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={handleNavigate} />
           )}
           {!isMobile && (
             <button
               onClick={toggle}
-              className={`flex items-center rounded-lg py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 w-full ${
-                isCollapsed ? 'justify-center px-0' : 'gap-2.5 px-2.5'
-              }`}
+              className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 w-full overflow-hidden"
               title={collapsed ? 'Expand sidebar (press [)' : 'Collapse sidebar (press [)'}
             >
-              {collapsed ? (
-                <CollapseRightIcon className="w-[18px] h-[18px] shrink-0" />
-              ) : (
-                <>
-                  <CollapseLeftIcon className="w-[18px] h-[18px] shrink-0" />
-                  <span className="whitespace-nowrap overflow-hidden">Collapse</span>
-                </>
-              )}
+              <CollapseLeftIcon className={`w-[18px] h-[18px] shrink-0 transition-transform duration-200 ${c ? 'rotate-180' : ''}`} />
+              <Label collapsed={c}>Collapse</Label>
             </button>
           )}
         </div>
@@ -382,13 +289,10 @@ export default function Sidebar({
 
   return (
     <>
-      {/* Desktop */}
+      {/* Desktop — width transitions, internal layout never changes */}
       <aside
         className="hidden md:flex flex-col shrink-0 border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 overflow-hidden"
-        style={{
-          width: collapsed ? 56 : 256,
-          transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)',
-        }}
+        style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
       >
         {sidebarContent(false)}
       </aside>
@@ -396,17 +300,11 @@ export default function Sidebar({
       {/* Mobile overlay */}
       {mobileOpen && (
         <>
-          <div
-            className="fixed inset-0 z-40 bg-black/30 md:hidden"
-            onClick={onMobileClose}
-          />
+          <div className="fixed inset-0 z-40 bg-black/30 md:hidden" onClick={onMobileClose} />
           <aside className="fixed inset-y-0 left-0 z-50 w-72 bg-white dark:bg-neutral-900 border-r border-neutral-200 dark:border-neutral-800 shadow-xl md:hidden animate-in slide-in-from-left duration-200">
             <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-800">
               <span className="text-sm font-semibold text-neutral-900 dark:text-white">Navigation</span>
-              <button
-                onClick={onMobileClose}
-                className="p-1.5 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300"
-              >
+              <button onClick={onMobileClose} className="p-1.5 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300">
                 <XIcon className="w-5 h-5" />
               </button>
             </div>
-- 
2.49.1


From 6fcb6df2955502ebd23010350262638d586c399a Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 16:51:01 +0100
Subject: [PATCH 061/428] fix: widen collapsed sidebar to 64px, prevent header
 flash on refresh
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Collapsed width 56px→64px to stop clipping site picker badge and icons.
Return null while auth is loading on site pages to prevent brief flash
of the public floating header before the sidebar layout renders.
---
 app/layout-content.tsx           | 7 ++++++-
 components/dashboard/Sidebar.tsx | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/layout-content.tsx b/app/layout-content.tsx
index b40ab9b..5ac3317 100644
--- a/app/layout-content.tsx
+++ b/app/layout-content.tsx
@@ -95,7 +95,12 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
     return <LoadingOverlay logoSrc="/pulse_icon_no_margins.png" title="Pulse" portal={false} />
   }
 
-  // Authenticated site pages: full Dokploy-style layout (sidebar + utility bar)
+  // While auth is loading on a site page, render nothing to prevent flash of public header
+  if (auth.loading && isSitePage) {
+    return null
+  }
+
+  // Authenticated site pages: full sidebar layout
   // DashboardShell inside children handles everything
   if (isAuthenticated && isSitePage) {
     return (
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 585667f..1ff4ea5 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -23,7 +23,7 @@ import {
 
 const SIDEBAR_KEY = 'pulse_sidebar_collapsed'
 const EXPANDED = 256
-const COLLAPSED = 56
+const COLLAPSED = 64
 
 type IconWeight = 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'
 
-- 
2.49.1


From b0983e5a3fb2f5f45e18e307d286d22765d75fed Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 16:52:40 +0100
Subject: [PATCH 062/428] style: glassy transparency on sidebar and content
 header

Apply the same backdrop-blur-2xl + semi-transparent bg treatment from
the AppLauncher dropdown to the sidebar and content header. Matches
the Ciphera design language: bg-white/70 dark:bg-neutral-900/70 with
supports-[backdrop-filter] progressive enhancement. Soften all borders
to /60 opacity.
---
 components/dashboard/ContentHeader.tsx | 2 +-
 components/dashboard/Sidebar.tsx       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/dashboard/ContentHeader.tsx b/components/dashboard/ContentHeader.tsx
index 26ba486..2f4a47f 100644
--- a/components/dashboard/ContentHeader.tsx
+++ b/components/dashboard/ContentHeader.tsx
@@ -69,7 +69,7 @@ export default function ContentHeader({
   }
 
   return (
-    <div className="shrink-0 flex items-center justify-between border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 sm:px-6 py-3.5">
+    <div className="shrink-0 flex items-center justify-between border-b border-neutral-200/60 dark:border-neutral-800/60 bg-white/70 dark:bg-neutral-900/70 backdrop-blur-2xl supports-[backdrop-filter]:bg-white/50 dark:supports-[backdrop-filter]:bg-neutral-900/50 px-4 sm:px-6 py-3.5">
       {/* Left: mobile hamburger */}
       <div className="flex items-center gap-3">
         <button
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 1ff4ea5..e8e40a0 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -268,7 +268,7 @@ export default function Sidebar({
         </nav>
 
         {/* Bottom */}
-        <div className="border-t border-neutral-200 dark:border-neutral-800 px-3 py-3 space-y-0.5 shrink-0">
+        <div className="border-t border-neutral-200/60 dark:border-neutral-800/60 px-3 py-3 space-y-0.5 shrink-0">
           {canEdit && (
             <NavLink item={SETTINGS_ITEM} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={handleNavigate} />
           )}
@@ -291,7 +291,7 @@ export default function Sidebar({
     <>
       {/* Desktop — width transitions, internal layout never changes */}
       <aside
-        className="hidden md:flex flex-col shrink-0 border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 overflow-hidden"
+        className="hidden md:flex flex-col shrink-0 border-r border-neutral-200/60 dark:border-neutral-800/60 bg-white/70 dark:bg-neutral-900/70 backdrop-blur-2xl supports-[backdrop-filter]:bg-white/50 dark:supports-[backdrop-filter]:bg-neutral-900/50 overflow-hidden"
         style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
       >
         {sidebarContent(false)}
-- 
2.49.1


From 981eaaff39a298a500eacfb27bee0ec7f15efd8c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 16:55:10 +0100
Subject: [PATCH 063/428] fix: center site picker hover state in collapsed
 sidebar

Match site picker button padding (px-2.5) with nav items so the hover
background aligns consistently. Remove title tooltip.
---
 components/dashboard/Sidebar.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index e8e40a0..4d4ba97 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -104,8 +104,7 @@ function SitePicker({ sites, siteId, collapsed }: { sites: Site[]; siteId: strin
     <div className="relative mb-4 px-3" ref={ref}>
       <button
         onClick={() => setOpen(!open)}
-        className="w-full flex items-center gap-2.5 rounded-lg px-2 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 overflow-hidden"
-        title={collapsed ? currentSite?.name || 'Select site' : undefined}
+        className="w-full flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 overflow-hidden"
       >
         <span className="w-7 h-7 rounded-md bg-brand-orange/10 text-brand-orange flex items-center justify-center text-xs font-bold shrink-0">
           {initial}
-- 
2.49.1


From 84c23faa0f06b6b7ff39c432e7a0fb6be7e3efa2 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 16:57:34 +0100
Subject: [PATCH 064/428] style: reduce glass transparency to 90% opacity
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sidebar and content header were too transparent — content bled through.
Bump from bg-*/70 to bg-*/90 with backdrop-blur-xl for a subtle glass
effect that's still readable.
---
 components/dashboard/ContentHeader.tsx | 2 +-
 components/dashboard/Sidebar.tsx       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/dashboard/ContentHeader.tsx b/components/dashboard/ContentHeader.tsx
index 2f4a47f..fd5ab99 100644
--- a/components/dashboard/ContentHeader.tsx
+++ b/components/dashboard/ContentHeader.tsx
@@ -69,7 +69,7 @@ export default function ContentHeader({
   }
 
   return (
-    <div className="shrink-0 flex items-center justify-between border-b border-neutral-200/60 dark:border-neutral-800/60 bg-white/70 dark:bg-neutral-900/70 backdrop-blur-2xl supports-[backdrop-filter]:bg-white/50 dark:supports-[backdrop-filter]:bg-neutral-900/50 px-4 sm:px-6 py-3.5">
+    <div className="shrink-0 flex items-center justify-between border-b border-neutral-200/60 dark:border-neutral-800/60 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl px-4 sm:px-6 py-3.5">
       {/* Left: mobile hamburger */}
       <div className="flex items-center gap-3">
         <button
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 4d4ba97..f79e1fc 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -290,7 +290,7 @@ export default function Sidebar({
     <>
       {/* Desktop — width transitions, internal layout never changes */}
       <aside
-        className="hidden md:flex flex-col shrink-0 border-r border-neutral-200/60 dark:border-neutral-800/60 bg-white/70 dark:bg-neutral-900/70 backdrop-blur-2xl supports-[backdrop-filter]:bg-white/50 dark:supports-[backdrop-filter]:bg-neutral-900/50 overflow-hidden"
+        className="hidden md:flex flex-col shrink-0 border-r border-neutral-200/60 dark:border-neutral-800/60 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl overflow-hidden"
         style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
       >
         {sidebarContent(false)}
-- 
2.49.1


From 9773735d2b1e5c69ad68741acc749a7d68f7e754 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 16:59:44 +0100
Subject: [PATCH 065/428] chore: bump @ciphera-net/ui to 0.2.11

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 778b994..620a0e4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "pulse-frontend",
       "version": "0.15.0-alpha",
       "dependencies": {
-        "@ciphera-net/ui": "^0.2.10",
+        "@ciphera-net/ui": "^0.2.11",
         "@ducanh2912/next-pwa": "^10.2.9",
         "@phosphor-icons/react": "^2.1.10",
         "@simplewebauthn/browser": "^13.2.2",
@@ -1670,9 +1670,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.2.10",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.2.10/aeae8c3cb25cc9b5193bfba47ce2e444ac82f1d7",
-      "integrity": "sha512-yWHitk43epGjtwUxGVrKwGYZb+VtJhauy7fgmqYfDC8tq33eVlH+yOdi44J/OiWDl8ONSlt8i5Xptz3k79UuXQ==",
+      "version": "0.2.11",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.2.11/f2fd317915796a89d7cdf765e9129732de52cafd",
+      "integrity": "sha512-9ORfLeGPhnujK4bpnbSv+IzlKT8L50JlzS477RSNqBszVw05qbDlg4vtfAxXyKQFhsHBNSuEssbpn4rbOTARiw==",
       "dependencies": {
         "@phosphor-icons/react": "^2.1.10",
         "class-variance-authority": "^0.7.1",
diff --git a/package.json b/package.json
index 4b352b5..1c0b44d 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.2.10",
+    "@ciphera-net/ui": "^0.2.11",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@phosphor-icons/react": "^2.1.10",
     "@simplewebauthn/browser": "^13.2.2",
-- 
2.49.1


From 01dfa6954f11450c8eeebaa4464fdd7d39ac8eb1 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 17:03:08 +0100
Subject: [PATCH 066/428] fix: center site picker hover state in collapsed
 sidebar

Reduce all sidebar section outer padding from px-3 to px-2 so hover
backgrounds are wider and items center properly in the 64px collapsed
width. All sections now consistent: px-2 outer + px-2.5 inner.
---
 components/dashboard/Sidebar.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index f79e1fc..ac6dd28 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -101,7 +101,7 @@ function SitePicker({ sites, siteId, collapsed }: { sites: Site[]; siteId: strin
   )
 
   return (
-    <div className="relative mb-4 px-3" ref={ref}>
+    <div className="relative mb-4 px-2" ref={ref}>
       <button
         onClick={() => setOpen(!open)}
         className="w-full flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 overflow-hidden"
@@ -249,7 +249,7 @@ export default function Sidebar({
         <SitePicker sites={sites} siteId={siteId} collapsed={c} />
 
         {/* Nav Groups */}
-        <nav className="flex-1 overflow-y-auto overflow-x-hidden px-3 space-y-4">
+        <nav className="flex-1 overflow-y-auto overflow-x-hidden px-2 space-y-4">
           {NAV_GROUPS.map((group) => (
             <div key={group.label}>
               <div className="h-5 flex items-center overflow-hidden">
@@ -267,7 +267,7 @@ export default function Sidebar({
         </nav>
 
         {/* Bottom */}
-        <div className="border-t border-neutral-200/60 dark:border-neutral-800/60 px-3 py-3 space-y-0.5 shrink-0">
+        <div className="border-t border-neutral-200/60 dark:border-neutral-800/60 px-2 py-3 space-y-0.5 shrink-0">
           {canEdit && (
             <NavLink item={SETTINGS_ITEM} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={handleNavigate} />
           )}
-- 
2.49.1


From 9b8ae08460da301010f2114dae88a4463e7493bf Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 17:07:00 +0100
Subject: [PATCH 067/428] fix: center all sidebar icons with uniform 28px
 containers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Every interactive item (logo, site picker, nav links, settings,
collapse) now wraps its icon in a 28px flex container. Combined with
consistent px-2 outer + px-2.5 inner padding, all icon containers
start at exactly 18px from the sidebar edge and center at 32px — the
midpoint of the 64px collapsed sidebar.
---
 components/dashboard/Sidebar.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index ac6dd28..7499a5b 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -188,7 +188,9 @@ function NavLink({
           : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800'
       }`}
     >
-      <item.icon className="w-[18px] h-[18px] shrink-0" weight={active ? 'fill' : 'regular'} />
+      <span className="w-7 h-7 flex items-center justify-center shrink-0">
+        <item.icon className="w-[18px] h-[18px]" weight={active ? 'fill' : 'regular'} />
+      </span>
       <Label collapsed={collapsed}>{item.label}</Label>
     </Link>
   )
@@ -238,8 +240,10 @@ export default function Sidebar({
     return (
       <div className="flex flex-col h-full overflow-hidden">
         {/* Logo — fixed layout, text fades */}
-        <Link href="/" className="flex items-center gap-3 px-4 py-5 shrink-0 group overflow-hidden">
-          <img src="/pulse_icon_no_margins.png" alt="Pulse" className="w-8 h-8 shrink-0 object-contain group-hover:scale-105 transition-transform duration-200" />
+        <Link href="/" className="flex items-center gap-2.5 px-[18px] py-5 shrink-0 group overflow-hidden">
+          <span className="w-7 h-7 flex items-center justify-center shrink-0">
+            <img src="/pulse_icon_no_margins.png" alt="Pulse" className="w-7 h-7 shrink-0 object-contain group-hover:scale-105 transition-transform duration-200" />
+          </span>
           <span className={`text-lg font-bold text-neutral-900 dark:text-white tracking-tight group-hover:text-brand-orange whitespace-nowrap transition-opacity duration-150 ${c ? 'opacity-0' : 'opacity-100'}`}>
             Pulse
           </span>
@@ -277,7 +281,9 @@ export default function Sidebar({
               className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 w-full overflow-hidden"
               title={collapsed ? 'Expand sidebar (press [)' : 'Collapse sidebar (press [)'}
             >
-              <CollapseLeftIcon className={`w-[18px] h-[18px] shrink-0 transition-transform duration-200 ${c ? 'rotate-180' : ''}`} />
+              <span className="w-7 h-7 flex items-center justify-center shrink-0">
+                <CollapseLeftIcon className={`w-[18px] h-[18px] transition-transform duration-200 ${c ? 'rotate-180' : ''}`} />
+              </span>
               <Label collapsed={c}>Collapse</Label>
             </button>
           )}
-- 
2.49.1


From 7cdbb34f9d641671ea06a34c3534d150bdc921a8 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 17:09:46 +0100
Subject: [PATCH 068/428] style: bigger Pulse logo and text in sidebar (w-9,
 text-xl)

---
 components/dashboard/Sidebar.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 7499a5b..b98257f 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -240,11 +240,11 @@ export default function Sidebar({
     return (
       <div className="flex flex-col h-full overflow-hidden">
         {/* Logo — fixed layout, text fades */}
-        <Link href="/" className="flex items-center gap-2.5 px-[18px] py-5 shrink-0 group overflow-hidden">
-          <span className="w-7 h-7 flex items-center justify-center shrink-0">
-            <img src="/pulse_icon_no_margins.png" alt="Pulse" className="w-7 h-7 shrink-0 object-contain group-hover:scale-105 transition-transform duration-200" />
+        <Link href="/" className="flex items-center gap-3 px-[14px] py-4 shrink-0 group overflow-hidden">
+          <span className="w-9 h-9 flex items-center justify-center shrink-0">
+            <img src="/pulse_icon_no_margins.png" alt="Pulse" className="w-9 h-9 shrink-0 object-contain group-hover:scale-105 transition-transform duration-200" />
           </span>
-          <span className={`text-lg font-bold text-neutral-900 dark:text-white tracking-tight group-hover:text-brand-orange whitespace-nowrap transition-opacity duration-150 ${c ? 'opacity-0' : 'opacity-100'}`}>
+          <span className={`text-xl font-bold text-neutral-900 dark:text-white tracking-tight group-hover:text-brand-orange whitespace-nowrap transition-opacity duration-150 ${c ? 'opacity-0' : 'opacity-100'}`}>
             Pulse
           </span>
         </Link>
-- 
2.49.1


From 9f8a6606bbdf8c2d870dd1d4e500dbc5feeb64e6 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 17:12:53 +0100
Subject: [PATCH 069/428] fix: add pt-6 top padding to main content area

---
 components/dashboard/DashboardShell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 2e099f5..c0cd867 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -25,7 +25,7 @@ export default function DashboardShell({
       />
       <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
         <ContentHeader onMobileMenuOpen={openMobile} />
-        <main className="flex-1 overflow-y-auto">
+        <main className="flex-1 overflow-y-auto pt-6">
           {children}
         </main>
       </div>
-- 
2.49.1


From 684448159a7a23a8d7dfcba9830e068f8a4bf324 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 18:15:45 +0100
Subject: [PATCH 070/428] feat: show site favicon in sidebar site picker

Use Google's favicon service to display the site's actual favicon
instead of the first-letter initial. Falls back to the letter if
the favicon fails to load. Matches the site list dashboard behavior.
---
 components/dashboard/Sidebar.tsx | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index b98257f..652457c 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -5,6 +5,7 @@ import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
 import { listSites, type Site } from '@/lib/api/sites'
 import { useAuth } from '@/lib/auth/context'
+import { FAVICON_SERVICE_URL } from '@/lib/utils/icons'
 import {
   LayoutDashboardIcon,
   PathIcon,
@@ -77,11 +78,13 @@ function Label({ children, collapsed }: { children: React.ReactNode; collapsed:
 function SitePicker({ sites, siteId, collapsed }: { sites: Site[]; siteId: string; collapsed: boolean }) {
   const [open, setOpen] = useState(false)
   const [search, setSearch] = useState('')
+  const [faviconFailed, setFaviconFailed] = useState(false)
   const ref = useRef<HTMLDivElement>(null)
   const pathname = usePathname()
   const router = useRouter()
   const currentSite = sites.find((s) => s.id === siteId)
   const initial = currentSite?.name?.charAt(0)?.toUpperCase() || '?'
+  const faviconUrl = currentSite?.domain ? `${FAVICON_SERVICE_URL}?domain=${currentSite.domain}&sz=64` : null
 
   useEffect(() => {
     const handler = (e: MouseEvent) => {
@@ -106,8 +109,17 @@ function SitePicker({ sites, siteId, collapsed }: { sites: Site[]; siteId: strin
         onClick={() => setOpen(!open)}
         className="w-full flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 overflow-hidden"
       >
-        <span className="w-7 h-7 rounded-md bg-brand-orange/10 text-brand-orange flex items-center justify-center text-xs font-bold shrink-0">
-          {initial}
+        <span className="w-7 h-7 rounded-md bg-brand-orange/10 text-brand-orange flex items-center justify-center text-xs font-bold shrink-0 overflow-hidden">
+          {faviconUrl && !faviconFailed ? (
+            <img
+              src={faviconUrl}
+              alt={currentSite?.name || ''}
+              className="w-5 h-5 object-contain"
+              onError={() => setFaviconFailed(true)}
+            />
+          ) : (
+            initial
+          )}
         </span>
         <Label collapsed={collapsed}>
           <span className="flex items-center gap-1">
@@ -140,9 +152,11 @@ function SitePicker({ sites, siteId, collapsed }: { sites: Site[]; siteId: strin
                     : 'text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800'
                 }`}
               >
-                <span className="w-5 h-5 rounded bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center text-[10px] font-bold shrink-0">
-                  {site.name.charAt(0).toUpperCase()}
-                </span>
+                <img
+                  src={`${FAVICON_SERVICE_URL}?domain=${site.domain}&sz=64`}
+                  alt=""
+                  className="w-5 h-5 rounded object-contain shrink-0"
+                />
                 <span className="flex flex-col min-w-0">
                   <span className="truncate">{site.name}</span>
                   <span className="text-xs text-neutral-400 truncate">{site.domain}</span>
-- 
2.49.1


From 879df185028ca222e958e118b51bac94d1d43c14 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 18:17:00 +0100
Subject: [PATCH 071/428] fix: disable site picker dropdown when sidebar is
 collapsed

---
 components/dashboard/Sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 652457c..68b2187 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -106,7 +106,7 @@ function SitePicker({ sites, siteId, collapsed }: { sites: Site[]; siteId: strin
   return (
     <div className="relative mb-4 px-2" ref={ref}>
       <button
-        onClick={() => setOpen(!open)}
+        onClick={() => { if (!collapsed) setOpen(!open) }}
         className="w-full flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 overflow-hidden"
       >
         <span className="w-7 h-7 rounded-md bg-brand-orange/10 text-brand-orange flex items-center justify-center text-xs font-bold shrink-0 overflow-hidden">
-- 
2.49.1


From c021d8ccf6e72f800c2bb688ed208010472b1c9b Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 18:19:40 +0100
Subject: [PATCH 072/428] fix: show skeleton placeholder while sites load
 instead of fallback letter

---
 components/dashboard/Sidebar.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 68b2187..4653cda 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -117,13 +117,15 @@ function SitePicker({ sites, siteId, collapsed }: { sites: Site[]; siteId: strin
               className="w-5 h-5 object-contain"
               onError={() => setFaviconFailed(true)}
             />
-          ) : (
+          ) : currentSite ? (
             initial
+          ) : (
+            <span className="w-4 h-4 rounded bg-brand-orange/20 animate-pulse" />
           )}
         </span>
         <Label collapsed={collapsed}>
           <span className="flex items-center gap-1">
-            <span className="truncate">{currentSite?.name || 'Select site'}</span>
+            <span className="truncate">{currentSite?.name || <span className="w-16 h-4 rounded bg-neutral-700/20 animate-pulse inline-block" />}</span>
             <ChevronUpDownIcon className="w-4 h-4 text-neutral-400 shrink-0" />
           </span>
         </Label>
-- 
2.49.1


From db055c758c93f6efa2d33e3ec7315541d209591c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 18:23:40 +0100
Subject: [PATCH 073/428] fix: site picker auto-expands collapsed sidebar, fix
 Ci flash

When clicking the site picker in collapsed mode, the sidebar expands
and opens the dropdown. After selecting a site or clicking outside,
the sidebar re-collapses to its previous state.

Fix "Ci" flash on reload: default collapsed to true on SSR and when
no localStorage value exists, preventing hydration mismatch where
labels briefly render at full opacity in the narrow sidebar.
---
 components/dashboard/Sidebar.tsx | 43 ++++++++++++++++++++++++++------
 1 file changed, 36 insertions(+), 7 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 4653cda..f40f2bf 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -75,7 +75,10 @@ function Label({ children, collapsed }: { children: React.ReactNode; collapsed:
 
 // ─── Site Picker ────────────────────────────────────────────
 
-function SitePicker({ sites, siteId, collapsed }: { sites: Site[]; siteId: string; collapsed: boolean }) {
+function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollapsed }: {
+  sites: Site[]; siteId: string; collapsed: boolean
+  onExpand: () => void; onCollapse: () => void; wasCollapsed: React.MutableRefObject<boolean>
+}) {
   const [open, setOpen] = useState(false)
   const [search, setSearch] = useState('')
   const [faviconFailed, setFaviconFailed] = useState(false)
@@ -88,15 +91,23 @@ function SitePicker({ sites, siteId, collapsed }: { sites: Site[]; siteId: strin
 
   useEffect(() => {
     const handler = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) { setOpen(false); setSearch('') }
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        if (open) {
+          setOpen(false); setSearch('')
+          // Re-collapse if we auto-expanded
+          if (wasCollapsed.current) { onCollapse(); wasCollapsed.current = false }
+        }
+      }
     }
     document.addEventListener('mousedown', handler)
     return () => document.removeEventListener('mousedown', handler)
-  }, [])
+  }, [open, onCollapse, wasCollapsed])
 
   const switchSite = (id: string) => {
     router.push(`/sites/${id}${pathname.replace(/^\/sites\/[^/]+/, '')}`)
     setOpen(false); setSearch('')
+    // Re-collapse if we auto-expanded
+    if (wasCollapsed.current) { onCollapse(); wasCollapsed.current = false }
   }
 
   const filtered = sites.filter(
@@ -106,7 +117,16 @@ function SitePicker({ sites, siteId, collapsed }: { sites: Site[]; siteId: strin
   return (
     <div className="relative mb-4 px-2" ref={ref}>
       <button
-        onClick={() => { if (!collapsed) setOpen(!open) }}
+        onClick={() => {
+          if (collapsed) {
+            wasCollapsed.current = true
+            onExpand()
+            // Open picker after sidebar expands
+            setTimeout(() => setOpen(true), 220)
+          } else {
+            setOpen(!open)
+          }
+        }}
         className="w-full flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 overflow-hidden"
       >
         <span className="w-7 h-7 rounded-md bg-brand-orange/10 text-brand-orange flex items-center justify-center text-xs font-bold shrink-0 overflow-hidden">
@@ -224,9 +244,10 @@ export default function Sidebar({
   const pathname = usePathname()
   const [sites, setSites] = useState<Site[]>([])
   const [pendingHref, setPendingHref] = useState<string | null>(null)
+  const wasCollapsedRef = useRef(false)
   const [collapsed, setCollapsed] = useState(() => {
-    if (typeof window === 'undefined') return false
-    return localStorage.getItem(SIDEBAR_KEY) === 'true'
+    if (typeof window === 'undefined') return true // SSR: default collapsed to avoid hydration flash
+    return localStorage.getItem(SIDEBAR_KEY) !== 'false' // default collapsed unless explicitly set to false
   })
 
   useEffect(() => { listSites().then(setSites).catch(() => {}) }, [])
@@ -248,6 +269,14 @@ export default function Sidebar({
     setCollapsed((prev) => { const next = !prev; localStorage.setItem(SIDEBAR_KEY, String(next)); return next })
   }, [])
 
+  const expand = useCallback(() => {
+    setCollapsed(false); localStorage.setItem(SIDEBAR_KEY, 'false')
+  }, [])
+
+  const collapse = useCallback(() => {
+    setCollapsed(true); localStorage.setItem(SIDEBAR_KEY, 'true')
+  }, [])
+
   const handleNavigate = useCallback((href: string) => { setPendingHref(href) }, [])
 
   const sidebarContent = (isMobile: boolean) => {
@@ -266,7 +295,7 @@ export default function Sidebar({
         </Link>
 
         {/* Site Picker */}
-        <SitePicker sites={sites} siteId={siteId} collapsed={c} />
+        <SitePicker sites={sites} siteId={siteId} collapsed={c} onExpand={expand} onCollapse={collapse} wasCollapsed={wasCollapsedRef} />
 
         {/* Nav Groups */}
         <nav className="flex-1 overflow-y-auto overflow-x-hidden px-2 space-y-4">
-- 
2.49.1


From 29127d7ed51e1f8f9fd91ed4e12f59a17bb756e0 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 18:32:50 +0100
Subject: [PATCH 074/428] fix: eliminate all loading flashes in sidebar site
 picker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root cause 1: hydration mismatch — SSR rendered collapsed=true but
client useState initializer read localStorage synchronously, causing
an immediate state change and visual flash. Fix: always initialize
collapsed=true, read localStorage in useEffect so the transition
is smooth (collapsed→expanded animates cleanly).

Root cause 2: three-phase badge rendering (skeleton→letter→favicon)
caused visible state changes. Fix: just show the empty orange badge
until the favicon arrives. No skeleton, no letter fallback. One state
transition: empty→favicon.
---
 components/dashboard/Sidebar.tsx | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index f40f2bf..4d7fcf2 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -86,7 +86,6 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
   const pathname = usePathname()
   const router = useRouter()
   const currentSite = sites.find((s) => s.id === siteId)
-  const initial = currentSite?.name?.charAt(0)?.toUpperCase() || '?'
   const faviconUrl = currentSite?.domain ? `${FAVICON_SERVICE_URL}?domain=${currentSite.domain}&sz=64` : null
 
   useEffect(() => {
@@ -129,23 +128,19 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
         }}
         className="w-full flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 overflow-hidden"
       >
-        <span className="w-7 h-7 rounded-md bg-brand-orange/10 text-brand-orange flex items-center justify-center text-xs font-bold shrink-0 overflow-hidden">
-          {faviconUrl && !faviconFailed ? (
+        <span className="w-7 h-7 rounded-md bg-brand-orange/10 flex items-center justify-center shrink-0 overflow-hidden">
+          {faviconUrl && !faviconFailed && (
             <img
               src={faviconUrl}
               alt={currentSite?.name || ''}
               className="w-5 h-5 object-contain"
               onError={() => setFaviconFailed(true)}
             />
-          ) : currentSite ? (
-            initial
-          ) : (
-            <span className="w-4 h-4 rounded bg-brand-orange/20 animate-pulse" />
           )}
         </span>
         <Label collapsed={collapsed}>
           <span className="flex items-center gap-1">
-            <span className="truncate">{currentSite?.name || <span className="w-16 h-4 rounded bg-neutral-700/20 animate-pulse inline-block" />}</span>
+            <span className="truncate">{currentSite?.name || ''}</span>
             <ChevronUpDownIcon className="w-4 h-4 text-neutral-400 shrink-0" />
           </span>
         </Label>
@@ -245,10 +240,13 @@ export default function Sidebar({
   const [sites, setSites] = useState<Site[]>([])
   const [pendingHref, setPendingHref] = useState<string | null>(null)
   const wasCollapsedRef = useRef(false)
-  const [collapsed, setCollapsed] = useState(() => {
-    if (typeof window === 'undefined') return true // SSR: default collapsed to avoid hydration flash
-    return localStorage.getItem(SIDEBAR_KEY) !== 'false' // default collapsed unless explicitly set to false
-  })
+  const [collapsed, setCollapsed] = useState(true) // Always start collapsed — no hydration mismatch
+
+  // Read saved state after mount — expands smoothly if user had it open
+  useEffect(() => {
+    const saved = localStorage.getItem(SIDEBAR_KEY)
+    if (saved === 'false') setCollapsed(false)
+  }, [])
 
   useEffect(() => { listSites().then(setSites).catch(() => {}) }, [])
   useEffect(() => { setPendingHref(null); onMobileClose() }, [pathname, onMobileClose])
-- 
2.49.1


From 137ab4c2ba1a833f6611b4cda20d913a5678388b Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 18:39:17 +0100
Subject: [PATCH 075/428] fix: eliminate sidebar flash on page load for good

The sidebar is now invisible (opacity-0) on the initial render.
In a single useEffect: read collapsed state from localStorage,
then requestAnimationFrame to reveal (opacity-1). React batches
the state update with the reveal, so the sidebar appears at its
correct width with correct label visibility in one frame. No
intermediate states, no hydration mismatch, no transitions on load.
---
 components/dashboard/Sidebar.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 4d7fcf2..948ef0d 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -240,12 +240,15 @@ export default function Sidebar({
   const [sites, setSites] = useState<Site[]>([])
   const [pendingHref, setPendingHref] = useState<string | null>(null)
   const wasCollapsedRef = useRef(false)
-  const [collapsed, setCollapsed] = useState(true) // Always start collapsed — no hydration mismatch
+  const [ready, setReady] = useState(false)
+  const [collapsed, setCollapsed] = useState(true)
 
-  // Read saved state after mount — expands smoothly if user had it open
+  // Read saved state and reveal sidebar in one frame — no flash
   useEffect(() => {
     const saved = localStorage.getItem(SIDEBAR_KEY)
     if (saved === 'false') setCollapsed(false)
+    // Reveal after state is set — React batches these, so sidebar appears at correct width
+    requestAnimationFrame(() => setReady(true))
   }, [])
 
   useEffect(() => { listSites().then(setSites).catch(() => {}) }, [])
@@ -339,8 +342,8 @@ export default function Sidebar({
     <>
       {/* Desktop — width transitions, internal layout never changes */}
       <aside
-        className="hidden md:flex flex-col shrink-0 border-r border-neutral-200/60 dark:border-neutral-800/60 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl overflow-hidden"
-        style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
+        className={`hidden md:flex flex-col shrink-0 border-r border-neutral-200/60 dark:border-neutral-800/60 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl overflow-hidden ${ready ? 'opacity-100' : 'opacity-0'}`}
+        style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: ready ? 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' : 'none' }}
       >
         {sidebarContent(false)}
       </aside>
-- 
2.49.1


From a63dfa231edee14e01fa251798d557572a3d87c2 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 18:42:36 +0100
Subject: [PATCH 076/428] fix: render empty sidebar shell until client is ready

Previous opacity-0 approach still rendered DOM content which could
flash during SSR hydration. Now render an empty div (just border +
background, no content) at collapsed width until useEffect fires.
Then swap in the real aside with content. Zero DOM content = zero
possible flash of text or icons.
---
 components/dashboard/Sidebar.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 948ef0d..b566573 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -340,13 +340,17 @@ export default function Sidebar({
 
   return (
     <>
-      {/* Desktop — width transitions, internal layout never changes */}
-      <aside
-        className={`hidden md:flex flex-col shrink-0 border-r border-neutral-200/60 dark:border-neutral-800/60 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl overflow-hidden ${ready ? 'opacity-100' : 'opacity-0'}`}
-        style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: ready ? 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' : 'none' }}
-      >
-        {sidebarContent(false)}
-      </aside>
+      {/* Desktop — empty shell until ready, then real content */}
+      {!ready ? (
+        <div className="hidden md:block shrink-0 border-r border-neutral-200/60 dark:border-neutral-800/60 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl" style={{ width: COLLAPSED }} />
+      ) : (
+        <aside
+          className="hidden md:flex flex-col shrink-0 border-r border-neutral-200/60 dark:border-neutral-800/60 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl overflow-hidden"
+          style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
+        >
+          {sidebarContent(false)}
+        </aside>
+      )}
 
       {/* Mobile overlay */}
       {mobileOpen && (
-- 
2.49.1


From 7ed04fb85cdc7f7715bf4303087217f3bebe875d Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 19:42:14 +0100
Subject: [PATCH 077/428] =?UTF-8?q?fix:=20load=20Sidebar=20with=20ssr:fals?=
 =?UTF-8?q?e=20=E2=80=94=20zero=20server-rendered=20content?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The sidebar now uses next/dynamic with ssr:false, meaning it renders
NOTHING in the server HTML. No DOM content = no possible flash of
"Ci" or any text during SSR-to-hydration gap. The sidebar only mounts
on the client where localStorage is immediately available, so
collapsed state is correct from the very first render.
---
 components/dashboard/DashboardShell.tsx |  5 +++-
 components/dashboard/Sidebar.tsx        | 32 +++++++++----------------
 2 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index c0cd867..4f744c6 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -1,9 +1,12 @@
 'use client'
 
 import { useState, useCallback } from 'react'
-import Sidebar from './Sidebar'
+import dynamic from 'next/dynamic'
 import ContentHeader from './ContentHeader'
 
+// Load sidebar only on the client — prevents any SSR flash of text/labels
+const Sidebar = dynamic(() => import('./Sidebar'), { ssr: false })
+
 export default function DashboardShell({
   siteId,
   children,
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index b566573..abd8fc7 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -240,16 +240,10 @@ export default function Sidebar({
   const [sites, setSites] = useState<Site[]>([])
   const [pendingHref, setPendingHref] = useState<string | null>(null)
   const wasCollapsedRef = useRef(false)
-  const [ready, setReady] = useState(false)
-  const [collapsed, setCollapsed] = useState(true)
-
-  // Read saved state and reveal sidebar in one frame — no flash
-  useEffect(() => {
-    const saved = localStorage.getItem(SIDEBAR_KEY)
-    if (saved === 'false') setCollapsed(false)
-    // Reveal after state is set — React batches these, so sidebar appears at correct width
-    requestAnimationFrame(() => setReady(true))
-  }, [])
+  // Safe to read localStorage directly — this component is loaded with ssr:false
+  const [collapsed, setCollapsed] = useState(() => {
+    return localStorage.getItem(SIDEBAR_KEY) !== 'false'
+  })
 
   useEffect(() => { listSites().then(setSites).catch(() => {}) }, [])
   useEffect(() => { setPendingHref(null); onMobileClose() }, [pathname, onMobileClose])
@@ -340,17 +334,13 @@ export default function Sidebar({
 
   return (
     <>
-      {/* Desktop — empty shell until ready, then real content */}
-      {!ready ? (
-        <div className="hidden md:block shrink-0 border-r border-neutral-200/60 dark:border-neutral-800/60 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl" style={{ width: COLLAPSED }} />
-      ) : (
-        <aside
-          className="hidden md:flex flex-col shrink-0 border-r border-neutral-200/60 dark:border-neutral-800/60 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl overflow-hidden"
-          style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
-        >
-          {sidebarContent(false)}
-        </aside>
-      )}
+      {/* Desktop — ssr:false means this only renders on client, no hydration flash */}
+      <aside
+        className="hidden md:flex flex-col shrink-0 border-r border-neutral-200/60 dark:border-neutral-800/60 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl overflow-hidden"
+        style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
+      >
+        {sidebarContent(false)}
+      </aside>
 
       {/* Mobile overlay */}
       {mobileOpen && (
-- 
2.49.1


From 6d649d8dc4c96c18d336ff88864223f2e13c642c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 20:01:01 +0100
Subject: [PATCH 078/428] fix: reserve sidebar space with placeholder during
 SSR
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

With ssr:false, the sidebar rendered nothing in server HTML, so the
content area took full width and page content (site name "Ciphera")
appeared in the sidebar zone. Now the dynamic import has a loading
placeholder — a 64px div with matching border/background that reserves
the sidebar space in the server HTML. Content area never occupies the
sidebar zone. Sidebar replaces the placeholder on client mount.
---
 components/dashboard/DashboardShell.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 4f744c6..d319ef0 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -4,8 +4,18 @@ import { useState, useCallback } from 'react'
 import dynamic from 'next/dynamic'
 import ContentHeader from './ContentHeader'
 
-// Load sidebar only on the client — prevents any SSR flash of text/labels
-const Sidebar = dynamic(() => import('./Sidebar'), { ssr: false })
+// Load sidebar only on the client — prevents SSR flash
+const Sidebar = dynamic(() => import('./Sidebar'), {
+  ssr: false,
+  // Placeholder reserves the sidebar's space in the server HTML
+  // so page content never occupies the sidebar zone
+  loading: () => (
+    <div
+      className="hidden md:block shrink-0 border-r border-neutral-200/60 dark:border-neutral-800/60 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl"
+      style={{ width: 64 }}
+    />
+  ),
+})
 
 export default function DashboardShell({
   siteId,
-- 
2.49.1


From c24a053c07c5d4045dcc99be434a317d67c9b954 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 21:12:27 +0100
Subject: [PATCH 079/428] fix: remove favicon alt text to prevent Firefox flash
 in site picker

Firefox renders alt text while images load from Google's favicon service,
causing "Ci" to flash briefly in the 28px container before the icon appears.
---
 components/dashboard/Sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index abd8fc7..c6752d6 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -132,7 +132,7 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
           {faviconUrl && !faviconFailed && (
             <img
               src={faviconUrl}
-              alt={currentSite?.name || ''}
+              alt=""
               className="w-5 h-5 object-contain"
               onError={() => setFaviconFailed(true)}
             />
-- 
2.49.1


From 323ed9c137ed0a431ce2e64fd34ec5421524d196 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 21:20:08 +0100
Subject: [PATCH 080/428] fix: add skeleton loading for favicon in site picker

Show a pulsing placeholder while the favicon loads from Google's
service instead of an empty container.
---
 components/dashboard/Sidebar.tsx | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index c6752d6..229df36 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -82,6 +82,7 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
   const [open, setOpen] = useState(false)
   const [search, setSearch] = useState('')
   const [faviconFailed, setFaviconFailed] = useState(false)
+  const [faviconLoaded, setFaviconLoaded] = useState(false)
   const ref = useRef<HTMLDivElement>(null)
   const pathname = usePathname()
   const router = useRouter()
@@ -129,14 +130,18 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
         className="w-full flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 overflow-hidden"
       >
         <span className="w-7 h-7 rounded-md bg-brand-orange/10 flex items-center justify-center shrink-0 overflow-hidden">
-          {faviconUrl && !faviconFailed && (
-            <img
-              src={faviconUrl}
-              alt=""
-              className="w-5 h-5 object-contain"
-              onError={() => setFaviconFailed(true)}
-            />
-          )}
+          {faviconUrl && !faviconFailed ? (
+            <>
+              {!faviconLoaded && <span className="w-5 h-5 rounded bg-neutral-200 dark:bg-neutral-700 animate-pulse" />}
+              <img
+                src={faviconUrl}
+                alt=""
+                className={`w-5 h-5 object-contain ${faviconLoaded ? '' : 'hidden'}`}
+                onLoad={() => setFaviconLoaded(true)}
+                onError={() => setFaviconFailed(true)}
+              />
+            </>
+          ) : null}
         </span>
         <Label collapsed={collapsed}>
           <span className="flex items-center gap-1">
-- 
2.49.1


From e8b3227dcf53d7f134a31189bd42d5a116c8f3ae Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 21:23:41 +0100
Subject: [PATCH 081/428] fix: use design system skeleton colors for favicon
 loading

Match the platform skeleton pattern (bg-neutral-100 dark:bg-neutral-800)
instead of the mismatched bg-neutral-200/700.
---
 components/dashboard/Sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 229df36..ce2f135 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -132,7 +132,7 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
         <span className="w-7 h-7 rounded-md bg-brand-orange/10 flex items-center justify-center shrink-0 overflow-hidden">
           {faviconUrl && !faviconFailed ? (
             <>
-              {!faviconLoaded && <span className="w-5 h-5 rounded bg-neutral-200 dark:bg-neutral-700 animate-pulse" />}
+              {!faviconLoaded && <span className="w-5 h-5 rounded animate-pulse bg-neutral-100 dark:bg-neutral-800" />}
               <img
                 src={faviconUrl}
                 alt=""
-- 
2.49.1


From 66d63f7a3b5f4eb8c79bf30302a17ec7f354867a Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 21:59:41 +0100
Subject: [PATCH 082/428] chore: bump @ciphera-net/ui to ^0.2.12

Adds anchor/compact props for sidebar layout support.
---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 620a0e4..f0d99e0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "pulse-frontend",
       "version": "0.15.0-alpha",
       "dependencies": {
-        "@ciphera-net/ui": "^0.2.11",
+        "@ciphera-net/ui": "^0.2.12",
         "@ducanh2912/next-pwa": "^10.2.9",
         "@phosphor-icons/react": "^2.1.10",
         "@simplewebauthn/browser": "^13.2.2",
@@ -1670,9 +1670,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.2.11",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.2.11/f2fd317915796a89d7cdf765e9129732de52cafd",
-      "integrity": "sha512-9ORfLeGPhnujK4bpnbSv+IzlKT8L50JlzS477RSNqBszVw05qbDlg4vtfAxXyKQFhsHBNSuEssbpn4rbOTARiw==",
+      "version": "0.2.12",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.2.12/d6780a19e3f0128431d6ddb3166798f01fba28dc",
+      "integrity": "sha512-LQCG2ErTXBGB7PDRoco9uK6cE+9IenER9Yrxkc0BfvSG46irUwmI19H1WPzLohMQdy2Wu99eu/PP+0X7fQw3wA==",
       "dependencies": {
         "@phosphor-icons/react": "^2.1.10",
         "class-variance-authority": "^0.7.1",
diff --git a/package.json b/package.json
index 1c0b44d..9b2c9b9 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.2.11",
+    "@ciphera-net/ui": "^0.2.12",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@phosphor-icons/react": "^2.1.10",
     "@simplewebauthn/browser": "^13.2.2",
-- 
2.49.1


From f1fc8facb478be50701d52f8db334a84a01a6016 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 22:01:51 +0100
Subject: [PATCH 083/428] feat: move utility items from header to sidebar

Move theme toggle, notifications, app switcher, and user profile from
the top header bar into the sidebar. App switcher at the top (scope
switch), utilities at the bottom. Header now only shows on mobile for
the hamburger menu.
---
 components/dashboard/ContentHeader.tsx        |  99 ++------------
 components/dashboard/Sidebar.tsx              | 121 +++++++++++++++---
 .../notifications/NotificationCenter.tsx      |   8 +-
 3 files changed, 118 insertions(+), 110 deletions(-)

diff --git a/components/dashboard/ContentHeader.tsx b/components/dashboard/ContentHeader.tsx
index fd5ab99..7f67b84 100644
--- a/components/dashboard/ContentHeader.tsx
+++ b/components/dashboard/ContentHeader.tsx
@@ -1,102 +1,21 @@
 'use client'
 
-import { useEffect, useState } from 'react'
-import { useRouter } from 'next/navigation'
-import Link from 'next/link'
-import { ThemeToggle, AppLauncher, UserMenu, type CipheraApp, MenuIcon } from '@ciphera-net/ui'
-import { useAuth } from '@/lib/auth/context'
-import { useSettingsModal } from '@/lib/settings-modal-context'
-import { getUserOrganizations, switchContext, type OrganizationMember } from '@/lib/api/organization'
-import { setSessionAction } from '@/app/actions/auth'
-import { logger } from '@/lib/utils/logger'
-import NotificationCenter from '@/components/notifications/NotificationCenter'
-
-const CIPHERA_APPS: CipheraApp[] = [
-  {
-    id: 'pulse',
-    name: 'Pulse',
-    description: 'Your current app — Privacy-first analytics',
-    icon: 'https://ciphera.net/pulse_icon_no_margins.png',
-    href: 'https://pulse.ciphera.net',
-    isAvailable: false,
-  },
-  {
-    id: 'drop',
-    name: 'Drop',
-    description: 'Secure file sharing',
-    icon: 'https://ciphera.net/drop_icon_no_margins.png',
-    href: 'https://drop.ciphera.net',
-    isAvailable: true,
-  },
-  {
-    id: 'auth',
-    name: 'Auth',
-    description: 'Your Ciphera account settings',
-    icon: 'https://ciphera.net/auth_icon_no_margins.png',
-    href: 'https://auth.ciphera.net',
-    isAvailable: true,
-  },
-]
+import { MenuIcon } from '@ciphera-net/ui'
 
 export default function ContentHeader({
   onMobileMenuOpen,
 }: {
   onMobileMenuOpen: () => void
 }) {
-  const auth = useAuth()
-  const router = useRouter()
-  const { openSettings } = useSettingsModal()
-  const [orgs, setOrgs] = useState<OrganizationMember[]>([])
-
-  useEffect(() => {
-    if (auth.user) {
-      getUserOrganizations()
-        .then((organizations) => setOrgs(Array.isArray(organizations) ? organizations : []))
-        .catch(err => logger.error('Failed to fetch orgs', err))
-    }
-  }, [auth.user])
-
-  const handleSwitchOrganization = async (orgId: string | null) => {
-    if (!orgId) return
-    try {
-      const { access_token } = await switchContext(orgId)
-      await setSessionAction(access_token)
-      sessionStorage.setItem('pulse_switching_org', 'true')
-      window.location.reload()
-    } catch (err) {
-      logger.error('Failed to switch organization', err)
-    }
-  }
-
   return (
-    <div className="shrink-0 flex items-center justify-between border-b border-neutral-200/60 dark:border-neutral-800/60 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl px-4 sm:px-6 py-3.5">
-      {/* Left: mobile hamburger */}
-      <div className="flex items-center gap-3">
-        <button
-          onClick={onMobileMenuOpen}
-          className="md:hidden p-2 -ml-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white"
-          aria-label="Open navigation"
-        >
-          <MenuIcon className="w-5 h-5" />
-        </button>
-      </div>
-
-      {/* Right: actions */}
-      <div className="flex items-center gap-3">
-        <ThemeToggle />
-        <AppLauncher apps={CIPHERA_APPS} currentAppId="pulse" />
-        <NotificationCenter />
-        <UserMenu
-          auth={auth}
-          LinkComponent={Link}
-          orgs={orgs}
-          activeOrgId={auth.user?.org_id}
-          onSwitchOrganization={handleSwitchOrganization}
-          onCreateOrganization={() => router.push('/onboarding')}
-          allowPersonalOrganization={false}
-          onOpenSettings={openSettings}
-        />
-      </div>
+    <div className="shrink-0 flex items-center border-b border-neutral-200/60 dark:border-neutral-800/60 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl px-4 py-3.5 md:hidden">
+      <button
+        onClick={onMobileMenuOpen}
+        className="p-2 -ml-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white"
+        aria-label="Open navigation"
+      >
+        <MenuIcon className="w-5 h-5" />
+      </button>
     </div>
   )
 }
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index ce2f135..e273f7f 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -5,6 +5,10 @@ import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
 import { listSites, type Site } from '@/lib/api/sites'
 import { useAuth } from '@/lib/auth/context'
+import { useSettingsModal } from '@/lib/settings-modal-context'
+import { getUserOrganizations, switchContext, type OrganizationMember } from '@/lib/api/organization'
+import { setSessionAction } from '@/app/actions/auth'
+import { logger } from '@/lib/utils/logger'
 import { FAVICON_SERVICE_URL } from '@/lib/utils/icons'
 import {
   LayoutDashboardIcon,
@@ -20,7 +24,39 @@ import {
   ChevronUpDownIcon,
   PlusIcon,
   XIcon,
+  ThemeToggle,
+  AppLauncher,
+  UserMenu,
+  type CipheraApp,
 } from '@ciphera-net/ui'
+import NotificationCenter from '@/components/notifications/NotificationCenter'
+
+const CIPHERA_APPS: CipheraApp[] = [
+  {
+    id: 'pulse',
+    name: 'Pulse',
+    description: 'Your current app — Privacy-first analytics',
+    icon: 'https://ciphera.net/pulse_icon_no_margins.png',
+    href: 'https://pulse.ciphera.net',
+    isAvailable: false,
+  },
+  {
+    id: 'drop',
+    name: 'Drop',
+    description: 'Secure file sharing',
+    icon: 'https://ciphera.net/drop_icon_no_margins.png',
+    href: 'https://drop.ciphera.net',
+    isAvailable: true,
+  },
+  {
+    id: 'auth',
+    name: 'Auth',
+    description: 'Your Ciphera account settings',
+    icon: 'https://ciphera.net/auth_icon_no_margins.png',
+    href: 'https://auth.ciphera.net',
+    isAvailable: true,
+  },
+]
 
 const SIDEBAR_KEY = 'pulse_sidebar_collapsed'
 const EXPANDED = 256
@@ -239,10 +275,14 @@ export default function Sidebar({
 }: {
   siteId: string; mobileOpen: boolean; onMobileClose: () => void; onMobileOpen: () => void
 }) {
-  const { user } = useAuth()
+  const auth = useAuth()
+  const { user } = auth
   const canEdit = user?.role === 'owner' || user?.role === 'admin'
   const pathname = usePathname()
+  const router = useRouter()
+  const { openSettings } = useSettingsModal()
   const [sites, setSites] = useState<Site[]>([])
+  const [orgs, setOrgs] = useState<OrganizationMember[]>([])
   const [pendingHref, setPendingHref] = useState<string | null>(null)
   const wasCollapsedRef = useRef(false)
   // Safe to read localStorage directly — this component is loaded with ssr:false
@@ -251,6 +291,25 @@ export default function Sidebar({
   })
 
   useEffect(() => { listSites().then(setSites).catch(() => {}) }, [])
+  useEffect(() => {
+    if (user) {
+      getUserOrganizations()
+        .then((organizations) => setOrgs(Array.isArray(organizations) ? organizations : []))
+        .catch(err => logger.error('Failed to fetch orgs', err))
+    }
+  }, [user])
+
+  const handleSwitchOrganization = async (orgId: string | null) => {
+    if (!orgId) return
+    try {
+      const { access_token } = await switchContext(orgId)
+      await setSessionAction(access_token)
+      sessionStorage.setItem('pulse_switching_org', 'true')
+      window.location.reload()
+    } catch (err) {
+      logger.error('Failed to switch organization', err)
+    }
+  }
   useEffect(() => { setPendingHref(null); onMobileClose() }, [pathname, onMobileClose])
 
   useEffect(() => {
@@ -284,6 +343,11 @@ export default function Sidebar({
 
     return (
       <div className="flex flex-col h-full overflow-hidden">
+        {/* App Switcher — top of sidebar (scope-level switch) */}
+        <div className="flex items-center justify-center px-2 pt-3 pb-1 shrink-0">
+          <AppLauncher apps={CIPHERA_APPS} currentAppId="pulse" anchor="right" />
+        </div>
+
         {/* Logo — fixed layout, text fades */}
         <Link href="/" className="flex items-center gap-3 px-[14px] py-4 shrink-0 group overflow-hidden">
           <span className="w-9 h-9 flex items-center justify-center shrink-0">
@@ -315,23 +379,44 @@ export default function Sidebar({
           ))}
         </nav>
 
-        {/* Bottom */}
-        <div className="border-t border-neutral-200/60 dark:border-neutral-800/60 px-2 py-3 space-y-0.5 shrink-0">
-          {canEdit && (
-            <NavLink item={SETTINGS_ITEM} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={handleNavigate} />
-          )}
-          {!isMobile && (
-            <button
-              onClick={toggle}
-              className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 w-full overflow-hidden"
-              title={collapsed ? 'Expand sidebar (press [)' : 'Collapse sidebar (press [)'}
-            >
-              <span className="w-7 h-7 flex items-center justify-center shrink-0">
-                <CollapseLeftIcon className={`w-[18px] h-[18px] transition-transform duration-200 ${c ? 'rotate-180' : ''}`} />
-              </span>
-              <Label collapsed={c}>Collapse</Label>
-            </button>
-          )}
+        {/* Bottom — utility items */}
+        <div className="border-t border-neutral-200/60 dark:border-neutral-800/60 px-2 py-3 shrink-0">
+          {/* Theme, Notifications, Profile */}
+          <div className="flex items-center justify-center gap-1 mb-1">
+            <ThemeToggle />
+            <NotificationCenter anchor="right" />
+            <UserMenu
+              auth={auth}
+              LinkComponent={Link}
+              orgs={orgs}
+              activeOrgId={auth.user?.org_id}
+              onSwitchOrganization={handleSwitchOrganization}
+              onCreateOrganization={() => router.push('/onboarding')}
+              allowPersonalOrganization={false}
+              onOpenSettings={openSettings}
+              compact
+              anchor="right"
+            />
+          </div>
+
+          {/* Settings + Collapse */}
+          <div className="space-y-0.5">
+            {canEdit && (
+              <NavLink item={SETTINGS_ITEM} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={handleNavigate} />
+            )}
+            {!isMobile && (
+              <button
+                onClick={toggle}
+                className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 w-full overflow-hidden"
+                title={collapsed ? 'Expand sidebar (press [)' : 'Collapse sidebar (press [)'}
+              >
+                <span className="w-7 h-7 flex items-center justify-center shrink-0">
+                  <CollapseLeftIcon className={`w-[18px] h-[18px] transition-transform duration-200 ${c ? 'rotate-180' : ''}`} />
+                </span>
+                <Label collapsed={c}>Collapse</Label>
+              </button>
+            )}
+          </div>
         </div>
       </div>
     )
diff --git a/components/notifications/NotificationCenter.tsx b/components/notifications/NotificationCenter.tsx
index 7576864..2b74a18 100644
--- a/components/notifications/NotificationCenter.tsx
+++ b/components/notifications/NotificationCenter.tsx
@@ -37,7 +37,7 @@ function BellIcon({ className }: { className?: string }) {
 const LOADING_DELAY_MS = 250
 const POLL_INTERVAL_MS = 90_000
 
-export default function NotificationCenter() {
+export default function NotificationCenter({ anchor = 'bottom' }: { anchor?: 'bottom' | 'right' }) {
   const [open, setOpen] = useState(false)
   const [notifications, setNotifications] = useState<Notification[]>([])
   const [unreadCount, setUnreadCount] = useState(0)
@@ -152,7 +152,11 @@ export default function NotificationCenter() {
           id="notification-dropdown"
           role="dialog"
           aria-label="Notifications"
-          className="fixed left-4 right-4 top-16 sm:absolute sm:left-auto sm:right-0 sm:top-full sm:mt-2 sm:w-96 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden z-[100]"
+          className={`fixed left-4 right-4 top-16 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden z-[100] ${
+            anchor === 'right'
+              ? 'sm:absolute sm:left-full sm:top-0 sm:ml-2 sm:right-auto sm:w-96'
+              : 'sm:absolute sm:left-auto sm:right-0 sm:top-full sm:mt-2 sm:w-96'
+          }`}
         >
           <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
             <h3 className="font-semibold text-neutral-900 dark:text-white">Notifications</h3>
-- 
2.49.1


From 342e3705e8f0a8c9e9a089805b22906659dd30e6 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 22:27:53 +0100
Subject: [PATCH 084/428] fix: stack sidebar utility icons vertically

Horizontal row didn't fit in 64px collapsed sidebar. Stack theme,
notifications, and profile icons vertically like nav items.
---
 components/dashboard/Sidebar.tsx | 36 +++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index e273f7f..7d75ed3 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -382,21 +382,27 @@ export default function Sidebar({
         {/* Bottom — utility items */}
         <div className="border-t border-neutral-200/60 dark:border-neutral-800/60 px-2 py-3 shrink-0">
           {/* Theme, Notifications, Profile */}
-          <div className="flex items-center justify-center gap-1 mb-1">
-            <ThemeToggle />
-            <NotificationCenter anchor="right" />
-            <UserMenu
-              auth={auth}
-              LinkComponent={Link}
-              orgs={orgs}
-              activeOrgId={auth.user?.org_id}
-              onSwitchOrganization={handleSwitchOrganization}
-              onCreateOrganization={() => router.push('/onboarding')}
-              allowPersonalOrganization={false}
-              onOpenSettings={openSettings}
-              compact
-              anchor="right"
-            />
+          <div className="flex flex-col items-center gap-0.5 mb-1">
+            <div className="flex items-center justify-center w-full rounded-lg px-2.5 py-2">
+              <ThemeToggle />
+            </div>
+            <div className="flex items-center justify-center w-full rounded-lg px-2.5 py-2">
+              <NotificationCenter anchor="right" />
+            </div>
+            <div className="flex items-center justify-center w-full rounded-lg px-2.5 py-2">
+              <UserMenu
+                auth={auth}
+                LinkComponent={Link}
+                orgs={orgs}
+                activeOrgId={auth.user?.org_id}
+                onSwitchOrganization={handleSwitchOrganization}
+                onCreateOrganization={() => router.push('/onboarding')}
+                allowPersonalOrganization={false}
+                onOpenSettings={openSettings}
+                compact
+                anchor="right"
+              />
+            </div>
           </div>
 
           {/* Settings + Collapse */}
-- 
2.49.1


From 0b545eaa76b1c162a7a457526e2a98befec560ed Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 22:32:56 +0100
Subject: [PATCH 085/428] fix: align sidebar utility items with nav item layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Use left-aligned rows with fading labels for theme, notifications,
and profile — matching the nav items pattern. Fix app switcher
alignment at top to match logo row.
---
 components/dashboard/Sidebar.tsx | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 7d75ed3..e8d080b 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -344,8 +344,13 @@ export default function Sidebar({
     return (
       <div className="flex flex-col h-full overflow-hidden">
         {/* App Switcher — top of sidebar (scope-level switch) */}
-        <div className="flex items-center justify-center px-2 pt-3 pb-1 shrink-0">
-          <AppLauncher apps={CIPHERA_APPS} currentAppId="pulse" anchor="right" />
+        <div className="flex items-center gap-2.5 px-[14px] pt-3 pb-1 shrink-0 overflow-hidden">
+          <span className="w-9 h-9 flex items-center justify-center shrink-0">
+            <AppLauncher apps={CIPHERA_APPS} currentAppId="pulse" anchor="right" />
+          </span>
+          <Label collapsed={c}>
+            <span className="text-xs font-medium text-neutral-400 dark:text-neutral-500 uppercase tracking-wider">Ciphera</span>
+          </Label>
         </div>
 
         {/* Logo — fixed layout, text fades */}
@@ -382,14 +387,16 @@ export default function Sidebar({
         {/* Bottom — utility items */}
         <div className="border-t border-neutral-200/60 dark:border-neutral-800/60 px-2 py-3 shrink-0">
           {/* Theme, Notifications, Profile */}
-          <div className="flex flex-col items-center gap-0.5 mb-1">
-            <div className="flex items-center justify-center w-full rounded-lg px-2.5 py-2">
+          <div className="space-y-0.5 mb-1">
+            <div className="flex items-center gap-2.5 rounded-lg px-2.5 py-1 overflow-hidden">
               <ThemeToggle />
+              <Label collapsed={c}>Theme</Label>
             </div>
-            <div className="flex items-center justify-center w-full rounded-lg px-2.5 py-2">
+            <div className="flex items-center gap-2.5 rounded-lg px-2.5 py-1 overflow-hidden">
               <NotificationCenter anchor="right" />
+              <Label collapsed={c}>Notifications</Label>
             </div>
-            <div className="flex items-center justify-center w-full rounded-lg px-2.5 py-2">
+            <div className="flex items-center gap-2.5 rounded-lg px-2.5 py-1 overflow-hidden">
               <UserMenu
                 auth={auth}
                 LinkComponent={Link}
@@ -402,6 +409,7 @@ export default function Sidebar({
                 compact
                 anchor="right"
               />
+              <Label collapsed={c}>{user?.display_name?.trim() || 'Profile'}</Label>
             </div>
           </div>
 
-- 
2.49.1


From 2fa498fb8fa6de938e60664722a53e55208b3510 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 22:48:52 +0100
Subject: [PATCH 086/428] feat: sidebar utility items match NavLink styling

Use variant='sidebar' for ThemeToggle, NotificationCenter, and
compact UserMenu so they render with the same icon+label layout
as nav items. Fixed dropdown positioning uses fixed to escape
sidebar overflow:hidden.
---
 components/dashboard/Sidebar.tsx              | 39 ++++++------
 .../notifications/NotificationCenter.tsx      | 60 +++++++++++++++----
 package-lock.json                             |  8 +--
 package.json                                  |  2 +-
 4 files changed, 73 insertions(+), 36 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index e8d080b..fb74190 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -386,31 +386,28 @@ export default function Sidebar({
 
         {/* Bottom — utility items */}
         <div className="border-t border-neutral-200/60 dark:border-neutral-800/60 px-2 py-3 shrink-0">
-          {/* Theme, Notifications, Profile */}
+          {/* Theme, Notifications, Profile — same layout as nav items */}
           <div className="space-y-0.5 mb-1">
-            <div className="flex items-center gap-2.5 rounded-lg px-2.5 py-1 overflow-hidden">
-              <ThemeToggle />
+            <ThemeToggle variant="sidebar">
               <Label collapsed={c}>Theme</Label>
-            </div>
-            <div className="flex items-center gap-2.5 rounded-lg px-2.5 py-1 overflow-hidden">
-              <NotificationCenter anchor="right" />
+            </ThemeToggle>
+            <NotificationCenter anchor="right" variant="sidebar">
               <Label collapsed={c}>Notifications</Label>
-            </div>
-            <div className="flex items-center gap-2.5 rounded-lg px-2.5 py-1 overflow-hidden">
-              <UserMenu
-                auth={auth}
-                LinkComponent={Link}
-                orgs={orgs}
-                activeOrgId={auth.user?.org_id}
-                onSwitchOrganization={handleSwitchOrganization}
-                onCreateOrganization={() => router.push('/onboarding')}
-                allowPersonalOrganization={false}
-                onOpenSettings={openSettings}
-                compact
-                anchor="right"
-              />
+            </NotificationCenter>
+            <UserMenu
+              auth={auth}
+              LinkComponent={Link}
+              orgs={orgs}
+              activeOrgId={auth.user?.org_id}
+              onSwitchOrganization={handleSwitchOrganization}
+              onCreateOrganization={() => router.push('/onboarding')}
+              allowPersonalOrganization={false}
+              onOpenSettings={openSettings}
+              compact
+              anchor="right"
+            >
               <Label collapsed={c}>{user?.display_name?.trim() || 'Profile'}</Label>
-            </div>
+            </UserMenu>
           </div>
 
           {/* Settings + Collapse */}
diff --git a/components/notifications/NotificationCenter.tsx b/components/notifications/NotificationCenter.tsx
index 2b74a18..945bf79 100644
--- a/components/notifications/NotificationCenter.tsx
+++ b/components/notifications/NotificationCenter.tsx
@@ -4,7 +4,7 @@
  * @file Notification center: bell icon with dropdown of recent notifications.
  */
 
-import { useEffect, useState, useRef } from 'react'
+import { useEffect, useState, useRef, useCallback } from 'react'
 import Link from 'next/link'
 import { listNotifications, markNotificationRead, markAllNotificationsRead, type Notification } from '@/lib/api/notifications'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
@@ -37,13 +37,31 @@ function BellIcon({ className }: { className?: string }) {
 const LOADING_DELAY_MS = 250
 const POLL_INTERVAL_MS = 90_000
 
-export default function NotificationCenter({ anchor = 'bottom' }: { anchor?: 'bottom' | 'right' }) {
+interface NotificationCenterProps {
+  /** Where the dropdown opens. 'right' uses fixed positioning to escape overflow:hidden containers. */
+  anchor?: 'bottom' | 'right'
+  /** Render variant. 'sidebar' matches NavLink styling. */
+  variant?: 'default' | 'sidebar'
+  /** Optional label content rendered after the icon (useful for sidebar variant with fading labels). */
+  children?: React.ReactNode
+}
+
+export default function NotificationCenter({ anchor = 'bottom', variant = 'default', children }: NotificationCenterProps) {
   const [open, setOpen] = useState(false)
   const [notifications, setNotifications] = useState<Notification[]>([])
   const [unreadCount, setUnreadCount] = useState(0)
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const dropdownRef = useRef<HTMLDivElement>(null)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const [fixedPos, setFixedPos] = useState<{ left: number; top: number } | null>(null)
+
+  const updatePosition = useCallback(() => {
+    if (anchor === 'right' && buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect()
+      setFixedPos({ left: rect.right + 8, top: rect.top })
+    }
+  }, [anchor])
 
   const fetchUnreadCount = async () => {
     try {
@@ -74,8 +92,9 @@ export default function NotificationCenter({ anchor = 'bottom' }: { anchor?: 'bo
   useEffect(() => {
     if (open) {
       fetchNotifications()
+      updatePosition()
     }
-  }, [open])
+  }, [open, updatePosition])
 
   // * Poll unread count in background (when authenticated)
   useEffect(() => {
@@ -130,20 +149,40 @@ export default function NotificationCenter({ anchor = 'bottom' }: { anchor?: 'bo
     setOpen(false)
   }
 
+  const isSidebar = variant === 'sidebar'
+
   return (
     <div className="relative" ref={dropdownRef}>
       <button
+        ref={buttonRef}
         type="button"
         onClick={() => setOpen(!open)}
         aria-expanded={open}
         aria-haspopup="true"
         aria-controls={open ? 'notification-dropdown' : undefined}
-        className="relative p-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white rounded-lg hover:bg-neutral-100/50 dark:hover:bg-neutral-800/50 transition-colors"
+        className={isSidebar
+          ? 'relative flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 w-full overflow-hidden transition-colors'
+          : 'relative p-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white rounded-lg hover:bg-neutral-100/50 dark:hover:bg-neutral-800/50 transition-colors'
+        }
         aria-label={unreadCount > 0 ? `Notifications, ${unreadCount} unread` : 'Notifications'}
       >
-        <BellIcon />
-        {unreadCount > 0 && (
-          <span className="absolute top-1 right-1 w-2 h-2 bg-brand-orange rounded-full" aria-hidden="true" />
+        {isSidebar ? (
+          <>
+            <span className="w-7 h-7 flex items-center justify-center shrink-0 relative">
+              <BellIcon className="h-[18px] w-[18px]" />
+              {unreadCount > 0 && (
+                <span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-brand-orange rounded-full" aria-hidden="true" />
+              )}
+            </span>
+            {children}
+          </>
+        ) : (
+          <>
+            <BellIcon />
+            {unreadCount > 0 && (
+              <span className="absolute top-1 right-1 w-2 h-2 bg-brand-orange rounded-full" aria-hidden="true" />
+            )}
+          </>
         )}
       </button>
 
@@ -152,11 +191,12 @@ export default function NotificationCenter({ anchor = 'bottom' }: { anchor?: 'bo
           id="notification-dropdown"
           role="dialog"
           aria-label="Notifications"
-          className={`fixed left-4 right-4 top-16 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden z-[100] ${
+          className={`bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden z-[100] ${
             anchor === 'right'
-              ? 'sm:absolute sm:left-full sm:top-0 sm:ml-2 sm:right-auto sm:w-96'
-              : 'sm:absolute sm:left-auto sm:right-0 sm:top-full sm:mt-2 sm:w-96'
+              ? 'fixed w-96 origin-top-left'
+              : 'fixed left-4 right-4 top-16 sm:absolute sm:left-auto sm:right-0 sm:top-full sm:mt-2 sm:w-96'
           }`}
+          style={anchor === 'right' && fixedPos ? { left: fixedPos.left, top: fixedPos.top } : undefined}
         >
           <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
             <h3 className="font-semibold text-neutral-900 dark:text-white">Notifications</h3>
diff --git a/package-lock.json b/package-lock.json
index f0d99e0..30681a7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "pulse-frontend",
       "version": "0.15.0-alpha",
       "dependencies": {
-        "@ciphera-net/ui": "^0.2.12",
+        "@ciphera-net/ui": "^0.2.13",
         "@ducanh2912/next-pwa": "^10.2.9",
         "@phosphor-icons/react": "^2.1.10",
         "@simplewebauthn/browser": "^13.2.2",
@@ -1670,9 +1670,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.2.12",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.2.12/d6780a19e3f0128431d6ddb3166798f01fba28dc",
-      "integrity": "sha512-LQCG2ErTXBGB7PDRoco9uK6cE+9IenER9Yrxkc0BfvSG46irUwmI19H1WPzLohMQdy2Wu99eu/PP+0X7fQw3wA==",
+      "version": "0.2.13",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.2.13/710acb1221e5906b8fd622ff6c77b469781c449d",
+      "integrity": "sha512-pHo0DkkjAr7qlnPy1GBtHm3XFQlUC8b/FQM5PCu9JvW3pHg6znufyCP/8Wqbu6jOIt4C+c6CSKvMKzeYPKi42Q==",
       "dependencies": {
         "@phosphor-icons/react": "^2.1.10",
         "class-variance-authority": "^0.7.1",
diff --git a/package.json b/package.json
index 9b2c9b9..7f9eb1a 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.2.12",
+    "@ciphera-net/ui": "^0.2.13",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@phosphor-icons/react": "^2.1.10",
     "@simplewebauthn/browser": "^13.2.2",
-- 
2.49.1


From 3e67af5646aaa758a79dd271dc6cb2188b5de177 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 19 Mar 2026 00:23:08 +0100
Subject: [PATCH 087/428] fix: sidebar dropdown clipping, settings placement,
 and theme removal

- Add relative z-10 to sidebar aside to fix dropdowns (AppSwitcher,
  Notifications, UserMenu) rendering behind content area due to
  backdrop-blur-xl creating a stacking context
- Move Site Settings from bottom utility section into Infrastructure
  nav group where it logically belongs
- Remove ThemeToggle from sidebar (available in user settings)
- Rename Settings to Site Settings for clarity
---
 components/dashboard/Sidebar.tsx | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index fb74190..7178ade 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -24,7 +24,6 @@ import {
   ChevronUpDownIcon,
   PlusIcon,
   XIcon,
-  ThemeToggle,
   AppLauncher,
   UserMenu,
   type CipheraApp,
@@ -94,7 +93,7 @@ const NAV_GROUPS: NavGroup[] = [
 ]
 
 const SETTINGS_ITEM: NavItem = {
-  label: 'Settings', href: (id) => `/sites/${id}/settings`, icon: SettingsIcon, matchPrefix: true,
+  label: 'Site Settings', href: (id) => `/sites/${id}/settings`, icon: SettingsIcon, matchPrefix: true,
 }
 
 // Label that fades with the sidebar — always in the DOM, never removed
@@ -379,6 +378,9 @@ export default function Sidebar({
                 {group.items.map((item) => (
                   <NavLink key={item.label} item={item} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={handleNavigate} />
                 ))}
+                {group.label === 'Infrastructure' && canEdit && (
+                  <NavLink item={SETTINGS_ITEM} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={handleNavigate} />
+                )}
               </div>
             </div>
           ))}
@@ -386,11 +388,8 @@ export default function Sidebar({
 
         {/* Bottom — utility items */}
         <div className="border-t border-neutral-200/60 dark:border-neutral-800/60 px-2 py-3 shrink-0">
-          {/* Theme, Notifications, Profile — same layout as nav items */}
+          {/* Notifications, Profile — same layout as nav items */}
           <div className="space-y-0.5 mb-1">
-            <ThemeToggle variant="sidebar">
-              <Label collapsed={c}>Theme</Label>
-            </ThemeToggle>
             <NotificationCenter anchor="right" variant="sidebar">
               <Label collapsed={c}>Notifications</Label>
             </NotificationCenter>
@@ -412,9 +411,6 @@ export default function Sidebar({
 
           {/* Settings + Collapse */}
           <div className="space-y-0.5">
-            {canEdit && (
-              <NavLink item={SETTINGS_ITEM} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={handleNavigate} />
-            )}
             {!isMobile && (
               <button
                 onClick={toggle}
@@ -437,7 +433,7 @@ export default function Sidebar({
     <>
       {/* Desktop — ssr:false means this only renders on client, no hydration flash */}
       <aside
-        className="hidden md:flex flex-col shrink-0 border-r border-neutral-200/60 dark:border-neutral-800/60 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl overflow-hidden"
+        className="hidden md:flex flex-col shrink-0 border-r border-neutral-200/60 dark:border-neutral-800/60 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl overflow-hidden relative z-10"
         style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
       >
         {sidebarContent(false)}
-- 
2.49.1


From 1755dcb9dc66e363b36617bdc5167be1e3f3a813 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 19 Mar 2026 00:35:51 +0100
Subject: [PATCH 088/428] fix: portal sidebar dropdowns to escape
 backdrop-filter clipping

Bump @ciphera-net/ui to 0.2.14 which portals AppLauncher and UserMenu
dropdowns via createPortal when anchor="right". Apply the same fix to
NotificationCenter. This escapes the sidebar's backdrop-filter
containing block that was clipping all fixed-positioned dropdowns.
---
 .../notifications/NotificationCenter.tsx      | 255 +++++++++---------
 package-lock.json                             |   8 +-
 package.json                                  |   2 +-
 3 files changed, 139 insertions(+), 126 deletions(-)

diff --git a/components/notifications/NotificationCenter.tsx b/components/notifications/NotificationCenter.tsx
index 945bf79..bda781c 100644
--- a/components/notifications/NotificationCenter.tsx
+++ b/components/notifications/NotificationCenter.tsx
@@ -5,6 +5,7 @@
  */
 
 import { useEffect, useState, useRef, useCallback } from 'react'
+import { createPortal } from 'react-dom'
 import Link from 'next/link'
 import { listNotifications, markNotificationRead, markAllNotificationsRead, type Notification } from '@/lib/api/notifications'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
@@ -53,6 +54,7 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const dropdownRef = useRef<HTMLDivElement>(null)
+  const panelRef = useRef<HTMLDivElement>(null)
   const buttonRef = useRef<HTMLButtonElement>(null)
   const [fixedPos, setFixedPos] = useState<{ left: number; top: number } | null>(null)
 
@@ -107,7 +109,11 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
   useEffect(() => {
     if (!open) return
     function handleClickOutside(e: MouseEvent) {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+      const target = e.target as Node
+      if (
+        dropdownRef.current && !dropdownRef.current.contains(target) &&
+        (!panelRef.current || !panelRef.current.contains(target))
+      ) {
         setOpen(false)
       }
     }
@@ -186,130 +192,137 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
         )}
       </button>
 
-      {open && (
-        <div
-          id="notification-dropdown"
-          role="dialog"
-          aria-label="Notifications"
-          className={`bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden z-[100] ${
-            anchor === 'right'
-              ? 'fixed w-96 origin-top-left'
-              : 'fixed left-4 right-4 top-16 sm:absolute sm:left-auto sm:right-0 sm:top-full sm:mt-2 sm:w-96'
-          }`}
-          style={anchor === 'right' && fixedPos ? { left: fixedPos.left, top: fixedPos.top } : undefined}
-        >
-          <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
-            <h3 className="font-semibold text-neutral-900 dark:text-white">Notifications</h3>
-            {unreadCount > 0 && (
-              <button
-                type="button"
-                onClick={handleMarkAllRead}
-                aria-label="Mark all notifications as read"
+      {(() => {
+        const panel = open ? (
+          <div
+            ref={panelRef}
+            id="notification-dropdown"
+            role="dialog"
+            aria-label="Notifications"
+            className={`bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden z-[100] ${
+              anchor === 'right'
+                ? 'fixed w-96 origin-top-left'
+                : 'fixed left-4 right-4 top-16 sm:absolute sm:left-auto sm:right-0 sm:top-full sm:mt-2 sm:w-96'
+            }`}
+            style={anchor === 'right' && fixedPos ? { left: fixedPos.left, top: fixedPos.top } : undefined}
+          >
+            <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
+              <h3 className="font-semibold text-neutral-900 dark:text-white">Notifications</h3>
+              {unreadCount > 0 && (
+                <button
+                  type="button"
+                  onClick={handleMarkAllRead}
+                  aria-label="Mark all notifications as read"
+                  className="text-sm text-brand-orange hover:underline"
+                >
+                  Mark all read
+                </button>
+              )}
+            </div>
+
+            <div className="max-h-80 overflow-y-auto">
+              {loading && (
+                <div className="p-3 space-y-1">
+                  {Array.from({ length: 4 }).map((_, i) => (
+                    <div key={i} className="flex gap-3 px-4 py-3">
+                      <SkeletonCircle className="h-8 w-8 shrink-0" />
+                      <div className="flex-1 space-y-1.5">
+                        <SkeletonLine className="h-3.5 w-3/4" />
+                        <SkeletonLine className="h-3 w-1/2" />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+              {error && (
+                <div className="p-6 text-center text-red-500 text-sm">{error}</div>
+              )}
+              {!loading && !error && (notifications?.length ?? 0) === 0 && (
+                <div className="p-6 text-center text-neutral-500 dark:text-neutral-400 text-sm">
+                  No notifications yet
+                </div>
+              )}
+              {!loading && !error && (notifications?.length ?? 0) > 0 && (
+                <ul className="divide-y divide-neutral-200 dark:divide-neutral-700">
+                  {(notifications ?? []).map((n) => (
+                    <li key={n.id}>
+                      {n.link_url ? (
+                        <Link
+                          href={n.link_url}
+                          onClick={() => handleNotificationClick(n)}
+                          className={`block px-4 py-3 hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors ${!n.read ? 'bg-brand-orange/5 dark:bg-brand-orange/10' : ''}`}
+                        >
+                          <div className="flex gap-3">
+                            {getTypeIcon(n.type)}
+                            <div className="min-w-0 flex-1">
+                              <p className={`text-sm ${!n.read ? 'font-medium' : ''} text-neutral-900 dark:text-white`}>
+                                {n.title}
+                              </p>
+                              {n.body && (
+                                <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5 line-clamp-2">
+                                  {n.body}
+                                </p>
+                              )}
+                              <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-1">
+                                {formatTimeAgo(n.created_at)}
+                              </p>
+                            </div>
+                          </div>
+                        </Link>
+                      ) : (
+                        <button
+                          type="button"
+                          onClick={() => handleNotificationClick(n)}
+                          className={`w-full text-left block px-4 py-3 hover:bg-neutral-50 dark:hover:bg-neutral-800/50 cursor-pointer ${!n.read ? 'bg-brand-orange/5 dark:bg-brand-orange/10' : ''}`}
+                        >
+                          <div className="flex gap-3">
+                            {getTypeIcon(n.type)}
+                            <div className="min-w-0 flex-1">
+                              <p className={`text-sm ${!n.read ? 'font-medium' : ''} text-neutral-900 dark:text-white`}>
+                                {n.title}
+                              </p>
+                              {n.body && (
+                                <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5 line-clamp-2">
+                                  {n.body}
+                                </p>
+                              )}
+                              <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-1">
+                                {formatTimeAgo(n.created_at)}
+                              </p>
+                            </div>
+                          </div>
+                        </button>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+
+            <div className="border-t border-neutral-200 dark:border-neutral-700 px-4 py-3 flex items-center justify-between gap-2">
+              <Link
+                href="/notifications"
+                onClick={() => setOpen(false)}
                 className="text-sm text-brand-orange hover:underline"
               >
-                Mark all read
-              </button>
-            )}
+                View all
+              </Link>
+              <Link
+                href="/org-settings?tab=notifications"
+                onClick={() => setOpen(false)}
+                className="flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors"
+              >
+                <SettingsIcon className="w-4 h-4" aria-hidden="true" />
+                Manage settings
+              </Link>
+            </div>
           </div>
+        ) : null
 
-          <div className="max-h-80 overflow-y-auto">
-            {loading && (
-              <div className="p-3 space-y-1">
-                {Array.from({ length: 4 }).map((_, i) => (
-                  <div key={i} className="flex gap-3 px-4 py-3">
-                    <SkeletonCircle className="h-8 w-8 shrink-0" />
-                    <div className="flex-1 space-y-1.5">
-                      <SkeletonLine className="h-3.5 w-3/4" />
-                      <SkeletonLine className="h-3 w-1/2" />
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-            {error && (
-              <div className="p-6 text-center text-red-500 text-sm">{error}</div>
-            )}
-            {!loading && !error && (notifications?.length ?? 0) === 0 && (
-              <div className="p-6 text-center text-neutral-500 dark:text-neutral-400 text-sm">
-                No notifications yet
-              </div>
-            )}
-            {!loading && !error && (notifications?.length ?? 0) > 0 && (
-              <ul className="divide-y divide-neutral-200 dark:divide-neutral-700">
-                {(notifications ?? []).map((n) => (
-                  <li key={n.id}>
-                    {n.link_url ? (
-                      <Link
-                        href={n.link_url}
-                        onClick={() => handleNotificationClick(n)}
-                        className={`block px-4 py-3 hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors ${!n.read ? 'bg-brand-orange/5 dark:bg-brand-orange/10' : ''}`}
-                      >
-                        <div className="flex gap-3">
-                          {getTypeIcon(n.type)}
-                          <div className="min-w-0 flex-1">
-                            <p className={`text-sm ${!n.read ? 'font-medium' : ''} text-neutral-900 dark:text-white`}>
-                              {n.title}
-                            </p>
-                            {n.body && (
-                              <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5 line-clamp-2">
-                                {n.body}
-                              </p>
-                            )}
-                            <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-1">
-                              {formatTimeAgo(n.created_at)}
-                            </p>
-                          </div>
-                        </div>
-                      </Link>
-                    ) : (
-                      <button
-                        type="button"
-                        onClick={() => handleNotificationClick(n)}
-                        className={`w-full text-left block px-4 py-3 hover:bg-neutral-50 dark:hover:bg-neutral-800/50 cursor-pointer ${!n.read ? 'bg-brand-orange/5 dark:bg-brand-orange/10' : ''}`}
-                      >
-                        <div className="flex gap-3">
-                          {getTypeIcon(n.type)}
-                          <div className="min-w-0 flex-1">
-                            <p className={`text-sm ${!n.read ? 'font-medium' : ''} text-neutral-900 dark:text-white`}>
-                              {n.title}
-                            </p>
-                            {n.body && (
-                              <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5 line-clamp-2">
-                                {n.body}
-                              </p>
-                            )}
-                            <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-1">
-                              {formatTimeAgo(n.created_at)}
-                            </p>
-                          </div>
-                        </div>
-                      </button>
-                    )}
-                  </li>
-                ))}
-              </ul>
-            )}
-          </div>
-
-          <div className="border-t border-neutral-200 dark:border-neutral-700 px-4 py-3 flex items-center justify-between gap-2">
-            <Link
-              href="/notifications"
-              onClick={() => setOpen(false)}
-              className="text-sm text-brand-orange hover:underline"
-            >
-              View all
-            </Link>
-            <Link
-              href="/org-settings?tab=notifications"
-              onClick={() => setOpen(false)}
-              className="flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors"
-            >
-              <SettingsIcon className="w-4 h-4" aria-hidden="true" />
-              Manage settings
-            </Link>
-          </div>
-        </div>
-      )}
+        return anchor === 'right' && panel && typeof document !== 'undefined'
+          ? createPortal(panel, document.body)
+          : panel
+      })()}
     </div>
   )
 }
diff --git a/package-lock.json b/package-lock.json
index 30681a7..104a248 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "pulse-frontend",
       "version": "0.15.0-alpha",
       "dependencies": {
-        "@ciphera-net/ui": "^0.2.13",
+        "@ciphera-net/ui": "^0.2.14",
         "@ducanh2912/next-pwa": "^10.2.9",
         "@phosphor-icons/react": "^2.1.10",
         "@simplewebauthn/browser": "^13.2.2",
@@ -1670,9 +1670,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.2.13",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.2.13/710acb1221e5906b8fd622ff6c77b469781c449d",
-      "integrity": "sha512-pHo0DkkjAr7qlnPy1GBtHm3XFQlUC8b/FQM5PCu9JvW3pHg6znufyCP/8Wqbu6jOIt4C+c6CSKvMKzeYPKi42Q==",
+      "version": "0.2.14",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.2.14/6502f8587e7e841c507c670c212f801e047a85a9",
+      "integrity": "sha512-Jb2tG4DNXEwYMLdyQg+BwBpUKcMtmsAnkrtbenhQEiIngRpwgS7YyjtJVa0aDMPkFD4uq6nVMLoSRTMNgxekMg==",
       "dependencies": {
         "@phosphor-icons/react": "^2.1.10",
         "class-variance-authority": "^0.7.1",
diff --git a/package.json b/package.json
index 7f9eb1a..5f197de 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.2.13",
+    "@ciphera-net/ui": "^0.2.14",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@phosphor-icons/react": "^2.1.10",
     "@simplewebauthn/browser": "^13.2.2",
-- 
2.49.1


From 89343caf6563cfaff7c71c22868bc070ea52be9e Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 19 Mar 2026 00:43:58 +0100
Subject: [PATCH 089/428] fix: clamp notification dropdown to viewport, bump ui
 to 0.2.15

Apply viewport clamping to NotificationCenter dropdown positioning
and bump @ciphera-net/ui to 0.2.15 which clamps AppLauncher and
UserMenu dropdowns the same way.
---
 components/notifications/NotificationCenter.tsx | 8 +++++++-
 package-lock.json                               | 8 ++++----
 package.json                                    | 2 +-
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/components/notifications/NotificationCenter.tsx b/components/notifications/NotificationCenter.tsx
index bda781c..8c50045 100644
--- a/components/notifications/NotificationCenter.tsx
+++ b/components/notifications/NotificationCenter.tsx
@@ -61,7 +61,12 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
   const updatePosition = useCallback(() => {
     if (anchor === 'right' && buttonRef.current) {
       const rect = buttonRef.current.getBoundingClientRect()
-      setFixedPos({ left: rect.right + 8, top: rect.top })
+      let top = rect.top
+      if (panelRef.current) {
+        const maxTop = window.innerHeight - panelRef.current.offsetHeight - 8
+        top = Math.min(top, Math.max(8, maxTop))
+      }
+      setFixedPos({ left: rect.right + 8, top })
     }
   }, [anchor])
 
@@ -95,6 +100,7 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
     if (open) {
       fetchNotifications()
       updatePosition()
+      requestAnimationFrame(() => updatePosition())
     }
   }, [open, updatePosition])
 
diff --git a/package-lock.json b/package-lock.json
index 104a248..587ffc0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "pulse-frontend",
       "version": "0.15.0-alpha",
       "dependencies": {
-        "@ciphera-net/ui": "^0.2.14",
+        "@ciphera-net/ui": "^0.2.15",
         "@ducanh2912/next-pwa": "^10.2.9",
         "@phosphor-icons/react": "^2.1.10",
         "@simplewebauthn/browser": "^13.2.2",
@@ -1670,9 +1670,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.2.14",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.2.14/6502f8587e7e841c507c670c212f801e047a85a9",
-      "integrity": "sha512-Jb2tG4DNXEwYMLdyQg+BwBpUKcMtmsAnkrtbenhQEiIngRpwgS7YyjtJVa0aDMPkFD4uq6nVMLoSRTMNgxekMg==",
+      "version": "0.2.15",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.2.15/ec35ffe3be80cb5deca6a05bd2d36d636333a4a9",
+      "integrity": "sha512-Y2snU21OFbcarVq6QbSkW/pbL3BL9SePf8dBzC36zUvDp5TuhIU7E/21ydVGxGH6Ye6wKw2G1Qsv3xsnsumyPA==",
       "dependencies": {
         "@phosphor-icons/react": "^2.1.10",
         "class-variance-authority": "^0.7.1",
diff --git a/package.json b/package.json
index 5f197de..c13b8aa 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.2.14",
+    "@ciphera-net/ui": "^0.2.15",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@phosphor-icons/react": "^2.1.10",
     "@simplewebauthn/browser": "^13.2.2",
-- 
2.49.1


From a31f183b7b498432ba37f42a529432a6d1f537ee Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 19 Mar 2026 00:48:46 +0100
Subject: [PATCH 090/428] fix: recalculate notification dropdown position after
 content loads

The dropdown position was only clamped on initial render when the panel
was empty. After async notifications loaded and the panel grew taller,
the position was never recalculated. Add an effect that re-clamps when
notifications or loading state changes.
---
 components/notifications/NotificationCenter.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/components/notifications/NotificationCenter.tsx b/components/notifications/NotificationCenter.tsx
index 8c50045..cbbb0b3 100644
--- a/components/notifications/NotificationCenter.tsx
+++ b/components/notifications/NotificationCenter.tsx
@@ -104,6 +104,13 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
     }
   }, [open, updatePosition])
 
+  // Recalculate position after content changes (notifications load, loading state)
+  useEffect(() => {
+    if (open && anchor === 'right') {
+      requestAnimationFrame(() => updatePosition())
+    }
+  }, [notifications, loading, open, anchor, updatePosition])
+
   // * Poll unread count in background (when authenticated)
   useEffect(() => {
     fetchUnreadCount()
-- 
2.49.1


From dd76aed157805cb2420141bc8f237fe1757db1ed Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 19 Mar 2026 00:54:50 +0100
Subject: [PATCH 091/428] fix: use bottom positioning for notification dropdown

Instead of measuring panel height with unreliable RAF timing, use
CSS bottom positioning when the button is in the lower half of the
viewport. The dropdown grows upward, no measurement needed.
---
 .../notifications/NotificationCenter.tsx      | 24 +++++++------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/components/notifications/NotificationCenter.tsx b/components/notifications/NotificationCenter.tsx
index cbbb0b3..ac416e5 100644
--- a/components/notifications/NotificationCenter.tsx
+++ b/components/notifications/NotificationCenter.tsx
@@ -56,17 +56,17 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
   const dropdownRef = useRef<HTMLDivElement>(null)
   const panelRef = useRef<HTMLDivElement>(null)
   const buttonRef = useRef<HTMLButtonElement>(null)
-  const [fixedPos, setFixedPos] = useState<{ left: number; top: number } | null>(null)
+  const [fixedPos, setFixedPos] = useState<{ left: number; top?: number; bottom?: number } | null>(null)
 
   const updatePosition = useCallback(() => {
     if (anchor === 'right' && buttonRef.current) {
       const rect = buttonRef.current.getBoundingClientRect()
-      let top = rect.top
-      if (panelRef.current) {
-        const maxTop = window.innerHeight - panelRef.current.offsetHeight - 8
-        top = Math.min(top, Math.max(8, maxTop))
+      const left = rect.right + 8
+      if (rect.top > window.innerHeight / 2) {
+        setFixedPos({ left, bottom: window.innerHeight - rect.bottom })
+      } else {
+        setFixedPos({ left, top: rect.top })
       }
-      setFixedPos({ left: rect.right + 8, top })
     }
   }, [anchor])
 
@@ -100,17 +100,9 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
     if (open) {
       fetchNotifications()
       updatePosition()
-      requestAnimationFrame(() => updatePosition())
     }
   }, [open, updatePosition])
 
-  // Recalculate position after content changes (notifications load, loading state)
-  useEffect(() => {
-    if (open && anchor === 'right') {
-      requestAnimationFrame(() => updatePosition())
-    }
-  }, [notifications, loading, open, anchor, updatePosition])
-
   // * Poll unread count in background (when authenticated)
   useEffect(() => {
     fetchUnreadCount()
@@ -214,10 +206,10 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
             aria-label="Notifications"
             className={`bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden z-[100] ${
               anchor === 'right'
-                ? 'fixed w-96 origin-top-left'
+                ? `fixed w-96 ${fixedPos?.bottom !== undefined ? 'origin-bottom-left' : 'origin-top-left'}`
                 : 'fixed left-4 right-4 top-16 sm:absolute sm:left-auto sm:right-0 sm:top-full sm:mt-2 sm:w-96'
             }`}
-            style={anchor === 'right' && fixedPos ? { left: fixedPos.left, top: fixedPos.top } : undefined}
+            style={anchor === 'right' && fixedPos ? { left: fixedPos.left, top: fixedPos.top, bottom: fixedPos.bottom } : undefined}
           >
             <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
               <h3 className="font-semibold text-neutral-900 dark:text-white">Notifications</h3>
-- 
2.49.1


From 177c33830c142477ecbdac2597b178c2b65cc483 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 19 Mar 2026 01:02:16 +0100
Subject: [PATCH 092/428] fix: add tooltips to notifications and profile when
 sidebar collapsed

---
 components/dashboard/Sidebar.tsx | 38 ++++++++++++++++++--------------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 7178ade..7a2a271 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -390,23 +390,27 @@ export default function Sidebar({
         <div className="border-t border-neutral-200/60 dark:border-neutral-800/60 px-2 py-3 shrink-0">
           {/* Notifications, Profile — same layout as nav items */}
           <div className="space-y-0.5 mb-1">
-            <NotificationCenter anchor="right" variant="sidebar">
-              <Label collapsed={c}>Notifications</Label>
-            </NotificationCenter>
-            <UserMenu
-              auth={auth}
-              LinkComponent={Link}
-              orgs={orgs}
-              activeOrgId={auth.user?.org_id}
-              onSwitchOrganization={handleSwitchOrganization}
-              onCreateOrganization={() => router.push('/onboarding')}
-              allowPersonalOrganization={false}
-              onOpenSettings={openSettings}
-              compact
-              anchor="right"
-            >
-              <Label collapsed={c}>{user?.display_name?.trim() || 'Profile'}</Label>
-            </UserMenu>
+            <span title={c ? 'Notifications' : undefined}>
+              <NotificationCenter anchor="right" variant="sidebar">
+                <Label collapsed={c}>Notifications</Label>
+              </NotificationCenter>
+            </span>
+            <span title={c ? (user?.display_name?.trim() || 'Profile') : undefined}>
+              <UserMenu
+                auth={auth}
+                LinkComponent={Link}
+                orgs={orgs}
+                activeOrgId={auth.user?.org_id}
+                onSwitchOrganization={handleSwitchOrganization}
+                onCreateOrganization={() => router.push('/onboarding')}
+                allowPersonalOrganization={false}
+                onOpenSettings={openSettings}
+                compact
+                anchor="right"
+              >
+                <Label collapsed={c}>{user?.display_name?.trim() || 'Profile'}</Label>
+              </UserMenu>
+            </span>
           </div>
 
           {/* Settings + Collapse */}
-- 
2.49.1


From a9af5d4593ccbca1e8b5eed36d957ce4e0db4775 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 19 Mar 2026 01:38:36 +0100
Subject: [PATCH 093/428] docs: replace LICENSE summary with full AGPL-3.0 text

Enables GitHub auto-detection of AGPL-3.0 license in repo sidebar.
---
 LICENSE | 672 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 659 insertions(+), 13 deletions(-)

diff --git a/LICENSE b/LICENSE
index bc0f19d..30da314 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,17 +1,663 @@
-GNU AFFERO GENERAL PUBLIC LICENSE
-Version 3, 19 November 2007
-
 Copyright (C) 2024-2026 Ciphera
 
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
 
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <https://www.gnu.org/licenses/>.
+                            Preamble
+
+  The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+  A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate.  Many developers of free software are heartened and
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+  The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+  An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals.  This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU Affero General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Remote Network Interaction; Use with the GNU General Public License.
+
+  Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero General Public License from time to time.  Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source.  For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code.  There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU AGPL, see
+<https://www.gnu.org/licenses/>.
-- 
2.49.1


From e464b874718c4ffc0e9d6675ad3c5e9d5eb0b95f Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 19 Mar 2026 10:11:28 +0100
Subject: [PATCH 094/428] feat: add filtered traffic page to admin dashboard

Add admin page at /admin/filtered-traffic showing domains blocked by the
referrer spam filter with reason badges and date range selector. Helps
operators monitor spam filtering and catch false positives.
---
 app/admin/filtered-traffic/page.tsx | 91 +++++++++++++++++++++++++++++
 app/admin/page.tsx                  | 10 ++++
 lib/api/admin.ts                    | 15 +++++
 3 files changed, 116 insertions(+)
 create mode 100644 app/admin/filtered-traffic/page.tsx

diff --git a/app/admin/filtered-traffic/page.tsx b/app/admin/filtered-traffic/page.tsx
new file mode 100644
index 0000000..488f829
--- /dev/null
+++ b/app/admin/filtered-traffic/page.tsx
@@ -0,0 +1,91 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { LoadingOverlay } from '@ciphera-net/ui'
+import { getFilteredReferrers, FilteredReferrer } from '@/lib/api/admin'
+
+export default function FilteredTrafficPage() {
+  const [referrers, setReferrers] = useState<FilteredReferrer[]>([])
+  const [loading, setLoading] = useState(true)
+  const [days, setDays] = useState(30)
+
+  useEffect(() => {
+    setLoading(true)
+    const endDate = new Date().toISOString().split('T')[0]
+    const startDate = new Date(Date.now() - days * 86400000).toISOString().split('T')[0]
+    getFilteredReferrers(startDate, endDate)
+      .then(setReferrers)
+      .finally(() => setLoading(false))
+  }, [days])
+
+  if (loading) {
+    return <LoadingOverlay logoSrc="/pulse_icon_no_margins.png" title="Loading filtered traffic..." />
+  }
+
+  const totalBlocked = referrers.reduce((sum, r) => sum + r.count, 0)
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-xl font-semibold text-neutral-900 dark:text-white">Filtered Traffic</h2>
+          <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1">
+            {totalBlocked.toLocaleString()} spam referrers blocked in the last {days} days
+          </p>
+        </div>
+        <div className="flex gap-2">
+          {[7, 30, 90].map((d) => (
+            <button
+              key={d}
+              onClick={() => setDays(d)}
+              className={`px-3 py-1.5 text-sm rounded-lg transition-colors ${
+                days === d
+                  ? 'bg-neutral-900 text-white dark:bg-white dark:text-neutral-900'
+                  : 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-700'
+              }`}
+            >
+              {d}d
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 shadow-sm overflow-hidden">
+        {referrers.length === 0 ? (
+          <div className="p-12 text-center text-neutral-500 dark:text-neutral-400">
+            No filtered referrers in this period
+          </div>
+        ) : (
+          <table className="w-full text-left text-sm">
+            <thead className="border-b border-neutral-200 dark:border-neutral-800">
+              <tr>
+                <th className="px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Domain</th>
+                <th className="px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Reason</th>
+                <th className="px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400 text-right">Blocked</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
+              {referrers.map((r) => (
+                <tr key={`${r.domain}-${r.reason}`} className="hover:bg-neutral-50 dark:hover:bg-neutral-900/50">
+                  <td className="px-4 py-3 text-neutral-900 dark:text-white font-mono text-xs">{r.domain}</td>
+                  <td className="px-4 py-3">
+                    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
+                      r.reason === 'blocklist'
+                        ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
+                        : 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400'
+                    }`}>
+                      {r.reason}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3 text-right text-neutral-900 dark:text-white tabular-nums">
+                    {r.count.toLocaleString()}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index 02050a0..e4aa99d 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -15,6 +15,16 @@ export default function AdminDashboard() {
           View all organizations, check billing status, and manually grant plans.
         </p>
       </Link>
+      <Link
+        href="/admin/filtered-traffic"
+        className="block transition-transform hover:scale-[1.02] rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 shadow-sm"
+      >
+        <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">Filtered Traffic</h3>
+        <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1">Monitor blocked referrer spam</p>
+        <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-4">
+          View domains blocked by the spam filter and check for false positives.
+        </p>
+      </Link>
     </div>
   )
 }
diff --git a/lib/api/admin.ts b/lib/api/admin.ts
index 01c009f..f9ab143 100644
--- a/lib/api/admin.ts
+++ b/lib/api/admin.ts
@@ -60,3 +60,18 @@ export async function grantPlan(orgId: string, params: GrantPlanParams): Promise
     body: JSON.stringify(params),
   })
 }
+
+export interface FilteredReferrer {
+  domain: string
+  reason: string
+  count: number
+}
+
+export async function getFilteredReferrers(startDate?: string, endDate?: string): Promise<FilteredReferrer[]> {
+  const params = new URLSearchParams()
+  if (startDate) params.set('start_date', startDate)
+  if (endDate) params.set('end_date', endDate)
+  const query = params.toString() ? `?${params.toString()}` : ''
+  const data = await authFetch<{ filtered_referrers: FilteredReferrer[] }>(`/api/admin/filtered-referrers${query}`)
+  return data.filtered_referrers || []
+}
-- 
2.49.1


From a7ac2cb9d7836a37ec94d77beb9f56f6dca50503 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 19 Mar 2026 11:09:16 +0100
Subject: [PATCH 095/428] feat: add browser logo icons for all detected
 browsers

Use real browser logos from alrra/browser-logos (SVG where available,
PNG fallback for archived browsers). Replaces the generic globe icon
with actual Chrome, Firefox, Safari, Edge, Opera, Brave, Vivaldi, Arc,
Samsung Internet, UC Browser, Yandex, Waterfox, Pale Moon, DuckDuckGo,
Maxthon, Silk, Puffin, Tor, and Opera Mini logos.
---
 lib/utils/icons.tsx                        |  27 ++++++++++++++++++++-
 public/icons/browsers/arc.png              | Bin 0 -> 1520 bytes
 public/icons/browsers/brave.svg            |   1 +
 public/icons/browsers/chrome.svg           |   1 +
 public/icons/browsers/duckduckgo.png       | Bin 0 -> 1872 bytes
 public/icons/browsers/edge.svg             |   1 +
 public/icons/browsers/firefox.svg          |   1 +
 public/icons/browsers/maxthon.png          | Bin 0 -> 984 bytes
 public/icons/browsers/opera-mini.png       | Bin 0 -> 1870 bytes
 public/icons/browsers/opera.svg            |   1 +
 public/icons/browsers/pale-moon.png        | Bin 0 -> 2446 bytes
 public/icons/browsers/puffin.png           | Bin 0 -> 2039 bytes
 public/icons/browsers/safari-ios.svg       |   1 +
 public/icons/browsers/safari.svg           |   1 +
 public/icons/browsers/samsung-internet.svg |   1 +
 public/icons/browsers/silk.png             | Bin 0 -> 1618 bytes
 public/icons/browsers/tor.png              | Bin 0 -> 2017 bytes
 public/icons/browsers/uc-browser.svg       |   1 +
 public/icons/browsers/vivaldi.svg          |   1 +
 public/icons/browsers/waterfox.png         | Bin 0 -> 1497 bytes
 public/icons/browsers/yandex.png           | Bin 0 -> 1787 bytes
 21 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 public/icons/browsers/arc.png
 create mode 100644 public/icons/browsers/brave.svg
 create mode 100644 public/icons/browsers/chrome.svg
 create mode 100644 public/icons/browsers/duckduckgo.png
 create mode 100644 public/icons/browsers/edge.svg
 create mode 100644 public/icons/browsers/firefox.svg
 create mode 100644 public/icons/browsers/maxthon.png
 create mode 100644 public/icons/browsers/opera-mini.png
 create mode 100644 public/icons/browsers/opera.svg
 create mode 100644 public/icons/browsers/pale-moon.png
 create mode 100644 public/icons/browsers/puffin.png
 create mode 100644 public/icons/browsers/safari-ios.svg
 create mode 100644 public/icons/browsers/safari.svg
 create mode 100644 public/icons/browsers/samsung-internet.svg
 create mode 100644 public/icons/browsers/silk.png
 create mode 100644 public/icons/browsers/tor.png
 create mode 100644 public/icons/browsers/uc-browser.svg
 create mode 100644 public/icons/browsers/vivaldi.svg
 create mode 100644 public/icons/browsers/waterfox.png
 create mode 100644 public/icons/browsers/yandex.png

diff --git a/lib/utils/icons.tsx b/lib/utils/icons.tsx
index 79ccc4c..bfc9cc6 100644
--- a/lib/utils/icons.tsx
+++ b/lib/utils/icons.tsx
@@ -32,9 +32,34 @@ import {
  */
 export const FAVICON_SERVICE_URL = 'https://www.google.com/s2/favicons'
 
+const BROWSER_ICON_MAP: Record<string, { file: string; ext: 'svg' | 'png' }> = {
+  'chrome':           { file: 'chrome',           ext: 'svg' },
+  'firefox':          { file: 'firefox',          ext: 'svg' },
+  'safari':           { file: 'safari',           ext: 'svg' },
+  'edge':             { file: 'edge',             ext: 'svg' },
+  'opera':            { file: 'opera',            ext: 'svg' },
+  'brave':            { file: 'brave',            ext: 'svg' },
+  'vivaldi':          { file: 'vivaldi',          ext: 'svg' },
+  'samsung internet': { file: 'samsung-internet', ext: 'svg' },
+  'uc browser':       { file: 'uc-browser',       ext: 'svg' },
+  'yandex browser':   { file: 'yandex',           ext: 'png' },
+  'waterfox':         { file: 'waterfox',         ext: 'png' },
+  'pale moon':        { file: 'pale-moon',        ext: 'png' },
+  'duckduckgo':       { file: 'duckduckgo',       ext: 'png' },
+  'maxthon':          { file: 'maxthon',          ext: 'png' },
+  'silk':             { file: 'silk',             ext: 'png' },
+  'puffin':           { file: 'puffin',           ext: 'png' },
+  'arc':              { file: 'arc',              ext: 'png' },
+  'tor':              { file: 'tor',              ext: 'png' },
+  'opera mini':       { file: 'opera-mini',       ext: 'png' },
+}
+
 export function getBrowserIcon(browserName: string) {
   if (!browserName) return <Globe className="text-neutral-400" />
-  return <Globe className="text-neutral-500" />
+  const entry = BROWSER_ICON_MAP[browserName.toLowerCase()]
+  if (!entry) return <Globe className="text-neutral-500" />
+  const src = `/icons/browsers/${entry.file}.${entry.ext}`
+  return <img src={src} alt={browserName} width={18} height={18} className="inline-block" style={{ verticalAlign: '-0.125em' }} />
 }
 
 export function getOSIcon(osName: string) {
diff --git a/public/icons/browsers/arc.png b/public/icons/browsers/arc.png
new file mode 100644
index 0000000000000000000000000000000000000000..700a72c7e63e012fa16113425f7fffacb5e28240
GIT binary patch
literal 1520
zcmV<M1rPd(P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F8000HINkl<ZScT=5
zS!`5g6vuzxotZl`?X<K)p-5>ZK$TP$p_RprRgDoe@j)LDqrnYSBpO3hVnR&tK?S!b
zqlv~njTprcm0(*ITPjOjsA%hyQoz!}v@@NVd*{x*$A@k+oheY_o9F49^PThm|G)pe
z^PLO-_fVJ9BqB?I<v<Z|1lXmNYW)v&jY#YfkxxZLoVX$OxsdcnLPXYI4(6yF5Rtcl
zC!*CmNi-fs3=?f^0XcWxiavLy01K5;4Wq%-MnQfR@TjrB5p!<?VweCp=emi0@ik6Q
zSOG7OhI~{4fS0f=kFmQhQ(WA@_+c-=auHdaMf^SekFHik-V>3EQ3(){5@3z_(_x(R
z-C1jleGNEq1K`<|z9JE+1*)BJ_`YO&`^`=)_7L!!h-?9HUy1<WaX^dL?7xso%pVWn
zzhmj`A~HiM)dXw?ZjRT~kT`xE0OfMwt*XL1d-i4#*{`Kzh(|;wiij^IHwjp09z23`
zE_6YaM%_<1al-{{6_Em9U81RJkQ_j48>7A+yQ>Relh#i%Rz$u6I)KwaSVRtr$Q0la
zpdh|$&qZyLxPh@}AHZF}Lx3xlJT<JgHh=|g5h(+9N21ATJHG4WSaXz;i9XNWE5=oo
z6#EVVVe9wfBR>1#k*Gg}f7y*FpKq%ZiC}khWUbS59U$Tc9ss7T-uOGmnxlgSAMQBK
z&Ufb&jvuQR#=hNsN#p=dxEEtzBmU(#=~he2h;^>wVt_*$u;$x6U1{V1q3$GG-U^a9
z{0sJ}e=b=7fU&y{yR#GX@ZqfcT45osapM3!)qt|UPsXzreph>rnvWVUaEkF+^L8{w
z&qtplmX&qiGkNmBvQ7g|RZP##T4-4|Pt+9iN5r48r_ZS%f5Y00yyG~;B4HxO{sPIw
zR6Za2%$We6E2UaB;QghGu3&2EFcN`y)S@HqW@SSqZw5;-?V-`(t(=X@@uSb1H6%D;
z66p?+Fb%BU80J4+83KIs=c5GzHn0i$Zo+qfo+sB#PAjyN4v9n(fTSaA|ErW0^_6UE
zDdUh<M(E0^^hA=hO}n0G+@v?$O>a*(c5=ve<Lvn~Ojl76dU-j(_JQ%O07T?zVB5=Y
z2l?R3Ga%3#F^NSJnHDO=m_k3g*EN`XCa;#|Ie%yR4HRB?4el`kw7fiWSFJ(|1X_V>
zl~U0G2T)3F2X?-&ehRCW6_HFjnDJy*K#yC)qr1{_yJA-}(qxYXPxX<nT!|J4oCTH)
zkPiyzkNcJ4`&XZz&YThx+i|j<-k+<ZhH)KB7IV;;l*z6XcGN_lH5V-}F9F;({L4uj
zs#V=UsJ*S5BVX^ubG8{}r~i#S9u3`_Wqv96tanzL3rf@QdVK`)$B?LN0MLQS!&?Uh
zh)5N1@9SIkV8kulq0@MSKjRLaM2Vo3!k43?Mi}5t_5^-4$D=e2-RmW9Od+}X`DiW|
z*70VN&8+~hiAWkk>W}A6wuY$w_~_6nYzxoXAl_gjQ~jOXzPN}$Zu;{F@VFHf<+(V^
z?&v2j!0qv*Ib!Us2bc~lNbODab3)6XU04Y_gFsmZ8y_oY^}{m&IB_aY=lQ;u^ojxx
z#YH+fzP_`B-)th;(wc#hY&kKotN;#V6QDVEma7XWnh;?1+A4r*U}xDR|GctEOr_7k
z^S}w<DDbXt@uK|RECTTA1FN)qKUKhy%7vvjOqiHQ$C*f4@537w4Y>K7QYr|1kWHwF
zT&q`<Z+4fKkZfyD+tX*14=kHg^QrH^8~FvkjxT>)%iQ@TD5WSIm&1#%+{ROzZUNZV
zPky0z9ha*$@Zi0;r%eG(LwUV;7tF(d*R256N~!u0yG5i@MA}6}EX$UZ_~atQsTk8m
zBq$={*tUp0i1UqzWK6w`>#P48a3N3$oB<k@QU`|DT||TqEbYgM0u4&3+R<SAf8t;L
Wx0%MWu0tCD0000<MNUMnLSTab+SZi-

literal 0
HcmV?d00001

diff --git a/public/icons/browsers/brave.svg b/public/icons/browsers/brave.svg
new file mode 100644
index 0000000..fb5ed8b
--- /dev/null
+++ b/public/icons/browsers/brave.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2770 2770"><linearGradient id="a" y1="51%" y2="51%"><stop offset=".4" stop-color="#f50"/><stop offset=".6" stop-color="#ff2000"/></linearGradient><linearGradient id="b" x1="2%" y1="51%" y2="51%"><stop offset="0" stop-color="#ff452a"/><stop offset="1" stop-color="#ff2000"/></linearGradient><path fill="url(#a)" d="M2395 723l60-147-170-176c-92-92-288-38-288-38l-222-252H992L769 363s-196-53-288 37L311 575l60 147-75 218 250 953c52 204 87 283 234 387l457 310c44 27 98 74 147 74s103-47 147-74l457-310c147-104 182-183 234-387l250-953z"/><path fill="#fff" d="M1935 524s287 347 287 420c0 75-36 94-72 133l-215 230c-20 20-63 54-38 113 25 60 60 134 20 210-40 77-110 128-155 120a820 820 0 01-190-90c-38-25-160-126-160-165s126-110 150-124c23-16 130-78 132-102s2-30-30-90-88-140-80-192c10-52 100-80 167-105l207-78c16-8 12-15-36-20-48-4-183-22-244-5s-163 43-173 57c-8 14-16 14-7 62l58 315c4 40 12 67-30 77-44 10-117 27-142 27s-99-17-142-27-35-37-30-77c4-40 48-268 57-315 10-48 1-48-7-62-10-14-113-40-174-57-60-17-196 1-244 6-48 4-52 10-36 20l207 77c66 25 158 53 167 105 10 53-47 132-80 192s-32 66-30 90 110 86 132 102c24 15 150 85 150 124s-119 140-159 165a820 820 0 01-190 90c-45 8-115-43-156-120-40-76-4-150 20-210 25-60-17-92-38-113l-215-230c-35-37-71-57-71-131s287-420 287-420l273 44c32 0 103-27 168-50 65-20 110-22 110-22s44 0 110 22 136 50 168 50c33 0 275-47 275-47zm-215 1328c18 10 7 32-10 44l-254 198c-20 20-52 50-73 50s-52-30-73-50a13200 13200 0 00-255-198c-16-12-27-33-10-44l150-80a870 870 0 01188-73c15 0 110 34 187 73l150 80z"/><path fill="url(#b)" d="M1999 363l-224-253H992L769 363s-196-53-288 37c0 0 260-23 350 123l276 47c32 0 103-27 168-50 65-20 110-22 110-22s44 0 110 22 136 50 168 50c33 0 275-47 275-47 90-146 350-123 350-123-92-92-288-38-288-38"/></svg>
\ No newline at end of file
diff --git a/public/icons/browsers/chrome.svg b/public/icons/browsers/chrome.svg
new file mode 100644
index 0000000..dcc3b11
--- /dev/null
+++ b/public/icons/browsers/chrome.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 276 276"><linearGradient id="a" x1="145" x2="34" y1="253" y2="61" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1e8e3e"/><stop offset="1" stop-color="#34a853"/></linearGradient><linearGradient id="b" x1="111" x2="222" y1="254" y2="62" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fcc934"/><stop offset="1" stop-color="#fbbc04"/></linearGradient><linearGradient id="c" x1="17" x2="239" y1="80" y2="80" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#d93025"/><stop offset="1" stop-color="#ea4335"/></linearGradient><circle cx="128" cy="128" r="64" fill="#fff"/><path fill="url(#a)" d="M96 183.4A63.7 63.7 0 0 1 72.6 160L17.2 64A128 128 0 0 0 128 256l55.4-96A64 64 0 0 1 96 183.4Z"/><path fill="url(#b)" d="M192 128a63.7 63.7 0 0 1-8.6 32L128 256A128 128 0 0 0 238.9 64h-111a64 64 0 0 1 64 64Z"/><circle cx="128" cy="128" r="52" fill="#1a73e8"/><path fill="url(#c)" d="M96 72.6a63.7 63.7 0 0 1 32-8.6h110.8a128 128 0 0 0-221.7 0l55.5 96A64 64 0 0 1 96 72.6Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/browsers/duckduckgo.png b/public/icons/browsers/duckduckgo.png
new file mode 100644
index 0000000000000000000000000000000000000000..64ee9430fc0490c06751a4701312a1cf514f8e7b
GIT binary patch
literal 1872
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
KMNUMnLSTYjij~&@

literal 0
HcmV?d00001

diff --git a/public/icons/browsers/edge.svg b/public/icons/browsers/edge.svg
new file mode 100644
index 0000000..b2afc8e
--- /dev/null
+++ b/public/icons/browsers/edge.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink" viewBox="0 0 27600 27600"><linearGradient id="a" gradientUnits="userSpaceOnUse"/><linearGradient id="b" x1="6870" x2="24704" y1="18705" y2="18705" x:href="#a"><stop offset="0" stop-color="#0c59a4"/><stop offset="1" stop-color="#114a8b"/></linearGradient><linearGradient id="c" x1="16272" x2="5133" y1="10968" y2="23102" x:href="#a"><stop offset="0" stop-color="#1b9de2"/><stop offset=".16" stop-color="#1595df"/><stop offset=".67" stop-color="#0680d7"/><stop offset="1" stop-color="#0078d4"/></linearGradient><radialGradient id="d" cx="16720" cy="18747" r="9538" x:href="#a"><stop offset=".72" stop-opacity="0"/><stop offset=".95" stop-opacity=".53"/><stop offset="1"/></radialGradient><radialGradient id="e" cx="7130" cy="19866" r="14324" gradientTransform="matrix(.14843 -.98892 .79688 .1196 -8759 25542)" x:href="#a"><stop offset=".76" stop-opacity="0"/><stop offset=".95" stop-opacity=".5"/><stop offset="1"/></radialGradient><radialGradient id="f" cx="2523" cy="4680" r="20243" gradientTransform="matrix(-.03715 .99931 -2.12836 -.07913 13579 3530)" x:href="#a"><stop offset="0" stop-color="#35c1f1"/><stop offset=".11" stop-color="#34c1ed"/><stop offset=".23" stop-color="#2fc2df"/><stop offset=".31" stop-color="#2bc3d2"/><stop offset=".67" stop-color="#36c752"/></radialGradient><radialGradient id="g" cx="24247" cy="7758" r="9734" gradientTransform="matrix(.28109 .95968 -.78353 .22949 24510 -16292)" x:href="#a"><stop offset="0" stop-color="#66eb6e"/><stop offset="1" stop-color="#66eb6e" stop-opacity="0"/></radialGradient><path id="h" d="M24105 20053a9345 9345 0 01-1053 472 10202 10202 0 01-3590 646c-4732 0-8855-3255-8855-7432 0-1175 680-2193 1643-2729-4280 180-5380 4640-5380 7253 0 7387 6810 8137 8276 8137 791 0 1984-230 2704-456l130-44a12834 12834 0 006660-5282c220-350-168-757-535-565z"/><path id="i" d="M11571 25141a7913 7913 0 01-2273-2137 8145 8145 0 01-1514-4740 8093 8093 0 013093-6395 8082 8082 0 011373-859c312-148 846-414 1554-404a3236 3236 0 012569 1297 3184 3184 0 01636 1866c0-21 2446-7960-8005-7960-4390 0-8004 4166-8004 7820 0 2319 538 4170 1212 5604a12833 12833 0 007684 6757 12795 12795 0 003908 610c1414 0 2774-233 4045-656a7575 7575 0 01-6278-803z"/><path id="j" d="M16231 15886c-80 105-330 250-330 566 0 260 170 512 472 723 1438 1003 4149 868 4156 868a5954 5954 0 003027-839 6147 6147 0 001133-850 6180 6180 0 001910-4437c26-2242-796-3732-1133-4392-2120-4141-6694-6525-11668-6525-7011 0-12703 5635-12798 12620 47-3654 3679-6605 7996-6605 350 0 2346 34 4200 1007 1634 858 2490 1894 3086 2921 618 1067 728 2415 728 2952s-271 1333-780 1990z"/><use fill="url(#b)" x:href="#h"/><use fill="url(#d)" opacity=".35" x:href="#h"/><use fill="url(#c)" x:href="#i"/><use fill="url(#e)" opacity=".4" x:href="#i"/><use fill="url(#f)" x:href="#j"/><use fill="url(#g)" x:href="#j"/></svg>
\ No newline at end of file
diff --git a/public/icons/browsers/firefox.svg b/public/icons/browsers/firefox.svg
new file mode 100644
index 0000000..f153ced
--- /dev/null
+++ b/public/icons/browsers/firefox.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink" viewBox="0 0 51500 51500"><radialGradient id="b" cx="87.4%" cy="-12.9%" r="128%" gradientTransform="matrix(.8 0 0 1 .18 .13)"><stop offset=".13" stop-color="#ffbd4f"/><stop offset=".28" stop-color="#ff980e"/><stop offset=".47" stop-color="#ff3750"/><stop offset=".78" stop-color="#eb0878"/><stop offset=".86" stop-color="#e50080"/></radialGradient><radialGradient id="d" cx="49%" cy="40%" r="128%" gradientTransform="matrix(.82 0 0 1 .09 0)"><stop offset=".3" stop-color="#960e18"/><stop offset=".35" stop-color="#b11927" stop-opacity=".74"/><stop offset=".43" stop-color="#db293d" stop-opacity=".34"/><stop offset=".5" stop-color="#f5334b" stop-opacity=".1"/><stop offset=".53" stop-color="#ff3750" stop-opacity="0"/></radialGradient><radialGradient id="e" cx="48%" cy="-12%" r="140%"><stop offset=".13" stop-color="#fff44f"/><stop offset=".53" stop-color="#ff980e"/></radialGradient><radialGradient id="f" cx="22.76%" cy="110.11%" r="100%"><stop offset=".35" stop-color="#3a8ee6"/><stop offset=".67" stop-color="#9059ff"/><stop offset="1" stop-color="#c139e6"/></radialGradient><radialGradient id="h" cx="52%" cy="33%" r="59%" gradientTransform="scale(.9 1)"><stop offset=".21" stop-color="#9059ff" stop-opacity="0"/><stop offset=".97" stop-color="#6e008b" stop-opacity=".6"/></radialGradient><radialGradient id="i" cx="210%" cy="-100%" r="290%"><stop offset=".1" stop-color="#ffe226"/><stop offset=".79" stop-color="#ff7139"/></radialGradient><radialGradient id="j" cx="84%" cy="-41%" r="180%"><stop offset=".11" stop-color="#fff44f"/><stop offset=".46" stop-color="#ff980e"/><stop offset=".72" stop-color="#ff3647"/><stop offset=".9" stop-color="#e31587"/></radialGradient><radialGradient id="k" cx="16.1%" cy="-18.6%" r="348.8%" gradientTransform="matrix(.10453 .46743 -.99452 .04913 -.05 -.26)"><stop offset="0" stop-color="#fff44f"/><stop offset=".3" stop-color="#ff980e"/><stop offset=".57" stop-color="#ff3647"/><stop offset=".74" stop-color="#e31587"/></radialGradient><radialGradient id="l" cx="18.9%" cy="-42.5%" r="238.4%"><stop offset=".14" stop-color="#fff44f"/><stop offset=".48" stop-color="#ff980e"/><stop offset=".66" stop-color="#ff3647"/><stop offset=".9" stop-color="#e31587"/></radialGradient><radialGradient id="m" cx="159.3%" cy="-44.72%" r="313.1%"><stop offset=".09" stop-color="#fff44f"/><stop offset=".63" stop-color="#ff980e"/></radialGradient><linearGradient id="a" x1="87.25%" x2="9.4%" y1="15.5%" y2="93.1%"><stop offset=".05" stop-color="#fff44f"/><stop offset=".37" stop-color="#ff980e"/><stop offset=".53" stop-color="#ff3647"/><stop offset=".7" stop-color="#e31587"/></linearGradient><linearGradient id="n" x1="80%" x2="18%" y1="14%" y2="84%"><stop offset=".17" stop-color="#fff44f" stop-opacity=".8"/><stop offset=".6" stop-color="#fff44f" stop-opacity="0"/></linearGradient><path id="c" d="M47870 16735c-1044-2512-3160-5224-4820-6082 1352 2650 2134 5310 2433 7294 0-6 2 5 4 22l4 26c2268 6147 1032 12398-748 16218-2754 5910-9420 11967-19857 11670-11276-318-21210-8683-23064-19643-338-1728 0-2605 170-4008-207 1080-286 1394-390 3315l-2 123c0 13270 10760 24030 24032 24030 11887 0 21756-8630 23690-19963l110-927c477-4120-53-8453-1560-12075z"/><path id="g" d="M25677 21050c-40 598-2150 2660-2890 2660-6834 0-7943 4133-7943 4133 303 3480 2726 6348 5660 7865 134 70 270 130 405 193a13277 13277 0 00706 289 10674 10674 0 003127 603c11978 562 14300-14320 5655-18640 2213-385 4510 505 5794 1407-2100-3672-6025-6150-10530-6150-285 0-564 24-844 43a12025 12025 0 00-6614 2549c366 310 780 724 1650 1583 1630 1606 5813 3270 5822 3465z"/><path fill="url(#a)" d="M47870 16735c-1044-2512-3160-5224-4820-6082 1352 2650 2134 5310 2433 7294l5 40c-2718-6773-7325-9505-11088-15452l-566-920a7372 7372 0 01-265-497 4370 4370 0 01-359-950 63 63 0 00-55-65 82 82 0 00-45 0l-12 7-17 10 10-14c-6037 3536-8085 10076-8274 13350a12025 12025 0 00-6614 2548 7136 7136 0 00-622-470 11134 11134 0 01-68-5873c-2468 1124-4390 2900-5785 4470h-10c-953-1206-886-5187-832-6018-10-52-710 363-802 425a17507 17507 0 00-2349 2012 21048 21048 0 00-2244 2692l-1 3v-3a20284 20284 0 00-3225 7280l-32 160a39700 39700 0 00-237 1500l-5 52a22907 22907 0 00-390 3316l-1 120c0 13270 10760 24030 24032 24030 11887 0 21756-8630 23690-19963l110-927c477-4120-53-8453-1560-12075zM20170 35545c113 53 220 112 334 164l16 10a12620 12620 0 01-350-174zm5506-14493zm19813-3060l-3-23 4 26z"/><use fill="url(#b)" x:href="#c"/><use fill="url(#d)" x:href="#c"/><path fill="url(#e)" d="M36192 19560l150 110a13070 13070 0 00-2231-2911C26640 9290 32150 563 33080 120l10-13c-6037 3535-8085 10076-8273 13348 280-20 560-43 844-43 4505 0 8430 2477 10530 6150z"/><use fill="url(#f)" x:href="#g"/><use fill="url(#h)" x:href="#g"/><path fill="url(#i)" d="M17083 15204a24404 24404 0 01498 330 11134 11134 0 01-67-5874c-2470 1125-4390 2900-5785 4470 115-3 3600-66 5354 1074z"/><path fill="url(#j)" d="M1822 26240c1855 10960 11788 19325 23063 19644 10437 296 17104-5762 19858-11670 1780-3820 3016-10070 748-16218v-2l-4-24c-2-17-4-28-4-22l5 40c853 5566-1980 10958-6405 14604l-13 30c-8625 7023-16878 4237-18550 3097a14410 14410 0 01-350-174c-5028-2403-7105-6984-6660-10913-4245 0-5693-3580-5693-3580s3812-2718 8836-355c4653 2190 9023 355 9023 354-10-195-4192-1860-5822-3465-872-860-1285-1272-1652-1583a7136 7136 0 00-622-470 28293 28293 0 00-498-330c-1753-1140-5240-1076-5355-1073h-10c-953-1207-886-5188-832-6020-10-50-710 363-802 426a17507 17507 0 00-2349 2012 21048 21048 0 00-2244 2692l-1 3v-3a20284 20284 0 00-3225 7280c-10 52-865 3784-444 5720z"/><path fill="url(#k)" d="M34110 16760a13070 13070 0 012231 2910l360 296c5450 5020 2594 12120 2380 12626 4426-3646 7258-9038 6405-14604-2716-6774-7323-9506-11086-15453l-566-920a7372 7372 0 01-265-497 4370 4370 0 01-359-950 63 63 0 00-55-65 82 82 0 00-45 0l-12 7-17 10c-930 443-6440 9170 1030 16640z"/><path fill="url(#l)" d="M36702 19965a4743 4743 0 00-360-295l-150-110c-1283-900-3580-1792-5794-1407 8644 4322 6323 19203-5655 18640a10674 10674 0 01-3127-603 13451 13451 0 01-706-289 9064 9064 0 01-405-193l16 10c1670 1140 9924 3925 18550-3097l13-30c213-506 3068-7606-2380-12626z"/><path fill="url(#m)" d="M14844 27844s1110-4133 7943-4133c740 0 2850-2062 2890-2660s-4370 1836-9023-354c-5024-2363-8836 354-8836 354s1448 3580 5693 3580c-445 3930 1632 8510 6660 10913 113 53 218 112 334 164-2935-1517-5358-4384-5660-7865z"/><path fill="url(#n)" d="M47870 16735c-1044-2512-3160-5224-4820-6082 1352 2650 2134 5310 2433 7294l5 40c-2718-6773-7325-9505-11088-15452l-566-920a7372 7372 0 01-265-497 4370 4370 0 01-359-950 63 63 0 00-55-65 82 82 0 00-45 0l-12 7-17 10 10-14c-6037 3536-8085 10076-8274 13350 280-20 560-43 845-43 4505 0 8430 2477 10530 6148-1284-900-3580-1792-5795-1407 8644 4322 6323 19203-5655 18640a10674 10674 0 01-3127-603 13451 13451 0 01-706-289 9064 9064 0 01-405-193l17 10a14410 14410 0 01-350-174c112 53 218 112 333 164-2935-1517-5358-4384-5660-7865 0 0 1108-4133 7942-4133 740 0 2850-2062 2890-2660-10-195-4190-1860-5822-3465-870-860-1285-1272-1650-1583a7136 7136 0 00-623-470 11134 11134 0 01-67-5873c-2470 1124-4390 2900-5785 4470h-10c-953-1207-886-5187-832-6020-10-50-710 363-802 426a17507 17507 0 00-2349 2012 21048 21048 0 00-2243 2692l-1 3v-3a20284 20284 0 00-3225 7280l-32 160a39787 39787 0 00-277 1515c-2 18 2-17 0 0a27956 27956 0 00-355 3353l-3 122c0 13270 10760 24030 24032 24030 11887 0 21756-8630 23690-19963l110-927c477-4120-53-8453-1560-12075zm-2384 1234l4 26v-2l-4-24z"/></svg>
\ No newline at end of file
diff --git a/public/icons/browsers/maxthon.png b/public/icons/browsers/maxthon.png
new file mode 100644
index 0000000000000000000000000000000000000000..87134c9716e98014b9a10d2ae3df6625df14f30b
GIT binary patch
literal 984
zcmV;}11J26P)<h;3K|Lk000e1NJLTq001BW001Be0ssI2{21+{000A@Nkl<Zcma);
zHI%DG7>1vB=8tT$xVt+&6)hbt+T8}126yNWPK85@mh@PMySuJuH+PfyUbs0q_dnUJ
zJ+blke={@R`NT_eOd%_2L`q6^VN@O!Mlkx?o{Ft72s~LZ0H*Hujso6tb=OM+$Pkcl
zfRI4I&H`p5`+ci^e6RtC@zUO{Krn?3Bt)1*fJCxF2xLpUcOahm2dFWrs;Wi{ED0ou
z@oQA7%OLH-L7_$v(P%ZB&9==n)BC&&f$)YU<eUQAAa+3*Z|lHp^pF;NV6i)LMW-T+
zcN7rV>G)2*_(X=WvjIWB@c!R?{0}n?B)qMFgdIA)>qjn7m?U<C;n7dH^*wS%+X`3`
zdk5<)i*QJBy`6YV3j*Ng^I2WzuJ`D+DBkWAnPI3H$f_Nn9X1)b`dps+nBP}vCOjc9
zH2X<VOqd!<DYk0~$$$+=$~h-tb7-404&c`X)FiycCSxcN^`j-R=jG4e`uyJm+Zg~W
zH}cGZz~WlD=*$D3z4W9ofS?i-91vUG1B+rxP{VI=)E{x+-zAlP0NC`q`Ow2kgP$`K
z1OybknFC>?Ab?B_DGBL-nRMaVGk~F?_;7LcyQOY3F@YiMfJp%mL?KtHeL!iobEjeg
z(J#jz*Ld^F!+>E>CHA~J_uVg9v^Q>dfHyd>DWO(3&mNj`qK|EA$elxJ$)z6#2pi-Q
z^cL+20ULrT2g9QFY@R(F+a(Aw6`bfEn%cdDk&*-m(O>gm9h#GW5!3=0l2S8u4t3aJ
zEQ|wiiG6RdV`Q<}EoR&Z4k!_8tH7`x2?pcw8%(9n!H|dm93~I~<pd*S6X3`x0R})o
zSi^OoN@9fYW}95K9Z}!OoWA_Mcm2yh51fF8;<LYwr#1WAT>t8qeqwJg%CMbz=hp-2
zbUyuQ@%oqN_K*DX&lAYqh%hxu4;7$BFc`+lDgwZy*$&OdzQ*1f%m1*p1fnxTyT$r|
z=0Q|V?D5D(g<(SA!Qo`Yv80p|jEVoT1-X&kTk^`BQXa<-sXFX9ss<j9w9O>a14E`U
zut684<ldZn^C;Jy2Op!VX&XSh&x@wTjE#pwOx>!4k`3NDZP^JyDXjM=@}!(0*U`+|
zCSE(B?EVsE9c63~4ssKT2(~5}HoTcEV<34rV08|JjTwJ8IyQK6%H#^-?g85)5rw5c
z8TL_v5e}*r2OY}}>}Hb(eOCUa3{b+ZbJq4jkZ=L9HU9xjc`v!2lG=&@0000<MNUMn
GLSTZkKgh`d

literal 0
HcmV?d00001

diff --git a/public/icons/browsers/opera-mini.png b/public/icons/browsers/opera-mini.png
new file mode 100644
index 0000000000000000000000000000000000000000..0c3e39041f78a6f84e2243e54ed8524a3a50db05
GIT binary patch
literal 1870
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
IM6N<$f(WZ>CjbBd

literal 0
HcmV?d00001

diff --git a/public/icons/browsers/opera.svg b/public/icons/browsers/opera.svg
new file mode 100644
index 0000000..6e79822
--- /dev/null
+++ b/public/icons/browsers/opera.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1090 1090"><linearGradient id="a" x1="461" x2="461" y1="59" y2="1033" gradientUnits="userSpaceOnUse"><stop offset=".6" stop-color="#ff1b2d"/><stop offset="1" stop-color="#a70014"/></linearGradient><linearGradient id="b" x1="714" x2="714" y1="116" y2="978" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#9c0000"/><stop offset=".7" stop-color="#ff4b4b"/></linearGradient><path fill="url(#a)" d="M545 42.5a502.5 502.5 0 10334.9 877.1 362.4 362.4 0 01-201.4 61.5c-119.7 0-226.8-59.4-299-153-55.6-65.6-91.5-162.5-94-271.3V533c2.5-108.8 38.4-205.8 94-271.3 72-93.6 179.3-153 299-153 73.6 0 142.5 22.5 201.4 61.6a500.8 500.8 0 00-333-127.9h-2z"/><path fill="url(#b)" d="M379.6 261.8c46-54.4 105.7-87.3 170.7-87.3 146.3 0 265 166 265 370.4 0 204.6-118.6 370.4-265 370.4-65 0-124.6-32.8-170.7-87.2 72 93.6 179.2 153 299 153A363 363 0 00880 919.6 501 501 0 001047.5 545a501.1 501.1 0 00-167.6-374.6 362.4 362.4 0 00-201.4-61.5c-119.7 0-226.8 59.4-299 153"/></svg>
\ No newline at end of file
diff --git a/public/icons/browsers/pale-moon.png b/public/icons/browsers/pale-moon.png
new file mode 100644
index 0000000000000000000000000000000000000000..b51eafd38ad6cc28b95571e0b04cf3c201122ece
GIT binary patch
literal 2446
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
M07*qoM6N<$f{`)f6951J

literal 0
HcmV?d00001

diff --git a/public/icons/browsers/puffin.png b/public/icons/browsers/puffin.png
new file mode 100644
index 0000000000000000000000000000000000000000..c51e6d835957da6f408bb60e89c4327562ea4906
GIT binary patch
literal 2039
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
V56;yDGI9U_002ovPDHLkV1j6K^>qLM

literal 0
HcmV?d00001

diff --git a/public/icons/browsers/safari-ios.svg b/public/icons/browsers/safari-ios.svg
new file mode 100644
index 0000000..c04ad58
--- /dev/null
+++ b/public/icons/browsers/safari-ios.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5120 5120"><linearGradient id="a" x2="0" y2="100%"><stop offset="0" stop-color="#19d7ff"/><stop offset="1" stop-color="#1e64f0"/></linearGradient><g fill="#fff"><rect width="5130" height="5120" rx="1050"/><circle cx="2560" cy="2560" r="2240" fill="url(#a)"/><path fill="red" d="M4090 1020 2370 2370l4e2 4e2z"/><path d="M1020 4090l1350-1720 4e2 4e2z"/></g><path stroke="#fff" stroke-width="30" d="M2560 540v330m0 3370v330m350-4e3-57 325m-586 3318-57 327M3250 662l-113 310M1984 4138l-113 310m339-3878 57 325m586 3318 57 327M1870 662l113 310m1152 3166 113 310M1552 810l166 286m1685 2918 165 286M1265 1010l212 253m2166 2582 212 253M1015 1258l253 212m2582 2168 253 212M813 1548l286 165m2920 1685 286 165M665 1866l310 113m3166 1150 310 113M574 2202l326 58m3320 588 325 57M545 2555h330m3370 0h330M575 2905l325-57m3320-586 325-57M668 3245l310-113m3165-1152 310-113M815 3563l286-165m2920-1685 286-165M1016 3850l253-212m2580-2166 253-212M1262 41e2l212-253m2166-2582 212-253M1552 43e2l166-286m1685-2918 165-286M2384 548l16 180m320 3656 16 180M2038 610l47 174m950 3544 47 174M1708 730l76 163m1550 3326 77 163M1404 904l103 148m2106 3006 103 148M1135 1130l127 127m2596 2596 127 127M910 14e2l148 103m3006 2107 146 1e2M734 1703l163 76m3326 1550 163 77M614 2033l174 47m3544 950 174 47M553 2380l180 16m3656 320 180 16m-4014 0 180-16m3656-320 180-16M614 3077l174-47m3544-950 174-47M734 3407l163-76m3326-1550 163-76M910 3710l148-103m3006-2107 146-1e2M1404 4206l103-148m2105-3006 104-148M1708 4380l77-163M3335 890l77-163M2038 45e2l47-174m950-3544 47-174m-698 3952 16-180m320-3656 16-180"/></svg>
\ No newline at end of file
diff --git a/public/icons/browsers/safari.svg b/public/icons/browsers/safari.svg
new file mode 100644
index 0000000..214ccc5
--- /dev/null
+++ b/public/icons/browsers/safari.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="194.5 190.1 135.1 135.1"><style>.b{color-interpolation-filters:srgb}.c{flood-opacity:.31}</style><defs><linearGradient id="a" x1="132.55" x2="134.37" y1="111.67" y2="-105.3" xlink:href="#b"><stop offset="0" stop-color="#d2d2d2"/><stop offset=".53" stop-color="#f2f2f2"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse"/><linearGradient id="c" x1="65.44" x2="67.4" y1="115.72" y2="17.14" xlink:href="#b"><stop offset="0" stop-color="#005ad5"/><stop offset=".16" stop-color="#0875f0"/><stop offset=".31" stop-color="#218cee"/><stop offset=".63" stop-color="#27a5f3"/><stop offset=".81" stop-color="#25aaf2"/><stop offset="1" stop-color="#21aaef"/></linearGradient><linearGradient id="d" x1="158.7" x2="176.28" y1="96.71" y2="79.53" xlink:href="#b"><stop offset="0" stop-color="#c72e24"/><stop offset="1" stop-color="#fd3b2f"/></linearGradient><filter id="e" class="b"><feFlood flood-opacity=".28"/><feComposite in2="SourceGraphic" operator="in"/><feGaussianBlur stdDeviation="3"/><feOffset dx=".3" dy="2.8"/><feComposite in="SourceGraphic"/></filter><filter id="f" class="b"><feFlood class="c"/><feComposite class="c" in2="SourceGraphic" operator="out"/><feGaussianBlur flood-opacity=".3" stdDeviation=".7"/><feOffset dy="1.8"/><feComposite in2="SourceGraphic" operator="atop"/></filter><filter id="g" class="b"><feFlood flood-opacity=".61"/><feComposite in2="SourceGraphic" operator="in"/><feGaussianBlur stdDeviation=".5"/><feOffset dx=".8" dy=".8"/><feComposite in="SourceGraphic" result="A"/><feColorMatrix values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"/><feFlood flood-opacity=".4"/><feComposite in2="A" operator="in"/><feGaussianBlur stdDeviation="3.8"/><feOffset dx="2.3" dy="3.3"/><feComposite in="A"/></filter><filter id="h" width="110%" height="110%" x="-1%" y="-1%"><feGaussianBlur in="SourceAlpha" stdDeviation=".4"/><feOffset dx=".1" dy=".2"/><feComponentTransfer result="A"><feFuncA type="linear"/></feComponentTransfer><feFlood flood-color="rgba(0,0,0,0.5)"/><feComposite in2="A" operator="in"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter><radialGradient id="i" cx="-69.88" cy="69.29" r="54.01" gradientTransform="matrix(.9023 -.01249 .0377 2.7234 -9.44 -120.29)" xlink:href="#b"><stop offset="0" stop-color="#24a5f3" stop-opacity=".01"/><stop offset="1" stop-color="#1e8ceb" stop-opacity=".98"/></radialGradient><radialGradient id="j" cx="109.35" cy="13.76" r="93.08" gradientTransform="matrix(-.01822 1.0922 -1.042 -.01765 136.95 -115.33)" xlink:href="#b"><stop offset="0" stop-opacity="0"/><stop offset=".96" stop-color="#5488d6" stop-opacity="0"/><stop offset="1" stop-color="#5d96eb"/></radialGradient></defs><rect width="220" height="220" x="22" y="-106.53" fill="url(#a)" filter="url(#e)" ry="49" transform="matrix(.56938 0 0 .56921 186.86 255.75)"/><g filter="url(#f)" transform="translate(194.2 190.07)"><ellipse cx="67.77" cy="67.73" fill="url(#c)" paint-order="stroke fill markers" rx="54.01" ry="53.98"/><ellipse cx="-69.88" cy="69.29" fill="url(#i)" rx="54.01" ry="53.98" transform="translate(137.65 -1.55)"/></g><ellipse cx="120" cy="14.15" fill="url(#j)" rx="93.08" ry="93.67" transform="matrix(.58082 0 0 .57636 192.3 249.63)"/><g filter="url(#g)" transform="matrix(.58289 0 0 .56508 196.8 181.63)"><path fill="#cac7c8" d="m46 191.66.73.35 72.18-48.2-7.34-8.95L46 191.66Z"/><path fill="#fbfffc" d="m45.8 190.87.2.8 65.57-56.8-6.95-8.92-58.83 64.92Z"/><path fill="url(#d)" d="m118.91 143.81-7.35-8.95 66.08-57.2.27.73-59 65.42Z"/><path fill="#fb645c" d="m104.62 125.95 6.94 8.92 66.08-57.2-.65-.35-72.37 48.63Z"/></g><path stroke="#fff" stroke-linecap="round" stroke-miterlimit="1" stroke-width="1.33" d="m286.59 278.44 3.14-2.14m-11.23-17.8 7.8-1.37m-8.32-2.9 3.78-.3m-3.3-12.47 7.8 1.38m-8.2 3.03 3.76.38m-1.2-13.05 7.47 2.73m-3.77-10.5 6.86 3.96m-1.87-10.96 6.07 5.09m.05-11.07 5.09 6.07m1.97-10.99 3.97 6.86m3.7-10.53 2.71 7.43m5.62-9.62 1.37 7.8m15.62-7.89-1.38 7.8m9.82-5.6-2.72 7.42m10.5-3.75-3.96 6.86m10.98-1.89-5.12 6.07m16.18 6.96-6.87 3.96m10.45 3.88-7.45 2.7m9.64 5.6-7.82 1.38m7.81 15.79-7.82-1.39m5.6 9.7-7.44-2.71m3.8 10.47-6.87-3.95m1.91 10.98-6.07-5.07m-.05 11.2-5.1-6.08m-1.95 10.99-4-6.88m-3.87 10.5-2.7-7.43m-5.61 9.61-1.37-7.78m-15.78 7.75 1.4-7.86m-9.7 5.58 2.72-7.47m-10.5 3.73 3.97-6.87m-10.96 1.9 5.08-6.03m-8.26 3.13 2.75-2.68m3.84 8.23 2.2-3.1m5.2 7.44 1.66-3.45m6.43 6.47 1.02-3.7m7.52 5.32.43-3.82m8.08 3.8-.31-3.84m8.81 2.33-.97-3.69m9.06.75-1.58-3.48m9.05-.76-2.16-3.18m8.78-2.38-2.68-2.73m8.24-3.85-3.11-2.2m7.42-5.2-3.47-1.67m6.42-6.41-3.7-1.03m5.17-7.46-3.78-.37m3.8-8.24-3.81.3m2.35-8.8-3.7.97m.8-9.06-3.49 1.61m-1.03-9.12-3.2 2.2m-2.12-8.62-2.72 2.7m-3.84-8.28-2.23 3.12m-5.21-7.45-1.66 3.44m-6.55-6.32-1.02 3.63m-7.42-5.2-.38 3.81m-8.09-3.66.28 3.8m-8.79-2.34.95 3.68m-8.9-.72 1.61 3.46m-9.06.82 2.18 3.16m-8.82 2.27 2.68 2.7m-8.25 3.85 3.1 2.23m-7.44 5.17 3.42 1.66m-6.3 6.36 3.7 1.05m-3.71 24.39 3.7-.91m-2.44 5.03 7.48-2.72m-5.86 6.73 3.5-1.61m-1.53 5.43 6.87-3.95m-13.33-20.52 7.96.01m41.16-41.44v-7.96m.02 98.74.01-7.94m49.33-41.4-7.95-.01" filter="url(#h)" transform="translate(-65 7.73)"/></svg>
\ No newline at end of file
diff --git a/public/icons/browsers/samsung-internet.svg b/public/icons/browsers/samsung-internet.svg
new file mode 100644
index 0000000..5b2caa9
--- /dev/null
+++ b/public/icons/browsers/samsung-internet.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 525 525"><path fill="#7882ff" d="M203 0h120c111 0 202 90 202 203v120c0 111-90 202-203 202H202C92 525 0 435 0 322V202C0 92 90 0 203 0z"/><path fill="#4d5cc1" d="M402 263l-1-17-5-10c33 30 50 62 40 87-8 23-36 36-74 38-37 2-83-6-130-24a323 323 0 01-113-69c-27-27-39-55-30-78 9-24 40-36 81-37h1a142 142 0 00-42 55c9 25 44 55 113 84 56 23 122 35 151 16h2c4-15 7-30 7-45z"/><path fill="#fff" d="M401 246a143 143 0 01-6 61c-29 20-96 9-153-15-69-30-104-59-112-84a142 142 0 0141-55l1-1a142 142 0 01229 94zM261 404a142 142 0 01-142-136 344 344 0 00243 93 141 141 0 01-102 43z"/></svg>
\ No newline at end of file
diff --git a/public/icons/browsers/silk.png b/public/icons/browsers/silk.png
new file mode 100644
index 0000000000000000000000000000000000000000..aafa0fee1ad3e3e69163ecfbbbafd310cf9120d7
GIT binary patch
literal 1618
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
Q3;+NC07*qoM6N<$f|a=<uK)l5

literal 0
HcmV?d00001

diff --git a/public/icons/browsers/tor.png b/public/icons/browsers/tor.png
new file mode 100644
index 0000000000000000000000000000000000000000..b605289ce65c6927191fe5956b6288392e994c7e
GIT binary patch
literal 2017
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

literal 0
HcmV?d00001

diff --git a/public/icons/browsers/uc-browser.svg b/public/icons/browsers/uc-browser.svg
new file mode 100644
index 0000000..cb461fb
--- /dev/null
+++ b/public/icons/browsers/uc-browser.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 36600 36600"><linearGradient id="a" x1="18300" x2="18300" y1="36551" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff780b"/><stop offset="1" stop-color="#ffa322"/></linearGradient><path fill="url(#a)" d="M28539 36550H8061A8011 8011 0 0150 28539V8061A8011 8011 0 018061 50h20479a8011 8011 0 018011 8011v20479a8011 8011 0 01-8012 8010z"/><path d="M14177 31857l-134-40c-3768-1063-5541-5252-4515-8650 539-1785 1698-3109 3211-4140 1016-694 2071-1331 3087-2023 1454-993 2554-2278 3100-3977 669-2078 448-4026-1038-5690-1562-1750-3575-2432-5886-2134-2964 382-5181 1950-6789 4427-66 101-114 212-170 319 667-431 1358-708 2128-801 1560-190 3060 843 3354 2341 226 1152-73 2206-759 3118-732 973-1537 1894-2334 2818-1837 2133-2782 4553-2387 7394 332 2386 1552 4251 3533 5587 1679 1131 3602 1460 5599 1451m5012-15353c1080-10 2135 197 3175 496a16676 16676 0 014187 1883c1241 771 2573 990 3994 753 279-46 554-137 815-243 92-38 195-178 201-277 21-342 24-687-6-1028a6592 6592 0 00-1129-3188c-798-1166-1916-1904-3239-2347-224-75-309-189-355-400-64-297-145-594-249-878-201-545-472-1050-925-1473-84 103-156 182-217 269-630 904-877 1925-878 3008 0 310-89 537-338 701-689 453-1354 953-2080 1337-960 510-1969 930-2956 1387m3759 13112a8349 8349 0 00483-2834c-8-1253-234-2465-864-3540-1426-2435-3570-3713-6418-3693-1409 10-2662 492-3687 1489a5046 5046 0 00-1178 1776c2679-2832 7031-1981 8688 571 1006 1550 1261 3208 663 4958-602 1764-1900 2855-3609 3521 3188-9 6362-52 9610-347-790-1563-2196-1785-3688-1901"/><path d="M31689 22976c-32-580-319-968-753-1258-533-355-1146-445-1768-502-1129-102-2214-369-3211-921-852-472-1669-1012-2543-1438-1375-670-2851-1003-4374-1141-1044-96-2062-10-3059 314-117 38-226 100-339 151 131 49 240 51 347 49 1174-27 2319 136 3418 554 2282 866 3938 2447 5115 4554 112 201 247 348 459 369 534 51 1074 123 1607 92 686-39 1302-353 1920-640 726-337 1489-507 2295-375 278 42 553 117 886 192m-17512 8881c-1998 9-3921-320-5600-1454-1981-1336-3201-3201-3533-5587-395-2841 550-5261 2387-7394 796-923 1601-1844 2334-2818 686-911 985-1966 759-3118-294-1498-1795-2531-3354-2341-770 94-1461 371-2128 801 56-106 106-218 170-319 1608-2477 3824-4045 6788-4427 2312-298 4324 384 5886 2134 1486 1663 1707 3612 1038 5690-546 1700-1646 2986-3100 3977-1016 694-2071 1331-3087 2023-1512 1032-2672 2356-3211 4140-1027 3398 746 7587 4515 8650 47 17 92 30 136 43m5012-15353c985-457 1994-876 2955-1386 726-386 1391-885 2080-1337 249-164 338-391 338-701 1-1083 247-2104 878-3008 61-86 133-165 217-269 453 422 724 928 925 1473 105 285 185 582 249 878 46 212 131 325 355 400 1323 443 2441 1181 3239 2347a6588 6588 0 011129 3188c30 341 28 686 6 1028a384 384 0 01-201 277 3914 3914 0 01-815 243c-1421 236-2753 18-3994-753a16625 16625 0 00-4187-1883c-1037-301-2093-507-3174-497m3759 13112c1493 114 2898 337 3691 1902-3249 294-6423 338-9610 347 1708-666 3006-1757 3609-3521 597-1750 343-3408-663-4958-1657-2550-6008-3403-8688-571a5037 5037 0 011178-1776c1024-996 2278-1478 3686-1489 2848-21 4992 1258 6418 3693 630 1076 855 2287 864 3540 4 955-153 1874-485 2833"/><path d="M31689 22976l-888-196c-805-131-1568 38-2295 375-618 287-1234 601-1920 640-533 29-1073-41-1607-92-212-21-347-168-459-369-1178-2106-2832-3686-5115-4554-1099-417-2243-580-3418-554-107 2-215 0-347-49 113-51 223-113 339-151 996-324 2015-409 3059-314 1523 140 2999 471 4374 1141 874 426 1691 966 2543 1438 998 554 2082 820 3211 921 622 56 1235 147 1768 502 437 293 724 681 755 1262m-16354-286a3895 3895 0 00-3903 3878 3879 3879 0 003909 3893 3868 3868 0 003882-3886 3878 3878 0 00-3888-3885zm-26 5677c-981-4-1782-807-1785-1787-1-984 819-1797 1813-1797s1804 820 1790 1812c-12 1008-799 1775-1818 1772z"/></svg>
\ No newline at end of file
diff --git a/public/icons/browsers/vivaldi.svg b/public/icons/browsers/vivaldi.svg
new file mode 100644
index 0000000..2084b97
--- /dev/null
+++ b/public/icons/browsers/vivaldi.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1900 1900"><path fill="#ef3939" d="M944 1830c386 0 600 0 740-140s140-354 140-740 0-600-140-740S1330 70 944 70s-600 0-740 140S64 564 64 950s0 600 140 740 354 140 740 140z"/><linearGradient id="a" x1="61.24" x2="145.33" y1="37.94" y2="183.58" gradientUnits="userSpaceOnUse"><stop offset="0" stop-opacity=".2"/><stop offset=".79" stop-opacity=".05"/></linearGradient><path fill="url(#a)" d="M151.6 62.4A66 66 0 0030.5 78a65.57 65.57 0 006.8 50.4c.1.2.2.4.4.6l31 53.8 25.5.2c17.1 0 30.9 0 42.2-1.2 14-1.5 24.1-5 31.9-12.8 11.3-11.3 13.5-27.6 13.9-53.8l-30.6-52.8z" transform="scale(10)"/><path fill="#fff" d="M1407 484a657.9 657.9 0 00-932 0 660.9 660.9 0 000 933 657.9 657.9 0 00932 0 660.9 660.9 0 000-933zm-39 304l-326 567c-20 35-49 56-90 59-45 3-80-16-103-55L519 786c-42-73 5-162 89-166 44-2 78 18 101 57 31 52 61 105 91 158l66 114c33 55 80 85 144 89 90 5 174-60 185-156 1-7 1-14 2-18 0-31-6-57-19-82-34-68 2-143 75-160 60-13 121 31 129 91 4 27-1 52-14 75z"/></svg>
\ No newline at end of file
diff --git a/public/icons/browsers/waterfox.png b/public/icons/browsers/waterfox.png
new file mode 100644
index 0000000000000000000000000000000000000000..c031bf986b79881bd342dd4f5b04628df7566a1d
GIT binary patch
literal 1497
zcmV;~1t$85P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F8000G`Nkl<ZScR3B
z&x>SN6~{m4-1n+dJ)NFTW+c!u7y^=U<3fiJ7;&Ww4H#UwRUttI(T$rdTn03&khsV~
z0$KSVh+8)*(GVesMifypWHQN2XC~cARlWPpIWF#duj*A*C!GVA_v^m%{hseR_m^;n
zMMMAuAZK;@6ec1&-RK7BqY)9|1wNuMh)-yCjy~?u+oL05>k*fjN0iPVzjxvE*PS1G
zHCBq~TI4HG??N9)oTKT+b<||^91-+NNFiY1{;6X=(|RFxS_h!2h=^1GW-IM`uIII0
zxxU7Je6PHJao<U4D;I^HIA#Vw6%o<4?TFyY3`l1J|KvoALxLABv}jTsMS+|fL?&z(
zzZJK|M^x)k6kFGzINy{dBKYZPPpo{%Ia4#?g;_%hD6v)5T`jJ=+d*JQ0@nFBYvAi$
zN`a{=bzPH02!id{f>^7v3g0B~F=i04o!95;Q&g(Xk06q8ydxef>;bsEi+~C}4*}<?
zRO10JTLz{8{8CRyDIt>h<K({4AJ=n6R5u|<eIk521rfo)KR-lTc>fDCR7=D+vtR)x
zrGlPIACgkVpQf{&lz*oazTpi4Jo~bt0?&M3`r$WViMz*qJ}-YsaQ~Yhks1gCT6ph^
zHIfpKE%x|>++{kQpsGZ~ncx7|PEV-oil6`5Ne-zJlEO3Jb?T}D5vs`q?Pet+g8TpW
z5xRiL5Dj=1F29<=;pRe66+nmxuBE**!M}WRkE%-i>?Nb|U@5R{gQW$}zM`0Wi9Vtb
zu#Nx?kRckuvmi|&)3yz79h{J=3J9)o0haKaMUnDHcM9+i-hnTDaF?p809bmkG-wQ(
zDEHZe=m<mvl5-wX;Ne{UbH*%?R-n7O!R@bC)G5(O@OX0pF)#x>2ou8L-CMzp&!19N
z6;HpIQGp~v5=a%K5PtE!hPq4RWICbhnE)gN%Lc6?2DE}1Xa;XvT!hD)ecVAT2!n9J
zEqLcfkS2n=;VvvKNE#&3LL>`G0=goM2*LwdE*CMMFNXZN8JB<GLaRhu3b7~i@V5>T
z3w#Y2hv^;Tt$9N0fLgfz+Yd_ALlcrXzj`_|nM{W@Vmh5rxyN`O5P@b4E}asd15C=|
z<xvP2+&C7r4qQPMnii5mk{}^ya+35za5d~B7>|Pf!>z9|DoD%l@Dqo42Fqm&<V`?^
zyKg#X-LN%5E%?im2c-ZV76FY3FFiFM=9G1;%DakOHxYqc6zJ!J9@v~hzyz@%J0y#;
zXtvO%qFUpDQu1!A^?wz8M?`HyfrtQwH=cB&DN0;<;sDQq<sh0Ma!JRlpLv)6UOz4?
ztbzJUg*U!^$TEUu1ke9)u^oN4;jAQLOMz(NAq}p4^8oh(=2mE1R~P0%N=izKTc8G!
zzzsBk8vN@!4?rzEByS_4Sj1?%C<rRRrV3>bAVbuaOC4Cl@b2}`-s%=2<$qtjH_Qt<
z)I&*GSfEJ}aZ0c&6+{IU6=V&3xR>Cy%g4}^2+4spLFB-5kWwmZeniQw1=`8q8ibVz
z?C%fW=+=&I?8j;rOq$S?s!{ZV8de;8Hf&KqBL|U%*B`lss$vp@<Nti+eZm|!B^ihp
z1ys|j_`23(X+1$_vzcrbVT29$fBoE@QUh6NGrac5O;W0csQbPm@bAaoD@D*vR{yy2
zHYw@g%e&S;SK2Miw{PE$rfEinxPFvy2lujZ)ugEG+U@pz9q;z|sybBvrtR(Rad>!G
zJnirAUoEUwc^cJ)bU9Bog0QXFdS4->gr=4ByV}Kz7q6C)(Aj)GkK^OxGb7t&;{(X~
zk2FU|N8_Uzz-%^?OP4NPtta)G`<3n5HjYm}pA5dYx5v@Z(be^n@|k~~o}R=qx8Obu
zoq^2g$3R3WyJ0EsyM;$psj7<UbV^ETC)WP~oRD#yvEj6G00000NkvXXu0mjf9k0AS

literal 0
HcmV?d00001

diff --git a/public/icons/browsers/yandex.png b/public/icons/browsers/yandex.png
new file mode 100644
index 0000000000000000000000000000000000000000..26b5550fa8c0669949de157f7cc77e02969acbf3
GIT binary patch
literal 1787
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

literal 0
HcmV?d00001

-- 
2.49.1


From 1696e428ab13706529795bd2b9bf46ed42c9c894 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 19 Mar 2026 11:23:29 +0100
Subject: [PATCH 096/428] feat: add real OS logo icons for 16 operating systems

Replace Phosphor generic icons with branded logos from
ngeenx/operating-system-logos. Covers Windows, macOS, Linux, Android,
iOS, ChromeOS, HarmonyOS, KaiOS, Tizen, webOS, FreeBSD, OpenBSD,
NetBSD, PlayStation, Xbox, and Nintendo.
---
 lib/utils/icons.tsx             |  33 +++++++++++++++++++++-----------
 public/icons/os/android.png     | Bin 0 -> 26229 bytes
 public/icons/os/chromeos.png    | Bin 0 -> 22970 bytes
 public/icons/os/freebsd.png     | Bin 0 -> 20701 bytes
 public/icons/os/harmonyos.png   | Bin 0 -> 1371 bytes
 public/icons/os/ios.png         | Bin 0 -> 20623 bytes
 public/icons/os/kaios.png       | Bin 0 -> 20696 bytes
 public/icons/os/linux.png       | Bin 0 -> 22916 bytes
 public/icons/os/macos.png       | Bin 0 -> 22016 bytes
 public/icons/os/netbsd.png      | Bin 0 -> 26593 bytes
 public/icons/os/nintendo.png    | Bin 0 -> 21698 bytes
 public/icons/os/openbsd.png     | Bin 0 -> 26229 bytes
 public/icons/os/playstation.png | Bin 0 -> 26396 bytes
 public/icons/os/tizen.png       | Bin 0 -> 21586 bytes
 public/icons/os/webos.png       | Bin 0 -> 21855 bytes
 public/icons/os/windows.png     | Bin 0 -> 26684 bytes
 public/icons/os/xbox.png        | Bin 0 -> 22424 bytes
 17 files changed, 22 insertions(+), 11 deletions(-)
 create mode 100644 public/icons/os/android.png
 create mode 100644 public/icons/os/chromeos.png
 create mode 100644 public/icons/os/freebsd.png
 create mode 100644 public/icons/os/harmonyos.png
 create mode 100644 public/icons/os/ios.png
 create mode 100644 public/icons/os/kaios.png
 create mode 100644 public/icons/os/linux.png
 create mode 100644 public/icons/os/macos.png
 create mode 100644 public/icons/os/netbsd.png
 create mode 100644 public/icons/os/nintendo.png
 create mode 100644 public/icons/os/openbsd.png
 create mode 100644 public/icons/os/playstation.png
 create mode 100644 public/icons/os/tizen.png
 create mode 100644 public/icons/os/webos.png
 create mode 100644 public/icons/os/windows.png
 create mode 100644 public/icons/os/xbox.png

diff --git a/lib/utils/icons.tsx b/lib/utils/icons.tsx
index bfc9cc6..82a212d 100644
--- a/lib/utils/icons.tsx
+++ b/lib/utils/icons.tsx
@@ -1,10 +1,6 @@
 import React from 'react'
 import {
   Globe,
-  WindowsLogo,
-  AppleLogo,
-  LinuxLogo,
-  AndroidLogo,
   Question,
   DeviceMobile,
   DeviceTablet,
@@ -62,15 +58,30 @@ export function getBrowserIcon(browserName: string) {
   return <img src={src} alt={browserName} width={18} height={18} className="inline-block" style={{ verticalAlign: '-0.125em' }} />
 }
 
+const OS_ICON_MAP: Record<string, string> = {
+  'windows':     'windows',
+  'macos':       'macos',
+  'linux':       'linux',
+  'android':     'android',
+  'ios':         'ios',
+  'chromeos':    'chromeos',
+  'harmonyos':   'harmonyos',
+  'kaios':       'kaios',
+  'tizen':       'tizen',
+  'webos':       'webos',
+  'freebsd':     'freebsd',
+  'openbsd':     'openbsd',
+  'netbsd':      'netbsd',
+  'playstation': 'playstation',
+  'xbox':        'xbox',
+  'nintendo':    'nintendo',
+}
+
 export function getOSIcon(osName: string) {
   if (!osName) return <Question className="text-neutral-400" />
-  const lower = osName.toLowerCase()
-  if (lower.includes('win')) return <WindowsLogo className="text-blue-500" />
-  if (lower.includes('mac') || lower.includes('ios')) return <AppleLogo className="text-neutral-800 dark:text-neutral-200" />
-  if (lower.includes('linux') || lower.includes('ubuntu') || lower.includes('debian')) return <LinuxLogo className="text-neutral-800 dark:text-neutral-200" />
-  if (lower.includes('android')) return <AndroidLogo className="text-green-500" />
-
-  return <Question className="text-neutral-400" />
+  const file = OS_ICON_MAP[osName.toLowerCase()]
+  if (!file) return <Question className="text-neutral-400" />
+  return <img src={`/icons/os/${file}.png`} alt={osName} width={18} height={18} className="inline-block" style={{ verticalAlign: '-0.125em' }} />
 }
 
 export function getDeviceIcon(deviceName: string) {
diff --git a/public/icons/os/android.png b/public/icons/os/android.png
new file mode 100644
index 0000000000000000000000000000000000000000..6fad820fb9c384060cbed82e69ce80fefcb5fc1e
GIT binary patch
literal 26229
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
EA9Iz0@&Et;

literal 0
HcmV?d00001

diff --git a/public/icons/os/chromeos.png b/public/icons/os/chromeos.png
new file mode 100644
index 0000000000000000000000000000000000000000..42606450cc2c9b94b2dc60f2fca0faa5f358b343
GIT binary patch
literal 22970
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

literal 0
HcmV?d00001

diff --git a/public/icons/os/freebsd.png b/public/icons/os/freebsd.png
new file mode 100644
index 0000000000000000000000000000000000000000..a330ab244632b1edf5cab726c8d6fbf8afb7ed0c
GIT binary patch
literal 20701
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
Gq5lKx!hkve

literal 0
HcmV?d00001

diff --git a/public/icons/os/harmonyos.png b/public/icons/os/harmonyos.png
new file mode 100644
index 0000000000000000000000000000000000000000..af7ba29b9f96ea6c09319207c45c31358b2a55f7
GIT binary patch
literal 1371
zcmV-h1*H0kP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px)6-h)vR9Hv7mwiZ<XB5VNuit6&E6oTcaemZhBAO^xlIxFjk^K?mL}|lD6R|0h
z(%95i!Kx7}R#AZiXVLzV22xEBMnyVHv~uZ8NiA1S%gE+eevNbTapq_GZXS4e-}io>
z`<&}O=Q`JY-zKIu6JR{kyfWwE5x{uHCQFd<W&t<?k-&$5Ctx+_P?IOT0_uUEff}H9
z6pXIYFbNa{d<%T=9|WDs#UM}!<N|*R2m^q8O7J4!-Tx{0c(<iM67ZJ+zzO&Xh*^N(
zMu=~K9D`_4z^|jkTPO_A0e=A?#QPffYM~;Ji?i7P@B{GiQ~>Pl?OC#92^}3B^!4?z
zXwf2^oSf+G?d8Rb7dmC};>9>SJL~V4FJJ1I$z;OA!$ZG6efpHaLE+yd`^*6FBak@p
zZ*dYD8cI@95@*hwp{}luz`#JZY}vx?+qb!L<%&*;jErRa_U+ubaf8d3FVo%K&C;by
z$;il{r>BRrXV22!-aZw8)ENO-SXi)W(<b)s-%omaI%Q>LL`6lhd-rZiOG_1$*tTuk
z$ji&4t*wpR++3=vsz^>wX7Ap;3RLE{w6x40z_DY;ICbh2_wL;zC@6@Sm>7zRirxSq
ztM&Hw=Je^)3N$k_li=WB%FD~i%E~ei!1?p%xqJ66&z?QQ&CN~gEr7;nAR!@vfq?<#
zh@+z;j~_o)u5@;GYF5n7z{!&*sjaPL_3G8c#>P&{Kw@Gd#l^*hg@v(U!v+o<IH2Wn
zaBv_eC&xShZ^Horke{EgE0$7RyLL^>;O_1|e*i`o?AWnGYind6E-sGh>S|@Y*t&J=
zh>nh?q@;wKH*b!SZP%_{T84sxg86lUc#?W9U%s42j~;1zNzY4*b#--Ve~SqxTwPt2
zBZfA}xTmKlR#sNZhgYv;L!4wYx8VXP<Lm$|EiGBGVg>8huh)8tpj1>;aR2^&Mn>d(
z@vr&$`4PExE$(h^G&D3Q51v04$)DC{7ot_GR*{yLrfC;~Nl8SOrLMPb-5T>O;6!i&
z0s>TyU0hr^apDBmuV0@o{W5oE0I~<{+__T;cKrBpT3cK3@$n%(KAz_0W{w;=GFEc|
zdi3Z~9zJ}?g$oyy7ed;mrl#rkf!P80`ub`Mi4*DTp`jt{?CeNMNg+HuT*oAcn5;N8
zHB~i0fJ*u=UAi<K`;E-aoB@A-f7SS!ni>urI;4|ie~|XtxN#!~4<6*sojW=%E$ijw
zMMy}9f{TcV;Nr!LoI7_;OE-<p3_!M1*?2_%_w3n2V`C$d>g?=nZNq*0_G#;hN$t08
z-AZL;B@Z4v;PBzYT6>XU$>6*ISX*1OX3ZK6D1H9q$rB}`Fk1+A_3BlIhlka-tX_hx
zT)9%yF57ltVWA3`p%?Sg0jaq-6^$1`5)h(x_4W07C^1X~N3tNQxNO-n&4Tbi_#oVw
zEd#Q#e>&Am@3{H!esnq>UhiRRYe#>7KdlYrH2hXTS4ZO;Q-mL~`PkUlC^&g0YQ=;Y
z$;N@?bKtwF0N6UX;_e-RjlJvG-@RRJbhcL0-~GD&W>|!AD)t4c<ajsHnaN~<g{3u^
z<m~#|Mn;Ai85+<}GwgRD+_)Fm0(rm}W;mS7R3XJjauFJTHFF;=!=%IMTs*(UyAu3M
z;CrBFJOKIb415A)j$TaP!rz=;5!I4A$S<Q8)Hg1th9@bua3L7*1Ef6W+TWwM;y-{s
d<7O;Q{{d^sB%*f=owEP{002ovPDHLkV1iP@s4V~h

literal 0
HcmV?d00001

diff --git a/public/icons/os/ios.png b/public/icons/os/ios.png
new file mode 100644
index 0000000000000000000000000000000000000000..77f6d153fc0ebf031e0d9759e06237e99d4f645e
GIT binary patch
literal 20623
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%0Dxa00DN2k0RI*MaH9ag
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
L0jfalc)<SxeSN%6

literal 0
HcmV?d00001

diff --git a/public/icons/os/kaios.png b/public/icons/os/kaios.png
new file mode 100644
index 0000000000000000000000000000000000000000..cbcf492eb2b49a58ba2988150cf82154dc08413a
GIT binary patch
literal 20696
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
WbB9lQw!rkihcPv>#OE9A-1k2bQ331#

literal 0
HcmV?d00001

diff --git a/public/icons/os/linux.png b/public/icons/os/linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..37358e00d612592fac3a8d8409c6c44061c1228a
GIT binary patch
literal 22916
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
Pl%1;LS%rK#BftLzQWm**

literal 0
HcmV?d00001

diff --git a/public/icons/os/macos.png b/public/icons/os/macos.png
new file mode 100644
index 0000000000000000000000000000000000000000..8e821f935bfc2ba421f8ddcff8539c64d298a9d1
GIT binary patch
literal 22016
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
I#wq{*1)vAXc>n+a

literal 0
HcmV?d00001

diff --git a/public/icons/os/netbsd.png b/public/icons/os/netbsd.png
new file mode 100644
index 0000000000000000000000000000000000000000..eb979f638a39a8a7c37d5064cc7507927800f03f
GIT binary patch
literal 26593
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

literal 0
HcmV?d00001

diff --git a/public/icons/os/nintendo.png b/public/icons/os/nintendo.png
new file mode 100644
index 0000000000000000000000000000000000000000..38f70266d166adae60b2ca13b305965f88d878aa
GIT binary patch
literal 21698
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
F@n52HVFdsH

literal 0
HcmV?d00001

diff --git a/public/icons/os/openbsd.png b/public/icons/os/openbsd.png
new file mode 100644
index 0000000000000000000000000000000000000000..f47ce12d5f30b45612ea05b11eabcb4ecfb09866
GIT binary patch
literal 26229
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

literal 0
HcmV?d00001

diff --git a/public/icons/os/playstation.png b/public/icons/os/playstation.png
new file mode 100644
index 0000000000000000000000000000000000000000..22c468d59b953b094c8fcc3b09904e68c1ee0d2a
GIT binary patch
literal 26396
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
Hd)fa0>f&v#

literal 0
HcmV?d00001

diff --git a/public/icons/os/tizen.png b/public/icons/os/tizen.png
new file mode 100644
index 0000000000000000000000000000000000000000..f32b415f71291b69af60c0969f9719134170dbdc
GIT binary patch
literal 21586
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

literal 0
HcmV?d00001

diff --git a/public/icons/os/webos.png b/public/icons/os/webos.png
new file mode 100644
index 0000000000000000000000000000000000000000..f4e062ff7184a1a73ec0556c39e1150483053772
GIT binary patch
literal 21855
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
TlMLJcQl))dPa{w5qW}K@Q+f(U

literal 0
HcmV?d00001

diff --git a/public/icons/os/windows.png b/public/icons/os/windows.png
new file mode 100644
index 0000000000000000000000000000000000000000..2451fb16d2f18fb7af4c4e9bd990201d24bcd45c
GIT binary patch
literal 26684
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

literal 0
HcmV?d00001

diff --git a/public/icons/os/xbox.png b/public/icons/os/xbox.png
new file mode 100644
index 0000000000000000000000000000000000000000..034553acfa4e6e449f2811382fc5b90b3e26bcf9
GIT binary patch
literal 22424
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

literal 0
HcmV?d00001

-- 
2.49.1


From 6b1e6876c623981d44b7bcb4f31aec78b81610bb Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 19 Mar 2026 11:32:36 +0100
Subject: [PATCH 097/428] fix: preserve intentional OS name casing (macOS, iOS,
 webOS)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Skip capitalize() for names with mixed casing to prevent
macOS→MacOS, iOS→IOS, webOS→WebOS, ChromeOS→Chromeos etc.
---
 components/dashboard/TechSpecs.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/dashboard/TechSpecs.tsx b/components/dashboard/TechSpecs.tsx
index bd39109..6139ec9 100644
--- a/components/dashboard/TechSpecs.tsx
+++ b/components/dashboard/TechSpecs.tsx
@@ -30,6 +30,8 @@ type Tab = 'browsers' | 'os' | 'devices' | 'screens'
 
 function capitalize(s: string): string {
   if (!s) return s
+  // Preserve intentional casing (e.g. macOS, iOS, webOS, ChromeOS, FreeBSD)
+  if (s !== s.toLowerCase() && s !== s.toUpperCase()) return s
   return s.charAt(0).toUpperCase() + s.slice(1)
 }
 
-- 
2.49.1


From dc7bffdf561ff5fdf120d73a7c760ae200a2b959 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 19 Mar 2026 12:01:23 +0100
Subject: [PATCH 098/428] fix: remove globe tab from locations, default to
 countries

Remove the 3D globe visualization tab and set Countries as the
default tab when visiting the dashboard.
---
 components/dashboard/Locations.tsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/components/dashboard/Locations.tsx b/components/dashboard/Locations.tsx
index 3fb9374..88f8d76 100644
--- a/components/dashboard/Locations.tsx
+++ b/components/dashboard/Locations.tsx
@@ -10,7 +10,6 @@ import * as Flags from 'country-flag-icons/react/3x2'
 import iso3166 from 'iso-3166-2'
 
 const DottedMap = dynamic(() => import('./DottedMap'), { ssr: false })
-const Globe = dynamic(() => import('./Globe'), { ssr: false })
 import Link from 'next/link'
 import { Modal, GlobeIcon, ArrowRightIcon } from '@ciphera-net/ui'
 import { ListSkeleton } from '@/components/skeletons'
@@ -29,14 +28,14 @@ interface LocationProps {
   onFilter?: (filter: DimensionFilter) => void
 }
 
-type Tab = 'map' | 'globe' | 'countries' | 'regions' | 'cities'
+type Tab = 'map' | 'countries' | 'regions' | 'cities'
 
 const LIMIT = 7
 
 const TAB_TO_DIMENSION: Record<string, string> = { countries: 'country', regions: 'region', cities: 'city' }
 
 export default function Locations({ countries, cities, regions, geoDataLevel = 'full', siteId, dateRange, onFilter }: LocationProps) {
-  const [activeTab, setActiveTab] = useState<Tab>('map')
+  const [activeTab, setActiveTab] = useState<Tab>('countries')
   const handleTabKeyDown = useTabListKeyboard()
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [modalSearch, setModalSearch] = useState('')
@@ -194,7 +193,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
     })
   }
 
-  const isVisualTab = activeTab === 'map' || activeTab === 'globe'
+  const isVisualTab = activeTab === 'map'
   const rawData = isVisualTab ? [] : getData()
   const data = filterUnknown(rawData)
   const totalPageviews = data.reduce((sum, item) => sum + item.pageviews, 0)
@@ -235,7 +234,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
             )}
           </div>
           <div className="flex gap-1 overflow-x-auto scrollbar-hide" role="tablist" aria-label="Location view tabs" onKeyDown={handleTabKeyDown}>
-            {(['map', 'globe', 'countries', 'regions', 'cities'] as Tab[]).map((tab) => (
+            {(['map', 'countries', 'regions', 'cities'] as Tab[]).map((tab) => (
               <button
                 key={tab}
                 onClick={() => setActiveTab(tab)}
@@ -267,9 +266,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
             </div>
           ) : isVisualTab ? (
             hasData ? (
-              activeTab === 'globe'
-                ? (inView ? <Globe data={filterUnknown(countries) as { country: string; pageviews: number }[]} /> : null)
-                : (inView ? <DottedMap data={filterUnknown(countries) as { country: string; pageviews: number }[]} /> : null)
+              inView ? <DottedMap data={filterUnknown(countries) as { country: string; pageviews: number }[]} /> : null
             ) : (
               <div className="h-full flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
                 <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
-- 
2.49.1


From 7cbfbc54ca705bacc5bab8caa37ab806ee793d43 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 19 Mar 2026 12:10:30 +0100
Subject: [PATCH 099/428] fix: tighten dashboard vertical spacing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reduce spacing now that top header is removed:
- Main content top padding: pt-6 → pt-4
- Header section: mb-8 → mb-6
- Chart section: mb-8 → mb-6
- Grid sections: mb-8 → mb-6
- Site name margin: mb-2 → mb-1
- Header inner gap: mb-4 → mb-3
---
 app/sites/[id]/page.tsx                 | 16 ++++++++--------
 components/dashboard/DashboardShell.tsx |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx
index a89999f..5ad39da 100644
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -438,11 +438,11 @@ export default function SiteDashboardPage() {
 
   return (
     <div className={`w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
-      <div className="mb-8">
-        <div className="flex items-center justify-between mb-4">
+      <div className="mb-6">
+        <div className="flex items-center justify-between mb-3">
           <div className="flex items-center gap-4">
             <div>
-              <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">
+              <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">
                 {site.name}
               </h1>
               <p className="text-neutral-600 dark:text-neutral-400">
@@ -539,7 +539,7 @@ export default function SiteDashboardPage() {
       )}
 
       {/* Advanced Chart with Integrated Stats */}
-      <div className="mb-8">
+      <div className="mb-6">
         <Chart
           data={dailyStats}
           prevData={prevDailyStats}
@@ -561,7 +561,7 @@ export default function SiteDashboardPage() {
         />
       </div>
 
-      <div className="grid gap-6 lg:grid-cols-2 mb-8 [&>*]:min-w-0">
+      <div className="grid gap-6 lg:grid-cols-2 mb-6 [&>*]:min-w-0">
         <ContentStats
           topPages={dashboard?.top_pages ?? []}
           entryPages={dashboard?.entry_pages ?? []}
@@ -581,7 +581,7 @@ export default function SiteDashboardPage() {
         />
       </div>
 
-      <div className="grid gap-6 lg:grid-cols-2 mb-8 [&>*]:min-w-0">
+      <div className="grid gap-6 lg:grid-cols-2 mb-6 [&>*]:min-w-0">
         <Locations
           countries={dashboard?.countries ?? []}
           cities={dashboard?.cities ?? []}
@@ -604,11 +604,11 @@ export default function SiteDashboardPage() {
         />
       </div>
 
-      <div className="grid gap-6 lg:grid-cols-2 mb-8 [&>*]:min-w-0">
+      <div className="grid gap-6 lg:grid-cols-2 mb-6 [&>*]:min-w-0">
         <Campaigns siteId={siteId} dateRange={dateRange} filters={filtersParam || undefined} onFilter={handleAddFilter} />
         <PeakHours siteId={siteId} dateRange={dateRange} />
       </div>
-      <div className="grid gap-6 lg:grid-cols-2 mb-8 [&>*]:min-w-0">
+      <div className="grid gap-6 lg:grid-cols-2 mb-6 [&>*]:min-w-0">
         <SearchPerformance siteId={siteId} dateRange={dateRange} />
         <GoalStats
           goalCounts={(dashboard?.goal_counts ?? []).filter(g => !/^scroll_\d+$/.test(g.event_name))}
diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index d319ef0..909b42b 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -38,7 +38,7 @@ export default function DashboardShell({
       />
       <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
         <ContentHeader onMobileMenuOpen={openMobile} />
-        <main className="flex-1 overflow-y-auto pt-6">
+        <main className="flex-1 overflow-y-auto pt-4">
           {children}
         </main>
       </div>
-- 
2.49.1


From bf3097c26ea13f34b4321baf6150cbcb3e11868b Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 19 Mar 2026 13:19:08 +0100
Subject: [PATCH 100/428] fix: invert macOS and PlayStation icons in dark mode

Both logos are dark/black and disappear against dark backgrounds.
Apply dark:invert CSS filter to flip them to white in dark mode.
---
 lib/utils/icons.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/lib/utils/icons.tsx b/lib/utils/icons.tsx
index 82a212d..14aee6e 100644
--- a/lib/utils/icons.tsx
+++ b/lib/utils/icons.tsx
@@ -58,6 +58,8 @@ export function getBrowserIcon(browserName: string) {
   return <img src={src} alt={browserName} width={18} height={18} className="inline-block" style={{ verticalAlign: '-0.125em' }} />
 }
 
+const OS_DARK_INVERT = new Set(['macos', 'playstation'])
+
 const OS_ICON_MAP: Record<string, string> = {
   'windows':     'windows',
   'macos':       'macos',
@@ -81,7 +83,8 @@ export function getOSIcon(osName: string) {
   if (!osName) return <Question className="text-neutral-400" />
   const file = OS_ICON_MAP[osName.toLowerCase()]
   if (!file) return <Question className="text-neutral-400" />
-  return <img src={`/icons/os/${file}.png`} alt={osName} width={18} height={18} className="inline-block" style={{ verticalAlign: '-0.125em' }} />
+  const cls = OS_DARK_INVERT.has(file) ? 'inline-block dark:invert' : 'inline-block'
+  return <img src={`/icons/os/${file}.png`} alt={osName} width={18} height={18} className={cls} style={{ verticalAlign: '-0.125em' }} />
 }
 
 export function getDeviceIcon(deviceName: string) {
-- 
2.49.1


From 73fc47e9109da2b5ac9078ee289ba94e91011b78 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 19 Mar 2026 13:45:21 +0100
Subject: [PATCH 101/428] fix: support GTM and tag managers via
 window.pulseConfig fallback

Script detection now also searches by src URL and supports a global
config object (window.pulseConfig) for environments where data-*
attributes are not preserved on the injected script element.
---
 lib/integration-guides.tsx | 21 ++++++++++++++++++--
 public/script.js           | 39 ++++++++++++++++++++++++++++----------
 2 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/lib/integration-guides.tsx b/lib/integration-guides.tsx
index 5cfaf17..dd175f7 100644
--- a/lib/integration-guides.tsx
+++ b/lib/integration-guides.tsx
@@ -2298,15 +2298,32 @@ export default defineConfig({
       <p>Follow these steps to add Pulse through GTM:</p>
       <ol>
         <li>Go to <strong>Tags &rarr; New &rarr; Custom HTML</strong></li>
-        <li>Paste the Pulse script</li>
+        <li>Paste the snippet below (replace <code>your-site.com</code> with your domain)</li>
         <li>Set the trigger to <strong>All Pages</strong></li>
         <li>Publish your container</li>
       </ol>
-      <CodeBlock filename="GTM → Custom HTML Tag">{`<script
+      <CodeBlock filename="GTM → Custom HTML Tag (recommended)">{`<script>
+  window.pulseConfig = { domain: "your-site.com" };
+</script>
+<script defer src="https://pulse.ciphera.net/script.js"></script>`}</CodeBlock>
+
+      <p>
+        This uses a global config object so that GTM does not need to preserve{' '}
+        <code>data-*</code> attributes on the injected script element. You can
+        also pass <code>api</code>, <code>storage</code>, and other options via{' '}
+        <code>pulseConfig</code>.
+      </p>
+
+      <details>
+        <summary className="cursor-pointer text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300">
+          Alternative: inline data attributes (may not work in all GTM setups)
+        </summary>
+        <CodeBlock filename="GTM → Custom HTML Tag (alternative)">{`<script
   defer
   data-domain="your-site.com"
   src="https://pulse.ciphera.net/script.js"
 ></script>`}</CodeBlock>
+      </details>
 
       <p>
         For more details, see the{' '}
diff --git a/public/script.js b/public/script.js
index 34f078a..1a15f6d 100644
--- a/public/script.js
+++ b/public/script.js
@@ -19,18 +19,37 @@
   }
 
 
-  // * Get domain from script tag
-  const script = document.currentScript || document.querySelector('script[data-domain]');
-  if (!script || !script.getAttribute('data-domain')) {
+  // * Get config from script tag, or fall back to window.pulseConfig for GTM / tag managers
+  // * GTM Custom HTML tags may not preserve data-* attributes on the injected <script> element,
+  // * so we also search by src URL and support a global config object.
+  const script = document.currentScript
+    || document.querySelector('script[data-domain]')
+    || document.querySelector('script[src*="pulse.ciphera.net/script"]');
+
+  const globalConfig = window.pulseConfig || {};
+
+  // * Helper: read a config value from script data-* attribute or globalConfig
+  function attr(name) {
+    // * Support both "storage-ttl" (data-attr style) and "storageTtl" (camelCase config style)
+    var camel = name.replace(/-([a-z])/g, function(_, c) { return c.toUpperCase(); });
+    return (script && script.getAttribute('data-' + name)) || globalConfig[name] || globalConfig[camel] || null;
+  }
+  function hasAttr(name) {
+    // * Support both "no-scroll" (data-attr style) and "noScroll" (camelCase config style)
+    var camel = name.replace(/-([a-z])/g, function(_, c) { return c.toUpperCase(); });
+    return (script && script.hasAttribute('data-' + name)) || globalConfig[name] === true || globalConfig[camel] === true;
+  }
+
+  const domain = attr('domain');
+  if (!domain) {
     return;
   }
 
-  const domain = script.getAttribute('data-domain');
-  const apiUrl = script.getAttribute('data-api') || 'https://pulse-api.ciphera.net';
+  const apiUrl = attr('api') || 'https://pulse-api.ciphera.net';
   // * Visitor ID storage: "local" (default, cross-tab) or "session" (ephemeral per-tab)
-  const storageMode = (script.getAttribute('data-storage') || 'local').toLowerCase() === 'session' ? 'session' : 'local';
+  const storageMode = (attr('storage') || 'local').toLowerCase() === 'session' ? 'session' : 'local';
   // * When storage is "local", optional TTL in hours; after TTL the ID is regenerated (e.g. 24 = one day)
-  const ttlHours = storageMode === 'local' ? parseFloat(script.getAttribute('data-storage-ttl') || '24') : 0;
+  const ttlHours = storageMode === 'local' ? parseFloat(attr('storage-ttl') || '24') : 0;
   const ttlMs = ttlHours > 0 ? ttlHours * 60 * 60 * 1000 : 0;
 
   let currentEventId = null;
@@ -343,7 +362,7 @@
   // * Auto-track scroll depth at 25%, 50%, 75%, and 100% (on by default)
   // * Each threshold fires once per pageview; resets on SPA navigation
   // * Opt-out: add data-no-scroll to the script tag
-  var trackScroll = !script.hasAttribute('data-no-scroll');
+  var trackScroll = !hasAttr('no-scroll');
 
   if (trackScroll) {
     var scrollThresholds = [25, 50, 75, 100];
@@ -378,8 +397,8 @@
 
   // * Auto-track outbound link clicks and file downloads (on by default)
   // * Opt-out: add data-no-outbound or data-no-downloads to the script tag
-  var trackOutbound = !script.hasAttribute('data-no-outbound');
-  var trackDownloads = !script.hasAttribute('data-no-downloads');
+  var trackOutbound = !hasAttr('no-outbound');
+  var trackDownloads = !hasAttr('no-downloads');
 
   if (trackOutbound || trackDownloads) {
     var FILE_EXT_REGEX = /\.(pdf|zip|gz|tar|xlsx|xls|csv|docx|doc|pptx|ppt|mp4|mp3|wav|avi|mov|exe|dmg|pkg|deb|rpm|iso|7z|rar)($|\?|#)/i;
-- 
2.49.1


From ac9e10b436cfcc694c67029dc3c771422fd4e141 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 19 Mar 2026 13:56:18 +0100
Subject: [PATCH 102/428] fix: auto-detect domain from hostname for zero-config
 GTM support

When data-domain attribute and pulseConfig are both unavailable (common
with GTM which strips data-* attributes), the script now falls back to
location.hostname. This is safe because the backend already validates
Origin/Referer against the registered domain. Strips www. prefix on
auto-detected hostname to match typical Pulse registration patterns.
---
 public/script.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/public/script.js b/public/script.js
index 1a15f6d..12c076d 100644
--- a/public/script.js
+++ b/public/script.js
@@ -40,7 +40,10 @@
     return (script && script.hasAttribute('data-' + name)) || globalConfig[name] === true || globalConfig[camel] === true;
   }
 
-  const domain = attr('domain');
+  // * Resolve domain: explicit config > data-domain > auto-detect from hostname
+  // * Auto-detect enables zero-config GTM installs; the backend validates Origin anyway
+  var explicitDomain = attr('domain');
+  const domain = explicitDomain || location.hostname.replace(/^www\./, '');
   if (!domain) {
     return;
   }
-- 
2.49.1


From e6d840abb9e9367120749dc64c57d12f151d4321 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 19 Mar 2026 13:58:09 +0100
Subject: [PATCH 103/428] docs: simplify GTM integration guide for auto-detect
 domain

---
 lib/integration-guides.tsx | 29 ++++++++++++++---------------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/lib/integration-guides.tsx b/lib/integration-guides.tsx
index dd175f7..b8bfa83 100644
--- a/lib/integration-guides.tsx
+++ b/lib/integration-guides.tsx
@@ -2298,31 +2298,30 @@ export default defineConfig({
       <p>Follow these steps to add Pulse through GTM:</p>
       <ol>
         <li>Go to <strong>Tags &rarr; New &rarr; Custom HTML</strong></li>
-        <li>Paste the snippet below (replace <code>your-site.com</code> with your domain)</li>
+        <li>Paste the snippet below</li>
         <li>Set the trigger to <strong>All Pages</strong></li>
         <li>Publish your container</li>
       </ol>
-      <CodeBlock filename="GTM → Custom HTML Tag (recommended)">{`<script>
-  window.pulseConfig = { domain: "your-site.com" };
-</script>
-<script defer src="https://pulse.ciphera.net/script.js"></script>`}</CodeBlock>
+      <CodeBlock filename="GTM → Custom HTML Tag">{`<script defer src="https://pulse.ciphera.net/script.js"></script>`}</CodeBlock>
 
       <p>
-        This uses a global config object so that GTM does not need to preserve{' '}
-        <code>data-*</code> attributes on the injected script element. You can
-        also pass <code>api</code>, <code>storage</code>, and other options via{' '}
-        <code>pulseConfig</code>.
+        That&apos;s it. Pulse auto-detects the domain from the page, so no extra
+        configuration is needed.
       </p>
 
       <details>
         <summary className="cursor-pointer text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300">
-          Alternative: inline data attributes (may not work in all GTM setups)
+          Advanced: override domain or configure options
         </summary>
-        <CodeBlock filename="GTM → Custom HTML Tag (alternative)">{`<script
-  defer
-  data-domain="your-site.com"
-  src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
+        <p className="mt-3 text-sm text-neutral-600 dark:text-neutral-400">
+          If your site is registered under a different domain than the page
+          hostname, or you need custom options (API endpoint, storage mode, etc.),
+          use <code>pulseConfig</code>:
+        </p>
+        <CodeBlock filename="GTM → Custom HTML Tag (with config)">{`<script>
+  window.pulseConfig = { domain: "your-site.com" };
+</script>
+<script defer src="https://pulse.ciphera.net/script.js"></script>`}</CodeBlock>
       </details>
 
       <p>
-- 
2.49.1


From 09b4266a4989bf56ea16f852fe31b7af68fa5bc8 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 19 Mar 2026 15:12:07 +0100
Subject: [PATCH 104/428] feat: add 5-level intensity heatmap to Peak Hours
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace binary on/off coloring with 6 opacity levels (transparent,
0.15, 0.35, 0.60, 0.82, solid) based on percentage of max visitors.
Zero-traffic cells are now visually empty. Adds a GitHub-style
"Less → More" legend strip below the grid.
---
 components/dashboard/PeakHours.tsx | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/components/dashboard/PeakHours.tsx b/components/dashboard/PeakHours.tsx
index b80f068..e275ffb 100644
--- a/components/dashboard/PeakHours.tsx
+++ b/components/dashboard/PeakHours.tsx
@@ -19,9 +19,11 @@ const BUCKETS = 12 // 2-hour buckets
 const BUCKET_LABELS: Record<number, string> = { 0: '00:00', 3: '06:00', 6: '12:00', 9: '18:00' }
 
 const HIGHLIGHT_COLORS = [
-  'rgba(253,94,15,0.18)',
-  'rgba(253,94,15,0.38)',
-  'rgba(253,94,15,0.62)',
+  'transparent',
+  'rgba(253,94,15,0.15)',
+  'rgba(253,94,15,0.35)',
+  'rgba(253,94,15,0.60)',
+  'rgba(253,94,15,0.82)',
   '#FD5E0F',
 ]
 
@@ -37,10 +39,12 @@ function formatHour(hour: number): string {
 
 function getHighlightColor(value: number, max: number): string {
   if (value === 0) return HIGHLIGHT_COLORS[0]
+  if (value === max) return HIGHLIGHT_COLORS[5]
   const ratio = value / max
-  if (ratio < 0.25) return HIGHLIGHT_COLORS[1]
-  if (ratio < 0.6) return HIGHLIGHT_COLORS[2]
-  return HIGHLIGHT_COLORS[3]
+  if (ratio <= 0.25) return HIGHLIGHT_COLORS[1]
+  if (ratio <= 0.50) return HIGHLIGHT_COLORS[2]
+  if (ratio <= 0.75) return HIGHLIGHT_COLORS[3]
+  return HIGHLIGHT_COLORS[4]
 }
 
 export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
@@ -212,6 +216,19 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
               </div>
             </div>
 
+            {/* Intensity legend */}
+            <div className="flex items-center justify-end gap-1.5 mt-2">
+              <span className="text-[10px] text-neutral-400 dark:text-neutral-500">Less</span>
+              {HIGHLIGHT_COLORS.map((color, i) => (
+                <div
+                  key={i}
+                  className="w-[10px] h-[10px] rounded-[2px] border border-neutral-200 dark:border-neutral-800"
+                  style={{ backgroundColor: color }}
+                />
+              ))}
+              <span className="text-[10px] text-neutral-400 dark:text-neutral-500">More</span>
+            </div>
+
             {/* Cell-anchored tooltip */}
             <AnimatePresence>
               {hovered && tooltipData && tooltipPos && (
-- 
2.49.1


From 4b46bba883b032d213cea13e7c03d5e823fb89ff Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 19 Mar 2026 17:23:57 +0100
Subject: [PATCH 105/428] feat: redesign Search dashboard card to match Pulse
 design language
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add proportional impression bars, color-coded position badges,
animated Queries/Pages tabs, hover percentage reveals, and
searchable expand modal — bringing Search to parity with other
dashboard cards.
---
 CHANGELOG.md                               |   1 +
 components/dashboard/SearchPerformance.tsx | 342 +++++++++++++++------
 2 files changed, 255 insertions(+), 88 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1a68ccb..5a0cc3e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ### Improved
 
+- **Redesigned Search card on the dashboard.** The Search section of the dashboard has been completely refreshed to match the rest of Pulse. Search queries now show proportional bars so you can visually compare which queries get the most impressions. Hovering a row reveals the impression share percentage. Position badges are now color-coded — green for page 1 rankings, orange for page 2, and red for queries buried beyond page 5. You can switch between your top search queries and top pages using tabs, and expand the full list in a searchable popup without leaving the dashboard.
 - **Smaller, faster tracking script.** The tracking script is now about 20% smaller. Logic like page path cleaning, referrer filtering, error page detection, and input validation has been moved from your browser to the Pulse server. This means the script loads faster on every page, and Pulse can improve these features without needing you to update anything.
 - **Automatic 404 page detection.** Pulse now detects error pages (404 / "Page Not Found") automatically on the server by reading your page title — no extra setup needed. Previously this ran in the browser and couldn't be improved without updating the script. Now Pulse can recognize more error page patterns over time, including pages in other languages, without any changes on your end.
 - **Smarter bot filtering.** Pulse now catches more types of automated traffic that were slipping through — like headless browsers with default screen sizes, bot farms that rotate through different locations, and bots that fire duplicate events within milliseconds. Bot detection checks have also been moved from the tracking script to the server, making the script smaller and faster for real visitors.
diff --git a/components/dashboard/SearchPerformance.tsx b/components/dashboard/SearchPerformance.tsx
index 0938a6d..949dcd8 100644
--- a/components/dashboard/SearchPerformance.tsx
+++ b/components/dashboard/SearchPerformance.tsx
@@ -1,14 +1,26 @@
 'use client'
 
-import Link from 'next/link'
-import { MagnifyingGlass, CaretUp, CaretDown } from '@phosphor-icons/react'
-import { useGSCStatus, useGSCOverview, useGSCTopQueries } from '@/lib/swr/dashboard'
+import { useState, useEffect } from 'react'
+import { motion } from 'framer-motion'
+import { logger } from '@/lib/utils/logger'
+import { formatNumber, Modal } from '@ciphera-net/ui'
+import { MagnifyingGlass, CaretUp, CaretDown, FrameCornersIcon } from '@phosphor-icons/react'
+import { useGSCStatus, useGSCOverview, useGSCTopQueries, useGSCTopPages } from '@/lib/swr/dashboard'
+import { getGSCTopQueries, getGSCTopPages } from '@/lib/api/gsc'
+import type { GSCDataRow } from '@/lib/api/gsc'
+import { useTabListKeyboard } from '@/lib/hooks/useTabListKeyboard'
+import { ListSkeleton } from '@/components/skeletons'
+import VirtualList from './VirtualList'
 
 interface SearchPerformanceProps {
   siteId: string
   dateRange: { start: string; end: string }
 }
 
+type Tab = 'queries' | 'pages'
+
+const LIMIT = 7
+
 function ChangeArrow({ current, previous, invert = false }: { current: number; previous: number; invert?: boolean }) {
   if (!previous || previous === 0) return null
   const improved = invert ? current < previous : current > previous
@@ -21,109 +33,263 @@ function ChangeArrow({ current, previous, invert = false }: { current: number; p
   )
 }
 
+function getPositionBadgeClasses(position: number): string {
+  if (position <= 10) return 'text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 dark:bg-emerald-500/20'
+  if (position <= 20) return 'text-brand-orange dark:text-brand-orange bg-brand-orange/10 dark:bg-brand-orange/20'
+  if (position <= 50) return 'text-neutral-400 dark:text-neutral-500 bg-neutral-100 dark:bg-neutral-800'
+  return 'text-red-500 dark:text-red-400 bg-red-500/10 dark:bg-red-500/20'
+}
+
 export default function SearchPerformance({ siteId, dateRange }: SearchPerformanceProps) {
+  const [activeTab, setActiveTab] = useState<Tab>('queries')
+  const handleTabKeyDown = useTabListKeyboard()
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [modalSearch, setModalSearch] = useState('')
+  const [fullData, setFullData] = useState<GSCDataRow[]>([])
+  const [isLoadingFull, setIsLoadingFull] = useState(false)
+
   const { data: gscStatus } = useGSCStatus(siteId)
   const { data: overview, isLoading: overviewLoading } = useGSCOverview(siteId, dateRange.start, dateRange.end)
-  const { data: queriesData, isLoading: queriesLoading } = useGSCTopQueries(siteId, dateRange.start, dateRange.end, 5, 0)
+  const { data: queriesData, isLoading: queriesLoading } = useGSCTopQueries(siteId, dateRange.start, dateRange.end, LIMIT, 0)
+  const { data: pagesData, isLoading: pagesLoading } = useGSCTopPages(siteId, dateRange.start, dateRange.end, LIMIT, 0)
 
-  // Don't render if GSC is not connected or no data
+  // Fetch full data when modal opens (matches ContentStats/TopReferrers pattern)
+  useEffect(() => {
+    if (isModalOpen) {
+      const fetchData = async () => {
+        setIsLoadingFull(true)
+        try {
+          if (activeTab === 'queries') {
+            const data = await getGSCTopQueries(siteId, dateRange.start, dateRange.end, 100, 0)
+            setFullData(data.queries ?? [])
+          } else {
+            const data = await getGSCTopPages(siteId, dateRange.start, dateRange.end, 100, 0)
+            setFullData(data.pages ?? [])
+          }
+        } catch (e) {
+          logger.error(e)
+        } finally {
+          setIsLoadingFull(false)
+        }
+      }
+      fetchData()
+    } else {
+      setFullData([])
+    }
+  }, [isModalOpen, activeTab, siteId, dateRange])
+
+  // Don't render if GSC is not connected
   if (!gscStatus?.connected) return null
 
-  const isLoading = overviewLoading || queriesLoading
+  const isLoading = overviewLoading || queriesLoading || pagesLoading
   const queries = queriesData?.queries ?? []
+  const pages = pagesData?.pages ?? []
   const hasData = overview && (overview.total_clicks > 0 || overview.total_impressions > 0)
 
   // Hide panel entirely if loaded but no data
   if (!isLoading && !hasData) return null
 
-  return (
-    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
-      {/* Header */}
-      <div className="flex items-center justify-between mb-4">
-        <div className="flex items-center gap-2">
-          <MagnifyingGlass className="w-5 h-5 text-neutral-400 dark:text-neutral-500" weight="bold" />
-          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
-            Search
-          </h3>
-        </div>
-        <Link
-          href={`/sites/${siteId}/search`}
-          className="text-xs font-medium text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange transition-colors"
-        >
-          View all &rarr;
-        </Link>
-      </div>
+  const data = activeTab === 'queries' ? queries : pages
+  const totalImpressions = data.reduce((sum, d) => sum + d.impressions, 0)
+  const displayedData = data.slice(0, LIMIT)
+  const emptySlots = Math.max(0, LIMIT - displayedData.length)
+  const showViewAll = data.length >= LIMIT
 
-      {isLoading ? (
-        /* Loading skeleton */
-        <div className="flex-1 space-y-4">
-          <div className="flex items-center gap-6">
-            <div className="h-4 w-20 bg-neutral-100 dark:bg-neutral-800 rounded animate-pulse" />
-            <div className="h-4 w-24 bg-neutral-100 dark:bg-neutral-800 rounded animate-pulse" />
-            <div className="h-4 w-20 bg-neutral-100 dark:bg-neutral-800 rounded animate-pulse" />
+  const getLabel = (row: GSCDataRow) => activeTab === 'queries' ? row.query : row.page
+  const getTabLabel = (tab: Tab) => tab === 'queries' ? 'Queries' : 'Pages'
+
+  return (
+    <>
+      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <MagnifyingGlass className="w-5 h-5 text-neutral-400 dark:text-neutral-500" weight="bold" />
+            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">Search</h3>
+            {showViewAll && (
+              <button
+                onClick={() => setIsModalOpen(true)}
+                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
+                aria-label="View all search data"
+              >
+                <FrameCornersIcon className="w-4 h-4" weight="bold" />
+              </button>
+            )}
           </div>
-          <div className="space-y-2 mt-4">
-            {Array.from({ length: 5 }).map((_, i) => (
-              <div key={i} className="h-9 bg-neutral-100 dark:bg-neutral-800 rounded-lg animate-pulse" />
+          <div className="flex gap-1 overflow-x-auto scrollbar-hide" role="tablist" aria-label="Search data tabs" onKeyDown={handleTabKeyDown}>
+            {(['queries', 'pages'] as Tab[]).map((tab) => (
+              <button
+                key={tab}
+                onClick={() => setActiveTab(tab)}
+                role="tab"
+                aria-selected={activeTab === tab}
+                className={`relative px-2.5 py-1 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded cursor-pointer ${
+                  activeTab === tab
+                    ? 'text-neutral-900 dark:text-white'
+                    : 'text-neutral-400 dark:text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300'
+                }`}
+              >
+                {getTabLabel(tab)}
+                {activeTab === tab && (
+                  <motion.div
+                    layoutId="searchTab"
+                    className="absolute inset-x-0 -bottom-px h-0.5 bg-brand-orange"
+                    transition={{ type: 'spring', stiffness: 500, damping: 35 }}
+                  />
+                )}
+              </button>
             ))}
           </div>
         </div>
-      ) : (
-        <>
-          {/* Inline stats row */}
-          <div className="flex items-center gap-5 mb-4">
-            <div className="flex items-center gap-1.5">
-              <span className="text-xs text-neutral-500 dark:text-neutral-400">Clicks</span>
-              <span className="text-sm font-semibold text-neutral-900 dark:text-white">
-                {(overview?.total_clicks ?? 0).toLocaleString()}
-              </span>
-              <ChangeArrow current={overview?.total_clicks ?? 0} previous={overview?.prev_clicks ?? 0} />
-            </div>
-            <div className="flex items-center gap-1.5">
-              <span className="text-xs text-neutral-500 dark:text-neutral-400">Impressions</span>
-              <span className="text-sm font-semibold text-neutral-900 dark:text-white">
-                {(overview?.total_impressions ?? 0).toLocaleString()}
-              </span>
-              <ChangeArrow current={overview?.total_impressions ?? 0} previous={overview?.prev_impressions ?? 0} />
-            </div>
-            <div className="flex items-center gap-1.5">
-              <span className="text-xs text-neutral-500 dark:text-neutral-400">Avg Position</span>
-              <span className="text-sm font-semibold text-neutral-900 dark:text-white">
-                {(overview?.avg_position ?? 0).toFixed(1)}
-              </span>
-              <ChangeArrow current={overview?.avg_position ?? 0} previous={overview?.prev_avg_position ?? 0} invert />
-            </div>
-          </div>
 
-          {/* Top 5 queries list */}
-          <div className="space-y-1 flex-1">
-            {queries.length > 0 ? (
-              queries.map((q) => (
-                <div
-                  key={q.query}
-                  className="flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors"
-                >
-                  <span className="text-sm text-neutral-900 dark:text-white truncate flex-1 min-w-0" title={q.query}>
-                    {q.query}
-                  </span>
-                  <div className="flex items-center gap-3 ml-4 shrink-0">
-                    <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
-                      {q.clicks.toLocaleString()}
-                    </span>
-                    <span className="text-xs text-neutral-400 dark:text-neutral-500 bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded font-medium">
-                      {q.position.toFixed(1)}
-                    </span>
-                  </div>
-                </div>
-              ))
-            ) : (
-              <div className="flex-1 flex items-center justify-center py-6">
-                <p className="text-sm text-neutral-400 dark:text-neutral-500">No search data yet</p>
-              </div>
-            )}
+        {isLoading ? (
+          <div className="flex-1 space-y-4">
+            <div className="flex items-center gap-6">
+              <div className="h-4 w-20 bg-neutral-100 dark:bg-neutral-800 rounded animate-pulse" />
+              <div className="h-4 w-24 bg-neutral-100 dark:bg-neutral-800 rounded animate-pulse" />
+              <div className="h-4 w-20 bg-neutral-100 dark:bg-neutral-800 rounded animate-pulse" />
+            </div>
+            <div className="space-y-2 mt-4">
+              <ListSkeleton rows={LIMIT} />
+            </div>
           </div>
-        </>
-      )}
-    </div>
+        ) : (
+          <>
+            {/* Inline stats row */}
+            <div className="flex items-center gap-5 mb-4">
+              <div className="flex items-center gap-1.5">
+                <span className="text-xs text-neutral-500 dark:text-neutral-400">Clicks</span>
+                <span className="text-sm font-semibold text-neutral-900 dark:text-white">
+                  {formatNumber(overview?.total_clicks ?? 0)}
+                </span>
+                <ChangeArrow current={overview?.total_clicks ?? 0} previous={overview?.prev_clicks ?? 0} />
+              </div>
+              <div className="flex items-center gap-1.5">
+                <span className="text-xs text-neutral-500 dark:text-neutral-400">Impressions</span>
+                <span className="text-sm font-semibold text-neutral-900 dark:text-white">
+                  {formatNumber(overview?.total_impressions ?? 0)}
+                </span>
+                <ChangeArrow current={overview?.total_impressions ?? 0} previous={overview?.prev_impressions ?? 0} />
+              </div>
+              <div className="flex items-center gap-1.5">
+                <span className="text-xs text-neutral-500 dark:text-neutral-400">Avg Position</span>
+                <span className="text-sm font-semibold text-neutral-900 dark:text-white">
+                  {(overview?.avg_position ?? 0).toFixed(1)}
+                </span>
+                <ChangeArrow current={overview?.avg_position ?? 0} previous={overview?.prev_avg_position ?? 0} invert />
+              </div>
+            </div>
+
+            {/* Data list */}
+            <div className="space-y-2 flex-1 min-h-[270px]">
+              {displayedData.length > 0 ? (
+                <>
+                  {displayedData.map((row) => {
+                    const maxImpressions = displayedData[0]?.impressions ?? 0
+                    const barWidth = maxImpressions > 0 ? (row.impressions / maxImpressions) * 75 : 0
+                    const label = getLabel(row)
+                    return (
+                      <div
+                        key={label}
+                        className="relative flex items-center justify-between h-9 group hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors"
+                      >
+                        <div
+                          className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/40 rounded-md transition-all"
+                          style={{ width: `${barWidth}%` }}
+                        />
+                        <span className="relative text-sm text-neutral-900 dark:text-white truncate flex-1 min-w-0" title={label}>
+                          {label}
+                        </span>
+                        <div className="relative flex items-center gap-3 ml-4 shrink-0">
+                          <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
+                            {totalImpressions > 0 ? `${Math.round((row.impressions / totalImpressions) * 100)}%` : ''}
+                          </span>
+                          <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+                            {formatNumber(row.clicks)}
+                          </span>
+                          <span className={`text-xs px-1.5 py-0.5 rounded font-medium ${getPositionBadgeClasses(row.position)}`}>
+                            {row.position.toFixed(1)}
+                          </span>
+                        </div>
+                      </div>
+                    )
+                  })}
+                  {Array.from({ length: emptySlots }).map((_, i) => (
+                    <div key={`empty-${i}`} className="h-9 px-2 -mx-2" aria-hidden="true" />
+                  ))}
+                </>
+              ) : (
+                <div className="flex-1 flex items-center justify-center py-6">
+                  <p className="text-sm text-neutral-400 dark:text-neutral-500">No search data yet</p>
+                </div>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+
+      {/* Expand modal */}
+      <Modal
+        isOpen={isModalOpen}
+        onClose={() => { setIsModalOpen(false); setModalSearch('') }}
+        title={`Search ${getTabLabel(activeTab)}`}
+        className="max-w-2xl"
+      >
+        <div>
+          <input
+            type="text"
+            value={modalSearch}
+            onChange={(e) => setModalSearch(e.target.value)}
+            placeholder={`Search ${activeTab}...`}
+            className="w-full px-3 py-2 mb-3 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg text-neutral-900 dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
+          />
+        </div>
+        <div className="max-h-[80vh]">
+          {isLoadingFull ? (
+            <div className="py-4">
+              <ListSkeleton rows={10} />
+            </div>
+          ) : (() => {
+            const source = fullData.length > 0 ? fullData : data
+            const modalData = source.filter(row => {
+              if (!modalSearch) return true
+              return getLabel(row).toLowerCase().includes(modalSearch.toLowerCase())
+            })
+            const modalTotal = modalData.reduce((sum, r) => sum + r.impressions, 0)
+            return (
+              <VirtualList
+                items={modalData}
+                estimateSize={36}
+                className="max-h-[80vh] overflow-y-auto pr-2"
+                renderItem={(row) => {
+                  const label = getLabel(row)
+                  return (
+                    <div
+                      key={label}
+                      className="flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 transition-colors"
+                    >
+                      <span className="flex-1 truncate text-sm text-neutral-900 dark:text-white" title={label}>
+                        {label}
+                      </span>
+                      <div className="flex items-center gap-3 ml-4">
+                        <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
+                          {modalTotal > 0 ? `${Math.round((row.impressions / modalTotal) * 100)}%` : ''}
+                        </span>
+                        <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+                          {formatNumber(row.clicks)}
+                        </span>
+                        <span className={`text-xs px-1.5 py-0.5 rounded font-medium ${getPositionBadgeClasses(row.position)}`}>
+                          {row.position.toFixed(1)}
+                        </span>
+                      </div>
+                    </div>
+                  )
+                }}
+              />
+            )
+          })()}
+        </div>
+      </Modal>
+    </>
   )
 }
-- 
2.49.1


From 8fdb8c4a2fb0750eb54cb971067f51b62c1fc41c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 18:17:27 +0100
Subject: [PATCH 106/428] fix: remove orange glow orb backgrounds from
 marketing pages

---
 app/about/page.tsx                  | 1 -
 app/features/page.tsx               | 1 -
 app/installation/page.tsx           | 2 --
 app/integrations/nextjs/page.tsx    | 1 -
 app/integrations/page.tsx           | 1 -
 app/integrations/react/page.tsx     | 1 -
 app/integrations/vue/page.tsx       | 1 -
 app/integrations/wordpress/page.tsx | 1 -
 app/not-found.tsx                   | 2 --
 app/page.tsx                        | 4 ----
 components/IntegrationGuide.tsx     | 1 -
 11 files changed, 16 deletions(-)

diff --git a/app/about/page.tsx b/app/about/page.tsx
index f37e4af..4e4c649 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -60,7 +60,6 @@ export default function AboutPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
         <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div 
           className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
diff --git a/app/features/page.tsx b/app/features/page.tsx
index 8431d58..700ea6d 100644
--- a/app/features/page.tsx
+++ b/app/features/page.tsx
@@ -109,7 +109,6 @@ export default function FeaturesPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
         <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div
           className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
diff --git a/app/installation/page.tsx b/app/installation/page.tsx
index a4c1d3c..48a3af4 100644
--- a/app/installation/page.tsx
+++ b/app/installation/page.tsx
@@ -8,8 +8,6 @@ export default function InstallationPage() {
       
       {/* * --- 1. ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        {/* * Top-left Orange Glow */}
-        <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
         {/* * Bottom-right Neutral Glow */}
         <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         {/* * Grid Pattern with Radial Mask */}
diff --git a/app/integrations/nextjs/page.tsx b/app/integrations/nextjs/page.tsx
index 2a26425..31f76b6 100644
--- a/app/integrations/nextjs/page.tsx
+++ b/app/integrations/nextjs/page.tsx
@@ -8,7 +8,6 @@ export default function NextJsIntegrationPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
         <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div 
           className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
diff --git a/app/integrations/page.tsx b/app/integrations/page.tsx
index a1fdb17..10ece2f 100644
--- a/app/integrations/page.tsx
+++ b/app/integrations/page.tsx
@@ -93,7 +93,6 @@ export default function IntegrationsPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
         <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div
           className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
diff --git a/app/integrations/react/page.tsx b/app/integrations/react/page.tsx
index 9c29053..789a819 100644
--- a/app/integrations/react/page.tsx
+++ b/app/integrations/react/page.tsx
@@ -8,7 +8,6 @@ export default function ReactIntegrationPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
         <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div 
           className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
diff --git a/app/integrations/vue/page.tsx b/app/integrations/vue/page.tsx
index 81434c5..a33e528 100644
--- a/app/integrations/vue/page.tsx
+++ b/app/integrations/vue/page.tsx
@@ -8,7 +8,6 @@ export default function VueIntegrationPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
         <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div 
           className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
diff --git a/app/integrations/wordpress/page.tsx b/app/integrations/wordpress/page.tsx
index bd80d9f..d38f11b 100644
--- a/app/integrations/wordpress/page.tsx
+++ b/app/integrations/wordpress/page.tsx
@@ -8,7 +8,6 @@ export default function WordPressIntegrationPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
         <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div 
           className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
diff --git a/app/not-found.tsx b/app/not-found.tsx
index dc993ee..25db689 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -6,8 +6,6 @@ export default function NotFound() {
     <div className="relative min-h-[80vh] flex flex-col items-center justify-center overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        {/* * Center Orange Glow */}
-        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
         {/* * Grid Pattern with Radial Mask */}
         <div 
           className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
diff --git a/app/page.tsx b/app/page.tsx
index b4ac71d..60e48fb 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -23,8 +23,6 @@ import { formatDate } from '@/lib/utils/formatDate'
 function DashboardPreview() {
   return (
     <div className="relative w-full max-w-7xl mx-auto mt-20 mb-32">
-      <div className="absolute inset-0 bg-brand-orange/20 blur-[100px] -z-10 rounded-full opacity-50" />
-
       <motion.div
         initial={{ opacity: 0, y: 40 }}
         animate={{ opacity: 1, y: 0 }}
@@ -238,8 +236,6 @@ export default function HomePage() {
         
         {/* * --- 1. ATMOSPHERE (Background) --- */}
         <div className="absolute inset-0 -z-10 pointer-events-none">
-          {/* * Top-left Orange Glow */}
-          <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
           {/* * Bottom-right Neutral Glow */}
           <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
           {/* * Grid Pattern with Radial Mask */}
diff --git a/components/IntegrationGuide.tsx b/components/IntegrationGuide.tsx
index fb53861..c309f63 100644
--- a/components/IntegrationGuide.tsx
+++ b/components/IntegrationGuide.tsx
@@ -39,7 +39,6 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
         <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div
           className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
-- 
2.49.1


From e6910b77cad804a2a67ad6f28462565d4d28737f Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 18:23:12 +0100
Subject: [PATCH 107/428] fix: remove orange radial gradient from body
 background

---
 styles/globals.css | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/styles/globals.css b/styles/globals.css
index a37e520..0592456 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -56,11 +56,7 @@
   }
   
   body {
-    @apply bg-ciphera-gradient bg-fixed;
-  }
-  
-  .dark body {
-    @apply bg-ciphera-gradient-dark;
+    @apply bg-white dark:bg-neutral-950;
   }
 }
 
-- 
2.49.1


From ec9d1a2c2df5c3d5eb06e668c5f82a7c72f02a03 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 18:27:35 +0100
Subject: [PATCH 108/428] feat: force dark mode and match ciphera-website
 background

---
 app/layout.tsx     | 16 +++++++---------
 styles/globals.css | 29 +++--------------------------
 2 files changed, 10 insertions(+), 35 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index 13c4f7b..cc9d960 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,4 +1,4 @@
-import { ThemeProviders, Toaster } from '@ciphera-net/ui'
+import { Toaster } from '@ciphera-net/ui'
 import { AuthProvider } from '@/lib/auth/context'
 import SWRProvider from '@/components/SWRProvider'
 import type { Metadata, Viewport } from 'next'
@@ -45,15 +45,13 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="en" className={plusJakartaSans.variable} suppressHydrationWarning>
-      <body className="antialiased min-h-screen flex flex-col bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-50">
+    <html lang="en" className={`${plusJakartaSans.variable} dark`} suppressHydrationWarning>
+      <body className="antialiased min-h-screen flex flex-col bg-neutral-950 text-neutral-100">
         <SWRProvider>
-          <ThemeProviders>
-            <AuthProvider>
-              <LayoutContent>{children}</LayoutContent>
-              <Toaster />
-            </AuthProvider>
-          </ThemeProviders>
+          <AuthProvider>
+            <LayoutContent>{children}</LayoutContent>
+            <Toaster />
+          </AuthProvider>
         </SWRProvider>
       </body>
     </html>
diff --git a/styles/globals.css b/styles/globals.css
index 0592456..315ee27 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -10,29 +10,6 @@
     --color-error: #EF4444;
 
     /* * Chart colors */
-    --chart-1: #FD5E0F;
-    --chart-2: #3b82f6;
-    --chart-3: #22c55e;
-    --chart-4: #a855f7;
-    --chart-5: #f59e0b;
-    --chart-grid: #f5f5f5;
-    --chart-axis: #a3a3a3;
-
-    /* * shadcn-compatible semantic tokens (for 21st.dev components) */
-    --background: 255 255 255;
-    --foreground: 23 23 23;
-    --card: 255 255 255;
-    --card-foreground: 23 23 23;
-    --popover: 255 255 255;
-    --popover-foreground: 23 23 23;
-    --primary: 253 94 15;
-    --primary-foreground: 255 255 255;
-    --secondary: 245 245 245;
-    --secondary-foreground: 23 23 23;
-    --destructive-foreground: 255 255 255;
-  }
-
-  .dark {
     --chart-1: #FD5E0F;
     --chart-2: #60a5fa;
     --chart-3: #4ade80;
@@ -41,7 +18,7 @@
     --chart-grid: #262626;
     --chart-axis: #737373;
 
-    /* * shadcn-compatible dark mode overrides */
+    /* * shadcn-compatible semantic tokens (dark-only) */
     --background: 10 10 10;
     --foreground: 250 250 250;
     --card: 23 23 23;
@@ -54,9 +31,9 @@
     --secondary-foreground: 250 250 250;
     --destructive-foreground: 255 255 255;
   }
-  
+
   body {
-    @apply bg-white dark:bg-neutral-950;
+    @apply bg-neutral-950 text-neutral-100 antialiased;
   }
 }
 
-- 
2.49.1


From 21c68b43344200564b84b73d227eff024a804d24 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 18:30:06 +0100
Subject: [PATCH 109/428] fix: restore ThemeProvider with forced dark mode to
 fix build

---
 app/layout.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index cc9d960..632089c 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,4 +1,4 @@
-import { Toaster } from '@ciphera-net/ui'
+import { ThemeProvider, Toaster } from '@ciphera-net/ui'
 import { AuthProvider } from '@/lib/auth/context'
 import SWRProvider from '@/components/SWRProvider'
 import type { Metadata, Viewport } from 'next'
@@ -48,10 +48,12 @@ export default function RootLayout({
     <html lang="en" className={`${plusJakartaSans.variable} dark`} suppressHydrationWarning>
       <body className="antialiased min-h-screen flex flex-col bg-neutral-950 text-neutral-100">
         <SWRProvider>
-          <AuthProvider>
-            <LayoutContent>{children}</LayoutContent>
-            <Toaster />
-          </AuthProvider>
+          <ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false}>
+            <AuthProvider>
+              <LayoutContent>{children}</LayoutContent>
+              <Toaster />
+            </AuthProvider>
+          </ThemeProvider>
         </SWRProvider>
       </body>
     </html>
-- 
2.49.1


From 6d253e6d18a23a630126adb74082561d8a0cf316 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 18:54:15 +0100
Subject: [PATCH 110/428] chore: bump @ciphera-net/ui to 0.3.0 (dark-only)

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 587ffc0..cf8c85f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "pulse-frontend",
       "version": "0.15.0-alpha",
       "dependencies": {
-        "@ciphera-net/ui": "^0.2.15",
+        "@ciphera-net/ui": "^0.3.0",
         "@ducanh2912/next-pwa": "^10.2.9",
         "@phosphor-icons/react": "^2.1.10",
         "@simplewebauthn/browser": "^13.2.2",
@@ -1670,9 +1670,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.2.15",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.2.15/ec35ffe3be80cb5deca6a05bd2d36d636333a4a9",
-      "integrity": "sha512-Y2snU21OFbcarVq6QbSkW/pbL3BL9SePf8dBzC36zUvDp5TuhIU7E/21ydVGxGH6Ye6wKw2G1Qsv3xsnsumyPA==",
+      "version": "0.3.0",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.3.0/d1016cffd0c4402d130c7fa3112348d9b75f730e",
+      "integrity": "sha512-d0Vn2N2l/Bawgy6UKKY6Fz94i+a5A2WA2UsuHLsDfxaG52OxMqpmeHu4mGV3tvPAqH/5K2yZC4E4ne1Tkes2xg==",
       "dependencies": {
         "@phosphor-icons/react": "^2.1.10",
         "class-variance-authority": "^0.7.1",
diff --git a/package.json b/package.json
index c13b8aa..66c210c 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.2.15",
+    "@ciphera-net/ui": "^0.3.0",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@phosphor-icons/react": "^2.1.10",
     "@simplewebauthn/browser": "^13.2.2",
-- 
2.49.1


From 64b245caca5dd0fecd947c1bf16cf0a52c97224d Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 19:13:00 +0100
Subject: [PATCH 111/428] feat: update card component to glass treatment

---
 components/ui/card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/ui/card.tsx b/components/ui/card.tsx
index fe06801..35989e9 100644
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -26,7 +26,7 @@ const useCardContext = () => {
 const cardVariants = cva('flex flex-col items-stretch text-card-foreground rounded-xl', {
   variants: {
     variant: {
-      default: 'bg-card border border-border shadow-xs black/5',
+      default: 'bg-neutral-900/80 border border-white/[0.08] backdrop-blur-sm',
       accent: 'bg-muted shadow-xs p-1',
     },
   },
-- 
2.49.1


From 7bf7e5cc3da095fd0054f28dde1edbc206e77795 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 19:26:25 +0100
Subject: [PATCH 112/428] feat: glass treatment + dark-only cleanup for
 dashboard components and navigation

---
 components/dashboard/AddFilterDropdown.tsx | 26 ++++++------
 components/dashboard/Campaigns.tsx         | 28 ++++++-------
 components/dashboard/ContentHeader.tsx     |  4 +-
 components/dashboard/ContentStats.tsx      | 34 ++++++++--------
 components/dashboard/DashboardShell.tsx    |  2 +-
 components/dashboard/DottedMap.tsx         |  2 +-
 components/dashboard/EventProperties.tsx   | 16 ++++----
 components/dashboard/GoalStats.tsx         | 20 +++++-----
 components/dashboard/Locations.tsx         | 46 +++++++++++-----------
 components/dashboard/PeakHours.tsx         | 24 +++++------
 components/dashboard/RealtimeVisitors.tsx  |  6 +--
 components/dashboard/ScrollDepth.tsx       | 14 +++----
 components/dashboard/SearchPerformance.tsx | 44 ++++++++++-----------
 components/dashboard/Sidebar.tsx           | 32 +++++++--------
 components/dashboard/TechSpecs.tsx         | 34 ++++++++--------
 15 files changed, 166 insertions(+), 166 deletions(-)

diff --git a/components/dashboard/AddFilterDropdown.tsx b/components/dashboard/AddFilterDropdown.tsx
index 2ad4066..74c835c 100644
--- a/components/dashboard/AddFilterDropdown.tsx
+++ b/components/dashboard/AddFilterDropdown.tsx
@@ -111,7 +111,7 @@ export default function AddFilterDropdown({ onAdd, suggestions = {}, onFetchSugg
         className={`inline-flex items-center gap-2 px-3 py-1.5 text-xs font-medium rounded-lg transition-all cursor-pointer ${
           isOpen
             ? 'bg-brand-orange/10 text-brand-orange border border-brand-orange/30'
-            : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700 hover:text-neutral-900 dark:hover:text-white border border-transparent'
+            : 'bg-neutral-800 text-neutral-400 hover:bg-neutral-700 hover:text-white border border-transparent'
         }`}
       >
         <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -121,7 +121,7 @@ export default function AddFilterDropdown({ onAdd, suggestions = {}, onFetchSugg
       </button>
 
       {isOpen && (
-        <div className="absolute top-full left-0 mt-1.5 z-50 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden min-w-[280px]">
+        <div className="absolute top-full left-0 mt-1.5 z-50 bg-neutral-900 border border-neutral-700 rounded-xl shadow-xl overflow-hidden min-w-[280px]">
           {!selectedDim ? (
             /* Step 1: Dimension list */
             <div className="py-1">
@@ -129,9 +129,9 @@ export default function AddFilterDropdown({ onAdd, suggestions = {}, onFetchSugg
                 <button
                   key={dim}
                   onClick={() => setSelectedDim(dim)}
-                  className="w-full flex items-center justify-between px-4 py-2.5 text-sm text-left hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors cursor-pointer"
+                  className="w-full flex items-center justify-between px-4 py-2.5 text-sm text-left hover:bg-neutral-800 transition-colors cursor-pointer"
                 >
-                  <span className="text-neutral-900 dark:text-white font-medium">{DIMENSION_LABELS[dim]}</span>
+                  <span className="text-white font-medium">{DIMENSION_LABELS[dim]}</span>
                   <svg className="w-3.5 h-3.5 text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                     <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
                   </svg>
@@ -145,13 +145,13 @@ export default function AddFilterDropdown({ onAdd, suggestions = {}, onFetchSugg
               <div className="flex items-center gap-2 px-3 pt-3 pb-2">
                 <button
                   onClick={() => { setSelectedDim(null); setSearch(''); setOperator('is'); setFetchedSuggestions([]) }}
-                  className="p-1 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors cursor-pointer rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-800"
+                  className="p-1 text-neutral-400 hover:text-neutral-300 transition-colors cursor-pointer rounded-md hover:bg-neutral-800"
                 >
                   <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                     <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
                   </svg>
                 </button>
-                <span className="text-sm font-semibold text-neutral-900 dark:text-white">
+                <span className="text-sm font-semibold text-white">
                   {DIMENSION_LABELS[selectedDim]}
                 </span>
               </div>
@@ -165,7 +165,7 @@ export default function AddFilterDropdown({ onAdd, suggestions = {}, onFetchSugg
                     className={`px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors cursor-pointer ${
                       operator === op
                         ? 'bg-brand-orange text-white'
-                        : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
+                        : 'bg-neutral-800 text-neutral-400 hover:bg-neutral-700'
                     }`}
                   >
                     {OPERATOR_LABELS[op]}
@@ -189,24 +189,24 @@ export default function AddFilterDropdown({ onAdd, suggestions = {}, onFetchSugg
                     }
                   }}
                   placeholder={`Search ${DIMENSION_LABELS[selectedDim]?.toLowerCase()}...`}
-                  className="w-full px-3 py-2 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg text-neutral-900 dark:text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-orange/40 focus:border-brand-orange transition-colors"
+                  className="w-full px-3 py-2 text-sm bg-neutral-800 border border-neutral-700 rounded-lg text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-orange/40 focus:border-brand-orange transition-colors"
                 />
               </div>
 
               {/* Values list */}
               {isFetching ? (
                 <div className="px-4 py-6 text-center">
-                  <div className="inline-block w-4 h-4 border-2 border-neutral-300 dark:border-neutral-600 border-t-brand-orange rounded-full animate-spin" />
+                  <div className="inline-block w-4 h-4 border-2 border-neutral-600 border-t-brand-orange rounded-full animate-spin" />
                 </div>
               ) : filtered.length > 0 ? (
-                <div className="max-h-52 overflow-y-auto border-t border-neutral-100 dark:border-neutral-800">
+                <div className="max-h-52 overflow-y-auto border-t border-neutral-800">
                   {filtered.map(s => (
                     <button
                       key={s.value}
                       onClick={() => handleSelectValue(s.value)}
-                      className="w-full flex items-center justify-between px-4 py-2 text-sm text-left hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors cursor-pointer"
+                      className="w-full flex items-center justify-between px-4 py-2 text-sm text-left hover:bg-neutral-800 transition-colors cursor-pointer"
                     >
-                      <span className="truncate text-neutral-900 dark:text-white">{s.label}</span>
+                      <span className="truncate text-white">{s.label}</span>
                       {s.count !== undefined && (
                         <span className="text-xs text-neutral-400 dark:text-neutral-500 ml-2 tabular-nums flex-shrink-0">
                           {s.count.toLocaleString()}
@@ -216,7 +216,7 @@ export default function AddFilterDropdown({ onAdd, suggestions = {}, onFetchSugg
                   ))}
                 </div>
               ) : search.trim() ? (
-                <div className="px-3 py-3 border-t border-neutral-100 dark:border-neutral-800">
+                <div className="px-3 py-3 border-t border-neutral-800">
                   <button
                     onClick={handleSubmitCustom}
                     className="w-full px-3 py-2 text-sm font-medium bg-brand-orange text-white rounded-lg hover:bg-brand-orange/90 transition-colors cursor-pointer"
diff --git a/components/dashboard/Campaigns.tsx b/components/dashboard/Campaigns.tsx
index 1c7ed31..f92b9b0 100644
--- a/components/dashboard/Campaigns.tsx
+++ b/components/dashboard/Campaigns.tsx
@@ -124,17 +124,17 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
 
   return (
     <>
-      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
+      <div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6 h-full flex flex-col">
         <div className="flex items-center justify-between mb-4">
           <div className="flex items-center gap-2">
             <Megaphone className="w-5 h-5 text-neutral-400 dark:text-neutral-500" weight="bold" />
-            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+            <h3 className="text-lg font-semibold text-white">
               Campaigns
             </h3>
             {showViewAll && (
               <button
                 onClick={() => setIsModalOpen(true)}
-                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
+                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
                 aria-label="View all campaigns"
               >
                 <FrameCornersIcon className="w-4 h-4" weight="bold" />
@@ -161,13 +161,13 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
                   <div
                     key={`${item.source}|${item.medium}|${item.campaign}`}
                     onClick={() => onFilter?.({ dimension: 'utm_source', operator: 'is', values: [item.source] })}
-                    className={`relative flex items-center justify-between py-1.5 group hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
+                    className={`relative flex items-center justify-between py-1.5 group hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
                   >
                     <div
                       className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/40 rounded-md transition-all"
                       style={{ width: `${barWidth}%` }}
                     />
-                    <div className="relative flex-1 text-neutral-900 dark:text-white flex items-center gap-3 min-w-0">
+                    <div className="relative flex-1 text-white flex items-center gap-3 min-w-0">
                       {renderSourceIcon(item.source)}
                       <div className="min-w-0">
                         <div className="truncate font-medium text-sm" title={item.source}>
@@ -184,7 +184,7 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
                       <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
                         {totalVisitors > 0 ? `${Math.round((item.visitors / totalVisitors) * 100)}%` : ''}
                       </span>
-                      <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+                      <span className="text-sm font-semibold text-neutral-400">
                         {formatNumber(item.visitors)}
                       </span>
                     </div>
@@ -197,13 +197,13 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
             </>
           ) : (
             <div className="h-full flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
-              <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
-                <Megaphone className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+              <div className="rounded-full bg-neutral-800 p-4">
+                <Megaphone className="w-8 h-8 text-neutral-400" />
               </div>
-              <h4 className="font-semibold text-neutral-900 dark:text-white">
+              <h4 className="font-semibold text-white">
                 Track your marketing campaigns
               </h4>
-              <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-xs">
+              <p className="text-sm text-neutral-400 max-w-xs">
                 Add UTM parameters to your links to see campaign performance here.
               </p>
               <button
@@ -230,7 +230,7 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
             value={modalSearch}
             onChange={(e) => setModalSearch(e.target.value)}
             placeholder="Search campaigns..."
-            className="w-full px-3 py-2 mb-3 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg text-neutral-900 dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
+            className="w-full px-3 py-2 mb-3 text-sm bg-neutral-800 border border-neutral-700 rounded-lg text-white placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
           />
         </div>
         <div className="max-h-[80vh]">
@@ -262,12 +262,12 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
                     <div
                       key={`${item.source}|${item.medium}|${item.campaign}`}
                       onClick={() => { if (onFilter) { onFilter({ dimension: 'utm_source', operator: 'is', values: [item.source] }); setIsModalOpen(false) } }}
-                      className={`flex items-center justify-between py-2 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
+                      className={`flex items-center justify-between py-2 group hover:bg-neutral-800 rounded-lg px-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
                     >
                       <div className="flex-1 flex items-center gap-3 min-w-0">
                         {renderSourceIcon(item.source)}
                         <div className="min-w-0">
-                          <div className="text-neutral-900 dark:text-white font-medium truncate text-sm" title={item.source}>
+                          <div className="text-white font-medium truncate text-sm" title={item.source}>
                             {getReferrerDisplayName(item.source)}
                           </div>
                           <div className="flex items-center gap-1.5 text-[11px] text-neutral-400 dark:text-neutral-500">
@@ -281,7 +281,7 @@ export default function Campaigns({ siteId, dateRange, filters, onFilter }: Camp
                         <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
                           {modalTotal > 0 ? `${Math.round((item.visitors / modalTotal) * 100)}%` : ''}
                         </span>
-                        <span className="font-semibold text-neutral-900 dark:text-white">
+                        <span className="font-semibold text-white">
                           {formatNumber(item.visitors)}
                         </span>
                         <span className="text-neutral-400 dark:text-neutral-500 w-16 text-right">
diff --git a/components/dashboard/ContentHeader.tsx b/components/dashboard/ContentHeader.tsx
index 7f67b84..417fc13 100644
--- a/components/dashboard/ContentHeader.tsx
+++ b/components/dashboard/ContentHeader.tsx
@@ -8,10 +8,10 @@ export default function ContentHeader({
   onMobileMenuOpen: () => void
 }) {
   return (
-    <div className="shrink-0 flex items-center border-b border-neutral-200/60 dark:border-neutral-800/60 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl px-4 py-3.5 md:hidden">
+    <div className="shrink-0 flex items-center border-b border-neutral-800/60 bg-neutral-900/90 backdrop-blur-xl px-4 py-3.5 md:hidden">
       <button
         onClick={onMobileMenuOpen}
-        className="p-2 -ml-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white"
+        className="p-2 -ml-2 text-neutral-400 hover:text-white"
         aria-label="Open navigation"
       >
         <MenuIcon className="w-5 h-5" />
diff --git a/components/dashboard/ContentStats.tsx b/components/dashboard/ContentStats.tsx
index f828889..9ee164d 100644
--- a/components/dashboard/ContentStats.tsx
+++ b/components/dashboard/ContentStats.tsx
@@ -99,17 +99,17 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
 
   return (
     <>
-      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
+      <div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6 h-full flex flex-col">
         <div className="flex items-center justify-between mb-6">
           <div className="flex items-center gap-2">
             <Files className="w-5 h-5 text-neutral-400 dark:text-neutral-500" weight="bold" />
-            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+            <h3 className="text-lg font-semibold text-white">
               Pages
             </h3>
             {showViewAll && (
               <button
                 onClick={() => setIsModalOpen(true)}
-                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
+                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
                 aria-label="View all pages"
               >
                 <FrameCornersIcon className="w-4 h-4" weight="bold" />
@@ -125,8 +125,8 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
                 aria-selected={activeTab === tab}
                 className={`relative px-2.5 py-1 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded cursor-pointer ${
                   activeTab === tab
-                    ? 'text-neutral-900 dark:text-white'
-                    : 'text-neutral-400 dark:text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300'
+                    ? 'text-white'
+                    : 'text-neutral-400 dark:text-neutral-500 hover:text-neutral-300'
                 }`}
               >
                 {getTabLabel(tab)}
@@ -145,7 +145,7 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
         <div className="space-y-2 flex-1 min-h-[270px]">
           {!collectPagePaths ? (
             <div className="h-full flex flex-col items-center justify-center text-center px-4">
-              <p className="text-neutral-500 dark:text-neutral-400 text-sm">Page path tracking is disabled in site settings</p>
+              <p className="text-neutral-400 text-sm">Page path tracking is disabled in site settings</p>
             </div>
           ) : hasData ? (
             <>
@@ -156,13 +156,13 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
                   <div
                     key={page.path}
                     onClick={() => onFilter?.({ dimension: 'page', operator: 'is', values: [page.path] })}
-                    className={`relative flex items-center justify-between h-9 group hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
+                    className={`relative flex items-center justify-between h-9 group hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
                   >
                     <div
                       className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/40 rounded-md transition-all"
                       style={{ width: `${barWidth}%` }}
                     />
-                    <div className="relative flex-1 truncate text-neutral-900 dark:text-white flex items-center">
+                    <div className="relative flex-1 truncate text-white flex items-center">
                       <span className="truncate">{page.path}</span>
                       <a
                         href={`https://${domain.replace(/^https?:\/\//, '')}${page.path}`}
@@ -178,7 +178,7 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
                       <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
                         {totalPageviews > 0 ? `${Math.round((page.pageviews / totalPageviews) * 100)}%` : ''}
                       </span>
-                      <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+                      <span className="text-sm font-semibold text-neutral-400">
                         {formatNumber(page.pageviews)}
                       </span>
                     </div>
@@ -191,13 +191,13 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
             </>
           ) : (
             <div className="h-full flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
-              <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
-                <LayoutDashboardIcon className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+              <div className="rounded-full bg-neutral-800 p-4">
+                <LayoutDashboardIcon className="w-8 h-8 text-neutral-400" />
               </div>
-              <h4 className="font-semibold text-neutral-900 dark:text-white">
+              <h4 className="font-semibold text-white">
                 No page data yet
               </h4>
-              <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-xs">
+              <p className="text-sm text-neutral-400 max-w-xs">
                 Your most visited pages will appear here as traffic arrives.
               </p>
               <Link
@@ -224,7 +224,7 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
             value={modalSearch}
             onChange={(e) => setModalSearch(e.target.value)}
             placeholder="Search pages..."
-            className="w-full px-3 py-2 mb-3 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg text-neutral-900 dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
+            className="w-full px-3 py-2 mb-3 text-sm bg-neutral-800 border border-neutral-700 rounded-lg text-white placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
           />
         </div>
         <div className="max-h-[80vh]">
@@ -246,16 +246,16 @@ export default function ContentStats({ topPages, entryPages, exitPages, domain,
                     <div
                       key={page.path}
                       onClick={() => { if (canFilter) { onFilter({ dimension: 'page', operator: 'is', values: [page.path] }); setIsModalOpen(false) } }}
-                      className={`flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
+                      className={`flex items-center justify-between h-9 group hover:bg-neutral-800 rounded-lg px-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
                     >
-                      <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center">
+                      <div className="flex-1 truncate text-white flex items-center">
                         <span className="truncate">{page.path}</span>
                       </div>
                       <div className="flex items-center gap-2 ml-4">
                         <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
                           {modalTotal > 0 ? `${Math.round((page.pageviews / modalTotal) * 100)}%` : ''}
                         </span>
-                        <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+                        <span className="text-sm font-semibold text-neutral-400">
                           {formatNumber(page.pageviews)}
                         </span>
                       </div>
diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 909b42b..23bd12a 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -11,7 +11,7 @@ const Sidebar = dynamic(() => import('./Sidebar'), {
   // so page content never occupies the sidebar zone
   loading: () => (
     <div
-      className="hidden md:block shrink-0 border-r border-neutral-200/60 dark:border-neutral-800/60 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl"
+      className="hidden md:block shrink-0 border-r border-neutral-800/60 bg-neutral-900/90 backdrop-blur-xl"
       style={{ width: 64 }}
     />
   ),
diff --git a/components/dashboard/DottedMap.tsx b/components/dashboard/DottedMap.tsx
index 2c7055b..5e3532d 100644
--- a/components/dashboard/DottedMap.tsx
+++ b/components/dashboard/DottedMap.tsx
@@ -150,7 +150,7 @@ export default function DottedMap({ data, className, formatValue = formatNumber
 
       {tooltip && (
         <div
-          className="fixed z-50 px-2.5 py-1.5 text-xs font-medium text-white bg-neutral-900 dark:bg-neutral-800 border border-neutral-700 rounded-lg shadow-lg pointer-events-none -translate-x-1/2 -translate-y-full -mt-2"
+          className="fixed z-50 px-2.5 py-1.5 text-xs font-medium text-white bg-neutral-800 border border-neutral-700 rounded-lg shadow-lg pointer-events-none -translate-x-1/2 -translate-y-full -mt-2"
           style={{ left: tooltip.x, top: tooltip.y }}
         >
           <span>{getCountryName(tooltip.country)}</span>
diff --git a/components/dashboard/EventProperties.tsx b/components/dashboard/EventProperties.tsx
index 4adc359..3d8033e 100644
--- a/components/dashboard/EventProperties.tsx
+++ b/components/dashboard/EventProperties.tsx
@@ -36,14 +36,14 @@ export default function EventProperties({ siteId, eventName, dateRange, onClose
   const maxCount = values.length > 0 ? values[0].count : 1
 
   return (
-    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
+    <div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6">
       <div className="flex items-center justify-between mb-4">
-        <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+        <h3 className="text-lg font-semibold text-white">
           Properties: <span className="text-brand-orange">{eventName.replace(/_/g, ' ')}</span>
         </h3>
         <button
           onClick={onClose}
-          className="text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors cursor-pointer"
+          className="text-neutral-400 hover:text-neutral-300 transition-colors cursor-pointer"
         >
           <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
             <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -54,11 +54,11 @@ export default function EventProperties({ siteId, eventName, dateRange, onClose
       {loading ? (
         <div className="animate-pulse space-y-3">
           {[1, 2, 3].map(i => (
-            <div key={i} className="h-8 bg-neutral-100 dark:bg-neutral-800 rounded-lg" />
+            <div key={i} className="h-8 bg-neutral-800 rounded-lg" />
           ))}
         </div>
       ) : keys.length === 0 ? (
-        <p className="text-sm text-neutral-500 dark:text-neutral-400 py-4 text-center">
+        <p className="text-sm text-neutral-400 py-4 text-center">
           No properties recorded for this event yet.
         </p>
       ) : (
@@ -71,7 +71,7 @@ export default function EventProperties({ siteId, eventName, dateRange, onClose
                 className={`px-3 py-1 text-xs font-medium rounded-full transition-colors cursor-pointer ${
                   selectedKey === k.key
                     ? 'bg-brand-orange text-white'
-                    : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
+                    : 'bg-neutral-800 text-neutral-400 hover:bg-neutral-700'
                 }`}
               >
                 {k.key}
@@ -84,14 +84,14 @@ export default function EventProperties({ siteId, eventName, dateRange, onClose
               <div key={v.value} className="flex items-center gap-3">
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center justify-between mb-1">
-                    <span className="text-sm font-medium text-neutral-900 dark:text-white truncate">
+                    <span className="text-sm font-medium text-white truncate">
                       {v.value}
                     </span>
                     <span className="text-xs font-semibold text-brand-orange tabular-nums ml-2">
                       {formatNumber(v.count)}
                     </span>
                   </div>
-                  <div className="w-full h-1.5 bg-neutral-100 dark:bg-neutral-800 rounded-full overflow-hidden">
+                  <div className="w-full h-1.5 bg-neutral-800 rounded-full overflow-hidden">
                     <div
                       className="h-full bg-brand-orange/60 rounded-full transition-all"
                       style={{ width: `${(v.count / maxCount) * 100}%` }}
diff --git a/components/dashboard/GoalStats.tsx b/components/dashboard/GoalStats.tsx
index 2299642..c1f36e0 100644
--- a/components/dashboard/GoalStats.tsx
+++ b/components/dashboard/GoalStats.tsx
@@ -20,11 +20,11 @@ export default function GoalStats({ goalCounts, onSelectEvent }: GoalStatsProps)
   const emptySlots = Math.max(0, 6 - list.length)
 
   return (
-    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
+    <div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6 h-full flex flex-col">
       <div className="flex items-center justify-between mb-4">
         <div className="flex items-center gap-2">
           <Target className="w-5 h-5 text-neutral-400 dark:text-neutral-500" weight="bold" />
-          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+          <h3 className="text-lg font-semibold text-white">
             Goals & Events
           </h3>
         </div>
@@ -36,10 +36,10 @@ export default function GoalStats({ goalCounts, onSelectEvent }: GoalStatsProps)
             <div
               key={row.event_name}
               onClick={() => onSelectEvent?.(row.event_name)}
-              className={`flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors${onSelectEvent ? ' cursor-pointer' : ''}`}
+              className={`flex items-center justify-between h-9 group hover:bg-neutral-800 rounded-lg px-2 -mx-2 transition-colors${onSelectEvent ? ' cursor-pointer' : ''}`}
             >
               <div className="flex items-center flex-1 min-w-0">
-                <span className="text-sm font-medium text-neutral-900 dark:text-white truncate">
+                <span className="text-sm font-medium text-white truncate">
                   {row.display_name ?? row.event_name.replace(/_/g, ' ')}
                 </span>
               </div>
@@ -47,7 +47,7 @@ export default function GoalStats({ goalCounts, onSelectEvent }: GoalStatsProps)
                 <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
                   {total > 0 ? `${Math.round((row.count / total) * 100)}%` : ''}
                 </span>
-                <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 tabular-nums">
+                <span className="text-sm font-semibold text-neutral-400 tabular-nums">
                   {formatNumber(row.count)}
                 </span>
               </div>
@@ -59,14 +59,14 @@ export default function GoalStats({ goalCounts, onSelectEvent }: GoalStatsProps)
         </div>
       ) : (
         <div className="flex-1 min-h-[270px] flex flex-col items-center justify-center text-center px-6 py-8 gap-4">
-          <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
-            <BookOpenIcon className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+          <div className="rounded-full bg-neutral-800 p-4">
+            <BookOpenIcon className="w-8 h-8 text-neutral-400" />
           </div>
-          <h4 className="font-semibold text-neutral-900 dark:text-white">
+          <h4 className="font-semibold text-white">
             Need help tracking goals?
           </h4>
-          <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-md">
-            Add <code className="px-1.5 py-0.5 rounded bg-neutral-200 dark:bg-neutral-700 text-xs font-mono">pulse.track(&apos;event_name&apos;)</code> where actions happen on your site, then see counts here. Check our guide for step-by-step instructions.
+          <p className="text-sm text-neutral-400 max-w-md">
+            Add <code className="px-1.5 py-0.5 rounded bg-neutral-700 text-xs font-mono">pulse.track(&apos;event_name&apos;)</code> where actions happen on your site, then see counts here. Check our guide for step-by-step instructions.
           </p>
           <Link
             href="/installation"
diff --git a/components/dashboard/Locations.tsx b/components/dashboard/Locations.tsx
index 88f8d76..c1e10d3 100644
--- a/components/dashboard/Locations.tsx
+++ b/components/dashboard/Locations.tsx
@@ -90,13 +90,13 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
       case 'T1':
         return <ShieldCheck className="w-5 h-5 text-purple-600 dark:text-purple-400" />
       case 'A1':
-        return <Detective className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
+        return <Detective className="w-5 h-5 text-neutral-400" />
       case 'A2':
         return <Broadcast className="w-5 h-5 text-blue-500 dark:text-blue-400" />
       case 'O1':
       case 'EU':
       case 'AP':
-        return <GlobeIcon className="w-5 h-5 text-neutral-500 dark:text-neutral-400" />
+        return <GlobeIcon className="w-5 h-5 text-neutral-400" />
     }
 
     const FlagComponent = (Flags as Record<string, React.ComponentType<{ className?: string }>>)[countryCode]
@@ -216,17 +216,17 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
 
   return (
     <>
-      <div ref={containerRef} className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
+      <div ref={containerRef} className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6 h-full flex flex-col">
         <div className="flex items-center justify-between mb-6">
           <div className="flex items-center gap-2">
             <MapPin className="w-5 h-5 text-neutral-400 dark:text-neutral-500" weight="bold" />
-            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+            <h3 className="text-lg font-semibold text-white">
               Locations
             </h3>
             {showViewAll && (
               <button
                 onClick={() => setIsModalOpen(true)}
-                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
+                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
                 aria-label="View all locations"
               >
                 <FrameCornersIcon className="w-4 h-4" weight="bold" />
@@ -242,8 +242,8 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
                 aria-selected={activeTab === tab}
                 className={`relative px-2.5 py-1 text-xs font-medium transition-colors capitalize focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded cursor-pointer ${
                   activeTab === tab
-                    ? 'text-neutral-900 dark:text-white'
-                    : 'text-neutral-400 dark:text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300'
+                    ? 'text-white'
+                    : 'text-neutral-400 dark:text-neutral-500 hover:text-neutral-300'
                 }`}
               >
                 {tab}
@@ -262,20 +262,20 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
         <div className="space-y-2 flex-1 min-h-[270px]">
           {isTabDisabled() ? (
             <div className="h-full flex flex-col items-center justify-center text-center px-4">
-              <p className="text-neutral-500 dark:text-neutral-400 text-sm">{getDisabledMessage()}</p>
+              <p className="text-neutral-400 text-sm">{getDisabledMessage()}</p>
             </div>
           ) : isVisualTab ? (
             hasData ? (
               inView ? <DottedMap data={filterUnknown(countries) as { country: string; pageviews: number }[]} /> : null
             ) : (
               <div className="h-full flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
-                <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
-                  <GlobeIcon className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+                <div className="rounded-full bg-neutral-800 p-4">
+                  <GlobeIcon className="w-8 h-8 text-neutral-400" />
                 </div>
-                <h4 className="font-semibold text-neutral-900 dark:text-white">
+                <h4 className="font-semibold text-white">
                   No location data yet
                 </h4>
-                <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-xs">
+                <p className="text-sm text-neutral-400 max-w-xs">
                   Visitor locations will appear here based on anonymous geographic data.
                 </p>
                 <Link
@@ -300,13 +300,13 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
                     <div
                       key={`${item.country ?? ''}-${item.region ?? ''}-${item.city ?? ''}`}
                       onClick={() => canFilter && onFilter({ dimension: dim, operator: 'is', values: [filterValue!] })}
-                      className={`relative flex items-center justify-between h-9 group hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
+                      className={`relative flex items-center justify-between h-9 group hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
                     >
                       <div
                         className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/40 rounded-md transition-all"
                         style={{ width: `${barWidth}%` }}
                       />
-                      <div className="relative flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
+                      <div className="relative flex-1 truncate text-white flex items-center gap-3">
                         <span className="shrink-0">{getFlagComponent(item.country ?? '')}</span>
                         <span className="truncate">
                           {activeTab === 'countries' ? getCountryName(item.country ?? '') :
@@ -318,7 +318,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
                         <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
                           {totalPageviews > 0 ? `${Math.round((item.pageviews / totalPageviews) * 100)}%` : ''}
                         </span>
-                        <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+                        <span className="text-sm font-semibold text-neutral-400">
                           {formatNumber(item.pageviews)}
                         </span>
                       </div>
@@ -331,13 +331,13 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
             </>
           ) : (
             <div className="h-full flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
-              <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
-                <GlobeIcon className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+              <div className="rounded-full bg-neutral-800 p-4">
+                <GlobeIcon className="w-8 h-8 text-neutral-400" />
               </div>
-              <h4 className="font-semibold text-neutral-900 dark:text-white">
+              <h4 className="font-semibold text-white">
                 No location data yet
               </h4>
-              <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-xs">
+              <p className="text-sm text-neutral-400 max-w-xs">
                 Visitor locations will appear here based on anonymous geographic data.
               </p>
             </div>
@@ -358,7 +358,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
             value={modalSearch}
             onChange={(e) => setModalSearch(e.target.value)}
             placeholder="Search locations..."
-            className="w-full px-3 py-2 mb-3 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg text-neutral-900 dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
+            className="w-full px-3 py-2 mb-3 text-sm bg-neutral-800 border border-neutral-700 rounded-lg text-white placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
           />
         </div>
         <div className="max-h-[80vh]">
@@ -387,9 +387,9 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
                     <div
                       key={`${item.country ?? ''}-${item.region ?? ''}-${item.city ?? ''}`}
                       onClick={() => { if (canFilter) { onFilter({ dimension: dim, operator: 'is', values: [filterValue!] }); setIsModalOpen(false) } }}
-                      className={`flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
+                      className={`flex items-center justify-between h-9 group hover:bg-neutral-800 rounded-lg px-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
                     >
-                      <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
+                      <div className="flex-1 truncate text-white flex items-center gap-3">
                         <span className="shrink-0">{getFlagComponent(item.country ?? '')}</span>
                         <span className="truncate">
                           {activeTab === 'countries' ? getCountryName(item.country ?? '') :
@@ -401,7 +401,7 @@ export default function Locations({ countries, cities, regions, geoDataLevel = '
                         <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
                           {modalTotal > 0 ? `${Math.round((item.pageviews / modalTotal) * 100)}%` : ''}
                         </span>
-                        <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+                        <span className="text-sm font-semibold text-neutral-400">
                           {formatNumber(item.pageviews)}
                         </span>
                       </div>
diff --git a/components/dashboard/PeakHours.tsx b/components/dashboard/PeakHours.tsx
index e275ffb..022412c 100644
--- a/components/dashboard/PeakHours.tsx
+++ b/components/dashboard/PeakHours.tsx
@@ -131,14 +131,14 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
   }
 
   return (
-    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
+    <div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6 h-full flex flex-col">
       <div className="flex items-center justify-between mb-1">
         <div className="flex items-center gap-2">
           <Clock className="w-5 h-5 text-neutral-400 dark:text-neutral-500" weight="bold" />
-          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">Peak Hours</h3>
+          <h3 className="text-lg font-semibold text-white">Peak Hours</h3>
         </div>
       </div>
-      <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-5">
+      <p className="text-sm text-neutral-400 mb-5">
         When your visitors are most active
       </p>
 
@@ -146,8 +146,8 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
         <div className="flex-1 min-h-[270px] flex flex-col justify-center gap-1.5">
           {Array.from({ length: 7 }).map((_, i) => (
             <div key={i} className="flex items-center gap-1">
-              <div className="w-7 h-3 rounded bg-neutral-200 dark:bg-neutral-800 animate-pulse" />
-              <div className="flex-1 h-5 rounded bg-neutral-200 dark:bg-neutral-800 animate-pulse" />
+              <div className="w-7 h-3 rounded bg-neutral-800 animate-pulse" />
+              <div className="flex-1 h-5 rounded bg-neutral-800 animate-pulse" />
             </div>
           ))}
         </div>
@@ -174,7 +174,7 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
                         key={`${animKey}-${dayIdx}-${bucket}`}
                         className={[
                           'aspect-square w-full rounded-[4px] border cursor-default transition-transform duration-100',
-                          'border-neutral-200 dark:border-neutral-800',
+                          'border-neutral-800',
                           isActive ? 'animate-cell-highlight' : '',
                           isHoveredCell ? 'scale-110 z-10 relative' : '',
                           isBestCell && !isHoveredCell ? 'ring-1 ring-brand-orange/40' : '',
@@ -201,14 +201,14 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
                 {Object.entries(BUCKET_LABELS).map(([b, label]) => (
                   <span
                     key={b}
-                    className="absolute text-[10px] text-neutral-400 dark:text-neutral-600 -translate-x-1/2"
+                    className="absolute text-[10px] text-neutral-600 -translate-x-1/2"
                     style={{ left: `${(Number(b) / BUCKETS) * 100}%` }}
                   >
                     {label}
                   </span>
                 ))}
                 <span
-                  className="absolute text-[10px] text-neutral-400 dark:text-neutral-600 -translate-x-full"
+                  className="absolute text-[10px] text-neutral-600 -translate-x-full"
                   style={{ left: '100%' }}
                 >
                   24:00
@@ -222,7 +222,7 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
               {HIGHLIGHT_COLORS.map((color, i) => (
                 <div
                   key={i}
-                  className="w-[10px] h-[10px] rounded-[2px] border border-neutral-200 dark:border-neutral-800"
+                  className="w-[10px] h-[10px] rounded-[2px] border border-neutral-800"
                   style={{ backgroundColor: color }}
                 />
               ))}
@@ -245,7 +245,7 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
                     transform: 'translate(-50%, -100%)',
                   }}
                 >
-                  <div className="bg-neutral-900 dark:bg-neutral-800 border border-neutral-700 text-white text-xs px-3 py-2 rounded-lg shadow-xl whitespace-nowrap">
+                  <div className="bg-neutral-800 border border-neutral-700 text-white text-xs px-3 py-2 rounded-lg shadow-xl whitespace-nowrap">
                     <div className="font-semibold mb-1">
                       {DAYS[hovered.day]} {formatBucket(hovered.bucket)}
                     </div>
@@ -269,7 +269,7 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
               initial={{ opacity: 0, y: 4 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.4, delay: 0.6 }}
-              className="mt-4 text-xs text-neutral-500 dark:text-neutral-400 text-center"
+              className="mt-4 text-xs text-neutral-400 text-center"
             >
               Your busiest time is{' '}
               <span className="text-brand-orange font-medium">
@@ -280,7 +280,7 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
         </>
       ) : (
         <div className="flex-1 min-h-[270px] flex flex-col items-center justify-center text-center gap-3">
-          <p className="text-sm text-neutral-500 dark:text-neutral-400">
+          <p className="text-sm text-neutral-400">
             No data available for this period
           </p>
         </div>
diff --git a/components/dashboard/RealtimeVisitors.tsx b/components/dashboard/RealtimeVisitors.tsx
index b43356b..d62d054 100644
--- a/components/dashboard/RealtimeVisitors.tsx
+++ b/components/dashboard/RealtimeVisitors.tsx
@@ -9,15 +9,15 @@ interface RealtimeVisitorsProps {
 export default function RealtimeVisitors({ count }: RealtimeVisitorsProps) {
   return (
     <div
-      className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6"
+      className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6"
     >
       <div className="flex items-center justify-between mb-2">
-        <div className="text-sm text-neutral-600 dark:text-neutral-400">
+        <div className="text-sm text-neutral-400">
           Real-time Visitors
         </div>
         <div className="h-2 w-2 bg-green-500 rounded-full animate-pulse"></div>
       </div>
-      <div className="text-3xl font-bold text-neutral-900 dark:text-white">
+      <div className="text-3xl font-bold text-white">
         <AnimatedNumber value={count} format={(v) => v.toLocaleString()} />
       </div>
     </div>
diff --git a/components/dashboard/ScrollDepth.tsx b/components/dashboard/ScrollDepth.tsx
index e66b993..4dde3dd 100644
--- a/components/dashboard/ScrollDepth.tsx
+++ b/components/dashboard/ScrollDepth.tsx
@@ -28,13 +28,13 @@ export default function ScrollDepth({ goalCounts, totalPageviews }: ScrollDepthP
   }))
 
   return (
-    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
+    <div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6 h-full flex flex-col">
       <div className="flex items-center justify-between mb-1">
-        <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+        <h3 className="text-lg font-semibold text-white">
           Scroll Depth
         </h3>
       </div>
-      <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-4">
+      <p className="text-sm text-neutral-400 mb-4">
         % of visitors who scrolled this far
       </p>
 
@@ -73,13 +73,13 @@ export default function ScrollDepth({ goalCounts, totalPageviews }: ScrollDepthP
         </div>
       ) : (
         <div className="flex-1 min-h-[270px] flex flex-col items-center justify-center text-center px-6 py-8 gap-4">
-          <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
-            <BarChartIcon className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+          <div className="rounded-full bg-neutral-800 p-4">
+            <BarChartIcon className="w-8 h-8 text-neutral-400" />
           </div>
-          <h4 className="font-semibold text-neutral-900 dark:text-white">
+          <h4 className="font-semibold text-white">
             No scroll data yet
           </h4>
-          <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-md">
+          <p className="text-sm text-neutral-400 max-w-md">
             Scroll depth tracking is automatic — data will appear here once visitors start scrolling on your pages.
           </p>
         </div>
diff --git a/components/dashboard/SearchPerformance.tsx b/components/dashboard/SearchPerformance.tsx
index 949dcd8..d322e8a 100644
--- a/components/dashboard/SearchPerformance.tsx
+++ b/components/dashboard/SearchPerformance.tsx
@@ -36,7 +36,7 @@ function ChangeArrow({ current, previous, invert = false }: { current: number; p
 function getPositionBadgeClasses(position: number): string {
   if (position <= 10) return 'text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 dark:bg-emerald-500/20'
   if (position <= 20) return 'text-brand-orange dark:text-brand-orange bg-brand-orange/10 dark:bg-brand-orange/20'
-  if (position <= 50) return 'text-neutral-400 dark:text-neutral-500 bg-neutral-100 dark:bg-neutral-800'
+  if (position <= 50) return 'text-neutral-400 dark:text-neutral-500 bg-neutral-800'
   return 'text-red-500 dark:text-red-400 bg-red-500/10 dark:bg-red-500/20'
 }
 
@@ -100,16 +100,16 @@ export default function SearchPerformance({ siteId, dateRange }: SearchPerforman
 
   return (
     <>
-      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
+      <div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6 h-full flex flex-col">
         {/* Header */}
         <div className="flex items-center justify-between mb-4">
           <div className="flex items-center gap-2">
             <MagnifyingGlass className="w-5 h-5 text-neutral-400 dark:text-neutral-500" weight="bold" />
-            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">Search</h3>
+            <h3 className="text-lg font-semibold text-white">Search</h3>
             {showViewAll && (
               <button
                 onClick={() => setIsModalOpen(true)}
-                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
+                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
                 aria-label="View all search data"
               >
                 <FrameCornersIcon className="w-4 h-4" weight="bold" />
@@ -125,8 +125,8 @@ export default function SearchPerformance({ siteId, dateRange }: SearchPerforman
                 aria-selected={activeTab === tab}
                 className={`relative px-2.5 py-1 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded cursor-pointer ${
                   activeTab === tab
-                    ? 'text-neutral-900 dark:text-white'
-                    : 'text-neutral-400 dark:text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300'
+                    ? 'text-white'
+                    : 'text-neutral-400 dark:text-neutral-500 hover:text-neutral-300'
                 }`}
               >
                 {getTabLabel(tab)}
@@ -145,9 +145,9 @@ export default function SearchPerformance({ siteId, dateRange }: SearchPerforman
         {isLoading ? (
           <div className="flex-1 space-y-4">
             <div className="flex items-center gap-6">
-              <div className="h-4 w-20 bg-neutral-100 dark:bg-neutral-800 rounded animate-pulse" />
-              <div className="h-4 w-24 bg-neutral-100 dark:bg-neutral-800 rounded animate-pulse" />
-              <div className="h-4 w-20 bg-neutral-100 dark:bg-neutral-800 rounded animate-pulse" />
+              <div className="h-4 w-20 bg-neutral-800 rounded animate-pulse" />
+              <div className="h-4 w-24 bg-neutral-800 rounded animate-pulse" />
+              <div className="h-4 w-20 bg-neutral-800 rounded animate-pulse" />
             </div>
             <div className="space-y-2 mt-4">
               <ListSkeleton rows={LIMIT} />
@@ -158,22 +158,22 @@ export default function SearchPerformance({ siteId, dateRange }: SearchPerforman
             {/* Inline stats row */}
             <div className="flex items-center gap-5 mb-4">
               <div className="flex items-center gap-1.5">
-                <span className="text-xs text-neutral-500 dark:text-neutral-400">Clicks</span>
-                <span className="text-sm font-semibold text-neutral-900 dark:text-white">
+                <span className="text-xs text-neutral-400">Clicks</span>
+                <span className="text-sm font-semibold text-white">
                   {formatNumber(overview?.total_clicks ?? 0)}
                 </span>
                 <ChangeArrow current={overview?.total_clicks ?? 0} previous={overview?.prev_clicks ?? 0} />
               </div>
               <div className="flex items-center gap-1.5">
-                <span className="text-xs text-neutral-500 dark:text-neutral-400">Impressions</span>
-                <span className="text-sm font-semibold text-neutral-900 dark:text-white">
+                <span className="text-xs text-neutral-400">Impressions</span>
+                <span className="text-sm font-semibold text-white">
                   {formatNumber(overview?.total_impressions ?? 0)}
                 </span>
                 <ChangeArrow current={overview?.total_impressions ?? 0} previous={overview?.prev_impressions ?? 0} />
               </div>
               <div className="flex items-center gap-1.5">
-                <span className="text-xs text-neutral-500 dark:text-neutral-400">Avg Position</span>
-                <span className="text-sm font-semibold text-neutral-900 dark:text-white">
+                <span className="text-xs text-neutral-400">Avg Position</span>
+                <span className="text-sm font-semibold text-white">
                   {(overview?.avg_position ?? 0).toFixed(1)}
                 </span>
                 <ChangeArrow current={overview?.avg_position ?? 0} previous={overview?.prev_avg_position ?? 0} invert />
@@ -191,20 +191,20 @@ export default function SearchPerformance({ siteId, dateRange }: SearchPerforman
                     return (
                       <div
                         key={label}
-                        className="relative flex items-center justify-between h-9 group hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors"
+                        className="relative flex items-center justify-between h-9 group hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors"
                       >
                         <div
                           className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/40 rounded-md transition-all"
                           style={{ width: `${barWidth}%` }}
                         />
-                        <span className="relative text-sm text-neutral-900 dark:text-white truncate flex-1 min-w-0" title={label}>
+                        <span className="relative text-sm text-white truncate flex-1 min-w-0" title={label}>
                           {label}
                         </span>
                         <div className="relative flex items-center gap-3 ml-4 shrink-0">
                           <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
                             {totalImpressions > 0 ? `${Math.round((row.impressions / totalImpressions) * 100)}%` : ''}
                           </span>
-                          <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+                          <span className="text-sm font-semibold text-neutral-400">
                             {formatNumber(row.clicks)}
                           </span>
                           <span className={`text-xs px-1.5 py-0.5 rounded font-medium ${getPositionBadgeClasses(row.position)}`}>
@@ -241,7 +241,7 @@ export default function SearchPerformance({ siteId, dateRange }: SearchPerforman
             value={modalSearch}
             onChange={(e) => setModalSearch(e.target.value)}
             placeholder={`Search ${activeTab}...`}
-            className="w-full px-3 py-2 mb-3 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg text-neutral-900 dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
+            className="w-full px-3 py-2 mb-3 text-sm bg-neutral-800 border border-neutral-700 rounded-lg text-white placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
           />
         </div>
         <div className="max-h-[80vh]">
@@ -266,16 +266,16 @@ export default function SearchPerformance({ siteId, dateRange }: SearchPerforman
                   return (
                     <div
                       key={label}
-                      className="flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 transition-colors"
+                      className="flex items-center justify-between h-9 group hover:bg-neutral-800 rounded-lg px-2 transition-colors"
                     >
-                      <span className="flex-1 truncate text-sm text-neutral-900 dark:text-white" title={label}>
+                      <span className="flex-1 truncate text-sm text-white" title={label}>
                         {label}
                       </span>
                       <div className="flex items-center gap-3 ml-4">
                         <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
                           {modalTotal > 0 ? `${Math.round((row.impressions / modalTotal) * 100)}%` : ''}
                         </span>
-                        <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+                        <span className="text-sm font-semibold text-neutral-400">
                           {formatNumber(row.clicks)}
                         </span>
                         <span className={`text-xs px-1.5 py-0.5 rounded font-medium ${getPositionBadgeClasses(row.position)}`}>
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 7a2a271..042ac0a 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -162,12 +162,12 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
             setOpen(!open)
           }
         }}
-        className="w-full flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 overflow-hidden"
+        className="w-full flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-200 hover:bg-neutral-800 overflow-hidden"
       >
         <span className="w-7 h-7 rounded-md bg-brand-orange/10 flex items-center justify-center shrink-0 overflow-hidden">
           {faviconUrl && !faviconFailed ? (
             <>
-              {!faviconLoaded && <span className="w-5 h-5 rounded animate-pulse bg-neutral-100 dark:bg-neutral-800" />}
+              {!faviconLoaded && <span className="w-5 h-5 rounded animate-pulse bg-neutral-800" />}
               <img
                 src={faviconUrl}
                 alt=""
@@ -187,14 +187,14 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
       </button>
 
       {open && (
-        <div className="absolute left-3 top-full mt-1 z-50 w-[240px] bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden">
+        <div className="absolute left-3 top-full mt-1 z-50 w-[240px] bg-neutral-900 border border-neutral-700 rounded-xl shadow-xl overflow-hidden">
           <div className="p-2">
             <input
               type="text"
               placeholder="Search sites..."
               value={search}
               onChange={(e) => setSearch(e.target.value)}
-              className="w-full px-3 py-1.5 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg outline-none focus:ring-2 focus:ring-brand-orange/40 text-neutral-900 dark:text-white placeholder:text-neutral-400"
+              className="w-full px-3 py-1.5 text-sm bg-neutral-800 border border-neutral-700 rounded-lg outline-none focus:ring-2 focus:ring-brand-orange/40 text-white placeholder:text-neutral-400"
               autoFocus
             />
           </div>
@@ -206,7 +206,7 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
                 className={`w-full flex items-center gap-2.5 px-4 py-2 text-sm text-left ${
                   site.id === siteId
                     ? 'bg-brand-orange/10 text-brand-orange font-medium'
-                    : 'text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800'
+                    : 'text-neutral-300 hover:bg-neutral-800'
                 }`}
               >
                 <img
@@ -222,8 +222,8 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
             ))}
             {filtered.length === 0 && <p className="px-4 py-3 text-sm text-neutral-400">No sites found</p>}
           </div>
-          <div className="border-t border-neutral-200 dark:border-neutral-700 p-2">
-            <Link href="/sites/new" onClick={() => setOpen(false)} className="flex items-center gap-2 px-3 py-1.5 text-sm text-brand-orange hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg">
+          <div className="border-t border-neutral-700 p-2">
+            <Link href="/sites/new" onClick={() => setOpen(false)} className="flex items-center gap-2 px-3 py-1.5 text-sm text-brand-orange hover:bg-neutral-800 rounded-lg">
               <PlusIcon className="w-4 h-4" />
               Add new site
             </Link>
@@ -256,7 +256,7 @@ function NavLink({
       className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden ${
         active
           ? 'bg-brand-orange/10 text-brand-orange'
-          : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800'
+          : 'text-neutral-400 hover:text-white hover:bg-neutral-800'
       }`}
     >
       <span className="w-7 h-7 flex items-center justify-center shrink-0">
@@ -357,7 +357,7 @@ export default function Sidebar({
           <span className="w-9 h-9 flex items-center justify-center shrink-0">
             <img src="/pulse_icon_no_margins.png" alt="Pulse" className="w-9 h-9 shrink-0 object-contain group-hover:scale-105 transition-transform duration-200" />
           </span>
-          <span className={`text-xl font-bold text-neutral-900 dark:text-white tracking-tight group-hover:text-brand-orange whitespace-nowrap transition-opacity duration-150 ${c ? 'opacity-0' : 'opacity-100'}`}>
+          <span className={`text-xl font-bold text-white tracking-tight group-hover:text-brand-orange whitespace-nowrap transition-opacity duration-150 ${c ? 'opacity-0' : 'opacity-100'}`}>
             Pulse
           </span>
         </Link>
@@ -387,7 +387,7 @@ export default function Sidebar({
         </nav>
 
         {/* Bottom — utility items */}
-        <div className="border-t border-neutral-200/60 dark:border-neutral-800/60 px-2 py-3 shrink-0">
+        <div className="border-t border-neutral-800/60 px-2 py-3 shrink-0">
           {/* Notifications, Profile — same layout as nav items */}
           <div className="space-y-0.5 mb-1">
             <span title={c ? 'Notifications' : undefined}>
@@ -418,7 +418,7 @@ export default function Sidebar({
             {!isMobile && (
               <button
                 onClick={toggle}
-                className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 w-full overflow-hidden"
+                className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800 w-full overflow-hidden"
                 title={collapsed ? 'Expand sidebar (press [)' : 'Collapse sidebar (press [)'}
               >
                 <span className="w-7 h-7 flex items-center justify-center shrink-0">
@@ -437,7 +437,7 @@ export default function Sidebar({
     <>
       {/* Desktop — ssr:false means this only renders on client, no hydration flash */}
       <aside
-        className="hidden md:flex flex-col shrink-0 border-r border-neutral-200/60 dark:border-neutral-800/60 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl overflow-hidden relative z-10"
+        className="hidden md:flex flex-col shrink-0 border-r border-neutral-800/60 bg-neutral-900/90 backdrop-blur-xl overflow-hidden relative z-10"
         style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
       >
         {sidebarContent(false)}
@@ -447,10 +447,10 @@ export default function Sidebar({
       {mobileOpen && (
         <>
           <div className="fixed inset-0 z-40 bg-black/30 md:hidden" onClick={onMobileClose} />
-          <aside className="fixed inset-y-0 left-0 z-50 w-72 bg-white dark:bg-neutral-900 border-r border-neutral-200 dark:border-neutral-800 shadow-xl md:hidden animate-in slide-in-from-left duration-200">
-            <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-800">
-              <span className="text-sm font-semibold text-neutral-900 dark:text-white">Navigation</span>
-              <button onClick={onMobileClose} className="p-1.5 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300">
+          <aside className="fixed inset-y-0 left-0 z-50 w-72 bg-neutral-900 border-r border-neutral-800 shadow-xl md:hidden animate-in slide-in-from-left duration-200">
+            <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-800">
+              <span className="text-sm font-semibold text-white">Navigation</span>
+              <button onClick={onMobileClose} className="p-1.5 text-neutral-400 hover:text-neutral-300">
                 <XIcon className="w-5 h-5" />
               </button>
             </div>
diff --git a/components/dashboard/TechSpecs.tsx b/components/dashboard/TechSpecs.tsx
index 6139ec9..f9f63ac 100644
--- a/components/dashboard/TechSpecs.tsx
+++ b/components/dashboard/TechSpecs.tsx
@@ -131,17 +131,17 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
 
   return (
     <>
-      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
+      <div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6 h-full flex flex-col">
         <div className="flex items-center justify-between mb-6">
           <div className="flex items-center gap-2">
             <DeviceMobile className="w-5 h-5 text-neutral-400 dark:text-neutral-500" weight="bold" />
-            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+            <h3 className="text-lg font-semibold text-white">
               Technology
             </h3>
             {showViewAll && (
               <button
                 onClick={() => setIsModalOpen(true)}
-                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
+                className="p-1.5 text-neutral-400 dark:text-neutral-500 hover:text-brand-orange dark:hover:text-brand-orange hover:bg-neutral-800 transition-all cursor-pointer rounded-lg"
                 aria-label="View all technology"
               >
                 <FrameCornersIcon className="w-4 h-4" weight="bold" />
@@ -157,8 +157,8 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
                 aria-selected={activeTab === tab}
                 className={`relative px-2.5 py-1 text-xs font-medium transition-colors capitalize focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded cursor-pointer ${
                   activeTab === tab
-                    ? 'text-neutral-900 dark:text-white'
-                    : 'text-neutral-400 dark:text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300'
+                    ? 'text-white'
+                    : 'text-neutral-400 dark:text-neutral-500 hover:text-neutral-300'
                 }`}
               >
                 {tab}
@@ -177,7 +177,7 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
         <div className="space-y-2 flex-1 min-h-[270px]">
           {isTabDisabled() ? (
             <div className="h-full flex flex-col items-center justify-center text-center px-4">
-              <p className="text-neutral-500 dark:text-neutral-400 text-sm">{getDisabledMessage()}</p>
+              <p className="text-neutral-400 text-sm">{getDisabledMessage()}</p>
             </div>
           ) : hasData ? (
             <>
@@ -190,13 +190,13 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
                   <div
                     key={item.name}
                     onClick={() => canFilter && onFilter({ dimension: dim, operator: 'is', values: [item.name] })}
-                    className={`relative flex items-center justify-between h-9 group hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
+                    className={`relative flex items-center justify-between h-9 group hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
                   >
                     <div
                       className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/40 rounded-md transition-all"
                       style={{ width: `${barWidth}%` }}
                     />
-                    <div className="relative flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
+                    <div className="relative flex-1 truncate text-white flex items-center gap-3">
                       {item.icon && <span className="text-lg">{item.icon}</span>}
                       <span className="truncate">{capitalize(item.name)}</span>
                     </div>
@@ -204,7 +204,7 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
                       <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
                         {totalPageviews > 0 ? `${Math.round((item.pageviews / totalPageviews) * 100)}%` : ''}
                       </span>
-                      <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+                      <span className="text-sm font-semibold text-neutral-400">
                         {formatNumber(item.pageviews)}
                       </span>
                     </div>
@@ -217,13 +217,13 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
             </>
           ) : (
             <div className="h-full flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
-              <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
-                <GridIcon className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+              <div className="rounded-full bg-neutral-800 p-4">
+                <GridIcon className="w-8 h-8 text-neutral-400" />
               </div>
-              <h4 className="font-semibold text-neutral-900 dark:text-white">
+              <h4 className="font-semibold text-white">
                 No technology data yet
               </h4>
-              <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-xs">
+              <p className="text-sm text-neutral-400 max-w-xs">
                 Browser, OS, and device information will appear as visitors arrive.
               </p>
               <Link
@@ -250,7 +250,7 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
             value={modalSearch}
             onChange={(e) => setModalSearch(e.target.value)}
             placeholder="Search technology..."
-            className="w-full px-3 py-2 mb-3 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg text-neutral-900 dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
+            className="w-full px-3 py-2 mb-3 text-sm bg-neutral-800 border border-neutral-700 rounded-lg text-white placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
           />
         </div>
         <div className="max-h-[80vh]">
@@ -273,9 +273,9 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
                     <div
                       key={item.name}
                       onClick={() => { if (canFilter) { onFilter({ dimension: dim, operator: 'is', values: [item.name] }); setIsModalOpen(false) } }}
-                      className={`flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
+                      className={`flex items-center justify-between h-9 group hover:bg-neutral-800 rounded-lg px-2 transition-colors${canFilter ? ' cursor-pointer' : ''}`}
                     >
-                      <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
+                      <div className="flex-1 truncate text-white flex items-center gap-3">
                         {item.icon && <span className="text-lg">{item.icon}</span>}
                         <span className="truncate">{capitalize(item.name)}</span>
                       </div>
@@ -283,7 +283,7 @@ export default function TechSpecs({ browsers, os, devices, screenResolutions, co
                         <span className="text-xs font-medium text-brand-orange opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200">
                           {modalTotal > 0 ? `${Math.round((item.pageviews / modalTotal) * 100)}%` : ''}
                         </span>
-                        <span className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
+                        <span className="text-sm font-semibold text-neutral-400">
                           {formatNumber(item.pageviews)}
                         </span>
                       </div>
-- 
2.49.1


From 3710f081a6f52dfabc15fad17f93c7ff86529bb4 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 19:39:01 +0100
Subject: [PATCH 113/428] feat: dark-only cleanup for marketing pages and
 authenticated landing view

---
 app/about/page.tsx                  | 34 +++++------
 app/features/page.tsx               | 58 +++++++++----------
 app/installation/page.tsx           | 14 ++---
 app/integrations/nextjs/page.tsx    | 16 ++---
 app/integrations/page.tsx           | 54 ++++++++---------
 app/integrations/react/page.tsx     | 14 ++---
 app/integrations/vue/page.tsx       | 14 ++---
 app/integrations/wordpress/page.tsx | 14 ++---
 app/not-found.tsx                   |  8 +--
 app/page.tsx                        | 90 ++++++++++++++---------------
 app/pricing/page.tsx                |  4 +-
 components/IntegrationGuide.tsx     | 24 ++++----
 components/PricingSection.tsx       | 66 ++++++++++-----------
 13 files changed, 205 insertions(+), 205 deletions(-)

diff --git a/app/about/page.tsx b/app/about/page.tsx
index 4e4c649..6ffa4bd 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -15,23 +15,23 @@ function ComparisonTable({ title, competitors }: { title: string, competitors: {
 
   return (
     <div className="mb-16">
-      <h2 className="text-2xl font-bold mb-6 text-neutral-900 dark:text-white">{title}</h2>
-      <div className="overflow-hidden rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm">
+      <h2 className="text-2xl font-bold mb-6 text-white">{title}</h2>
+      <div className="overflow-hidden rounded-2xl border border-neutral-800 bg-neutral-900/50 backdrop-blur-sm">
         <table className="w-full text-left border-collapse">
           <thead>
-            <tr className="border-b border-neutral-200 dark:border-neutral-800">
+            <tr className="border-b border-neutral-800">
               <th className="p-4 sm:p-6 text-sm font-medium text-neutral-500">Feature</th>
               {competitors.map((comp) => (
-                <th key={comp.name} className={`p-4 sm:p-6 text-sm font-bold ${comp.isPulse ? 'text-brand-orange' : 'text-neutral-900 dark:text-white'}`}>
+                <th key={comp.name} className={`p-4 sm:p-6 text-sm font-bold ${comp.isPulse ? 'text-brand-orange' : 'text-white'}`}>
                   {comp.name}
                 </th>
               ))}
             </tr>
           </thead>
-          <tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
+          <tbody className="divide-y divide-neutral-800">
             {allFeatures.map((feature) => (
-              <tr key={feature} className="hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 transition-colors">
-                <td className="p-4 sm:p-6 text-neutral-900 dark:text-white font-medium text-sm sm:text-base">{feature}</td>
+              <tr key={feature} className="hover:bg-neutral-800/50 transition-colors">
+                <td className="p-4 sm:p-6 text-white font-medium text-sm sm:text-base">{feature}</td>
                 {competitors.map((comp) => {
                   const val = comp.features[feature]
                   return (
@@ -41,7 +41,7 @@ function ComparisonTable({ title, competitors }: { title: string, competitors: {
                       ) : val === false ? (
                         <XIcon className="w-5 h-5 text-red-500" />
                       ) : (
-                        <span className={comp.isPulse ? 'text-green-500 font-medium' : 'text-neutral-600 dark:text-neutral-400'}>{val}</span>
+                        <span className={comp.isPulse ? 'text-green-500 font-medium' : 'text-neutral-400'}>{val}</span>
                       )}
                     </td>
                   )
@@ -60,9 +60,9 @@ export default function AboutPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div 
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
@@ -74,10 +74,10 @@ export default function AboutPage() {
           transition={{ duration: 0.5 }}
           className="text-center mb-16"
         >
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white mb-6">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white mb-6">
             Why Pulse?
           </h1>
-          <p className="text-xl text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto leading-relaxed">
+          <p className="text-xl text-neutral-400 max-w-2xl mx-auto leading-relaxed">
             We built Pulse because we were tired of complex, invasive analytics tools.
             Here is how we stack up against the giants.
           </p>
@@ -87,9 +87,9 @@ export default function AboutPage() {
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.5, delay: 0.1 }}
-          className="prose prose-neutral dark:prose-invert max-w-none mb-16"
+          className="prose prose-invert max-w-none mb-16"
         >
-          <p className="text-lg text-neutral-600 dark:text-neutral-400">
+          <p className="text-lg text-neutral-400">
             Most analytics tools are overkill. They track everything, slow down your site, and require annoying cookie banners. 
             Pulse is different. We focus on the metrics that actually matter—visitors, pageviews, and sources—while respecting user privacy.
           </p>
@@ -162,10 +162,10 @@ export default function AboutPage() {
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           transition={{ duration: 0.5 }}
-          className="mt-8 p-6 bg-neutral-100 dark:bg-neutral-800/50 rounded-xl border border-neutral-200 dark:border-neutral-800"
+          className="mt-8 p-6 bg-neutral-800/50 rounded-xl border border-neutral-800"
         >
-          <h3 className="text-xl font-bold mb-2 text-neutral-900 dark:text-white">What about Plausible?</h3>
-          <p className="text-neutral-600 dark:text-neutral-400 text-sm">
+          <h3 className="text-xl font-bold mb-2 text-white">What about Plausible?</h3>
+          <p className="text-neutral-400 text-sm">
             We love Plausible! They paved the way for privacy-friendly analytics. 
             Pulse offers a similar philosophy but with a focus on even deeper integration with the Ciphera ecosystem 
             and more flexible pricing for developers.
diff --git a/app/features/page.tsx b/app/features/page.tsx
index 700ea6d..39fd2db 100644
--- a/app/features/page.tsx
+++ b/app/features/page.tsx
@@ -109,9 +109,9 @@ export default function FeaturesPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
@@ -128,11 +128,11 @@ export default function FeaturesPage() {
             <span className="w-1.5 h-1.5 rounded-full bg-brand-orange animate-pulse" />
             Product Tour
           </span>
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white mb-6">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white mb-6">
             Everything you need. <br />
             <span className="gradient-text">Nothing you don&apos;t.</span>
           </h1>
-          <p className="text-xl text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto leading-relaxed">
+          <p className="text-xl text-neutral-400 max-w-2xl mx-auto leading-relaxed">
             Pulse gives you meaningful analytics without the complexity, the cookies, or the privacy trade-offs.
           </p>
         </motion.div>
@@ -151,10 +151,10 @@ export default function FeaturesPage() {
               <div className="w-12 h-12 rounded-xl bg-brand-orange/10 flex items-center justify-center mb-6 text-brand-orange group-hover:scale-110 transition-transform duration-300">
                 <feature.icon className="w-6 h-6" />
               </div>
-              <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3">
+              <h3 className="text-xl font-bold text-white mb-3">
                 {feature.title}
               </h3>
-              <p className="text-neutral-600 dark:text-neutral-400 leading-relaxed">
+              <p className="text-neutral-400 leading-relaxed">
                 {feature.description}
               </p>
             </motion.div>
@@ -170,10 +170,10 @@ export default function FeaturesPage() {
           className="mb-28"
         >
           <div className="text-center mb-14">
-            <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">
+            <h2 className="text-2xl font-bold text-white mb-4">
               Powerful analytics, <span className="gradient-text">simplified</span>
             </h2>
-            <p className="text-lg text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto">
+            <p className="text-lg text-neutral-400 max-w-2xl mx-auto">
               Everything from real-time dashboards to conversion funnels — without the bloat.
             </p>
           </div>
@@ -192,10 +192,10 @@ export default function FeaturesPage() {
                   {cap.icon}
                 </div>
                 <div>
-                  <h3 className="font-bold text-neutral-900 dark:text-white mb-1">
+                  <h3 className="font-bold text-white mb-1">
                     {cap.title}
                   </h3>
-                  <p className="text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
+                  <p className="text-sm text-neutral-400 leading-relaxed">
                     {cap.description}
                   </p>
                 </div>
@@ -210,14 +210,14 @@ export default function FeaturesPage() {
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           transition={{ duration: 0.5 }}
-          className="mb-28 p-10 md:p-14 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-2xl"
+          className="mb-28 p-10 md:p-14 bg-neutral-900/50 backdrop-blur-sm border border-neutral-800 rounded-2xl"
         >
           <div className="grid md:grid-cols-2 gap-10 items-center">
             <div>
-              <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">
+              <h2 className="text-2xl font-bold text-white mb-4">
                 Content that <span className="gradient-text">performs</span>
               </h2>
-              <p className="text-neutral-600 dark:text-neutral-400 leading-relaxed mb-6">
+              <p className="text-neutral-400 leading-relaxed mb-6">
                 See which pages drive the most traffic, where visitors enter your site, and where they leave. Use data to double down on what works.
               </p>
               <ul className="space-y-3">
@@ -228,7 +228,7 @@ export default function FeaturesPage() {
                   'Referral sources — where traffic comes from',
                   'Browser, OS & device breakdowns',
                 ].map((item) => (
-                  <li key={item} className="flex items-start gap-3 text-sm text-neutral-600 dark:text-neutral-400">
+                  <li key={item} className="flex items-start gap-3 text-sm text-neutral-400">
                     <svg className="w-5 h-5 text-brand-orange shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
                       <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                     </svg>
@@ -250,17 +250,17 @@ export default function FeaturesPage() {
                   whileInView={{ opacity: 1, x: 0 }}
                   viewport={{ once: true }}
                   transition={{ duration: 0.4, delay: i * 0.1 }}
-                  className="p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-xl"
+                  className="p-4 bg-neutral-800/50 rounded-xl"
                 >
                   <div className="flex items-center justify-between mb-2">
-                    <span className="text-sm font-medium text-neutral-900 dark:text-white truncate mr-4">
+                    <span className="text-sm font-medium text-white truncate mr-4">
                       {page.label}
                     </span>
-                    <span className="text-sm text-neutral-500 dark:text-neutral-400 shrink-0">
+                    <span className="text-sm text-neutral-400 shrink-0">
                       {page.views} views
                     </span>
                   </div>
-                  <div className="h-1.5 bg-neutral-200 dark:bg-neutral-700 rounded-full overflow-hidden">
+                  <div className="h-1.5 bg-neutral-700 rounded-full overflow-hidden">
                     <motion.div
                       initial={{ width: 0 }}
                       whileInView={{ width: `${page.pct}%` }}
@@ -284,10 +284,10 @@ export default function FeaturesPage() {
           className="mb-28"
         >
           <div className="text-center mb-12">
-            <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">
+            <h2 className="text-2xl font-bold text-white mb-4">
               Built for trust
             </h2>
-            <p className="text-lg text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto">
+            <p className="text-lg text-neutral-400 max-w-2xl mx-auto">
               Open source, Swiss hosted, and designed to keep your visitors&apos; data where it belongs.
             </p>
           </div>
@@ -306,8 +306,8 @@ export default function FeaturesPage() {
                   <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                 </svg>
                 <div>
-                  <span className="font-semibold text-neutral-900 dark:text-white text-sm">{signal.label}</span>
-                  <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">{signal.detail}</p>
+                  <span className="font-semibold text-white text-sm">{signal.label}</span>
+                  <p className="text-xs text-neutral-400 mt-0.5">{signal.detail}</p>
                 </div>
               </motion.div>
             ))}
@@ -340,10 +340,10 @@ export default function FeaturesPage() {
           className="mb-28"
         >
           <div className="text-center mb-14">
-            <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">
+            <h2 className="text-2xl font-bold text-white mb-4">
               Up and running in <span className="gradient-text">3 minutes</span>
             </h2>
-            <p className="text-lg text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto">
+            <p className="text-lg text-neutral-400 max-w-2xl mx-auto">
               No SDKs to install, no build steps, no configuration files.
             </p>
           </div>
@@ -366,15 +366,15 @@ export default function FeaturesPage() {
                   {s.step}
                 </div>
                 <div>
-                  <h3 className="font-bold text-neutral-900 dark:text-white text-sm">
+                  <h3 className="font-bold text-white text-sm">
                     {s.title}
                   </h3>
-                  <p className="text-xs text-neutral-500 dark:text-neutral-400">
+                  <p className="text-xs text-neutral-400">
                     {s.desc}
                   </p>
                 </div>
                 {i < 2 && (
-                  <ArrowRightIcon className="w-5 h-5 text-neutral-300 dark:text-neutral-600 shrink-0 hidden md:block" />
+                  <ArrowRightIcon className="w-5 h-5 text-neutral-600 shrink-0 hidden md:block" />
                 )}
               </motion.div>
             ))}
@@ -389,10 +389,10 @@ export default function FeaturesPage() {
           transition={{ duration: 0.5 }}
           className="text-center mb-20"
         >
-          <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">
+          <h2 className="text-2xl font-bold text-white mb-4">
             Ready to see it in action?
           </h2>
-          <p className="text-neutral-600 dark:text-neutral-400 mb-8 max-w-lg mx-auto">
+          <p className="text-neutral-400 mb-8 max-w-lg mx-auto">
             Start for free. No credit card required. Cancel anytime.
           </p>
           <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
diff --git a/app/installation/page.tsx b/app/installation/page.tsx
index 48a3af4..effd9a3 100644
--- a/app/installation/page.tsx
+++ b/app/installation/page.tsx
@@ -9,26 +9,26 @@ export default function InstallationPage() {
       {/* * --- 1. ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
         {/* * Bottom-right Neutral Glow */}
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         {/* * Grid Pattern with Radial Mask */}
         <div 
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
 
       <div className="flex-grow w-full max-w-4xl mx-auto px-4 pt-20 pb-10 z-10">
         <div className="text-center mb-12">
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white mb-6">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white mb-6">
             Installation
           </h1>
-          <p className="text-xl text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto leading-relaxed">
+          <p className="text-xl text-neutral-400 max-w-2xl mx-auto leading-relaxed">
             Get up and running with Pulse in seconds.
           </p>
         </div>
 
         <div className="w-full text-center">
-          <h2 className="text-2xl font-bold mb-8 text-neutral-900 dark:text-white">Add the snippet</h2>
+          <h2 className="text-2xl font-bold mb-8 text-white">Add the snippet</h2>
           <p className="text-neutral-500 mb-8">Just add this snippet to your &lt;head&gt; tag in your layout or index file.</p>
           
           <div className="max-w-2xl mx-auto bg-neutral-900 rounded-xl overflow-hidden shadow-2xl text-left border border-neutral-800">
@@ -57,9 +57,9 @@ export default function InstallationPage() {
         </div>
 
         <div className="w-full mt-16 text-center">
-          <h2 className="text-2xl font-bold mb-4 text-neutral-900 dark:text-white">Custom events (goals)</h2>
+          <h2 className="text-2xl font-bold mb-4 text-white">Custom events (goals)</h2>
           <p className="text-neutral-500 mb-6 max-w-xl mx-auto">
-            Track custom events (e.g. signup, purchase) with <code className="px-1.5 py-0.5 rounded bg-neutral-200 dark:bg-neutral-700 text-sm font-mono">pulse.track(&apos;event_name&apos;)</code>. Use letters, numbers, and underscores only. Define goals in your site Settings → Goals & Events to see counts in the dashboard.
+            Track custom events (e.g. signup, purchase) with <code className="px-1.5 py-0.5 rounded bg-neutral-700 text-sm font-mono">pulse.track(&apos;event_name&apos;)</code>. Use letters, numbers, and underscores only. Define goals in your site Settings → Goals & Events to see counts in the dashboard.
           </p>
           <div className="max-w-2xl mx-auto bg-neutral-900 rounded-xl overflow-hidden shadow-2xl text-left border border-neutral-800">
             <div className="flex items-center px-4 py-3 bg-neutral-800 border-b border-neutral-800">
diff --git a/app/integrations/nextjs/page.tsx b/app/integrations/nextjs/page.tsx
index 31f76b6..96ced7e 100644
--- a/app/integrations/nextjs/page.tsx
+++ b/app/integrations/nextjs/page.tsx
@@ -8,9 +8,9 @@ export default function NextJsIntegrationPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div 
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
@@ -25,22 +25,22 @@ export default function NextJsIntegrationPage() {
         </Link>
 
         <div className="flex items-center gap-4 mb-8">
-          <div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl">
-            <svg viewBox="0 0 128 128" className="w-10 h-10 dark:invert">
+          <div className="p-3 bg-neutral-800 rounded-xl">
+            <svg viewBox="0 0 128 128" className="w-10 h-10 invert">
               <path d="M64 0C28.7 0 0 28.7 0 64s28.7 64 64 64 64-28.7 64-64S99.3 0 64 0zm27.6 93.9c-.8.9-2.2 1-3.1.2L42.8 52.8V88c0 1.3-1.1 2.3-2.3 2.3h-7.4c-1.3 0-2.3-1.1-2.3-2.3V40c0-1.3 1.1-2.3 2.3-2.3h7.4c1 0 1.9.6 2.2 1.5l48.6 44.8V40c0-1.3 1.1-2.3 2.3-2.3h7.4c1.3 0 2.3 1.1 2.3 2.3v48c0 1.3-1.1 2.3-2.3 2.3h-6.8c-.9 0-1.7-.5-2.1-1.3z" />
             </svg>
           </div>
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white">
             Next.js Integration
           </h1>
         </div>
 
-        <div className="prose prose-neutral dark:prose-invert max-w-none">
-          <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
+        <div className="prose prose-invert max-w-none">
+          <p className="lead text-xl text-neutral-400">
             The best way to add Pulse to your Next.js application is using the built-in <code>next/script</code> component.
           </p>
 
-          <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
+          <hr className="my-8 border-neutral-800" />
 
           <h3>Using App Router (Recommended)</h3>
           <p>
diff --git a/app/integrations/page.tsx b/app/integrations/page.tsx
index 10ece2f..4be357a 100644
--- a/app/integrations/page.tsx
+++ b/app/integrations/page.tsx
@@ -93,9 +93,9 @@ export default function IntegrationsPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
@@ -109,14 +109,14 @@ export default function IntegrationsPage() {
         >
           {/* * --- Title with count badge --- */}
           <div className="flex items-center justify-center gap-3 mb-6">
-            <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white">
+            <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white">
               Integrations
             </h1>
             <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-brand-orange/10 text-brand-orange border border-brand-orange/20">
               {integrations.length}+
             </span>
           </div>
-          <p className="text-xl text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto leading-relaxed mb-8">
+          <p className="text-xl text-neutral-400 max-w-2xl mx-auto leading-relaxed mb-8">
             Connect Pulse with {integrations.length}+ frameworks and platforms in minutes.
           </p>
 
@@ -143,12 +143,12 @@ export default function IntegrationsPage() {
               value={query}
               onChange={(e) => setQuery(e.target.value)}
               placeholder="Search integrations..."
-              className="w-full pl-12 pr-16 py-3 bg-white/70 dark:bg-neutral-900/70 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-xl text-neutral-900 dark:text-white placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-orange/50 focus:border-brand-orange/50 transition-all"
+              className="w-full pl-12 pr-16 py-3 bg-neutral-900/70 backdrop-blur-sm border border-neutral-800 rounded-xl text-white placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-orange/50 focus:border-brand-orange/50 transition-all"
             />
             {query ? (
               <button
                 onClick={() => setQuery('')}
-                className="absolute inset-y-0 right-0 flex items-center pr-4 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors"
+                className="absolute inset-y-0 right-0 flex items-center pr-4 text-neutral-400 hover:text-neutral-600 hover:text-neutral-300 transition-colors"
                 aria-label="Clear search"
               >
                 <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
@@ -157,7 +157,7 @@ export default function IntegrationsPage() {
               </button>
             ) : (
               <div className="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none">
-                <kbd className="hidden sm:inline-flex items-center px-1.5 py-0.5 rounded text-xs font-mono font-medium bg-neutral-200/80 dark:bg-neutral-700/80 text-neutral-500 dark:text-neutral-400 border border-neutral-300 dark:border-neutral-600">
+                <kbd className="hidden sm:inline-flex items-center px-1.5 py-0.5 rounded text-xs font-mono font-medium bg-neutral-700/80 text-neutral-400 border border-neutral-600">
                   /
                 </kbd>
               </div>
@@ -169,7 +169,7 @@ export default function IntegrationsPage() {
             <motion.p
               initial={{ opacity: 0, y: -5 }}
               animate={{ opacity: 1, y: 0 }}
-              className="text-sm text-neutral-500 dark:text-neutral-400 mt-3"
+              className="text-sm text-neutral-400 mt-3"
             >
               {totalResults} {totalResults === 1 ? 'integration' : 'integrations'} found
               {query && <> for &ldquo;{query}&rdquo;</>}
@@ -189,7 +189,7 @@ export default function IntegrationsPage() {
             className={`px-4 py-1.5 rounded-full text-sm font-medium transition-all ${
               activeCategory === 'all'
                 ? 'bg-brand-orange text-white shadow-sm'
-                : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
+                : 'bg-neutral-800 text-neutral-400 hover:bg-neutral-700'
             }`}
           >
             All
@@ -201,7 +201,7 @@ export default function IntegrationsPage() {
               className={`px-4 py-1.5 rounded-full text-sm font-medium transition-all ${
                 activeCategory === cat
                   ? 'bg-brand-orange text-white shadow-sm'
-                  : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
+                  : 'bg-neutral-800 text-neutral-400 hover:bg-neutral-700'
               }`}
             >
               {categoryLabels[cat]}
@@ -226,7 +226,7 @@ export default function IntegrationsPage() {
                     whileInView={{ opacity: 1, y: 0 }}
                     viewport={{ once: true }}
                     transition={{ duration: 0.4 }}
-                    className="text-lg font-semibold text-neutral-500 dark:text-neutral-400 mb-6 tracking-wide uppercase flex items-center gap-2"
+                    className="text-lg font-semibold text-neutral-400 mb-6 tracking-wide uppercase flex items-center gap-2"
                   >
                     <svg className="w-5 h-5 text-brand-orange" fill="currentColor" viewBox="0 0 20 20">
                       <path d="M10 1l2.39 4.84 5.34.78-3.87 3.77.91 5.33L10 13.27l-4.77 2.5.91-5.33L2.27 6.67l5.34-.78L10 1z" />
@@ -245,12 +245,12 @@ export default function IntegrationsPage() {
                       >
                         <Link
                           href={`/integrations/${integration!.id}`}
-                          className="group flex items-center gap-3 p-4 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-xl hover:border-brand-orange/50 dark:hover:border-brand-orange/50 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg h-full"
+                          className="group flex items-center gap-3 p-4 bg-neutral-900/50 backdrop-blur-sm border border-neutral-800 rounded-xl hover:border-brand-orange/50 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg h-full"
                         >
-                          <div className="p-2 bg-neutral-100 dark:bg-neutral-800 rounded-lg shrink-0 group-hover:scale-110 transition-transform duration-300 [&_svg]:w-6 [&_svg]:h-6">
+                          <div className="p-2 bg-neutral-800 rounded-lg shrink-0 group-hover:scale-110 transition-transform duration-300 [&_svg]:w-6 [&_svg]:h-6">
                             {integration!.icon}
                           </div>
-                          <span className="font-semibold text-neutral-900 dark:text-white text-sm">
+                          <span className="font-semibold text-white text-sm">
                             {integration!.name}
                           </span>
                         </Link>
@@ -268,7 +268,7 @@ export default function IntegrationsPage() {
                     whileInView={{ opacity: 1, y: 0 }}
                     viewport={{ once: true }}
                     transition={{ duration: 0.4 }}
-                    className="text-lg font-semibold text-neutral-500 dark:text-neutral-400 mb-6 tracking-wide uppercase"
+                    className="text-lg font-semibold text-neutral-400 mb-6 tracking-wide uppercase"
                   >
                     {group.label}
                   </motion.h2>
@@ -284,19 +284,19 @@ export default function IntegrationsPage() {
                       >
                         <Link
                           href={`/integrations/${integration.id}`}
-                          className="group relative p-6 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-2xl hover:border-brand-orange/50 dark:hover:border-brand-orange/50 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl block h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
+                          className="group relative p-6 bg-neutral-900/50 backdrop-blur-sm border border-neutral-800 rounded-2xl hover:border-brand-orange/50 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl block h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
                         >
                           <div className="flex items-start justify-between mb-6">
-                            <div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl group-hover:scale-110 transition-transform duration-300">
+                            <div className="p-3 bg-neutral-800 rounded-xl group-hover:scale-110 transition-transform duration-300">
                               {integration.icon}
                             </div>
                             <ArrowRightIcon className="w-5 h-5 text-neutral-400 group-hover:text-brand-orange transition-colors" />
                           </div>
 
-                          <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3">
+                          <h3 className="text-xl font-bold text-white mb-3">
                             {integration.name}
                           </h3>
-                          <p className="text-neutral-600 dark:text-neutral-400 leading-relaxed mb-4">
+                          <p className="text-neutral-400 leading-relaxed mb-4">
                             {integration.description}
                           </p>
                           <span className="text-sm font-medium text-brand-orange opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1">
@@ -317,20 +317,20 @@ export default function IntegrationsPage() {
               animate={{ opacity: 1, scale: 1 }}
               exit={{ opacity: 0, scale: 0.95 }}
               transition={{ duration: 0.3 }}
-              className="max-w-md mx-auto mt-8 p-10 border border-dashed border-neutral-300 dark:border-neutral-700 rounded-2xl flex flex-col items-center justify-center text-center"
+              className="max-w-md mx-auto mt-8 p-10 border border-dashed border-neutral-700 rounded-2xl flex flex-col items-center justify-center text-center"
             >
-              <div className="p-4 bg-neutral-100 dark:bg-neutral-800 rounded-full mb-4">
+              <div className="p-4 bg-neutral-800 rounded-full mb-4">
                 <svg className="w-8 h-8 text-neutral-400" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
                 </svg>
               </div>
-              <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-2">
+              <h3 className="text-xl font-bold text-white mb-2">
                 Missing something?
               </h3>
-              <p className="text-neutral-600 dark:text-neutral-400 text-sm mb-1">
+              <p className="text-neutral-400 text-sm mb-1">
                 No integrations found for &ldquo;{query}&rdquo;.
               </p>
-              <p className="text-neutral-600 dark:text-neutral-400 text-sm mb-5">
+              <p className="text-neutral-400 text-sm mb-5">
                 Let us know which integration you&apos;d like to see next.
               </p>
               <a
@@ -350,12 +350,12 @@ export default function IntegrationsPage() {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.5 }}
-            className="max-w-md mx-auto mt-12 p-6 border border-dashed border-neutral-300 dark:border-neutral-700 rounded-2xl flex flex-col items-center justify-center text-center"
+            className="max-w-md mx-auto mt-12 p-6 border border-dashed border-neutral-700 rounded-2xl flex flex-col items-center justify-center text-center"
           >
-            <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-2">
+            <h3 className="text-xl font-bold text-white mb-2">
               Missing something?
             </h3>
-            <p className="text-neutral-600 dark:text-neutral-400 text-sm mb-4">
+            <p className="text-neutral-400 text-sm mb-4">
               Let us know which integration you&apos;d like to see next.
             </p>
             <a
diff --git a/app/integrations/react/page.tsx b/app/integrations/react/page.tsx
index 789a819..a783174 100644
--- a/app/integrations/react/page.tsx
+++ b/app/integrations/react/page.tsx
@@ -8,9 +8,9 @@ export default function ReactIntegrationPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div 
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
@@ -25,23 +25,23 @@ export default function ReactIntegrationPage() {
         </Link>
 
         <div className="flex items-center gap-4 mb-8">
-          <div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl">
+          <div className="p-3 bg-neutral-800 rounded-xl">
             <svg viewBox="0 0 128 128" className="w-10 h-10 text-[#61DAFB] fill-current">
               <path d="M64 10.6c18.4 0 34.6 5.8 44.6 14.8 6.4 5.8 10.2 12.8 10.2 20.6 0 21.6-28.6 41.2-64 41.2-1.6 0-3.2-.1-4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8 13.6-1.6 26.2-5.4 37.4-11 11.2-5.6 20.2-13 26.2-21.4-6.4-5.8-15.4-10-25.6-12.2-10.2-2.2-21.4-3.4-33-3.4-1.6 0-3.2.1-4.8.2 1.2-10.8 6.2-20.2 13.8-27.6 8.8-8.6 20.6-13.4 33.2-13.4 2.2 0 4.4.2 6.4.4-10.2 12.8-15.6 29.2-15.6 46.2 0 2.6.2 5.2.4 7.8-13.6 1.6-26.2 5.4-37.4 11-11.2 5.6-20.2 13-26.2 21.4 6.4 5.8 15.4 10 25.6 12.2 10.2 2.2 21.4 3.4 33 3.4 1.6 0 3.2-.1 4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8 13.6-1.6 26.2-5.4 37.4-11zm-33.4 62c-11.2 5.6-20.2 13-26.2 21.4 6.4 5.8 15.4 10 25.6 12.2 10.2 2.2 21.4 3.4 33 3.4 1.6 0 3.2-.1 4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8 13.6-1.6 26.2-5.4 37.4-11zm-15.2-16.6c-6.4-5.8-10.2-12.8-10.2-20.6 0-21.6 28.6-41.2 64-41.2 1.6 0 3.2.1 4.8.2 1.2-10.8 6.2-20.2 13.8-27.6 8.8-8.6 20.6-13.4 33.2-13.4 2.2 0 4.4.2 6.4.4-10.2 12.8-15.6 29.2-15.6 46.2 0 2.6.2 5.2.4 7.8-13.6 1.6-26.2 5.4-37.4 11-11.2 5.6-20.2 13-26.2 21.4 6.4 5.8 15.4 10 25.6 12.2 10.2 2.2 21.4 3.4 33 3.4 1.6 0 3.2-.1 4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8z" />
               <circle cx="64" cy="64" r="10.6" />
             </svg>
           </div>
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white">
             React Integration
           </h1>
         </div>
 
-        <div className="prose prose-neutral dark:prose-invert max-w-none">
-          <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
+        <div className="prose prose-invert max-w-none">
+          <p className="lead text-xl text-neutral-400">
             For standard React SPAs (Create React App, Vite, etc.), you can simply add the script tag to your <code>index.html</code>.
           </p>
 
-          <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
+          <hr className="my-8 border-neutral-800" />
 
           <h3>Method 1: index.html (Recommended)</h3>
           <p>
diff --git a/app/integrations/vue/page.tsx b/app/integrations/vue/page.tsx
index a33e528..013f6b9 100644
--- a/app/integrations/vue/page.tsx
+++ b/app/integrations/vue/page.tsx
@@ -8,9 +8,9 @@ export default function VueIntegrationPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div 
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
@@ -25,23 +25,23 @@ export default function VueIntegrationPage() {
         </Link>
 
         <div className="flex items-center gap-4 mb-8">
-          <div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl">
+          <div className="p-3 bg-neutral-800 rounded-xl">
             <svg viewBox="0 0 128 128" className="w-10 h-10 text-[#4FC08D] fill-current">
               <path d="M82.8 24.6h27.8L64 103.4 17.4 24.6h27.8L64 59.4l18.8-34.8z" />
               <path d="M64 24.6H39L64 67.4l25-42.8H64z" fill="#35495E" />
             </svg>
           </div>
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white">
             Vue.js Integration
           </h1>
         </div>
 
-        <div className="prose prose-neutral dark:prose-invert max-w-none">
-          <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
+        <div className="prose prose-invert max-w-none">
+          <p className="lead text-xl text-neutral-400">
             Integrating Pulse with Vue.js is straightforward. You can add the script to your <code>index.html</code> file.
           </p>
 
-          <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
+          <hr className="my-8 border-neutral-800" />
 
           <h3>Method 1: index.html (Recommended)</h3>
           <p>
diff --git a/app/integrations/wordpress/page.tsx b/app/integrations/wordpress/page.tsx
index d38f11b..98f9f6f 100644
--- a/app/integrations/wordpress/page.tsx
+++ b/app/integrations/wordpress/page.tsx
@@ -8,9 +8,9 @@ export default function WordPressIntegrationPage() {
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div 
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
@@ -25,22 +25,22 @@ export default function WordPressIntegrationPage() {
         </Link>
 
         <div className="flex items-center gap-4 mb-8">
-          <div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl">
+          <div className="p-3 bg-neutral-800 rounded-xl">
             <svg viewBox="0 0 128 128" className="w-10 h-10 text-[#21759B] fill-current">
               <path d="M116.6 64c0-19.2-10.4-36-26-45.2l28.6 78.4c-1 3.2-2.2 6.2-3.6 9.2-11.4 12.4-27.8 20.2-46 20.2-6.2 0-12.2-.8-17.8-2.4l26.2-76.4c1.2.2 2.4.4 3.6.4 5.4 0 13.8-.8 13.8-.8 2.8-.2 3.2 4 .4 4.2 0 0-2.8.2-6 .4l19 56.6 5.4-18c2.4-7.4 4.2-12.8 4.2-17.4 0-6-2.2-10.2-7.6-12.6-2.8-1.2-2.2-5.4 1.4-5.4h4.4zM64 121.2c-15.8 0-30.2-6.4-40.8-16.8L46.6 36.8c-2.8-.2-5.8-.4-5.8-.4-2.8-.2-2.4-4.4.4-4.2 0 0 8.4.8 13.6.8 5.4 0 13.6-.8 13.6-.8 2.8-.2 3.2 4 .4 4.2 0 0-2.8.2-5.8.4l18.2 54.4 10.6-31.8L64 121.2zM11.4 64c0 17 8.2 32.2 20.8 41.8L18.8 66.8c-.8-3.4-1.2-6.6-1.2-9.2 0-6.8 2.6-13 6.2-17.8C15.6 47.4 11.4 55.2 11.4 64zM64 6.8c16.2 0 30.8 6.8 41.4 17.6-1.4-.2-2.8-.2-4.2-.2-7.8 0-14.2 1.4-14.2 1.4-2.8.6-2.2 4.8.6 4.2 0 0 5-1 10.6-1 2.2 0 4.6.2 6.6.4L88.2 53 71.4 6.8h-7.4z" />
             </svg>
           </div>
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white">
             WordPress Integration
           </h1>
         </div>
 
-        <div className="prose prose-neutral dark:prose-invert max-w-none">
-          <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
+        <div className="prose prose-invert max-w-none">
+          <p className="lead text-xl text-neutral-400">
             You can add Pulse to your WordPress site without installing any heavy plugins, or by using a simple code snippet plugin.
           </p>
 
-          <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
+          <hr className="my-8 border-neutral-800" />
 
           <h3>Method 1: Using a Plugin (Easiest)</h3>
           <ol>
diff --git a/app/not-found.tsx b/app/not-found.tsx
index 25db689..924cc99 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -8,19 +8,19 @@ export default function NotFound() {
       <div className="absolute inset-0 -z-10 pointer-events-none">
         {/* * Grid Pattern with Radial Mask */}
         <div 
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
 
       <div className="text-center px-4 z-10">
-        <h1 className="text-9xl font-bold text-transparent bg-clip-text bg-gradient-to-b from-neutral-900 to-neutral-500 dark:from-white dark:to-neutral-500 mb-4">
+        <h1 className="text-9xl font-bold text-transparent bg-clip-text bg-gradient-to-b from-white to-neutral-500 mb-4">
           404
         </h1>
-        <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-6">
+        <h2 className="text-2xl font-bold text-white mb-6">
           Page not found
         </h2>
-        <p className="text-lg text-neutral-600 dark:text-neutral-400 max-w-md mx-auto mb-10 leading-relaxed">
+        <p className="text-lg text-neutral-400 max-w-md mx-auto mb-10 leading-relaxed">
           Sorry, we couldn't find the page you're looking for. It might have been moved or deleted.
         </p>
 
diff --git a/app/page.tsx b/app/page.tsx
index 60e48fb..4f84a39 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -27,14 +27,14 @@ function DashboardPreview() {
         initial={{ opacity: 0, y: 40 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.7, delay: 0.4 }}
-        className="relative rounded-xl border border-neutral-200/50 dark:border-neutral-800/50 shadow-2xl overflow-hidden"
+        className="relative rounded-xl border border-neutral-800/50 shadow-2xl overflow-hidden"
       >
         {/* * Browser chrome */}
-        <div className="h-8 bg-neutral-100 dark:bg-neutral-800/80 border-b border-neutral-200 dark:border-white/5 flex items-center px-4 gap-2">
+        <div className="h-8 bg-neutral-800/80 border-b border-white/5 flex items-center px-4 gap-2">
           <div className="w-3 h-3 rounded-full bg-red-400/60" />
           <div className="w-3 h-3 rounded-full bg-yellow-400/60" />
           <div className="w-3 h-3 rounded-full bg-green-400/60" />
-          <div className="ml-4 flex-1 max-w-xs h-5 rounded bg-neutral-200 dark:bg-neutral-700/50" />
+          <div className="ml-4 flex-1 max-w-xs h-5 rounded bg-neutral-700/50" />
         </div>
 
         {/* * Screenshot with bottom fade */}
@@ -47,7 +47,7 @@ function DashboardPreview() {
             className="w-full h-auto object-cover object-top"
             priority
           />
-          <div className="absolute inset-0 pointer-events-none bg-gradient-to-b from-transparent from-60% to-white dark:to-neutral-950" />
+          <div className="absolute inset-0 pointer-events-none bg-gradient-to-b from-transparent from-60% to-neutral-950" />
         </div>
       </motion.div>
     </div>
@@ -59,28 +59,28 @@ function ComparisonSection() {
   return (
     <div className="w-full max-w-4xl mx-auto mb-32">
       <div className="text-center mb-12">
-        <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">Why choose Pulse?</h2>
+        <h2 className="text-2xl font-bold text-white mb-4">Why choose Pulse?</h2>
         <p className="text-neutral-500">The lightweight, privacy-friendly alternative.</p>
       </div>
 
-      <div className="overflow-hidden rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm">
+      <div className="overflow-hidden rounded-2xl border border-neutral-800 bg-neutral-900/50 backdrop-blur-sm">
         <table className="w-full text-left border-collapse">
           <thead>
-            <tr className="border-b border-neutral-200 dark:border-neutral-800">
+            <tr className="border-b border-neutral-800">
               <th className="p-6 text-sm font-medium text-neutral-500">Feature</th>
               <th className="p-6 text-sm font-bold text-brand-orange">Pulse</th>
               <th className="p-6 text-sm font-medium text-neutral-500">Google Analytics</th>
             </tr>
           </thead>
-          <tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
+          <tbody className="divide-y divide-neutral-800">
             {[
               { feature: "Cookie Banner Required", pulse: false, ga: true },
               { feature: "GDPR Compliant", pulse: true, ga: "Complex" },
               { feature: "Script Size", pulse: "< 1 KB", ga: "45 KB+" },
               { feature: "Data Ownership", pulse: "Yours", ga: "Google's" },
             ].map((row) => (
-              <tr key={row.feature} className="hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 transition-colors">
-                <td className="p-6 text-neutral-900 dark:text-white font-medium">{row.feature}</td>
+              <tr key={row.feature} className="hover:bg-neutral-800/50 transition-colors">
+                <td className="p-6 text-white font-medium">{row.feature}</td>
                 <td className="p-6">
                   {row.pulse === true ? (
                     <CheckCircleIcon className="w-5 h-5 text-green-500" />
@@ -237,10 +237,10 @@ export default function HomePage() {
         {/* * --- 1. ATMOSPHERE (Background) --- */}
         <div className="absolute inset-0 -z-10 pointer-events-none">
           {/* * Bottom-right Neutral Glow */}
-          <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+          <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
           {/* * Grid Pattern with Radial Mask */}
           <div 
-            className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+            className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
             style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
           />
         </div>
@@ -266,7 +266,7 @@ export default function HomePage() {
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.5, delay: 0.1 }}
-              className="text-5xl md:text-7xl font-bold tracking-tight text-neutral-900 dark:text-white mb-6"
+              className="text-5xl md:text-7xl font-bold tracking-tight text-white mb-6"
             >
               Simple analytics for <br />
               <span className="relative inline-block">
@@ -283,7 +283,7 @@ export default function HomePage() {
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.5, delay: 0.2 }}
-              className="text-xl text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto mb-10 leading-relaxed"
+              className="text-xl text-neutral-400 max-w-2xl mx-auto mb-10 leading-relaxed"
             >
               Respect your users' privacy while getting the insights you need. 
               No cookies, no IP tracking, fully GDPR compliant.
@@ -326,8 +326,8 @@ export default function HomePage() {
                 <div className="w-12 h-12 rounded-xl bg-brand-orange/10 flex items-center justify-center mb-6 text-brand-orange group-hover:scale-110 transition-transform duration-300">
                   <feature.icon className="w-6 h-6" />
                 </div>
-                <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3">{feature.title}</h3>
-                <p className="text-neutral-600 dark:text-neutral-400 leading-relaxed">
+                <h3 className="text-xl font-bold text-white mb-3">{feature.title}</h3>
+                <p className="text-neutral-400 leading-relaxed">
                   {feature.desc}
                 </p>
               </motion.div>
@@ -345,7 +345,7 @@ export default function HomePage() {
             transition={{ duration: 0.5 }}
             className="text-center mb-20"
           >
-            <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-6">Ready to switch?</h2>
+            <h2 className="text-2xl font-bold text-white mb-6">Ready to switch?</h2>
             <Button onClick={() => initiateOAuthFlow()} variant="primary" className="px-8 py-4 text-lg shadow-lg shadow-brand-orange/20">
               Start your free trial
             </Button>
@@ -365,8 +365,8 @@ export default function HomePage() {
   return (
     <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
       {showFinishSetupBanner && (
-        <div className="mb-6 flex items-center justify-between gap-4 rounded-2xl border border-brand-orange/30 bg-brand-orange/5 px-4 py-3 dark:bg-brand-orange/10">
-          <p className="text-sm text-neutral-700 dark:text-neutral-300">
+        <div className="mb-6 flex items-center justify-between gap-4 rounded-2xl border border-brand-orange/30 bg-brand-orange/10 px-4 py-3">
+          <p className="text-sm text-neutral-300">
             Finish setting up your workspace and add your first site.
           </p>
           <div className="flex items-center gap-2 flex-shrink-0">
@@ -381,7 +381,7 @@ export default function HomePage() {
                 if (typeof window !== 'undefined') localStorage.setItem('pulse_welcome_completed', 'true')
                 setShowFinishSetupBanner(false)
               }}
-              className="text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-400 p-1 rounded"
+              className="text-neutral-500 hover:text-neutral-400 p-1 rounded"
               aria-label="Dismiss"
             >
               <XIcon className="h-4 w-4" />
@@ -392,8 +392,8 @@ export default function HomePage() {
 
       <div className="mb-8 flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">Your Sites</h1>
-          <p className="mt-1 text-sm text-neutral-500 dark:text-neutral-400">Manage your analytics sites and view insights.</p>
+          <h1 className="text-2xl font-bold text-white">Your Sites</h1>
+          <p className="mt-1 text-sm text-neutral-400">Manage your analytics sites and view insights.</p>
         </div>
         {(() => {
           const siteLimit = getSitesLimitForPlan(subscription?.plan_id)
@@ -401,7 +401,7 @@ export default function HomePage() {
           return atLimit ? (
           <div>
             <div className="flex items-center gap-3">
-              <span className="text-sm font-medium text-neutral-500 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-800 px-3 py-1.5 rounded-lg border border-neutral-200 dark:border-neutral-700">
+              <span className="text-sm font-medium text-neutral-400 bg-neutral-800 px-3 py-1.5 rounded-lg border border-neutral-700">
                 Limit reached ({sites.length}/{siteLimit})
               </span>
               <Link href="/pricing">
@@ -411,7 +411,7 @@ export default function HomePage() {
               </Link>
             </div>
             {deletedSites.length > 0 && (
-              <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-2">
+              <p className="text-sm text-neutral-400 mt-2">
                 You have a site pending deletion. Restore it or permanently delete it to free the slot.
               </p>
             )}
@@ -428,26 +428,26 @@ export default function HomePage() {
 
       {/* * Global Overview - min-h ensures no layout shift when Plan & usage loads */}
       <div className="mb-8 grid grid-cols-1 gap-4 sm:grid-cols-3">
-        <div className="flex min-h-[100px] sm:min-h-[160px] flex-col rounded-2xl border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900">
-          <p className="text-sm text-neutral-500 dark:text-neutral-400">Total Sites</p>
-          <p className="text-2xl font-bold text-neutral-900 dark:text-white">{sites.length}</p>
+        <div className="flex min-h-[100px] sm:min-h-[160px] flex-col rounded-2xl border border-neutral-800 bg-neutral-900 p-4">
+          <p className="text-sm text-neutral-400">Total Sites</p>
+          <p className="text-2xl font-bold text-white">{sites.length}</p>
         </div>
-        <div className="flex min-h-[100px] sm:min-h-[160px] flex-col rounded-2xl border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900">
-          <p className="text-sm text-neutral-500 dark:text-neutral-400">Total Visitors (24h)</p>
-          <p className="text-2xl font-bold text-neutral-900 dark:text-white">
+        <div className="flex min-h-[100px] sm:min-h-[160px] flex-col rounded-2xl border border-neutral-800 bg-neutral-900 p-4">
+          <p className="text-sm text-neutral-400">Total Visitors (24h)</p>
+          <p className="text-2xl font-bold text-white">
             {sites.length === 0 || Object.keys(siteStats).length < sites.length
               ? '--'
               : Object.values(siteStats).reduce((sum, { stats }) => sum + (stats?.visitors ?? 0), 0).toLocaleString()}
           </p>
         </div>
-        <div className="flex min-h-[160px] flex-col rounded-2xl border border-neutral-200 bg-brand-orange/10 p-4 dark:border-neutral-800">
+        <div className="flex min-h-[160px] flex-col rounded-2xl border border-neutral-800 bg-brand-orange/10 p-4">
           <p className="text-sm text-brand-orange">Plan & usage</p>
           {subscriptionLoading ? (
             <div className="animate-pulse space-y-2">
-              <div className="h-6 w-24 rounded bg-brand-orange/25 dark:bg-brand-orange/20" />
-              <div className="h-4 w-full rounded bg-brand-orange/25 dark:bg-brand-orange/20" />
-              <div className="h-4 w-3/4 rounded bg-brand-orange/25 dark:bg-brand-orange/20" />
-              <div className="h-4 w-20 rounded bg-brand-orange/25 dark:bg-brand-orange/20 pt-2" />
+              <div className="h-6 w-24 rounded bg-brand-orange/20" />
+              <div className="h-4 w-full rounded bg-brand-orange/20" />
+              <div className="h-4 w-3/4 rounded bg-brand-orange/20" />
+              <div className="h-4 w-20 rounded bg-brand-orange/20 pt-2" />
             </div>
           ) : subscription ? (
             <>
@@ -464,7 +464,7 @@ export default function HomePage() {
                 })()}
               </p>
               {(typeof subscription.sites_count === 'number' || (subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number') || (subscription.next_invoice_amount_due != null && subscription.next_invoice_currency && !subscription.cancel_at_period_end && (subscription.subscription_status === 'active' || subscription.subscription_status === 'trialing'))) && (
-                <p className="text-sm text-neutral-600 dark:text-neutral-400 mt-1">
+                <p className="text-sm text-neutral-400 mt-1">
                   {typeof subscription.sites_count === 'number' && (
                     <span>Sites: {(() => {
                       const limit = getSitesLimitForPlan(subscription.plan_id)
@@ -512,12 +512,12 @@ export default function HomePage() {
       </div>
 
       {!sitesLoading && sites.length === 0 && (
-        <div className="mb-8 rounded-2xl border-2 border-dashed border-brand-orange/30 bg-brand-orange/5 p-6 text-center dark:bg-brand-orange/10">
+        <div className="mb-8 rounded-2xl border-2 border-dashed border-brand-orange/30 bg-brand-orange/10 p-6 text-center">
           <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-brand-orange/20 text-brand-orange mb-4">
             <GlobeIcon className="h-7 w-7" />
           </div>
-          <h2 className="text-xl font-bold text-neutral-900 dark:text-white mb-2">Add your first site</h2>
-          <p className="text-neutral-600 dark:text-neutral-400 mb-6 max-w-md mx-auto">
+          <h2 className="text-xl font-bold text-white mb-2">Add your first site</h2>
+          <p className="text-neutral-400 mb-6 max-w-md mx-auto">
             Connect a domain to start collecting privacy-friendly analytics. You can add more sites later from the dashboard.
           </p>
           <Link href="/sites/new">
@@ -553,31 +553,31 @@ export default function HomePage() {
 
       {deletedSites.length > 0 && (
         <div className="mt-8">
-          <h3 className="text-sm font-medium text-neutral-500 dark:text-neutral-400 mb-4">Scheduled for Deletion</h3>
+          <h3 className="text-sm font-medium text-neutral-400 mb-4">Scheduled for Deletion</h3>
           <div className="space-y-3">
             {deletedSites.map((site) => {
               const purgeAt = site.deleted_at ? new Date(new Date(site.deleted_at).getTime() + 7 * 24 * 60 * 60 * 1000) : null
               const daysLeft = purgeAt ? Math.max(0, Math.ceil((purgeAt.getTime() - Date.now()) / (1000 * 60 * 60 * 24))) : 0
 
               return (
-                <div key={site.id} className="flex items-center justify-between p-4 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 opacity-60">
+                <div key={site.id} className="flex items-center justify-between p-4 rounded-xl border border-neutral-800 bg-neutral-900/50 opacity-60">
                   <div>
-                    <span className="font-medium text-neutral-700 dark:text-neutral-300">{site.name}</span>
+                    <span className="font-medium text-neutral-300">{site.name}</span>
                     <span className="ml-2 text-sm text-neutral-400">{site.domain}</span>
-                    <span className="ml-3 inline-flex items-center rounded-full bg-red-50 px-2 py-0.5 text-xs font-medium text-red-600 dark:bg-red-900/20 dark:text-red-400">
+                    <span className="ml-3 inline-flex items-center rounded-full bg-red-900/20 px-2 py-0.5 text-xs font-medium text-red-400">
                       Deleting in {daysLeft} day{daysLeft !== 1 ? 's' : ''}
                     </span>
                   </div>
                   <div className="flex gap-2">
                     <button
                       onClick={() => handleRestore(site.id)}
-                      className="px-3 py-1.5 text-xs font-medium text-neutral-700 dark:text-neutral-300 border border-neutral-300 dark:border-neutral-700 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+                      className="px-3 py-1.5 text-xs font-medium text-neutral-300 border border-neutral-700 rounded-lg hover:bg-neutral-800 transition-colors"
                     >
                       Restore
                     </button>
                     <button
                       onClick={() => handlePermanentDelete(site.id)}
-                      className="px-3 py-1.5 text-xs font-medium text-red-600 dark:text-red-400 border border-red-200 dark:border-red-900 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+                      className="px-3 py-1.5 text-xs font-medium text-red-400 border border-red-900 rounded-lg hover:bg-red-900/20 transition-colors"
                     >
                       Delete Now
                     </button>
diff --git a/app/pricing/page.tsx b/app/pricing/page.tsx
index f31aa18..5ff3cbe 100644
--- a/app/pricing/page.tsx
+++ b/app/pricing/page.tsx
@@ -19,8 +19,8 @@ export default function PricingPage() {
       <Suspense fallback={
         <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-16">
           <div className="text-center mb-12">
-            <div className="h-10 w-64 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800 mx-auto mb-4" />
-            <div className="h-5 w-96 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800 mx-auto" />
+            <div className="h-10 w-64 animate-pulse rounded bg-neutral-800 mx-auto mb-4" />
+            <div className="h-5 w-96 animate-pulse rounded bg-neutral-800 mx-auto" />
           </div>
           <PricingCardsSkeleton />
         </div>
diff --git a/components/IntegrationGuide.tsx b/components/IntegrationGuide.tsx
index c309f63..390ce92 100644
--- a/components/IntegrationGuide.tsx
+++ b/components/IntegrationGuide.tsx
@@ -39,9 +39,9 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
       <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
         <div
-          className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
+          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
           style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
         />
       </div>
@@ -56,18 +56,18 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
         </Link>
 
         <div className="flex items-center gap-4 mb-8">
-          <div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl">
+          <div className="p-3 bg-neutral-800 rounded-xl">
             {headerIcon}
           </div>
-          <h1 className="text-4xl md:text-5xl font-bold text-neutral-900 dark:text-white">
+          <h1 className="text-4xl md:text-5xl font-bold text-white">
             {integration.name} Integration
           </h1>
         </div>
 
-        <div className="prose prose-neutral dark:prose-invert max-w-none">
+        <div className="prose prose-invert max-w-none">
           {children}
 
-          <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
+          <hr className="my-8 border-neutral-800" />
           <h3>Optional: Frustration Tracking</h3>
           <p>
             Detect rage clicks and dead clicks by adding the frustration tracking
@@ -82,8 +82,8 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
 
         {/* * --- Related Integrations --- */}
         {relatedIntegrations.length > 0 && (
-          <div className="mt-16 pt-10 border-t border-neutral-200 dark:border-neutral-800">
-            <h2 className="text-xl font-bold text-neutral-900 dark:text-white mb-6">
+          <div className="mt-16 pt-10 border-t border-neutral-800">
+            <h2 className="text-xl font-bold text-white mb-6">
               Related Integrations
             </h2>
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
@@ -91,16 +91,16 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
                 <Link
                   key={related.id}
                   href={`/integrations/${related.id}`}
-                  className="group flex items-center gap-4 p-4 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-xl hover:border-brand-orange/50 dark:hover:border-brand-orange/50 transition-all duration-300"
+                  className="group flex items-center gap-4 p-4 bg-neutral-900/50 backdrop-blur-sm border border-neutral-800 rounded-xl hover:border-brand-orange/50 transition-all duration-300"
                 >
-                  <div className="p-2 bg-neutral-100 dark:bg-neutral-800 rounded-lg shrink-0 [&_svg]:w-6 [&_svg]:h-6">
+                  <div className="p-2 bg-neutral-800 rounded-lg shrink-0 [&_svg]:w-6 [&_svg]:h-6">
                     {related.icon}
                   </div>
                   <div className="min-w-0 flex-1">
-                    <span className="font-semibold text-neutral-900 dark:text-white block">
+                    <span className="font-semibold text-white block">
                       {related.name}
                     </span>
-                    <span className="text-sm text-neutral-500 dark:text-neutral-400 truncate block">
+                    <span className="text-sm text-neutral-400 truncate block">
                       {related.description}
                     </span>
                   </div>
diff --git a/components/PricingSection.tsx b/components/PricingSection.tsx
index 8205816..51f5ef8 100644
--- a/components/PricingSection.tsx
+++ b/components/PricingSection.tsx
@@ -219,10 +219,10 @@ export default function PricingSection() {
         transition={{ duration: 0.5 }}
         className="text-center mb-12"
       >
-        <h2 className="text-3xl font-bold text-neutral-900 dark:text-white mb-4">
+        <h2 className="text-3xl font-bold text-white mb-4">
           Transparent Pricing
         </h2>
-        <p className="text-lg text-neutral-600 dark:text-neutral-400">
+        <p className="text-lg text-neutral-400">
           Scale with your traffic. No hidden fees.
         </p>
       </motion.div>
@@ -232,13 +232,13 @@ export default function PricingSection() {
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.5, delay: 0.1 }}
-        className="max-w-6xl mx-auto border border-neutral-200 dark:border-neutral-800 rounded-2xl bg-white/50 dark:bg-neutral-900/50 backdrop-blur-xl shadow-sm overflow-hidden mb-20"
+        className="max-w-6xl mx-auto border border-neutral-800 rounded-2xl bg-neutral-900/50 backdrop-blur-xl shadow-sm overflow-hidden mb-20"
       >
         
         {/* Top Toolbar */}
-        <div className="p-6 border-b border-neutral-200 dark:border-neutral-800 flex flex-col md:flex-row items-center justify-between gap-8 bg-neutral-50/50 dark:bg-neutral-900/50">
+        <div className="p-6 border-b border-neutral-800 flex flex-col md:flex-row items-center justify-between gap-8 bg-neutral-900/50">
           <div className="w-full md:w-2/3">
-            <div className="flex justify-between text-sm font-medium text-neutral-500 dark:text-neutral-400 mb-4">
+            <div className="flex justify-between text-sm font-medium text-neutral-400 mb-4">
               <span>10k</span>
               <span className="text-brand-orange font-bold text-lg">
                 Up to {currentTraffic.label} monthly pageviews
@@ -254,23 +254,23 @@ export default function PricingSection() {
               onChange={(e) => setSliderIndex(parseInt(e.target.value))}
               aria-label="Monthly pageview limit"
               aria-valuetext={`${currentTraffic.label} pageviews per month`}
-              className="w-full h-2 bg-neutral-200 rounded-lg appearance-none cursor-pointer dark:bg-neutral-700 accent-brand-orange focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
+              className="w-full h-2 bg-neutral-700 rounded-lg appearance-none cursor-pointer accent-brand-orange focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
             />
           </div>
 
           <div className="flex flex-col items-end gap-2 shrink-0">
-            <span className="text-xs text-neutral-500 dark:text-neutral-400 font-medium uppercase tracking-wide">
+            <span className="text-xs text-neutral-400 font-medium uppercase tracking-wide">
               Get 1 month free with yearly
             </span>
-            <div className="bg-neutral-200 dark:bg-neutral-800 p-1 rounded-lg flex" role="radiogroup" aria-label="Billing interval">
+            <div className="bg-neutral-800 p-1 rounded-lg flex" role="radiogroup" aria-label="Billing interval">
               <button
                 onClick={() => setIsYearly(false)}
                 role="radio"
                 aria-checked={!isYearly}
                 className={`min-w-[88px] px-4 py-2 rounded-lg text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange ${
                   !isYearly
-                    ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
-                    : 'text-neutral-500 hover:text-neutral-900 dark:hover:text-white'
+                    ? 'bg-neutral-700 text-white shadow-sm'
+                    : 'text-neutral-500 hover:text-white'
                 }`}
               >
                 Monthly
@@ -281,8 +281,8 @@ export default function PricingSection() {
                 aria-checked={isYearly}
                 className={`min-w-[88px] px-4 py-2 rounded-lg text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange ${
                   isYearly
-                    ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
-                    : 'text-neutral-500 hover:text-neutral-900 dark:hover:text-white'
+                    ? 'bg-neutral-700 text-white shadow-sm'
+                    : 'text-neutral-500 hover:text-white'
                 }`}
               >
                 Yearly
@@ -292,15 +292,15 @@ export default function PricingSection() {
         </div>
 
         {/* Pricing Grid */}
-        <div className="grid md:grid-cols-5 divide-y md:divide-y-0 md:divide-x divide-neutral-200 dark:divide-neutral-800">
+        <div className="grid md:grid-cols-5 divide-y md:divide-y-0 md:divide-x divide-neutral-800">
           {/* Free Plan */}
-          <div className="p-6 flex flex-col relative transition-colors hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50">
+          <div className="p-6 flex flex-col relative transition-colors hover:bg-neutral-800/50">
             <div className="mb-8">
-              <h3 className="text-lg font-bold text-neutral-900 dark:text-white mb-2">Free</h3>
-              <p className="text-sm text-neutral-500 dark:text-neutral-400 min-h-[40px] mb-4">For trying Pulse on a personal project</p>
+              <h3 className="text-lg font-bold text-white mb-2">Free</h3>
+              <p className="text-sm text-neutral-400 min-h-[40px] mb-4">For trying Pulse on a personal project</p>
               <div className="flex items-baseline gap-1">
-                <span className="text-4xl font-bold text-neutral-900 dark:text-white">€0</span>
-                <span className="text-neutral-500 dark:text-neutral-400 font-medium">/forever</span>
+                <span className="text-4xl font-bold text-white">€0</span>
+                <span className="text-neutral-400 font-medium">/forever</span>
               </div>
             </div>
 
@@ -320,7 +320,7 @@ export default function PricingSection() {
 
             <ul className="space-y-4 flex-grow">
               {['1 site', '5k monthly pageviews', '6 months data retention', '100% Data ownership'].map((feature) => (
-                <li key={feature} className="flex items-start gap-3 text-sm text-neutral-600 dark:text-neutral-400">
+                <li key={feature} className="flex items-start gap-3 text-sm text-neutral-400">
                   <CheckCircleIcon className="w-5 h-5 shrink-0 text-neutral-400" />
                   <span>{feature}</span>
                 </li>
@@ -333,7 +333,7 @@ export default function PricingSection() {
             const isTeam = plan.id === 'team'
 
             return (
-              <div key={plan.id} className={`p-6 flex flex-col relative transition-colors ${isTeam ? 'bg-brand-orange/[0.02]' : 'hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50'}`}>
+              <div key={plan.id} className={`p-6 flex flex-col relative transition-colors ${isTeam ? 'bg-brand-orange/[0.02]' : 'hover:bg-neutral-800/50'}`}>
                 {isTeam && (
                   <>
                     <div className="absolute top-0 left-0 w-full h-1 bg-brand-orange" />
@@ -344,17 +344,17 @@ export default function PricingSection() {
                 )}
                 
                 <div className="mb-8">
-                  <h3 className="text-lg font-bold text-neutral-900 dark:text-white mb-2">{plan.name}</h3>
-                  <p className="text-sm text-neutral-500 dark:text-neutral-400 min-h-[40px] mb-4">{plan.description}</p>
+                  <h3 className="text-lg font-bold text-white mb-2">{plan.name}</h3>
+                  <p className="text-sm text-neutral-400 min-h-[40px] mb-4">{plan.description}</p>
                   
                   {priceDetails ? (
                     isYearly ? (
                       <div>
                         <div className="flex items-baseline gap-1">
-                          <span className="text-4xl font-bold text-neutral-900 dark:text-white">
+                          <span className="text-4xl font-bold text-white">
                             €{priceDetails.yearlyTotal}
                           </span>
-                          <span className="text-neutral-500 dark:text-neutral-400 font-medium">/year</span>
+                          <span className="text-neutral-400 font-medium">/year</span>
                         </div>
                         <div className="flex items-center gap-2 mt-2 text-sm font-medium">
                           <span className="text-neutral-400 line-through decoration-neutral-400">
@@ -367,14 +367,14 @@ export default function PricingSection() {
                       </div>
                     ) : (
                       <div className="flex items-baseline gap-1">
-                        <span className="text-4xl font-bold text-neutral-900 dark:text-white">
+                        <span className="text-4xl font-bold text-white">
                           €{priceDetails.baseMonthly}
                         </span>
-                        <span className="text-neutral-500 dark:text-neutral-400 font-medium">/mo</span>
+                        <span className="text-neutral-400 font-medium">/mo</span>
                       </div>
                     )
                   ) : (
-                    <div className="text-4xl font-bold text-neutral-900 dark:text-white">
+                    <div className="text-4xl font-bold text-white">
                       Custom
                     </div>
                   )}
@@ -391,7 +391,7 @@ export default function PricingSection() {
 
                 <ul className="space-y-4 flex-grow">
                   {plan.features.map((feature) => (
-                    <li key={feature} className="flex items-start gap-3 text-sm text-neutral-600 dark:text-neutral-400">
+                    <li key={feature} className="flex items-start gap-3 text-sm text-neutral-400">
                       <CheckCircleIcon className={`w-5 h-5 shrink-0 ${isTeam ? 'text-brand-orange' : 'text-neutral-400'}`} />
                       <span>{feature}</span>
                     </li>
@@ -402,11 +402,11 @@ export default function PricingSection() {
           })}
 
           {/* Enterprise Section */}
-          <div className="p-6 bg-neutral-50/50 dark:bg-neutral-900/50 flex flex-col">
+          <div className="p-6 bg-neutral-900/50 flex flex-col">
             <div className="mb-8">
-              <h3 className="text-lg font-bold text-neutral-900 dark:text-white mb-2">Enterprise</h3>
-              <p className="text-sm text-neutral-500 dark:text-neutral-400 min-h-[40px] mb-4">For high volume sites and custom needs</p>
-              <div className="text-4xl font-bold text-neutral-900 dark:text-white">
+              <h3 className="text-lg font-bold text-white mb-2">Enterprise</h3>
+              <p className="text-sm text-neutral-400 min-h-[40px] mb-4">For high volume sites and custom needs</p>
+              <div className="text-4xl font-bold text-white">
                 Custom
               </div>
             </div>
@@ -428,7 +428,7 @@ export default function PricingSection() {
                 'Managed Proxy',
                 'Raw data export'
               ].map((feature) => (
-                <li key={feature} className="flex items-start gap-3 text-sm text-neutral-600 dark:text-neutral-400">
+                <li key={feature} className="flex items-start gap-3 text-sm text-neutral-400">
                   <CheckCircleIcon className="w-5 h-5 text-neutral-400 shrink-0" />
                   <span>{feature}</span>
                 </li>
-- 
2.49.1


From acfd532194f514191dc8b1c9153edf6487a52216 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 19:41:51 +0100
Subject: [PATCH 114/428] feat: redesign landing hero to match website quality

---
 app/page.tsx | 104 +++++++++++++++++++++++++--------------------------
 1 file changed, 51 insertions(+), 53 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 4f84a39..343b3cf 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
 import { useAuth } from '@/lib/auth/context'
-import { initiateOAuthFlow, initiateSignupFlow } from '@/lib/api/oauth'
+import { initiateOAuthFlow } from '@/lib/api/oauth'
 import { listSites, listDeletedSites, restoreSite, type Site } from '@/lib/api/sites'
 import { getStats } from '@/lib/api/stats'
 import type { Stats } from '@/lib/api/stats'
@@ -15,6 +15,7 @@ import DeleteSiteModal from '@/components/sites/DeleteSiteModal'
 import { Button } from '@ciphera-net/ui'
 import Image from 'next/image'
 import { BarChartIcon, LockIcon, ZapIcon, CheckCircleIcon, XIcon, GlobeIcon } from '@ciphera-net/ui'
+import { Cookie, ShieldCheck, Code, Lightning, ArrowRight, GithubLogo } from '@phosphor-icons/react'
 import { toast } from '@ciphera-net/ui'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { getSitesLimitForPlan } from '@/lib/plans'
@@ -232,83 +233,82 @@ export default function HomePage() {
 
   if (!user) {
     return (
-      <div className="relative min-h-screen flex flex-col overflow-hidden">
-        
-        {/* * --- 1. ATMOSPHERE (Background) --- */}
-        <div className="absolute inset-0 -z-10 pointer-events-none">
-          {/* * Bottom-right Neutral Glow */}
-          <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
-          {/* * Grid Pattern with Radial Mask */}
-          <div 
-            className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
-            style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
-          />
-        </div>
+      <>
+        {/* HERO — full viewport */}
+        <div className="relative -mt-[88px] min-h-screen flex items-center pt-[88px] pb-20 lg:pb-32 overflow-hidden">
+          {/* Background atmosphere */}
+          <div className="absolute inset-0 -z-10 pointer-events-none">
+            <div className="absolute top-0 left-1/4 w-[800px] h-[800px] bg-brand-orange/5 rounded-full blur-[200px]" />
+            <div className="absolute bottom-0 right-1/4 w-[600px] h-[600px] bg-neutral-500/5 rounded-full blur-[150px]" />
+          </div>
+          <div className="absolute bottom-0 left-0 right-0 h-48 bg-gradient-to-t from-neutral-950 to-transparent" />
 
-        <div className="flex-grow w-full max-w-6xl mx-auto px-4 pt-20 pb-10 z-10">
-          
-          {/* * --- 2. BADGE --- */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.5 }}
-            className="inline-flex justify-center mb-8 w-full"
-          >
-            <span className="badge-primary">
-              <span className="w-1.5 h-1.5 rounded-full bg-brand-orange animate-pulse" />
-              Privacy-First Analytics
-            </span>
-          </motion.div>
-
-          {/* * --- 3. HEADLINE --- */}
-          <div className="text-center mb-20">
+          <div className="relative z-10 w-full max-w-6xl mx-auto px-6">
+            {/* H1 */}
             <motion.h1
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5, delay: 0.1 }}
-              className="text-5xl md:text-7xl font-bold tracking-tight text-white mb-6"
+              transition={{ duration: 0.5 }}
+              className="text-5xl sm:text-6xl md:text-7xl font-bold text-white leading-[1.1] mb-6"
             >
-              Simple analytics for <br />
+              Analytics without the{' '}
               <span className="relative inline-block">
-                <span className="gradient-text">privacy-conscious</span>
-                {/* * SVG Underline from Main Site */}
+                <span className="gradient-text">surveillance.</span>
                 <svg className="absolute -bottom-2 left-0 w-full h-3 text-brand-orange/30" viewBox="0 0 200 12" preserveAspectRatio="none">
                   <path d="M0 9C50 3 150 3 200 9" fill="none" stroke="currentColor" strokeWidth="4" strokeLinecap="round" />
                 </svg>
               </span>
-              {' '}apps.
             </motion.h1>
 
+            {/* Subtitle */}
             <motion.p
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5, delay: 0.2 }}
-              className="text-xl text-neutral-400 max-w-2xl mx-auto mb-10 leading-relaxed"
+              transition={{ duration: 0.5, delay: 0.1 }}
+              className="text-xl text-neutral-300 mb-10 leading-relaxed max-w-xl"
             >
-              Respect your users' privacy while getting the insights you need. 
+              Respect your users' privacy while getting the insights you need.
               No cookies, no IP tracking, fully GDPR compliant.
             </motion.p>
 
-            {/* * --- 4. CTAs --- */}
+            {/* CTAs */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 0.2 }}
+              className="flex flex-row gap-3 flex-wrap mb-10"
+            >
+              <Button onClick={() => initiateOAuthFlow()} variant="primary" className="px-6 py-3 shadow-lg shadow-brand-orange/20 gap-2">
+                Try Pulse Free <ArrowRight weight="bold" className="w-4 h-4" />
+              </Button>
+              <Button onClick={() => window.open('https://github.com/ciphera-net/pulse', '_blank')} variant="secondary" className="px-6 py-3 border border-white/10 gap-2">
+                <GithubLogo weight="bold" className="w-4 h-4" /> View on GitHub
+              </Button>
+            </motion.div>
+
+            {/* Trust badges */}
             <motion.div
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.5, delay: 0.3 }}
-              className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-20"
+              className="flex flex-wrap gap-x-6 gap-y-3 text-sm text-neutral-400"
             >
-              <Button onClick={() => initiateOAuthFlow()} variant="primary" className="px-8 py-4 text-lg shadow-lg shadow-brand-orange/20">
-                Get Started
-              </Button>
-              <Button onClick={() => initiateSignupFlow()} variant="secondary" className="px-8 py-4 text-lg">
-                Create Account
-              </Button>
+              <span className="flex items-center gap-2"><Cookie weight="bold" className="w-4 h-4" /> Cookie-free</span>
+              <span className="text-neutral-700">|</span>
+              <span className="flex items-center gap-2"><Code weight="bold" className="w-4 h-4" /> Open source client</span>
+              <span className="text-neutral-700">|</span>
+              <span className="flex items-center gap-2"><ShieldCheck weight="bold" className="w-4 h-4" /> GDPR compliant</span>
+              <span className="text-neutral-700">|</span>
+              <span className="flex items-center gap-2"><Lightning weight="bold" className="w-4 h-4" /> Under 2KB</span>
             </motion.div>
           </div>
+        </div>
 
-          {/* * NEW: DASHBOARD PREVIEW */}
+        {/* Existing content below hero */}
+        <div className="w-full max-w-6xl mx-auto px-4 pb-10">
           <DashboardPreview />
 
-          {/* * --- 5. GLASS CARDS --- */}
+          {/* Glass cards */}
           <div className="grid md:grid-cols-3 gap-6 text-left mb-32">
             {[
               { icon: LockIcon, title: "Privacy First", desc: "We don't track personal data. No IP addresses, no fingerprints, no cookies." },
@@ -334,10 +334,9 @@ export default function HomePage() {
             ))}
           </div>
 
-          {/* * NEW: COMPARISON SECTION */}
           <ComparisonSection />
 
-          {/* * NEW: CTA BOTTOM */}
+          {/* Bottom CTA */}
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
@@ -351,9 +350,8 @@ export default function HomePage() {
             </Button>
             <p className="mt-4 text-sm text-neutral-500">No credit card required • Cancel anytime</p>
           </motion.div>
-
         </div>
-      </div>
+      </>
     )
   }
 
-- 
2.49.1


From 0b7c4d528afed584c8122959bf3929ffa6b8db75 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 19:46:20 +0100
Subject: [PATCH 115/428] feat: add feature sections, comparison cards, and CTA
 components for landing page

---
 app/page.tsx                             | 143 +-----------
 components/marketing/CTASection.tsx      |  47 ++++
 components/marketing/ComparisonCards.tsx | 111 ++++++++++
 components/marketing/FeatureSections.tsx | 267 +++++++++++++++++++++++
 4 files changed, 432 insertions(+), 136 deletions(-)
 create mode 100644 components/marketing/CTASection.tsx
 create mode 100644 components/marketing/ComparisonCards.tsx
 create mode 100644 components/marketing/FeatureSections.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 343b3cf..469c337 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -13,101 +13,16 @@ import { LoadingOverlay } from '@ciphera-net/ui'
 import SiteList from '@/components/sites/SiteList'
 import DeleteSiteModal from '@/components/sites/DeleteSiteModal'
 import { Button } from '@ciphera-net/ui'
-import Image from 'next/image'
-import { BarChartIcon, LockIcon, ZapIcon, CheckCircleIcon, XIcon, GlobeIcon } from '@ciphera-net/ui'
+import { XIcon, GlobeIcon } from '@ciphera-net/ui'
 import { Cookie, ShieldCheck, Code, Lightning, ArrowRight, GithubLogo } from '@phosphor-icons/react'
+import FeatureSections from '@/components/marketing/FeatureSections'
+import ComparisonCards from '@/components/marketing/ComparisonCards'
+import CTASection from '@/components/marketing/CTASection'
 import { toast } from '@ciphera-net/ui'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { getSitesLimitForPlan } from '@/lib/plans'
 import { formatDate } from '@/lib/utils/formatDate'
 
-function DashboardPreview() {
-  return (
-    <div className="relative w-full max-w-7xl mx-auto mt-20 mb-32">
-      <motion.div
-        initial={{ opacity: 0, y: 40 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.7, delay: 0.4 }}
-        className="relative rounded-xl border border-neutral-800/50 shadow-2xl overflow-hidden"
-      >
-        {/* * Browser chrome */}
-        <div className="h-8 bg-neutral-800/80 border-b border-white/5 flex items-center px-4 gap-2">
-          <div className="w-3 h-3 rounded-full bg-red-400/60" />
-          <div className="w-3 h-3 rounded-full bg-yellow-400/60" />
-          <div className="w-3 h-3 rounded-full bg-green-400/60" />
-          <div className="ml-4 flex-1 max-w-xs h-5 rounded bg-neutral-700/50" />
-        </div>
-
-        {/* * Screenshot with bottom fade */}
-        <div className="relative max-h-[900px] overflow-hidden">
-          <Image
-            src="/dashboard-preview-v2.png"
-            alt="Pulse analytics dashboard showing visitor stats, charts, top pages, referrers, locations, and technology breakdown"
-            width={1920}
-            height={3000}
-            className="w-full h-auto object-cover object-top"
-            priority
-          />
-          <div className="absolute inset-0 pointer-events-none bg-gradient-to-b from-transparent from-60% to-neutral-950" />
-        </div>
-      </motion.div>
-    </div>
-  )
-}
-
-
-function ComparisonSection() {
-  return (
-    <div className="w-full max-w-4xl mx-auto mb-32">
-      <div className="text-center mb-12">
-        <h2 className="text-2xl font-bold text-white mb-4">Why choose Pulse?</h2>
-        <p className="text-neutral-500">The lightweight, privacy-friendly alternative.</p>
-      </div>
-
-      <div className="overflow-hidden rounded-2xl border border-neutral-800 bg-neutral-900/50 backdrop-blur-sm">
-        <table className="w-full text-left border-collapse">
-          <thead>
-            <tr className="border-b border-neutral-800">
-              <th className="p-6 text-sm font-medium text-neutral-500">Feature</th>
-              <th className="p-6 text-sm font-bold text-brand-orange">Pulse</th>
-              <th className="p-6 text-sm font-medium text-neutral-500">Google Analytics</th>
-            </tr>
-          </thead>
-          <tbody className="divide-y divide-neutral-800">
-            {[
-              { feature: "Cookie Banner Required", pulse: false, ga: true },
-              { feature: "GDPR Compliant", pulse: true, ga: "Complex" },
-              { feature: "Script Size", pulse: "< 1 KB", ga: "45 KB+" },
-              { feature: "Data Ownership", pulse: "Yours", ga: "Google's" },
-            ].map((row) => (
-              <tr key={row.feature} className="hover:bg-neutral-800/50 transition-colors">
-                <td className="p-6 text-white font-medium">{row.feature}</td>
-                <td className="p-6">
-                  {row.pulse === true ? (
-                    <CheckCircleIcon className="w-5 h-5 text-green-500" />
-                  ) : row.pulse === false ? (
-                    <span className="text-green-500 font-medium">No</span>
-                  ) : (
-                    <span className="text-green-500 font-medium">{row.pulse}</span>
-                  )}
-                </td>
-                <td className="p-6 text-neutral-500">
-                   {row.ga === true ? (
-                    <span className="text-red-500 font-medium">Yes</span>
-                  ) : (
-                    <span>{row.ga}</span>
-                  )}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  )
-}
-
-
 type SiteStatsMap = Record<string, { stats: Stats }>
 
 export default function HomePage() {
@@ -304,53 +219,9 @@ export default function HomePage() {
           </div>
         </div>
 
-        {/* Existing content below hero */}
-        <div className="w-full max-w-6xl mx-auto px-4 pb-10">
-          <DashboardPreview />
-
-          {/* Glass cards */}
-          <div className="grid md:grid-cols-3 gap-6 text-left mb-32">
-            {[
-              { icon: LockIcon, title: "Privacy First", desc: "We don't track personal data. No IP addresses, no fingerprints, no cookies." },
-              { icon: BarChartIcon, title: "Simple Insights", desc: "Get the metrics that matter without the clutter. Page views, visitors, and sources." },
-              { icon: ZapIcon, title: "Lightweight", desc: "Our script is less than 1kb. It won't slow down your site or affect your SEO." }
-            ].map((feature, i) => (
-              <motion.div
-                key={feature.title}
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true }}
-                transition={{ duration: 0.5, delay: i * 0.1 }}
-                className="card-glass p-6 hover:-translate-y-1 hover:shadow-xl transition-all duration-300 group"
-              >
-                <div className="w-12 h-12 rounded-xl bg-brand-orange/10 flex items-center justify-center mb-6 text-brand-orange group-hover:scale-110 transition-transform duration-300">
-                  <feature.icon className="w-6 h-6" />
-                </div>
-                <h3 className="text-xl font-bold text-white mb-3">{feature.title}</h3>
-                <p className="text-neutral-400 leading-relaxed">
-                  {feature.desc}
-                </p>
-              </motion.div>
-            ))}
-          </div>
-
-          <ComparisonSection />
-
-          {/* Bottom CTA */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.5 }}
-            className="text-center mb-20"
-          >
-            <h2 className="text-2xl font-bold text-white mb-6">Ready to switch?</h2>
-            <Button onClick={() => initiateOAuthFlow()} variant="primary" className="px-8 py-4 text-lg shadow-lg shadow-brand-orange/20">
-              Start your free trial
-            </Button>
-            <p className="mt-4 text-sm text-neutral-500">No credit card required • Cancel anytime</p>
-          </motion.div>
-        </div>
+        <FeatureSections />
+        <ComparisonCards />
+        <CTASection />
       </>
     )
   }
diff --git a/components/marketing/CTASection.tsx b/components/marketing/CTASection.tsx
new file mode 100644
index 0000000..1cc3d3f
--- /dev/null
+++ b/components/marketing/CTASection.tsx
@@ -0,0 +1,47 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { ArrowRight } from '@phosphor-icons/react'
+import { Button } from '@ciphera-net/ui'
+import { initiateOAuthFlow } from '@/lib/api/oauth'
+import Link from 'next/link'
+
+export default function CTASection() {
+  return (
+    <section className="py-20 lg:py-32">
+      <div className="container mx-auto px-6">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5 }}
+          className="relative overflow-hidden rounded-xl border border-white/[0.06] bg-neutral-900/80 px-6 py-20 sm:px-10 sm:py-24 max-w-6xl mx-auto"
+        >
+          {/* Atmosphere inside card */}
+          <div className="absolute inset-0 -z-10 pointer-events-none">
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-brand-orange/5 rounded-full blur-[150px]" />
+          </div>
+
+          <div className="relative z-10 text-center max-w-2xl mx-auto">
+            <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
+              Start tracking with privacy.
+            </h2>
+            <p className="text-lg text-neutral-300 mb-10">
+              Join thousands of developers who respect their users&apos; privacy while getting the insights they need.
+            </p>
+            <div className="flex flex-row gap-3 justify-center flex-wrap">
+              <Button onClick={() => initiateOAuthFlow()} variant="primary" className="px-6 py-3 shadow-lg shadow-brand-orange/20 gap-2">
+                Try Pulse Free <ArrowRight weight="bold" className="w-4 h-4" />
+              </Button>
+              <Link href="/pricing">
+                <Button variant="secondary" className="px-6 py-3">
+                  View Pricing
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  )
+}
diff --git a/components/marketing/ComparisonCards.tsx b/components/marketing/ComparisonCards.tsx
new file mode 100644
index 0000000..e0ef960
--- /dev/null
+++ b/components/marketing/ComparisonCards.tsx
@@ -0,0 +1,111 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import Image from 'next/image'
+import { Check, X } from '@phosphor-icons/react'
+
+const pulseFeatures = [
+  { label: 'No cookies required', has: true },
+  { label: 'GDPR compliant by default', has: true },
+  { label: 'No consent banner needed', has: true },
+  { label: 'Open source client', has: true },
+  { label: 'Script under 2KB', has: true },
+  { label: 'Swiss infrastructure', has: true },
+  { label: 'No cross-site tracking', has: true },
+  { label: 'Free tier available', has: true },
+  { label: 'Real-time dashboard', has: true },
+]
+
+const gaFeatures = [
+  { label: 'Requires cookies', has: false },
+  { label: 'GDPR requires configuration', has: false },
+  { label: 'Consent banner required', has: false },
+  { label: 'Closed source', has: false },
+  { label: 'Script over 45KB', has: false },
+  { label: 'US infrastructure', has: false },
+  { label: 'Cross-site tracking', has: false },
+  { label: 'Free tier available', has: true },
+  { label: 'Real-time dashboard', has: true },
+]
+
+export default function ComparisonCards() {
+  return (
+    <section className="py-20 lg:py-32 border-t border-white/[0.04]">
+      <div className="container mx-auto px-6">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5 }}
+          className="text-center mb-16"
+        >
+          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold text-white leading-tight mb-4">
+            How Pulse compares.
+          </h2>
+          <p className="text-lg text-neutral-400 max-w-2xl mx-auto">
+            Privacy-first analytics doesn&apos;t mean less insight. See how Pulse stacks up.
+          </p>
+        </motion.div>
+
+        <div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
+          {/* Pulse — highlighted */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.1 }}
+            className="rounded-xl border border-brand-orange/20 bg-neutral-900/80 p-8 relative overflow-hidden"
+          >
+            <div className="absolute top-0 left-0 right-0 h-[3px] bg-brand-orange" />
+            <div className="flex items-center gap-3 mb-6">
+              <Image src="/pulse_icon_no_margins.png" alt="Pulse" width={40} height={40} className="rounded-lg" unoptimized />
+              <div>
+                <h3 className="text-xl font-bold text-white">Pulse</h3>
+                <p className="text-xs text-brand-orange">Privacy-first analytics</p>
+              </div>
+            </div>
+            <ul className="space-y-4">
+              {pulseFeatures.map((f) => (
+                <li key={f.label} className="flex items-center gap-3">
+                  <Check weight="bold" className="w-5 h-5 text-brand-orange shrink-0" />
+                  <span className="text-neutral-300 text-sm">{f.label}</span>
+                </li>
+              ))}
+            </ul>
+          </motion.div>
+
+          {/* Google Analytics — muted */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+            className="rounded-xl border border-white/[0.08] bg-neutral-900/80 p-8"
+          >
+            <div className="flex items-center gap-3 mb-6">
+              <div className="w-10 h-10 rounded-lg bg-neutral-800 flex items-center justify-center text-lg">
+                📊
+              </div>
+              <div>
+                <h3 className="text-xl font-bold text-white">Google Analytics</h3>
+                <p className="text-xs text-neutral-500">Traditional tracking</p>
+              </div>
+            </div>
+            <ul className="space-y-4">
+              {gaFeatures.map((f) => (
+                <li key={f.label} className="flex items-center gap-3">
+                  {f.has ? (
+                    <Check weight="bold" className="w-5 h-5 text-green-500 shrink-0" />
+                  ) : (
+                    <X weight="bold" className="w-5 h-5 text-red-500 shrink-0" />
+                  )}
+                  <span className="text-neutral-400 text-sm">{f.label}</span>
+                </li>
+              ))}
+            </ul>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/components/marketing/FeatureSections.tsx b/components/marketing/FeatureSections.tsx
new file mode 100644
index 0000000..b90eec0
--- /dev/null
+++ b/components/marketing/FeatureSections.tsx
@@ -0,0 +1,267 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import Image from 'next/image'
+import { Check } from '@phosphor-icons/react'
+
+// Section wrapper component for reuse
+function FeatureSection({
+  id,
+  heading,
+  description,
+  features,
+  mockup,
+  reverse = false,
+}: {
+  id: string
+  heading: string
+  description: string
+  features: string[]
+  mockup: React.ReactNode
+  reverse?: boolean
+}) {
+  return (
+    <section id={id} className="container mx-auto px-6 scroll-mt-28">
+      <div className={`grid lg:grid-cols-2 gap-12 lg:gap-20 items-center`}>
+        {/* Text */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5 }}
+          className={reverse ? 'lg:order-last' : ''}
+        >
+          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold text-white leading-tight mb-6">
+            {heading}
+          </h2>
+          <p className="text-lg text-neutral-400 leading-relaxed mb-6">
+            {description}
+          </p>
+          <ul className="space-y-3 mb-8">
+            {features.map((item) => (
+              <li key={item} className="flex gap-3 text-neutral-300">
+                <Check weight="bold" className="w-5 h-5 text-brand-orange mt-0.5 shrink-0" />
+                <span>{item}</span>
+              </li>
+            ))}
+          </ul>
+        </motion.div>
+
+        {/* Mockup container */}
+        <motion.div
+          initial={{ opacity: 0, y: 40 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6, delay: 0.1 }}
+          className={`relative ${reverse ? 'lg:order-first' : ''}`}
+        >
+          <div className="absolute -inset-8 bg-brand-orange/8 rounded-[2.5rem] blur-3xl" />
+          <div className="relative rounded-3xl overflow-hidden border border-white/[0.08] bg-neutral-900/80">
+            {mockup}
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  )
+}
+
+export default function FeatureSections() {
+  return (
+    <div className="py-20 lg:py-32 space-y-28">
+      {/* Section 1: Dashboard — text left, mockup right */}
+      <FeatureSection
+        id="dashboard"
+        heading="Your traffic, at a glance."
+        description="Get a clear, real-time overview of your website's performance without the clutter of traditional analytics tools."
+        features={[
+          'Live visitor count with real-time updates',
+          'Hourly, daily, weekly, and monthly trends',
+          'Referrer sources and UTM campaign tracking',
+          'Country-level geographic breakdown',
+        ]}
+        mockup={
+          <div className="p-6 sm:p-10 flex items-center justify-center min-h-[400px]">
+            <Image
+              src="/dashboard-preview-v2.png"
+              alt="Pulse analytics dashboard"
+              width={560}
+              height={400}
+              className="w-full h-auto rounded-xl"
+              unoptimized
+            />
+          </div>
+        }
+      />
+
+      {/* Section 2: Visitors — mockup left, text right */}
+      <FeatureSection
+        id="visitors"
+        heading="Everything you need to know about your visitors."
+        description="Understand where your traffic comes from, what content resonates, and how visitors interact with your site — all without compromising their privacy."
+        features={[
+          'Top pages ranked by views and unique visitors',
+          'Referrer breakdown with source attribution',
+          'Browser, OS, and device analytics',
+          'Peak hours heatmap for optimal publishing',
+        ]}
+        reverse
+        mockup={
+          <div className="p-6 sm:p-10 flex items-center justify-center min-h-[400px]">
+            <div className="w-full space-y-4">
+              {/* Mini mockup: top pages bars */}
+              {[
+                { page: '/blog/privacy-guide', pct: 85 },
+                { page: '/docs/getting-started', pct: 65 },
+                { page: '/pricing', pct: 45 },
+                { page: '/about', pct: 30 },
+              ].map((item) => (
+                <div key={item.page} className="space-y-1.5">
+                  <div className="flex justify-between text-sm">
+                    <span className="text-neutral-300 font-medium">{item.page}</span>
+                    <span className="text-neutral-500">{item.pct}%</span>
+                  </div>
+                  <div className="h-2 bg-neutral-800 rounded-full overflow-hidden">
+                    <div className="h-full bg-brand-orange rounded-full" style={{ width: `${item.pct}%` }} />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        }
+      />
+
+      {/* Section 3: Funnels — text left, mockup right */}
+      <FeatureSection
+        id="funnels"
+        heading="See where visitors drop off."
+        description="Build custom conversion funnels to understand your user journey. Identify bottlenecks and optimize your conversion flow."
+        features={[
+          'Multi-step funnels with conversion rates',
+          'Drop-off analysis between each step',
+          'Conversion trends over time',
+          'Breakdown by device, country, or referrer',
+          'Configurable conversion window (up to 90 days)',
+        ]}
+        mockup={
+          <div className="p-6 sm:p-10 flex items-center justify-center min-h-[400px]">
+            {/* Simple funnel visualization */}
+            <div className="w-full max-w-[300px] mx-auto space-y-2">
+              {[
+                { label: 'Landing Page', value: '2,847', pct: 100, color: 'bg-brand-orange' },
+                { label: 'Sign Up Page', value: '1,423', pct: 50, color: 'bg-brand-orange/80' },
+                { label: 'Onboarding', value: '856', pct: 30, color: 'bg-brand-orange/60' },
+                { label: 'Activated', value: '412', pct: 14.5, color: 'bg-brand-orange/40' },
+              ].map((step, i) => (
+                <div key={step.label} className="text-center">
+                  <div
+                    className={`${step.color} rounded-lg py-3 mx-auto transition-all`}
+                    style={{ width: `${step.pct}%` }}
+                  >
+                    <span className="text-white text-sm font-semibold">{step.value}</span>
+                  </div>
+                  <p className="text-xs text-neutral-400 mt-1">{step.label}</p>
+                  {i < 3 && (
+                    <p className="text-xs text-neutral-600 my-1">↓ {Math.round((1 - [1, 0.5, 0.3, 0.145][i + 1] / [1, 0.5, 0.3, 0.145][i]) * 100)}% drop-off</p>
+                  )}
+                </div>
+              ))}
+              <p className="text-center text-sm text-neutral-300 mt-4 font-medium">Overall conversion: <span className="text-brand-orange">14.5%</span></p>
+            </div>
+          </div>
+        }
+      />
+
+      {/* Section 4: Reports — mockup left, text right */}
+      <FeatureSection
+        id="reports"
+        heading="Reports delivered to your inbox."
+        description="Get automated summaries of your site's performance without logging into a dashboard. Stay informed effortlessly."
+        features={[
+          'Daily, weekly, or monthly email summaries',
+          'Key metrics with period-over-period comparison',
+          'Top pages, referrers, and country breakdown',
+          'Webhook delivery for custom integrations',
+          'Multiple recipients per report',
+        ]}
+        reverse
+        mockup={
+          <div className="p-6 sm:p-10 flex items-center justify-center min-h-[400px]">
+            {/* Email mockup */}
+            <div className="w-full max-w-[360px] mx-auto bg-neutral-800/50 rounded-xl border border-neutral-700/40 p-5 space-y-4">
+              <div className="flex items-center gap-3 pb-3 border-b border-neutral-700/40">
+                <div className="w-8 h-8 rounded-lg bg-brand-orange/20 flex items-center justify-center">
+                  <span className="text-brand-orange text-xs font-bold">P</span>
+                </div>
+                <div>
+                  <p className="text-sm font-semibold text-white">Pulse Daily Report</p>
+                  <p className="text-xs text-neutral-500">yoursite.com</p>
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-3">
+                {[
+                  { label: 'Visitors', value: '1,247', change: '+12%' },
+                  { label: 'Pageviews', value: '3,891', change: '+8%' },
+                  { label: 'Bounce Rate', value: '42%', change: '-3%' },
+                  { label: 'Avg Duration', value: '2m 34s', change: '+15%' },
+                ].map((stat) => (
+                  <div key={stat.label} className="bg-neutral-900/50 rounded-lg p-3">
+                    <p className="text-xs text-neutral-500">{stat.label}</p>
+                    <p className="text-lg font-bold text-white">{stat.value}</p>
+                    <p className={`text-xs ${stat.change.startsWith('+') ? 'text-green-400' : 'text-brand-orange'}`}>{stat.change}</p>
+                  </div>
+                ))}
+              </div>
+              <p className="text-xs text-neutral-600 text-center">Delivered every day at 09:00</p>
+            </div>
+          </div>
+        }
+      />
+
+      {/* Section 5: Script — text left, code block right */}
+      <FeatureSection
+        id="script"
+        heading="One script tag. That's it."
+        description="No npm packages, no build steps, no configuration files. Add a single line to your HTML and start collecting privacy-respecting analytics instantly."
+        features={[
+          'Under 2KB gzipped — 20x smaller than Google Analytics',
+          'Async loading with defer — never blocks rendering',
+          'Works with any framework or static site',
+        ]}
+        mockup={
+          <div className="p-0">
+            {/* Code block with browser chrome */}
+            <div className="flex items-center px-4 py-3 bg-neutral-800 border-b border-neutral-800">
+              <div className="flex gap-2">
+                <div className="w-3 h-3 rounded-full bg-red-500/20" />
+                <div className="w-3 h-3 rounded-full bg-yellow-500/20" />
+                <div className="w-3 h-3 rounded-full bg-green-500/20" />
+              </div>
+              <span className="ml-4 text-xs text-neutral-400 font-mono">index.html</span>
+            </div>
+            <pre className="p-6 overflow-x-auto">
+              <code className="font-mono text-sm text-neutral-300">
+                <span className="text-neutral-500">{'<!-- Add before </head> -->'}</span>{'\n'}
+                <span className="text-blue-400">{'<'}</span>
+                <span className="text-blue-400">script</span>{'\n'}
+                {'  '}<span className="text-sky-300">defer</span>{'\n'}
+                {'  '}<span className="text-sky-300">data-domain</span>=<span className="text-orange-300">&quot;yoursite.com&quot;</span>{'\n'}
+                {'  '}<span className="text-sky-300">src</span>=<span className="text-orange-300">&quot;https://pulse.ciphera.net/js/script.js&quot;</span>{'\n'}
+                <span className="text-blue-400">{'>'}</span>
+                <span className="text-blue-400">{'</'}</span>
+                <span className="text-blue-400">script</span>
+                <span className="text-blue-400">{'>'}</span>
+              </code>
+            </pre>
+            <div className="flex items-center gap-4 px-6 py-3 border-t border-neutral-800 text-xs text-neutral-500">
+              <span>1.6 KB gzipped</span>
+              <span className="flex items-center gap-1.5">
+                <span className="w-1.5 h-1.5 rounded-full bg-green-500" />
+                Non-blocking, async
+              </span>
+            </div>
+          </div>
+        }
+      />
+    </div>
+  )
+}
-- 
2.49.1


From e789fb525b4e92ac7e01581dc3db6423da2bb32d Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 19:49:19 +0100
Subject: [PATCH 116/428] feat: port interactive mockups from website and wire
 into feature sections

---
 components/marketing/FeatureSections.tsx      |  94 +-
 .../marketing/mockups/email-report-mockup.tsx |  86 ++
 components/marketing/mockups/funnel-chart.tsx | 935 ++++++++++++++++++
 .../marketing/mockups/funnel-mockup.tsx       |  30 +
 .../mockups/modular-script-mockup.tsx         | 119 +++
 .../mockups/pulse-features-carousel.tsx       | 544 ++++++++++
 components/marketing/mockups/pulse-mockup.tsx | 197 ++++
 7 files changed, 1923 insertions(+), 82 deletions(-)
 create mode 100644 components/marketing/mockups/email-report-mockup.tsx
 create mode 100644 components/marketing/mockups/funnel-chart.tsx
 create mode 100644 components/marketing/mockups/funnel-mockup.tsx
 create mode 100644 components/marketing/mockups/modular-script-mockup.tsx
 create mode 100644 components/marketing/mockups/pulse-features-carousel.tsx
 create mode 100644 components/marketing/mockups/pulse-mockup.tsx

diff --git a/components/marketing/FeatureSections.tsx b/components/marketing/FeatureSections.tsx
index b90eec0..8d7da48 100644
--- a/components/marketing/FeatureSections.tsx
+++ b/components/marketing/FeatureSections.tsx
@@ -1,8 +1,11 @@
 'use client'
 
 import { motion } from 'framer-motion'
-import Image from 'next/image'
 import { Check } from '@phosphor-icons/react'
+import { PulseMockup } from './mockups/pulse-mockup'
+import { PulseFeaturesCarousel } from './mockups/pulse-features-carousel'
+import { FunnelMockup } from './mockups/funnel-mockup'
+import { EmailReportMockup } from './mockups/email-report-mockup'
 
 // Section wrapper component for reuse
 function FeatureSection({
@@ -80,15 +83,8 @@ export default function FeatureSections() {
           'Country-level geographic breakdown',
         ]}
         mockup={
-          <div className="p-6 sm:p-10 flex items-center justify-center min-h-[400px]">
-            <Image
-              src="/dashboard-preview-v2.png"
-              alt="Pulse analytics dashboard"
-              width={560}
-              height={400}
-              className="w-full h-auto rounded-xl"
-              unoptimized
-            />
+          <div className="p-6 sm:p-10">
+            <PulseMockup />
           </div>
         }
       />
@@ -106,26 +102,8 @@ export default function FeatureSections() {
         ]}
         reverse
         mockup={
-          <div className="p-6 sm:p-10 flex items-center justify-center min-h-[400px]">
-            <div className="w-full space-y-4">
-              {/* Mini mockup: top pages bars */}
-              {[
-                { page: '/blog/privacy-guide', pct: 85 },
-                { page: '/docs/getting-started', pct: 65 },
-                { page: '/pricing', pct: 45 },
-                { page: '/about', pct: 30 },
-              ].map((item) => (
-                <div key={item.page} className="space-y-1.5">
-                  <div className="flex justify-between text-sm">
-                    <span className="text-neutral-300 font-medium">{item.page}</span>
-                    <span className="text-neutral-500">{item.pct}%</span>
-                  </div>
-                  <div className="h-2 bg-neutral-800 rounded-full overflow-hidden">
-                    <div className="h-full bg-brand-orange rounded-full" style={{ width: `${item.pct}%` }} />
-                  </div>
-                </div>
-              ))}
-            </div>
+          <div className="p-6 sm:p-10">
+            <PulseFeaturesCarousel />
           </div>
         }
       />
@@ -143,30 +121,8 @@ export default function FeatureSections() {
           'Configurable conversion window (up to 90 days)',
         ]}
         mockup={
-          <div className="p-6 sm:p-10 flex items-center justify-center min-h-[400px]">
-            {/* Simple funnel visualization */}
-            <div className="w-full max-w-[300px] mx-auto space-y-2">
-              {[
-                { label: 'Landing Page', value: '2,847', pct: 100, color: 'bg-brand-orange' },
-                { label: 'Sign Up Page', value: '1,423', pct: 50, color: 'bg-brand-orange/80' },
-                { label: 'Onboarding', value: '856', pct: 30, color: 'bg-brand-orange/60' },
-                { label: 'Activated', value: '412', pct: 14.5, color: 'bg-brand-orange/40' },
-              ].map((step, i) => (
-                <div key={step.label} className="text-center">
-                  <div
-                    className={`${step.color} rounded-lg py-3 mx-auto transition-all`}
-                    style={{ width: `${step.pct}%` }}
-                  >
-                    <span className="text-white text-sm font-semibold">{step.value}</span>
-                  </div>
-                  <p className="text-xs text-neutral-400 mt-1">{step.label}</p>
-                  {i < 3 && (
-                    <p className="text-xs text-neutral-600 my-1">↓ {Math.round((1 - [1, 0.5, 0.3, 0.145][i + 1] / [1, 0.5, 0.3, 0.145][i]) * 100)}% drop-off</p>
-                  )}
-                </div>
-              ))}
-              <p className="text-center text-sm text-neutral-300 mt-4 font-medium">Overall conversion: <span className="text-brand-orange">14.5%</span></p>
-            </div>
+          <div className="p-6 sm:p-10">
+            <FunnelMockup />
           </div>
         }
       />
@@ -185,34 +141,8 @@ export default function FeatureSections() {
         ]}
         reverse
         mockup={
-          <div className="p-6 sm:p-10 flex items-center justify-center min-h-[400px]">
-            {/* Email mockup */}
-            <div className="w-full max-w-[360px] mx-auto bg-neutral-800/50 rounded-xl border border-neutral-700/40 p-5 space-y-4">
-              <div className="flex items-center gap-3 pb-3 border-b border-neutral-700/40">
-                <div className="w-8 h-8 rounded-lg bg-brand-orange/20 flex items-center justify-center">
-                  <span className="text-brand-orange text-xs font-bold">P</span>
-                </div>
-                <div>
-                  <p className="text-sm font-semibold text-white">Pulse Daily Report</p>
-                  <p className="text-xs text-neutral-500">yoursite.com</p>
-                </div>
-              </div>
-              <div className="grid grid-cols-2 gap-3">
-                {[
-                  { label: 'Visitors', value: '1,247', change: '+12%' },
-                  { label: 'Pageviews', value: '3,891', change: '+8%' },
-                  { label: 'Bounce Rate', value: '42%', change: '-3%' },
-                  { label: 'Avg Duration', value: '2m 34s', change: '+15%' },
-                ].map((stat) => (
-                  <div key={stat.label} className="bg-neutral-900/50 rounded-lg p-3">
-                    <p className="text-xs text-neutral-500">{stat.label}</p>
-                    <p className="text-lg font-bold text-white">{stat.value}</p>
-                    <p className={`text-xs ${stat.change.startsWith('+') ? 'text-green-400' : 'text-brand-orange'}`}>{stat.change}</p>
-                  </div>
-                ))}
-              </div>
-              <p className="text-xs text-neutral-600 text-center">Delivered every day at 09:00</p>
-            </div>
+          <div className="p-6 sm:p-10">
+            <EmailReportMockup />
           </div>
         }
       />
diff --git a/components/marketing/mockups/email-report-mockup.tsx b/components/marketing/mockups/email-report-mockup.tsx
new file mode 100644
index 0000000..74fe7bc
--- /dev/null
+++ b/components/marketing/mockups/email-report-mockup.tsx
@@ -0,0 +1,86 @@
+'use client'
+
+export function EmailReportMockup() {
+  return (
+    <div className="relative w-full max-w-[460px] mx-auto">
+      <div className="rounded-xl border border-white/[0.08] bg-neutral-900/90 shadow-2xl overflow-hidden">
+        {/* Pulse logo header */}
+        <div className="px-6 pt-5 pb-3">
+          <div className="flex items-center gap-2.5 mb-3">
+            <svg className="w-5 h-5 text-neutral-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5}><path strokeLinecap="round" strokeLinejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2" /></svg>
+            <span className="text-base font-bold text-white">Pulse</span>
+          </div>
+          <div className="h-[3px] bg-brand-orange rounded-full" />
+        </div>
+
+        {/* Report content */}
+        <div className="px-6 pb-5">
+          <div className="rounded-xl bg-neutral-800/50 border border-neutral-700/40 p-5">
+            <h3 className="text-lg font-bold text-white mb-0.5">ciphera.net</h3>
+            <p className="text-xs text-neutral-500 mb-3">Daily summary report &middot; 19 Mar 2026</p>
+
+            <p className="text-sm text-brand-orange font-semibold mb-4">Traffic down 6% compared to yesterday</p>
+
+            {/* Stats grid */}
+            <div className="grid grid-cols-4 gap-2 mb-5">
+              {[
+                { label: 'PAGEVIEWS', value: '323', change: '2%', down: true },
+                { label: 'VISITORS', value: '207', change: '6%', down: true },
+                { label: 'BOUNCE', value: '97%', change: '0%', down: false },
+                { label: 'DURATION', value: '3m 18s', change: '7%', down: false },
+              ].map((stat) => (
+                <div key={stat.label} className="rounded-lg bg-neutral-900/80 border border-neutral-700/30 px-1.5 py-2.5 text-center">
+                  <p className="text-[7px] text-neutral-500 uppercase tracking-wider mb-1">{stat.label}</p>
+                  <p className="text-sm font-bold text-white leading-none mb-1">{stat.value}</p>
+                  <p className={`text-[8px] font-semibold ${stat.down ? 'text-red-400' : 'text-green-400'}`}>
+                    {stat.down ? '\u25BC' : '\u25B2'} {stat.change}
+                  </p>
+                </div>
+              ))}
+            </div>
+
+            {/* Divider */}
+            <div className="border-t border-neutral-700/40 mb-3" />
+
+            {/* Top Pages */}
+            <h4 className="text-[10px] text-brand-orange font-bold uppercase tracking-wider mb-2">Top Pages</h4>
+            <div className="flex items-center justify-between text-[8px] text-neutral-500 uppercase tracking-wider mb-1.5 px-0.5">
+              <span>Page</span>
+              <span>Views</span>
+            </div>
+
+            <div className="space-y-0.5">
+              {[
+                { page: '/', views: 100 },
+                { page: '/products/drop', views: 96 },
+                { page: '/pricing', views: 42 },
+              ].map((row) => (
+                <div key={row.page}>
+                  <div className="flex items-center gap-3">
+                    <div className="relative flex-1 h-[20px]">
+                      <div
+                        className="absolute inset-y-0 left-0 rounded-md bg-brand-orange/20"
+                        style={{ width: `${(row.views / 100) * 75}%` }}
+                      />
+                    </div>
+                    <span className="text-xs text-neutral-400 tabular-nums w-7 text-right shrink-0">{row.views}</span>
+                  </div>
+                  <span className="text-[11px] text-neutral-300 ml-0.5">{row.page}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Schedule indicator */}
+          <div className="flex items-center justify-between mt-3 px-1 text-[10px] text-neutral-500">
+            <span>Delivered every day at 09:00</span>
+            <span className="flex items-center gap-1">
+              <div className="w-1.5 h-1.5 rounded-full bg-green-500" />
+              Sent
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/components/marketing/mockups/funnel-chart.tsx b/components/marketing/mockups/funnel-chart.tsx
new file mode 100644
index 0000000..a234ad2
--- /dev/null
+++ b/components/marketing/mockups/funnel-chart.tsx
@@ -0,0 +1,935 @@
+"use client";
+
+import { motion, useSpring, useTransform } from "motion/react";
+import {
+  type CSSProperties,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+// ─── Utils ───────────────────────────────────────────────────────────────────
+
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+// ─── PatternLines ────────────────────────────────────────────────────────────
+
+export interface PatternLinesProps {
+  id: string;
+  width?: number;
+  height?: number;
+  stroke?: string;
+  strokeWidth?: number;
+  orientation?: ("diagonal" | "horizontal" | "vertical")[];
+  background?: string;
+}
+
+export function PatternLines({
+  id,
+  width = 6,
+  height = 6,
+  stroke = "var(--chart-line-primary)",
+  strokeWidth = 1,
+  orientation = ["diagonal"],
+  background,
+}: PatternLinesProps) {
+  const paths: string[] = [];
+
+  for (const o of orientation) {
+    if (o === "diagonal") {
+      paths.push(`M0,${height}l${width},${-height}`);
+      paths.push(`M${-width / 4},${height / 4}l${width / 2},${-height / 2}`);
+      paths.push(
+        `M${(3 * width) / 4},${height + height / 4}l${width / 2},${-height / 2}`
+      );
+    } else if (o === "horizontal") {
+      paths.push(`M0,${height / 2}l${width},0`);
+    } else if (o === "vertical") {
+      paths.push(`M${width / 2},0l0,${height}`);
+    }
+  }
+
+  return (
+    <pattern
+      id={id}
+      width={width}
+      height={height}
+      patternUnits="userSpaceOnUse"
+    >
+      {background && (
+        <rect width={width} height={height} fill={background} />
+      )}
+      <path
+        d={paths.join(" ")}
+        fill="none"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="square"
+      />
+    </pattern>
+  );
+}
+
+PatternLines.displayName = "PatternLines";
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+export interface FunnelGradientStop {
+  offset: string | number;
+  color: string;
+}
+
+export interface FunnelStage {
+  label: string;
+  value: number;
+  displayValue?: string;
+  color?: string;
+  gradient?: FunnelGradientStop[];
+}
+
+export interface FunnelChartProps {
+  data: FunnelStage[];
+  orientation?: "horizontal" | "vertical";
+  color?: string;
+  layers?: number;
+  className?: string;
+  style?: CSSProperties;
+  showPercentage?: boolean;
+  showValues?: boolean;
+  showLabels?: boolean;
+  hoveredIndex?: number | null;
+  onHoverChange?: (index: number | null) => void;
+  formatPercentage?: (pct: number) => string;
+  formatValue?: (value: number) => string;
+  staggerDelay?: number;
+  gap?: number;
+  renderPattern?: (id: string, color: string) => ReactNode;
+  edges?: "curved" | "straight";
+  labelLayout?: "spread" | "grouped";
+  labelOrientation?: "vertical" | "horizontal";
+  labelAlign?: "center" | "start" | "end";
+  grid?:
+    | boolean
+    | {
+        bands?: boolean;
+        bandColor?: string;
+        lines?: boolean;
+        lineColor?: string;
+        lineOpacity?: number;
+        lineWidth?: number;
+      };
+}
+
+// ─── Defaults ────────────────────────────────────────────────────────────────
+
+const fmtPct = (p: number) => `${Math.round(p)}%`;
+const fmtVal = (v: number) => v.toLocaleString("en-US");
+
+const springConfig = { stiffness: 120, damping: 20, mass: 1 };
+const hoverSpring = { stiffness: 300, damping: 24 };
+
+// ─── SVG Helpers ─────────────────────────────────────────────────────────────
+
+function hSegmentPath(
+  normStart: number,
+  normEnd: number,
+  segW: number,
+  H: number,
+  layerScale: number,
+  straight = false
+) {
+  const my = H / 2;
+  const h0 = normStart * H * 0.44 * layerScale;
+  const h1 = normEnd * H * 0.44 * layerScale;
+
+  if (straight) {
+    return `M 0 ${my - h0} L ${segW} ${my - h1} L ${segW} ${my + h1} L 0 ${my + h0} Z`;
+  }
+
+  const cx = segW * 0.55;
+  const top = `M 0 ${my - h0} C ${cx} ${my - h0}, ${segW - cx} ${my - h1}, ${segW} ${my - h1}`;
+  const bot = `L ${segW} ${my + h1} C ${segW - cx} ${my + h1}, ${cx} ${my + h0}, 0 ${my + h0}`;
+  return `${top} ${bot} Z`;
+}
+
+function vSegmentPath(
+  normStart: number,
+  normEnd: number,
+  segH: number,
+  W: number,
+  layerScale: number,
+  straight = false
+) {
+  const mx = W / 2;
+  const w0 = normStart * W * 0.44 * layerScale;
+  const w1 = normEnd * W * 0.44 * layerScale;
+
+  if (straight) {
+    return `M ${mx - w0} 0 L ${mx - w1} ${segH} L ${mx + w1} ${segH} L ${mx + w0} 0 Z`;
+  }
+
+  const cy = segH * 0.55;
+  const left = `M ${mx - w0} 0 C ${mx - w0} ${cy}, ${mx - w1} ${segH - cy}, ${mx - w1} ${segH}`;
+  const right = `L ${mx + w1} ${segH} C ${mx + w1} ${segH - cy}, ${mx + w0} ${cy}, ${mx + w0} 0`;
+  return `${left} ${right} Z`;
+}
+
+// ─── Animated Ring ───────────────────────────────────────────────────────────
+
+function HRing({
+  d,
+  color,
+  fill,
+  opacity,
+  hovered,
+  ringIndex,
+  totalRings,
+}: {
+  d: string;
+  color: string;
+  fill?: string;
+  opacity: number;
+  hovered: boolean;
+  ringIndex: number;
+  totalRings: number;
+}) {
+  const extraScale = 1 + (ringIndex / Math.max(totalRings - 1, 1)) * 0.12;
+  const ringSpring = {
+    stiffness: 300 - ringIndex * 60,
+    damping: 24 - ringIndex * 3,
+  };
+  const scaleY = useSpring(1, ringSpring);
+
+  useEffect(() => {
+    scaleY.set(hovered ? extraScale : 1);
+  }, [hovered, scaleY, extraScale]);
+
+  return (
+    <motion.path
+      d={d}
+      fill={fill ?? color}
+      opacity={opacity}
+      style={{ scaleY, transformOrigin: "center center" }}
+    />
+  );
+}
+
+function VRing({
+  d,
+  color,
+  fill,
+  opacity,
+  hovered,
+  ringIndex,
+  totalRings,
+}: {
+  d: string;
+  color: string;
+  fill?: string;
+  opacity: number;
+  hovered: boolean;
+  ringIndex: number;
+  totalRings: number;
+}) {
+  const extraScale = 1 + (ringIndex / Math.max(totalRings - 1, 1)) * 0.12;
+  const ringSpring = {
+    stiffness: 300 - ringIndex * 60,
+    damping: 24 - ringIndex * 3,
+  };
+  const scaleX = useSpring(1, ringSpring);
+
+  useEffect(() => {
+    scaleX.set(hovered ? extraScale : 1);
+  }, [hovered, scaleX, extraScale]);
+
+  return (
+    <motion.path
+      d={d}
+      fill={fill ?? color}
+      opacity={opacity}
+      style={{ scaleX, transformOrigin: "center center" }}
+    />
+  );
+}
+
+// ─── Animated Segments ───────────────────────────────────────────────────────
+
+function HSegment({
+  index,
+  normStart,
+  normEnd,
+  segW,
+  fullH,
+  color,
+  layers,
+  staggerDelay,
+  hovered,
+  dimmed,
+  renderPattern,
+  straight,
+  gradientStops,
+}: {
+  index: number;
+  normStart: number;
+  normEnd: number;
+  segW: number;
+  fullH: number;
+  color: string;
+  layers: number;
+  staggerDelay: number;
+  hovered: boolean;
+  dimmed: boolean;
+  renderPattern?: (id: string, color: string) => ReactNode;
+  straight: boolean;
+  gradientStops?: FunnelGradientStop[];
+}) {
+  const patternId = `funnel-h-pattern-${index}`;
+  const gradientId = `funnel-h-grad-${index}`;
+  const growProgress = useSpring(0, springConfig);
+  const entranceScaleX = useTransform(growProgress, [0, 1], [0, 1]);
+  const entranceScaleY = useTransform(growProgress, [0, 1], [0, 1]);
+  const dimOpacity = useSpring(1, hoverSpring);
+
+  useEffect(() => {
+    dimOpacity.set(dimmed ? 0.4 : 1);
+  }, [dimmed, dimOpacity]);
+
+  useEffect(() => {
+    const timeout = setTimeout(
+      () => growProgress.set(1),
+      index * staggerDelay * 1000
+    );
+    return () => clearTimeout(timeout);
+  }, [growProgress, index, staggerDelay]);
+
+  const rings = Array.from({ length: layers }, (_, l) => {
+    const scale = 1 - (l / layers) * 0.35;
+    const opacity = 0.18 + (l / (layers - 1 || 1)) * 0.65;
+    return {
+      d: hSegmentPath(normStart, normEnd, segW, fullH, scale, straight),
+      opacity,
+    };
+  });
+
+  return (
+    <motion.div
+      className="pointer-events-none relative shrink-0 overflow-visible"
+      style={{
+        width: segW,
+        height: fullH,
+        zIndex: hovered ? 10 : 1,
+        opacity: dimOpacity,
+      }}
+    >
+      <motion.div
+        className="absolute inset-0 overflow-visible"
+        style={{
+          scaleX: entranceScaleX,
+          scaleY: entranceScaleY,
+          transformOrigin: "left center",
+        }}
+      >
+        <svg
+          aria-hidden="true"
+          className="absolute inset-0 h-full w-full overflow-visible"
+          preserveAspectRatio="none"
+          role="presentation"
+          viewBox={`0 0 ${segW} ${fullH}`}
+        >
+          <defs>
+            {gradientStops && (
+              <linearGradient id={gradientId} x1="0" x2="1" y1="0" y2="0">
+                {gradientStops.map((stop) => (
+                  <stop
+                    key={`${stop.offset}-${stop.color}`}
+                    offset={
+                      typeof stop.offset === "number"
+                        ? `${stop.offset * 100}%`
+                        : stop.offset
+                    }
+                    stopColor={stop.color}
+                  />
+                ))}
+              </linearGradient>
+            )}
+            {renderPattern?.(patternId, color)}
+          </defs>
+          {rings.map((r, i) => {
+            const isInnermost = i === rings.length - 1;
+            let ringFill: string | undefined;
+            if (isInnermost && renderPattern) {
+              ringFill = `url(#${patternId})`;
+            } else if (isInnermost && gradientStops) {
+              ringFill = `url(#${gradientId})`;
+            }
+            return (
+              <HRing
+                color={color}
+                d={r.d}
+                fill={ringFill}
+                hovered={hovered}
+                key={`h-ring-${r.opacity.toFixed(2)}`}
+                opacity={r.opacity}
+                ringIndex={i}
+                totalRings={layers}
+              />
+            );
+          })}
+        </svg>
+      </motion.div>
+    </motion.div>
+  );
+}
+
+function VSegment({
+  index,
+  normStart,
+  normEnd,
+  segH,
+  fullW,
+  color,
+  layers,
+  staggerDelay,
+  hovered,
+  dimmed,
+  renderPattern,
+  straight,
+  gradientStops,
+}: {
+  index: number;
+  normStart: number;
+  normEnd: number;
+  segH: number;
+  fullW: number;
+  color: string;
+  layers: number;
+  staggerDelay: number;
+  hovered: boolean;
+  dimmed: boolean;
+  renderPattern?: (id: string, color: string) => ReactNode;
+  straight: boolean;
+  gradientStops?: FunnelGradientStop[];
+}) {
+  const patternId = `funnel-v-pattern-${index}`;
+  const gradientId = `funnel-v-grad-${index}`;
+  const growProgress = useSpring(0, springConfig);
+  const entranceScaleY = useTransform(growProgress, [0, 1], [0, 1]);
+  const entranceScaleX = useTransform(growProgress, [0, 1], [0, 1]);
+  const dimOpacity = useSpring(1, hoverSpring);
+
+  useEffect(() => {
+    dimOpacity.set(dimmed ? 0.4 : 1);
+  }, [dimmed, dimOpacity]);
+
+  useEffect(() => {
+    const timeout = setTimeout(
+      () => growProgress.set(1),
+      index * staggerDelay * 1000
+    );
+    return () => clearTimeout(timeout);
+  }, [growProgress, index, staggerDelay]);
+
+  const rings = Array.from({ length: layers }, (_, l) => {
+    const scale = 1 - (l / layers) * 0.35;
+    const opacity = 0.18 + (l / (layers - 1 || 1)) * 0.65;
+    return {
+      d: vSegmentPath(normStart, normEnd, segH, fullW, scale, straight),
+      opacity,
+    };
+  });
+
+  return (
+    <motion.div
+      className="pointer-events-none relative shrink-0 overflow-visible"
+      style={{
+        width: fullW,
+        height: segH,
+        zIndex: hovered ? 10 : 1,
+        opacity: dimOpacity,
+      }}
+    >
+      <motion.div
+        className="absolute inset-0 overflow-visible"
+        style={{
+          scaleY: entranceScaleY,
+          scaleX: entranceScaleX,
+          transformOrigin: "center top",
+        }}
+      >
+        <svg
+          aria-hidden="true"
+          className="absolute inset-0 h-full w-full overflow-visible"
+          preserveAspectRatio="none"
+          role="presentation"
+          viewBox={`0 0 ${fullW} ${segH}`}
+        >
+          <defs>
+            {gradientStops && (
+              <linearGradient id={gradientId} x1="0" x2="0" y1="0" y2="1">
+                {gradientStops.map((stop) => (
+                  <stop
+                    key={`${stop.offset}-${stop.color}`}
+                    offset={
+                      typeof stop.offset === "number"
+                        ? `${stop.offset * 100}%`
+                        : stop.offset
+                    }
+                    stopColor={stop.color}
+                  />
+                ))}
+              </linearGradient>
+            )}
+            {renderPattern?.(patternId, color)}
+          </defs>
+          {rings.map((r, i) => {
+            const isInnermost = i === rings.length - 1;
+            let ringFill: string | undefined;
+            if (isInnermost && renderPattern) {
+              ringFill = `url(#${patternId})`;
+            } else if (isInnermost && gradientStops) {
+              ringFill = `url(#${gradientId})`;
+            }
+            return (
+              <VRing
+                color={color}
+                d={r.d}
+                fill={ringFill}
+                hovered={hovered}
+                key={`v-ring-${r.opacity.toFixed(2)}`}
+                opacity={r.opacity}
+                ringIndex={i}
+                totalRings={layers}
+              />
+            );
+          })}
+        </svg>
+      </motion.div>
+    </motion.div>
+  );
+}
+
+// ─── Label Overlay ───────────────────────────────────────────────────────────
+
+function SegmentLabel({
+  stage,
+  pct,
+  isHorizontal,
+  showValues,
+  showPercentage,
+  showLabels,
+  formatPercentage,
+  formatValue,
+  index,
+  staggerDelay,
+  layout = "spread",
+  orientation,
+  align = "center",
+}: {
+  stage: FunnelStage;
+  pct: number;
+  isHorizontal: boolean;
+  showValues: boolean;
+  showPercentage: boolean;
+  showLabels: boolean;
+  formatPercentage: (p: number) => string;
+  formatValue: (v: number) => string;
+  index: number;
+  staggerDelay: number;
+  layout?: "spread" | "grouped";
+  orientation?: "vertical" | "horizontal";
+  align?: "center" | "start" | "end";
+}) {
+  const display = stage.displayValue ?? formatValue(stage.value);
+
+  const valueEl = showValues && (
+    <span className="whitespace-nowrap font-semibold text-foreground text-sm">
+      {display}
+    </span>
+  );
+  const pctEl = showPercentage && (
+    <span className="rounded-full bg-foreground px-3 py-1 font-bold text-background text-xs shadow-sm">
+      {formatPercentage(pct)}
+    </span>
+  );
+  const labelEl = showLabels && (
+    <span className="whitespace-nowrap font-medium text-muted-foreground text-xs">
+      {stage.label}
+    </span>
+  );
+
+  if (layout === "spread") {
+    return (
+      <motion.div
+        animate={{ opacity: 1 }}
+        className={cn(
+          "absolute inset-0 flex",
+          isHorizontal ? "flex-col items-center" : "flex-row items-center"
+        )}
+        initial={{ opacity: 0 }}
+        transition={{
+          delay: index * staggerDelay + 0.25,
+          duration: 0.35,
+          ease: "easeOut",
+        }}
+      >
+        {isHorizontal ? (
+          <>
+            <div className="flex h-[16%] items-end justify-center pb-1">
+              {valueEl}
+            </div>
+            <div className="flex flex-1 items-center justify-center">
+              {pctEl}
+            </div>
+            <div className="flex h-[16%] items-start justify-center pt-1">
+              {labelEl}
+            </div>
+          </>
+        ) : (
+          <>
+            <div className="flex w-[22%] items-center justify-end pr-2">
+              {valueEl}
+            </div>
+            <div className="flex flex-1 items-center justify-center">
+              {pctEl}
+            </div>
+            <div className="flex w-[22%] items-center justify-start pl-2">
+              {labelEl}
+            </div>
+          </>
+        )}
+      </motion.div>
+    );
+  }
+
+  // Grouped layout
+  const resolvedOrientation =
+    orientation ?? (isHorizontal ? "vertical" : "horizontal");
+  const isVerticalStack = resolvedOrientation === "vertical";
+
+  const justifyMap = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+  } as const;
+  const itemsMap = {
+    start: "items-start",
+    center: "items-center",
+    end: "items-end",
+  } as const;
+
+  return (
+    <motion.div
+      animate={{ opacity: 1 }}
+      className={cn(
+        "absolute inset-0 flex",
+        isHorizontal
+          ? cn("flex-col items-center", justifyMap[align])
+          : cn("flex-row items-center", justifyMap[align])
+      )}
+      initial={{ opacity: 0 }}
+      style={{
+        padding: isHorizontal ? "8% 0" : "0 8%",
+      }}
+      transition={{
+        delay: index * staggerDelay + 0.25,
+        duration: 0.35,
+        ease: "easeOut",
+      }}
+    >
+      <div
+        className={cn(
+          "flex gap-1.5",
+          isVerticalStack
+            ? cn("flex-col", itemsMap[isHorizontal ? "center" : align])
+            : cn("flex-row", itemsMap.center)
+        )}
+      >
+        {valueEl}
+        {pctEl}
+        {labelEl}
+      </div>
+    </motion.div>
+  );
+}
+
+// ─── FunnelChart ─────────────────────────────────────────────────────────────
+
+export function FunnelChart({
+  data,
+  orientation = "horizontal",
+  color = "var(--chart-1)",
+  layers = 3,
+  className,
+  style,
+  showPercentage = true,
+  showValues = true,
+  showLabels = true,
+  hoveredIndex: hoveredIndexProp,
+  onHoverChange,
+  formatPercentage = fmtPct,
+  formatValue = fmtVal,
+  staggerDelay = 0.12,
+  gap = 4,
+  renderPattern,
+  edges = "curved",
+  labelLayout = "spread",
+  labelOrientation,
+  labelAlign = "center",
+  grid: gridProp = false,
+}: FunnelChartProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [sz, setSz] = useState({ w: 0, h: 0 });
+  const [internalHoveredIndex, setInternalHoveredIndex] = useState<
+    number | null
+  >(null);
+
+  const isControlled = hoveredIndexProp !== undefined;
+  const hoveredIndex = isControlled ? hoveredIndexProp : internalHoveredIndex;
+  const setHoveredIndex = useCallback(
+    (index: number | null) => {
+      if (isControlled) {
+        onHoverChange?.(index);
+      } else {
+        setInternalHoveredIndex(index);
+      }
+    },
+    [isControlled, onHoverChange]
+  );
+
+  const measure = useCallback(() => {
+    if (!ref.current) return;
+    const { width: w, height: h } = ref.current.getBoundingClientRect();
+    if (w > 0 && h > 0) setSz({ w, h });
+  }, []);
+
+  useEffect(() => {
+    measure();
+    const ro = new ResizeObserver(measure);
+    if (ref.current) ro.observe(ref.current);
+    return () => ro.disconnect();
+  }, [measure]);
+
+  if (!data.length) return null;
+
+  const first = data[0];
+  if (!first) return null;
+
+  const max = first.value;
+  const n = data.length;
+  const norms = data.map((d) => d.value / max);
+  const horiz = orientation === "horizontal";
+  const { w: W, h: H } = sz;
+
+  const totalGap = gap * (n - 1);
+  const segW = (W - (horiz ? totalGap : 0)) / n;
+  const segH = (H - (horiz ? 0 : totalGap)) / n;
+
+  // Grid config
+  const gridEnabled = gridProp !== false;
+  const gridCfg = typeof gridProp === "object" ? gridProp : {};
+  const showBands = gridEnabled && (gridCfg.bands ?? true);
+  const bandColor = gridCfg.bandColor ?? "var(--color-muted)";
+  const showGridLines = gridEnabled && (gridCfg.lines ?? true);
+  const gridLineColor = gridCfg.lineColor ?? "var(--chart-grid)";
+  const gridLineOpacity = gridCfg.lineOpacity ?? 1;
+  const gridLineWidth = gridCfg.lineWidth ?? 1;
+
+  return (
+    <div
+      className={cn("relative w-full select-none overflow-visible", className)}
+      ref={ref}
+      style={{
+        aspectRatio: horiz ? "2.2 / 1" : "1 / 1.8",
+        ...style,
+      }}
+    >
+      {W > 0 && H > 0 && (
+        <>
+          {/* Grid background bands */}
+          {gridEnabled && (
+            <svg
+              aria-hidden="true"
+              className="pointer-events-none absolute inset-0 h-full w-full"
+              preserveAspectRatio="none"
+              role="presentation"
+              viewBox={`0 0 ${W} ${H}`}
+            >
+              {showBands &&
+                data.map((stage, i) => {
+                  if (i % 2 !== 0) return null;
+                  if (horiz) {
+                    const x = (segW + gap) * i;
+                    return (
+                      <rect
+                        fill={bandColor}
+                        height={H}
+                        key={`band-${stage.label}`}
+                        width={segW}
+                        x={x}
+                        y={0}
+                      />
+                    );
+                  }
+                  const y = (segH + gap) * i;
+                  return (
+                    <rect
+                      fill={bandColor}
+                      height={segH}
+                      key={`band-${stage.label}`}
+                      width={W}
+                      x={0}
+                      y={y}
+                    />
+                  );
+                })}
+            </svg>
+          )}
+
+          {/* Segments */}
+          <div
+            className={cn(
+              "absolute inset-0 flex overflow-visible",
+              horiz ? "flex-row" : "flex-col"
+            )}
+            style={{ gap }}
+          >
+            {data.map((stage, i) => {
+              const normStart = norms[i] ?? 0;
+              const normEnd = norms[Math.min(i + 1, n - 1)] ?? 0;
+              const firstStop = stage.gradient?.[0];
+              const segColor = firstStop
+                ? firstStop.color
+                : (stage.color ?? color);
+
+              return horiz ? (
+                <HSegment
+                  color={segColor}
+                  dimmed={hoveredIndex !== null && hoveredIndex !== i}
+                  fullH={H}
+                  gradientStops={stage.gradient}
+                  hovered={hoveredIndex === i}
+                  index={i}
+                  key={stage.label}
+                  layers={layers}
+                  normEnd={normEnd}
+                  normStart={normStart}
+                  renderPattern={renderPattern}
+                  segW={segW}
+                  staggerDelay={staggerDelay}
+                  straight={edges === "straight"}
+                />
+              ) : (
+                <VSegment
+                  color={segColor}
+                  dimmed={hoveredIndex !== null && hoveredIndex !== i}
+                  fullW={W}
+                  gradientStops={stage.gradient}
+                  hovered={hoveredIndex === i}
+                  index={i}
+                  key={stage.label}
+                  layers={layers}
+                  normEnd={normEnd}
+                  normStart={normStart}
+                  renderPattern={renderPattern}
+                  segH={segH}
+                  staggerDelay={staggerDelay}
+                  straight={edges === "straight"}
+                />
+              );
+            })}
+          </div>
+
+          {/* Grid lines */}
+          {gridEnabled && showGridLines && (
+            <svg
+              aria-hidden="true"
+              className="pointer-events-none absolute inset-0 h-full w-full"
+              preserveAspectRatio="none"
+              role="presentation"
+              viewBox={`0 0 ${W} ${H}`}
+            >
+              {Array.from({ length: n - 1 }, (_, i) => {
+                const idx = i + 1;
+                if (horiz) {
+                  const x = segW * idx + gap * i + gap / 2;
+                  return (
+                    <line
+                      key={`grid-${idx}`}
+                      stroke={gridLineColor}
+                      strokeOpacity={gridLineOpacity}
+                      strokeWidth={gridLineWidth}
+                      x1={x}
+                      x2={x}
+                      y1={0}
+                      y2={H}
+                    />
+                  );
+                }
+                const y = segH * idx + gap * i + gap / 2;
+                return (
+                  <line
+                    key={`grid-${idx}`}
+                    stroke={gridLineColor}
+                    strokeOpacity={gridLineOpacity}
+                    strokeWidth={gridLineWidth}
+                    x1={0}
+                    x2={W}
+                    y1={y}
+                    y2={y}
+                  />
+                );
+              })}
+            </svg>
+          )}
+
+          {/* Label overlays — hover triggers */}
+          {data.map((stage, i) => {
+            const pct = (stage.value / max) * 100;
+            const posStyle: CSSProperties = horiz
+              ? { left: (segW + gap) * i, width: segW, top: 0, height: H }
+              : { top: (segH + gap) * i, height: segH, left: 0, width: W };
+            const isDimmed = hoveredIndex !== null && hoveredIndex !== i;
+
+            return (
+              <motion.div
+                animate={{ opacity: isDimmed ? 0.4 : 1 }}
+                className="absolute cursor-pointer"
+                key={`lbl-${stage.label}`}
+                onMouseEnter={() => setHoveredIndex(i)}
+                onMouseLeave={() => setHoveredIndex(null)}
+                style={{ ...posStyle, zIndex: 20 }}
+                transition={{ type: "spring", stiffness: 300, damping: 24 }}
+              >
+                <SegmentLabel
+                  align={labelAlign}
+                  formatPercentage={formatPercentage}
+                  formatValue={formatValue}
+                  index={i}
+                  isHorizontal={horiz}
+                  layout={labelLayout}
+                  orientation={labelOrientation}
+                  pct={pct}
+                  showLabels={showLabels}
+                  showPercentage={showPercentage}
+                  showValues={showValues}
+                  stage={stage}
+                  staggerDelay={staggerDelay}
+                />
+              </motion.div>
+            );
+          })}
+        </>
+      )}
+    </div>
+  );
+}
+
+FunnelChart.displayName = "FunnelChart";
+
+export default FunnelChart;
diff --git a/components/marketing/mockups/funnel-mockup.tsx b/components/marketing/mockups/funnel-mockup.tsx
new file mode 100644
index 0000000..169449e
--- /dev/null
+++ b/components/marketing/mockups/funnel-mockup.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { FunnelChart } from './funnel-chart'
+
+const funnelData = [
+  { label: 'Homepage', value: 1240 },
+  { label: 'Pricing', value: 438 },
+  { label: 'Signup', value: 87 },
+]
+
+export function FunnelMockup() {
+  return (
+    <div className="relative w-full max-w-[600px] mx-auto">
+      <div className="rounded-xl border border-white/[0.08] bg-neutral-900/80 px-10 py-6 shadow-2xl">
+        <h3 className="text-sm font-medium text-white mb-4">Funnel Visualization</h3>
+        <FunnelChart
+          data={funnelData}
+          orientation="vertical"
+          color="var(--chart-1, #FD5E0F)"
+          layers={3}
+          className="mx-auto"
+        />
+        <div className="flex items-center justify-between mt-4 pt-3 border-t border-neutral-800 text-[10px] text-neutral-500">
+          <span>Overall conversion: 7%</span>
+          <span>7-day window</span>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/components/marketing/mockups/modular-script-mockup.tsx b/components/marketing/mockups/modular-script-mockup.tsx
new file mode 100644
index 0000000..4c8425a
--- /dev/null
+++ b/components/marketing/mockups/modular-script-mockup.tsx
@@ -0,0 +1,119 @@
+'use client'
+
+function Toggle({ on = true }: { on?: boolean }) {
+  return (
+    <div
+      className={`relative w-9 h-5 rounded-full shrink-0 transition-colors ${
+        on ? 'bg-brand-orange' : 'bg-neutral-700'
+      }`}
+    >
+      <div
+        className={`absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-transform ${
+          on ? 'translate-x-[18px]' : 'translate-x-0.5'
+        }`}
+      />
+    </div>
+  )
+}
+
+export function ModularScriptMockup() {
+  return (
+    <div className="relative w-full max-w-[460px] mx-auto">
+      <div className="rounded-xl border border-white/[0.08] bg-neutral-900/90 shadow-2xl overflow-hidden px-6 py-5 space-y-5">
+        {/* Features heading */}
+        <h4 className="text-sm font-bold text-white">Features</h4>
+
+        {/* Feature toggles — 2 column grid */}
+        <div className="grid grid-cols-2 gap-2.5">
+          {[
+            { name: 'Scroll depth', desc: 'Track 25 / 50 / 75 / 100%', on: true },
+            { name: '404 detection', desc: 'Auto-detect error pages', on: true },
+            { name: 'Outbound links', desc: 'Track external link clicks', on: true },
+            { name: 'File downloads', desc: 'Track PDF, ZIP, and more', on: true },
+          ].map((feature) => (
+            <div
+              key={feature.name}
+              className="rounded-lg border border-neutral-800 bg-neutral-800/40 px-3.5 py-3 flex items-center justify-between gap-2"
+            >
+              <div className="min-w-0">
+                <p className="text-xs font-semibold text-white leading-tight">{feature.name}</p>
+                <p className="text-[10px] text-neutral-500 leading-tight mt-0.5 truncate">{feature.desc}</p>
+              </div>
+              <Toggle on={feature.on} />
+            </div>
+          ))}
+        </div>
+
+        {/* Frustration tracking — full width, disabled */}
+        <div className="rounded-lg border border-dashed border-neutral-700 bg-neutral-800/20 px-3.5 py-3 flex items-center justify-between gap-2">
+          <div>
+            <p className="text-xs font-semibold text-white leading-tight">Frustration tracking</p>
+            <p className="text-[10px] text-neutral-500 leading-tight mt-0.5">Rage clicks &amp; dead clicks &middot; Loads separate add-on script</p>
+          </div>
+          <Toggle on={false} />
+        </div>
+
+        {/* Visitor identity */}
+        <div>
+          <h4 className="text-sm font-bold text-white mb-1">Visitor identity</h4>
+          <p className="text-[10px] text-neutral-500 mb-3 leading-relaxed">
+            How returning visitors are recognized. Stricter settings increase privacy but may raise unique visitor counts.
+          </p>
+          <div className="flex items-center gap-3">
+            <div>
+              <p className="text-[10px] text-neutral-400 mb-1">Recognition</p>
+              <div className="flex items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-800/60 px-3 py-1.5 text-xs text-white">
+                Across all tabs
+                <svg className="w-3 h-3 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
+              </div>
+            </div>
+            <div>
+              <p className="text-[10px] text-neutral-400 mb-1">Reset after</p>
+              <div className="flex items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-800/60 px-3 py-1.5 text-xs text-white">
+                24 hours
+                <svg className="w-3 h-3 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Setup guide */}
+        <div>
+          <div className="flex items-center justify-between mb-2.5">
+            <h4 className="text-sm font-bold text-white">Setup guide</h4>
+            <span className="text-[10px] text-neutral-500">All integrations &rarr;</span>
+          </div>
+          <div className="flex flex-wrap gap-1.5">
+            {[
+              { name: 'Next.js', icon: <svg viewBox="0 0 24 24" className="w-3.5 h-3.5 fill-current invert"><path d="M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z" /></svg> },
+              { name: 'React', icon: <svg viewBox="0 0 24 24" className="w-3.5 h-3.5" style={{ fill: '#61DAFB' }}><path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.31 0-.592.068-.846.182a1.993 1.993 0 0 0-.909.916C4.78 3.522 5.1 5.18 6.138 7.11 4.257 8.17 3 9.733 3 11.1c0 2.176 2.714 3.757 6.528 4.025-.172.583-.264 1.197-.264 1.833 0 3.235 2.33 5.862 5.204 5.862.876 0 1.699-.249 2.404-.68l-.766-1.289a3.268 3.268 0 0 1-1.638.44c-1.834 0-3.318-1.786-3.318-3.99 0-.42.05-.828.143-1.218 3.61-.179 6.373-1.664 6.573-3.842.685 1.56 1.057 3.024 1.057 4.168 0 .756-.165 1.344-.5 1.708l1.195 1.164c.694-.74 1.048-1.732 1.048-2.872 0-1.504-.536-3.346-1.487-5.294C20.836 8.794 22 7.482 22 5.862c0-2.393-2.272-4.548-5.122-4.548zM7.632 3.19c.395-.193.893-.29 1.478-.29.873 0 1.928.402 3.083 1.136-1.072 1.096-2.06 2.37-2.907 3.765a21.872 21.872 0 0 0-2.36.488c-.888-1.585-1.253-2.978-1.087-3.84a.91.91 0 0 1 .282-.517c.14-.132.308-.204.511-.204v-.538zm12.736 2.672c0 1.076-.897 2.142-2.347 3.007a22.076 22.076 0 0 0-2.377-3.3c1.225-.857 2.333-1.36 3.228-1.36.268 0 .502.047.706.135.288.124.504.337.605.612.076.207.185.525.185.906zM12 15.9c-2.14 0-4.028-.362-5.49-.943a9.09 9.09 0 0 1-.53-.235C4.949 14.068 4.2 13.27 4.2 12.3c0-1.14 1.268-2.498 3.3-3.39.287.81.626 1.647 1.015 2.494a21.27 21.27 0 0 0 1.534 2.682 20.258 20.258 0 0 0 3.902.057 21.27 21.27 0 0 0 1.535-2.682c.388-.847.727-1.684 1.015-2.494 2.032.892 3.3 2.25 3.3 3.39 0 .97-.75 1.769-1.78 2.422a9.09 9.09 0 0 1-.53.235c-1.462.581-3.35.943-5.49.943z" /></svg> },
+              { name: 'Vue.js', icon: <svg viewBox="0 0 24 24" className="w-3.5 h-3.5" style={{ fill: '#4FC08D' }}><path d="M24,1.61H14.06L12,5.16,9.94,1.61H0L12,22.39ZM12,14.08,5.16,2.23H9.59L12,6.41l2.41-4.18h4.43Z" /></svg> },
+              { name: 'Angular', icon: <svg viewBox="0 0 24 24" className="w-3.5 h-3.5 fill-current invert"><path d="M16.712 17.711H7.288l-1.204 2.916L12 24l5.916-3.373-1.204-2.916ZM14.692 0l7.832 16.855.814-12.856L14.692 0ZM9.308 0 .662 3.999l.814 12.856L9.308 0Zm-.405 13.93h6.198L12 6.396 8.903 13.93Z" /></svg> },
+              { name: 'Svelte', icon: <svg viewBox="0 0 24 24" className="w-3.5 h-3.5" style={{ fill: '#FF3E00' }}><path d="M20.68 3.17a7.3 7.3 0 0 0-9.8-2.1L6.17 4.38A5.81 5.81 0 0 0 3.5 8.29a6 6 0 0 0 .62 3.77 5.7 5.7 0 0 0-.86 2.13 6.14 6.14 0 0 0 1.06 4.64 7.3 7.3 0 0 0 9.8 2.1l4.71-3.31a5.81 5.81 0 0 0 2.67-3.91 6 6 0 0 0-.62-3.77 5.7 5.7 0 0 0 .86-2.13 6.14 6.14 0 0 0-1.06-4.64z" /></svg> },
+              { name: 'Nuxt', icon: <svg viewBox="0 0 24 24" className="w-3.5 h-3.5" style={{ fill: '#00DC82' }}><path d="M13.464 20.48H2.182a1.49 1.49 0 0 1-1.288-.746 1.49 1.49 0 0 1 0-1.49L7.537 6.584a1.49 1.49 0 0 1 2.576 0l1.635 2.835.002.004 3.005 5.21a.4.4 0 0 1-.345.597H8.862a.4.4 0 0 0-.346.598l2.158 3.749a.4.4 0 0 0 .693 0l5.78-10.028a.4.4 0 0 1 .693 0l6.287 10.903a.4.4 0 0 1-.347.598h-3.49" /></svg> },
+              { name: 'Remix', icon: <svg viewBox="0 0 24 24" className="w-3.5 h-3.5 fill-current invert"><path d="M21.511 18.508c.216 2.773.216 4.073.216 5.492H15.31c0-.309.006-.592.011-.878.018-.892.036-1.821-.109-3.698-.19-2.747-1.374-3.358-3.55-3.358H1.574v-5h10.396c2.748 0 4.122-.835 4.122-3.049 0-1.946-1.374-3.125-4.122-3.125H1.573V0h11.541c6.221 0 9.313 2.938 9.313 7.632 0 3.511-2.176 5.8-5.114 6.182 2.48.497 3.93 1.909 4.198 4.694ZM1.573 24v-3.727h6.784c1.133 0 1.379.84 1.379 1.342V24Z" /></svg> },
+              { name: 'Astro', icon: <svg viewBox="0 0 24 24" className="w-3.5 h-3.5" style={{ fill: '#BC52EE' }}><path d="M8.358 20.162c-1.186-1.07-1.532-3.316-1.038-4.944.71 1.12 1.74 1.846 2.9 2.13 1.79.438 3.638.423 5.39-.152.198-.065.384-.156.6-.246-.032.846-.241 1.62-.72 2.313-.717 1.04-1.722 1.627-2.945 1.795-1.414.194-2.697-.126-3.886-1.048-.107-.088-.2-.191-.3-.29v.442Z" /></svg> },
+            ].map((fw) => (
+              <span
+                key={fw.name}
+                className="flex items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-800/60 px-2.5 py-1.5 text-[10px] text-neutral-300"
+              >
+                {fw.icon}
+                {fw.name}
+              </span>
+            ))}
+          </div>
+        </div>
+
+        {/* Verified status */}
+        <div className="flex items-center gap-2 pt-1">
+          <span className="flex items-center gap-1.5 rounded-lg border border-green-500/20 bg-green-500/5 px-2.5 py-1 text-[10px] text-green-400 font-medium">
+            <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg>
+            Verified
+          </span>
+          <span className="text-[10px] text-neutral-500">Your site is sending data correctly.</span>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/components/marketing/mockups/pulse-features-carousel.tsx b/components/marketing/mockups/pulse-features-carousel.tsx
new file mode 100644
index 0000000..be2def2
--- /dev/null
+++ b/components/marketing/mockups/pulse-features-carousel.tsx
@@ -0,0 +1,544 @@
+'use client'
+
+import { useState, useEffect, useCallback, useMemo, type CSSProperties } from 'react'
+import { createMap } from 'svg-dotted-map'
+import {
+  Files,
+  ArrowSquareOut,
+  MapPin,
+  Monitor,
+  Clock,
+  Globe,
+  GoogleLogo,
+  XLogo,
+  GithubLogo,
+  YoutubeLogo,
+  RedditLogo,
+  Link,
+} from '@phosphor-icons/react'
+
+// ─── Dotted Map Setup (module-level, computed once) ──────────────────────────
+
+const MAP_WIDTH = 150
+const MAP_HEIGHT = 68
+const DOT_RADIUS = 0.25
+
+const { points: MAP_POINTS, addMarkers } = createMap({
+  width: MAP_WIDTH,
+  height: MAP_HEIGHT,
+  mapSamples: 8000,
+})
+
+const _stagger = (() => {
+  const sorted = [...MAP_POINTS].sort((a, b) => a.y - b.y || a.x - b.x)
+  const rowMap = new Map<number, number>()
+  let step = 0
+  let prevY = Number.NaN
+  let prevXInRow = Number.NaN
+
+  for (const p of sorted) {
+    if (p.y !== prevY) {
+      prevY = p.y
+      prevXInRow = Number.NaN
+      if (!rowMap.has(p.y)) rowMap.set(p.y, rowMap.size)
+    }
+    if (!Number.isNaN(prevXInRow)) {
+      const delta = p.x - prevXInRow
+      if (delta > 0) step = step === 0 ? delta : Math.min(step, delta)
+    }
+    prevXInRow = p.x
+  }
+
+  return { xStep: step || 1, yToRowIndex: rowMap }
+})()
+
+const BASE_DOTS_PATH = (() => {
+  const r = DOT_RADIUS
+  const d = r * 2
+  const parts: string[] = []
+  for (const point of MAP_POINTS) {
+    const rowIndex = _stagger.yToRowIndex.get(point.y) ?? 0
+    const offsetX = rowIndex % 2 === 1 ? _stagger.xStep / 2 : 0
+    const cx = point.x + offsetX
+    const cy = point.y
+    parts.push(`M${cx - r},${cy}a${r},${r} 0 1,0 ${d},0a${r},${r} 0 1,0 ${-d},0`)
+  }
+  return parts.join('')
+})()
+
+// Country centroids for marker placement (subset)
+const COUNTRY_CENTROIDS: Record<string, { lat: number; lng: number }> = {
+  CH: { lat: 46.8, lng: 8.2 },
+  DE: { lat: 51.2, lng: 10.4 },
+  US: { lat: 37.1, lng: -95.7 },
+  GB: { lat: 55.4, lng: -3.4 },
+  FR: { lat: 46.2, lng: 2.2 },
+  IN: { lat: 20.6, lng: 78.9 },
+  JP: { lat: 36.2, lng: 138.3 },
+  AU: { lat: -25.3, lng: 133.8 },
+  BR: { lat: -14.2, lng: -51.9 },
+  CA: { lat: 56.1, lng: -106.3 },
+}
+
+// ─── Bar Row (shared by Pages, Referrers, Technology) ────────────────────────
+
+function BarRow({
+  label,
+  value,
+  maxValue,
+  icon,
+}: {
+  label: string
+  value: number
+  maxValue: number
+  icon?: React.ReactNode
+}) {
+  const pct = (value / maxValue) * 100
+  return (
+    <div className="flex items-center gap-3">
+      <div className="relative flex-1 h-[30px] flex items-center">
+        <div
+          className="absolute inset-y-0 left-0 rounded-md bg-brand-orange/25"
+          style={{ width: `${pct}%` }}
+        />
+        <div className="relative z-10 flex items-center gap-2 pl-2.5">
+          {icon && <span className="w-4 h-4 flex items-center justify-center shrink-0">{icon}</span>}
+          <span className="text-xs text-white font-medium truncate">{label}</span>
+        </div>
+      </div>
+      <span className="text-xs text-neutral-400 tabular-nums w-8 text-right shrink-0">{value}</span>
+    </div>
+  )
+}
+
+// ─── Card 1: Pages ───────────────────────────────────────────────────────────
+
+function PagesCard() {
+  const data = [
+    { label: '/', value: 142 },
+    { label: '/products/drop', value: 68 },
+    { label: '/pricing', value: 31 },
+    { label: '/blog', value: 24 },
+    { label: '/about', value: 12 },
+    { label: '/products/pulse', value: 9 },
+  ]
+  const max = data[0].value
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Files className="w-4 h-4 text-neutral-400" weight="bold" />
+          <h4 className="text-sm font-bold text-white">Pages</h4>
+        </div>
+        <div className="flex items-center gap-3 text-[10px]">
+          <span className="text-white border-b border-brand-orange pb-0.5">Top Pages</span>
+          <span className="text-neutral-500">Entry</span>
+          <span className="text-neutral-500">Exit</span>
+        </div>
+      </div>
+      <div className="space-y-1.5">
+        {data.map((d) => (
+          <BarRow key={d.label} label={d.label} value={d.value} maxValue={max} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// ─── Card 2: Referrers ───────────────────────────────────────────────────────
+
+function getReferrerIcon(name: string, favicon?: string) {
+  // Use Google Favicon API for sites with domains (like real Pulse)
+  if (favicon) {
+    return (
+      // eslint-disable-next-line @next/next/no-img-element
+      <img src={favicon} alt="" width={16} height={16} className="w-4 h-4 rounded object-contain" />
+    )
+  }
+  const lower = name.toLowerCase()
+  if (lower === 'direct') return <Globe className="w-4 h-4 text-neutral-400" />
+  if (lower.includes('google')) return <GoogleLogo className="w-4 h-4 text-blue-500" />
+  if (lower.includes('twitter') || lower.includes('x')) return <XLogo className="w-4 h-4 text-neutral-200" />
+  if (lower.includes('github')) return <GithubLogo className="w-4 h-4 text-neutral-200" />
+  if (lower.includes('youtube')) return <YoutubeLogo className="w-4 h-4 text-red-500" />
+  if (lower.includes('reddit')) return <RedditLogo className="w-4 h-4 text-orange-500" />
+  if (lower.includes('hacker') || lower.includes('hn')) return <Link className="w-4 h-4 text-orange-400" />
+  return <Globe className="w-4 h-4 text-neutral-400" />
+}
+
+const FAVICON_URL = 'https://www.google.com/s2/favicons'
+
+function ReferrersCard() {
+  const data = [
+    { label: 'Direct', value: 186 },
+    { label: 'Google', value: 94, domain: 'google.com' },
+    { label: 'Twitter / X', value: 47 },
+    { label: 'GitHub', value: 32, domain: 'github.com' },
+    { label: 'Hacker News', value: 18, domain: 'news.ycombinator.com' },
+    { label: 'Reddit', value: 11, domain: 'reddit.com' },
+  ]
+  const max = data[0].value
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        <ArrowSquareOut className="w-4 h-4 text-neutral-400" weight="bold" />
+        <h4 className="text-sm font-bold text-white">Referrers</h4>
+      </div>
+      <div className="space-y-1.5">
+        {data.map((d) => (
+          <BarRow
+            key={d.label}
+            label={d.label}
+            value={d.value}
+            maxValue={max}
+            icon={getReferrerIcon(
+              d.label,
+              'domain' in d ? `${FAVICON_URL}?domain=${d.domain}&sz=32` : undefined
+            )}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// ─── Card 3: Locations (Real Dotted Map) ─────────────────────────────────────
+
+function LocationsCard() {
+  const mockData = [
+    { country: 'CH', pageviews: 320 },
+    { country: 'US', pageviews: 186 },
+    { country: 'DE', pageviews: 142 },
+    { country: 'GB', pageviews: 78 },
+    { country: 'FR', pageviews: 54 },
+    { country: 'IN', pageviews: 38 },
+    { country: 'JP', pageviews: 22 },
+    { country: 'AU', pageviews: 16 },
+    { country: 'BR', pageviews: 12 },
+    { country: 'CA', pageviews: 28 },
+  ]
+
+  const markerData = useMemo(() => {
+    const max = Math.max(...mockData.map((d) => d.pageviews))
+    return mockData
+      .filter((d) => COUNTRY_CENTROIDS[d.country])
+      .map((d) => ({
+        lat: COUNTRY_CENTROIDS[d.country].lat,
+        lng: COUNTRY_CENTROIDS[d.country].lng,
+        size: 0.4 + (d.pageviews / max) * 0.8,
+      }))
+  }, [])
+
+  const processedMarkers = useMemo(() => addMarkers(markerData), [markerData])
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <MapPin className="w-4 h-4 text-neutral-400" weight="bold" />
+          <h4 className="text-sm font-bold text-white">Locations</h4>
+        </div>
+        <div className="flex items-center gap-3 text-[10px]">
+          <span className="text-white border-b border-brand-orange pb-0.5">Map</span>
+          <span className="text-neutral-500">Countries</span>
+          <span className="text-neutral-500">Regions</span>
+          <span className="text-neutral-500">Cities</span>
+        </div>
+      </div>
+      <div className="relative w-full aspect-[2.2/1] flex items-center justify-center">
+        <svg
+          viewBox={`0 0 ${MAP_WIDTH} ${MAP_HEIGHT}`}
+          className="text-neutral-500 w-full h-full"
+        >
+          <defs>
+            <filter id="mockup-marker-glow" x="-50%" y="-50%" width="200%" height="200%">
+              <feGaussianBlur in="SourceGraphic" stdDeviation="0.8" result="blur" />
+              <feColorMatrix
+                in="blur"
+                type="matrix"
+                values="1 0 0 0 0  0 0.4 0 0 0  0 0 0 0 0  0 0 0 0.6 0"
+              />
+              <feMerge>
+                <feMergeNode />
+                <feMergeNode in="SourceGraphic" />
+              </feMerge>
+            </filter>
+          </defs>
+          <path d={BASE_DOTS_PATH} fill="currentColor" />
+          {processedMarkers.map((marker, index) => {
+            const rowIndex = _stagger.yToRowIndex.get(marker.y) ?? 0
+            const offsetX = rowIndex % 2 === 1 ? _stagger.xStep / 2 : 0
+            const cx = marker.x + offsetX
+            const cy = marker.y
+            return (
+              <circle
+                key={`marker-${index}`}
+                cx={cx}
+                cy={cy}
+                r={marker.size ?? DOT_RADIUS}
+                fill="#FD5E0F"
+                filter="url(#mockup-marker-glow)"
+              />
+            )
+          })}
+        </svg>
+      </div>
+    </div>
+  )
+}
+
+// ─── Card 4: Technology ──────────────────────────────────────────────────────
+
+const BROWSER_ICONS: Record<string, string> = {
+  Chrome: '/icons/browsers/chrome.svg',
+  Safari: '/icons/browsers/safari.svg',
+  Firefox: '/icons/browsers/firefox.svg',
+  Edge: '/icons/browsers/edge.svg',
+  Arc: '/icons/browsers/arc.png',
+  Opera: '/icons/browsers/opera.svg',
+}
+
+function TechnologyCard() {
+  const data = [
+    { label: 'Chrome', value: 412 },
+    { label: 'Safari', value: 189 },
+    { label: 'Firefox', value: 76 },
+    { label: 'Edge', value: 34 },
+    { label: 'Arc', value: 18 },
+    { label: 'Opera', value: 7 },
+  ]
+  const max = data[0].value
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Monitor className="w-4 h-4 text-neutral-400" weight="bold" />
+          <h4 className="text-sm font-bold text-white">Technology</h4>
+        </div>
+        <div className="flex items-center gap-3 text-[10px]">
+          <span className="text-white border-b border-brand-orange pb-0.5">Browsers</span>
+          <span className="text-neutral-500">OS</span>
+          <span className="text-neutral-500">Devices</span>
+          <span className="text-neutral-500">Screens</span>
+        </div>
+      </div>
+      <div className="space-y-1.5">
+        {data.map((d) => (
+          <BarRow
+            key={d.label}
+            label={d.label}
+            value={d.value}
+            maxValue={max}
+            icon={
+              BROWSER_ICONS[d.label] ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img src={BROWSER_ICONS[d.label]} alt={d.label} width={16} height={16} className="w-4 h-4" />
+              ) : undefined
+            }
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// ─── Card 5: Peak Hours (Exact Pulse Heatmap) ────────────────────────────────
+
+const DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+const BUCKETS = 12
+const BUCKET_LABELS: Record<number, string> = { 0: '00:00', 3: '06:00', 6: '12:00', 9: '18:00' }
+
+const HIGHLIGHT_COLORS = [
+  'transparent',
+  'rgba(253,94,15,0.15)',
+  'rgba(253,94,15,0.35)',
+  'rgba(253,94,15,0.60)',
+  'rgba(253,94,15,0.82)',
+  '#FD5E0F',
+]
+
+// Pre-computed mock heatmap grid[day][bucket] with raw values
+const MOCK_GRID = [
+  [0, 0, 12, 28, 32, 45, 52, 48, 35, 24, 8, 0],   // Mon
+  [0, 0, 8, 22, 38, 50, 58, 46, 40, 28, 12, 4],    // Tue
+  [0, 0, 6, 18, 26, 42, 48, 56, 38, 22, 10, 0],    // Wed
+  [0, 4, 10, 24, 42, 62, 86, 68, 44, 26, 12, 6],   // Thu
+  [0, 6, 16, 34, 44, 58, 64, 48, 42, 28, 14, 0],   // Fri
+  [4, 6, 8, 18, 22, 24, 26, 22, 32, 36, 20, 8],    // Sat
+  [6, 4, 6, 10, 16, 20, 22, 14, 18, 24, 16, 8],    // Sun
+]
+
+function getHighlightColor(value: number, max: number): string {
+  if (value === 0) return HIGHLIGHT_COLORS[0]
+  if (value === max) return HIGHLIGHT_COLORS[5]
+  const ratio = value / max
+  if (ratio <= 0.25) return HIGHLIGHT_COLORS[1]
+  if (ratio <= 0.50) return HIGHLIGHT_COLORS[2]
+  if (ratio <= 0.75) return HIGHLIGHT_COLORS[3]
+  return HIGHLIGHT_COLORS[4]
+}
+
+function PeakHoursCard() {
+  const max = Math.max(...MOCK_GRID.flat())
+
+  // Find best time
+  let bestDay = 0
+  let bestBucket = 0
+  let bestVal = 0
+  for (let d = 0; d < 7; d++) {
+    for (let b = 0; b < BUCKETS; b++) {
+      if (MOCK_GRID[d][b] > bestVal) {
+        bestVal = MOCK_GRID[d][b]
+        bestDay = d
+        bestBucket = b
+      }
+    }
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between mb-1">
+        <div className="flex items-center gap-2">
+          <Clock className="w-4 h-4 text-neutral-400" weight="bold" />
+          <h4 className="text-sm font-bold text-white">Peak Hours</h4>
+        </div>
+      </div>
+      <p className="text-[10px] text-neutral-500 mb-2">When your visitors are most active</p>
+
+      <div className="flex flex-col gap-[5px]">
+        {MOCK_GRID.map((buckets, dayIdx) => (
+          <div key={dayIdx} className="flex items-center gap-1.5">
+            <span className="text-[11px] text-neutral-500 w-7 shrink-0 text-right leading-none">
+              {DAYS[dayIdx]}
+            </span>
+            <div
+              className="flex-1"
+              style={{
+                display: 'grid',
+                gridTemplateColumns: `repeat(${BUCKETS}, 1fr)`,
+                gap: '5px',
+              }}
+            >
+              {buckets.map((value, bucket) => {
+                const isBestCell = bestDay === dayIdx && bestBucket === bucket
+                return (
+                  <div
+                    key={bucket}
+                    className={`aspect-square w-full rounded-[4px] border border-neutral-800 ${
+                      isBestCell ? 'ring-1 ring-brand-orange/40' : ''
+                    }`}
+                    style={{
+                      backgroundColor: getHighlightColor(value, max),
+                    } as CSSProperties}
+                  />
+                )
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Hour axis labels */}
+      <div className="flex items-center gap-1.5">
+        <span className="w-7 shrink-0" />
+        <div className="flex-1 relative h-3">
+          {Object.entries(BUCKET_LABELS).map(([b, label]) => (
+            <span
+              key={b}
+              className="absolute text-[10px] text-neutral-600 -translate-x-1/2"
+              style={{ left: `${(Number(b) / BUCKETS) * 100}%` }}
+            >
+              {label}
+            </span>
+          ))}
+          <span
+            className="absolute text-[10px] text-neutral-600 -translate-x-full"
+            style={{ left: '100%' }}
+          >
+            24:00
+          </span>
+        </div>
+      </div>
+
+      {/* Intensity legend */}
+      <div className="flex items-center justify-end gap-1.5 mt-1">
+        <span className="text-[10px] text-neutral-500">Less</span>
+        {HIGHLIGHT_COLORS.map((color, i) => (
+          <div
+            key={i}
+            className="w-[10px] h-[10px] rounded-[2px] border border-neutral-800"
+            style={{ backgroundColor: color }}
+          />
+        ))}
+        <span className="text-[10px] text-neutral-500">More</span>
+      </div>
+
+      <p className="text-[10px] text-neutral-400 text-center mt-1">
+        Your busiest time is{' '}
+        <span className="text-brand-orange font-medium">
+          {['Mondays', 'Tuesdays', 'Wednesdays', 'Thursdays', 'Fridays', 'Saturdays', 'Sundays'][bestDay]} at {String(bestBucket * 2).padStart(2, '0')}:00
+        </span>
+      </p>
+    </div>
+  )
+}
+
+// ─── Carousel ────────────────────────────────────────────────────────────────
+
+const cards = [
+  { id: 'pages', Component: PagesCard, title: 'Top Pages' },
+  { id: 'referrers', Component: ReferrersCard, title: 'Referrers' },
+  { id: 'locations', Component: LocationsCard, title: 'Locations' },
+  { id: 'technology', Component: TechnologyCard, title: 'Technology' },
+  { id: 'peak-hours', Component: PeakHoursCard, title: 'Peak Hours' },
+]
+
+export function PulseFeaturesCarousel() {
+  const [active, setActive] = useState(0)
+  const [paused, setPaused] = useState(false)
+
+  const next = useCallback(() => {
+    setActive((prev) => (prev + 1) % cards.length)
+  }, [])
+
+  useEffect(() => {
+    if (paused) return
+    const interval = setInterval(next, 4000)
+    return () => clearInterval(interval)
+  }, [paused, next])
+
+  const ActiveComponent = cards[active].Component
+
+  return (
+    <div
+      className="relative w-full max-w-[520px] mx-auto"
+      onMouseEnter={() => setPaused(true)}
+      onMouseLeave={() => setPaused(false)}
+    >
+      <div className="rounded-xl border border-white/[0.08] bg-neutral-900/80 px-6 py-5 shadow-2xl">
+        <div className="min-h-[280px]">
+          <ActiveComponent />
+        </div>
+      </div>
+
+      {/* Dot indicators */}
+      <div className="flex items-center justify-center gap-2.5 mt-4">
+        {cards.map((card, i) => (
+          <button
+            key={card.id}
+            onClick={() => setActive(i)}
+            className={`h-2 rounded-full transition-all duration-300 ${
+              i === active
+                ? 'w-7 bg-brand-orange'
+                : 'w-2 bg-neutral-600 hover:bg-neutral-500'
+            }`}
+            aria-label={`Show ${card.title}`}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/components/marketing/mockups/pulse-mockup.tsx b/components/marketing/mockups/pulse-mockup.tsx
new file mode 100644
index 0000000..fc834b4
--- /dev/null
+++ b/components/marketing/mockups/pulse-mockup.tsx
@@ -0,0 +1,197 @@
+'use client'
+
+export function PulseMockup() {
+  return (
+    <div className="relative w-full max-w-[440px] mx-auto">
+      <div className="rounded-xl border border-white/[0.08] bg-neutral-900/80 px-5 py-4 shadow-2xl space-y-3">
+        {/* Header row */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div>
+              <h3 className="text-sm font-bold text-white">Ciphera</h3>
+              <p className="text-[9px] text-neutral-500">ciphera.net</p>
+            </div>
+            <div className="flex items-center gap-1.5 bg-green-500/10 border border-green-500/20 rounded-full px-2.5 py-0.5">
+              <div className="w-1.5 h-1.5 rounded-full bg-green-500" />
+              <span className="text-[9px] text-green-400 font-medium">4 current visitors</span>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <button className="flex items-center gap-1.5 rounded-lg bg-brand-orange px-2.5 py-1 text-[10px] font-medium text-white cursor-default">
+              <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+              </svg>
+              Export
+            </button>
+            <div className="flex items-center gap-1 rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 py-1 text-[10px] text-neutral-300 cursor-default">
+              Today
+              <svg className="w-2.5 h-2.5 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        {/* Filter button */}
+        <div>
+          <button className="flex items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-800/50 px-2.5 py-1 text-[10px] text-neutral-400 cursor-default">
+            <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+            </svg>
+            Filter
+          </button>
+        </div>
+
+        {/* Stats row */}
+        <div className="grid grid-cols-4 gap-2">
+          {/* Unique Visitors — selected/highlighted */}
+          <div className="rounded-lg border border-neutral-700 bg-neutral-800/60 p-2.5 relative">
+            <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-brand-orange rounded-b-lg" />
+            <p className="text-[7px] text-brand-orange font-semibold uppercase tracking-wider">Unique Visitors</p>
+            <div className="flex items-baseline gap-1.5 mt-1">
+              <p className="text-base font-bold text-white leading-none">247</p>
+              <span className="text-[8px] text-red-500 font-medium flex items-center gap-0.5">
+                <svg className="w-2 h-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M19 14l-7 7m0 0l-7-7" />
+                </svg>
+                12%
+              </span>
+            </div>
+            <p className="text-[8px] text-neutral-500 mt-0.5">vs yesterday</p>
+          </div>
+
+          {/* Total Pageviews */}
+          <div className="rounded-lg border border-neutral-800 bg-neutral-900 p-2.5">
+            <p className="text-[7px] text-neutral-500 font-semibold uppercase tracking-wider">Total Pageviews</p>
+            <div className="flex items-baseline gap-1.5 mt-1">
+              <p className="text-base font-bold text-white leading-none">512</p>
+              <span className="text-[8px] text-red-500 font-medium flex items-center gap-0.5">
+                <svg className="w-2 h-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M19 14l-7 7m0 0l-7-7" />
+                </svg>
+                23%
+              </span>
+            </div>
+            <p className="text-[8px] text-neutral-500 mt-0.5">vs yesterday</p>
+          </div>
+
+          {/* Bounce Rate */}
+          <div className="rounded-lg border border-neutral-800 bg-neutral-900 p-2.5">
+            <p className="text-[7px] text-neutral-500 font-semibold uppercase tracking-wider">Bounce Rate</p>
+            <div className="flex items-baseline gap-1.5 mt-1">
+              <p className="text-base font-bold text-white leading-none">68%</p>
+              <span className="text-[8px] text-green-500 font-medium flex items-center gap-0.5">
+                <svg className="w-2 h-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 10l7-7m0 0l7 7" />
+                </svg>
+                8%
+              </span>
+            </div>
+            <p className="text-[8px] text-neutral-500 mt-0.5">vs yesterday</p>
+          </div>
+
+          {/* Visit Duration */}
+          <div className="rounded-lg border border-neutral-800 bg-neutral-900 p-2.5">
+            <p className="text-[7px] text-neutral-500 font-semibold uppercase tracking-wider">Visit Duration</p>
+            <div className="flex items-baseline gap-1.5 mt-1">
+              <p className="text-base font-bold text-white leading-none">3m 18s</p>
+              <span className="text-[8px] text-red-500 font-medium flex items-center gap-0.5">
+                <svg className="w-2 h-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M19 14l-7 7m0 0l-7-7" />
+                </svg>
+                15%
+              </span>
+            </div>
+            <p className="text-[8px] text-neutral-500 mt-0.5">vs yesterday</p>
+          </div>
+        </div>
+
+        {/* Chart area */}
+        <div className="rounded-lg border border-neutral-800 bg-neutral-900 p-3">
+          {/* Chart header */}
+          <div className="flex items-center justify-between mb-3">
+            <span className="text-[10px] text-neutral-300 font-medium">Unique Visitors</span>
+            <div className="flex items-center gap-2">
+              <div className="flex items-center gap-1 rounded-md border border-neutral-700 bg-neutral-800 px-2 py-0.5 text-[9px] text-neutral-300 cursor-default">
+                1 hour
+                <svg className="w-2 h-2 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+              </div>
+              <div className="flex items-center gap-1.5">
+                <div className="w-3 h-3 rounded border border-neutral-700 bg-transparent" />
+                <span className="text-[9px] text-neutral-500">Compare</span>
+                <svg className="w-3 h-3 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                </svg>
+                <svg className="w-3 h-3 text-neutral-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                </svg>
+              </div>
+            </div>
+          </div>
+
+          {/* SVG Chart — step-style like the real dashboard */}
+          <div className="relative h-[120px] w-full">
+            {/* Y-axis labels */}
+            <div className="absolute left-0 top-0 bottom-4 flex flex-col justify-between text-[7px] text-neutral-600 w-5">
+              <span>8</span>
+              <span>6</span>
+              <span>4</span>
+              <span>2</span>
+              <span>0</span>
+            </div>
+
+            {/* Chart */}
+            <svg className="absolute left-6 right-0 top-0 bottom-4" viewBox="0 0 400 100" preserveAspectRatio="none">
+              {/* Grid lines */}
+              <line x1="0" y1="0" x2="400" y2="0" stroke="rgba(255,255,255,0.04)" />
+              <line x1="0" y1="25" x2="400" y2="25" stroke="rgba(255,255,255,0.04)" />
+              <line x1="0" y1="50" x2="400" y2="50" stroke="rgba(255,255,255,0.04)" />
+              <line x1="0" y1="75" x2="400" y2="75" stroke="rgba(255,255,255,0.04)" />
+              <line x1="0" y1="100" x2="400" y2="100" stroke="rgba(255,255,255,0.04)" />
+
+              {/* Area fill — step-style chart */}
+              <path
+                d="M0,62 L45,62 L45,62 L90,62 L90,100 L135,100 L135,100 L160,100 L160,62 L180,62 L180,50 L225,50 L225,25 L270,25 L270,25 L290,25 L290,50 L310,50 L310,62 L340,62 L340,62 L370,62 L370,55 L400,55 L400,100 L0,100 Z"
+                fill="url(#pulseMockupGradient)"
+              />
+
+              {/* Line — step-style */}
+              <path
+                d="M0,62 L45,62 L45,62 L90,62 L90,100 L135,100 L135,100 L160,100 L160,62 L180,62 L180,50 L225,50 L225,25 L270,25 L270,25 L290,25 L290,50 L310,50 L310,62 L340,62 L340,62 L370,62 L370,55 L400,55"
+                fill="none"
+                stroke="#FD5E0F"
+                strokeWidth="2"
+              />
+
+              <defs>
+                <linearGradient id="pulseMockupGradient" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stopColor="#FD5E0F" stopOpacity="0.25" />
+                  <stop offset="100%" stopColor="#FD5E0F" stopOpacity="0.02" />
+                </linearGradient>
+              </defs>
+            </svg>
+          </div>
+
+          {/* X-axis labels */}
+          <div className="flex justify-between pl-6 text-[7px] text-neutral-600 mt-0.5">
+            <span>01:00</span>
+            <span>04:00</span>
+            <span>07:00</span>
+            <span>10:00</span>
+            <span>13:00</span>
+            <span>16:00</span>
+            <span>19:00</span>
+          </div>
+        </div>
+
+        {/* Live indicator */}
+        <div className="flex items-center justify-end gap-1.5">
+          <div className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
+          <span className="text-[9px] text-neutral-500">Live · 27 seconds ago</span>
+        </div>
+      </div>
+    </div>
+  )
+}
-- 
2.49.1


From a361649e60317092e17758f199babd09d1fa635c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 19:52:32 +0100
Subject: [PATCH 117/428] feat: add tabbed FAQ, polish installation code
 blocks, refine integration styling

---
 app/faq/page.tsx                  | 108 +++----------------
 app/installation/page.tsx         |  11 +-
 app/integrations/page.tsx         |   2 +-
 app/page.tsx                      |   2 +
 components/marketing/FAQ.tsx      | 169 ++++++++++++++++++++++++++++++
 components/marketing/PulseFAQ.tsx | 112 ++++++++++++++++++++
 6 files changed, 307 insertions(+), 97 deletions(-)
 create mode 100644 components/marketing/FAQ.tsx
 create mode 100644 components/marketing/PulseFAQ.tsx

diff --git a/app/faq/page.tsx b/app/faq/page.tsx
index f1bcdca..8917312 100644
--- a/app/faq/page.tsx
+++ b/app/faq/page.tsx
@@ -1,37 +1,18 @@
 'use client'
 
 import { motion } from 'framer-motion'
-import { useState } from 'react'
-import { ChevronDownIcon } from '@ciphera-net/ui'
-
-const faqs = [
-  {
-    question: "Is Pulse GDPR compliant?",
-    answer: "Yes, Pulse is GDPR compliant by design. We don't use cookies, don't collect personal data, and process all data anonymously."
-  },
-  {
-    question: "Do I need a cookie consent banner?",
-    answer: "No, you don't need a cookie consent banner. Pulse doesn't use cookies, so it's exempt from cookie consent requirements under GDPR."
-  },
-  {
-    question: "How does Pulse track visitors?",
-    answer: "We use a lightweight JavaScript snippet that sends anonymous pageview events. No cookies, no cross-session identifiers (we use sessionStorage only to group events within a single visit), and no cross-site tracking."
-  },
-  {
-    question: "What data does Pulse collect?",
-    answer: "We collect anonymous pageview data including page path, referrer, device type, browser, and country (derived from IP at request time; the IP itself is not stored). No personal information is collected."
-  },
-  {
-    question: "How accurate is the data?",
-    answer: "Our data is highly accurate. We exclude bot traffic and data center visits. Since we don't use cookies, we count unique sessions rather than unique users."
-  },
-  {
-    question: "Can I export my data?",
-    answer: "Yes, you can access all your analytics data through the dashboard. We're working on export functionality for bulk data downloads."
-  }
-]
+import PulseFAQ from '@/components/marketing/PulseFAQ'
 
 // * JSON-LD FAQ Schema for rich snippets
+const faqs = [
+  { question: "Is Pulse GDPR compliant?", answer: "Yes, Pulse is GDPR compliant by design. We don't use cookies, don't collect personal data, and process all data anonymously." },
+  { question: "Do I need a cookie consent banner?", answer: "No, you don't need a cookie consent banner. Pulse doesn't use cookies, so it's exempt from cookie consent requirements under GDPR." },
+  { question: "How does Pulse track visitors?", answer: "We use a lightweight JavaScript snippet that sends anonymous pageview events. No cookies, no cross-session identifiers (we use sessionStorage only to group events within a single visit), and no cross-site tracking." },
+  { question: "What data does Pulse collect?", answer: "We collect anonymous pageview data including page path, referrer, device type, browser, and country (derived from IP at request time; the IP itself is not stored). No personal information is collected." },
+  { question: "How accurate is the data?", answer: "Our data is highly accurate. We exclude bot traffic and data center visits. Since we don't use cookies, we count unique sessions rather than unique users." },
+  { question: "Can I export my data?", answer: "Yes, you can access all your analytics data through the dashboard. We're working on export functionality for bulk data downloads." },
+]
+
 const faqSchema = {
   '@context': 'https://schema.org',
   '@type': 'FAQPage',
@@ -45,47 +26,6 @@ const faqSchema = {
   })),
 }
 
-function FAQItem({ faq, index }: { faq: typeof faqs[0]; index: number }) {
-  const [isOpen, setIsOpen] = useState(false)
-
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: 20 }}
-      whileInView={{ opacity: 1, y: 0 }}
-      viewport={{ once: true }}
-      transition={{ duration: 0.5, delay: index * 0.05 }}
-      className="border-b border-neutral-200 dark:border-neutral-800"
-    >
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="w-full py-6 flex items-center justify-between text-left hover:text-brand-orange transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
-      >
-        <h3 className="text-lg font-semibold text-neutral-900 dark:text-white pr-4">
-          {faq.question}
-        </h3>
-        <ChevronDownIcon
-          className={`w-5 h-5 text-neutral-500 shrink-0 transition-transform duration-300 ${
-            isOpen ? 'rotate-180' : ''
-          }`}
-        />
-      </button>
-      {isOpen && (
-        <motion.div
-          initial={{ opacity: 0, height: 0 }}
-          animate={{ opacity: 1, height: 'auto' }}
-          exit={{ opacity: 0, height: 0 }}
-          transition={{ duration: 0.3 }}
-          className="pb-6"
-        >
-          <p className="text-neutral-600 dark:text-neutral-400 leading-relaxed">
-            {faq.answer}
-          </p>
-        </motion.div>
-      )}
-    </motion.div>
-  )
-}
-
 export default function FAQPage() {
   return (
     <>
@@ -94,29 +34,9 @@ export default function FAQPage() {
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
       />
-      
-      <div className="container mx-auto px-4 py-16 max-w-4xl">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.5 }}
-          className="text-center mb-16"
-        >
-          <span className="badge-primary mb-4 inline-flex">FAQ</span>
-          <h1 className="text-4xl md:text-5xl font-bold text-neutral-900 dark:text-white mb-4">
-            Frequently asked questions
-          </h1>
-          <p className="text-lg text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto">
-            Learn more about how Pulse respects your privacy and handles your data.
-          </p>
-        </motion.div>
 
-        <div className="max-w-3xl mx-auto">
-          {faqs.map((faq, index) => (
-            <FAQItem key={faq.question} faq={faq} index={index} />
-          ))}
-        </div>
+      <div className="pt-8 pb-16">
+        <PulseFAQ />
 
         {/* * CTA */}
         <motion.div
@@ -126,12 +46,12 @@ export default function FAQPage() {
           transition={{ duration: 0.5, delay: 0.3 }}
           className="text-center mt-12"
         >
-          <p className="text-neutral-600 dark:text-neutral-400 mb-4">
+          <p className="text-neutral-400 mb-4">
             Still have questions?
           </p>
           <a
             href="mailto:support@ciphera.net"
-            className="inline-flex items-center justify-center gap-2 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 text-neutral-900 dark:text-white px-5 py-2.5 rounded-xl font-medium hover:bg-neutral-50 dark:hover:bg-neutral-800 shadow-sm hover:shadow-md dark:shadow-none transition-all duration-200"
+            className="inline-flex items-center justify-center gap-2 bg-neutral-900 border border-neutral-800 text-white px-5 py-2.5 rounded-xl font-medium hover:bg-neutral-800 transition-all duration-200"
           >
             Contact us
           </a>
diff --git a/app/installation/page.tsx b/app/installation/page.tsx
index effd9a3..a086b61 100644
--- a/app/installation/page.tsx
+++ b/app/installation/page.tsx
@@ -31,7 +31,7 @@ export default function InstallationPage() {
           <h2 className="text-2xl font-bold mb-8 text-white">Add the snippet</h2>
           <p className="text-neutral-500 mb-8">Just add this snippet to your &lt;head&gt; tag in your layout or index file.</p>
           
-          <div className="max-w-2xl mx-auto bg-neutral-900 rounded-xl overflow-hidden shadow-2xl text-left border border-neutral-800">
+          <div className="max-w-2xl mx-auto bg-neutral-900/80 rounded-xl overflow-hidden shadow-2xl text-left border border-white/[0.08]">
             <div className="flex items-center px-4 py-3 bg-neutral-800 border-b border-neutral-800">
               <div className="flex gap-2">
                 <div className="w-3 h-3 rounded-full bg-red-500/20" />
@@ -53,6 +53,13 @@ export default function InstallationPage() {
                 <span className="text-blue-400">&gt;&lt;/script&gt;</span>
               </code>
             </div>
+            <div className="flex items-center gap-4 px-6 py-3 border-t border-neutral-800 text-xs text-neutral-500">
+              <span>1.6 KB gzipped</span>
+              <span className="flex items-center gap-1.5">
+                <span className="w-1.5 h-1.5 rounded-full bg-green-500" />
+                Non-blocking, async
+              </span>
+            </div>
           </div>
         </div>
 
@@ -61,7 +68,7 @@ export default function InstallationPage() {
           <p className="text-neutral-500 mb-6 max-w-xl mx-auto">
             Track custom events (e.g. signup, purchase) with <code className="px-1.5 py-0.5 rounded bg-neutral-700 text-sm font-mono">pulse.track(&apos;event_name&apos;)</code>. Use letters, numbers, and underscores only. Define goals in your site Settings → Goals & Events to see counts in the dashboard.
           </p>
-          <div className="max-w-2xl mx-auto bg-neutral-900 rounded-xl overflow-hidden shadow-2xl text-left border border-neutral-800">
+          <div className="max-w-2xl mx-auto bg-neutral-900/80 rounded-xl overflow-hidden shadow-2xl text-left border border-white/[0.08]">
             <div className="flex items-center px-4 py-3 bg-neutral-800 border-b border-neutral-800">
               <div className="flex gap-2">
                 <div className="w-3 h-3 rounded-full bg-red-500/20" />
diff --git a/app/integrations/page.tsx b/app/integrations/page.tsx
index 4be357a..8582f22 100644
--- a/app/integrations/page.tsx
+++ b/app/integrations/page.tsx
@@ -143,7 +143,7 @@ export default function IntegrationsPage() {
               value={query}
               onChange={(e) => setQuery(e.target.value)}
               placeholder="Search integrations..."
-              className="w-full pl-12 pr-16 py-3 bg-neutral-900/70 backdrop-blur-sm border border-neutral-800 rounded-xl text-white placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-orange/50 focus:border-brand-orange/50 transition-all"
+              className="w-full pl-12 pr-16 py-3 bg-neutral-900/70 backdrop-blur-sm border border-white/[0.08] rounded-xl text-white placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-orange/50 focus:border-brand-orange/50 transition-all"
             />
             {query ? (
               <button
diff --git a/app/page.tsx b/app/page.tsx
index 469c337..3e2189b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -18,6 +18,7 @@ import { Cookie, ShieldCheck, Code, Lightning, ArrowRight, GithubLogo } from '@p
 import FeatureSections from '@/components/marketing/FeatureSections'
 import ComparisonCards from '@/components/marketing/ComparisonCards'
 import CTASection from '@/components/marketing/CTASection'
+import PulseFAQ from '@/components/marketing/PulseFAQ'
 import { toast } from '@ciphera-net/ui'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { getSitesLimitForPlan } from '@/lib/plans'
@@ -221,6 +222,7 @@ export default function HomePage() {
 
         <FeatureSections />
         <ComparisonCards />
+        <PulseFAQ />
         <CTASection />
       </>
     )
diff --git a/components/marketing/FAQ.tsx b/components/marketing/FAQ.tsx
new file mode 100644
index 0000000..9eb7585
--- /dev/null
+++ b/components/marketing/FAQ.tsx
@@ -0,0 +1,169 @@
+'use client';
+
+import React, { useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Plus } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface FAQItem {
+  question: string;
+  answer: string;
+}
+
+interface FAQProps extends React.HTMLAttributes<HTMLElement> {
+  title?: string;
+  subtitle?: string;
+  categories: Record<string, string>;
+  faqData: Record<string, FAQItem[]>;
+}
+
+export const FAQ = ({
+  title = "FAQs",
+  subtitle = "Frequently Asked Questions",
+  categories,
+  faqData,
+  className,
+  ...props
+}: FAQProps) => {
+  const categoryKeys = Object.keys(categories);
+  const [selectedCategory, setSelectedCategory] = useState(categoryKeys[0]);
+
+  return (
+    <section
+      className={cn(
+        "relative overflow-hidden bg-background px-4 py-12 text-foreground",
+        className
+      )}
+      {...props}
+    >
+      <FAQHeader title={title} subtitle={subtitle} />
+      <FAQTabs
+        categories={categories}
+        selected={selectedCategory}
+        setSelected={setSelectedCategory}
+      />
+      <FAQList
+        faqData={faqData}
+        selected={selectedCategory}
+      />
+    </section>
+  );
+};
+
+const FAQHeader = ({ title, subtitle }: { title: string; subtitle: string }) => (
+  <div className="relative z-10 flex flex-col items-center justify-center">
+    <span className="mb-8 bg-gradient-to-r from-primary to-primary/60 bg-clip-text font-medium text-transparent">
+      {subtitle}
+    </span>
+    <h2 className="mb-8 text-5xl font-bold">{title}</h2>
+  </div>
+);
+
+const FAQTabs = ({ categories, selected, setSelected }: { categories: Record<string, string>; selected: string; setSelected: (key: string) => void }) => (
+  <div className="relative z-10 flex flex-wrap items-center justify-center gap-4">
+    {Object.entries(categories).map(([key, label]) => (
+      <button
+        key={key}
+        onClick={() => setSelected(key)}
+        className={cn(
+          "relative overflow-hidden whitespace-nowrap rounded-md border px-3 py-1.5 text-sm font-medium transition-colors duration-500",
+          selected === key
+            ? "border-primary text-background"
+            : "border-border bg-transparent text-muted-foreground hover:text-foreground"
+        )}
+      >
+        <span className="relative z-10">{label}</span>
+        <AnimatePresence>
+          {selected === key && (
+            <motion.span
+              initial={{ y: "100%" }}
+              animate={{ y: "0%" }}
+              exit={{ y: "100%" }}
+              transition={{ duration: 0.5, ease: "backIn" }}
+              className="absolute inset-0 z-0 bg-gradient-to-r from-primary to-primary/80"
+            />
+          )}
+        </AnimatePresence>
+      </button>
+    ))}
+  </div>
+);
+
+const FAQList = ({ faqData, selected }: { faqData: Record<string, FAQItem[]>; selected: string }) => (
+  <div className="mx-auto mt-12 max-w-3xl">
+    <AnimatePresence mode="wait">
+      {Object.entries(faqData).map(([category, questions]) => {
+        if (selected === category) {
+          return (
+            <motion.div
+              key={category}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 20 }}
+              transition={{ duration: 0.5, ease: "backIn" }}
+              className="space-y-4"
+            >
+              {questions.map((faq, index) => (
+                <FAQItemComponent key={index} {...faq} />
+              ))}
+            </motion.div>
+          );
+        }
+        return null;
+      })}
+    </AnimatePresence>
+  </div>
+);
+
+const FAQItemComponent = ({ question, answer }: FAQItem) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <motion.div
+      animate={isOpen ? "open" : "closed"}
+      className={cn(
+        "rounded-xl border transition-colors",
+        isOpen ? "bg-muted/50" : "bg-card"
+      )}
+    >
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex w-full items-center justify-between gap-4 p-4 text-left"
+      >
+        <span
+          className={cn(
+            "text-lg font-medium transition-colors",
+            isOpen ? "text-foreground" : "text-muted-foreground"
+          )}
+        >
+          {question}
+        </span>
+        <motion.span
+          variants={{
+            open: { rotate: "45deg" },
+            closed: { rotate: "0deg" },
+          }}
+          transition={{ duration: 0.2 }}
+        >
+          <Plus
+            className={cn(
+              "h-5 w-5 transition-colors",
+              isOpen ? "text-foreground" : "text-muted-foreground"
+            )}
+          />
+        </motion.span>
+      </button>
+      <motion.div
+        initial={false}
+        animate={{
+          height: isOpen ? "auto" : "0px",
+          marginBottom: isOpen ? "16px" : "0px"
+        }}
+        transition={{ duration: 0.3, ease: "easeInOut" }}
+        className="overflow-hidden px-4"
+      >
+        <p className="text-muted-foreground">{answer}</p>
+      </motion.div>
+    </motion.div>
+  );
+};
diff --git a/components/marketing/PulseFAQ.tsx b/components/marketing/PulseFAQ.tsx
new file mode 100644
index 0000000..1433178
--- /dev/null
+++ b/components/marketing/PulseFAQ.tsx
@@ -0,0 +1,112 @@
+'use client'
+
+import { FAQ } from '@/components/marketing/FAQ'
+
+const categories: Record<string, string> = {
+  general: "General",
+  setup: "Setup",
+  privacy: "Privacy & Compliance",
+  technical: "Technical",
+}
+
+const faqData: Record<string, { question: string; answer: string }[]> = {
+  general: [
+    {
+      question: "What is Pulse?",
+      answer: "Pulse is a privacy-first website analytics platform by Ciphera. It tracks pageviews, unique visitors, referrers, and geographic data without using cookies, fingerprinting, or collecting any personal data. It's a privacy-respecting alternative to Google Analytics.",
+    },
+    {
+      question: "Is Pulse free?",
+      answer: "Yes, Pulse is free for personal websites. We plan to offer a paid Pro tier for teams and high-traffic sites in the future, but the free tier will always be available.",
+    },
+    {
+      question: "Can I migrate from Google Analytics?",
+      answer: "Pulse is not a drop-in replacement for Google Analytics — it's fundamentally different by design. It doesn't track individual users or sessions, so historical GA data can't be imported. However, you can run both side by side during a transition period.",
+    },
+    {
+      question: "Is Pulse open source?",
+      answer: "The Pulse client — dashboard and tracking script — are open source and available on GitHub. You can inspect every line of code that runs on your site and verify our privacy claims.",
+    },
+    {
+      question: "How is Pulse different from Plausible or Fathom?",
+      answer: "Pulse shares the privacy-first philosophy with Plausible and Fathom, but it's built on Swiss infrastructure with Swiss data protection laws. The client — dashboard and tracking script — are open source, and Pulse is part of the Ciphera ecosystem, giving you a unified privacy-first stack.",
+    },
+  ],
+  setup: [
+    {
+      question: "How do I install Pulse?",
+      answer: "Add a single script tag to your site's <head> section. That's it. No npm packages, no build steps, no configuration files. The script is under 2KB gzipped and loads asynchronously.",
+    },
+    {
+      question: "Does Pulse work with my framework?",
+      answer: "Yes. Pulse works with any website or framework: plain HTML, React, Next.js, Vue, Nuxt, Svelte, WordPress, Shopify, and more. If it renders HTML, Pulse works with it.",
+    },
+    {
+      question: "How do I verify Pulse is working?",
+      answer: "After adding the script tag, visit your site and check the Pulse dashboard. You should see your visit appear in real-time within seconds. The dashboard shows a live visitor count and updates every few seconds.",
+    },
+    {
+      question: "Can I track multiple websites?",
+      answer: "Yes. Each website gets its own dashboard. You can add as many sites as you need from the Pulse dashboard by adding the script tag with a different data-domain attribute.",
+    },
+    {
+      question: "Does Pulse slow down my website?",
+      answer: "No. The Pulse script is under 2KB gzipped — about 20x smaller than Google Analytics. It loads asynchronously with the defer attribute, meaning it never blocks page rendering or affects your Core Web Vitals scores.",
+    },
+  ],
+  privacy: [
+    {
+      question: "Do I need a cookie consent banner for Pulse?",
+      answer: "No. Because Pulse doesn't use cookies, fingerprinting, or any form of persistent identifier, it's exempt from ePrivacy cookie consent requirements. You can use Pulse without any consent banner.",
+    },
+    {
+      question: "Is Pulse GDPR compliant?",
+      answer: "Yes, by architecture — not by configuration. Pulse doesn't collect any personal data as defined by GDPR Article 4. There are no data subjects in the dataset, so DSAR requests don't apply. No DPA is required.",
+    },
+    {
+      question: "What happens to IP addresses?",
+      answer: "IP addresses are used only at the network edge for country-level geolocation. They are immediately discarded after the geo lookup — never stored, never logged, never written to disk. We can't retrieve them even if asked.",
+    },
+    {
+      question: "Where is my analytics data stored?",
+      answer: "All data is processed and stored on Swiss infrastructure, protected by the Swiss Federal Act on Data Protection (FADP). Data never leaves Swiss jurisdiction.",
+    },
+    {
+      question: "Can Pulse identify individual users?",
+      answer: "No. Pulse is architecturally incapable of identifying individual users. Each pageview is treated as an independent, anonymous event. There are no user IDs, session IDs, or any form of persistent tracking.",
+    },
+  ],
+  technical: [
+    {
+      question: "How does Pulse count unique visitors without cookies?",
+      answer: "Pulse uses a privacy-safe hashing method that generates a daily rotating identifier from non-personal data points. This allows approximate unique visitor counts without tracking individuals across sessions or days.",
+    },
+    {
+      question: "Does Pulse have an API?",
+      answer: "Yes. Pulse provides a REST API for programmatic access to your analytics data. You can use it to build custom dashboards, integrate with other tools, or export your data.",
+    },
+    {
+      question: "What metrics does Pulse track?",
+      answer: "Pulse tracks pageviews, unique visitors, bounce rate, visit duration, referrer sources, UTM parameters, device type, browser, operating system, and country-level geolocation.",
+    },
+    {
+      question: "Can I export my data?",
+      answer: "Yes. The dashboard includes an export feature that lets you download your analytics data. You can also use the API for automated exports.",
+    },
+    {
+      question: "Does Pulse support custom events?",
+      answer: "Custom event tracking is on our roadmap. Currently, Pulse focuses on pageview analytics. We plan to add lightweight custom event support that maintains our zero-personal-data architecture.",
+    },
+  ],
+}
+
+export default function PulseFAQ() {
+  return (
+    <FAQ
+      title="Frequently Asked Questions"
+      subtitle="Everything you need to know about Pulse"
+      categories={categories}
+      faqData={faqData}
+    />
+  )
+}
-- 
2.49.1


From 1e4bb345133dfd1f12c2ff8b0a3e963d0e9fbb19 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 19:54:29 +0100
Subject: [PATCH 118/428] chore: bump @ciphera-net/ui to 0.3.1

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cf8c85f..b19e09a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "pulse-frontend",
       "version": "0.15.0-alpha",
       "dependencies": {
-        "@ciphera-net/ui": "^0.3.0",
+        "@ciphera-net/ui": "^0.3.1",
         "@ducanh2912/next-pwa": "^10.2.9",
         "@phosphor-icons/react": "^2.1.10",
         "@simplewebauthn/browser": "^13.2.2",
@@ -1670,9 +1670,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.3.0",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.3.0/d1016cffd0c4402d130c7fa3112348d9b75f730e",
-      "integrity": "sha512-d0Vn2N2l/Bawgy6UKKY6Fz94i+a5A2WA2UsuHLsDfxaG52OxMqpmeHu4mGV3tvPAqH/5K2yZC4E4ne1Tkes2xg==",
+      "version": "0.3.1",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.3.1/5696ea330397dfdedfb12cff5dc20ed073ede0d2",
+      "integrity": "sha512-NJgpcKERXbsMLABAdUsLq1V76O3lDFikAlf8xL4yfk19Jsg11llGEqtiW5CxmuyHWJXUiZjfT0M4sbwui0FAdA==",
       "dependencies": {
         "@phosphor-icons/react": "^2.1.10",
         "class-variance-authority": "^0.7.1",
diff --git a/package.json b/package.json
index 66c210c..dc0568b 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.3.0",
+    "@ciphera-net/ui": "^0.3.1",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@phosphor-icons/react": "^2.1.10",
     "@simplewebauthn/browser": "^13.2.2",
-- 
2.49.1


From 74a48299abe6bd25590afded7c1a19f534305042 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 19:56:30 +0100
Subject: [PATCH 119/428] fix: replace lucide-react with phosphor-icons in FAQ
 component

---
 components/marketing/FAQ.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/marketing/FAQ.tsx b/components/marketing/FAQ.tsx
index 9eb7585..8707531 100644
--- a/components/marketing/FAQ.tsx
+++ b/components/marketing/FAQ.tsx
@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Plus } from 'lucide-react';
+import { Plus } from '@phosphor-icons/react';
 import { cn } from '@/lib/utils';
 
 interface FAQItem {
-- 
2.49.1


From 4afaf32e5837ec59c44e5276ab2be99f41348091 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 20:02:22 +0100
Subject: [PATCH 120/428] feat: add showcase background image to feature
 section mockup containers

---
 components/marketing/FeatureSections.tsx |   8 ++++++--
 public/pulse-showcase-bg.png             | Bin 0 -> 365109 bytes
 2 files changed, 6 insertions(+), 2 deletions(-)
 create mode 100644 public/pulse-showcase-bg.png

diff --git a/components/marketing/FeatureSections.tsx b/components/marketing/FeatureSections.tsx
index 8d7da48..775e59b 100644
--- a/components/marketing/FeatureSections.tsx
+++ b/components/marketing/FeatureSections.tsx
@@ -59,8 +59,12 @@ function FeatureSection({
           className={`relative ${reverse ? 'lg:order-first' : ''}`}
         >
           <div className="absolute -inset-8 bg-brand-orange/8 rounded-[2.5rem] blur-3xl" />
-          <div className="relative rounded-3xl overflow-hidden border border-white/[0.08] bg-neutral-900/80">
-            {mockup}
+          <div className="relative rounded-3xl overflow-hidden border border-white/[0.08]">
+            <img src="/pulse-showcase-bg.png" alt="" className="absolute inset-0 w-full h-full object-cover" />
+            <div className="absolute inset-0 bg-black/30" />
+            <div className="relative">
+              {mockup}
+            </div>
           </div>
         </motion.div>
       </div>
diff --git a/public/pulse-showcase-bg.png b/public/pulse-showcase-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..4c82724a8a80ddd9ad0f91a2047aebbf55584588
GIT binary patch
literal 365109
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%0Ah;#Ox9Rk5(QS
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
E9|+&N?EnA(

literal 0
HcmV?d00001

-- 
2.49.1


From 911704cff2c559f7644a586b133a82fafd187d5c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 20:12:01 +0100
Subject: [PATCH 121/428] feat: port website header with mega-menu, add
 showcase bg to hero, fix carousel container size

---
 app/layout-content.tsx                   |  27 +-
 app/page.tsx                             |   9 +-
 components/marketing/FeatureSections.tsx |  23 +-
 components/marketing/Header.tsx          | 309 +++++++++++++++++++++++
 components/ui/button-website.tsx         |  56 ++++
 components/ui/menu-toggle-icon.tsx       |  54 ++++
 components/ui/navigation-menu.tsx        | 128 ++++++++++
 package-lock.json                        | 190 +++++++++++++-
 package.json                             |   4 +
 9 files changed, 761 insertions(+), 39 deletions(-)
 create mode 100644 components/marketing/Header.tsx
 create mode 100644 components/ui/button-website.tsx
 create mode 100644 components/ui/menu-toggle-icon.tsx
 create mode 100644 components/ui/navigation-menu.tsx

diff --git a/app/layout-content.tsx b/app/layout-content.tsx
index 5ac3317..4e644a0 100644
--- a/app/layout-content.tsx
+++ b/app/layout-content.tsx
@@ -3,6 +3,7 @@
 import { OfflineBanner } from '@/components/OfflineBanner'
 import { Footer } from '@/components/Footer'
 import { Header, type CipheraApp } from '@ciphera-net/ui'
+import { Header as MarketingHeader } from '@/components/marketing/Header'
 import NotificationCenter from '@/components/notifications/NotificationCenter'
 import { useAuth } from '@/lib/auth/context'
 import { useOnlineStatus } from '@/lib/hooks/useOnlineStatus'
@@ -144,31 +145,11 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
     )
   }
 
-  // Public/marketing: floating header + footer
+  // Public/marketing: sticky header + footer
   return (
     <div className="flex flex-col min-h-screen">
-      <Header
-        auth={auth}
-        LinkComponent={Link}
-        logoSrc="/pulse_icon_no_margins.png"
-        appName="Pulse"
-        variant="floating"
-        showFaq={false}
-        showSecurity={false}
-        showPricing={true}
-        topOffset={showOfflineBar ? '2.5rem' : undefined}
-        apps={CIPHERA_APPS}
-        currentAppId="pulse"
-        customNavItems={
-          <Link
-            href="/features"
-            className="px-4 py-2 text-sm font-medium text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white rounded-lg hover:bg-neutral-100/50 dark:hover:bg-neutral-800/50 transition-all duration-200"
-          >
-            Features
-          </Link>
-        }
-      />
-      <main className="flex-1 pb-8 pt-24">
+      <MarketingHeader />
+      <main className="flex-1 pb-8">
         {children}
       </main>
       <Footer
diff --git a/app/page.tsx b/app/page.tsx
index 3e2189b..fa1abc4 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -151,12 +151,9 @@ export default function HomePage() {
     return (
       <>
         {/* HERO — full viewport */}
-        <div className="relative -mt-[88px] min-h-screen flex items-center pt-[88px] pb-20 lg:pb-32 overflow-hidden">
-          {/* Background atmosphere */}
-          <div className="absolute inset-0 -z-10 pointer-events-none">
-            <div className="absolute top-0 left-1/4 w-[800px] h-[800px] bg-brand-orange/5 rounded-full blur-[200px]" />
-            <div className="absolute bottom-0 right-1/4 w-[600px] h-[600px] bg-neutral-500/5 rounded-full blur-[150px]" />
-          </div>
+        <div className="relative -mt-[88px] min-h-screen flex items-center pt-[88px] pb-20 lg:pb-32 bg-neutral-950 overflow-hidden">
+          <img src="/pulse-showcase-bg.png" alt="" className="absolute inset-0 w-full h-full object-cover" />
+          <div className="absolute inset-0 bg-black/60" />
           <div className="absolute bottom-0 left-0 right-0 h-48 bg-gradient-to-t from-neutral-950 to-transparent" />
 
           <div className="relative z-10 w-full max-w-6xl mx-auto px-6">
diff --git a/components/marketing/FeatureSections.tsx b/components/marketing/FeatureSections.tsx
index 775e59b..2891228 100644
--- a/components/marketing/FeatureSections.tsx
+++ b/components/marketing/FeatureSections.tsx
@@ -15,6 +15,7 @@ function FeatureSection({
   features,
   mockup,
   reverse = false,
+  showBg = true,
 }: {
   id: string
   heading: string
@@ -22,6 +23,7 @@ function FeatureSection({
   features: string[]
   mockup: React.ReactNode
   reverse?: boolean
+  showBg?: boolean
 }) {
   return (
     <section id={id} className="container mx-auto px-6 scroll-mt-28">
@@ -58,10 +60,14 @@ function FeatureSection({
           transition={{ duration: 0.6, delay: 0.1 }}
           className={`relative ${reverse ? 'lg:order-first' : ''}`}
         >
-          <div className="absolute -inset-8 bg-brand-orange/8 rounded-[2.5rem] blur-3xl" />
-          <div className="relative rounded-3xl overflow-hidden border border-white/[0.08]">
-            <img src="/pulse-showcase-bg.png" alt="" className="absolute inset-0 w-full h-full object-cover" />
-            <div className="absolute inset-0 bg-black/30" />
+          {showBg && <div className="absolute -inset-8 bg-brand-orange/8 rounded-[2.5rem] blur-3xl" />}
+          <div className={`relative rounded-3xl overflow-hidden border border-white/[0.08] ${showBg ? '' : 'bg-neutral-900/80'}`}>
+            {showBg && (
+              <>
+                <img src="/pulse-showcase-bg.png" alt="" className="absolute inset-0 w-full h-full object-cover" />
+                <div className="absolute inset-0 bg-black/30" />
+              </>
+            )}
             <div className="relative">
               {mockup}
             </div>
@@ -106,8 +112,10 @@ export default function FeatureSections() {
         ]}
         reverse
         mockup={
-          <div className="p-6 sm:p-10">
-            <PulseFeaturesCarousel />
+          <div className="p-6 sm:p-10 min-h-[500px] flex items-center">
+            <div className="w-full">
+              <PulseFeaturesCarousel />
+            </div>
           </div>
         }
       />
@@ -151,9 +159,10 @@ export default function FeatureSections() {
         }
       />
 
-      {/* Section 5: Script — text left, code block right */}
+      {/* Section 5: Script — text left, code block right (no showcase bg) */}
       <FeatureSection
         id="script"
+        showBg={false}
         heading="One script tag. That's it."
         description="No npm packages, no build steps, no configuration files. Add a single line to your HTML and start collecting privacy-respecting analytics instantly."
         features={[
diff --git a/components/marketing/Header.tsx b/components/marketing/Header.tsx
new file mode 100644
index 0000000..80e45f3
--- /dev/null
+++ b/components/marketing/Header.tsx
@@ -0,0 +1,309 @@
+'use client';
+import React from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { Button } from '@/components/ui/button-website';
+import { cn } from '@/lib/utils';
+import { MenuToggleIcon } from '@/components/ui/menu-toggle-icon';
+import { createPortal } from 'react-dom';
+import {
+    NavigationMenu,
+    NavigationMenuContent,
+    NavigationMenuItem,
+    NavigationMenuLink,
+    NavigationMenuList,
+    NavigationMenuTrigger,
+} from '@/components/ui/navigation-menu';
+import { LucideIcon } from 'lucide-react';
+import {
+    BarChart3,
+    Eye,
+    Funnel,
+    Send,
+    FileText,
+    Puzzle,
+    HelpCircle,
+} from 'lucide-react';
+
+type LinkItem = {
+    title: string;
+    href: string;
+    icon?: LucideIcon;
+    description?: string;
+};
+
+const featureLinks: LinkItem[] = [
+    {
+        title: 'Dashboard',
+        href: '/features#dashboard',
+        icon: BarChart3,
+        description: 'Real-time traffic overview',
+    },
+    {
+        title: 'Visitor Insights',
+        href: '/features#visitors',
+        icon: Eye,
+        description: 'Browser, device & geo data',
+    },
+    {
+        title: 'Conversion Funnels',
+        href: '/features#funnels',
+        icon: Funnel,
+        description: 'Multi-step drop-off analysis',
+    },
+    {
+        title: 'Email Reports',
+        href: '/features#reports',
+        icon: Send,
+        description: 'Scheduled inbox summaries',
+    },
+];
+
+const resourceLinks: LinkItem[] = [
+    {
+        title: 'Installation',
+        href: '/installation',
+        icon: FileText,
+        description: 'Setup guides & code snippets',
+    },
+    {
+        title: 'Integrations',
+        href: '/integrations',
+        icon: Puzzle,
+        description: '75+ framework guides',
+    },
+    {
+        title: 'FAQ',
+        href: '/faq',
+        icon: HelpCircle,
+        description: 'Common questions answered',
+    },
+];
+
+export function Header() {
+    const [open, setOpen] = React.useState(false);
+    const scrolled = useScroll(10);
+
+    React.useEffect(() => {
+        if (open) {
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = '';
+        }
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, [open]);
+
+    return (
+        <header
+            className={cn('sticky top-0 z-50 w-full border-b border-transparent', {
+                'border-white/[0.06]': scrolled,
+            })}
+        >
+            <div className={cn("absolute inset-0 -z-10 transition-opacity duration-300", scrolled ? "opacity-100 backdrop-blur-xl bg-neutral-950/60 supports-[backdrop-filter]:bg-neutral-950/50" : "opacity-0")} />
+            <nav className="mx-auto flex h-16 w-full max-w-6xl items-center justify-between px-6 my-3">
+                <div className="flex items-center gap-5">
+                    <Link href="/" className="hover:bg-accent rounded-md p-2 flex items-center gap-2">
+                        <Image
+                            src="/pulse_icon_no_margins.png"
+                            alt="Pulse"
+                            width={36}
+                            height={36}
+                            priority
+                            className="object-contain w-8 h-8"
+                            unoptimized
+                        />
+                        <span className="text-xl font-bold text-foreground tracking-tight">
+                            Pulse
+                        </span>
+                    </Link>
+                    <NavigationMenu className="hidden md:flex">
+                        <NavigationMenuList>
+                            {/* Features dropdown */}
+                            <NavigationMenuItem>
+                                <NavigationMenuTrigger className="bg-transparent">Features</NavigationMenuTrigger>
+                                <NavigationMenuContent className="bg-transparent p-1 pr-1.5">
+                                    <ul className="grid w-[32rem] grid-cols-2 gap-2 rounded-md border border-white/[0.06] bg-white/[0.04] p-2">
+                                        {featureLinks.map((item, i) => (
+                                            <li key={i}>
+                                                <ListItem title={item.title} href={item.href} icon={item.icon} description={item.description} />
+                                            </li>
+                                        ))}
+                                    </ul>
+                                </NavigationMenuContent>
+                            </NavigationMenuItem>
+
+                            {/* Resources dropdown */}
+                            <NavigationMenuItem>
+                                <NavigationMenuTrigger className="bg-transparent">Resources</NavigationMenuTrigger>
+                                <NavigationMenuContent className="bg-transparent p-1 pr-1.5 pb-1.5">
+                                    <div className="grid w-[32rem] grid-cols-2 gap-2">
+                                        <ul className="space-y-2 rounded-md border border-white/[0.06] bg-white/[0.04] p-2">
+                                            {resourceLinks.map((item, i) => (
+                                                <li key={i}>
+                                                    <ListItem {...item} />
+                                                </li>
+                                            ))}
+                                        </ul>
+                                        <div className="flex flex-col justify-center gap-3 p-4">
+                                            <p className="text-sm font-medium text-foreground">Need help?</p>
+                                            <p className="text-xs text-muted-foreground leading-relaxed">
+                                                Questions about setup, integrations, or billing — we typically respond within 24-48 hours.
+                                            </p>
+                                            <a href="mailto:support@ciphera.net" className="text-sm font-medium text-brand-orange hover:underline">
+                                                support@ciphera.net &rarr;
+                                            </a>
+                                        </div>
+                                    </div>
+                                </NavigationMenuContent>
+                            </NavigationMenuItem>
+
+                            {/* Pricing standalone link */}
+                            <NavigationMenuItem>
+                                <NavigationMenuLink asChild>
+                                    <Link href="/pricing" className="group inline-flex h-9 w-max items-center justify-center rounded-md bg-transparent px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none">
+                                        Pricing
+                                    </Link>
+                                </NavigationMenuLink>
+                            </NavigationMenuItem>
+                        </NavigationMenuList>
+                    </NavigationMenu>
+                </div>
+                <div className="hidden items-center gap-2 md:flex">
+                    <Button variant="outline" asChild>
+                        <a href="https://pulse.ciphera.net">Sign In</a>
+                    </Button>
+                    <Button asChild>
+                        <a href="https://pulse.ciphera.net">Get Started</a>
+                    </Button>
+                </div>
+                <div className="flex items-center gap-2 md:hidden">
+                    <Button
+                        size="icon"
+                        variant="outline"
+                        onClick={() => setOpen(!open)}
+                        aria-expanded={open}
+                        aria-controls="mobile-menu"
+                        aria-label="Toggle menu"
+                    >
+                        <MenuToggleIcon open={open} className="size-5" duration={300} />
+                    </Button>
+                </div>
+            </nav>
+            <MobileMenu open={open} className="flex flex-col justify-between gap-2 overflow-y-auto">
+                <NavigationMenu className="max-w-full">
+                    <div className="flex w-full flex-col gap-y-2">
+                        <span className="text-sm">Features</span>
+                        {featureLinks.map((link) => (
+                            <ListItem key={link.title} title={link.title} href={link.href} icon={link.icon} description={link.description} />
+                        ))}
+                        <span className="text-sm">Resources</span>
+                        {resourceLinks.map((link) => (
+                            <ListItem key={link.title} {...link} />
+                        ))}
+                        <Link
+                            href="/pricing"
+                            className="flex flex-row gap-x-2 rounded-sm p-2 transition-colors hover:bg-white/[0.06]"
+                        >
+                            <div className="flex aspect-square size-12 items-center justify-center rounded-md border border-white/[0.08] bg-white/[0.05] shadow-sm p-2">
+                                <BarChart3 className="text-foreground size-5" />
+                            </div>
+                            <div className="flex flex-col items-start justify-center">
+                                <span className="text-sm font-medium">Pricing</span>
+                                <span className="text-muted-foreground text-xs">Plans & billing</span>
+                            </div>
+                        </Link>
+                    </div>
+                </NavigationMenu>
+                <div className="flex flex-col gap-2">
+                    <Button variant="outline" className="w-full bg-transparent" asChild>
+                        <a href="https://pulse.ciphera.net">
+                            Sign In
+                        </a>
+                    </Button>
+                    <Button className="w-full" asChild>
+                        <a href="https://pulse.ciphera.net">
+                            Get Started
+                        </a>
+                    </Button>
+                </div>
+            </MobileMenu>
+        </header>
+    );
+}
+
+type MobileMenuProps = React.ComponentProps<'div'> & {
+    open: boolean;
+};
+
+function MobileMenu({ open, children, className, ...props }: MobileMenuProps) {
+    if (!open || typeof window === 'undefined') return null;
+
+    return createPortal(
+        <div
+            id="mobile-menu"
+            className={cn(
+                'bg-background/95 supports-[backdrop-filter]:bg-background/50 backdrop-blur-lg',
+                'fixed top-16 right-0 bottom-0 left-0 z-40 flex flex-col overflow-hidden border-y md:hidden',
+            )}
+        >
+            <div
+                data-slot={open ? 'open' : 'closed'}
+                className={cn(
+                    'data-[slot=open]:animate-in data-[slot=open]:zoom-in-95 ease-out',
+                    'size-full p-4',
+                    className,
+                )}
+                {...props}
+            >
+                {children}
+            </div>
+        </div>,
+        document.body,
+    );
+}
+
+function ListItem({
+    title,
+    description,
+    icon: Icon,
+    className,
+    href,
+    ...props
+}: React.ComponentProps<typeof NavigationMenuLink> & LinkItem) {
+    return (
+        <NavigationMenuLink className={cn('w-full flex flex-row gap-x-2 data-[active=true]:focus:bg-white/[0.06] data-[active=true]:hover:bg-white/[0.06] data-[active=true]:text-accent-foreground hover:bg-white/[0.06] hover:text-accent-foreground focus:bg-white/[0.06] focus:text-accent-foreground rounded-sm p-2 transition-colors', className)} {...props} asChild>
+            <Link href={href || '#'}>
+                <div className="flex aspect-square size-12 items-center justify-center rounded-md border border-white/[0.08] bg-white/[0.05] shadow-sm p-2">
+                    {Icon ? (
+                        <Icon className="text-foreground size-5" />
+                    ) : null}
+                </div>
+                <div className="flex flex-col items-start justify-center">
+                    <span className="text-sm font-medium">{title}</span>
+                    <span className="text-muted-foreground text-xs">{description}</span>
+                </div>
+            </Link>
+        </NavigationMenuLink>
+    );
+}
+
+function useScroll(threshold: number) {
+    const [scrolled, setScrolled] = React.useState(false);
+
+    const onScroll = React.useCallback(() => {
+        setScrolled(window.scrollY > threshold);
+    }, [threshold]);
+
+    React.useEffect(() => {
+        window.addEventListener('scroll', onScroll);
+        return () => window.removeEventListener('scroll', onScroll);
+    }, [onScroll]);
+
+    React.useEffect(() => {
+        onScroll();
+    }, [onScroll]);
+
+    return scrolled;
+}
diff --git a/components/ui/button-website.tsx b/components/ui/button-website.tsx
new file mode 100644
index 0000000..ac472bb
--- /dev/null
+++ b/components/ui/button-website.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
diff --git a/components/ui/menu-toggle-icon.tsx b/components/ui/menu-toggle-icon.tsx
new file mode 100644
index 0000000..945603b
--- /dev/null
+++ b/components/ui/menu-toggle-icon.tsx
@@ -0,0 +1,54 @@
+'use client';
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+type MenuToggleProps = React.ComponentProps<'svg'> & {
+    open: boolean;
+    duration?: number;
+};
+
+export function MenuToggleIcon({
+    open,
+    className,
+    fill = 'none',
+    stroke = 'currentColor',
+    strokeWidth = 2.5,
+    strokeLinecap = 'round',
+    strokeLinejoin = 'round',
+    duration = 500,
+    ...props
+}: MenuToggleProps) {
+    return (
+        <svg
+            strokeWidth={strokeWidth}
+            fill={fill}
+            stroke={stroke}
+            viewBox="0 0 32 32"
+            strokeLinecap={strokeLinecap}
+            strokeLinejoin={strokeLinejoin}
+            className={cn(
+                'transition-transform ease-in-out',
+                open && '-rotate-45',
+                className,
+            )}
+            style={{
+                transitionDuration: `${duration}ms`,
+            }}
+            {...props}
+        >
+            <path
+                className={cn(
+                    'transition-all ease-in-out',
+                    open
+                        ? '[stroke-dasharray:20_300] [stroke-dashoffset:-32.42px]'
+                        : '[stroke-dasharray:12_63]',
+                )}
+                style={{
+                    transitionDuration: `${duration}ms`,
+                }}
+                d="M27 10 13 10C10.8 10 9 8.2 9 6 9 3.5 10.8 2 13 2 15.2 2 17 3.8 17 6L17 26C17 28.2 18.8 30 21 30 23.2 30 25 28.2 25 26 25 23.8 23.2 22 21 22L7 22"
+            />
+            <path d="M7 16 27 16" />
+        </svg>
+    );
+}
diff --git a/components/ui/navigation-menu.tsx b/components/ui/navigation-menu.tsx
new file mode 100644
index 0000000..dc3d1c8
--- /dev/null
+++ b/components/ui/navigation-menu.tsx
@@ -0,0 +1,128 @@
+import * as React from "react"
+import { ChevronDownIcon } from "@radix-ui/react-icons"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDownIcon
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-xl border border-white/[0.08] bg-neutral-900/65 text-popover-foreground shadow-xl backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:duration-150 data-[state=closed]:duration-100 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}
diff --git a/package-lock.json b/package-lock.json
index b19e09a..d963c47 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,9 @@
         "@ciphera-net/ui": "^0.3.1",
         "@ducanh2912/next-pwa": "^10.2.9",
         "@phosphor-icons/react": "^2.1.10",
+        "@radix-ui/react-icons": "^1.3.2",
+        "@radix-ui/react-navigation-menu": "^1.2.14",
+        "@radix-ui/react-slot": "^1.2.4",
         "@simplewebauthn/browser": "^13.2.2",
         "@stripe/react-stripe-js": "^5.6.0",
         "@stripe/stripe-js": "^8.7.0",
@@ -27,6 +30,7 @@
         "iso-3166-2": "^1.0.0",
         "jspdf": "^4.0.0",
         "jspdf-autotable": "^5.0.7",
+        "lucide-react": "^0.577.0",
         "motion": "^12.35.2",
         "next": "^16.1.1",
         "radix-ui": "^1.4.3",
@@ -3435,6 +3439,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-alert-dialog/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
@@ -3594,6 +3616,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
@@ -3688,6 +3728,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-direction": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
@@ -3858,6 +3916,15 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-icons": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.2.tgz",
+      "integrity": "sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
@@ -3939,6 +4006,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-menubar": {
       "version": "1.1.16",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.1.16.tgz",
@@ -4108,6 +4193,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
@@ -4211,6 +4314,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-progress": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.7.tgz",
@@ -4372,6 +4493,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-separator": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
@@ -4429,9 +4568,9 @@
       }
     },
     "node_modules/@radix-ui/react-slot": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
-      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
+      "integrity": "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-compose-refs": "1.1.2"
@@ -4656,6 +4795,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
@@ -11357,6 +11514,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.577.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.577.0.tgz",
+      "integrity": "sha512-4LjoFv2eEPwYDPg/CUdBJQSDfPyzXCRrVW1X7jrx/trgxnxkHFjnVZINbzvzxjN70dxychOfg+FTYwBiS3pQ5A==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
@@ -13038,6 +13204,24 @@
         }
       }
     },
+    "node_modules/radix-ui/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/raf": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
diff --git a/package.json b/package.json
index dc0568b..fe3897a 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,9 @@
     "@ciphera-net/ui": "^0.3.1",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@phosphor-icons/react": "^2.1.10",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-slot": "^1.2.4",
     "@simplewebauthn/browser": "^13.2.2",
     "@stripe/react-stripe-js": "^5.6.0",
     "@stripe/stripe-js": "^8.7.0",
@@ -31,6 +34,7 @@
     "iso-3166-2": "^1.0.0",
     "jspdf": "^4.0.0",
     "jspdf-autotable": "^5.0.7",
+    "lucide-react": "^0.577.0",
     "motion": "^12.35.2",
     "next": "^16.1.1",
     "radix-ui": "^1.4.3",
-- 
2.49.1


From 0e8629951cf32bf8fca557faa4a80133508b90cb Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 20:16:31 +0100
Subject: [PATCH 122/428] fix: set accent color to neutral gray matching
 ciphera-website

---
 styles/globals.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/styles/globals.css b/styles/globals.css
index 315ee27..eb0c354 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -29,6 +29,8 @@
     --primary-foreground: 255 255 255;
     --secondary: 38 38 38;
     --secondary-foreground: 250 250 250;
+    --accent: 38 38 38;
+    --accent-foreground: 250 250 250;
     --destructive-foreground: 255 255 255;
   }
 
-- 
2.49.1


From 536bb8c872680d08862251f81d236175ef691ddc Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 20:26:23 +0100
Subject: [PATCH 123/428] feat: add live demo dashboard to landing page hero

---
 app/page.tsx                      |  35 +--
 components/marketing/LiveDemo.tsx | 418 ++++++++++++++++++++++++++++++
 2 files changed, 437 insertions(+), 16 deletions(-)
 create mode 100644 components/marketing/LiveDemo.tsx

diff --git a/app/page.tsx b/app/page.tsx
index fa1abc4..d3a0ca2 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -15,6 +15,7 @@ import DeleteSiteModal from '@/components/sites/DeleteSiteModal'
 import { Button } from '@ciphera-net/ui'
 import { XIcon, GlobeIcon } from '@ciphera-net/ui'
 import { Cookie, ShieldCheck, Code, Lightning, ArrowRight, GithubLogo } from '@phosphor-icons/react'
+import LiveDemo from '@/components/marketing/LiveDemo'
 import FeatureSections from '@/components/marketing/FeatureSections'
 import ComparisonCards from '@/components/marketing/ComparisonCards'
 import CTASection from '@/components/marketing/CTASection'
@@ -150,19 +151,14 @@ export default function HomePage() {
   if (!user) {
     return (
       <>
-        {/* HERO — full viewport */}
-        <div className="relative -mt-[88px] min-h-screen flex items-center pt-[88px] pb-20 lg:pb-32 bg-neutral-950 overflow-hidden">
-          <img src="/pulse-showcase-bg.png" alt="" className="absolute inset-0 w-full h-full object-cover" />
-          <div className="absolute inset-0 bg-black/60" />
-          <div className="absolute bottom-0 left-0 right-0 h-48 bg-gradient-to-t from-neutral-950 to-transparent" />
-
-          <div className="relative z-10 w-full max-w-6xl mx-auto px-6">
-            {/* H1 */}
+        {/* HERO — compact headline + live demo */}
+        <div className="pt-20 pb-10 lg:pt-28 lg:pb-16">
+          <div className="w-full max-w-6xl mx-auto px-6 text-center mb-16">
             <motion.h1
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.5 }}
-              className="text-5xl sm:text-6xl md:text-7xl font-bold text-white leading-[1.1] mb-6"
+              className="text-4xl sm:text-5xl md:text-6xl font-bold text-white leading-[1.1] mb-6"
             >
               Analytics without the{' '}
               <span className="relative inline-block">
@@ -173,23 +169,21 @@ export default function HomePage() {
               </span>
             </motion.h1>
 
-            {/* Subtitle */}
             <motion.p
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.5, delay: 0.1 }}
-              className="text-xl text-neutral-300 mb-10 leading-relaxed max-w-xl"
+              className="text-xl text-neutral-300 mb-8 leading-relaxed max-w-2xl mx-auto"
             >
-              Respect your users' privacy while getting the insights you need.
+              Respect your users&apos; privacy while getting the insights you need.
               No cookies, no IP tracking, fully GDPR compliant.
             </motion.p>
 
-            {/* CTAs */}
             <motion.div
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.5, delay: 0.2 }}
-              className="flex flex-row gap-3 flex-wrap mb-10"
+              className="flex flex-row gap-3 flex-wrap justify-center mb-8"
             >
               <Button onClick={() => initiateOAuthFlow()} variant="primary" className="px-6 py-3 shadow-lg shadow-brand-orange/20 gap-2">
                 Try Pulse Free <ArrowRight weight="bold" className="w-4 h-4" />
@@ -199,12 +193,11 @@ export default function HomePage() {
               </Button>
             </motion.div>
 
-            {/* Trust badges */}
             <motion.div
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.5, delay: 0.3 }}
-              className="flex flex-wrap gap-x-6 gap-y-3 text-sm text-neutral-400"
+              className="flex flex-wrap gap-x-6 gap-y-3 text-sm text-neutral-400 justify-center"
             >
               <span className="flex items-center gap-2"><Cookie weight="bold" className="w-4 h-4" /> Cookie-free</span>
               <span className="text-neutral-700">|</span>
@@ -215,6 +208,16 @@ export default function HomePage() {
               <span className="flex items-center gap-2"><Lightning weight="bold" className="w-4 h-4" /> Under 2KB</span>
             </motion.div>
           </div>
+
+          {/* Live Dashboard Demo */}
+          <motion.div
+            initial={{ opacity: 0, y: 40 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.7, delay: 0.4 }}
+            className="w-full max-w-7xl mx-auto px-6"
+          >
+            <LiveDemo />
+          </motion.div>
         </div>
 
         <FeatureSections />
diff --git a/components/marketing/LiveDemo.tsx b/components/marketing/LiveDemo.tsx
new file mode 100644
index 0000000..5ff53d6
--- /dev/null
+++ b/components/marketing/LiveDemo.tsx
@@ -0,0 +1,418 @@
+'use client'
+
+import { useState, useEffect, useRef } from 'react'
+
+// ── Helpers ──────────────────────────────────────────────────
+
+function rand(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+function fmtDuration(seconds: number) {
+  const m = Math.floor(seconds / 60)
+  const s = seconds % 60
+  return `${m}m ${s}s`
+}
+
+// Generate realistic hourly visitor counts (low at night, peak afternoon)
+function generateHourlyPattern(): { hour: string; visitors: number; pageviews: number }[] {
+  const base = [
+    12, 8, 5, 4, 3, 4, 8, 18, 35, 52, 64, 72,
+    78, 85, 88, 82, 74, 60, 48, 38, 30, 25, 20, 16,
+  ]
+  return base.map((v, i) => ({
+    hour: `${String(i).padStart(2, '0')}:00`,
+    visitors: v + rand(-4, 4),
+    pageviews: Math.round(v * 2.8) + rand(-6, 6),
+  }))
+}
+
+// ── Static panel data ────────────────────────────────────────
+
+const topPages = [
+  { label: '/blog/privacy', pct: 85 },
+  { label: '/pricing', pct: 65 },
+  { label: '/docs', pct: 45 },
+  { label: '/about', pct: 30 },
+  { label: '/integrations', pct: 20 },
+]
+
+const topReferrers = [
+  { label: 'Google', pct: 40 },
+  { label: 'Direct', pct: 25 },
+  { label: 'Twitter', pct: 15 },
+  { label: 'GitHub', pct: 12 },
+  { label: 'Reddit', pct: 8 },
+]
+
+const locations = [
+  { flag: '\u{1F1E8}\u{1F1ED}', name: 'Switzerland', pct: 30 },
+  { flag: '\u{1F1E9}\u{1F1EA}', name: 'Germany', pct: 22 },
+  { flag: '\u{1F1FA}\u{1F1F8}', name: 'USA', pct: 18 },
+  { flag: '\u{1F1EB}\u{1F1F7}', name: 'France', pct: 15 },
+  { flag: '\u{1F1EC}\u{1F1E7}', name: 'UK', pct: 15 },
+]
+
+const technology = [
+  { label: 'Chrome', pct: 62 },
+  { label: 'Firefox', pct: 18 },
+  { label: 'Safari', pct: 15 },
+  { label: 'Edge', pct: 5 },
+]
+
+const campaigns = [
+  { label: 'newsletter', pct: 45 },
+  { label: 'twitter', pct: 30 },
+  { label: 'producthunt', pct: 25 },
+]
+
+// Generate heatmap data: 7 rows (Mon-Sun) x 24 cols (hours)
+function generateHeatmap(): number[][] {
+  return Array.from({ length: 7 }, (_, day) =>
+    Array.from({ length: 24 }, (_, hour) => {
+      const isWeekend = day >= 5
+      const isNight = hour >= 1 && hour <= 5
+      const isPeak = hour >= 9 && hour <= 17
+      const isMorning = hour >= 7 && hour <= 9
+      const isEvening = hour >= 17 && hour <= 21
+
+      if (isNight) return rand(0, 1)
+      if (isWeekend) {
+        if (isPeak) return rand(2, 4)
+        return rand(1, 3)
+      }
+      if (isPeak) return rand(5, 8)
+      if (isMorning || isEvening) return rand(3, 5)
+      return rand(1, 3)
+    })
+  )
+}
+
+function heatmapOpacity(value: number): string {
+  if (value <= 1) return 'bg-brand-orange/[0.05]'
+  if (value <= 3) return 'bg-brand-orange/[0.2]'
+  if (value <= 5) return 'bg-brand-orange/[0.5]'
+  return 'bg-brand-orange/[0.8]'
+}
+
+// ── SVG chart helpers ────────────────────────────────────────
+
+function buildSmoothPath(
+  points: { x: number; y: number }[],
+  close: boolean
+): string {
+  if (points.length < 2) return ''
+  const d: string[] = [`M ${points[0].x},${points[0].y}`]
+
+  for (let i = 0; i < points.length - 1; i++) {
+    const p0 = points[Math.max(i - 1, 0)]
+    const p1 = points[i]
+    const p2 = points[i + 1]
+    const p3 = points[Math.min(i + 2, points.length - 1)]
+
+    const cp1x = p1.x + (p2.x - p0.x) / 6
+    const cp1y = p1.y + (p2.y - p0.y) / 6
+    const cp2x = p2.x - (p3.x - p1.x) / 6
+    const cp2y = p2.y - (p3.y - p1.y) / 6
+
+    d.push(`C ${cp1x},${cp1y} ${cp2x},${cp2y} ${p2.x},${p2.y}`)
+  }
+
+  if (close) {
+    const last = points[points.length - 1]
+    const first = points[0]
+    d.push(`L ${last.x},200 L ${first.x},200 Z`)
+  }
+
+  return d.join(' ')
+}
+
+// ── Component ────────────────────────────────────────────────
+
+export default function LiveDemo() {
+  const [visitors, setVisitors] = useState(2847)
+  const [pageviews, setPageviews] = useState(8432)
+  const [bounceRate, setBounceRate] = useState(42)
+  const [avgDuration, setAvgDuration] = useState(154)
+  const [realtimeVisitors, setRealtimeVisitors] = useState(12)
+  const [chartData, setChartData] = useState(generateHourlyPattern)
+  const heatmap = useRef(generateHeatmap())
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      setVisitors((v) => v + rand(1, 3))
+      setPageviews((v) => v + rand(2, 5))
+      setBounceRate(() => 38 + rand(0, 7))
+      setAvgDuration(() => 130 + rand(0, 90))
+      setRealtimeVisitors(() => 8 + rand(0, 7))
+      setChartData((prev) => {
+        const next = [...prev]
+        const lastHourNum =
+          parseInt(next[next.length - 1].hour.split(':')[0], 10)
+        const newHour = (lastHourNum + 1) % 24
+        next.push({
+          hour: `${String(newHour).padStart(2, '0')}:00`,
+          visitors: rand(20, 90),
+          pageviews: rand(50, 250),
+        })
+        if (next.length > 24) next.shift()
+        return next
+      })
+    }, 2500)
+    return () => clearInterval(id)
+  }, [])
+
+  // ── Chart SVG ──────────────────────────────────────────────
+
+  const chartW = 800
+  const chartH = 200
+  const maxVisitors = Math.max(...chartData.map((d) => d.visitors), 1)
+
+  const chartPoints = chartData.map((d, i) => ({
+    x: (i / (chartData.length - 1)) * chartW,
+    y: chartH - (d.visitors / maxVisitors) * (chartH - 20) - 10,
+  }))
+
+  const linePath = buildSmoothPath(chartPoints, false)
+  const areaPath = buildSmoothPath(chartPoints, true)
+
+  // ── Stats config ───────────────────────────────────────────
+
+  const stats = [
+    {
+      label: 'Visitors',
+      value: visitors.toLocaleString(),
+      change: '+12%',
+      positive: true,
+    },
+    {
+      label: 'Pageviews',
+      value: pageviews.toLocaleString(),
+      change: '+8%',
+      positive: true,
+    },
+    {
+      label: 'Bounce Rate',
+      value: `${bounceRate}%`,
+      change: '-3%',
+      positive: false,
+    },
+    {
+      label: 'Avg. Duration',
+      value: fmtDuration(avgDuration),
+      change: '+15%',
+      positive: true,
+    },
+  ]
+
+  const xLabels = chartData
+    .map((d, i) => ({ label: d.hour, i }))
+    .filter((d) => parseInt(d.label.split(':')[0], 10) % 4 === 0)
+
+  const dayLabels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+
+  // ── Render ─────────────────────────────────────────────────
+
+  return (
+    <div className="w-full max-h-[900px] overflow-hidden relative rounded-xl shadow-2xl">
+      {/* Browser chrome */}
+      <div className="bg-neutral-800 border-b border-neutral-800 px-4 py-3 flex items-center gap-3">
+        <div className="flex items-center gap-1.5">
+          <span className="w-3 h-3 rounded-full bg-red-500/20" />
+          <span className="w-3 h-3 rounded-full bg-yellow-500/20" />
+          <span className="w-3 h-3 rounded-full bg-green-500/20" />
+        </div>
+        <div className="flex-1 bg-neutral-900/80 rounded-md px-3 py-1 text-xs text-neutral-500 text-center">
+          pulse.ciphera.net/sites/demo
+        </div>
+      </div>
+
+      {/* Dashboard body */}
+      <div className="bg-neutral-950 px-6 py-5 space-y-5">
+        {/* Header bar */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <span className="text-white font-bold text-lg">Ciphera</span>
+            <span className="text-neutral-500 text-sm">ciphera.net</span>
+            <span className="flex items-center gap-1.5 text-xs text-neutral-400 ml-2">
+              <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
+              {realtimeVisitors} current visitors
+            </span>
+          </div>
+          <span className="text-xs text-neutral-400 bg-neutral-800 px-3 py-1 rounded-full border border-white/[0.08]">
+            Today
+          </span>
+        </div>
+
+        {/* Stats bar */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          {stats.map((s) => (
+            <div
+              key={s.label}
+              className="bg-neutral-900/80 border border-white/[0.08] rounded-xl p-4"
+            >
+              <div className="text-xs text-neutral-500 uppercase tracking-wider mb-1">
+                {s.label}
+              </div>
+              <div className="text-2xl font-bold text-white">{s.value}</div>
+              <div
+                className={`text-xs mt-1 ${
+                  s.positive ? 'text-green-400' : 'text-orange-400'
+                }`}
+              >
+                {s.positive ? '\u2191' : '\u2193'}
+                {s.change.replace(/[+-]/, '')}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Chart */}
+        <div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6">
+          <svg
+            viewBox={`0 0 ${chartW} ${chartH + 30}`}
+            className="w-full"
+            preserveAspectRatio="none"
+          >
+            <defs>
+              <linearGradient
+                id="chartGrad"
+                x1="0"
+                y1="0"
+                x2="0"
+                y2="1"
+              >
+                <stop offset="0%" stopColor="#FD5E0F" stopOpacity="0.4" />
+                <stop offset="100%" stopColor="#FD5E0F" stopOpacity="0" />
+              </linearGradient>
+            </defs>
+            <path d={areaPath} fill="url(#chartGrad)" />
+            <path
+              d={linePath}
+              fill="none"
+              stroke="#FD5E0F"
+              strokeWidth="2"
+            />
+            {/* X-axis labels */}
+            {xLabels.map(({ label, i }) => (
+              <text
+                key={label + i}
+                x={(i / (chartData.length - 1)) * chartW}
+                y={chartH + 22}
+                fill="#525252"
+                fontSize="11"
+                textAnchor="middle"
+              >
+                {label}
+              </text>
+            ))}
+          </svg>
+        </div>
+
+        {/* Two-column panels */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+          {/* Top Pages */}
+          <PanelCard title="Top Pages" items={topPages} />
+
+          {/* Top Referrers */}
+          <PanelCard title="Top Referrers" items={topReferrers} />
+
+          {/* Locations */}
+          <div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6">
+            <h3 className="text-sm font-semibold text-neutral-400 uppercase tracking-wider mb-4">
+              Locations
+            </h3>
+            <div className="space-y-3">
+              {locations.map((loc) => (
+                <div key={loc.name}>
+                  <div className="flex items-center gap-3 mb-1">
+                    <span className="text-lg">{loc.flag}</span>
+                    <span className="text-neutral-300 text-sm flex-1">
+                      {loc.name}
+                    </span>
+                    <span className="text-neutral-500 text-sm">
+                      {loc.pct}%
+                    </span>
+                  </div>
+                  <div className="h-2 bg-neutral-800 rounded-full overflow-hidden ml-8">
+                    <div
+                      className="h-full bg-brand-orange rounded-full"
+                      style={{ width: `${loc.pct}%` }}
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Technology */}
+          <PanelCard title="Technology" items={technology} />
+
+          {/* Campaigns */}
+          <PanelCard title="Campaigns" items={campaigns} />
+
+          {/* Peak Hours */}
+          <div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6">
+            <h3 className="text-sm font-semibold text-neutral-400 uppercase tracking-wider mb-4">
+              Peak Hours
+            </h3>
+            <div className="space-y-1">
+              {heatmap.current.map((row, dayIdx) => (
+                <div key={dayIdx} className="flex items-center gap-1">
+                  <span className="text-[10px] text-neutral-500 w-6 shrink-0">
+                    {dayLabels[dayIdx]}
+                  </span>
+                  <div className="flex gap-[2px] flex-1">
+                    {row.map((val, hourIdx) => (
+                      <div
+                        key={hourIdx}
+                        className={`w-3 h-3 rounded-sm ${heatmapOpacity(val)}`}
+                      />
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom gradient fade */}
+      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-neutral-950 to-transparent pointer-events-none" />
+    </div>
+  )
+}
+
+// ── Panel Card sub-component ─────────────────────────────────
+
+function PanelCard({
+  title,
+  items,
+}: {
+  title: string
+  items: { label: string; pct: number }[]
+}) {
+  return (
+    <div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6">
+      <h3 className="text-sm font-semibold text-neutral-400 uppercase tracking-wider mb-4">
+        {title}
+      </h3>
+      <div className="space-y-3">
+        {items.map((item) => (
+          <div key={item.label}>
+            <div className="flex justify-between text-sm mb-1">
+              <span className="text-neutral-300">{item.label}</span>
+              <span className="text-neutral-500">{item.pct}%</span>
+            </div>
+            <div className="h-2 bg-neutral-800 rounded-full overflow-hidden">
+              <div
+                className="h-full bg-brand-orange rounded-full"
+                style={{ width: `${item.pct}%` }}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
-- 
2.49.1


From ca199b59fdb6f76d79375a7a40cca101d5028303 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 20:36:55 +0100
Subject: [PATCH 124/428] feat: replace fake LiveDemo with real dashboard
 components and fake data

---
 app/page.tsx                           |   4 +-
 components/marketing/DashboardDemo.tsx | 283 +++++++++++++++++
 components/marketing/LiveDemo.tsx      | 418 -------------------------
 3 files changed, 285 insertions(+), 420 deletions(-)
 create mode 100644 components/marketing/DashboardDemo.tsx
 delete mode 100644 components/marketing/LiveDemo.tsx

diff --git a/app/page.tsx b/app/page.tsx
index d3a0ca2..851f089 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -15,7 +15,7 @@ import DeleteSiteModal from '@/components/sites/DeleteSiteModal'
 import { Button } from '@ciphera-net/ui'
 import { XIcon, GlobeIcon } from '@ciphera-net/ui'
 import { Cookie, ShieldCheck, Code, Lightning, ArrowRight, GithubLogo } from '@phosphor-icons/react'
-import LiveDemo from '@/components/marketing/LiveDemo'
+import DashboardDemo from '@/components/marketing/DashboardDemo'
 import FeatureSections from '@/components/marketing/FeatureSections'
 import ComparisonCards from '@/components/marketing/ComparisonCards'
 import CTASection from '@/components/marketing/CTASection'
@@ -216,7 +216,7 @@ export default function HomePage() {
             transition={{ duration: 0.7, delay: 0.4 }}
             className="w-full max-w-7xl mx-auto px-6"
           >
-            <LiveDemo />
+            <DashboardDemo />
           </motion.div>
         </div>
 
diff --git a/components/marketing/DashboardDemo.tsx b/components/marketing/DashboardDemo.tsx
new file mode 100644
index 0000000..d123519
--- /dev/null
+++ b/components/marketing/DashboardDemo.tsx
@@ -0,0 +1,283 @@
+'use client'
+
+import Chart from '@/components/dashboard/Chart'
+import ContentStats from '@/components/dashboard/ContentStats'
+import TopReferrers from '@/components/dashboard/TopReferrers'
+import Locations from '@/components/dashboard/Locations'
+import TechSpecs from '@/components/dashboard/TechSpecs'
+import { useState } from 'react'
+
+// ─── Fake Data ───────────────────────────────────────────────────────
+
+const FAKE_STATS = { pageviews: 8432, visitors: 2847, bounce_rate: 42, avg_duration: 154 }
+const FAKE_PREV_STATS = { pageviews: 7821, visitors: 2543, bounce_rate: 45, avg_duration: 134 }
+
+const FAKE_DAILY_STATS = [
+  { date: '2026-03-21 00:00:00', pageviews: 12, visitors: 8, bounce_rate: 45, avg_duration: 120 },
+  { date: '2026-03-21 01:00:00', pageviews: 8, visitors: 5, bounce_rate: 50, avg_duration: 98 },
+  { date: '2026-03-21 02:00:00', pageviews: 5, visitors: 3, bounce_rate: 55, avg_duration: 85 },
+  { date: '2026-03-21 03:00:00', pageviews: 3, visitors: 2, bounce_rate: 60, avg_duration: 72 },
+  { date: '2026-03-21 04:00:00', pageviews: 4, visitors: 3, bounce_rate: 58, avg_duration: 80 },
+  { date: '2026-03-21 05:00:00', pageviews: 18, visitors: 12, bounce_rate: 48, avg_duration: 110 },
+  { date: '2026-03-21 06:00:00', pageviews: 45, visitors: 32, bounce_rate: 44, avg_duration: 125 },
+  { date: '2026-03-21 07:00:00', pageviews: 98, visitors: 67, bounce_rate: 40, avg_duration: 140 },
+  { date: '2026-03-21 08:00:00', pageviews: 234, visitors: 156, bounce_rate: 38, avg_duration: 158 },
+  { date: '2026-03-21 09:00:00', pageviews: 412, visitors: 278, bounce_rate: 36, avg_duration: 172 },
+  { date: '2026-03-21 10:00:00', pageviews: 523, visitors: 342, bounce_rate: 35, avg_duration: 180 },
+  { date: '2026-03-21 11:00:00', pageviews: 578, visitors: 367, bounce_rate: 37, avg_duration: 175 },
+  { date: '2026-03-21 12:00:00', pageviews: 498, visitors: 312, bounce_rate: 40, avg_duration: 162 },
+  { date: '2026-03-21 13:00:00', pageviews: 612, visitors: 398, bounce_rate: 34, avg_duration: 185 },
+  { date: '2026-03-21 14:00:00', pageviews: 687, visitors: 445, bounce_rate: 32, avg_duration: 192 },
+  { date: '2026-03-21 15:00:00', pageviews: 721, visitors: 468, bounce_rate: 31, avg_duration: 198 },
+  { date: '2026-03-21 16:00:00', pageviews: 654, visitors: 423, bounce_rate: 33, avg_duration: 188 },
+  { date: '2026-03-21 17:00:00', pageviews: 543, visitors: 356, bounce_rate: 36, avg_duration: 170 },
+  { date: '2026-03-21 18:00:00', pageviews: 432, visitors: 287, bounce_rate: 39, avg_duration: 156 },
+  { date: '2026-03-21 19:00:00', pageviews: 367, visitors: 245, bounce_rate: 41, avg_duration: 148 },
+  { date: '2026-03-21 20:00:00', pageviews: 298, visitors: 198, bounce_rate: 43, avg_duration: 138 },
+  { date: '2026-03-21 21:00:00', pageviews: 234, visitors: 156, bounce_rate: 44, avg_duration: 130 },
+  { date: '2026-03-21 22:00:00', pageviews: 167, visitors: 112, bounce_rate: 46, avg_duration: 122 },
+  { date: '2026-03-21 23:00:00', pageviews: 89, visitors: 58, bounce_rate: 48, avg_duration: 115 },
+]
+
+const FAKE_TOP_PAGES = [
+  { path: '/', pageviews: 2341, visits: 1892 },
+  { path: '/products/pulse', pageviews: 1567, visits: 1234 },
+  { path: '/products/drop', pageviews: 987, visits: 812 },
+  { path: '/pricing', pageviews: 876, visits: 723 },
+  { path: '/blog/privacy-first-analytics', pageviews: 654, visits: 543 },
+  { path: '/about', pageviews: 432, visits: 367 },
+  { path: '/docs/getting-started', pageviews: 389, visits: 312 },
+  { path: '/blog/end-to-end-encryption', pageviews: 345, visits: 289 },
+  { path: '/contact', pageviews: 287, visits: 234 },
+  { path: '/careers', pageviews: 198, visits: 167 },
+]
+
+const FAKE_ENTRY_PAGES = [
+  { path: '/', pageviews: 1987, visits: 1654 },
+  { path: '/products/pulse', pageviews: 1123, visits: 987 },
+  { path: '/blog/privacy-first-analytics', pageviews: 567, visits: 489 },
+  { path: '/products/drop', pageviews: 534, visits: 456 },
+  { path: '/pricing', pageviews: 423, visits: 378 },
+  { path: '/docs/getting-started', pageviews: 312, visits: 267 },
+  { path: '/about', pageviews: 234, visits: 198 },
+  { path: '/blog/end-to-end-encryption', pageviews: 198, visits: 167 },
+  { path: '/careers', pageviews: 145, visits: 123 },
+  { path: '/contact', pageviews: 112, visits: 98 },
+]
+
+const FAKE_EXIT_PAGES = [
+  { path: '/pricing', pageviews: 1456, visits: 1234 },
+  { path: '/', pageviews: 1234, visits: 1087 },
+  { path: '/contact', pageviews: 876, visits: 756 },
+  { path: '/products/drop', pageviews: 654, visits: 543 },
+  { path: '/products/pulse', pageviews: 567, visits: 478 },
+  { path: '/docs/getting-started', pageviews: 432, visits: 367 },
+  { path: '/about', pageviews: 345, visits: 289 },
+  { path: '/blog/privacy-first-analytics', pageviews: 298, visits: 245 },
+  { path: '/careers', pageviews: 234, visits: 198 },
+  { path: '/blog/end-to-end-encryption', pageviews: 178, visits: 145 },
+]
+
+const FAKE_REFERRERS = [
+  { referrer: 'google.com', pageviews: 3421 },
+  { referrer: '(direct)', pageviews: 2100 },
+  { referrer: 'twitter.com', pageviews: 876 },
+  { referrer: 'github.com', pageviews: 654 },
+  { referrer: 'reddit.com', pageviews: 432 },
+  { referrer: 'producthunt.com', pageviews: 312 },
+  { referrer: 'news.ycombinator.com', pageviews: 267 },
+  { referrer: 'linkedin.com', pageviews: 198 },
+  { referrer: 'duckduckgo.com', pageviews: 112 },
+  { referrer: 'dev.to', pageviews: 78 },
+]
+
+const FAKE_COUNTRIES = [
+  { country: 'CH', pageviews: 2534 },
+  { country: 'DE', pageviews: 1856 },
+  { country: 'US', pageviews: 1234 },
+  { country: 'FR', pageviews: 876 },
+  { country: 'GB', pageviews: 654 },
+  { country: 'NL', pageviews: 432 },
+  { country: 'AT', pageviews: 312 },
+  { country: 'SE', pageviews: 198 },
+  { country: 'JP', pageviews: 156 },
+  { country: 'CA', pageviews: 134 },
+]
+
+const FAKE_CITIES = [
+  { city: 'Zurich', country: 'CH', pageviews: 1234 },
+  { city: 'Geneva', country: 'CH', pageviews: 678 },
+  { city: 'Berlin', country: 'DE', pageviews: 567 },
+  { city: 'Munich', country: 'DE', pageviews: 432 },
+  { city: 'San Francisco', country: 'US', pageviews: 345 },
+  { city: 'Paris', country: 'FR', pageviews: 312 },
+  { city: 'London', country: 'GB', pageviews: 289 },
+  { city: 'Amsterdam', country: 'NL', pageviews: 234 },
+  { city: 'Vienna', country: 'AT', pageviews: 198 },
+  { city: 'New York', country: 'US', pageviews: 178 },
+]
+
+const FAKE_REGIONS = [
+  { region: 'Zurich', country: 'CH', pageviews: 1567 },
+  { region: 'Geneva', country: 'CH', pageviews: 734 },
+  { region: 'Bavaria', country: 'DE', pageviews: 523 },
+  { region: 'Berlin', country: 'DE', pageviews: 489 },
+  { region: 'California', country: 'US', pageviews: 456 },
+  { region: 'Ile-de-France', country: 'FR', pageviews: 345 },
+  { region: 'England', country: 'GB', pageviews: 312 },
+  { region: 'North Holland', country: 'NL', pageviews: 267 },
+  { region: 'Bern', country: 'CH', pageviews: 234 },
+  { region: 'New York', country: 'US', pageviews: 198 },
+]
+
+const FAKE_BROWSERS = [
+  { browser: 'Chrome', pageviews: 5234 },
+  { browser: 'Firefox', pageviews: 1518 },
+  { browser: 'Safari', pageviews: 987 },
+  { browser: 'Edge', pageviews: 456 },
+  { browser: 'Brave', pageviews: 178 },
+  { browser: 'Arc', pageviews: 59 },
+]
+
+const FAKE_OS = [
+  { os: 'macOS', pageviews: 3421 },
+  { os: 'Windows', pageviews: 2567 },
+  { os: 'Linux', pageviews: 1234 },
+  { os: 'iOS', pageviews: 756 },
+  { os: 'Android', pageviews: 454 },
+]
+
+const FAKE_DEVICES = [
+  { device: 'Desktop', pageviews: 5876 },
+  { device: 'Mobile', pageviews: 1987 },
+  { device: 'Tablet', pageviews: 569 },
+]
+
+const FAKE_SCREEN_RESOLUTIONS = [
+  { screen_resolution: '1920x1080', pageviews: 2345 },
+  { screen_resolution: '1440x900', pageviews: 1567 },
+  { screen_resolution: '2560x1440', pageviews: 1234 },
+  { screen_resolution: '1366x768', pageviews: 876 },
+  { screen_resolution: '3840x2160', pageviews: 654 },
+  { screen_resolution: '1536x864', pageviews: 432 },
+  { screen_resolution: '390x844', pageviews: 312 },
+  { screen_resolution: '393x873', pageviews: 234 },
+]
+
+// ─── Component ───────────────────────────────────────────────────────
+
+export default function DashboardDemo() {
+  const [todayInterval, setTodayInterval] = useState<'minute' | 'hour'>('hour')
+  const [multiDayInterval, setMultiDayInterval] = useState<'hour' | 'day'>('day')
+  const today = new Date().toISOString().split('T')[0]
+  const dateRange = { start: today, end: today }
+
+  const noop = () => {}
+
+  return (
+    <div className="relative">
+      {/* Browser chrome */}
+      <div className="rounded-t-xl border border-white/[0.08] border-b-0">
+        <div className="flex items-center px-4 py-3 bg-neutral-800/80 rounded-t-xl">
+          <div className="flex gap-2">
+            <div className="w-3 h-3 rounded-full bg-red-500/20" />
+            <div className="w-3 h-3 rounded-full bg-yellow-500/20" />
+            <div className="w-3 h-3 rounded-full bg-green-500/20" />
+          </div>
+          <div className="ml-4 flex-1 max-w-sm h-7 rounded-md bg-neutral-700/50 flex items-center px-3">
+            <span className="text-xs text-neutral-400 font-mono">pulse.ciphera.net/sites/demo</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Dashboard content */}
+      <div className="relative border border-white/[0.08] border-t-0 rounded-b-xl overflow-hidden max-h-[1000px]">
+        <div className="bg-neutral-950 p-4 sm:p-6">
+          {/* Dashboard header */}
+          <div className="flex items-center justify-between mb-6">
+            <div className="flex items-center gap-4">
+              <div>
+                <h2 className="text-xl font-bold text-white">Ciphera</h2>
+                <p className="text-sm text-neutral-400">ciphera.net</p>
+              </div>
+              <div className="flex items-center gap-2 px-3 py-1 bg-green-500/10 rounded-full border border-green-500/20">
+                <span className="relative flex h-2 w-2">
+                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75" />
+                  <span className="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
+                </span>
+                <span className="text-sm font-medium text-green-400">12 current visitors</span>
+              </div>
+            </div>
+            <div className="px-4 py-2 rounded-lg bg-neutral-900/80 border border-white/[0.08] text-sm text-neutral-300">
+              Today
+            </div>
+          </div>
+
+          {/* Chart with stats */}
+          <div className="mb-6">
+            <Chart
+              data={FAKE_DAILY_STATS}
+              stats={FAKE_STATS}
+              prevStats={FAKE_PREV_STATS}
+              interval={todayInterval}
+              dateRange={dateRange}
+              period="today"
+              todayInterval={todayInterval}
+              setTodayInterval={setTodayInterval}
+              multiDayInterval={multiDayInterval}
+              setMultiDayInterval={setMultiDayInterval}
+            />
+          </div>
+
+          {/* 2-col grid: Pages + Referrers */}
+          <div className="grid gap-6 lg:grid-cols-2 mb-6 [&>*]:min-w-0">
+            <ContentStats
+              topPages={FAKE_TOP_PAGES}
+              entryPages={FAKE_ENTRY_PAGES}
+              exitPages={FAKE_EXIT_PAGES}
+              domain="ciphera.net"
+              collectPagePaths={true}
+              siteId="demo"
+              dateRange={dateRange}
+              onFilter={noop}
+            />
+            <TopReferrers
+              referrers={FAKE_REFERRERS}
+              collectReferrers={true}
+              siteId="demo"
+              dateRange={dateRange}
+              onFilter={noop}
+            />
+          </div>
+
+          {/* 2-col grid: Locations + Tech */}
+          <div className="grid gap-6 lg:grid-cols-2 mb-6 [&>*]:min-w-0">
+            <Locations
+              countries={FAKE_COUNTRIES}
+              cities={FAKE_CITIES}
+              regions={FAKE_REGIONS}
+              geoDataLevel="full"
+              siteId="demo"
+              dateRange={dateRange}
+              onFilter={noop}
+            />
+            <TechSpecs
+              browsers={FAKE_BROWSERS}
+              os={FAKE_OS}
+              devices={FAKE_DEVICES}
+              screenResolutions={FAKE_SCREEN_RESOLUTIONS}
+              collectDeviceInfo={true}
+              collectScreenResolution={true}
+              siteId="demo"
+              dateRange={dateRange}
+              onFilter={noop}
+            />
+          </div>
+        </div>
+
+        {/* Bottom gradient fade */}
+        <div className="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-t from-neutral-950 to-transparent pointer-events-none" />
+      </div>
+    </div>
+  )
+}
diff --git a/components/marketing/LiveDemo.tsx b/components/marketing/LiveDemo.tsx
deleted file mode 100644
index 5ff53d6..0000000
--- a/components/marketing/LiveDemo.tsx
+++ /dev/null
@@ -1,418 +0,0 @@
-'use client'
-
-import { useState, useEffect, useRef } from 'react'
-
-// ── Helpers ──────────────────────────────────────────────────
-
-function rand(min: number, max: number) {
-  return Math.floor(Math.random() * (max - min + 1)) + min
-}
-
-function fmtDuration(seconds: number) {
-  const m = Math.floor(seconds / 60)
-  const s = seconds % 60
-  return `${m}m ${s}s`
-}
-
-// Generate realistic hourly visitor counts (low at night, peak afternoon)
-function generateHourlyPattern(): { hour: string; visitors: number; pageviews: number }[] {
-  const base = [
-    12, 8, 5, 4, 3, 4, 8, 18, 35, 52, 64, 72,
-    78, 85, 88, 82, 74, 60, 48, 38, 30, 25, 20, 16,
-  ]
-  return base.map((v, i) => ({
-    hour: `${String(i).padStart(2, '0')}:00`,
-    visitors: v + rand(-4, 4),
-    pageviews: Math.round(v * 2.8) + rand(-6, 6),
-  }))
-}
-
-// ── Static panel data ────────────────────────────────────────
-
-const topPages = [
-  { label: '/blog/privacy', pct: 85 },
-  { label: '/pricing', pct: 65 },
-  { label: '/docs', pct: 45 },
-  { label: '/about', pct: 30 },
-  { label: '/integrations', pct: 20 },
-]
-
-const topReferrers = [
-  { label: 'Google', pct: 40 },
-  { label: 'Direct', pct: 25 },
-  { label: 'Twitter', pct: 15 },
-  { label: 'GitHub', pct: 12 },
-  { label: 'Reddit', pct: 8 },
-]
-
-const locations = [
-  { flag: '\u{1F1E8}\u{1F1ED}', name: 'Switzerland', pct: 30 },
-  { flag: '\u{1F1E9}\u{1F1EA}', name: 'Germany', pct: 22 },
-  { flag: '\u{1F1FA}\u{1F1F8}', name: 'USA', pct: 18 },
-  { flag: '\u{1F1EB}\u{1F1F7}', name: 'France', pct: 15 },
-  { flag: '\u{1F1EC}\u{1F1E7}', name: 'UK', pct: 15 },
-]
-
-const technology = [
-  { label: 'Chrome', pct: 62 },
-  { label: 'Firefox', pct: 18 },
-  { label: 'Safari', pct: 15 },
-  { label: 'Edge', pct: 5 },
-]
-
-const campaigns = [
-  { label: 'newsletter', pct: 45 },
-  { label: 'twitter', pct: 30 },
-  { label: 'producthunt', pct: 25 },
-]
-
-// Generate heatmap data: 7 rows (Mon-Sun) x 24 cols (hours)
-function generateHeatmap(): number[][] {
-  return Array.from({ length: 7 }, (_, day) =>
-    Array.from({ length: 24 }, (_, hour) => {
-      const isWeekend = day >= 5
-      const isNight = hour >= 1 && hour <= 5
-      const isPeak = hour >= 9 && hour <= 17
-      const isMorning = hour >= 7 && hour <= 9
-      const isEvening = hour >= 17 && hour <= 21
-
-      if (isNight) return rand(0, 1)
-      if (isWeekend) {
-        if (isPeak) return rand(2, 4)
-        return rand(1, 3)
-      }
-      if (isPeak) return rand(5, 8)
-      if (isMorning || isEvening) return rand(3, 5)
-      return rand(1, 3)
-    })
-  )
-}
-
-function heatmapOpacity(value: number): string {
-  if (value <= 1) return 'bg-brand-orange/[0.05]'
-  if (value <= 3) return 'bg-brand-orange/[0.2]'
-  if (value <= 5) return 'bg-brand-orange/[0.5]'
-  return 'bg-brand-orange/[0.8]'
-}
-
-// ── SVG chart helpers ────────────────────────────────────────
-
-function buildSmoothPath(
-  points: { x: number; y: number }[],
-  close: boolean
-): string {
-  if (points.length < 2) return ''
-  const d: string[] = [`M ${points[0].x},${points[0].y}`]
-
-  for (let i = 0; i < points.length - 1; i++) {
-    const p0 = points[Math.max(i - 1, 0)]
-    const p1 = points[i]
-    const p2 = points[i + 1]
-    const p3 = points[Math.min(i + 2, points.length - 1)]
-
-    const cp1x = p1.x + (p2.x - p0.x) / 6
-    const cp1y = p1.y + (p2.y - p0.y) / 6
-    const cp2x = p2.x - (p3.x - p1.x) / 6
-    const cp2y = p2.y - (p3.y - p1.y) / 6
-
-    d.push(`C ${cp1x},${cp1y} ${cp2x},${cp2y} ${p2.x},${p2.y}`)
-  }
-
-  if (close) {
-    const last = points[points.length - 1]
-    const first = points[0]
-    d.push(`L ${last.x},200 L ${first.x},200 Z`)
-  }
-
-  return d.join(' ')
-}
-
-// ── Component ────────────────────────────────────────────────
-
-export default function LiveDemo() {
-  const [visitors, setVisitors] = useState(2847)
-  const [pageviews, setPageviews] = useState(8432)
-  const [bounceRate, setBounceRate] = useState(42)
-  const [avgDuration, setAvgDuration] = useState(154)
-  const [realtimeVisitors, setRealtimeVisitors] = useState(12)
-  const [chartData, setChartData] = useState(generateHourlyPattern)
-  const heatmap = useRef(generateHeatmap())
-
-  useEffect(() => {
-    const id = setInterval(() => {
-      setVisitors((v) => v + rand(1, 3))
-      setPageviews((v) => v + rand(2, 5))
-      setBounceRate(() => 38 + rand(0, 7))
-      setAvgDuration(() => 130 + rand(0, 90))
-      setRealtimeVisitors(() => 8 + rand(0, 7))
-      setChartData((prev) => {
-        const next = [...prev]
-        const lastHourNum =
-          parseInt(next[next.length - 1].hour.split(':')[0], 10)
-        const newHour = (lastHourNum + 1) % 24
-        next.push({
-          hour: `${String(newHour).padStart(2, '0')}:00`,
-          visitors: rand(20, 90),
-          pageviews: rand(50, 250),
-        })
-        if (next.length > 24) next.shift()
-        return next
-      })
-    }, 2500)
-    return () => clearInterval(id)
-  }, [])
-
-  // ── Chart SVG ──────────────────────────────────────────────
-
-  const chartW = 800
-  const chartH = 200
-  const maxVisitors = Math.max(...chartData.map((d) => d.visitors), 1)
-
-  const chartPoints = chartData.map((d, i) => ({
-    x: (i / (chartData.length - 1)) * chartW,
-    y: chartH - (d.visitors / maxVisitors) * (chartH - 20) - 10,
-  }))
-
-  const linePath = buildSmoothPath(chartPoints, false)
-  const areaPath = buildSmoothPath(chartPoints, true)
-
-  // ── Stats config ───────────────────────────────────────────
-
-  const stats = [
-    {
-      label: 'Visitors',
-      value: visitors.toLocaleString(),
-      change: '+12%',
-      positive: true,
-    },
-    {
-      label: 'Pageviews',
-      value: pageviews.toLocaleString(),
-      change: '+8%',
-      positive: true,
-    },
-    {
-      label: 'Bounce Rate',
-      value: `${bounceRate}%`,
-      change: '-3%',
-      positive: false,
-    },
-    {
-      label: 'Avg. Duration',
-      value: fmtDuration(avgDuration),
-      change: '+15%',
-      positive: true,
-    },
-  ]
-
-  const xLabels = chartData
-    .map((d, i) => ({ label: d.hour, i }))
-    .filter((d) => parseInt(d.label.split(':')[0], 10) % 4 === 0)
-
-  const dayLabels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-
-  // ── Render ─────────────────────────────────────────────────
-
-  return (
-    <div className="w-full max-h-[900px] overflow-hidden relative rounded-xl shadow-2xl">
-      {/* Browser chrome */}
-      <div className="bg-neutral-800 border-b border-neutral-800 px-4 py-3 flex items-center gap-3">
-        <div className="flex items-center gap-1.5">
-          <span className="w-3 h-3 rounded-full bg-red-500/20" />
-          <span className="w-3 h-3 rounded-full bg-yellow-500/20" />
-          <span className="w-3 h-3 rounded-full bg-green-500/20" />
-        </div>
-        <div className="flex-1 bg-neutral-900/80 rounded-md px-3 py-1 text-xs text-neutral-500 text-center">
-          pulse.ciphera.net/sites/demo
-        </div>
-      </div>
-
-      {/* Dashboard body */}
-      <div className="bg-neutral-950 px-6 py-5 space-y-5">
-        {/* Header bar */}
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <span className="text-white font-bold text-lg">Ciphera</span>
-            <span className="text-neutral-500 text-sm">ciphera.net</span>
-            <span className="flex items-center gap-1.5 text-xs text-neutral-400 ml-2">
-              <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
-              {realtimeVisitors} current visitors
-            </span>
-          </div>
-          <span className="text-xs text-neutral-400 bg-neutral-800 px-3 py-1 rounded-full border border-white/[0.08]">
-            Today
-          </span>
-        </div>
-
-        {/* Stats bar */}
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          {stats.map((s) => (
-            <div
-              key={s.label}
-              className="bg-neutral-900/80 border border-white/[0.08] rounded-xl p-4"
-            >
-              <div className="text-xs text-neutral-500 uppercase tracking-wider mb-1">
-                {s.label}
-              </div>
-              <div className="text-2xl font-bold text-white">{s.value}</div>
-              <div
-                className={`text-xs mt-1 ${
-                  s.positive ? 'text-green-400' : 'text-orange-400'
-                }`}
-              >
-                {s.positive ? '\u2191' : '\u2193'}
-                {s.change.replace(/[+-]/, '')}
-              </div>
-            </div>
-          ))}
-        </div>
-
-        {/* Chart */}
-        <div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6">
-          <svg
-            viewBox={`0 0 ${chartW} ${chartH + 30}`}
-            className="w-full"
-            preserveAspectRatio="none"
-          >
-            <defs>
-              <linearGradient
-                id="chartGrad"
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="1"
-              >
-                <stop offset="0%" stopColor="#FD5E0F" stopOpacity="0.4" />
-                <stop offset="100%" stopColor="#FD5E0F" stopOpacity="0" />
-              </linearGradient>
-            </defs>
-            <path d={areaPath} fill="url(#chartGrad)" />
-            <path
-              d={linePath}
-              fill="none"
-              stroke="#FD5E0F"
-              strokeWidth="2"
-            />
-            {/* X-axis labels */}
-            {xLabels.map(({ label, i }) => (
-              <text
-                key={label + i}
-                x={(i / (chartData.length - 1)) * chartW}
-                y={chartH + 22}
-                fill="#525252"
-                fontSize="11"
-                textAnchor="middle"
-              >
-                {label}
-              </text>
-            ))}
-          </svg>
-        </div>
-
-        {/* Two-column panels */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
-          {/* Top Pages */}
-          <PanelCard title="Top Pages" items={topPages} />
-
-          {/* Top Referrers */}
-          <PanelCard title="Top Referrers" items={topReferrers} />
-
-          {/* Locations */}
-          <div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6">
-            <h3 className="text-sm font-semibold text-neutral-400 uppercase tracking-wider mb-4">
-              Locations
-            </h3>
-            <div className="space-y-3">
-              {locations.map((loc) => (
-                <div key={loc.name}>
-                  <div className="flex items-center gap-3 mb-1">
-                    <span className="text-lg">{loc.flag}</span>
-                    <span className="text-neutral-300 text-sm flex-1">
-                      {loc.name}
-                    </span>
-                    <span className="text-neutral-500 text-sm">
-                      {loc.pct}%
-                    </span>
-                  </div>
-                  <div className="h-2 bg-neutral-800 rounded-full overflow-hidden ml-8">
-                    <div
-                      className="h-full bg-brand-orange rounded-full"
-                      style={{ width: `${loc.pct}%` }}
-                    />
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Technology */}
-          <PanelCard title="Technology" items={technology} />
-
-          {/* Campaigns */}
-          <PanelCard title="Campaigns" items={campaigns} />
-
-          {/* Peak Hours */}
-          <div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6">
-            <h3 className="text-sm font-semibold text-neutral-400 uppercase tracking-wider mb-4">
-              Peak Hours
-            </h3>
-            <div className="space-y-1">
-              {heatmap.current.map((row, dayIdx) => (
-                <div key={dayIdx} className="flex items-center gap-1">
-                  <span className="text-[10px] text-neutral-500 w-6 shrink-0">
-                    {dayLabels[dayIdx]}
-                  </span>
-                  <div className="flex gap-[2px] flex-1">
-                    {row.map((val, hourIdx) => (
-                      <div
-                        key={hourIdx}
-                        className={`w-3 h-3 rounded-sm ${heatmapOpacity(val)}`}
-                      />
-                    ))}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Bottom gradient fade */}
-      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-neutral-950 to-transparent pointer-events-none" />
-    </div>
-  )
-}
-
-// ── Panel Card sub-component ─────────────────────────────────
-
-function PanelCard({
-  title,
-  items,
-}: {
-  title: string
-  items: { label: string; pct: number }[]
-}) {
-  return (
-    <div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6">
-      <h3 className="text-sm font-semibold text-neutral-400 uppercase tracking-wider mb-4">
-        {title}
-      </h3>
-      <div className="space-y-3">
-        {items.map((item) => (
-          <div key={item.label}>
-            <div className="flex justify-between text-sm mb-1">
-              <span className="text-neutral-300">{item.label}</span>
-              <span className="text-neutral-500">{item.pct}%</span>
-            </div>
-            <div className="h-2 bg-neutral-800 rounded-full overflow-hidden">
-              <div
-                className="h-full bg-brand-orange rounded-full"
-                style={{ width: `${item.pct}%` }}
-              />
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-- 
2.49.1


From 941782efe153508988679c26ddfb1aee349be44d Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 20:41:02 +0100
Subject: [PATCH 125/428] fix: remove browser chrome, make dashboard
 scrollable, add showcase gradient bg

---
 components/marketing/DashboardDemo.tsx | 27 ++++++++------------------
 1 file changed, 8 insertions(+), 19 deletions(-)

diff --git a/components/marketing/DashboardDemo.tsx b/components/marketing/DashboardDemo.tsx
index d123519..afe449f 100644
--- a/components/marketing/DashboardDemo.tsx
+++ b/components/marketing/DashboardDemo.tsx
@@ -176,23 +176,15 @@ export default function DashboardDemo() {
 
   return (
     <div className="relative">
-      {/* Browser chrome */}
-      <div className="rounded-t-xl border border-white/[0.08] border-b-0">
-        <div className="flex items-center px-4 py-3 bg-neutral-800/80 rounded-t-xl">
-          <div className="flex gap-2">
-            <div className="w-3 h-3 rounded-full bg-red-500/20" />
-            <div className="w-3 h-3 rounded-full bg-yellow-500/20" />
-            <div className="w-3 h-3 rounded-full bg-green-500/20" />
-          </div>
-          <div className="ml-4 flex-1 max-w-sm h-7 rounded-md bg-neutral-700/50 flex items-center px-3">
-            <span className="text-xs text-neutral-400 font-mono">pulse.ciphera.net/sites/demo</span>
-          </div>
-        </div>
-      </div>
+      {/* Orange glow behind */}
+      <div className="absolute -inset-8 bg-brand-orange/8 rounded-[2.5rem] blur-3xl" />
 
       {/* Dashboard content */}
-      <div className="relative border border-white/[0.08] border-t-0 rounded-b-xl overflow-hidden max-h-[1000px]">
-        <div className="bg-neutral-950 p-4 sm:p-6">
+      <div className="relative rounded-3xl border border-white/[0.08] overflow-hidden">
+        <img src="/pulse-showcase-bg.png" alt="" className="absolute inset-0 w-full h-full object-cover" />
+        <div className="absolute inset-0 bg-black/30" />
+
+        <div className="relative p-4 sm:p-6">
           {/* Dashboard header */}
           <div className="flex items-center justify-between mb-6">
             <div className="flex items-center gap-4">
@@ -251,7 +243,7 @@ export default function DashboardDemo() {
           </div>
 
           {/* 2-col grid: Locations + Tech */}
-          <div className="grid gap-6 lg:grid-cols-2 mb-6 [&>*]:min-w-0">
+          <div className="grid gap-6 lg:grid-cols-2 [&>*]:min-w-0">
             <Locations
               countries={FAKE_COUNTRIES}
               cities={FAKE_CITIES}
@@ -274,9 +266,6 @@ export default function DashboardDemo() {
             />
           </div>
         </div>
-
-        {/* Bottom gradient fade */}
-        <div className="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-t from-neutral-950 to-transparent pointer-events-none" />
       </div>
     </div>
   )
-- 
2.49.1


From 39cd1c596c3e15cf7eb6ccb0c2c3610f06a758ae Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 20:46:16 +0100
Subject: [PATCH 126/428] fix: move showcase bg to outer container, increase
 overlay opacity for card contrast

---
 components/marketing/DashboardDemo.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/marketing/DashboardDemo.tsx b/components/marketing/DashboardDemo.tsx
index afe449f..812901f 100644
--- a/components/marketing/DashboardDemo.tsx
+++ b/components/marketing/DashboardDemo.tsx
@@ -179,12 +179,12 @@ export default function DashboardDemo() {
       {/* Orange glow behind */}
       <div className="absolute -inset-8 bg-brand-orange/8 rounded-[2.5rem] blur-3xl" />
 
-      {/* Dashboard content */}
+      {/* Outer container with showcase bg */}
       <div className="relative rounded-3xl border border-white/[0.08] overflow-hidden">
         <img src="/pulse-showcase-bg.png" alt="" className="absolute inset-0 w-full h-full object-cover" />
-        <div className="absolute inset-0 bg-black/30" />
+        <div className="absolute inset-0 bg-black/50" />
 
-        <div className="relative p-4 sm:p-6">
+        <div className="relative p-4 sm:p-6 lg:p-8">
           {/* Dashboard header */}
           <div className="flex items-center justify-between mb-6">
             <div className="flex items-center gap-4">
-- 
2.49.1


From af625326159128086c3c54646b96da689aca0e6e Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 20:50:21 +0100
Subject: [PATCH 127/428] fix: showcase bg as outer frame, solid dark
 background for dashboard content

---
 components/marketing/DashboardDemo.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/marketing/DashboardDemo.tsx b/components/marketing/DashboardDemo.tsx
index 812901f..ca50ff8 100644
--- a/components/marketing/DashboardDemo.tsx
+++ b/components/marketing/DashboardDemo.tsx
@@ -179,12 +179,13 @@ export default function DashboardDemo() {
       {/* Orange glow behind */}
       <div className="absolute -inset-8 bg-brand-orange/8 rounded-[2.5rem] blur-3xl" />
 
-      {/* Outer container with showcase bg */}
-      <div className="relative rounded-3xl border border-white/[0.08] overflow-hidden">
+      {/* Outer frame with showcase bg */}
+      <div className="relative rounded-3xl border border-white/[0.08] overflow-hidden p-3 sm:p-4 lg:p-5">
         <img src="/pulse-showcase-bg.png" alt="" className="absolute inset-0 w-full h-full object-cover" />
-        <div className="absolute inset-0 bg-black/50" />
+        <div className="absolute inset-0 bg-black/40" />
 
-        <div className="relative p-4 sm:p-6 lg:p-8">
+        {/* Inner dashboard — solid background */}
+        <div className="relative rounded-2xl bg-neutral-950 p-4 sm:p-6">
           {/* Dashboard header */}
           <div className="flex items-center justify-between mb-6">
             <div className="flex items-center gap-4">
@@ -266,6 +267,7 @@ export default function DashboardDemo() {
             />
           </div>
         </div>
+        </div>
       </div>
     </div>
   )
-- 
2.49.1


From 0bd2f94dd783949294c2e83fe770b73fc096e102 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 20:53:04 +0100
Subject: [PATCH 128/428] fix: fix div nesting in DashboardDemo

---
 components/marketing/DashboardDemo.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/marketing/DashboardDemo.tsx b/components/marketing/DashboardDemo.tsx
index ca50ff8..88dc7d4 100644
--- a/components/marketing/DashboardDemo.tsx
+++ b/components/marketing/DashboardDemo.tsx
@@ -267,7 +267,6 @@ export default function DashboardDemo() {
             />
           </div>
         </div>
-        </div>
       </div>
     </div>
   )
-- 
2.49.1


From 9ce272d3e5e1b3d7424959c064c31a457c615d73 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 20:57:10 +0100
Subject: [PATCH 129/428] fix: smooth chart data and increase outer frame
 padding for more visible gradient

---
 components/marketing/DashboardDemo.tsx | 50 +++++++++++++-------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/components/marketing/DashboardDemo.tsx b/components/marketing/DashboardDemo.tsx
index 88dc7d4..2edc0b2 100644
--- a/components/marketing/DashboardDemo.tsx
+++ b/components/marketing/DashboardDemo.tsx
@@ -13,30 +13,30 @@ const FAKE_STATS = { pageviews: 8432, visitors: 2847, bounce_rate: 42, avg_durat
 const FAKE_PREV_STATS = { pageviews: 7821, visitors: 2543, bounce_rate: 45, avg_duration: 134 }
 
 const FAKE_DAILY_STATS = [
-  { date: '2026-03-21 00:00:00', pageviews: 12, visitors: 8, bounce_rate: 45, avg_duration: 120 },
-  { date: '2026-03-21 01:00:00', pageviews: 8, visitors: 5, bounce_rate: 50, avg_duration: 98 },
-  { date: '2026-03-21 02:00:00', pageviews: 5, visitors: 3, bounce_rate: 55, avg_duration: 85 },
-  { date: '2026-03-21 03:00:00', pageviews: 3, visitors: 2, bounce_rate: 60, avg_duration: 72 },
-  { date: '2026-03-21 04:00:00', pageviews: 4, visitors: 3, bounce_rate: 58, avg_duration: 80 },
-  { date: '2026-03-21 05:00:00', pageviews: 18, visitors: 12, bounce_rate: 48, avg_duration: 110 },
-  { date: '2026-03-21 06:00:00', pageviews: 45, visitors: 32, bounce_rate: 44, avg_duration: 125 },
-  { date: '2026-03-21 07:00:00', pageviews: 98, visitors: 67, bounce_rate: 40, avg_duration: 140 },
-  { date: '2026-03-21 08:00:00', pageviews: 234, visitors: 156, bounce_rate: 38, avg_duration: 158 },
-  { date: '2026-03-21 09:00:00', pageviews: 412, visitors: 278, bounce_rate: 36, avg_duration: 172 },
-  { date: '2026-03-21 10:00:00', pageviews: 523, visitors: 342, bounce_rate: 35, avg_duration: 180 },
-  { date: '2026-03-21 11:00:00', pageviews: 578, visitors: 367, bounce_rate: 37, avg_duration: 175 },
-  { date: '2026-03-21 12:00:00', pageviews: 498, visitors: 312, bounce_rate: 40, avg_duration: 162 },
-  { date: '2026-03-21 13:00:00', pageviews: 612, visitors: 398, bounce_rate: 34, avg_duration: 185 },
-  { date: '2026-03-21 14:00:00', pageviews: 687, visitors: 445, bounce_rate: 32, avg_duration: 192 },
-  { date: '2026-03-21 15:00:00', pageviews: 721, visitors: 468, bounce_rate: 31, avg_duration: 198 },
-  { date: '2026-03-21 16:00:00', pageviews: 654, visitors: 423, bounce_rate: 33, avg_duration: 188 },
-  { date: '2026-03-21 17:00:00', pageviews: 543, visitors: 356, bounce_rate: 36, avg_duration: 170 },
-  { date: '2026-03-21 18:00:00', pageviews: 432, visitors: 287, bounce_rate: 39, avg_duration: 156 },
-  { date: '2026-03-21 19:00:00', pageviews: 367, visitors: 245, bounce_rate: 41, avg_duration: 148 },
-  { date: '2026-03-21 20:00:00', pageviews: 298, visitors: 198, bounce_rate: 43, avg_duration: 138 },
-  { date: '2026-03-21 21:00:00', pageviews: 234, visitors: 156, bounce_rate: 44, avg_duration: 130 },
-  { date: '2026-03-21 22:00:00', pageviews: 167, visitors: 112, bounce_rate: 46, avg_duration: 122 },
-  { date: '2026-03-21 23:00:00', pageviews: 89, visitors: 58, bounce_rate: 48, avg_duration: 115 },
+  { date: '2026-03-21 00:00:00', pageviews: 45, visitors: 28, bounce_rate: 45, avg_duration: 120 },
+  { date: '2026-03-21 01:00:00', pageviews: 38, visitors: 24, bounce_rate: 47, avg_duration: 115 },
+  { date: '2026-03-21 02:00:00', pageviews: 32, visitors: 20, bounce_rate: 48, avg_duration: 108 },
+  { date: '2026-03-21 03:00:00', pageviews: 28, visitors: 18, bounce_rate: 50, avg_duration: 102 },
+  { date: '2026-03-21 04:00:00', pageviews: 35, visitors: 22, bounce_rate: 48, avg_duration: 110 },
+  { date: '2026-03-21 05:00:00', pageviews: 52, visitors: 34, bounce_rate: 46, avg_duration: 118 },
+  { date: '2026-03-21 06:00:00', pageviews: 85, visitors: 56, bounce_rate: 44, avg_duration: 125 },
+  { date: '2026-03-21 07:00:00', pageviews: 142, visitors: 95, bounce_rate: 42, avg_duration: 138 },
+  { date: '2026-03-21 08:00:00', pageviews: 215, visitors: 148, bounce_rate: 40, avg_duration: 152 },
+  { date: '2026-03-21 09:00:00', pageviews: 310, visitors: 212, bounce_rate: 38, avg_duration: 165 },
+  { date: '2026-03-21 10:00:00', pageviews: 398, visitors: 268, bounce_rate: 36, avg_duration: 172 },
+  { date: '2026-03-21 11:00:00', pageviews: 452, visitors: 305, bounce_rate: 37, avg_duration: 175 },
+  { date: '2026-03-21 12:00:00', pageviews: 425, visitors: 285, bounce_rate: 39, avg_duration: 168 },
+  { date: '2026-03-21 13:00:00', pageviews: 478, visitors: 322, bounce_rate: 36, avg_duration: 178 },
+  { date: '2026-03-21 14:00:00', pageviews: 512, visitors: 348, bounce_rate: 34, avg_duration: 185 },
+  { date: '2026-03-21 15:00:00', pageviews: 535, visitors: 362, bounce_rate: 33, avg_duration: 190 },
+  { date: '2026-03-21 16:00:00', pageviews: 498, visitors: 338, bounce_rate: 35, avg_duration: 182 },
+  { date: '2026-03-21 17:00:00', pageviews: 445, visitors: 298, bounce_rate: 37, avg_duration: 170 },
+  { date: '2026-03-21 18:00:00', pageviews: 385, visitors: 258, bounce_rate: 39, avg_duration: 160 },
+  { date: '2026-03-21 19:00:00', pageviews: 328, visitors: 218, bounce_rate: 41, avg_duration: 152 },
+  { date: '2026-03-21 20:00:00', pageviews: 275, visitors: 185, bounce_rate: 42, avg_duration: 142 },
+  { date: '2026-03-21 21:00:00', pageviews: 218, visitors: 148, bounce_rate: 43, avg_duration: 135 },
+  { date: '2026-03-21 22:00:00', pageviews: 155, visitors: 105, bounce_rate: 45, avg_duration: 125 },
+  { date: '2026-03-21 23:00:00', pageviews: 95, visitors: 62, bounce_rate: 46, avg_duration: 118 },
 ]
 
 const FAKE_TOP_PAGES = [
@@ -180,7 +180,7 @@ export default function DashboardDemo() {
       <div className="absolute -inset-8 bg-brand-orange/8 rounded-[2.5rem] blur-3xl" />
 
       {/* Outer frame with showcase bg */}
-      <div className="relative rounded-3xl border border-white/[0.08] overflow-hidden p-3 sm:p-4 lg:p-5">
+      <div className="relative rounded-3xl border border-white/[0.08] overflow-hidden p-4 sm:p-6 lg:p-8">
         <img src="/pulse-showcase-bg.png" alt="" className="absolute inset-0 w-full h-full object-cover" />
         <div className="absolute inset-0 bg-black/40" />
 
-- 
2.49.1


From b3bb0685f9f8b9f3806a6befa8fd6cc808763ea0 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 21:02:35 +0100
Subject: [PATCH 130/428] fix: smooth chart curve data, translucent dashboard,
 smaller demo container

---
 app/page.tsx                           |  2 +-
 components/marketing/DashboardDemo.tsx | 48 +++++++++++++-------------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 851f089..bc65d07 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -214,7 +214,7 @@ export default function HomePage() {
             initial={{ opacity: 0, y: 40 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.7, delay: 0.4 }}
-            className="w-full max-w-7xl mx-auto px-6"
+            className="w-full max-w-5xl mx-auto px-6"
           >
             <DashboardDemo />
           </motion.div>
diff --git a/components/marketing/DashboardDemo.tsx b/components/marketing/DashboardDemo.tsx
index 2edc0b2..deb6884 100644
--- a/components/marketing/DashboardDemo.tsx
+++ b/components/marketing/DashboardDemo.tsx
@@ -13,30 +13,30 @@ const FAKE_STATS = { pageviews: 8432, visitors: 2847, bounce_rate: 42, avg_durat
 const FAKE_PREV_STATS = { pageviews: 7821, visitors: 2543, bounce_rate: 45, avg_duration: 134 }
 
 const FAKE_DAILY_STATS = [
-  { date: '2026-03-21 00:00:00', pageviews: 45, visitors: 28, bounce_rate: 45, avg_duration: 120 },
+  { date: '2026-03-21 00:00:00', pageviews: 42, visitors: 26, bounce_rate: 46, avg_duration: 118 },
   { date: '2026-03-21 01:00:00', pageviews: 38, visitors: 24, bounce_rate: 47, avg_duration: 115 },
-  { date: '2026-03-21 02:00:00', pageviews: 32, visitors: 20, bounce_rate: 48, avg_duration: 108 },
-  { date: '2026-03-21 03:00:00', pageviews: 28, visitors: 18, bounce_rate: 50, avg_duration: 102 },
-  { date: '2026-03-21 04:00:00', pageviews: 35, visitors: 22, bounce_rate: 48, avg_duration: 110 },
-  { date: '2026-03-21 05:00:00', pageviews: 52, visitors: 34, bounce_rate: 46, avg_duration: 118 },
-  { date: '2026-03-21 06:00:00', pageviews: 85, visitors: 56, bounce_rate: 44, avg_duration: 125 },
-  { date: '2026-03-21 07:00:00', pageviews: 142, visitors: 95, bounce_rate: 42, avg_duration: 138 },
-  { date: '2026-03-21 08:00:00', pageviews: 215, visitors: 148, bounce_rate: 40, avg_duration: 152 },
-  { date: '2026-03-21 09:00:00', pageviews: 310, visitors: 212, bounce_rate: 38, avg_duration: 165 },
-  { date: '2026-03-21 10:00:00', pageviews: 398, visitors: 268, bounce_rate: 36, avg_duration: 172 },
-  { date: '2026-03-21 11:00:00', pageviews: 452, visitors: 305, bounce_rate: 37, avg_duration: 175 },
-  { date: '2026-03-21 12:00:00', pageviews: 425, visitors: 285, bounce_rate: 39, avg_duration: 168 },
-  { date: '2026-03-21 13:00:00', pageviews: 478, visitors: 322, bounce_rate: 36, avg_duration: 178 },
-  { date: '2026-03-21 14:00:00', pageviews: 512, visitors: 348, bounce_rate: 34, avg_duration: 185 },
-  { date: '2026-03-21 15:00:00', pageviews: 535, visitors: 362, bounce_rate: 33, avg_duration: 190 },
-  { date: '2026-03-21 16:00:00', pageviews: 498, visitors: 338, bounce_rate: 35, avg_duration: 182 },
-  { date: '2026-03-21 17:00:00', pageviews: 445, visitors: 298, bounce_rate: 37, avg_duration: 170 },
-  { date: '2026-03-21 18:00:00', pageviews: 385, visitors: 258, bounce_rate: 39, avg_duration: 160 },
-  { date: '2026-03-21 19:00:00', pageviews: 328, visitors: 218, bounce_rate: 41, avg_duration: 152 },
-  { date: '2026-03-21 20:00:00', pageviews: 275, visitors: 185, bounce_rate: 42, avg_duration: 142 },
-  { date: '2026-03-21 21:00:00', pageviews: 218, visitors: 148, bounce_rate: 43, avg_duration: 135 },
-  { date: '2026-03-21 22:00:00', pageviews: 155, visitors: 105, bounce_rate: 45, avg_duration: 125 },
-  { date: '2026-03-21 23:00:00', pageviews: 95, visitors: 62, bounce_rate: 46, avg_duration: 118 },
+  { date: '2026-03-21 02:00:00', pageviews: 35, visitors: 22, bounce_rate: 47, avg_duration: 112 },
+  { date: '2026-03-21 03:00:00', pageviews: 34, visitors: 21, bounce_rate: 48, avg_duration: 110 },
+  { date: '2026-03-21 04:00:00', pageviews: 36, visitors: 23, bounce_rate: 47, avg_duration: 112 },
+  { date: '2026-03-21 05:00:00', pageviews: 45, visitors: 29, bounce_rate: 46, avg_duration: 116 },
+  { date: '2026-03-21 06:00:00', pageviews: 62, visitors: 40, bounce_rate: 45, avg_duration: 122 },
+  { date: '2026-03-21 07:00:00', pageviews: 95, visitors: 62, bounce_rate: 43, avg_duration: 132 },
+  { date: '2026-03-21 08:00:00', pageviews: 148, visitors: 98, bounce_rate: 41, avg_duration: 145 },
+  { date: '2026-03-21 09:00:00', pageviews: 215, visitors: 145, bounce_rate: 39, avg_duration: 155 },
+  { date: '2026-03-21 10:00:00', pageviews: 285, visitors: 192, bounce_rate: 38, avg_duration: 162 },
+  { date: '2026-03-21 11:00:00', pageviews: 338, visitors: 228, bounce_rate: 37, avg_duration: 168 },
+  { date: '2026-03-21 12:00:00', pageviews: 355, visitors: 240, bounce_rate: 38, avg_duration: 165 },
+  { date: '2026-03-21 13:00:00', pageviews: 372, visitors: 252, bounce_rate: 37, avg_duration: 170 },
+  { date: '2026-03-21 14:00:00', pageviews: 390, visitors: 265, bounce_rate: 36, avg_duration: 175 },
+  { date: '2026-03-21 15:00:00', pageviews: 385, visitors: 260, bounce_rate: 36, avg_duration: 173 },
+  { date: '2026-03-21 16:00:00', pageviews: 362, visitors: 245, bounce_rate: 37, avg_duration: 168 },
+  { date: '2026-03-21 17:00:00', pageviews: 325, visitors: 218, bounce_rate: 38, avg_duration: 162 },
+  { date: '2026-03-21 18:00:00', pageviews: 282, visitors: 190, bounce_rate: 40, avg_duration: 155 },
+  { date: '2026-03-21 19:00:00', pageviews: 238, visitors: 160, bounce_rate: 41, avg_duration: 148 },
+  { date: '2026-03-21 20:00:00', pageviews: 195, visitors: 132, bounce_rate: 42, avg_duration: 140 },
+  { date: '2026-03-21 21:00:00', pageviews: 155, visitors: 105, bounce_rate: 43, avg_duration: 132 },
+  { date: '2026-03-21 22:00:00', pageviews: 112, visitors: 75, bounce_rate: 44, avg_duration: 125 },
+  { date: '2026-03-21 23:00:00', pageviews: 72, visitors: 46, bounce_rate: 45, avg_duration: 120 },
 ]
 
 const FAKE_TOP_PAGES = [
@@ -185,7 +185,7 @@ export default function DashboardDemo() {
         <div className="absolute inset-0 bg-black/40" />
 
         {/* Inner dashboard — solid background */}
-        <div className="relative rounded-2xl bg-neutral-950 p-4 sm:p-6">
+        <div className="relative rounded-2xl bg-neutral-950/80 backdrop-blur-sm p-4 sm:p-6">
           {/* Dashboard header */}
           <div className="flex items-center justify-between mb-6">
             <div className="flex items-center gap-4">
-- 
2.49.1


From 93347f6454c6178ef75da369570214500eab6414 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 21:05:46 +0100
Subject: [PATCH 131/428] fix: revert outer container size, increase inner
 padding to show more bg

---
 app/page.tsx                           | 2 +-
 components/marketing/DashboardDemo.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index bc65d07..851f089 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -214,7 +214,7 @@ export default function HomePage() {
             initial={{ opacity: 0, y: 40 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.7, delay: 0.4 }}
-            className="w-full max-w-5xl mx-auto px-6"
+            className="w-full max-w-7xl mx-auto px-6"
           >
             <DashboardDemo />
           </motion.div>
diff --git a/components/marketing/DashboardDemo.tsx b/components/marketing/DashboardDemo.tsx
index deb6884..7be2c9c 100644
--- a/components/marketing/DashboardDemo.tsx
+++ b/components/marketing/DashboardDemo.tsx
@@ -180,7 +180,7 @@ export default function DashboardDemo() {
       <div className="absolute -inset-8 bg-brand-orange/8 rounded-[2.5rem] blur-3xl" />
 
       {/* Outer frame with showcase bg */}
-      <div className="relative rounded-3xl border border-white/[0.08] overflow-hidden p-4 sm:p-6 lg:p-8">
+      <div className="relative rounded-3xl border border-white/[0.08] overflow-hidden p-5 sm:p-8 lg:p-10">
         <img src="/pulse-showcase-bg.png" alt="" className="absolute inset-0 w-full h-full object-cover" />
         <div className="absolute inset-0 bg-black/40" />
 
-- 
2.49.1


From 4ef92b9e3ac073be922e86fe15d7e11b3d67f387 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 22:12:30 +0100
Subject: [PATCH 132/428] fix: use monotone interpolation for smooth dashboard
 chart curves

---
 components/dashboard/Chart.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index 7fc7bc8..e94e03a 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -525,13 +525,13 @@ export default function Chart({
                   })}
 
                   <Area
-                    type="bump"
+                    type="monotone"
                     dataKey={metric}
                     fill="url(#areaFill)"
                     stroke="none"
                   />
                   <Line
-                    type="bump"
+                    type="monotone"
                     dataKey={metric}
                     stroke={chartConfig[metric]?.color}
                     strokeWidth={2}
-- 
2.49.1


From 6098b5e1580a92ea78dc010429d91fcaa0746bdf Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 22:23:47 +0100
Subject: [PATCH 133/428] feat: replace vertical funnel with horizontal funnel
 chart

Switched to horizontal orientation with grouped labels for better
readability across multi-step funnels.
---
 app/sites/[id]/funnels/[funnelId]/page.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/sites/[id]/funnels/[funnelId]/page.tsx b/app/sites/[id]/funnels/[funnelId]/page.tsx
index 9fd7a5c..1dd4ab6 100644
--- a/app/sites/[id]/funnels/[funnelId]/page.tsx
+++ b/app/sites/[id]/funnels/[funnelId]/page.tsx
@@ -216,16 +216,18 @@ export default function FunnelReportPage() {
         </div>
 
         {/* Chart */}
-        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden shadow-sm p-6 mb-8">
-          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-6">
+        <div className="bg-neutral-900 border border-neutral-800 rounded-2xl overflow-hidden shadow-sm p-6 mb-8">
+          <h3 className="text-lg font-semibold text-white mb-6">
             Funnel Visualization
           </h3>
           <FunnelChart
             data={chartData}
-            orientation="vertical"
+            orientation="horizontal"
             color="var(--chart-1)"
             layers={3}
-            className="mx-auto max-w-md"
+            labelLayout="grouped"
+            labelAlign="center"
+            labelOrientation="vertical"
           />
         </div>
 
-- 
2.49.1


From 028e4e54252ca2ea80bce8ab16d5349cce45a222 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 22:27:37 +0100
Subject: [PATCH 134/428] fix: reduce funnel chart height with wider aspect
 ratio (4:1)

---
 app/sites/[id]/funnels/[funnelId]/page.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/sites/[id]/funnels/[funnelId]/page.tsx b/app/sites/[id]/funnels/[funnelId]/page.tsx
index 1dd4ab6..d8fe3c8 100644
--- a/app/sites/[id]/funnels/[funnelId]/page.tsx
+++ b/app/sites/[id]/funnels/[funnelId]/page.tsx
@@ -228,6 +228,7 @@ export default function FunnelReportPage() {
             labelLayout="grouped"
             labelAlign="center"
             labelOrientation="vertical"
+            style={{ aspectRatio: '4 / 1' }}
           />
         </div>
 
-- 
2.49.1


From 24fa01dd2598a5e0a8af00d51569e8ce1537b266 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 22:30:50 +0100
Subject: [PATCH 135/428] fix: reduce funnel segment thickness (0.44 -> 0.3)

---
 components/ui/funnel-chart.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/ui/funnel-chart.tsx b/components/ui/funnel-chart.tsx
index 78359da..7e926ac 100644
--- a/components/ui/funnel-chart.tsx
+++ b/components/ui/funnel-chart.tsx
@@ -145,8 +145,8 @@ function hSegmentPath(
   straight = false
 ) {
   const my = H / 2;
-  const h0 = normStart * H * 0.44 * layerScale;
-  const h1 = normEnd * H * 0.44 * layerScale;
+  const h0 = normStart * H * 0.3 * layerScale;
+  const h1 = normEnd * H * 0.3 * layerScale;
 
   if (straight) {
     return `M 0 ${my - h0} L ${segW} ${my - h1} L ${segW} ${my + h1} L 0 ${my + h0} Z`;
-- 
2.49.1


From 1c7667562c764266f1e52471598bcab30899d3fe Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 22:39:51 +0100
Subject: [PATCH 136/428] feat: replace Recharts dashboard chart with visx area
 chart

Integrated 21st.dev AreaChart component with animated crosshair,
spring-based tooltip, and date ticker. Uses brand orange for the
line/fill with dark-only CSS variables.
---
 components/dashboard/Chart.tsx |  173 +--
 components/ui/area-chart.tsx   | 2292 ++++++++++++++++++++++++++++++++
 package-lock.json              | 1017 +++++---------
 package.json                   |    9 +
 styles/globals.css             |   12 +
 5 files changed, 2693 insertions(+), 810 deletions(-)
 create mode 100644 components/ui/area-chart.tsx

diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index e94e03a..8e4938d 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -2,8 +2,7 @@
 
 import { useState, useMemo, useRef, useCallback, useEffect } from 'react'
 import { useTheme } from '@ciphera-net/ui'
-import { Area, CartesianGrid, ComposedChart, Line, XAxis, YAxis, ReferenceLine } from 'recharts'
-import { ChartContainer, ChartTooltip, type ChartConfig } from '@/components/ui/line-charts-6'
+import { AreaChart as VisxAreaChart, Area as VisxArea, Grid as VisxGrid, XAxis as VisxXAxis, YAxis as VisxYAxis, ChartTooltip as VisxChartTooltip, type TooltipRow } from '@/components/ui/area-chart'
 import { Card, CardContent, CardHeader } from '@/components/ui/card'
 import { formatNumber, formatDuration, formatUpdatedAgo, DatePicker } from '@ciphera-net/ui'
 import { Select, DownloadIcon, PlusIcon, XIcon } from '@ciphera-net/ui'
@@ -103,40 +102,11 @@ const METRIC_CONFIGS: {
   { key: 'avg_duration', label: 'Visit Duration', format: (v) => formatDuration(v) },
 ]
 
-const chartConfig = {
-  visitors: { label: 'Unique Visitors', color: '#FD5E0F' },
-  pageviews: { label: 'Total Pageviews', color: '#FD5E0F' },
-  bounce_rate: { label: 'Bounce Rate', color: '#FD5E0F' },
-  avg_duration: { label: 'Visit Duration', color: '#FD5E0F' },
-} satisfies ChartConfig
-
-// ─── Custom Tooltip ─────────────────────────────────────────────────
-
-interface TooltipProps {
-  active?: boolean
-  payload?: Array<{ dataKey: string; value: number; color: string }>
-  label?: string
-  metric: MetricType
-}
-
-function CustomTooltip({ active, payload, metric }: TooltipProps) {
-  if (active && payload && payload.length) {
-    const entry = payload[0]
-    const config = METRIC_CONFIGS.find((m) => m.key === metric)
-
-    if (config) {
-      return (
-        <div className="rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 p-3 shadow-sm shadow-black/5 min-w-[120px]">
-          <div className="flex items-center gap-2 text-sm">
-            <div className="size-1.5 rounded-full" style={{ backgroundColor: entry.color }}></div>
-            <span className="text-neutral-500 dark:text-neutral-400">{config.label}:</span>
-            <span className="font-semibold text-neutral-900 dark:text-white">{config.format(entry.value)}</span>
-          </div>
-        </div>
-      )
-    }
-  }
-  return null
+const CHART_COLORS: Record<MetricType, string> = {
+  visitors: '#FD5E0F',
+  pageviews: '#FD5E0F',
+  bounce_rate: '#FD5E0F',
+  avg_duration: '#FD5E0F',
 }
 
 // ─── Chart Component ─────────────────────────────────────────────────
@@ -227,6 +197,7 @@ export default function Chart({
 
     return {
       date: formattedDate,
+      dateObj: new Date(item.date),
       originalDate: item.date,
       pageviews: item.pageviews,
       visitors: item.visitors,
@@ -450,103 +421,41 @@ export default function Chart({
             </div>
           ) : (
             <div className="w-full" onContextMenu={handleChartContextMenu}>
-              <ChartContainer
-                config={chartConfig}
-                className="h-96 w-full overflow-visible [&_.recharts-curve.recharts-tooltip-cursor]:stroke-[initial]"
+              <VisxAreaChart
+                data={chartData as Record<string, unknown>[]}
+                xDataKey="dateObj"
+                aspectRatio="2.5 / 1"
+                margin={{ top: 20, right: 20, bottom: 40, left: 50 }}
               >
-                <ComposedChart
-                  data={chartData}
-                  margin={{ top: 20, right: 20, left: 5, bottom: 20 }}
-                  style={{ overflow: 'visible' }}
-                >
-                  <defs>
-                    <linearGradient id="areaFill" x1="0" y1="0" x2="0" y2="1">
-                      <stop offset="0%" stopColor={chartConfig[metric]?.color} stopOpacity={0.15} />
-                      <stop offset="100%" stopColor={chartConfig[metric]?.color} stopOpacity={0.01} />
-                    </linearGradient>
-                    <filter id="lineShadow" x="-100%" y="-100%" width="300%" height="300%">
-                      <feDropShadow
-                        dx="4"
-                        dy="6"
-                        stdDeviation="25"
-                        floodColor={`${chartConfig[metric]?.color}60`}
-                      />
-                    </filter>
-                    <filter id="dotShadow" x="-50%" y="-50%" width="200%" height="200%">
-                      <feDropShadow dx="2" dy="2" stdDeviation="3" floodColor="rgba(0,0,0,0.5)" />
-                    </filter>
-                  </defs>
-
-                  <CartesianGrid
-                    horizontal={true}
-                    vertical={false}
-                    stroke="var(--chart-grid)"
-                    strokeOpacity={0.7}
-                  />
-
-                  <XAxis
-                    dataKey="date"
-                    axisLine={false}
-                    tickLine={false}
-                    tick={{ fontSize: 11, fill: 'var(--chart-axis)' }}
-                    tickMargin={10}
-                    minTickGap={32}
-                  />
-
-                  <YAxis
-                    axisLine={false}
-                    tickLine={false}
-                    tick={{ fontSize: 11, fill: 'var(--chart-axis)' }}
-                    tickMargin={10}
-                    tickCount={6}
-                    tickFormatter={(value) => {
-                      const config = METRIC_CONFIGS.find((m) => m.key === metric)
-                      return config ? config.format(value) : value.toString()
-                    }}
-                  />
-
-                  <ChartTooltip content={<CustomTooltip metric={metric} />} cursor={{ strokeDasharray: '3 3', stroke: '#9ca3af' }} />
-
-
-                  {/* Annotation reference lines */}
-                  {visibleAnnotationMarkers.map((marker) => {
-                    const primaryCategory = marker.annotations[0].category
-                    const color = ANNOTATION_COLORS[primaryCategory] || ANNOTATION_COLORS.other
-                    return (
-                      <ReferenceLine
-                        key={`ann-${marker.x}`}
-                        x={marker.x}
-                        stroke={color}
-                        strokeDasharray="4 4"
-                        strokeWidth={1.5}
-                        strokeOpacity={0.6}
-                      />
-                    )
-                  })}
-
-                  <Area
-                    type="monotone"
-                    dataKey={metric}
-                    fill="url(#areaFill)"
-                    stroke="none"
-                  />
-                  <Line
-                    type="monotone"
-                    dataKey={metric}
-                    stroke={chartConfig[metric]?.color}
-                    strokeWidth={2}
-                    filter="url(#lineShadow)"
-                    dot={false}
-                    activeDot={{
-                      r: 6,
-                      fill: chartConfig[metric]?.color,
-                      stroke: 'white',
-                      strokeWidth: 2,
-                      filter: 'url(#dotShadow)',
-                    }}
-                  />
-                </ComposedChart>
-              </ChartContainer>
+                <VisxGrid horizontal vertical={false} stroke="var(--chart-grid)" strokeDasharray="4,4" />
+                <VisxArea
+                  dataKey={metric}
+                  fill={CHART_COLORS[metric]}
+                  fillOpacity={0.15}
+                  stroke={CHART_COLORS[metric]}
+                  strokeWidth={2}
+                  gradientToOpacity={0}
+                />
+                <VisxXAxis numTicks={6} />
+                <VisxYAxis
+                  numTicks={6}
+                  formatValue={(v) => {
+                    const config = METRIC_CONFIGS.find((m) => m.key === metric)
+                    return config ? config.format(v) : v.toString()
+                  }}
+                />
+                <VisxChartTooltip
+                  rows={(point) => {
+                    const config = METRIC_CONFIGS.find((m) => m.key === metric)
+                    const value = point[metric] as number
+                    return [{
+                      color: CHART_COLORS[metric],
+                      label: config?.label || metric,
+                      value: config ? config.format(value) : value,
+                    }]
+                  }}
+                />
+              </VisxAreaChart>
             </div>
           )}
         </CardContent>
diff --git a/components/ui/area-chart.tsx b/components/ui/area-chart.tsx
new file mode 100644
index 0000000..0515ed9
--- /dev/null
+++ b/components/ui/area-chart.tsx
@@ -0,0 +1,2292 @@
+"use client";
+
+import { localPoint } from "@visx/event";
+import { curveMonotoneX } from "@visx/curve";
+import { GridColumns, GridRows } from "@visx/grid";
+import { ParentSize } from "@visx/responsive";
+import { scaleLinear, scaleTime, type scaleBand } from "@visx/scale";
+import { AreaClosed, LinePath } from "@visx/shape";
+import { bisector } from "d3-array";
+import {
+  AnimatePresence,
+  motion,
+  useMotionTemplate,
+  useSpring,
+} from "motion/react";
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type Dispatch,
+  type ReactElement,
+  type ReactNode,
+  type RefObject,
+  type SetStateAction,
+} from "react";
+import useMeasure from "react-use-measure";
+import { createPortal } from "react-dom";
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+// ─── Utils ───────────────────────────────────────────────────────────────────
+
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+// ─── Chart Context ───────────────────────────────────────────────────────────
+
+// biome-ignore lint/suspicious/noExplicitAny: d3 curve factory type
+type CurveFactory = any;
+
+type ScaleLinearType<Output, _Input = number> = ReturnType<
+  typeof scaleLinear<Output>
+>;
+type ScaleTimeType<Output, _Input = Date | number> = ReturnType<
+  typeof scaleTime<Output>
+>;
+type ScaleBandType<Domain extends { toString(): string }> = ReturnType<
+  typeof scaleBand<Domain>
+>;
+
+export const chartCssVars = {
+  background: "var(--chart-background)",
+  foreground: "var(--chart-foreground)",
+  foregroundMuted: "var(--chart-foreground-muted)",
+  label: "var(--chart-label)",
+  linePrimary: "var(--chart-line-primary)",
+  lineSecondary: "var(--chart-line-secondary)",
+  crosshair: "var(--chart-crosshair)",
+  grid: "var(--chart-grid)",
+  indicatorColor: "var(--chart-indicator-color)",
+  indicatorSecondaryColor: "var(--chart-indicator-secondary-color)",
+  markerBackground: "var(--chart-marker-background)",
+  markerBorder: "var(--chart-marker-border)",
+  markerForeground: "var(--chart-marker-foreground)",
+  badgeBackground: "var(--chart-marker-badge-background)",
+  badgeForeground: "var(--chart-marker-badge-foreground)",
+  segmentBackground: "var(--chart-segment-background)",
+  segmentLine: "var(--chart-segment-line)",
+};
+
+export interface Margin {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+export interface TooltipData {
+  point: Record<string, unknown>;
+  index: number;
+  x: number;
+  yPositions: Record<string, number>;
+  xPositions?: Record<string, number>;
+}
+
+export interface LineConfig {
+  dataKey: string;
+  stroke: string;
+  strokeWidth: number;
+}
+
+export interface ChartSelection {
+  startX: number;
+  endX: number;
+  startIndex: number;
+  endIndex: number;
+  active: boolean;
+}
+
+export interface ChartContextValue {
+  data: Record<string, unknown>[];
+  xScale: ScaleTimeType<number, number>;
+  yScale: ScaleLinearType<number, number>;
+  width: number;
+  height: number;
+  innerWidth: number;
+  innerHeight: number;
+  margin: Margin;
+  columnWidth: number;
+  tooltipData: TooltipData | null;
+  setTooltipData: Dispatch<SetStateAction<TooltipData | null>>;
+  containerRef: RefObject<HTMLDivElement | null>;
+  lines: LineConfig[];
+  isLoaded: boolean;
+  animationDuration: number;
+  xAccessor: (d: Record<string, unknown>) => Date;
+  dateLabels: string[];
+  selection?: ChartSelection | null;
+  clearSelection?: () => void;
+  barScale?: ScaleBandType<string>;
+  bandWidth?: number;
+  hoveredBarIndex?: number | null;
+  setHoveredBarIndex?: (index: number | null) => void;
+  barXAccessor?: (d: Record<string, unknown>) => string;
+  orientation?: "vertical" | "horizontal";
+  stacked?: boolean;
+  stackOffsets?: Map<number, Map<string, number>>;
+}
+
+const ChartContext = createContext<ChartContextValue | null>(null);
+
+function ChartProvider({
+  children,
+  value,
+}: {
+  children: ReactNode;
+  value: ChartContextValue;
+}) {
+  return (
+    <ChartContext.Provider value={value}>{children}</ChartContext.Provider>
+  );
+}
+
+function useChart(): ChartContextValue {
+  const context = useContext(ChartContext);
+  if (!context) {
+    throw new Error(
+      "useChart must be used within a ChartProvider. " +
+        "Make sure your component is wrapped in <AreaChart>."
+    );
+  }
+  return context;
+}
+
+// ─── useChartInteraction ─────────────────────────────────────────────────────
+
+type ScaleTime = ReturnType<typeof scaleTime<number>>;
+type ScaleLinear = ReturnType<typeof scaleLinear<number>>;
+
+interface UseChartInteractionParams {
+  xScale: ScaleTime;
+  yScale: ScaleLinear;
+  data: Record<string, unknown>[];
+  lines: LineConfig[];
+  margin: Margin;
+  xAccessor: (d: Record<string, unknown>) => Date;
+  bisectDate: (
+    data: Record<string, unknown>[],
+    date: Date,
+    lo: number
+  ) => number;
+  canInteract: boolean;
+}
+
+interface ChartInteractionResult {
+  tooltipData: TooltipData | null;
+  setTooltipData: Dispatch<SetStateAction<TooltipData | null>>;
+  selection: ChartSelection | null;
+  clearSelection: () => void;
+  interactionHandlers: {
+    onMouseMove?: (event: React.MouseEvent<SVGGElement>) => void;
+    onMouseLeave?: () => void;
+    onMouseDown?: (event: React.MouseEvent<SVGGElement>) => void;
+    onMouseUp?: () => void;
+    onTouchStart?: (event: React.TouchEvent<SVGGElement>) => void;
+    onTouchMove?: (event: React.TouchEvent<SVGGElement>) => void;
+    onTouchEnd?: () => void;
+  };
+  interactionStyle: React.CSSProperties;
+}
+
+function useChartInteraction({
+  xScale,
+  yScale,
+  data,
+  lines,
+  margin,
+  xAccessor,
+  bisectDate,
+  canInteract,
+}: UseChartInteractionParams): ChartInteractionResult {
+  const [tooltipData, setTooltipData] = useState<TooltipData | null>(null);
+  const [selection, setSelection] = useState<ChartSelection | null>(null);
+
+  const isDraggingRef = useRef(false);
+  const dragStartXRef = useRef<number>(0);
+
+  const resolveTooltipFromX = useCallback(
+    (pixelX: number): TooltipData | null => {
+      const x0 = xScale.invert(pixelX);
+      const index = bisectDate(data, x0, 1);
+      const d0 = data[index - 1];
+      const d1 = data[index];
+
+      if (!d0) {
+        return null;
+      }
+
+      let d = d0;
+      let finalIndex = index - 1;
+      if (d1) {
+        const d0Time = xAccessor(d0).getTime();
+        const d1Time = xAccessor(d1).getTime();
+        if (x0.getTime() - d0Time > d1Time - x0.getTime()) {
+          d = d1;
+          finalIndex = index;
+        }
+      }
+
+      const yPositions: Record<string, number> = {};
+      for (const line of lines) {
+        const value = d[line.dataKey];
+        if (typeof value === "number") {
+          yPositions[line.dataKey] = yScale(value) ?? 0;
+        }
+      }
+
+      return {
+        point: d,
+        index: finalIndex,
+        x: xScale(xAccessor(d)) ?? 0,
+        yPositions,
+      };
+    },
+    [xScale, yScale, data, lines, xAccessor, bisectDate]
+  );
+
+  const resolveIndexFromX = useCallback(
+    (pixelX: number): number => {
+      const x0 = xScale.invert(pixelX);
+      const index = bisectDate(data, x0, 1);
+      const d0 = data[index - 1];
+      const d1 = data[index];
+      if (!d0) {
+        return 0;
+      }
+      if (d1) {
+        const d0Time = xAccessor(d0).getTime();
+        const d1Time = xAccessor(d1).getTime();
+        if (x0.getTime() - d0Time > d1Time - x0.getTime()) {
+          return index;
+        }
+      }
+      return index - 1;
+    },
+    [xScale, data, xAccessor, bisectDate]
+  );
+
+  const getChartX = useCallback(
+    (
+      event: React.MouseEvent<SVGGElement> | React.TouchEvent<SVGGElement>,
+      touchIndex = 0
+    ): number | null => {
+      let point: { x: number; y: number } | null = null;
+
+      if ("touches" in event) {
+        const touch = event.touches[touchIndex];
+        if (!touch) {
+          return null;
+        }
+        const svg = event.currentTarget.ownerSVGElement;
+        if (!svg) {
+          return null;
+        }
+        point = localPoint(svg, touch as unknown as MouseEvent);
+      } else {
+        point = localPoint(event);
+      }
+
+      if (!point) {
+        return null;
+      }
+      return point.x - margin.left;
+    },
+    [margin.left]
+  );
+
+  const handleMouseMove = useCallback(
+    (event: React.MouseEvent<SVGGElement>) => {
+      const chartX = getChartX(event);
+      if (chartX === null) {
+        return;
+      }
+
+      if (isDraggingRef.current) {
+        const startX = Math.min(dragStartXRef.current, chartX);
+        const endX = Math.max(dragStartXRef.current, chartX);
+        setSelection({
+          startX,
+          endX,
+          startIndex: resolveIndexFromX(startX),
+          endIndex: resolveIndexFromX(endX),
+          active: true,
+        });
+        return;
+      }
+
+      const tooltip = resolveTooltipFromX(chartX);
+      if (tooltip) {
+        setTooltipData(tooltip);
+      }
+    },
+    [getChartX, resolveTooltipFromX, resolveIndexFromX]
+  );
+
+  const handleMouseLeave = useCallback(() => {
+    setTooltipData(null);
+    if (isDraggingRef.current) {
+      isDraggingRef.current = false;
+    }
+    setSelection(null);
+  }, []);
+
+  const handleMouseDown = useCallback(
+    (event: React.MouseEvent<SVGGElement>) => {
+      const chartX = getChartX(event);
+      if (chartX === null) {
+        return;
+      }
+      isDraggingRef.current = true;
+      dragStartXRef.current = chartX;
+      setTooltipData(null);
+      setSelection(null);
+    },
+    [getChartX]
+  );
+
+  const handleMouseUp = useCallback(() => {
+    if (isDraggingRef.current) {
+      isDraggingRef.current = false;
+    }
+    setSelection(null);
+  }, []);
+
+  const handleTouchStart = useCallback(
+    (event: React.TouchEvent<SVGGElement>) => {
+      if (event.touches.length === 1) {
+        event.preventDefault();
+        const chartX = getChartX(event, 0);
+        if (chartX === null) {
+          return;
+        }
+        const tooltip = resolveTooltipFromX(chartX);
+        if (tooltip) {
+          setTooltipData(tooltip);
+        }
+      } else if (event.touches.length === 2) {
+        event.preventDefault();
+        setTooltipData(null);
+        const x0 = getChartX(event, 0);
+        const x1 = getChartX(event, 1);
+        if (x0 === null || x1 === null) {
+          return;
+        }
+        const startX = Math.min(x0, x1);
+        const endX = Math.max(x0, x1);
+        setSelection({
+          startX,
+          endX,
+          startIndex: resolveIndexFromX(startX),
+          endIndex: resolveIndexFromX(endX),
+          active: true,
+        });
+      }
+    },
+    [getChartX, resolveTooltipFromX, resolveIndexFromX]
+  );
+
+  const handleTouchMove = useCallback(
+    (event: React.TouchEvent<SVGGElement>) => {
+      if (event.touches.length === 1) {
+        event.preventDefault();
+        const chartX = getChartX(event, 0);
+        if (chartX === null) {
+          return;
+        }
+        const tooltip = resolveTooltipFromX(chartX);
+        if (tooltip) {
+          setTooltipData(tooltip);
+        }
+      } else if (event.touches.length === 2) {
+        event.preventDefault();
+        const x0 = getChartX(event, 0);
+        const x1 = getChartX(event, 1);
+        if (x0 === null || x1 === null) {
+          return;
+        }
+        const startX = Math.min(x0, x1);
+        const endX = Math.max(x0, x1);
+        setSelection({
+          startX,
+          endX,
+          startIndex: resolveIndexFromX(startX),
+          endIndex: resolveIndexFromX(endX),
+          active: true,
+        });
+      }
+    },
+    [getChartX, resolveTooltipFromX, resolveIndexFromX]
+  );
+
+  const handleTouchEnd = useCallback(() => {
+    setTooltipData(null);
+    setSelection(null);
+  }, []);
+
+  const clearSelection = useCallback(() => {
+    setSelection(null);
+  }, []);
+
+  const interactionHandlers = canInteract
+    ? {
+        onMouseMove: handleMouseMove,
+        onMouseLeave: handleMouseLeave,
+        onMouseDown: handleMouseDown,
+        onMouseUp: handleMouseUp,
+        onTouchStart: handleTouchStart,
+        onTouchMove: handleTouchMove,
+        onTouchEnd: handleTouchEnd,
+      }
+    : {};
+
+  const interactionStyle: React.CSSProperties = {
+    cursor: canInteract ? "crosshair" : "default",
+    touchAction: "none",
+  };
+
+  return {
+    tooltipData,
+    setTooltipData,
+    selection,
+    clearSelection,
+    interactionHandlers,
+    interactionStyle,
+  };
+}
+
+// ─── Tooltip Components ──────────────────────────────────────────────────────
+
+// DateTicker
+
+const TICKER_ITEM_HEIGHT = 24;
+
+interface DateTickerProps {
+  currentIndex: number;
+  labels: string[];
+  visible: boolean;
+}
+
+function DateTicker({ currentIndex, labels, visible }: DateTickerProps) {
+  const parsedLabels = useMemo(() => {
+    return labels.map((label) => {
+      const parts = label.split(" ");
+      const month = parts[0] || "";
+      const day = parts[1] || "";
+      return { month, day, full: label };
+    });
+  }, [labels]);
+
+  const monthIndices = useMemo(() => {
+    const uniqueMonths: string[] = [];
+    const indices: number[] = [];
+
+    parsedLabels.forEach((label, index) => {
+      if (uniqueMonths.length === 0 || uniqueMonths.at(-1) !== label.month) {
+        uniqueMonths.push(label.month);
+        indices.push(index);
+      }
+    });
+
+    return { uniqueMonths, indices };
+  }, [parsedLabels]);
+
+  const currentMonthIndex = useMemo(() => {
+    if (currentIndex < 0 || currentIndex >= parsedLabels.length) {
+      return 0;
+    }
+    const currentMonth = parsedLabels[currentIndex]?.month;
+    return monthIndices.uniqueMonths.indexOf(currentMonth || "");
+  }, [currentIndex, parsedLabels, monthIndices]);
+
+  const prevMonthIndexRef = useRef(-1);
+
+  const dayY = useSpring(0, { stiffness: 400, damping: 35 });
+  const monthY = useSpring(0, { stiffness: 400, damping: 35 });
+
+  useEffect(() => {
+    dayY.set(-currentIndex * TICKER_ITEM_HEIGHT);
+  }, [currentIndex, dayY]);
+
+  useEffect(() => {
+    if (currentMonthIndex >= 0) {
+      const isFirstRender = prevMonthIndexRef.current === -1;
+      const monthChanged = prevMonthIndexRef.current !== currentMonthIndex;
+
+      if (isFirstRender || monthChanged) {
+        monthY.set(-currentMonthIndex * TICKER_ITEM_HEIGHT);
+        prevMonthIndexRef.current = currentMonthIndex;
+      }
+    }
+  }, [currentMonthIndex, monthY]);
+
+  if (!visible || labels.length === 0) {
+    return null;
+  }
+
+  return (
+    <motion.div
+      className="overflow-hidden rounded-full bg-zinc-100 px-4 py-1 text-zinc-900"
+      layout
+      transition={{
+        layout: { type: "spring", stiffness: 400, damping: 35 },
+      }}
+    >
+      <div className="relative h-6 overflow-hidden">
+        <div className="flex items-center justify-center gap-1">
+          <div className="relative h-6 overflow-hidden">
+            <motion.div className="flex flex-col" style={{ y: monthY }}>
+              {monthIndices.uniqueMonths.map((month) => (
+                <div
+                  className="flex h-6 shrink-0 items-center justify-center"
+                  key={month}
+                >
+                  <span className="whitespace-nowrap font-medium text-sm">
+                    {month}
+                  </span>
+                </div>
+              ))}
+            </motion.div>
+          </div>
+          <div className="relative h-6 overflow-hidden">
+            <motion.div className="flex flex-col" style={{ y: dayY }}>
+              {parsedLabels.map((label, index) => (
+                <div
+                  className="flex h-6 shrink-0 items-center justify-center"
+                  key={`${label.day}-${index}`}
+                >
+                  <span className="whitespace-nowrap font-medium text-sm">
+                    {label.day}
+                  </span>
+                </div>
+              ))}
+            </motion.div>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+DateTicker.displayName = "DateTicker";
+
+// TooltipDot
+
+interface TooltipDotProps {
+  x: number;
+  y: number;
+  visible: boolean;
+  color: string;
+  size?: number;
+  strokeColor?: string;
+  strokeWidth?: number;
+}
+
+function TooltipDot({
+  x,
+  y,
+  visible,
+  color,
+  size = 5,
+  strokeColor = chartCssVars.background,
+  strokeWidth = 2,
+}: TooltipDotProps) {
+  const crosshairSpringConfig = { stiffness: 300, damping: 30 };
+  const animatedX = useSpring(x, crosshairSpringConfig);
+  const animatedY = useSpring(y, crosshairSpringConfig);
+
+  useEffect(() => {
+    animatedX.set(x);
+    animatedY.set(y);
+  }, [x, y, animatedX, animatedY]);
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <motion.circle
+      cx={animatedX}
+      cy={animatedY}
+      fill={color}
+      r={size}
+      stroke={strokeColor}
+      strokeWidth={strokeWidth}
+    />
+  );
+}
+
+TooltipDot.displayName = "TooltipDot";
+
+// TooltipIndicator
+
+type IndicatorWidth = number | "line" | "thin" | "medium" | "thick";
+
+interface TooltipIndicatorProps {
+  x: number;
+  height: number;
+  visible: boolean;
+  width?: IndicatorWidth;
+  span?: number;
+  columnWidth?: number;
+  colorEdge?: string;
+  colorMid?: string;
+  fadeEdges?: boolean;
+  gradientId?: string;
+}
+
+function resolveWidth(width: IndicatorWidth): number {
+  if (typeof width === "number") {
+    return width;
+  }
+  switch (width) {
+    case "line":
+      return 1;
+    case "thin":
+      return 2;
+    case "medium":
+      return 4;
+    case "thick":
+      return 8;
+    default:
+      return 1;
+  }
+}
+
+function TooltipIndicator({
+  x,
+  height,
+  visible,
+  width = "line",
+  span,
+  columnWidth,
+  colorEdge = chartCssVars.crosshair,
+  colorMid = chartCssVars.crosshair,
+  fadeEdges = true,
+  gradientId = "tooltip-indicator-gradient",
+}: TooltipIndicatorProps) {
+  const pixelWidth =
+    span !== undefined && columnWidth !== undefined
+      ? span * columnWidth
+      : resolveWidth(width);
+
+  const crosshairSpringConfig = { stiffness: 300, damping: 30 };
+  const animatedX = useSpring(x - pixelWidth / 2, crosshairSpringConfig);
+
+  useEffect(() => {
+    animatedX.set(x - pixelWidth / 2);
+  }, [x, animatedX, pixelWidth]);
+
+  if (!visible) {
+    return null;
+  }
+
+  const edgeOpacity = fadeEdges ? 0 : 1;
+
+  return (
+    <g>
+      <defs>
+        <linearGradient id={gradientId} x1="0%" x2="0%" y1="0%" y2="100%">
+          <stop
+            offset="0%"
+            style={{ stopColor: colorEdge, stopOpacity: edgeOpacity }}
+          />
+          <stop offset="10%" style={{ stopColor: colorEdge, stopOpacity: 1 }} />
+          <stop offset="50%" style={{ stopColor: colorMid, stopOpacity: 1 }} />
+          <stop offset="90%" style={{ stopColor: colorEdge, stopOpacity: 1 }} />
+          <stop
+            offset="100%"
+            style={{ stopColor: colorEdge, stopOpacity: edgeOpacity }}
+          />
+        </linearGradient>
+      </defs>
+      <motion.rect
+        fill={`url(#${gradientId})`}
+        height={height}
+        width={pixelWidth}
+        x={animatedX}
+        y={0}
+      />
+    </g>
+  );
+}
+
+TooltipIndicator.displayName = "TooltipIndicator";
+
+// TooltipContent
+
+export interface TooltipRow {
+  color: string;
+  label: string;
+  value: string | number;
+}
+
+interface TooltipContentProps {
+  title?: string;
+  rows: TooltipRow[];
+  children?: ReactNode;
+}
+
+function TooltipContent({ title, rows, children }: TooltipContentProps) {
+  const [measureRef, bounds] = useMeasure({ debounce: 0, scroll: false });
+  const [committedHeight, setCommittedHeight] = useState<number | null>(null);
+  const committedChildrenStateRef = useRef<boolean | null>(null);
+  const frameRef = useRef<number | null>(null);
+
+  const hasChildren = !!children;
+  const markerKey = hasChildren ? "has-marker" : "no-marker";
+
+  const isWaitingForSettlement =
+    committedChildrenStateRef.current !== null &&
+    committedChildrenStateRef.current !== hasChildren;
+
+  useEffect(() => {
+    if (bounds.height <= 0) {
+      return;
+    }
+
+    if (frameRef.current) {
+      cancelAnimationFrame(frameRef.current);
+      frameRef.current = null;
+    }
+
+    if (isWaitingForSettlement) {
+      frameRef.current = requestAnimationFrame(() => {
+        frameRef.current = requestAnimationFrame(() => {
+          setCommittedHeight(bounds.height);
+          committedChildrenStateRef.current = hasChildren;
+        });
+      });
+    } else {
+      setCommittedHeight(bounds.height);
+      committedChildrenStateRef.current = hasChildren;
+    }
+
+    return () => {
+      if (frameRef.current) {
+        cancelAnimationFrame(frameRef.current);
+      }
+    };
+  }, [bounds.height, hasChildren, isWaitingForSettlement]);
+
+  const shouldAnimate = committedHeight !== null;
+
+  return (
+    <motion.div
+      animate={
+        committedHeight !== null ? { height: committedHeight } : undefined
+      }
+      className="overflow-hidden"
+      initial={false}
+      transition={
+        shouldAnimate
+          ? {
+              type: "spring",
+              stiffness: 500,
+              damping: 35,
+              mass: 0.8,
+            }
+          : { duration: 0 }
+      }
+    >
+      <div className="px-3 py-2.5" ref={measureRef}>
+        {title && (
+          <div className="mb-2 font-medium text-neutral-400 text-xs">
+            {title}
+          </div>
+        )}
+        <div className="space-y-1.5">
+          {rows.map((row) => (
+            <div
+              className="flex items-center justify-between gap-4"
+              key={`${row.label}-${row.color}`}
+            >
+              <div className="flex items-center gap-2">
+                <span
+                  className="h-2.5 w-2.5 shrink-0 rounded-full"
+                  style={{ backgroundColor: row.color }}
+                />
+                <span className="text-neutral-400 text-sm">
+                  {row.label}
+                </span>
+              </div>
+              <span className="font-medium text-white text-sm tabular-nums">
+                {typeof row.value === "number"
+                  ? row.value.toLocaleString()
+                  : row.value}
+              </span>
+            </div>
+          ))}
+        </div>
+
+        <AnimatePresence mode="wait">
+          {children && (
+            <motion.div
+              animate={{ opacity: 1, filter: "blur(0px)" }}
+              className="mt-2"
+              exit={{ opacity: 0, filter: "blur(4px)" }}
+              initial={{ opacity: 0, filter: "blur(4px)" }}
+              key={markerKey}
+              transition={{ duration: 0.2, ease: "easeOut" }}
+            >
+              {children}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </motion.div>
+  );
+}
+
+TooltipContent.displayName = "TooltipContent";
+
+// TooltipBox
+
+interface TooltipBoxProps {
+  x: number;
+  y: number;
+  visible: boolean;
+  containerRef: RefObject<HTMLDivElement | null>;
+  containerWidth: number;
+  containerHeight: number;
+  offset?: number;
+  className?: string;
+  children: ReactNode;
+  left?: number | ReturnType<typeof useSpring>;
+  top?: number | ReturnType<typeof useSpring>;
+  flipped?: boolean;
+}
+
+function TooltipBox({
+  x,
+  y,
+  visible,
+  containerRef,
+  containerWidth,
+  containerHeight,
+  offset = 16,
+  className = "",
+  children,
+  left: leftOverride,
+  top: topOverride,
+  flipped: flippedOverride,
+}: TooltipBoxProps) {
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const [tooltipWidth, setTooltipWidth] = useState(180);
+  const [tooltipHeight, setTooltipHeight] = useState(80);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useLayoutEffect(() => {
+    if (tooltipRef.current) {
+      const w = tooltipRef.current.offsetWidth;
+      const h = tooltipRef.current.offsetHeight;
+      if (w > 0 && w !== tooltipWidth) {
+        setTooltipWidth(w);
+      }
+      if (h > 0 && h !== tooltipHeight) {
+        setTooltipHeight(h);
+      }
+    }
+  }, [tooltipWidth, tooltipHeight]);
+
+  const shouldFlipX = x + tooltipWidth + offset > containerWidth;
+  const targetX = shouldFlipX ? x - offset - tooltipWidth : x + offset;
+
+  const targetY = Math.max(
+    offset,
+    Math.min(y - tooltipHeight / 2, containerHeight - tooltipHeight - offset)
+  );
+
+  const prevFlipRef = useRef(shouldFlipX);
+  const [flipKey, setFlipKey] = useState(0);
+
+  useEffect(() => {
+    if (prevFlipRef.current !== shouldFlipX) {
+      setFlipKey((k) => k + 1);
+      prevFlipRef.current = shouldFlipX;
+    }
+  }, [shouldFlipX]);
+
+  const springConfig = { stiffness: 100, damping: 20 };
+  const animatedLeft = useSpring(targetX, springConfig);
+  const animatedTop = useSpring(targetY, springConfig);
+
+  useEffect(() => {
+    animatedLeft.set(targetX);
+  }, [targetX, animatedLeft]);
+
+  useEffect(() => {
+    animatedTop.set(targetY);
+  }, [targetY, animatedTop]);
+
+  const finalLeft = leftOverride ?? animatedLeft;
+  const finalTop = topOverride ?? animatedTop;
+  const isFlipped = flippedOverride ?? shouldFlipX;
+  const transformOrigin = isFlipped ? "right top" : "left top";
+
+  const container = containerRef.current;
+  if (!(mounted && container)) {
+    return null;
+  }
+
+
+  if (!visible) {
+    return null;
+  }
+
+  return createPortal(
+    <motion.div
+      animate={{ opacity: 1 }}
+      className={cn("pointer-events-none absolute z-50", className)}
+      exit={{ opacity: 0 }}
+      initial={{ opacity: 0 }}
+      ref={tooltipRef}
+      style={{ left: finalLeft, top: finalTop }}
+      transition={{ duration: 0.1 }}
+    >
+      <motion.div
+        animate={{ scale: 1, opacity: 1, x: 0 }}
+        className="min-w-[140px] overflow-hidden rounded-lg bg-neutral-800/90 text-white shadow-lg backdrop-blur-md"
+        initial={{ scale: 0.85, opacity: 0, x: isFlipped ? 20 : -20 }}
+        key={flipKey}
+        style={{ transformOrigin }}
+        transition={{ type: "spring", stiffness: 300, damping: 25 }}
+      >
+        {children}
+      </motion.div>
+    </motion.div>,
+    container
+  );
+}
+
+TooltipBox.displayName = "TooltipBox";
+
+// ChartTooltip
+
+export interface ChartTooltipProps {
+  showDatePill?: boolean;
+  showCrosshair?: boolean;
+  showDots?: boolean;
+  content?: (props: {
+    point: Record<string, unknown>;
+    index: number;
+  }) => ReactNode;
+  rows?: (point: Record<string, unknown>) => TooltipRow[];
+  children?: ReactNode;
+  className?: string;
+}
+
+export function ChartTooltip({
+  showDatePill = true,
+  showCrosshair = true,
+  showDots = true,
+  content,
+  rows: rowsRenderer,
+  children,
+  className = "",
+}: ChartTooltipProps) {
+  const {
+    tooltipData,
+    width,
+    height,
+    innerHeight,
+    margin,
+    columnWidth,
+    lines,
+    xAccessor,
+    dateLabels,
+    containerRef,
+    orientation,
+    barXAccessor,
+  } = useChart();
+
+  const isHorizontal = orientation === "horizontal";
+
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const visible = tooltipData !== null;
+  const x = tooltipData?.x ?? 0;
+  const xWithMargin = x + margin.left;
+
+  const firstLineDataKey = lines[0]?.dataKey;
+  const firstLineY = firstLineDataKey
+    ? (tooltipData?.yPositions[firstLineDataKey] ?? 0)
+    : 0;
+  const yWithMargin = firstLineY + margin.top;
+
+  const crosshairSpringConfig = { stiffness: 300, damping: 30 };
+  const animatedX = useSpring(xWithMargin, crosshairSpringConfig);
+
+  useEffect(() => {
+    animatedX.set(xWithMargin);
+  }, [xWithMargin, animatedX]);
+
+  const tooltipRows = useMemo(() => {
+    if (!tooltipData) {
+      return [];
+    }
+
+    if (rowsRenderer) {
+      return rowsRenderer(tooltipData.point);
+    }
+
+    return lines.map((line) => ({
+      color: line.stroke,
+      label: line.dataKey,
+      value: (tooltipData.point[line.dataKey] as number) ?? 0,
+    }));
+  }, [tooltipData, lines, rowsRenderer]);
+
+  const title = useMemo(() => {
+    if (!tooltipData) {
+      return undefined;
+    }
+    if (barXAccessor) {
+      return barXAccessor(tooltipData.point);
+    }
+    return xAccessor(tooltipData.point).toLocaleDateString("en-US", {
+      weekday: "short",
+      month: "short",
+      day: "numeric",
+    });
+  }, [tooltipData, barXAccessor, xAccessor]);
+
+  const container = containerRef.current;
+  if (!(mounted && container)) {
+    return null;
+  }
+
+
+  const tooltipContent = (
+    <>
+      {showCrosshair && (
+        <svg
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0"
+          height="100%"
+          width="100%"
+        >
+          <g transform={`translate(${margin.left},${margin.top})`}>
+            <TooltipIndicator
+              colorEdge={chartCssVars.crosshair}
+              colorMid={chartCssVars.crosshair}
+              columnWidth={columnWidth}
+              fadeEdges
+              height={innerHeight}
+              visible={visible}
+              width="line"
+              x={x}
+            />
+          </g>
+        </svg>
+      )}
+
+      {showDots && visible && !isHorizontal && (
+        <svg
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0"
+          height="100%"
+          width="100%"
+        >
+          <g transform={`translate(${margin.left},${margin.top})`}>
+            {lines.map((line) => (
+              <TooltipDot
+                color={line.stroke}
+                key={line.dataKey}
+                strokeColor={chartCssVars.background}
+                visible={visible}
+                x={tooltipData?.xPositions?.[line.dataKey] ?? x}
+                y={tooltipData?.yPositions[line.dataKey] ?? 0}
+              />
+            ))}
+          </g>
+        </svg>
+      )}
+
+      <TooltipBox
+        className={className}
+        containerHeight={height}
+        containerRef={containerRef}
+        containerWidth={width}
+        top={isHorizontal ? undefined : margin.top}
+        visible={visible}
+        x={xWithMargin}
+        y={isHorizontal ? yWithMargin : margin.top}
+      >
+        {content ? (
+          content({
+            point: tooltipData?.point ?? {},
+            index: tooltipData?.index ?? 0,
+          })
+        ) : (
+          <TooltipContent rows={tooltipRows} title={title}>
+            {children}
+          </TooltipContent>
+        )}
+      </TooltipBox>
+
+      {showDatePill && dateLabels.length > 0 && visible && !isHorizontal && (
+        <motion.div
+          className="pointer-events-none absolute z-50"
+          style={{
+            left: animatedX,
+            transform: "translateX(-50%)",
+            bottom: 4,
+          }}
+        >
+          <DateTicker
+            currentIndex={tooltipData?.index ?? 0}
+            labels={dateLabels}
+            visible={visible}
+          />
+        </motion.div>
+      )}
+    </>
+  );
+
+  return createPortal(tooltipContent, container);
+}
+
+ChartTooltip.displayName = "ChartTooltip";
+
+// ─── Grid ────────────────────────────────────────────────────────────────────
+
+export interface GridProps {
+  horizontal?: boolean;
+  vertical?: boolean;
+  numTicksRows?: number;
+  numTicksColumns?: number;
+  rowTickValues?: number[];
+  stroke?: string;
+  strokeOpacity?: number;
+  strokeWidth?: number;
+  strokeDasharray?: string;
+  fadeHorizontal?: boolean;
+  fadeVertical?: boolean;
+}
+
+export function Grid({
+  horizontal = true,
+  vertical = false,
+  numTicksRows = 5,
+  numTicksColumns = 10,
+  rowTickValues,
+  stroke = chartCssVars.grid,
+  strokeOpacity = 1,
+  strokeWidth = 1,
+  strokeDasharray = "4,4",
+  fadeHorizontal = true,
+  fadeVertical = false,
+}: GridProps) {
+  const { xScale, yScale, innerWidth, innerHeight, orientation, barScale } =
+    useChart();
+
+  const isHorizontalBarChart = orientation === "horizontal" && barScale;
+  const columnScale = isHorizontalBarChart ? yScale : xScale;
+  const uniqueId = useId();
+
+  const hMaskId = `grid-rows-fade-${uniqueId}`;
+  const hGradientId = `${hMaskId}-gradient`;
+  const vMaskId = `grid-cols-fade-${uniqueId}`;
+  const vGradientId = `${vMaskId}-gradient`;
+
+  return (
+    <g className="chart-grid">
+      {horizontal && fadeHorizontal && (
+        <defs>
+          <linearGradient id={hGradientId} x1="0%" x2="100%" y1="0%" y2="0%">
+            <stop offset="0%" style={{ stopColor: "white", stopOpacity: 0 }} />
+            <stop offset="10%" style={{ stopColor: "white", stopOpacity: 1 }} />
+            <stop offset="90%" style={{ stopColor: "white", stopOpacity: 1 }} />
+            <stop
+              offset="100%"
+              style={{ stopColor: "white", stopOpacity: 0 }}
+            />
+          </linearGradient>
+          <mask id={hMaskId}>
+            <rect
+              fill={`url(#${hGradientId})`}
+              height={innerHeight}
+              width={innerWidth}
+              x="0"
+              y="0"
+            />
+          </mask>
+        </defs>
+      )}
+
+      {vertical && fadeVertical && (
+        <defs>
+          <linearGradient id={vGradientId} x1="0%" x2="0%" y1="0%" y2="100%">
+            <stop offset="0%" style={{ stopColor: "white", stopOpacity: 0 }} />
+            <stop offset="10%" style={{ stopColor: "white", stopOpacity: 1 }} />
+            <stop offset="90%" style={{ stopColor: "white", stopOpacity: 1 }} />
+            <stop
+              offset="100%"
+              style={{ stopColor: "white", stopOpacity: 0 }}
+            />
+          </linearGradient>
+          <mask id={vMaskId}>
+            <rect
+              fill={`url(#${vGradientId})`}
+              height={innerHeight}
+              width={innerWidth}
+              x="0"
+              y="0"
+            />
+          </mask>
+        </defs>
+      )}
+
+      {horizontal && (
+        <g mask={fadeHorizontal ? `url(#${hMaskId})` : undefined}>
+          <GridRows
+            numTicks={rowTickValues ? undefined : numTicksRows}
+            scale={yScale}
+            stroke={stroke}
+            strokeDasharray={strokeDasharray}
+            strokeOpacity={strokeOpacity}
+            strokeWidth={strokeWidth}
+            tickValues={rowTickValues}
+            width={innerWidth}
+          />
+        </g>
+      )}
+      {vertical && columnScale && typeof columnScale === "function" && (
+        <g mask={fadeVertical ? `url(#${vMaskId})` : undefined}>
+          <GridColumns
+            height={innerHeight}
+            numTicks={numTicksColumns}
+            scale={columnScale}
+            stroke={stroke}
+            strokeDasharray={strokeDasharray}
+            strokeOpacity={strokeOpacity}
+            strokeWidth={strokeWidth}
+          />
+        </g>
+      )}
+    </g>
+  );
+}
+
+Grid.displayName = "Grid";
+
+// ─── XAxis ───────────────────────────────────────────────────────────────────
+
+export interface XAxisProps {
+  numTicks?: number;
+  tickerHalfWidth?: number;
+}
+
+interface XAxisLabelProps {
+  label: string;
+  x: number;
+  crosshairX: number | null;
+  isHovering: boolean;
+  tickerHalfWidth: number;
+}
+
+function XAxisLabel({
+  label,
+  x,
+  crosshairX,
+  isHovering,
+  tickerHalfWidth,
+}: XAxisLabelProps) {
+  const fadeBuffer = 20;
+  const fadeRadius = tickerHalfWidth + fadeBuffer;
+
+  let opacity = 1;
+  if (isHovering && crosshairX !== null) {
+    const distance = Math.abs(x - crosshairX);
+    if (distance < tickerHalfWidth) {
+      opacity = 0;
+    } else if (distance < fadeRadius) {
+      opacity = (distance - tickerHalfWidth) / fadeBuffer;
+    }
+  }
+
+  return (
+    <div
+      className="absolute"
+      style={{
+        left: x,
+        bottom: 12,
+        width: 0,
+        display: "flex",
+        justifyContent: "center",
+      }}
+    >
+      <motion.span
+        animate={{ opacity }}
+        className="whitespace-nowrap text-neutral-500 text-xs"
+        initial={{ opacity: 1 }}
+        transition={{ duration: 0.4, ease: "easeInOut" }}
+      >
+        {label}
+      </motion.span>
+    </div>
+  );
+}
+
+export function XAxis({ numTicks = 5, tickerHalfWidth = 50 }: XAxisProps) {
+  const { xScale, margin, tooltipData, containerRef } = useChart();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const labelsToShow = useMemo(() => {
+    const domain = xScale.domain();
+    const startDate = domain[0];
+    const endDate = domain[1];
+
+    if (!(startDate && endDate)) {
+      return [];
+    }
+
+    const startTime = startDate.getTime();
+    const endTime = endDate.getTime();
+    const timeRange = endTime - startTime;
+
+    const tickCount = Math.max(2, numTicks);
+    const dates: Date[] = [];
+
+    for (let i = 0; i < tickCount; i++) {
+      const t = i / (tickCount - 1);
+      const time = startTime + t * timeRange;
+      dates.push(new Date(time));
+    }
+
+    return dates.map((date) => ({
+      date,
+      x: (xScale(date) ?? 0) + margin.left,
+      label: date.toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+      }),
+    }));
+  }, [xScale, margin.left, numTicks]);
+
+  const isHovering = tooltipData !== null;
+  const crosshairX = tooltipData ? tooltipData.x + margin.left : null;
+
+  const container = containerRef.current;
+  if (!(mounted && container)) {
+    return null;
+  }
+
+
+  return createPortal(
+    <div className="pointer-events-none absolute inset-0">
+      {labelsToShow.map((item) => (
+        <XAxisLabel
+          crosshairX={crosshairX}
+          isHovering={isHovering}
+          key={`${item.label}-${item.x}`}
+          label={item.label}
+          tickerHalfWidth={tickerHalfWidth}
+          x={item.x}
+        />
+      ))}
+    </div>,
+    container
+  );
+}
+
+XAxis.displayName = "XAxis";
+
+// ─── YAxis ───────────────────────────────────────────────────────────────────
+
+export interface YAxisProps {
+  numTicks?: number;
+  formatValue?: (value: number) => string;
+}
+
+export function YAxis({
+  numTicks = 5,
+  formatValue,
+}: YAxisProps) {
+  const { yScale, margin, containerRef } = useChart();
+  const [container, setContainer] = useState<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    setContainer(containerRef.current);
+  }, [containerRef]);
+
+  const ticks = useMemo(() => {
+    const domain = yScale.domain() as [number, number];
+    const min = domain[0];
+    const max = domain[1];
+    const step = (max - min) / (numTicks - 1);
+
+    return Array.from({ length: numTicks }, (_, i) => {
+      const value = min + step * i;
+      return {
+        value,
+        y: (yScale(value) ?? 0) + margin.top,
+        label: formatValue
+          ? formatValue(value)
+          : value >= 1000
+            ? `${(value / 1000).toFixed(value % 1000 === 0 ? 0 : 1)}k`
+            : value.toLocaleString(),
+      };
+    });
+  }, [yScale, margin.top, numTicks, formatValue]);
+
+  if (!container) {
+    return null;
+  }
+
+  return createPortal(
+    <div className="pointer-events-none absolute inset-0">
+      {ticks.map((tick) => (
+        <div
+          key={tick.value}
+          className="absolute"
+          style={{
+            left: 0,
+            top: tick.y,
+            width: margin.left - 8,
+            display: "flex",
+            justifyContent: "flex-end",
+            transform: "translateY(-50%)",
+          }}
+        >
+          <span className="whitespace-nowrap text-neutral-500 text-xs tabular-nums">
+            {tick.label}
+          </span>
+        </div>
+      ))}
+    </div>,
+    container
+  );
+}
+
+YAxis.displayName = "YAxis";
+
+// ─── Area ────────────────────────────────────────────────────────────────────
+
+export interface AreaProps {
+  dataKey: string;
+  fill?: string;
+  fillOpacity?: number;
+  stroke?: string;
+  strokeWidth?: number;
+  curve?: CurveFactory;
+  animate?: boolean;
+  showLine?: boolean;
+  showHighlight?: boolean;
+  gradientToOpacity?: number;
+  fadeEdges?: boolean;
+}
+
+export function Area({
+  dataKey,
+  fill = chartCssVars.linePrimary,
+  fillOpacity = 0.4,
+  stroke,
+  strokeWidth = 2,
+  curve = curveMonotoneX,
+  animate = true,
+  showLine = true,
+  showHighlight = true,
+  gradientToOpacity = 0,
+  fadeEdges = false,
+}: AreaProps) {
+  const {
+    data,
+    xScale,
+    yScale,
+    innerHeight,
+    innerWidth,
+    tooltipData,
+    selection,
+    isLoaded,
+    animationDuration,
+    xAccessor,
+  } = useChart();
+
+  const pathRef = useRef<SVGPathElement>(null);
+  const [pathLength, setPathLength] = useState(0);
+  const [clipWidth, setClipWidth] = useState(0);
+
+  const uniqueId = useId();
+  const gradientId = useMemo(
+    () => `area-gradient-${dataKey}-${Math.random().toString(36).slice(2, 9)}`,
+    [dataKey]
+  );
+  const strokeGradientId = useMemo(
+    () =>
+      `area-stroke-gradient-${dataKey}-${Math.random().toString(36).slice(2, 9)}`,
+    [dataKey]
+  );
+  const edgeMaskId = `area-edge-mask-${dataKey}-${uniqueId}`;
+  const edgeGradientId = `${edgeMaskId}-gradient`;
+
+  const resolvedStroke = stroke || fill;
+
+  useEffect(() => {
+    if (pathRef.current && animate) {
+      const len = pathRef.current.getTotalLength();
+      if (len > 0) {
+        setPathLength(len);
+        if (!isLoaded) {
+          requestAnimationFrame(() => {
+            setClipWidth(innerWidth);
+          });
+        }
+      }
+    }
+  }, [animate, innerWidth, isLoaded]);
+
+  const findLengthAtX = useCallback(
+    (targetX: number): number => {
+      const path = pathRef.current;
+      if (!path || pathLength === 0) {
+        return 0;
+      }
+      let low = 0;
+      let high = pathLength;
+      const tolerance = 0.5;
+
+      while (high - low > tolerance) {
+        const mid = (low + high) / 2;
+        const point = path.getPointAtLength(mid);
+        if (point.x < targetX) {
+          low = mid;
+        } else {
+          high = mid;
+        }
+      }
+      return (low + high) / 2;
+    },
+    [pathLength]
+  );
+
+  const segmentBounds = useMemo(() => {
+    if (!pathRef.current || pathLength === 0) {
+      return { startLength: 0, segmentLength: 0, isActive: false };
+    }
+
+    if (selection?.active) {
+      const startLength = findLengthAtX(selection.startX);
+      const endLength = findLengthAtX(selection.endX);
+      return {
+        startLength,
+        segmentLength: endLength - startLength,
+        isActive: true,
+      };
+    }
+
+    if (!tooltipData) {
+      return { startLength: 0, segmentLength: 0, isActive: false };
+    }
+
+    const idx = tooltipData.index;
+    const startIdx = Math.max(0, idx - 1);
+    const endIdx = Math.min(data.length - 1, idx + 1);
+
+    const startPoint = data[startIdx];
+    const endPoint = data[endIdx];
+    if (!(startPoint && endPoint)) {
+      return { startLength: 0, segmentLength: 0, isActive: false };
+    }
+
+    const startX = xScale(xAccessor(startPoint)) ?? 0;
+    const endX = xScale(xAccessor(endPoint)) ?? 0;
+
+    const startLength = findLengthAtX(startX);
+    const endLength = findLengthAtX(endX);
+
+    return {
+      startLength,
+      segmentLength: endLength - startLength,
+      isActive: true,
+    };
+  }, [
+    tooltipData,
+    selection,
+    data,
+    xScale,
+    pathLength,
+    xAccessor,
+    findLengthAtX,
+  ]);
+
+  const springConfig = { stiffness: 180, damping: 28 };
+  const offsetSpring = useSpring(0, springConfig);
+  const segmentLengthSpring = useSpring(0, springConfig);
+
+  const animatedDasharray = useMotionTemplate`${segmentLengthSpring} ${pathLength}`;
+
+  useEffect(() => {
+    offsetSpring.set(-segmentBounds.startLength);
+    segmentLengthSpring.set(segmentBounds.segmentLength);
+  }, [
+    segmentBounds.startLength,
+    segmentBounds.segmentLength,
+    offsetSpring,
+    segmentLengthSpring,
+  ]);
+
+  const getY = useCallback(
+    (d: Record<string, unknown>) => {
+      const value = d[dataKey];
+      return typeof value === "number" ? (yScale(value) ?? 0) : 0;
+    },
+    [dataKey, yScale]
+  );
+
+  const isHovering = tooltipData !== null || selection?.active === true;
+  const easing = "cubic-bezier(0.85, 0, 0.15, 1)";
+
+  return (
+    <>
+      <defs>
+        <linearGradient id={gradientId} x1="0%" x2="0%" y1="0%" y2="100%">
+          <stop
+            offset="0%"
+            style={{ stopColor: fill, stopOpacity: fillOpacity }}
+          />
+          <stop
+            offset="100%"
+            style={{ stopColor: fill, stopOpacity: gradientToOpacity }}
+          />
+        </linearGradient>
+
+        <linearGradient id={strokeGradientId} x1="0%" x2="100%" y1="0%" y2="0%">
+          <stop
+            offset="0%"
+            style={{ stopColor: resolvedStroke, stopOpacity: 0 }}
+          />
+          <stop
+            offset="15%"
+            style={{ stopColor: resolvedStroke, stopOpacity: 1 }}
+          />
+          <stop
+            offset="85%"
+            style={{ stopColor: resolvedStroke, stopOpacity: 1 }}
+          />
+          <stop
+            offset="100%"
+            style={{ stopColor: resolvedStroke, stopOpacity: 0 }}
+          />
+        </linearGradient>
+
+        {fadeEdges && (
+          <>
+            <linearGradient
+              id={edgeGradientId}
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0%"
+                style={{ stopColor: "white", stopOpacity: 0 }}
+              />
+              <stop
+                offset="20%"
+                style={{ stopColor: "white", stopOpacity: 1 }}
+              />
+              <stop
+                offset="80%"
+                style={{ stopColor: "white", stopOpacity: 1 }}
+              />
+              <stop
+                offset="100%"
+                style={{ stopColor: "white", stopOpacity: 0 }}
+              />
+            </linearGradient>
+            <mask id={edgeMaskId}>
+              <rect
+                fill={`url(#${edgeGradientId})`}
+                height={innerHeight}
+                width={innerWidth}
+                x="0"
+                y="0"
+              />
+            </mask>
+          </>
+        )}
+      </defs>
+
+      {animate && (
+        <defs>
+          <clipPath id={`grow-clip-area-${dataKey}`}>
+            <rect
+              height={innerHeight + 20}
+              style={{
+                transition:
+                  !isLoaded && clipWidth > 0
+                    ? `width ${animationDuration}ms ${easing}`
+                    : "none",
+              }}
+              width={isLoaded ? innerWidth : clipWidth}
+              x={0}
+              y={0}
+            />
+          </clipPath>
+        </defs>
+      )}
+
+      <g clipPath={animate ? `url(#grow-clip-area-${dataKey})` : undefined}>
+        <motion.g
+          animate={{ opacity: isHovering && showHighlight ? 0.6 : 1 }}
+          initial={{ opacity: 1 }}
+          transition={{ duration: 0.4, ease: "easeInOut" }}
+        >
+          <g mask={fadeEdges ? `url(#${edgeMaskId})` : undefined}>
+            <AreaClosed
+              curve={curve}
+              data={data}
+              fill={`url(#${gradientId})`}
+              x={(d) => xScale(xAccessor(d)) ?? 0}
+              y={getY}
+              yScale={yScale}
+            />
+          </g>
+
+          {showLine && (
+            <LinePath
+              curve={curve}
+              data={data}
+              innerRef={pathRef}
+              stroke={`url(#${strokeGradientId})`}
+              strokeLinecap="round"
+              strokeWidth={strokeWidth}
+              x={(d) => xScale(xAccessor(d)) ?? 0}
+              y={getY}
+            />
+          )}
+        </motion.g>
+      </g>
+
+      {showHighlight &&
+        showLine &&
+        isHovering &&
+        isLoaded &&
+        pathRef.current && (
+          <motion.path
+            animate={{ opacity: 1 }}
+            d={pathRef.current.getAttribute("d") || ""}
+            exit={{ opacity: 0 }}
+            fill="none"
+            initial={{ opacity: 0 }}
+            stroke={resolvedStroke}
+            strokeLinecap="round"
+            strokeWidth={strokeWidth}
+            style={{
+              strokeDasharray: animatedDasharray,
+              strokeDashoffset: offsetSpring,
+            }}
+            transition={{ duration: 0.4, ease: "easeInOut" }}
+          />
+        )}
+    </>
+  );
+}
+
+Area.displayName = "Area";
+
+// ─── Segment Components ──────────────────────────────────────────────────────
+
+export function SegmentBackground() {
+  const { selection, innerHeight } = useChart();
+
+  if (!selection?.active) {
+    return null;
+  }
+
+  const x = Math.min(selection.startX, selection.endX);
+  const width = Math.abs(selection.endX - selection.startX);
+
+  return (
+    <motion.rect
+      animate={{ opacity: 0.15 }}
+      fill={chartCssVars.linePrimary}
+      height={innerHeight}
+      initial={{ opacity: 0 }}
+      rx={4}
+      transition={{ duration: 0.2 }}
+      width={width}
+      x={x}
+      y={0}
+    />
+  );
+}
+
+SegmentBackground.displayName = "SegmentBackground";
+
+export function SegmentLineFrom() {
+  const { selection, innerHeight } = useChart();
+
+  if (!selection?.active) {
+    return null;
+  }
+
+  const x = Math.min(selection.startX, selection.endX);
+
+  return (
+    <motion.line
+      animate={{ opacity: 1 }}
+      initial={{ opacity: 0 }}
+      stroke={chartCssVars.linePrimary}
+      strokeDasharray="4,3"
+      strokeWidth={1.5}
+      transition={{ duration: 0.2 }}
+      x1={x}
+      x2={x}
+      y1={0}
+      y2={innerHeight}
+    />
+  );
+}
+
+SegmentLineFrom.displayName = "SegmentLineFrom";
+
+export function SegmentLineTo() {
+  const { selection, innerHeight } = useChart();
+
+  if (!selection?.active) {
+    return null;
+  }
+
+  const x = Math.max(selection.startX, selection.endX);
+
+  return (
+    <motion.line
+      animate={{ opacity: 1 }}
+      initial={{ opacity: 0 }}
+      stroke={chartCssVars.linePrimary}
+      strokeDasharray="4,3"
+      strokeWidth={1.5}
+      transition={{ duration: 0.2 }}
+      x1={x}
+      x2={x}
+      y1={0}
+      y2={innerHeight}
+    />
+  );
+}
+
+SegmentLineTo.displayName = "SegmentLineTo";
+
+// ─── Pattern Components ──────────────────────────────────────────────────────
+
+export interface PatternLinesProps {
+  id: string;
+  width?: number;
+  height?: number;
+  stroke?: string;
+  strokeWidth?: number;
+  orientation?: ("diagonal" | "horizontal" | "vertical")[];
+}
+
+export function PatternLines({
+  id,
+  width = 6,
+  height = 6,
+  stroke = "var(--chart-line-primary)",
+  strokeWidth = 1,
+  orientation = ["diagonal"],
+}: PatternLinesProps) {
+  const paths: string[] = [];
+
+  for (const o of orientation) {
+    if (o === "diagonal") {
+      paths.push(`M0,${height}l${width},${-height}`);
+      paths.push(`M${-width / 4},${height / 4}l${width / 2},${-height / 2}`);
+      paths.push(`M${(3 * width) / 4},${height + height / 4}l${width / 2},${-height / 2}`);
+    } else if (o === "horizontal") {
+      paths.push(`M0,${height / 2}l${width},0`);
+    } else if (o === "vertical") {
+      paths.push(`M${width / 2},0l0,${height}`);
+    }
+  }
+
+  return (
+    <defs>
+      <pattern
+        id={id}
+        width={width}
+        height={height}
+        patternUnits="userSpaceOnUse"
+      >
+        <path
+          d={paths.join(" ")}
+          fill="none"
+          stroke={stroke}
+          strokeWidth={strokeWidth}
+          strokeLinecap="square"
+        />
+      </pattern>
+    </defs>
+  );
+}
+
+PatternLines.displayName = "PatternLines";
+
+export interface PatternAreaProps {
+  dataKey: string;
+  fill?: string;
+  curve?: CurveFactory;
+}
+
+export function PatternArea({
+  dataKey,
+  fill = "url(#area-pattern)",
+  curve = curveMonotoneX,
+}: PatternAreaProps) {
+  const { data, xScale, yScale, xAccessor } = useChart();
+
+  const getY = useCallback(
+    (d: Record<string, unknown>) => {
+      const value = d[dataKey];
+      return typeof value === "number" ? (yScale(value) ?? 0) : 0;
+    },
+    [dataKey, yScale]
+  );
+
+  return (
+    <AreaClosed
+      curve={curve}
+      data={data}
+      fill={fill}
+      x={(d) => xScale(xAccessor(d)) ?? 0}
+      y={getY}
+      yScale={yScale}
+    />
+  );
+}
+
+PatternArea.displayName = "PatternArea";
+
+// ─── AreaChart ───────────────────────────────────────────────────────────────
+
+function isPostOverlayComponent(child: ReactElement): boolean {
+  const childType = child.type as {
+    displayName?: string;
+    name?: string;
+    __isChartMarkers?: boolean;
+  };
+
+  if (childType.__isChartMarkers) {
+    return true;
+  }
+
+  const componentName =
+    typeof child.type === "function"
+      ? childType.displayName || childType.name || ""
+      : "";
+
+  return componentName === "ChartMarkers" || componentName === "MarkerGroup";
+}
+
+function extractAreaConfigs(children: ReactNode): LineConfig[] {
+  const configs: LineConfig[] = [];
+
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) {
+      return;
+    }
+
+    const childType = child.type as {
+      displayName?: string;
+      name?: string;
+    };
+    const componentName =
+      typeof child.type === "function"
+        ? childType.displayName || childType.name || ""
+        : "";
+
+    const props = child.props as AreaProps | undefined;
+    const isAreaComponent =
+      componentName === "Area" ||
+      child.type === Area ||
+      (props && typeof props.dataKey === "string" && props.dataKey.length > 0);
+
+    if (isAreaComponent && props?.dataKey) {
+      configs.push({
+        dataKey: props.dataKey,
+        stroke: props.stroke || props.fill || "var(--chart-line-primary)",
+        strokeWidth: props.strokeWidth || 2,
+      });
+    }
+  });
+
+  return configs;
+}
+
+export interface AreaChartProps {
+  data: Record<string, unknown>[];
+  xDataKey?: string;
+  margin?: Partial<Margin>;
+  animationDuration?: number;
+  aspectRatio?: string;
+  className?: string;
+  children: ReactNode;
+}
+
+const DEFAULT_MARGIN: Margin = { top: 40, right: 40, bottom: 40, left: 40 };
+
+interface ChartInnerProps {
+  width: number;
+  height: number;
+  data: Record<string, unknown>[];
+  xDataKey: string;
+  margin: Margin;
+  animationDuration: number;
+  children: ReactNode;
+  containerRef: RefObject<HTMLDivElement | null>;
+}
+
+function ChartInner({
+  width,
+  height,
+  data,
+  xDataKey,
+  margin,
+  animationDuration,
+  children,
+  containerRef,
+}: ChartInnerProps) {
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  const lines = useMemo(() => extractAreaConfigs(children), [children]);
+
+  const innerWidth = width - margin.left - margin.right;
+  const innerHeight = height - margin.top - margin.bottom;
+
+  const xAccessor = useCallback(
+    (d: Record<string, unknown>): Date => {
+      const value = d[xDataKey];
+      return value instanceof Date ? value : new Date(value as string | number);
+    },
+    [xDataKey]
+  );
+
+  const bisectDate = useMemo(
+    () => bisector<Record<string, unknown>, Date>((d) => xAccessor(d)).left,
+    [xAccessor]
+  );
+
+  const xScale = useMemo(() => {
+    const dates = data.map((d) => xAccessor(d));
+    const minTime = Math.min(...dates.map((d) => d.getTime()));
+    const maxTime = Math.max(...dates.map((d) => d.getTime()));
+
+    return scaleTime({
+      range: [0, innerWidth],
+      domain: [minTime, maxTime],
+    });
+  }, [innerWidth, data, xAccessor]);
+
+  const columnWidth = useMemo(() => {
+    if (data.length < 2) {
+      return 0;
+    }
+    return innerWidth / (data.length - 1);
+  }, [innerWidth, data.length]);
+
+  const yScale = useMemo(() => {
+    let maxValue = 0;
+    for (const line of lines) {
+      for (const d of data) {
+        const value = d[line.dataKey];
+        if (typeof value === "number" && value > maxValue) {
+          maxValue = value;
+        }
+      }
+    }
+
+    if (maxValue === 0) {
+      maxValue = 100;
+    }
+
+    return scaleLinear({
+      range: [innerHeight, 0],
+      domain: [0, maxValue * 1.1],
+      nice: true,
+    });
+  }, [innerHeight, data, lines]);
+
+  const dateLabels = useMemo(
+    () =>
+      data.map((d) =>
+        xAccessor(d).toLocaleDateString("en-US", {
+          month: "short",
+          day: "numeric",
+        })
+      ),
+    [data, xAccessor]
+  );
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsLoaded(true);
+    }, animationDuration);
+    return () => clearTimeout(timer);
+  }, [animationDuration]);
+
+  const canInteract = isLoaded;
+
+  const {
+    tooltipData,
+    setTooltipData,
+    selection,
+    clearSelection,
+    interactionHandlers,
+    interactionStyle,
+  } = useChartInteraction({
+    xScale,
+    yScale,
+    data,
+    lines,
+    margin,
+    xAccessor,
+    bisectDate,
+    canInteract,
+  });
+
+  if (width < 10 || height < 10) {
+    return null;
+  }
+
+  const preOverlayChildren: ReactElement[] = [];
+  const postOverlayChildren: ReactElement[] = [];
+
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) {
+      return;
+    }
+
+    if (isPostOverlayComponent(child)) {
+      postOverlayChildren.push(child);
+    } else {
+      preOverlayChildren.push(child);
+    }
+  });
+
+  const contextValue = {
+    data,
+    xScale,
+    yScale,
+    width,
+    height,
+    innerWidth,
+    innerHeight,
+    margin,
+    columnWidth,
+    tooltipData,
+    setTooltipData,
+    containerRef,
+    lines,
+    isLoaded,
+    animationDuration,
+    xAccessor,
+    dateLabels,
+    selection,
+    clearSelection,
+  };
+
+  return (
+    <ChartProvider value={contextValue}>
+      <svg aria-hidden="true" height={height} width={width}>
+        <defs>
+          <clipPath id="chart-area-grow-clip">
+            <rect
+              height={innerHeight + 20}
+              style={{
+                transition: isLoaded
+                  ? "none"
+                  : `width ${animationDuration}ms cubic-bezier(0.85, 0, 0.15, 1)`,
+              }}
+              width={isLoaded ? innerWidth : 0}
+              x={0}
+              y={0}
+            />
+          </clipPath>
+        </defs>
+
+        <rect fill="transparent" height={height} width={width} x={0} y={0} />
+
+        <g
+          {...interactionHandlers}
+          style={interactionStyle}
+          transform={`translate(${margin.left},${margin.top})`}
+        >
+          <rect
+            fill="transparent"
+            height={innerHeight}
+            width={innerWidth}
+            x={0}
+            y={0}
+          />
+
+          {preOverlayChildren}
+          {postOverlayChildren}
+        </g>
+      </svg>
+    </ChartProvider>
+  );
+}
+
+export function AreaChart({
+  data,
+  xDataKey = "date",
+  margin: marginProp,
+  animationDuration = 1100,
+  aspectRatio = "2 / 1",
+  className = "",
+  children,
+}: AreaChartProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const margin = { ...DEFAULT_MARGIN, ...marginProp };
+
+  return (
+    <div
+      className={cn("relative w-full", className)}
+      ref={containerRef}
+      style={{ aspectRatio, touchAction: "none" }}
+    >
+      <ParentSize debounceTime={10}>
+        {({ width, height }) => (
+          <ChartInner
+            animationDuration={animationDuration}
+            containerRef={containerRef}
+            data={data}
+            height={height}
+            margin={margin}
+            width={width}
+            xDataKey={xDataKey}
+          >
+            {children}
+          </ChartInner>
+        )}
+      </ParentSize>
+    </div>
+  );
+}
+
+export default AreaChart;
diff --git a/package-lock.json b/package-lock.json
index d963c47..bafe5ad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,11 +19,18 @@
         "@stripe/stripe-js": "^8.7.0",
         "@tanstack/react-virtual": "^3.13.21",
         "@types/d3": "^7.4.3",
+        "@visx/curve": "^3.12.0",
+        "@visx/event": "^3.12.0",
+        "@visx/grid": "^3.12.0",
+        "@visx/responsive": "^3.12.0",
+        "@visx/scale": "^3.12.0",
+        "@visx/shape": "^3.12.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cobe": "^0.6.5",
         "country-flag-icons": "^1.6.4",
         "d3": "^7.9.0",
+        "d3-array": "^3.2.4",
         "d3-scale": "^4.0.2",
         "framer-motion": "^12.23.26",
         "html-to-image": "^1.11.13",
@@ -37,6 +44,7 @@
         "react": "^19.2.3",
         "react-dom": "^19.2.3",
         "react-markdown": "^10.1.0",
+        "react-use-measure": "^2.1.7",
         "recharts": "^2.15.0",
         "sonner": "^2.0.7",
         "svg-dotted-map": "^2.0.1",
@@ -48,6 +56,7 @@
         "@tailwindcss/typography": "^0.5.19",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
+        "@types/d3-array": "^3.2.2",
         "@types/d3-scale": "^4.0.9",
         "@types/node": "^20.14.12",
         "@types/react": "^19.2.14",
@@ -176,7 +185,6 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -1788,7 +1796,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.19.0"
       },
@@ -1829,7 +1836,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.19.0"
       }
@@ -5537,7 +5543,6 @@
       "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-8.7.0.tgz",
       "integrity": "sha512-tNUerSstwNC1KuHgX4CASGO0Md3CB26IJzSXmVlSuFvhsBP4ZaEPpY4jxWOn9tfdDscuVT4Kqb8cZ2o9nLCgRQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12.16"
       }
@@ -5603,36 +5608,6 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
-    "node_modules/@testing-library/dom": {
-      "version": "10.4.1",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
-      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^5.0.1",
-        "aria-query": "5.3.0",
-        "dom-accessibility-api": "^0.5.9",
-        "lz-string": "^1.5.0",
-        "picocolors": "1.1.1",
-        "pretty-format": "^27.0.2"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/aria-query": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
-      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "dequal": "^2.0.3"
-      }
-    },
     "node_modules/@testing-library/jest-dom": {
       "version": "6.9.1",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz",
@@ -5699,20 +5674,12 @@
         "tslib": "^2.4.0"
       }
     },
-    "node_modules/@types/aria-query": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
-      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
       "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/parser": "^7.20.7",
         "@babel/types": "^7.20.7",
@@ -5725,7 +5692,7 @@
       "version": "7.27.0",
       "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
       "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.0.0"
@@ -5735,7 +5702,7 @@
       "version": "7.4.4",
       "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
       "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.1.0",
@@ -5746,7 +5713,7 @@
       "version": "7.28.0",
       "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
       "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.28.2"
@@ -6032,26 +5999,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/eslint": {
-      "version": "9.6.1",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
-      "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "*",
-        "@types/json-schema": "*"
-      }
-    },
-    "node_modules/@types/eslint-scope": {
-      "version": "3.7.7",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
-      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/eslint": "*",
-        "@types/estree": "*"
-      }
-    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -6086,6 +6033,7 @@
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/json5": {
@@ -6095,6 +6043,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.24",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.24.tgz",
+      "integrity": "sha512-gIW7lQLZbue7lRSWEFql49QJJWThrTFFeIMJdp3eH4tKoxm1OvEPg02rm4wCCSHS0cL3/Fizimb35b7k8atwsQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/mdast": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
@@ -6114,6 +6068,7 @@
       "version": "20.19.33",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.33.tgz",
       "integrity": "sha512-Rs1bVAIdBs5gbTIKza/tgpMuG1k3U/UMJLWecIMxNdJFDMzcM5LOiLVRYh3PilWEYDIeUDv7bpiHPLPsbydGcw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
@@ -6137,7 +6092,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -6146,9 +6100,8 @@
       "version": "19.2.3",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -6216,7 +6169,6 @@
       "integrity": "sha512-IgSWvLobTDOjnaxAfDTIHaECbkNlAlKv2j5SjpB2v7QHKv1FIfjwMy8FsDbVfDX/KjmCmYICcw7uGaXLhtsLNg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.56.0",
         "@typescript-eslint/types": "8.56.0",
@@ -6729,6 +6681,298 @@
         "win32"
       ]
     },
+    "node_modules/@visx/curve": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/curve/-/curve-3.12.0.tgz",
+      "integrity": "sha512-Ng1mefXIzoIoAivw7dJ+ZZYYUbfuwXgZCgQynShr6ZIVw7P4q4HeQfJP3W24ON+1uCSrzoycHSXRelhR9SBPcw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-shape": "^1.3.1",
+        "d3-shape": "^1.0.6"
+      }
+    },
+    "node_modules/@visx/curve/node_modules/@types/d3-path": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.11.tgz",
+      "integrity": "sha512-4pQMp8ldf7UaB/gR8Fvvy69psNHkTpD/pVw3vmEi8iZAB9EPMBruB1JvHO4BIq9QkUUd2lV1F5YXpMNj7JPBpw==",
+      "license": "MIT"
+    },
+    "node_modules/@visx/curve/node_modules/@types/d3-shape": {
+      "version": "1.3.12",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.12.tgz",
+      "integrity": "sha512-8oMzcd4+poSLGgV0R1Q1rOlx/xdmozS4Xab7np0eamFFUYq71AU9pOCJEFnkXW2aI/oXdVYJzw6pssbSut7Z9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "^1"
+      }
+    },
+    "node_modules/@visx/curve/node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@visx/curve/node_modules/d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-path": "1"
+      }
+    },
+    "node_modules/@visx/event": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/event/-/event-3.12.0.tgz",
+      "integrity": "sha512-9Lvw6qJ0Fi+y1vsC1WspfdIKCxHTb7oy59Uql1uBdPGT8zChP0vuxW0jQNQRDbKgoefj4pCXAFi8+MF1mEtVTw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*",
+        "@visx/point": "3.12.0"
+      }
+    },
+    "node_modules/@visx/grid": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-3.12.0.tgz",
+      "integrity": "sha512-L4ex2ooSYhwNIxJ3XFIKRhoSvEGjPc2Y3YCrtNB4TV5Ofdj4q0UMOsxfrH23Pr8HSHuQhb6VGMgYoK0LuWqDmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*",
+        "@visx/curve": "3.12.0",
+        "@visx/group": "3.12.0",
+        "@visx/point": "3.12.0",
+        "@visx/scale": "3.12.0",
+        "@visx/shape": "3.12.0",
+        "classnames": "^2.3.1",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/group": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/group/-/group-3.12.0.tgz",
+      "integrity": "sha512-Dye8iS1alVXPv7nj/7M37gJe6sSKqJLH7x6sEWAsRQ9clI0kFvjbKcKgF+U3aAVQr0NCohheFV+DtR8trfK/Ag==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*",
+        "classnames": "^2.3.1",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/point": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/point/-/point-3.12.0.tgz",
+      "integrity": "sha512-I6UrHoJAEVbx3RORQNupgTiX5EzjuZpiwLPxn8L2mI5nfERotPKi1Yus12Cq2WtXqEBR/WgqTnoImlqOXBykcA==",
+      "license": "MIT"
+    },
+    "node_modules/@visx/responsive": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/responsive/-/responsive-3.12.0.tgz",
+      "integrity": "sha512-GV1BTYwAGlk/K5c9vH8lS2syPnTuIqEacI7L6LRPbsuaLscXMNi+i9fZyzo0BWvAdtRV8v6Urzglo++lvAXT1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "^4.14.172",
+        "@types/react": "*",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.6.1"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/scale": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/scale/-/scale-3.12.0.tgz",
+      "integrity": "sha512-+ubijrZ2AwWCsNey0HGLJ0YKNeC/XImEFsr9rM+Uef1CM3PNM43NDdNTrdBejSlzRq0lcfQPWYMYQFSlkLcPOg==",
+      "license": "MIT",
+      "dependencies": {
+        "@visx/vendor": "3.12.0"
+      }
+    },
+    "node_modules/@visx/shape": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/shape/-/shape-3.12.0.tgz",
+      "integrity": "sha512-/1l0lrpX9tPic6SJEalryBKWjP/ilDRnQA+BGJTI1tj7i23mJ/J0t4nJHyA1GrL4QA/bM/qTJ35eyz5dEhJc4g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "^1.0.8",
+        "@types/d3-shape": "^1.3.1",
+        "@types/lodash": "^4.14.172",
+        "@types/react": "*",
+        "@visx/curve": "3.12.0",
+        "@visx/group": "3.12.0",
+        "@visx/scale": "3.12.0",
+        "classnames": "^2.3.1",
+        "d3-path": "^1.0.5",
+        "d3-shape": "^1.2.0",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.5.10"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
+    "node_modules/@visx/shape/node_modules/@types/d3-path": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.11.tgz",
+      "integrity": "sha512-4pQMp8ldf7UaB/gR8Fvvy69psNHkTpD/pVw3vmEi8iZAB9EPMBruB1JvHO4BIq9QkUUd2lV1F5YXpMNj7JPBpw==",
+      "license": "MIT"
+    },
+    "node_modules/@visx/shape/node_modules/@types/d3-shape": {
+      "version": "1.3.12",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.12.tgz",
+      "integrity": "sha512-8oMzcd4+poSLGgV0R1Q1rOlx/xdmozS4Xab7np0eamFFUYq71AU9pOCJEFnkXW2aI/oXdVYJzw6pssbSut7Z9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "^1"
+      }
+    },
+    "node_modules/@visx/shape/node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@visx/shape/node_modules/d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-path": "1"
+      }
+    },
+    "node_modules/@visx/vendor": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/vendor/-/vendor-3.12.0.tgz",
+      "integrity": "sha512-SVO+G0xtnL9dsNpGDcjCgoiCnlB3iLSM9KLz1sLbSrV7RaVXwY3/BTm2X9OWN1jH2a9M+eHt6DJ6sE6CXm4cUg==",
+      "license": "MIT and ISC",
+      "dependencies": {
+        "@types/d3-array": "3.0.3",
+        "@types/d3-color": "3.1.0",
+        "@types/d3-delaunay": "6.0.1",
+        "@types/d3-format": "3.0.1",
+        "@types/d3-geo": "3.1.0",
+        "@types/d3-interpolate": "3.0.1",
+        "@types/d3-scale": "4.0.2",
+        "@types/d3-time": "3.0.0",
+        "@types/d3-time-format": "2.1.0",
+        "d3-array": "3.2.1",
+        "d3-color": "3.1.0",
+        "d3-delaunay": "6.0.2",
+        "d3-format": "3.1.0",
+        "d3-geo": "3.1.0",
+        "d3-interpolate": "3.0.1",
+        "d3-scale": "4.0.2",
+        "d3-time": "3.1.0",
+        "d3-time-format": "4.1.0",
+        "internmap": "2.0.3"
+      }
+    },
+    "node_modules/@visx/vendor/node_modules/@types/d3-array": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.3.tgz",
+      "integrity": "sha512-Reoy+pKnvsksN0lQUlcH6dOGjRZ/3WRwXR//m+/8lt1BXeI4xyaUZoqULNjyXXRuh0Mj4LNpkCvhUpQlY3X5xQ==",
+      "license": "MIT"
+    },
+    "node_modules/@visx/vendor/node_modules/@types/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA==",
+      "license": "MIT"
+    },
+    "node_modules/@visx/vendor/node_modules/@types/d3-delaunay": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.1.tgz",
+      "integrity": "sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ==",
+      "license": "MIT"
+    },
+    "node_modules/@visx/vendor/node_modules/@types/d3-format": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.1.tgz",
+      "integrity": "sha512-5KY70ifCCzorkLuIkDe0Z9YTf9RR2CjBX1iaJG+rgM/cPP+sO+q9YdQ9WdhQcgPj1EQiJ2/0+yUkkziTG6Lubg==",
+      "license": "MIT"
+    },
+    "node_modules/@visx/vendor/node_modules/@types/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@visx/vendor/node_modules/@types/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-Yk4htunhPAwN0XGlIwArRomOjdoBFXC3+kCxK2Ubg7I9shQlVSJy/pG/Ht5ASN+gdMIalpk8TJ5xV74jFsetLA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@visx/vendor/node_modules/@types/d3-time": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.0.tgz",
+      "integrity": "sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==",
+      "license": "MIT"
+    },
+    "node_modules/@visx/vendor/node_modules/@types/d3-time-format": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.1.0.tgz",
+      "integrity": "sha512-/myT3I7EwlukNOX2xVdMzb8FRgNzRMpsZddwst9Ld/VFe6LyJyRp0s32l/V9XoUzk+Gqu56F/oGk6507+8BxrA==",
+      "license": "MIT"
+    },
+    "node_modules/@visx/vendor/node_modules/d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-gUY/qeHq/yNqqoCKNq4vtpFLdoCdvyNpWoC/KNjhGbhDuQpAM9sIQQKkXSNpXa9h5KySs/gzm7R88WkUutgwWQ==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@visx/vendor/node_modules/d3-delaunay": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.2.tgz",
+      "integrity": "sha512-IMLNldruDQScrcfT+MWnazhHbDJhcRJyOEBAJfwQnHle1RPh6WDuLvxNArUju2VSMSUuKlY5BGHRJ2cYyoFLQQ==",
+      "license": "ISC",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@visx/vendor/node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@visx/vendor/node_modules/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "5.1.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.1.4.tgz",
@@ -6891,170 +7135,11 @@
         "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/@webassemblyjs/ast": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
-      "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@webassemblyjs/helper-numbers": "1.13.2",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2"
-      }
-    },
-    "node_modules/@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
-      "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
-      "license": "MIT"
-    },
-    "node_modules/@webassemblyjs/helper-api-error": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
-      "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
-      "license": "MIT"
-    },
-    "node_modules/@webassemblyjs/helper-buffer": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
-      "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
-      "license": "MIT"
-    },
-    "node_modules/@webassemblyjs/helper-numbers": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz",
-      "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
-      "license": "MIT",
-      "dependencies": {
-        "@webassemblyjs/floating-point-hex-parser": "1.13.2",
-        "@webassemblyjs/helper-api-error": "1.13.2",
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
-      "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
-      "license": "MIT"
-    },
-    "node_modules/@webassemblyjs/helper-wasm-section": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz",
-      "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
-      "license": "MIT",
-      "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-buffer": "1.14.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
-        "@webassemblyjs/wasm-gen": "1.14.1"
-      }
-    },
-    "node_modules/@webassemblyjs/ieee754": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz",
-      "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
-      "license": "MIT",
-      "dependencies": {
-        "@xtuc/ieee754": "^1.2.0"
-      }
-    },
-    "node_modules/@webassemblyjs/leb128": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz",
-      "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "node_modules/@webassemblyjs/utf8": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
-      "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
-      "license": "MIT"
-    },
-    "node_modules/@webassemblyjs/wasm-edit": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz",
-      "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-buffer": "1.14.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
-        "@webassemblyjs/helper-wasm-section": "1.14.1",
-        "@webassemblyjs/wasm-gen": "1.14.1",
-        "@webassemblyjs/wasm-opt": "1.14.1",
-        "@webassemblyjs/wasm-parser": "1.14.1",
-        "@webassemblyjs/wast-printer": "1.14.1"
-      }
-    },
-    "node_modules/@webassemblyjs/wasm-gen": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz",
-      "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
-      "license": "MIT",
-      "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
-        "@webassemblyjs/ieee754": "1.13.2",
-        "@webassemblyjs/leb128": "1.13.2",
-        "@webassemblyjs/utf8": "1.13.2"
-      }
-    },
-    "node_modules/@webassemblyjs/wasm-opt": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz",
-      "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
-      "license": "MIT",
-      "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-buffer": "1.14.1",
-        "@webassemblyjs/wasm-gen": "1.14.1",
-        "@webassemblyjs/wasm-parser": "1.14.1"
-      }
-    },
-    "node_modules/@webassemblyjs/wasm-parser": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz",
-      "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-api-error": "1.13.2",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
-        "@webassemblyjs/ieee754": "1.13.2",
-        "@webassemblyjs/leb128": "1.13.2",
-        "@webassemblyjs/utf8": "1.13.2"
-      }
-    },
-    "node_modules/@webassemblyjs/wast-printer": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz",
-      "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
-      "license": "MIT",
-      "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "node_modules/@xtuc/ieee754": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
-      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/@xtuc/long": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
-      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "license": "Apache-2.0"
-    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -7062,18 +7147,6 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/acorn-import-phases": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/acorn-import-phases/-/acorn-import-phases-1.0.4.tgz",
-      "integrity": "sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.13.0"
-      },
-      "peerDependencies": {
-        "acorn": "^8.14.0"
-      }
-    },
     "node_modules/acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
@@ -7120,55 +7193,6 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "node_modules/ajv-formats": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
-      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-      "license": "MIT",
-      "dependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "ajv": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/ajv-formats/node_modules/ajv": {
-      "version": "8.18.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
-      "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
-      "license": "MIT",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3",
-        "fast-uri": "^3.0.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/ajv-formats/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "license": "MIT"
-    },
-    "node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -7660,7 +7684,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -7916,15 +7939,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/chrome-trace-event": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
-      "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.0"
-      }
-    },
     "node_modules/class-variance-authority": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
@@ -7937,6 +7951,12 @@
         "url": "https://polar.sh/cva"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -8500,7 +8520,6 @@
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
       "license": "ISC",
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -8862,13 +8881,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/dom-accessibility-api": {
-      "version": "0.5.16",
-      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
-      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/dom-helpers": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
@@ -8931,19 +8943,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/enhanced-resolve": {
-      "version": "5.19.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.19.0.tgz",
-      "integrity": "sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==",
-      "license": "MIT",
-      "dependencies": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.3.0"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/entities": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
@@ -9071,12 +9070,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/es-module-lexer": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz",
-      "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==",
-      "license": "MIT"
-    },
     "node_modules/es-object-atoms": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
@@ -9204,7 +9197,6 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -9390,7 +9382,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -9621,6 +9612,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "estraverse": "^5.2.0"
@@ -9633,6 +9625,7 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
@@ -9669,15 +9662,6 @@
       "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
       "license": "MIT"
     },
-    "node_modules/events": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
-      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.8.x"
-      }
-    },
     "node_modules/expect-type": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
@@ -10157,12 +10141,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/glob-to-regexp": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-      "license": "BSD-2-Clause"
-    },
     "node_modules/globals": {
       "version": "14.0.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
@@ -10226,6 +10204,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -11097,42 +11076,12 @@
         "node": ">=10"
       }
     },
-    "node_modules/jest-worker": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
-      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*",
-        "merge-stream": "^2.0.0",
-        "supports-color": "^8.0.0"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      }
-    },
-    "node_modules/jest-worker/node_modules/supports-color": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-      "license": "MIT",
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/supports-color?sponsor=1"
-      }
-    },
     "node_modules/jiti": {
       "version": "1.21.7",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -11254,12 +11203,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/json-parse-even-better-errors": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "license": "MIT"
-    },
     "node_modules/json-schema": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
@@ -11318,7 +11261,6 @@
       "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-4.1.0.tgz",
       "integrity": "sha512-xd1d/XRkwqnsq6FP3zH1Q+Ejqn2ULIJeDZ+FTKpaabVpZREjsJKRJwuokTNgdqOU+fl55KgbvgZ1pRTSWCP2kQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.28.4",
         "fast-png": "^6.2.0",
@@ -11429,19 +11371,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/loader-runner": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.1.tgz",
-      "integrity": "sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.11.5"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
-    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -11523,16 +11452,6 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
-    "node_modules/lz-string": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
-      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "lz-string": "bin/bin.js"
-      }
-    },
     "node_modules/magic-string": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -11711,12 +11630,6 @@
       "dev": true,
       "license": "CC0-1.0"
     },
-    "node_modules/merge-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "license": "MIT"
-    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -12181,27 +12094,6 @@
         "node": ">=8.6"
       }
     },
-    "node_modules/mime-db": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mime-types": {
-      "version": "2.1.35",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "license": "MIT",
-      "dependencies": {
-        "mime-db": "1.52.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -12334,18 +12226,11 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/neo-async": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "license": "MIT"
-    },
     "node_modules/next": {
       "version": "16.1.6",
       "resolved": "https://registry.npmjs.org/next/-/next-16.1.6.tgz",
       "integrity": "sha512-hkyRkcu5x/41KoqnROkfTm2pZVbKxvbZRuNvKXLRXxs3VfyO0WhY50TQS40EuKO9SW3rBj/sF3WbVwDACeMZyw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@next/env": "16.1.6",
         "@swc/helpers": "0.5.15",
@@ -12862,7 +12747,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -13042,41 +12926,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/pretty-format": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
-      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^17.0.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/pretty-format/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/pretty-format/node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -13246,7 +13095,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -13256,7 +13104,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
       "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -13407,6 +13254,21 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-use-measure": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz",
+      "integrity": "sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.13",
+        "react-dom": ">=16.13"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -13697,7 +13559,6 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
       "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -13834,60 +13695,6 @@
       "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
       "license": "MIT"
     },
-    "node_modules/schema-utils": {
-      "version": "4.3.3",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.3.tgz",
-      "integrity": "sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/json-schema": "^7.0.9",
-        "ajv": "^8.9.0",
-        "ajv-formats": "^2.1.1",
-        "ajv-keywords": "^5.1.0"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
-    },
-    "node_modules/schema-utils/node_modules/ajv": {
-      "version": "8.18.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
-      "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3",
-        "fast-uri": "^3.0.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/schema-utils/node_modules/ajv-keywords": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
-      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
-      "license": "MIT",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3"
-      },
-      "peerDependencies": {
-        "ajv": "^8.8.2"
-      }
-    },
-    "node_modules/schema-utils/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "license": "MIT"
-    },
     "node_modules/semver": {
       "version": "7.6.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
@@ -14563,7 +14370,6 @@
       "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -14610,19 +14416,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/tapable": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
-      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
-    },
     "node_modules/temp-dir": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
@@ -14668,40 +14461,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/terser-webpack-plugin": {
-      "version": "5.3.16",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.16.tgz",
-      "integrity": "sha512-h9oBFCWrq78NyWWVcSwZarJkZ01c2AyGrzs1crmHZO3QUg9D61Wu4NPjBy69n7JqylFF5y+CsUZYmYEIZ3mR+Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/trace-mapping": "^0.3.25",
-        "jest-worker": "^27.4.5",
-        "schema-utils": "^4.3.0",
-        "serialize-javascript": "^6.0.2",
-        "terser": "^5.31.1"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^5.1.0"
-      },
-      "peerDependenciesMeta": {
-        "@swc/core": {
-          "optional": true
-        },
-        "esbuild": {
-          "optional": true
-        },
-        "uglify-js": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/terser/node_modules/commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
@@ -14805,7 +14564,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -15054,7 +14812,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -15119,6 +14876,7 @@
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/unicode-canonical-property-names-ecmascript": {
@@ -15479,7 +15237,6 @@
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -15573,7 +15330,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -15747,104 +15503,12 @@
         "node": ">=18"
       }
     },
-    "node_modules/watchpack": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.5.1.tgz",
-      "integrity": "sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==",
-      "license": "MIT",
-      "dependencies": {
-        "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.1.2"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/webidl-conversions": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
       "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==",
       "license": "BSD-2-Clause"
     },
-    "node_modules/webpack": {
-      "version": "5.105.2",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.105.2.tgz",
-      "integrity": "sha512-dRXm0a2qcHPUBEzVk8uph0xWSjV/xZxenQQbLwnwP7caQCYpqG1qddwlyEkIDkYn0K8tvmcrZ+bOrzoQ3HxCDw==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/eslint-scope": "^3.7.7",
-        "@types/estree": "^1.0.8",
-        "@types/json-schema": "^7.0.15",
-        "@webassemblyjs/ast": "^1.14.1",
-        "@webassemblyjs/wasm-edit": "^1.14.1",
-        "@webassemblyjs/wasm-parser": "^1.14.1",
-        "acorn": "^8.15.0",
-        "acorn-import-phases": "^1.0.3",
-        "browserslist": "^4.28.1",
-        "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.19.0",
-        "es-module-lexer": "^2.0.0",
-        "eslint-scope": "5.1.1",
-        "events": "^3.2.0",
-        "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.2.11",
-        "json-parse-even-better-errors": "^2.3.1",
-        "loader-runner": "^4.3.1",
-        "mime-types": "^2.1.27",
-        "neo-async": "^2.6.2",
-        "schema-utils": "^4.3.3",
-        "tapable": "^2.3.0",
-        "terser-webpack-plugin": "^5.3.16",
-        "watchpack": "^2.5.1",
-        "webpack-sources": "^3.3.3"
-      },
-      "bin": {
-        "webpack": "bin/webpack.js"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependenciesMeta": {
-        "webpack-cli": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/webpack-sources": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.3.4.tgz",
-      "integrity": "sha512-7tP1PdV4vF+lYPnkMR0jMY5/la2ub5Fc/8VQrrU+lXkiM6C4TjVfGw7iKfyhnTQOsD+6Q/iKw0eFciziRgD58Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/webpack/node_modules/eslint-scope": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^4.1.1"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/webpack/node_modules/estraverse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
     "node_modules/whatwg-mimetype": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-5.0.0.tgz",
@@ -16101,7 +15765,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
       "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -16287,7 +15950,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
       "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -16455,7 +16117,6 @@
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/package.json b/package.json
index fe3897a..eaaaac7 100644
--- a/package.json
+++ b/package.json
@@ -23,11 +23,18 @@
     "@stripe/stripe-js": "^8.7.0",
     "@tanstack/react-virtual": "^3.13.21",
     "@types/d3": "^7.4.3",
+    "@visx/curve": "^3.12.0",
+    "@visx/event": "^3.12.0",
+    "@visx/grid": "^3.12.0",
+    "@visx/responsive": "^3.12.0",
+    "@visx/scale": "^3.12.0",
+    "@visx/shape": "^3.12.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cobe": "^0.6.5",
     "country-flag-icons": "^1.6.4",
     "d3": "^7.9.0",
+    "d3-array": "^3.2.4",
     "d3-scale": "^4.0.2",
     "framer-motion": "^12.23.26",
     "html-to-image": "^1.11.13",
@@ -41,6 +48,7 @@
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "react-markdown": "^10.1.0",
+    "react-use-measure": "^2.1.7",
     "recharts": "^2.15.0",
     "sonner": "^2.0.7",
     "svg-dotted-map": "^2.0.1",
@@ -58,6 +66,7 @@
     "@tailwindcss/typography": "^0.5.19",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
+    "@types/d3-array": "^3.2.2",
     "@types/d3-scale": "^4.0.9",
     "@types/node": "^20.14.12",
     "@types/react": "^19.2.14",
diff --git a/styles/globals.css b/styles/globals.css
index eb0c354..1937543 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -18,6 +18,18 @@
     --chart-grid: #262626;
     --chart-axis: #737373;
 
+    /* * visx area chart tokens (dark-only) */
+    --chart-background: #0a0a0a;
+    --chart-foreground: #404040;
+    --chart-foreground-muted: #a3a3a3;
+    --chart-line-primary: #FD5E0F;
+    --chart-line-secondary: #737373;
+    --chart-crosshair: #404040;
+    --chart-label: #a3a3a3;
+    --chart-marker-background: #262626;
+    --chart-marker-border: #404040;
+    --chart-marker-foreground: #fafafa;
+
     /* * shadcn-compatible semantic tokens (dark-only) */
     --background: 10 10 10;
     --foreground: 250 250 250;
-- 
2.49.1


From d37e817cc99b5bb8c156cfdfed4eac4c7940b15c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 22:40:52 +0100
Subject: [PATCH 137/428] fix: add legacy-peer-deps to .npmrc for visx React 19
 compat

---
 .npmrc | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.npmrc b/.npmrc
index 8477dbe..83aab43 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1,2 +1,3 @@
 @ciphera-net:registry=https://npm.pkg.github.com
 //npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}
+legacy-peer-deps=true
-- 
2.49.1


From 1270aa99a9da469b10ae4b11b4005c7327751bb3 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 22:44:14 +0100
Subject: [PATCH 138/428] feat: add diagonal pattern fill to dashboard area
 chart

---
 components/dashboard/Chart.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index 8e4938d..b3c9b93 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useMemo, useRef, useCallback, useEffect } from 'react'
 import { useTheme } from '@ciphera-net/ui'
-import { AreaChart as VisxAreaChart, Area as VisxArea, Grid as VisxGrid, XAxis as VisxXAxis, YAxis as VisxYAxis, ChartTooltip as VisxChartTooltip, type TooltipRow } from '@/components/ui/area-chart'
+import { AreaChart as VisxAreaChart, Area as VisxArea, Grid as VisxGrid, XAxis as VisxXAxis, YAxis as VisxYAxis, ChartTooltip as VisxChartTooltip, PatternLines as VisxPatternLines, PatternArea as VisxPatternArea, type TooltipRow } from '@/components/ui/area-chart'
 import { Card, CardContent, CardHeader } from '@/components/ui/card'
 import { formatNumber, formatDuration, formatUpdatedAgo, DatePicker } from '@ciphera-net/ui'
 import { Select, DownloadIcon, PlusIcon, XIcon } from '@ciphera-net/ui'
@@ -427,14 +427,22 @@ export default function Chart({
                 aspectRatio="2.5 / 1"
                 margin={{ top: 20, right: 20, bottom: 40, left: 50 }}
               >
+                <VisxPatternLines
+                  id="area-pattern"
+                  width={6}
+                  height={6}
+                  orientation={['diagonal']}
+                  stroke={CHART_COLORS[metric]}
+                  strokeWidth={1}
+                />
+                <VisxPatternArea dataKey={metric} fill="url(#area-pattern)" />
                 <VisxGrid horizontal vertical={false} stroke="var(--chart-grid)" strokeDasharray="4,4" />
                 <VisxArea
                   dataKey={metric}
                   fill={CHART_COLORS[metric]}
-                  fillOpacity={0.15}
+                  fillOpacity={0}
                   stroke={CHART_COLORS[metric]}
                   strokeWidth={2}
-                  gradientToOpacity={0}
                 />
                 <VisxXAxis numTicks={6} />
                 <VisxYAxis
-- 
2.49.1


From 9c06a845a061e89f845746bcfaf1fa103de25063 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 22:46:37 +0100
Subject: [PATCH 139/428] fix: add missing @testing-library/dom dev dependency

---
 package-lock.json | 100 ++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |   1 +
 2 files changed, 101 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index bafe5ad..67e708b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -54,6 +54,7 @@
       },
       "devDependencies": {
         "@tailwindcss/typography": "^0.5.19",
+        "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
         "@types/d3-array": "^3.2.2",
@@ -5608,6 +5609,36 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
+      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "picocolors": "1.1.1",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
     "node_modules/@testing-library/jest-dom": {
       "version": "6.9.1",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz",
@@ -5674,6 +5705,13 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -7193,6 +7231,16 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -8881,6 +8929,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/dom-helpers": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
@@ -11452,6 +11507,16 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -12926,6 +12991,41 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/pretty-format/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
diff --git a/package.json b/package.json
index eaaaac7..df65735 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.19",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/d3-array": "^3.2.2",
-- 
2.49.1


From 9e128c49457684ae3e9d6b9b3208e9de8c17ec29 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 22:49:43 +0100
Subject: [PATCH 140/428] fix: remove pattern fill from dashboard chart, use
 gradient only

---
 components/dashboard/Chart.tsx | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index b3c9b93..8e4938d 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useMemo, useRef, useCallback, useEffect } from 'react'
 import { useTheme } from '@ciphera-net/ui'
-import { AreaChart as VisxAreaChart, Area as VisxArea, Grid as VisxGrid, XAxis as VisxXAxis, YAxis as VisxYAxis, ChartTooltip as VisxChartTooltip, PatternLines as VisxPatternLines, PatternArea as VisxPatternArea, type TooltipRow } from '@/components/ui/area-chart'
+import { AreaChart as VisxAreaChart, Area as VisxArea, Grid as VisxGrid, XAxis as VisxXAxis, YAxis as VisxYAxis, ChartTooltip as VisxChartTooltip, type TooltipRow } from '@/components/ui/area-chart'
 import { Card, CardContent, CardHeader } from '@/components/ui/card'
 import { formatNumber, formatDuration, formatUpdatedAgo, DatePicker } from '@ciphera-net/ui'
 import { Select, DownloadIcon, PlusIcon, XIcon } from '@ciphera-net/ui'
@@ -427,22 +427,14 @@ export default function Chart({
                 aspectRatio="2.5 / 1"
                 margin={{ top: 20, right: 20, bottom: 40, left: 50 }}
               >
-                <VisxPatternLines
-                  id="area-pattern"
-                  width={6}
-                  height={6}
-                  orientation={['diagonal']}
-                  stroke={CHART_COLORS[metric]}
-                  strokeWidth={1}
-                />
-                <VisxPatternArea dataKey={metric} fill="url(#area-pattern)" />
                 <VisxGrid horizontal vertical={false} stroke="var(--chart-grid)" strokeDasharray="4,4" />
                 <VisxArea
                   dataKey={metric}
                   fill={CHART_COLORS[metric]}
-                  fillOpacity={0}
+                  fillOpacity={0.15}
                   stroke={CHART_COLORS[metric]}
                   strokeWidth={2}
+                  gradientToOpacity={0}
                 />
                 <VisxXAxis numTicks={6} />
                 <VisxYAxis
-- 
2.49.1


From 830da49c5f30ee6fde9d03b5532bb08f4784f01e Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 22:55:19 +0100
Subject: [PATCH 141/428] feat: add bar chart toggle to dashboard

Added visx bar chart component with rounded corners and grow animation.
Dashboard now has area/bar toggle buttons next to the export icon.
---
 components/dashboard/Chart.tsx | 119 +++--
 components/ui/bar-chart.tsx    | 867 +++++++++++++++++++++++++++++++++
 package-lock.json              |  14 +
 package.json                   |   1 +
 4 files changed, 966 insertions(+), 35 deletions(-)
 create mode 100644 components/ui/bar-chart.tsx

diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index 8e4938d..e78c424 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -3,6 +3,8 @@
 import { useState, useMemo, useRef, useCallback, useEffect } from 'react'
 import { useTheme } from '@ciphera-net/ui'
 import { AreaChart as VisxAreaChart, Area as VisxArea, Grid as VisxGrid, XAxis as VisxXAxis, YAxis as VisxYAxis, ChartTooltip as VisxChartTooltip, type TooltipRow } from '@/components/ui/area-chart'
+import { BarChart as VisxBarChart, Bar as VisxBar, Grid as VisxBarGrid, BarXAxis as VisxBarXAxis, ChartTooltip as VisxBarChartTooltip } from '@/components/ui/bar-chart'
+import { ChartLine, ChartBar } from '@phosphor-icons/react'
 import { Card, CardContent, CardHeader } from '@/components/ui/card'
 import { formatNumber, formatDuration, formatUpdatedAgo, DatePicker } from '@ciphera-net/ui'
 import { Select, DownloadIcon, PlusIcon, XIcon } from '@ciphera-net/ui'
@@ -132,6 +134,7 @@ export default function Chart({
   onDeleteAnnotation,
 }: ChartProps) {
   const [metric, setMetric] = useState<MetricType>('visitors')
+  const [chartType, setChartType] = useState<'area' | 'bar'>('area')
   const chartContainerRef = useRef<HTMLDivElement>(null)
   const { resolvedTheme } = useTheme()
   const [showComparison, setShowComparison] = useState(false)
@@ -392,6 +395,23 @@ export default function Chart({
                 />
               ) : null}
 
+              <div className="flex items-center rounded-lg border border-neutral-800 overflow-hidden">
+                <button
+                  onClick={() => setChartType('area')}
+                  className={`p-1.5 transition-colors cursor-pointer ${chartType === 'area' ? 'bg-neutral-800 text-white' : 'text-neutral-500 hover:text-neutral-300'}`}
+                  title="Area chart"
+                >
+                  <ChartLine className="w-4 h-4" />
+                </button>
+                <button
+                  onClick={() => setChartType('bar')}
+                  className={`p-1.5 transition-colors cursor-pointer ${chartType === 'bar' ? 'bg-neutral-800 text-white' : 'text-neutral-500 hover:text-neutral-300'}`}
+                  title="Bar chart"
+                >
+                  <ChartBar className="w-4 h-4" />
+                </button>
+              </div>
+
               <button
                 onClick={handleExportChart}
                 disabled={!hasData}
@@ -421,41 +441,70 @@ export default function Chart({
             </div>
           ) : (
             <div className="w-full" onContextMenu={handleChartContextMenu}>
-              <VisxAreaChart
-                data={chartData as Record<string, unknown>[]}
-                xDataKey="dateObj"
-                aspectRatio="2.5 / 1"
-                margin={{ top: 20, right: 20, bottom: 40, left: 50 }}
-              >
-                <VisxGrid horizontal vertical={false} stroke="var(--chart-grid)" strokeDasharray="4,4" />
-                <VisxArea
-                  dataKey={metric}
-                  fill={CHART_COLORS[metric]}
-                  fillOpacity={0.15}
-                  stroke={CHART_COLORS[metric]}
-                  strokeWidth={2}
-                  gradientToOpacity={0}
-                />
-                <VisxXAxis numTicks={6} />
-                <VisxYAxis
-                  numTicks={6}
-                  formatValue={(v) => {
-                    const config = METRIC_CONFIGS.find((m) => m.key === metric)
-                    return config ? config.format(v) : v.toString()
-                  }}
-                />
-                <VisxChartTooltip
-                  rows={(point) => {
-                    const config = METRIC_CONFIGS.find((m) => m.key === metric)
-                    const value = point[metric] as number
-                    return [{
-                      color: CHART_COLORS[metric],
-                      label: config?.label || metric,
-                      value: config ? config.format(value) : value,
-                    }]
-                  }}
-                />
-              </VisxAreaChart>
+              {chartType === 'area' ? (
+                <VisxAreaChart
+                  data={chartData as Record<string, unknown>[]}
+                  xDataKey="dateObj"
+                  aspectRatio="2.5 / 1"
+                  margin={{ top: 20, right: 20, bottom: 40, left: 50 }}
+                >
+                  <VisxGrid horizontal vertical={false} stroke="var(--chart-grid)" strokeDasharray="4,4" />
+                  <VisxArea
+                    dataKey={metric}
+                    fill={CHART_COLORS[metric]}
+                    fillOpacity={0.15}
+                    stroke={CHART_COLORS[metric]}
+                    strokeWidth={2}
+                    gradientToOpacity={0}
+                  />
+                  <VisxXAxis numTicks={6} />
+                  <VisxYAxis
+                    numTicks={6}
+                    formatValue={(v) => {
+                      const config = METRIC_CONFIGS.find((m) => m.key === metric)
+                      return config ? config.format(v) : v.toString()
+                    }}
+                  />
+                  <VisxChartTooltip
+                    rows={(point) => {
+                      const config = METRIC_CONFIGS.find((m) => m.key === metric)
+                      const value = point[metric] as number
+                      return [{
+                        color: CHART_COLORS[metric],
+                        label: config?.label || metric,
+                        value: config ? config.format(value) : value,
+                      }]
+                    }}
+                  />
+                </VisxAreaChart>
+              ) : (
+                <VisxBarChart
+                  data={chartData as Record<string, unknown>[]}
+                  xDataKey="date"
+                  aspectRatio="2.5 / 1"
+                  margin={{ top: 20, right: 20, bottom: 40, left: 50 }}
+                  barGap={0.3}
+                >
+                  <VisxBarGrid horizontal vertical={false} stroke="var(--chart-grid)" strokeDasharray="4,4" />
+                  <VisxBar
+                    dataKey={metric}
+                    fill={CHART_COLORS[metric]}
+                    lineCap="round"
+                  />
+                  <VisxBarXAxis maxLabels={8} />
+                  <VisxBarChartTooltip
+                    rows={(point) => {
+                      const config = METRIC_CONFIGS.find((m) => m.key === metric)
+                      const value = point[metric] as number
+                      return [{
+                        color: CHART_COLORS[metric],
+                        label: config?.label || metric,
+                        value: config ? config.format(value) : value,
+                      }]
+                    }}
+                  />
+                </VisxBarChart>
+              )}
             </div>
           )}
         </CardContent>
diff --git a/components/ui/bar-chart.tsx b/components/ui/bar-chart.tsx
new file mode 100644
index 0000000..6740881
--- /dev/null
+++ b/components/ui/bar-chart.tsx
@@ -0,0 +1,867 @@
+"use client";
+
+import { localPoint } from "@visx/event";
+import { LinearGradient as VisxLinearGradient } from "@visx/gradient";
+import { GridColumns, GridRows } from "@visx/grid";
+import { ParentSize } from "@visx/responsive";
+import { scaleBand, scaleLinear } from "@visx/scale";
+import {
+  AnimatePresence,
+  motion,
+  useSpring,
+} from "motion/react";
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type Dispatch,
+  type ReactElement,
+  type ReactNode,
+  type RefObject,
+  type SetStateAction,
+} from "react";
+import useMeasure from "react-use-measure";
+import { createPortal } from "react-dom";
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+// ─── Utils ───────────────────────────────────────────────────────────────────
+
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+// ─── CSS Vars ────────────────────────────────────────────────────────────────
+
+export const chartCssVars = {
+  background: "var(--chart-background)",
+  foreground: "var(--chart-foreground)",
+  foregroundMuted: "var(--chart-foreground-muted)",
+  label: "var(--chart-label)",
+  linePrimary: "var(--chart-line-primary)",
+  lineSecondary: "var(--chart-line-secondary)",
+  crosshair: "var(--chart-crosshair)",
+  grid: "var(--chart-grid)",
+};
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+export interface Margin {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+export interface TooltipData {
+  point: Record<string, unknown>;
+  index: number;
+  x: number;
+  yPositions: Record<string, number>;
+  xPositions?: Record<string, number>;
+}
+
+export interface TooltipRow {
+  color: string;
+  label: string;
+  value: string | number;
+}
+
+export interface LineConfig {
+  dataKey: string;
+  stroke: string;
+  strokeWidth: number;
+}
+
+// ─── Bar Chart Context ───────────────────────────────────────────────────────
+
+type ScaleLinearType<Output> = ReturnType<typeof scaleLinear<Output>>;
+type ScaleBandType<Domain extends { toString(): string }> = ReturnType<
+  typeof scaleBand<Domain>
+>;
+
+export interface BarChartContextValue {
+  data: Record<string, unknown>[];
+  xScale: ScaleBandType<string>;
+  yScale: ScaleLinearType<number>;
+  width: number;
+  height: number;
+  innerWidth: number;
+  innerHeight: number;
+  margin: Margin;
+  bandWidth: number;
+  tooltipData: TooltipData | null;
+  setTooltipData: Dispatch<SetStateAction<TooltipData | null>>;
+  containerRef: RefObject<HTMLDivElement | null>;
+  bars: BarConfig[];
+  isLoaded: boolean;
+  animationDuration: number;
+  xDataKey: string;
+  hoveredBarIndex: number | null;
+  setHoveredBarIndex: (index: number | null) => void;
+  orientation: "vertical" | "horizontal";
+  stacked: boolean;
+  stackGap: number;
+  stackOffsets: Map<number, Map<string, number>>;
+  barGap: number;
+  barWidth?: number;
+}
+
+interface BarConfig {
+  dataKey: string;
+  fill: string;
+  stroke?: string;
+}
+
+const BarChartContext = createContext<BarChartContextValue | null>(null);
+
+function BarChartProvider({
+  children,
+  value,
+}: {
+  children: ReactNode;
+  value: BarChartContextValue;
+}) {
+  return (
+    <BarChartContext.Provider value={value}>
+      {children}
+    </BarChartContext.Provider>
+  );
+}
+
+export function useChart(): BarChartContextValue {
+  const context = useContext(BarChartContext);
+  if (!context) {
+    throw new Error(
+      "useChart must be used within a BarChartProvider. " +
+        "Make sure your component is wrapped in <BarChart>."
+    );
+  }
+  return context;
+}
+
+// ─── Tooltip Components ──────────────────────────────────────────────────────
+
+interface TooltipDotProps {
+  x: number;
+  y: number;
+  visible: boolean;
+  color: string;
+  size?: number;
+  strokeColor?: string;
+  strokeWidth?: number;
+}
+
+function TooltipDot({
+  x,
+  y,
+  visible,
+  color,
+  size = 5,
+  strokeColor = chartCssVars.background,
+  strokeWidth = 2,
+}: TooltipDotProps) {
+  const springConfig = { stiffness: 300, damping: 30 };
+  const animatedX = useSpring(x, springConfig);
+  const animatedY = useSpring(y, springConfig);
+
+  useEffect(() => {
+    animatedX.set(x);
+    animatedY.set(y);
+  }, [x, y, animatedX, animatedY]);
+
+  if (!visible) return null;
+
+  return (
+    <motion.circle
+      cx={animatedX}
+      cy={animatedY}
+      fill={color}
+      r={size}
+      stroke={strokeColor}
+      strokeWidth={strokeWidth}
+    />
+  );
+}
+
+TooltipDot.displayName = "TooltipDot";
+
+interface TooltipIndicatorProps {
+  x: number;
+  height: number;
+  visible: boolean;
+  width?: number;
+  colorEdge?: string;
+  colorMid?: string;
+  fadeEdges?: boolean;
+  gradientId?: string;
+}
+
+function TooltipIndicator({
+  x,
+  height,
+  visible,
+  width = 1,
+  colorEdge = chartCssVars.crosshair,
+  colorMid = chartCssVars.crosshair,
+  fadeEdges = true,
+  gradientId = "bar-tooltip-indicator-gradient",
+}: TooltipIndicatorProps) {
+  const springConfig = { stiffness: 300, damping: 30 };
+  const animatedX = useSpring(x - width / 2, springConfig);
+
+  useEffect(() => {
+    animatedX.set(x - width / 2);
+  }, [x, animatedX, width]);
+
+  if (!visible) return null;
+
+  const edgeOpacity = fadeEdges ? 0 : 1;
+
+  return (
+    <g>
+      <defs>
+        <linearGradient id={gradientId} x1="0%" x2="0%" y1="0%" y2="100%">
+          <stop offset="0%" style={{ stopColor: colorEdge, stopOpacity: edgeOpacity }} />
+          <stop offset="10%" style={{ stopColor: colorEdge, stopOpacity: 1 }} />
+          <stop offset="50%" style={{ stopColor: colorMid, stopOpacity: 1 }} />
+          <stop offset="90%" style={{ stopColor: colorEdge, stopOpacity: 1 }} />
+          <stop offset="100%" style={{ stopColor: colorEdge, stopOpacity: edgeOpacity }} />
+        </linearGradient>
+      </defs>
+      <motion.rect fill={`url(#${gradientId})`} height={height} width={width} x={animatedX} y={0} />
+    </g>
+  );
+}
+
+TooltipIndicator.displayName = "TooltipIndicator";
+
+interface TooltipContentProps {
+  title?: string;
+  rows: TooltipRow[];
+  children?: ReactNode;
+}
+
+function TooltipContent({ title, rows, children }: TooltipContentProps) {
+  const [measureRef, bounds] = useMeasure({ debounce: 0, scroll: false });
+  const [committedHeight, setCommittedHeight] = useState<number | null>(null);
+  const committedChildrenStateRef = useRef<boolean | null>(null);
+  const frameRef = useRef<number | null>(null);
+
+  const hasChildren = !!children;
+  const markerKey = hasChildren ? "has-marker" : "no-marker";
+  const isWaitingForSettlement = committedChildrenStateRef.current !== null && committedChildrenStateRef.current !== hasChildren;
+
+  useEffect(() => {
+    if (bounds.height <= 0) return;
+    if (frameRef.current) { cancelAnimationFrame(frameRef.current); frameRef.current = null; }
+    if (isWaitingForSettlement) {
+      frameRef.current = requestAnimationFrame(() => {
+        frameRef.current = requestAnimationFrame(() => {
+          setCommittedHeight(bounds.height);
+          committedChildrenStateRef.current = hasChildren;
+        });
+      });
+    } else {
+      setCommittedHeight(bounds.height);
+      committedChildrenStateRef.current = hasChildren;
+    }
+    return () => { if (frameRef.current) cancelAnimationFrame(frameRef.current); };
+  }, [bounds.height, hasChildren, isWaitingForSettlement]);
+
+  const shouldAnimate = committedHeight !== null;
+
+  return (
+    <motion.div
+      animate={committedHeight !== null ? { height: committedHeight } : undefined}
+      className="overflow-hidden"
+      initial={false}
+      transition={shouldAnimate ? { type: "spring", stiffness: 500, damping: 35, mass: 0.8 } : { duration: 0 }}
+    >
+      <div className="px-3 py-2.5" ref={measureRef}>
+        {title && <div className="mb-2 font-medium text-neutral-400 text-xs">{title}</div>}
+        <div className="space-y-1.5">
+          {rows.map((row) => (
+            <div className="flex items-center justify-between gap-4" key={`${row.label}-${row.color}`}>
+              <div className="flex items-center gap-2">
+                <span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: row.color }} />
+                <span className="text-neutral-400 text-sm">{row.label}</span>
+              </div>
+              <span className="font-medium text-white text-sm tabular-nums">
+                {typeof row.value === "number" ? row.value.toLocaleString() : row.value}
+              </span>
+            </div>
+          ))}
+        </div>
+        <AnimatePresence mode="wait">
+          {children && (
+            <motion.div animate={{ opacity: 1, filter: "blur(0px)" }} className="mt-2" exit={{ opacity: 0, filter: "blur(4px)" }} initial={{ opacity: 0, filter: "blur(4px)" }} key={markerKey} transition={{ duration: 0.2, ease: "easeOut" }}>
+              {children}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </motion.div>
+  );
+}
+
+TooltipContent.displayName = "TooltipContent";
+
+interface TooltipBoxProps {
+  x: number;
+  y: number;
+  visible: boolean;
+  containerRef: RefObject<HTMLDivElement | null>;
+  containerWidth: number;
+  containerHeight: number;
+  offset?: number;
+  className?: string;
+  children: ReactNode;
+  top?: number | ReturnType<typeof useSpring>;
+}
+
+function TooltipBox({
+  x, y, visible, containerRef, containerWidth, containerHeight, offset = 16, className = "", children, top: topOverride,
+}: TooltipBoxProps) {
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const [tooltipWidth, setTooltipWidth] = useState(180);
+  const [tooltipHeight, setTooltipHeight] = useState(80);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => { setMounted(true); }, []);
+
+  useLayoutEffect(() => {
+    if (tooltipRef.current) {
+      const w = tooltipRef.current.offsetWidth;
+      const h = tooltipRef.current.offsetHeight;
+      if (w > 0 && w !== tooltipWidth) setTooltipWidth(w);
+      if (h > 0 && h !== tooltipHeight) setTooltipHeight(h);
+    }
+  }, [tooltipWidth, tooltipHeight]);
+
+  const shouldFlipX = x + tooltipWidth + offset > containerWidth;
+  const targetX = shouldFlipX ? x - offset - tooltipWidth : x + offset;
+  const targetY = Math.max(offset, Math.min(y - tooltipHeight / 2, containerHeight - tooltipHeight - offset));
+
+  const prevFlipRef = useRef(shouldFlipX);
+  const [flipKey, setFlipKey] = useState(0);
+
+  useEffect(() => {
+    if (prevFlipRef.current !== shouldFlipX) { setFlipKey((k) => k + 1); prevFlipRef.current = shouldFlipX; }
+  }, [shouldFlipX]);
+
+  const springConfig = { stiffness: 100, damping: 20 };
+  const animatedLeft = useSpring(targetX, springConfig);
+  const animatedTop = useSpring(targetY, springConfig);
+
+  useEffect(() => { animatedLeft.set(targetX); }, [targetX, animatedLeft]);
+  useEffect(() => { animatedTop.set(targetY); }, [targetY, animatedTop]);
+
+  const finalTop = topOverride ?? animatedTop;
+  const transformOrigin = shouldFlipX ? "right top" : "left top";
+
+  const container = containerRef.current;
+  if (!(mounted && container)) return null;
+  if (!visible) return null;
+
+  return createPortal(
+    <motion.div animate={{ opacity: 1 }} className={cn("pointer-events-none absolute z-50", className)} exit={{ opacity: 0 }} initial={{ opacity: 0 }} ref={tooltipRef} style={{ left: animatedLeft, top: finalTop }} transition={{ duration: 0.1 }}>
+      <motion.div animate={{ scale: 1, opacity: 1, x: 0 }} className="min-w-[140px] overflow-hidden rounded-lg bg-neutral-800/90 text-white shadow-lg backdrop-blur-md" initial={{ scale: 0.85, opacity: 0, x: shouldFlipX ? 20 : -20 }} key={flipKey} style={{ transformOrigin }} transition={{ type: "spring", stiffness: 300, damping: 25 }}>
+        {children}
+      </motion.div>
+    </motion.div>,
+    container
+  );
+}
+
+TooltipBox.displayName = "TooltipBox";
+
+// ─── ChartTooltip ────────────────────────────────────────────────────────────
+
+export interface ChartTooltipProps {
+  showCrosshair?: boolean;
+  showDots?: boolean;
+  content?: (props: { point: Record<string, unknown>; index: number }) => ReactNode;
+  rows?: (point: Record<string, unknown>) => TooltipRow[];
+  children?: ReactNode;
+  className?: string;
+}
+
+export function ChartTooltip({ showCrosshair = true, showDots = true, content, rows: rowsRenderer, children, className = "" }: ChartTooltipProps) {
+  const { tooltipData, width, height, innerHeight, margin, bars, xDataKey, containerRef, orientation, yScale } = useChart();
+  const isHorizontal = orientation === "horizontal";
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => { setMounted(true); }, []);
+
+  const visible = tooltipData !== null;
+  const x = tooltipData?.x ?? 0;
+  const xWithMargin = x + margin.left;
+  const firstBarDataKey = bars[0]?.dataKey;
+  const firstBarY = firstBarDataKey ? (tooltipData?.yPositions[firstBarDataKey] ?? 0) : 0;
+  const yWithMargin = firstBarY + margin.top;
+
+  const springConfig = { stiffness: 300, damping: 30 };
+  const animatedX = useSpring(xWithMargin, springConfig);
+  useEffect(() => { animatedX.set(xWithMargin); }, [xWithMargin, animatedX]);
+
+  const tooltipRows = useMemo(() => {
+    if (!tooltipData) return [];
+    if (rowsRenderer) return rowsRenderer(tooltipData.point);
+    return bars.map((bar) => ({ color: bar.stroke || bar.fill, label: bar.dataKey, value: (tooltipData.point[bar.dataKey] as number) ?? 0 }));
+  }, [tooltipData, bars, rowsRenderer]);
+
+  const title = useMemo(() => {
+    if (!tooltipData) return undefined;
+    return String(tooltipData.point[xDataKey] ?? "");
+  }, [tooltipData, xDataKey]);
+
+  const container = containerRef.current;
+  if (!(mounted && container)) return null;
+
+  const tooltipContent = (
+    <>
+      {showCrosshair && !isHorizontal && (
+        <svg aria-hidden="true" className="pointer-events-none absolute inset-0" height="100%" width="100%">
+          <g transform={`translate(${margin.left},${margin.top})`}>
+            <TooltipIndicator height={innerHeight} visible={visible} width={1} x={x} />
+          </g>
+        </svg>
+      )}
+      {showDots && visible && !isHorizontal && (
+        <svg aria-hidden="true" className="pointer-events-none absolute inset-0" height="100%" width="100%">
+          <g transform={`translate(${margin.left},${margin.top})`}>
+            {bars.map((bar) => (
+              <TooltipDot color={bar.stroke || bar.fill} key={bar.dataKey} strokeColor={chartCssVars.background} visible={visible} x={tooltipData?.xPositions?.[bar.dataKey] ?? x} y={tooltipData?.yPositions[bar.dataKey] ?? 0} />
+            ))}
+          </g>
+        </svg>
+      )}
+      <TooltipBox className={className} containerHeight={height} containerRef={containerRef} containerWidth={width} top={isHorizontal ? undefined : margin.top} visible={visible} x={xWithMargin} y={isHorizontal ? yWithMargin : margin.top}>
+        {content ? content({ point: tooltipData?.point ?? {}, index: tooltipData?.index ?? 0 }) : (
+          <TooltipContent rows={tooltipRows} title={title}>{children}</TooltipContent>
+        )}
+      </TooltipBox>
+    </>
+  );
+
+  return createPortal(tooltipContent, container);
+}
+
+ChartTooltip.displayName = "ChartTooltip";
+
+// ─── Grid ────────────────────────────────────────────────────────────────────
+
+export interface GridProps {
+  horizontal?: boolean;
+  vertical?: boolean;
+  numTicksRows?: number;
+  numTicksColumns?: number;
+  rowTickValues?: number[];
+  stroke?: string;
+  strokeOpacity?: number;
+  strokeWidth?: number;
+  strokeDasharray?: string;
+  fadeHorizontal?: boolean;
+  fadeVertical?: boolean;
+}
+
+export function Grid({
+  horizontal = true, vertical = false, numTicksRows = 5, numTicksColumns = 10, rowTickValues,
+  stroke = chartCssVars.grid, strokeOpacity = 1, strokeWidth = 1, strokeDasharray = "4,4",
+  fadeHorizontal = true, fadeVertical = false,
+}: GridProps) {
+  const { xScale, yScale, innerWidth, innerHeight, orientation } = useChart();
+  const isHorizontalBar = orientation === "horizontal";
+  const columnScale = isHorizontalBar ? yScale : xScale;
+  const uniqueId = useId();
+  const hMaskId = `grid-rows-fade-${uniqueId}`;
+  const hGradientId = `${hMaskId}-gradient`;
+  const vMaskId = `grid-cols-fade-${uniqueId}`;
+  const vGradientId = `${vMaskId}-gradient`;
+
+  return (
+    <g className="chart-grid">
+      {horizontal && fadeHorizontal && (
+        <defs>
+          <linearGradient id={hGradientId} x1="0%" x2="100%" y1="0%" y2="0%">
+            <stop offset="0%" style={{ stopColor: "white", stopOpacity: 0 }} />
+            <stop offset="10%" style={{ stopColor: "white", stopOpacity: 1 }} />
+            <stop offset="90%" style={{ stopColor: "white", stopOpacity: 1 }} />
+            <stop offset="100%" style={{ stopColor: "white", stopOpacity: 0 }} />
+          </linearGradient>
+          <mask id={hMaskId}><rect fill={`url(#${hGradientId})`} height={innerHeight} width={innerWidth} x="0" y="0" /></mask>
+        </defs>
+      )}
+      {vertical && fadeVertical && (
+        <defs>
+          <linearGradient id={vGradientId} x1="0%" x2="0%" y1="0%" y2="100%">
+            <stop offset="0%" style={{ stopColor: "white", stopOpacity: 0 }} />
+            <stop offset="10%" style={{ stopColor: "white", stopOpacity: 1 }} />
+            <stop offset="90%" style={{ stopColor: "white", stopOpacity: 1 }} />
+            <stop offset="100%" style={{ stopColor: "white", stopOpacity: 0 }} />
+          </linearGradient>
+          <mask id={vMaskId}><rect fill={`url(#${vGradientId})`} height={innerHeight} width={innerWidth} x="0" y="0" /></mask>
+        </defs>
+      )}
+      {horizontal && (
+        <g mask={fadeHorizontal ? `url(#${hMaskId})` : undefined}>
+          <GridRows numTicks={rowTickValues ? undefined : numTicksRows} scale={yScale} stroke={stroke} strokeDasharray={strokeDasharray} strokeOpacity={strokeOpacity} strokeWidth={strokeWidth} tickValues={rowTickValues} width={innerWidth} />
+        </g>
+      )}
+      {vertical && columnScale && typeof columnScale === "function" && (
+        <g mask={fadeVertical ? `url(#${vMaskId})` : undefined}>
+          <GridColumns height={innerHeight} numTicks={numTicksColumns} scale={columnScale} stroke={stroke} strokeDasharray={strokeDasharray} strokeOpacity={strokeOpacity} strokeWidth={strokeWidth} />
+        </g>
+      )}
+    </g>
+  );
+}
+
+Grid.displayName = "Grid";
+
+// ─── BarXAxis ────────────────────────────────────────────────────────────────
+
+export interface BarXAxisProps {
+  tickerHalfWidth?: number;
+  showAllLabels?: boolean;
+  maxLabels?: number;
+}
+
+export function BarXAxis({ tickerHalfWidth = 50, showAllLabels = false, maxLabels = 12 }: BarXAxisProps) {
+  const { xScale, margin, tooltipData, containerRef, bandWidth } = useChart();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => { setMounted(true); }, []);
+
+  const labelsToShow = useMemo(() => {
+    const domain = xScale.domain();
+    if (domain.length === 0) return [];
+    let labels = domain.map((label) => ({ label, x: (xScale(label) ?? 0) + bandWidth / 2 + margin.left }));
+    if (!showAllLabels && labels.length > maxLabels) {
+      const step = Math.ceil(labels.length / maxLabels);
+      labels = labels.filter((_, i) => i % step === 0);
+    }
+    return labels;
+  }, [xScale, margin.left, bandWidth, showAllLabels, maxLabels]);
+
+  const isHovering = tooltipData !== null;
+  const crosshairX = tooltipData ? tooltipData.x + margin.left : null;
+
+  const container = containerRef.current;
+  if (!(mounted && container)) return null;
+
+  return createPortal(
+    <div className="pointer-events-none absolute inset-0">
+      {labelsToShow.map((item) => {
+        let opacity = 1;
+        if (isHovering && crosshairX !== null) {
+          const fadeBuffer = 20;
+          const fadeRadius = tickerHalfWidth + fadeBuffer;
+          const distance = Math.abs(item.x - crosshairX);
+          if (distance < tickerHalfWidth) opacity = 0;
+          else if (distance < fadeRadius) opacity = (distance - tickerHalfWidth) / fadeBuffer;
+        }
+        return (
+          <div className="absolute" key={item.label} style={{ left: item.x, bottom: 12, width: 0, display: "flex", justifyContent: "center" }}>
+            <motion.span animate={{ opacity }} className="whitespace-nowrap text-neutral-500 text-xs" initial={{ opacity: 1 }} transition={{ duration: 0.4, ease: "easeInOut" }}>
+              {item.label}
+            </motion.span>
+          </div>
+        );
+      })}
+    </div>,
+    container
+  );
+}
+
+BarXAxis.displayName = "BarXAxis";
+
+// ─── Bar ─────────────────────────────────────────────────────────────────────
+
+export interface BarProps {
+  dataKey: string;
+  fill?: string;
+  stroke?: string;
+  lineCap?: "round" | "butt" | number;
+  animate?: boolean;
+  animationType?: "grow" | "fade";
+  fadedOpacity?: number;
+  staggerDelay?: number;
+  stackGap?: number;
+}
+
+function resolveRadius(lineCap: "round" | "butt" | number, barWidth: number): number {
+  if (lineCap === "butt") return 0;
+  if (lineCap === "round") return barWidth / 2;
+  return lineCap;
+}
+
+export function Bar({
+  dataKey, fill = chartCssVars.linePrimary, stroke, lineCap = "round", animate = true,
+  animationType = "grow", fadedOpacity = 0.3, staggerDelay, stackGap = 0,
+}: BarProps) {
+  const {
+    data, xScale, yScale, innerHeight, innerWidth, bandWidth, hoveredBarIndex, isLoaded, animationDuration,
+    xDataKey, orientation, stacked, stackOffsets, bars, barWidth: fixedBarWidth,
+  } = useChart();
+
+  const isHorizontal = orientation === "horizontal";
+  const barIndex = bars.findIndex((b) => b.dataKey === dataKey);
+  const barCount = bars.length;
+  const singleBarWidth = stacked ? bandWidth : bandWidth / barCount;
+  const actualBarWidth = fixedBarWidth ?? singleBarWidth;
+  const radius = resolveRadius(lineCap, actualBarWidth);
+  const autoStagger = staggerDelay ?? Math.min(0.06, 0.8 / data.length);
+
+  return (
+    <>
+      {data.map((d, i) => {
+        const category = String(d[xDataKey] ?? "");
+        const value = typeof d[dataKey] === "number" ? (d[dataKey] as number) : 0;
+        const bandStart = xScale(category) ?? 0;
+        const stackOffset = stacked ? stackOffsets.get(i)?.get(dataKey) ?? 0 : 0;
+
+        let barX: number, barY: number, barW: number, barH: number;
+
+        if (isHorizontal) {
+          const barLength = innerWidth - (yScale(value) ?? innerWidth);
+          barY = bandStart + (stacked ? 0 : barIndex * singleBarWidth);
+          barH = actualBarWidth;
+          barW = barLength;
+          barX = stacked ? stackOffset : 0;
+          if (stacked && stackGap > 0 && barIndex > 0) { barX += stackGap; barW = Math.max(0, barW - stackGap); }
+        } else {
+          const scaledY = yScale(value) ?? innerHeight;
+          barX = bandStart + (stacked ? 0 : barIndex * singleBarWidth);
+          barW = actualBarWidth;
+          barH = innerHeight - scaledY;
+          barY = stacked ? scaledY - stackOffset : scaledY;
+          if (stacked && stackGap > 0 && barIndex > 0) { barY += stackGap; barH = Math.max(0, barH - stackGap); }
+        }
+
+        if (barW <= 0 || barH <= 0) return null;
+
+        const isHovered = hoveredBarIndex === i;
+        const someoneHovered = hoveredBarIndex !== null;
+        const barOpacity = someoneHovered ? (isHovered ? 1 : fadedOpacity) : 1;
+        const delay = i * autoStagger;
+        const r = Math.min(radius, barW / 2, barH / 2);
+
+        let path: string;
+        if (isHorizontal) {
+          path = `M${barX},${barY} L${barX + barW - r},${barY} Q${barX + barW},${barY} ${barX + barW},${barY + r} L${barX + barW},${barY + barH - r} Q${barX + barW},${barY + barH} ${barX + barW - r},${barY + barH} L${barX},${barY + barH}Z`;
+        } else {
+          path = `M${barX},${barY + barH} L${barX},${barY + r} Q${barX},${barY} ${barX + r},${barY} L${barX + barW - r},${barY} Q${barX + barW},${barY} ${barX + barW},${barY + r} L${barX + barW},${barY + barH}Z`;
+        }
+
+        const originX = isHorizontal ? barX : barX + barW / 2;
+        const originY = isHorizontal ? barY + barH / 2 : innerHeight;
+        const shouldAnimateEntry = animate && !isLoaded;
+
+        const growInitial = isHorizontal ? { scaleX: 0, opacity: 0 } : { scaleY: 0, opacity: 0 };
+        const growAnimate = isHorizontal ? { scaleX: 1, opacity: barOpacity } : { scaleY: 1, opacity: barOpacity };
+        const growTransition = {
+          [isHorizontal ? "scaleX" : "scaleY"]: { duration: animationDuration / 1000, ease: [0.85, 0, 0.15, 1] as [number, number, number, number], delay },
+          opacity: { duration: 0.3, ease: "easeInOut" as const },
+        };
+
+        return (
+          <motion.path
+            key={`${category}-${dataKey}`}
+            d={path}
+            fill={fill}
+            style={{ transformOrigin: `${originX}px ${originY}px` }}
+            initial={shouldAnimateEntry && animationType === "grow" ? growInitial : shouldAnimateEntry && animationType === "fade" ? { opacity: 0, filter: "blur(4px)" } : { opacity: barOpacity }}
+            animate={shouldAnimateEntry && animationType === "grow" ? growAnimate : shouldAnimateEntry && animationType === "fade" ? { opacity: barOpacity, filter: "blur(0px)" } : { opacity: barOpacity }}
+            transition={shouldAnimateEntry && animationType === "grow" ? growTransition : shouldAnimateEntry && animationType === "fade" ? { duration: 0.5, delay, ease: "easeOut" } : { opacity: { duration: 0.3, ease: "easeInOut" } }}
+          />
+        );
+      })}
+    </>
+  );
+}
+
+Bar.displayName = "Bar";
+
+// ─── Re-exports ──────────────────────────────────────────────────────────────
+
+export { VisxLinearGradient as LinearGradient };
+
+// ─── BarChart ────────────────────────────────────────────────────────────────
+
+function extractBarConfigs(children: ReactNode): BarConfig[] {
+  const configs: BarConfig[] = [];
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    const childType = child.type as { displayName?: string; name?: string };
+    const componentName = typeof child.type === "function" ? childType.displayName || childType.name || "" : "";
+    const props = child.props as BarProps | undefined;
+    const isBarComponent = componentName === "Bar" || child.type === Bar || (props && typeof props.dataKey === "string" && props.dataKey.length > 0);
+    if (isBarComponent && props?.dataKey) {
+      configs.push({ dataKey: props.dataKey, fill: props.fill || "var(--chart-line-primary)", stroke: props.stroke });
+    }
+  });
+  return configs;
+}
+
+export interface BarChartProps {
+  data: Record<string, unknown>[];
+  xDataKey?: string;
+  margin?: Partial<Margin>;
+  animationDuration?: number;
+  aspectRatio?: string;
+  barGap?: number;
+  barWidth?: number;
+  orientation?: "vertical" | "horizontal";
+  stacked?: boolean;
+  stackGap?: number;
+  className?: string;
+  children: ReactNode;
+}
+
+const DEFAULT_MARGIN: Margin = { top: 40, right: 40, bottom: 40, left: 40 };
+
+interface BarChartInnerProps {
+  width: number;
+  height: number;
+  data: Record<string, unknown>[];
+  xDataKey: string;
+  margin: Margin;
+  animationDuration: number;
+  barGap: number;
+  barWidth?: number;
+  orientation: "vertical" | "horizontal";
+  stacked: boolean;
+  stackGap: number;
+  children: ReactNode;
+  containerRef: RefObject<HTMLDivElement | null>;
+}
+
+function BarChartInner({
+  width, height, data, xDataKey, margin, animationDuration, barGap, barWidth, orientation, stacked, stackGap, children, containerRef,
+}: BarChartInnerProps) {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [hoveredBarIndex, setHoveredBarIndex] = useState<number | null>(null);
+  const bars = useMemo(() => extractBarConfigs(children), [children]);
+  const innerWidth = width - margin.left - margin.right;
+  const innerHeight = height - margin.top - margin.bottom;
+  const isHorizontal = orientation === "horizontal";
+
+  const xScale = useMemo(() => {
+    const domain = data.map((d) => String(d[xDataKey] ?? ""));
+    return scaleBand<string>({ range: isHorizontal ? [0, innerHeight] : [0, innerWidth], domain, padding: barGap });
+  }, [data, xDataKey, innerWidth, innerHeight, barGap, isHorizontal]);
+
+  const bandWidth = xScale.bandwidth();
+
+  const yScale = useMemo(() => {
+    let maxValue = 0;
+    if (stacked) {
+      for (const d of data) { let sum = 0; for (const bar of bars) { const v = d[bar.dataKey]; if (typeof v === "number") sum += v; } if (sum > maxValue) maxValue = sum; }
+    } else {
+      for (const bar of bars) { for (const d of data) { const v = d[bar.dataKey]; if (typeof v === "number" && v > maxValue) maxValue = v; } }
+    }
+    if (maxValue === 0) maxValue = 100;
+    return scaleLinear<number>({ range: isHorizontal ? [innerWidth, 0] : [innerHeight, 0], domain: [0, maxValue * 1.1], nice: true });
+  }, [data, bars, innerWidth, innerHeight, stacked, isHorizontal]);
+
+  const stackOffsets = useMemo(() => {
+    if (!stacked) return new Map<number, Map<string, number>>();
+    const offsets = new Map<number, Map<string, number>>();
+    for (let i = 0; i < data.length; i++) {
+      const d = data[i]!;
+      let cumulative = 0;
+      const barOffsets = new Map<string, number>();
+      for (const bar of bars) {
+        barOffsets.set(bar.dataKey, cumulative);
+        const v = d[bar.dataKey];
+        if (typeof v === "number") { cumulative += isHorizontal ? innerWidth - (yScale(v) ?? innerWidth) : innerHeight - (yScale(v) ?? innerHeight); }
+      }
+      offsets.set(i, barOffsets);
+    }
+    return offsets;
+  }, [data, bars, stacked, yScale, innerHeight, innerWidth, isHorizontal]);
+
+  const [tooltipData, setTooltipData] = useState<TooltipData | null>(null);
+
+  useEffect(() => { const timer = setTimeout(() => setIsLoaded(true), animationDuration); return () => clearTimeout(timer); }, [animationDuration]);
+
+  const handleMouseMove = useCallback((event: React.MouseEvent<SVGGElement>) => {
+    const point = localPoint(event);
+    if (!point) return;
+    const chartX = point.x - margin.left;
+    const chartY = point.y - margin.top;
+    const domain = xScale.domain();
+    let foundIndex = -1;
+    for (let i = 0; i < domain.length; i++) {
+      const cat = domain[i]!;
+      const bandStart = xScale(cat) ?? 0;
+      const bandEnd = bandStart + bandWidth;
+      if (isHorizontal ? (chartY >= bandStart && chartY <= bandEnd) : (chartX >= bandStart && chartX <= bandEnd)) { foundIndex = i; break; }
+    }
+    if (foundIndex >= 0) {
+      setHoveredBarIndex(foundIndex);
+      const d = data[foundIndex]!;
+      const yPositions: Record<string, number> = {};
+      const xPositions: Record<string, number> = {};
+      for (const bar of bars) {
+        const v = d[bar.dataKey];
+        if (typeof v === "number") {
+          if (isHorizontal) { xPositions[bar.dataKey] = innerWidth - (yScale(v) ?? innerWidth); yPositions[bar.dataKey] = (xScale(domain[foundIndex]!) ?? 0) + bandWidth / 2; }
+          else { yPositions[bar.dataKey] = yScale(v) ?? 0; xPositions[bar.dataKey] = (xScale(domain[foundIndex]!) ?? 0) + bandWidth / 2; }
+        }
+      }
+      const tooltipX = isHorizontal ? innerWidth - (yScale(Number(d[bars[0]?.dataKey ?? ""] ?? 0)) ?? 0) : (xScale(domain[foundIndex]!) ?? 0) + bandWidth / 2;
+      setTooltipData({ point: d, index: foundIndex, x: tooltipX, yPositions, xPositions });
+    } else { setHoveredBarIndex(null); setTooltipData(null); }
+  }, [xScale, yScale, data, bars, margin, bandWidth, isHorizontal, innerWidth]);
+
+  const handleMouseLeave = useCallback(() => { setHoveredBarIndex(null); setTooltipData(null); }, []);
+
+  if (width < 10 || height < 10) return null;
+
+  const contextValue: BarChartContextValue = {
+    data, xScale, yScale, width, height, innerWidth, innerHeight, margin, bandWidth, tooltipData, setTooltipData, containerRef, bars, isLoaded, animationDuration, xDataKey, hoveredBarIndex, setHoveredBarIndex, orientation, stacked, stackGap, stackOffsets, barGap, barWidth,
+  };
+
+  return (
+    <BarChartProvider value={contextValue}>
+      <svg aria-hidden="true" height={height} width={width}>
+        <rect fill="transparent" height={height} width={width} x={0} y={0} />
+        <g onMouseMove={isLoaded ? handleMouseMove : undefined} onMouseLeave={isLoaded ? handleMouseLeave : undefined} style={{ cursor: isLoaded ? "crosshair" : "default", touchAction: "none" }} transform={`translate(${margin.left},${margin.top})`}>
+          <rect fill="transparent" height={innerHeight} width={innerWidth} x={0} y={0} />
+          {children}
+        </g>
+      </svg>
+    </BarChartProvider>
+  );
+}
+
+export function BarChart({
+  data, xDataKey = "name", margin: marginProp, animationDuration = 1100, aspectRatio = "2 / 1",
+  barGap = 0.2, barWidth, orientation = "vertical", stacked = false, stackGap = 0, className = "", children,
+}: BarChartProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const margin = { ...DEFAULT_MARGIN, ...marginProp };
+
+  return (
+    <div className={cn("relative w-full", className)} ref={containerRef} style={{ aspectRatio, touchAction: "none" }}>
+      <ParentSize debounceTime={10}>
+        {({ width, height }) => (
+          <BarChartInner animationDuration={animationDuration} barGap={barGap} barWidth={barWidth} containerRef={containerRef} data={data} height={height} margin={margin} orientation={orientation} stacked={stacked} stackGap={stackGap} width={width} xDataKey={xDataKey}>
+            {children}
+          </BarChartInner>
+        )}
+      </ParentSize>
+    </div>
+  );
+}
+
+export default BarChart;
diff --git a/package-lock.json b/package-lock.json
index 67e708b..69bc254 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "@types/d3": "^7.4.3",
         "@visx/curve": "^3.12.0",
         "@visx/event": "^3.12.0",
+        "@visx/gradient": "^3.12.0",
         "@visx/grid": "^3.12.0",
         "@visx/responsive": "^3.12.0",
         "@visx/scale": "^3.12.0",
@@ -6769,6 +6770,19 @@
         "@visx/point": "3.12.0"
       }
     },
+    "node_modules/@visx/gradient": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@visx/gradient/-/gradient-3.12.0.tgz",
+      "integrity": "sha512-QRatjjdUEPbcp4pqRca1JlChpAnmmIAO3r3ZscLK7D1xEIANlIjzjl3uNgrmseYmBAYyPCcJH8Zru07R97ovOg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*",
+        "prop-types": "^15.5.7"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0"
+      }
+    },
     "node_modules/@visx/grid": {
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-3.12.0.tgz",
diff --git a/package.json b/package.json
index df65735..efb0f0a 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@types/d3": "^7.4.3",
     "@visx/curve": "^3.12.0",
     "@visx/event": "^3.12.0",
+    "@visx/gradient": "^3.12.0",
     "@visx/grid": "^3.12.0",
     "@visx/responsive": "^3.12.0",
     "@visx/scale": "^3.12.0",
-- 
2.49.1


From d4e4ca819c0e373af4b5cae5d2d39d6162f651a6 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 22:59:41 +0100
Subject: [PATCH 142/428] fix: add numeric Y-axis to bar chart view

---
 components/dashboard/Chart.tsx |  9 ++++++-
 components/ui/bar-chart.tsx    | 44 ++++++++++++++++++++++++++++++++++
 2 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index e78c424..f24b5ce 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -3,7 +3,7 @@
 import { useState, useMemo, useRef, useCallback, useEffect } from 'react'
 import { useTheme } from '@ciphera-net/ui'
 import { AreaChart as VisxAreaChart, Area as VisxArea, Grid as VisxGrid, XAxis as VisxXAxis, YAxis as VisxYAxis, ChartTooltip as VisxChartTooltip, type TooltipRow } from '@/components/ui/area-chart'
-import { BarChart as VisxBarChart, Bar as VisxBar, Grid as VisxBarGrid, BarXAxis as VisxBarXAxis, ChartTooltip as VisxBarChartTooltip } from '@/components/ui/bar-chart'
+import { BarChart as VisxBarChart, Bar as VisxBar, Grid as VisxBarGrid, BarXAxis as VisxBarXAxis, BarValueAxis as VisxBarYAxis, ChartTooltip as VisxBarChartTooltip } from '@/components/ui/bar-chart'
 import { ChartLine, ChartBar } from '@phosphor-icons/react'
 import { Card, CardContent, CardHeader } from '@/components/ui/card'
 import { formatNumber, formatDuration, formatUpdatedAgo, DatePicker } from '@ciphera-net/ui'
@@ -492,6 +492,13 @@ export default function Chart({
                     lineCap="round"
                   />
                   <VisxBarXAxis maxLabels={8} />
+                  <VisxBarYAxis
+                    numTicks={6}
+                    formatValue={(v) => {
+                      const config = METRIC_CONFIGS.find((m) => m.key === metric)
+                      return config ? config.format(v) : v.toString()
+                    }}
+                  />
                   <VisxBarChartTooltip
                     rows={(point) => {
                       const config = METRIC_CONFIGS.find((m) => m.key === metric)
diff --git a/components/ui/bar-chart.tsx b/components/ui/bar-chart.tsx
index 6740881..160952c 100644
--- a/components/ui/bar-chart.tsx
+++ b/components/ui/bar-chart.tsx
@@ -583,6 +583,50 @@ export function BarXAxis({ tickerHalfWidth = 50, showAllLabels = false, maxLabel
 
 BarXAxis.displayName = "BarXAxis";
 
+// ─── BarValueAxis (numeric Y-axis for vertical bar charts) ───────────────
+
+export interface BarValueAxisProps {
+  numTicks?: number;
+  formatValue?: (value: number) => string;
+}
+
+export function BarValueAxis({ numTicks = 5, formatValue }: BarValueAxisProps) {
+  const { yScale, margin, containerRef } = useChart();
+  const [container, setContainer] = useState<HTMLDivElement | null>(null);
+
+  useEffect(() => { setContainer(containerRef.current); }, [containerRef]);
+
+  const ticks = useMemo(() => {
+    const domain = yScale.domain() as [number, number];
+    const min = domain[0];
+    const max = domain[1];
+    const step = (max - min) / (numTicks - 1);
+    return Array.from({ length: numTicks }, (_, i) => {
+      const value = min + step * i;
+      return {
+        value,
+        y: (yScale(value) ?? 0) + margin.top,
+        label: formatValue ? formatValue(value) : value >= 1000 ? `${(value / 1000).toFixed(value % 1000 === 0 ? 0 : 1)}k` : Math.round(value).toLocaleString(),
+      };
+    });
+  }, [yScale, margin.top, numTicks, formatValue]);
+
+  if (!container) return null;
+
+  return createPortal(
+    <div className="pointer-events-none absolute inset-0">
+      {ticks.map((tick) => (
+        <div key={tick.value} className="absolute" style={{ left: 0, top: tick.y, width: margin.left - 8, display: "flex", justifyContent: "flex-end", transform: "translateY(-50%)" }}>
+          <span className="whitespace-nowrap text-neutral-500 text-xs tabular-nums">{tick.label}</span>
+        </div>
+      ))}
+    </div>,
+    container
+  );
+}
+
+BarValueAxis.displayName = "BarValueAxis";
+
 // ─── Bar ─────────────────────────────────────────────────────────────────────
 
 export interface BarProps {
-- 
2.49.1


From 9d253523e268e6e8d7f10e65a0e8c250f484d62e Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 23:05:41 +0100
Subject: [PATCH 143/428] fix: remove bar chart toggle, keep area chart only

---
 components/dashboard/Chart.tsx | 126 +++++++++------------------------
 1 file changed, 35 insertions(+), 91 deletions(-)

diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index f24b5ce..8e4938d 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -3,8 +3,6 @@
 import { useState, useMemo, useRef, useCallback, useEffect } from 'react'
 import { useTheme } from '@ciphera-net/ui'
 import { AreaChart as VisxAreaChart, Area as VisxArea, Grid as VisxGrid, XAxis as VisxXAxis, YAxis as VisxYAxis, ChartTooltip as VisxChartTooltip, type TooltipRow } from '@/components/ui/area-chart'
-import { BarChart as VisxBarChart, Bar as VisxBar, Grid as VisxBarGrid, BarXAxis as VisxBarXAxis, BarValueAxis as VisxBarYAxis, ChartTooltip as VisxBarChartTooltip } from '@/components/ui/bar-chart'
-import { ChartLine, ChartBar } from '@phosphor-icons/react'
 import { Card, CardContent, CardHeader } from '@/components/ui/card'
 import { formatNumber, formatDuration, formatUpdatedAgo, DatePicker } from '@ciphera-net/ui'
 import { Select, DownloadIcon, PlusIcon, XIcon } from '@ciphera-net/ui'
@@ -134,7 +132,6 @@ export default function Chart({
   onDeleteAnnotation,
 }: ChartProps) {
   const [metric, setMetric] = useState<MetricType>('visitors')
-  const [chartType, setChartType] = useState<'area' | 'bar'>('area')
   const chartContainerRef = useRef<HTMLDivElement>(null)
   const { resolvedTheme } = useTheme()
   const [showComparison, setShowComparison] = useState(false)
@@ -395,23 +392,6 @@ export default function Chart({
                 />
               ) : null}
 
-              <div className="flex items-center rounded-lg border border-neutral-800 overflow-hidden">
-                <button
-                  onClick={() => setChartType('area')}
-                  className={`p-1.5 transition-colors cursor-pointer ${chartType === 'area' ? 'bg-neutral-800 text-white' : 'text-neutral-500 hover:text-neutral-300'}`}
-                  title="Area chart"
-                >
-                  <ChartLine className="w-4 h-4" />
-                </button>
-                <button
-                  onClick={() => setChartType('bar')}
-                  className={`p-1.5 transition-colors cursor-pointer ${chartType === 'bar' ? 'bg-neutral-800 text-white' : 'text-neutral-500 hover:text-neutral-300'}`}
-                  title="Bar chart"
-                >
-                  <ChartBar className="w-4 h-4" />
-                </button>
-              </div>
-
               <button
                 onClick={handleExportChart}
                 disabled={!hasData}
@@ -441,77 +421,41 @@ export default function Chart({
             </div>
           ) : (
             <div className="w-full" onContextMenu={handleChartContextMenu}>
-              {chartType === 'area' ? (
-                <VisxAreaChart
-                  data={chartData as Record<string, unknown>[]}
-                  xDataKey="dateObj"
-                  aspectRatio="2.5 / 1"
-                  margin={{ top: 20, right: 20, bottom: 40, left: 50 }}
-                >
-                  <VisxGrid horizontal vertical={false} stroke="var(--chart-grid)" strokeDasharray="4,4" />
-                  <VisxArea
-                    dataKey={metric}
-                    fill={CHART_COLORS[metric]}
-                    fillOpacity={0.15}
-                    stroke={CHART_COLORS[metric]}
-                    strokeWidth={2}
-                    gradientToOpacity={0}
-                  />
-                  <VisxXAxis numTicks={6} />
-                  <VisxYAxis
-                    numTicks={6}
-                    formatValue={(v) => {
-                      const config = METRIC_CONFIGS.find((m) => m.key === metric)
-                      return config ? config.format(v) : v.toString()
-                    }}
-                  />
-                  <VisxChartTooltip
-                    rows={(point) => {
-                      const config = METRIC_CONFIGS.find((m) => m.key === metric)
-                      const value = point[metric] as number
-                      return [{
-                        color: CHART_COLORS[metric],
-                        label: config?.label || metric,
-                        value: config ? config.format(value) : value,
-                      }]
-                    }}
-                  />
-                </VisxAreaChart>
-              ) : (
-                <VisxBarChart
-                  data={chartData as Record<string, unknown>[]}
-                  xDataKey="date"
-                  aspectRatio="2.5 / 1"
-                  margin={{ top: 20, right: 20, bottom: 40, left: 50 }}
-                  barGap={0.3}
-                >
-                  <VisxBarGrid horizontal vertical={false} stroke="var(--chart-grid)" strokeDasharray="4,4" />
-                  <VisxBar
-                    dataKey={metric}
-                    fill={CHART_COLORS[metric]}
-                    lineCap="round"
-                  />
-                  <VisxBarXAxis maxLabels={8} />
-                  <VisxBarYAxis
-                    numTicks={6}
-                    formatValue={(v) => {
-                      const config = METRIC_CONFIGS.find((m) => m.key === metric)
-                      return config ? config.format(v) : v.toString()
-                    }}
-                  />
-                  <VisxBarChartTooltip
-                    rows={(point) => {
-                      const config = METRIC_CONFIGS.find((m) => m.key === metric)
-                      const value = point[metric] as number
-                      return [{
-                        color: CHART_COLORS[metric],
-                        label: config?.label || metric,
-                        value: config ? config.format(value) : value,
-                      }]
-                    }}
-                  />
-                </VisxBarChart>
-              )}
+              <VisxAreaChart
+                data={chartData as Record<string, unknown>[]}
+                xDataKey="dateObj"
+                aspectRatio="2.5 / 1"
+                margin={{ top: 20, right: 20, bottom: 40, left: 50 }}
+              >
+                <VisxGrid horizontal vertical={false} stroke="var(--chart-grid)" strokeDasharray="4,4" />
+                <VisxArea
+                  dataKey={metric}
+                  fill={CHART_COLORS[metric]}
+                  fillOpacity={0.15}
+                  stroke={CHART_COLORS[metric]}
+                  strokeWidth={2}
+                  gradientToOpacity={0}
+                />
+                <VisxXAxis numTicks={6} />
+                <VisxYAxis
+                  numTicks={6}
+                  formatValue={(v) => {
+                    const config = METRIC_CONFIGS.find((m) => m.key === metric)
+                    return config ? config.format(v) : v.toString()
+                  }}
+                />
+                <VisxChartTooltip
+                  rows={(point) => {
+                    const config = METRIC_CONFIGS.find((m) => m.key === metric)
+                    const value = point[metric] as number
+                    return [{
+                      color: CHART_COLORS[metric],
+                      label: config?.label || metric,
+                      value: config ? config.format(value) : value,
+                    }]
+                  }}
+                />
+              </VisxAreaChart>
             </div>
           )}
         </CardContent>
-- 
2.49.1


From 5b0d0e1dc1aa70c4c50a3ef2a76e6d0e871aa1c5 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 23:22:31 +0100
Subject: [PATCH 144/428] fix: use Phosphor icons for all known referrers, skip
 unreliable favicons

Google's favicon service returns wrong/low-quality icons for known
services. Now all major platforms, search engines, and AI assistants
use their Phosphor icon directly. Favicons only fetched for unknown
domains.
---
 lib/utils/icons.tsx | 54 ++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 49 insertions(+), 5 deletions(-)

diff --git a/lib/utils/icons.tsx b/lib/utils/icons.tsx
index 14aee6e..0fb0469 100644
--- a/lib/utils/icons.tsx
+++ b/lib/utils/icons.tsx
@@ -20,6 +20,7 @@ import {
   SnapchatLogo,
   PinterestLogo,
   ThreadsLogo,
+  MagnifyingGlass,
 } from '@phosphor-icons/react'
 
 /**
@@ -113,6 +114,10 @@ export function getReferrerIcon(referrerName: string) {
   if (lower.includes('snapchat')) return <SnapchatLogo className="text-yellow-400" />
   if (lower.includes('pinterest')) return <PinterestLogo className="text-red-600" />
   if (lower.includes('threads')) return <ThreadsLogo className="text-neutral-800 dark:text-neutral-200" />
+  // Search engines
+  if (lower.includes('bing')) return <MagnifyingGlass className="text-blue-500" />
+  if (lower.includes('duckduckgo')) return <MagnifyingGlass className="text-orange-500" />
+  if (lower.includes('brave')) return <MagnifyingGlass className="text-orange-400" />
   // AI assistants and search tools
   if (lower.includes('chatgpt') || lower.includes('openai')) return <Robot className="text-neutral-800 dark:text-neutral-200" />
   if (lower.includes('perplexity')) return <Robot className="text-teal-600" />
@@ -147,6 +152,8 @@ const REFERRER_DISPLAY_OVERRIDES: Record<string, string> = {
   youtube: 'YouTube',
   reddit: 'Reddit',
   github: 'GitHub',
+  bing: 'Bing',
+  brave: 'Brave',
   duckduckgo: 'DuckDuckGo',
   whatsapp: 'WhatsApp',
   telegram: 'Telegram',
@@ -246,12 +253,44 @@ export function mergeReferrersByDisplayName(
     .sort((a, b) => b.pageviews - a.pageviews)
 }
 
-/** Domains that always use the custom X icon instead of favicon (avoids legacy bird). */
-const REFERRER_USE_X_ICON = new Set(['t.co', 'x.com', 'twitter.com', 'www.twitter.com'])
+/**
+ * Domains/labels where the Phosphor icon is better than Google's favicon service.
+ * For these, getReferrerFavicon returns null so the caller falls back to getReferrerIcon.
+ */
+const REFERRER_PREFER_ICON = new Set([
+  // Social / platforms
+  't.co', 'x.com', 'twitter.com', 'www.twitter.com',
+  'google.com', 'www.google.com',
+  'facebook.com', 'www.facebook.com', 'm.facebook.com', 'l.facebook.com',
+  'instagram.com', 'www.instagram.com', 'l.instagram.com',
+  'linkedin.com', 'www.linkedin.com',
+  'github.com', 'www.github.com',
+  'youtube.com', 'www.youtube.com', 'm.youtube.com',
+  'reddit.com', 'www.reddit.com', 'old.reddit.com',
+  'whatsapp.com', 'www.whatsapp.com', 'web.whatsapp.com',
+  'telegram.org', 'web.telegram.org', 't.me',
+  'snapchat.com', 'www.snapchat.com',
+  'pinterest.com', 'www.pinterest.com',
+  'threads.net', 'www.threads.net',
+  // Search engines
+  'bing.com', 'www.bing.com',
+  'duckduckgo.com', 'www.duckduckgo.com',
+  'search.brave.com', 'brave.com',
+  // AI assistants
+  'chatgpt.com', 'chat.openai.com', 'openai.com',
+  'perplexity.ai', 'www.perplexity.ai',
+  'claude.ai', 'www.claude.ai', 'anthropic.com',
+  'gemini.google.com',
+  'copilot.microsoft.com',
+  'deepseek.com', 'chat.deepseek.com',
+  'grok.x.ai', 'x.ai',
+  'phind.com', 'www.phind.com',
+  'you.com', 'www.you.com',
+])
 
 /**
  * Returns a favicon URL for the referrer's domain, or null for non-URL referrers
- * (e.g. "Direct", "Unknown") so callers can show an icon fallback instead.
+ * (e.g. "Direct", "Unknown") or known services where the Phosphor icon is better.
  */
 export function getReferrerFavicon(referrer: string): string | null {
   if (!referrer || typeof referrer !== 'string') return null
@@ -261,8 +300,13 @@ export function getReferrerFavicon(referrer: string): string | null {
   if (!normalized.includes('.')) return null
   try {
     const url = new URL(referrer.startsWith('http') ? referrer : `https://${referrer}`)
-    if (REFERRER_USE_X_ICON.has(url.hostname.toLowerCase())) return null
-    return `${FAVICON_SERVICE_URL}?domain=${url.hostname}&sz=32`
+    const hostname = url.hostname.toLowerCase()
+    // Use Phosphor icon for known services — Google favicons are unreliable for these
+    if (REFERRER_PREFER_ICON.has(hostname)) return null
+    // Also check if the label matches a known referrer (catches subdomains like search.google.com)
+    const label = getReferrerLabel(hostname)
+    if (REFERRER_DISPLAY_OVERRIDES[label]) return null
+    return `${FAVICON_SERVICE_URL}?domain=${hostname}&sz=32`
   } catch {
     return null
   }
-- 
2.49.1


From 5008992f599a94c3cd031312a1ffb2bb0b070770 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 21 Mar 2026 23:38:55 +0100
Subject: [PATCH 145/428] feat: replace Phosphor brand icons with real SVG
 logos

Uses @icons-pack/react-simple-icons for available brands (Google,
Facebook, Instagram, GitHub, YouTube, Reddit, etc.) and inline SVGs
for brands missing from the package (X, LinkedIn, OpenAI, Bing).
All icons now show actual brand logos with correct colors.
---
 lib/utils/icons.tsx | 105 ++++++++++++++++++++++++++------------------
 package-lock.json   |  14 ++++++
 package.json        |   1 +
 3 files changed, 78 insertions(+), 42 deletions(-)

diff --git a/lib/utils/icons.tsx b/lib/utils/icons.tsx
index 0fb0469..e1c7d4f 100644
--- a/lib/utils/icons.tsx
+++ b/lib/utils/icons.tsx
@@ -5,23 +5,42 @@ import {
   DeviceMobile,
   DeviceTablet,
   Desktop,
-  GoogleLogo,
-  FacebookLogo,
-  XLogo,
-  LinkedinLogo,
-  InstagramLogo,
-  GithubLogo,
-  YoutubeLogo,
-  RedditLogo,
-  Robot,
   Link,
-  WhatsappLogo,
-  TelegramLogo,
-  SnapchatLogo,
-  PinterestLogo,
-  ThreadsLogo,
-  MagnifyingGlass,
 } from '@phosphor-icons/react'
+import {
+  SiGoogle,
+  SiFacebook,
+  SiInstagram,
+  SiGithub,
+  SiYoutube,
+  SiReddit,
+  SiWhatsapp,
+  SiTelegram,
+  SiSnapchat,
+  SiPinterest,
+  SiThreads,
+  SiDuckduckgo,
+  SiBrave,
+  SiPerplexity,
+  SiAnthropic,
+  SiGooglegemini,
+  SiGithubcopilot,
+  SiDiscord,
+} from '@icons-pack/react-simple-icons'
+
+// Inline SVG icons for brands not in @icons-pack/react-simple-icons
+function XIcon({ size = 16, color = '#fff' }: { size?: number; color?: string }) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg>
+}
+function LinkedInIcon({ size = 16, color = '#0A66C2' }: { size?: number; color?: string }) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
+}
+function OpenAIIcon({ size = 16, color = '#fff' }: { size?: number; color?: string }) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135l-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681zm1.097-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z"/></svg>
+}
+function BingIcon({ size = 16, color = '#258FFA' }: { size?: number; color?: string }) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M5.71 0v18.39l4.44 2.46 8.14-4.69v-4.71l-8.14-2.84V4.09L5.71 0zm4.44 11.19l4.39 1.53v2.78l-4.39 2.53v-6.84z"/></svg>
+}
 
 /**
  * Google's public favicon service base URL.
@@ -98,37 +117,39 @@ export function getDeviceIcon(deviceName: string) {
   return <Question className="text-neutral-400" />
 }
 
+const SI = { size: 16 } as const
+
 export function getReferrerIcon(referrerName: string) {
   if (!referrerName) return <Globe className="text-neutral-400" />
   const lower = referrerName.toLowerCase()
-  if (lower.includes('google')) return <GoogleLogo className="text-blue-500" />
-  if (lower.includes('facebook')) return <FacebookLogo className="text-blue-600" />
-  if (lower.includes('twitter') || lower.includes('t.co') || lower.includes('x.com')) return <XLogo className="text-neutral-800 dark:text-neutral-200" />
-  if (lower.includes('linkedin')) return <LinkedinLogo className="text-blue-700" />
-  if (lower.includes('instagram')) return <InstagramLogo className="text-pink-600" />
-  if (lower.includes('github')) return <GithubLogo className="text-neutral-800 dark:text-neutral-200" />
-  if (lower.includes('youtube')) return <YoutubeLogo className="text-red-600" />
-  if (lower.includes('reddit')) return <RedditLogo className="text-orange-600" />
-  if (lower.includes('whatsapp')) return <WhatsappLogo className="text-green-500" />
-  if (lower.includes('telegram')) return <TelegramLogo className="text-blue-500" />
-  if (lower.includes('snapchat')) return <SnapchatLogo className="text-yellow-400" />
-  if (lower.includes('pinterest')) return <PinterestLogo className="text-red-600" />
-  if (lower.includes('threads')) return <ThreadsLogo className="text-neutral-800 dark:text-neutral-200" />
+  // Social / platforms
+  if (lower.includes('google') && !lower.includes('gemini')) return <SiGoogle size={SI.size} color="#4285F4" />
+  if (lower.includes('facebook')) return <SiFacebook size={SI.size} color="#0866FF" />
+  if (lower.includes('twitter') || lower.includes('t.co') || lower.includes('x.com')) return <XIcon />
+  if (lower.includes('linkedin')) return <LinkedInIcon />
+  if (lower.includes('instagram')) return <SiInstagram size={SI.size} color="#E4405F" />
+  if (lower.includes('github')) return <SiGithub size={SI.size} color="#fff" />
+  if (lower.includes('youtube')) return <SiYoutube size={SI.size} color="#FF0000" />
+  if (lower.includes('reddit')) return <SiReddit size={SI.size} color="#FF4500" />
+  if (lower.includes('whatsapp')) return <SiWhatsapp size={SI.size} color="#25D366" />
+  if (lower.includes('telegram')) return <SiTelegram size={SI.size} color="#26A5E4" />
+  if (lower.includes('snapchat')) return <SiSnapchat size={SI.size} color="#FFFC00" />
+  if (lower.includes('pinterest')) return <SiPinterest size={SI.size} color="#BD081C" />
+  if (lower.includes('threads')) return <SiThreads size={SI.size} color="#fff" />
+  if (lower.includes('discord')) return <SiDiscord size={SI.size} color="#5865F2" />
   // Search engines
-  if (lower.includes('bing')) return <MagnifyingGlass className="text-blue-500" />
-  if (lower.includes('duckduckgo')) return <MagnifyingGlass className="text-orange-500" />
-  if (lower.includes('brave')) return <MagnifyingGlass className="text-orange-400" />
-  // AI assistants and search tools
-  if (lower.includes('chatgpt') || lower.includes('openai')) return <Robot className="text-neutral-800 dark:text-neutral-200" />
-  if (lower.includes('perplexity')) return <Robot className="text-teal-600" />
-  if (lower.includes('claude') || lower.includes('anthropic')) return <Robot className="text-orange-500" />
-  if (lower.includes('gemini')) return <Robot className="text-blue-500" />
-  if (lower.includes('copilot')) return <Robot className="text-blue-500" />
-  if (lower.includes('deepseek')) return <Robot className="text-blue-600" />
-  if (lower.includes('grok') || lower.includes('x.ai')) return <XLogo className="text-neutral-800 dark:text-neutral-200" />
-  if (lower.includes('phind')) return <Robot className="text-purple-600" />
-  if (lower.includes('you.com')) return <Robot className="text-indigo-600" />
-  // Shared Link (unattributed deep-page traffic)
+  if (lower.includes('bing')) return <BingIcon />
+  if (lower.includes('duckduckgo')) return <SiDuckduckgo size={SI.size} color="#DE5833" />
+  if (lower.includes('brave')) return <SiBrave size={SI.size} color="#FB542B" />
+  // AI assistants
+  if (lower.includes('chatgpt') || lower.includes('openai')) return <OpenAIIcon />
+  if (lower.includes('perplexity')) return <SiPerplexity size={SI.size} color="#1FB8CD" />
+  if (lower.includes('claude') || lower.includes('anthropic')) return <SiAnthropic size={SI.size} color="#D97757" />
+  if (lower.includes('gemini')) return <SiGooglegemini size={SI.size} color="#8E75B2" />
+  if (lower.includes('copilot')) return <SiGithubcopilot size={SI.size} color="#fff" />
+  if (lower.includes('deepseek')) return <OpenAIIcon color="#4D6BFE" />
+  if (lower.includes('grok') || lower.includes('x.ai')) return <XIcon />
+  // Shared Link
   if (lower === 'shared link') return <Link className="text-neutral-500" />
 
   return <Globe className="text-neutral-400" />
diff --git a/package-lock.json b/package-lock.json
index 69bc254..d128ea3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@ciphera-net/ui": "^0.3.1",
         "@ducanh2912/next-pwa": "^10.2.9",
+        "@icons-pack/react-simple-icons": "^13.13.0",
         "@phosphor-icons/react": "^2.1.10",
         "@radix-ui/react-icons": "^1.3.2",
         "@radix-ui/react-navigation-menu": "^1.2.14",
@@ -2587,6 +2588,19 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@icons-pack/react-simple-icons": {
+      "version": "13.13.0",
+      "resolved": "https://registry.npmjs.org/@icons-pack/react-simple-icons/-/react-simple-icons-13.13.0.tgz",
+      "integrity": "sha512-B5HhQMIpcSH4z8IZ8HFhD59CboHceKYMpPC9kAwGyKntvPdyJJv26DLu4Z1wAjcCLyrJhf11tMhiQGom9Rxb9g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=24",
+        "pnpm": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16.13 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/@img/colour": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
diff --git a/package.json b/package.json
index efb0f0a..56c41a5 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@ciphera-net/ui": "^0.3.1",
     "@ducanh2912/next-pwa": "^10.2.9",
+    "@icons-pack/react-simple-icons": "^13.13.0",
     "@phosphor-icons/react": "^2.1.10",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-navigation-menu": "^1.2.14",
-- 
2.49.1


From 4043a678db2d72df556a7a82e5a1b3050244fe13 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 00:16:17 +0100
Subject: [PATCH 146/428] fix: add proper empty state to Peak Hours with icon
 and description

---
 components/dashboard/PeakHours.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/components/dashboard/PeakHours.tsx b/components/dashboard/PeakHours.tsx
index 022412c..733865b 100644
--- a/components/dashboard/PeakHours.tsx
+++ b/components/dashboard/PeakHours.tsx
@@ -279,9 +279,15 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
           )}
         </>
       ) : (
-        <div className="flex-1 min-h-[270px] flex flex-col items-center justify-center text-center gap-3">
-          <p className="text-sm text-neutral-400">
-            No data available for this period
+        <div className="flex-1 min-h-[270px] flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
+          <div className="rounded-full bg-neutral-800 p-4">
+            <Clock className="w-8 h-8 text-neutral-400" />
+          </div>
+          <h4 className="font-semibold text-white">
+            No peak hours yet
+          </h4>
+          <p className="text-sm text-neutral-400 max-w-xs">
+            Once your site receives traffic, this heatmap will show when your visitors are most active.
           </p>
         </div>
       )}
-- 
2.49.1


From 7e48d704113e8e06fa69458df15ed7a0efba634b Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 00:40:02 +0100
Subject: [PATCH 147/428] fix: use real Slack and Discord brand icons in report
 schedule modal

Replaced generic WebhooksLogo with actual Slack SVG (pink) and
SiDiscord (blurple) in both the channel selector and the report list.
---
 app/sites/[id]/settings/page.tsx | 29 ++++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index f3d5f85..4672977 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -32,6 +32,25 @@ import {
   ZapIcon,
 } from '@ciphera-net/ui'
 import { PaperPlaneTilt, Envelope, WebhooksLogo, SpinnerGap, Trash, PencilSimple, Play, Plugs, ShieldCheck } from '@phosphor-icons/react'
+import { SiDiscord } from '@icons-pack/react-simple-icons'
+
+function SlackIcon({ size = 16, color = '#4A154B' }: { size?: number; color?: string }) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zm10.124 2.521a2.528 2.528 0 0 1 2.52-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.52V8.834zm-1.271 0a2.528 2.528 0 0 1-2.521 2.521 2.528 2.528 0 0 1-2.521-2.521V2.522A2.528 2.528 0 0 1 15.166 0a2.528 2.528 0 0 1 2.521 2.522v6.312zm-2.521 10.124a2.528 2.528 0 0 1 2.521 2.52A2.528 2.528 0 0 1 15.166 24a2.528 2.528 0 0 1-2.521-2.522v-2.52h2.521zm0-1.271a2.528 2.528 0 0 1-2.521-2.521 2.528 2.528 0 0 1 2.521-2.521h6.312A2.528 2.528 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.521h-6.312z"/></svg>
+}
+
+const CHANNEL_ICONS: Record<string, React.ReactNode> = {
+  email: <Envelope className="w-4 h-4" />,
+  slack: <SlackIcon size={16} color="#E01E5A" />,
+  discord: <SiDiscord size={16} color="#5865F2" />,
+  webhook: <WebhooksLogo className="w-4 h-4" />,
+}
+
+const CHANNEL_ICONS_LG: Record<string, React.ReactNode> = {
+  email: <Envelope className="w-5 h-5 text-neutral-400" />,
+  slack: <SlackIcon size={18} color="#E01E5A" />,
+  discord: <SiDiscord size={18} color="#5865F2" />,
+  webhook: <WebhooksLogo className="w-5 h-5 text-neutral-400" />,
+}
 
 const TIMEZONES = [
   'UTC',
@@ -1320,12 +1339,8 @@ export default function SiteSettingsPage() {
                       >
                         <div className="flex items-start justify-between gap-4">
                           <div className="flex items-start gap-3 min-w-0">
-                            <div className="p-2 bg-neutral-100 dark:bg-neutral-800 rounded-lg mt-0.5">
-                              {schedule.channel === 'email' ? (
-                                <Envelope className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
-                              ) : (
-                                <WebhooksLogo className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
-                              )}
+                            <div className="p-2 bg-neutral-800 rounded-lg mt-0.5">
+                              {CHANNEL_ICONS_LG[schedule.channel] || <WebhooksLogo className="w-5 h-5 text-neutral-400" />}
                             </div>
                             <div className="min-w-0">
                               <div className="flex items-center gap-2 flex-wrap">
@@ -1883,7 +1898,7 @@ export default function SiteSettingsPage() {
                       : 'border-neutral-200 dark:border-neutral-700 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-50 dark:hover:bg-neutral-800'
                   }`}
                 >
-                  {ch === 'email' ? <Envelope className="w-4 h-4" /> : <WebhooksLogo className="w-4 h-4" />}
+                  {CHANNEL_ICONS[ch]}
                   {getChannelLabel(ch)}
                 </button>
               ))}
-- 
2.49.1


From 185cb8699f588566632057a063573b89e2c52d55 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 00:52:29 +0100
Subject: [PATCH 148/428] fix: use white color for Slack icon on dark
 background

---
 app/sites/[id]/settings/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index 4672977..f5f01d4 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -40,7 +40,7 @@ function SlackIcon({ size = 16, color = '#4A154B' }: { size?: number; color?: st
 
 const CHANNEL_ICONS: Record<string, React.ReactNode> = {
   email: <Envelope className="w-4 h-4" />,
-  slack: <SlackIcon size={16} color="#E01E5A" />,
+  slack: <SlackIcon size={16} color="#fff" />,
   discord: <SiDiscord size={16} color="#5865F2" />,
   webhook: <WebhooksLogo className="w-4 h-4" />,
 }
-- 
2.49.1


From 5fc1a33745bbec12f6e387623e288ad0a9a5c2bc Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 01:01:58 +0100
Subject: [PATCH 149/428] fix: use official multicolored Slack logo (pink,
 blue, green, yellow)

---
 app/sites/[id]/settings/page.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index f5f01d4..00bd495 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -34,20 +34,27 @@ import {
 import { PaperPlaneTilt, Envelope, WebhooksLogo, SpinnerGap, Trash, PencilSimple, Play, Plugs, ShieldCheck } from '@phosphor-icons/react'
 import { SiDiscord } from '@icons-pack/react-simple-icons'
 
-function SlackIcon({ size = 16, color = '#4A154B' }: { size?: number; color?: string }) {
-  return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zm10.124 2.521a2.528 2.528 0 0 1 2.52-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.52V8.834zm-1.271 0a2.528 2.528 0 0 1-2.521 2.521 2.528 2.528 0 0 1-2.521-2.521V2.522A2.528 2.528 0 0 1 15.166 0a2.528 2.528 0 0 1 2.521 2.522v6.312zm-2.521 10.124a2.528 2.528 0 0 1 2.521 2.52A2.528 2.528 0 0 1 15.166 24a2.528 2.528 0 0 1-2.521-2.522v-2.52h2.521zm0-1.271a2.528 2.528 0 0 1-2.521-2.521 2.528 2.528 0 0 1 2.521-2.521h6.312A2.528 2.528 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.521h-6.312z"/></svg>
+function SlackIcon({ size = 16 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313z" fill="#E01E5A"/>
+      <path d="M8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312z" fill="#36C5F0"/>
+      <path d="M18.958 8.834a2.528 2.528 0 0 1 2.52-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.52V8.834zm-1.271 0a2.528 2.528 0 0 1-2.521 2.521 2.528 2.528 0 0 1-2.521-2.521V2.522A2.528 2.528 0 0 1 15.166 0a2.528 2.528 0 0 1 2.521 2.522v6.312z" fill="#2EB67D"/>
+      <path d="M15.166 18.958a2.528 2.528 0 0 1 2.521 2.52A2.528 2.528 0 0 1 15.166 24a2.528 2.528 0 0 1-2.521-2.522v-2.52h2.521zm0-1.271a2.528 2.528 0 0 1-2.521-2.521 2.528 2.528 0 0 1 2.521-2.521h6.312A2.528 2.528 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.521h-6.312z" fill="#ECB22E"/>
+    </svg>
+  )
 }
 
 const CHANNEL_ICONS: Record<string, React.ReactNode> = {
   email: <Envelope className="w-4 h-4" />,
-  slack: <SlackIcon size={16} color="#fff" />,
+  slack: <SlackIcon size={16} />,
   discord: <SiDiscord size={16} color="#5865F2" />,
   webhook: <WebhooksLogo className="w-4 h-4" />,
 }
 
 const CHANNEL_ICONS_LG: Record<string, React.ReactNode> = {
   email: <Envelope className="w-5 h-5 text-neutral-400" />,
-  slack: <SlackIcon size={18} color="#E01E5A" />,
+  slack: <SlackIcon size={18} />,
   discord: <SiDiscord size={18} color="#5865F2" />,
   webhook: <WebhooksLogo className="w-5 h-5 text-neutral-400" />,
 }
-- 
2.49.1


From 6444cec45463a82880d14f5b788280a24b08cf17 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 01:06:03 +0100
Subject: [PATCH 150/428] fix: use inline styles for Slack SVG fills to prevent
 CSS override

---
 app/sites/[id]/settings/page.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index 00bd495..eee5b49 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -36,11 +36,11 @@ import { SiDiscord } from '@icons-pack/react-simple-icons'
 
 function SlackIcon({ size = 16 }: { size?: number }) {
   return (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313z" fill="#E01E5A"/>
-      <path d="M8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312z" fill="#36C5F0"/>
-      <path d="M18.958 8.834a2.528 2.528 0 0 1 2.52-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.52V8.834zm-1.271 0a2.528 2.528 0 0 1-2.521 2.521 2.528 2.528 0 0 1-2.521-2.521V2.522A2.528 2.528 0 0 1 15.166 0a2.528 2.528 0 0 1 2.521 2.522v6.312z" fill="#2EB67D"/>
-      <path d="M15.166 18.958a2.528 2.528 0 0 1 2.521 2.52A2.528 2.528 0 0 1 15.166 24a2.528 2.528 0 0 1-2.521-2.522v-2.52h2.521zm0-1.271a2.528 2.528 0 0 1-2.521-2.521 2.528 2.528 0 0 1 2.521-2.521h6.312A2.528 2.528 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.521h-6.312z" fill="#ECB22E"/>
+    <svg width={size} height={size} viewBox="0 0 24 24" style={{ fill: 'none' }}>
+      <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313z" style={{ fill: '#E01E5A' }}/>
+      <path d="M8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312z" style={{ fill: '#36C5F0' }}/>
+      <path d="M18.958 8.834a2.528 2.528 0 0 1 2.52-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.52V8.834zm-1.271 0a2.528 2.528 0 0 1-2.521 2.521 2.528 2.528 0 0 1-2.521-2.521V2.522A2.528 2.528 0 0 1 15.166 0a2.528 2.528 0 0 1 2.521 2.522v6.312z" style={{ fill: '#2EB67D' }}/>
+      <path d="M15.166 18.958a2.528 2.528 0 0 1 2.521 2.52A2.528 2.528 0 0 1 15.166 24a2.528 2.528 0 0 1-2.521-2.522v-2.52h2.521zm0-1.271a2.528 2.528 0 0 1-2.521-2.521 2.528 2.528 0 0 1 2.521-2.521h6.312A2.528 2.528 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.521h-6.312z" style={{ fill: '#ECB22E' }}/>
     </svg>
   )
 }
-- 
2.49.1


From 42b7363cf96722fba7ad78b3b059a341d9151b49 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 13:16:07 +0100
Subject: [PATCH 151/428] feat: add Bot & Spam settings tab with session review
 UI

---
 app/sites/[id]/settings/page.tsx | 270 ++++++++++++++++++++++++++++---
 lib/api/bot-filter.ts            |  56 +++++++
 lib/swr/dashboard.ts             |  19 +++
 3 files changed, 321 insertions(+), 24 deletions(-)
 create mode 100644 lib/api/bot-filter.ts

diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index eee5b49..5fefba0 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -5,10 +5,11 @@ import { useParams, useRouter, useSearchParams } from 'next/navigation'
 import { updateSite, resetSiteData, type Site, type GeoDataLevel } from '@/lib/api/sites'
 import { createGoal, updateGoal, deleteGoal, type Goal } from '@/lib/api/goals'
 import { createReportSchedule, updateReportSchedule, deleteReportSchedule, testReportSchedule, type ReportSchedule, type CreateReportScheduleRequest, type EmailConfig, type WebhookConfig } from '@/lib/api/report-schedules'
+import { botFilterSessions, botUnfilterSessions } from '@/lib/api/bot-filter'
 import { getGSCAuthURL, disconnectGSC } from '@/lib/api/gsc'
 import { getBunnyPullZones, connectBunny, disconnectBunny } from '@/lib/api/bunny'
 import type { BunnyPullZone } from '@/lib/api/bunny'
-import { toast } from '@ciphera-net/ui'
+import { toast, getDateRange } from '@ciphera-net/ui'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { formatDateTime } from '@/lib/utils/formatDate'
 import { SettingsFormSkeleton, GoalsListSkeleton, useMinimumLoading, useSkeletonFade } from '@/components/skeletons'
@@ -20,7 +21,7 @@ import { Select, Modal, Button } from '@ciphera-net/ui'
 import { APP_URL } from '@/lib/api/client'
 import { generatePrivacySnippet } from '@/lib/utils/privacySnippet'
 import { useUnsavedChanges } from '@/lib/hooks/useUnsavedChanges'
-import { useSite, useGoals, useReportSchedules, useSubscription, useGSCStatus, useBunnyStatus } from '@/lib/swr/dashboard'
+import { useSite, useGoals, useReportSchedules, useSubscription, useGSCStatus, useBunnyStatus, useSessions, useBotFilterStats } from '@/lib/swr/dashboard'
 import { getRetentionOptionsForPlan, formatRetentionMonths } from '@/lib/plans'
 import { motion, AnimatePresence } from 'framer-motion'
 import { useAuth } from '@/lib/auth/context'
@@ -31,7 +32,7 @@ import {
   AlertTriangleIcon,
   ZapIcon,
 } from '@ciphera-net/ui'
-import { PaperPlaneTilt, Envelope, WebhooksLogo, SpinnerGap, Trash, PencilSimple, Play, Plugs, ShieldCheck } from '@phosphor-icons/react'
+import { PaperPlaneTilt, Envelope, WebhooksLogo, SpinnerGap, Trash, PencilSimple, Play, Plugs, ShieldCheck, Bug } from '@phosphor-icons/react'
 import { SiDiscord } from '@icons-pack/react-simple-icons'
 
 function SlackIcon({ size = 16 }: { size?: number }) {
@@ -87,7 +88,7 @@ export default function SiteSettingsPage() {
   const { data: site, isLoading: siteLoading, mutate: mutateSite } = useSite(siteId)
   const [saving, setSaving] = useState(false)
   const [showDeleteModal, setShowDeleteModal] = useState(false)
-  const [activeTab, setActiveTab] = useState<'general' | 'visibility' | 'data' | 'goals' | 'reports' | 'integrations'>('general')
+  const [activeTab, setActiveTab] = useState<'general' | 'visibility' | 'data' | 'bot' | 'goals' | 'reports' | 'integrations'>('general')
   const searchParams = useSearchParams()
 
   const [formData, setFormData] = useState({
@@ -148,6 +149,38 @@ export default function SiteSettingsPage() {
     sendDay: 1,
   })
 
+  // Bot & Spam tab state
+  const [botDateRange, setBotDateRange] = useState(() => getDateRange(7))
+  const [suspiciousOnly, setSuspiciousOnly] = useState(true)
+  const [selectedSessions, setSelectedSessions] = useState<Set<string>>(new Set())
+  const [botView, setBotView] = useState<'review' | 'blocked'>('review')
+  const { data: sessions, mutate: mutateSessions } = useSessions(siteId, botDateRange.start, botDateRange.end, botView === 'review' ? suspiciousOnly : false)
+  const { data: botStats, mutate: mutateBotStats } = useBotFilterStats(siteId)
+
+  const handleBotFilter = async (sessionIds: string[]) => {
+    try {
+      await botFilterSessions(siteId, sessionIds)
+      toast.success(`${sessionIds.length} session(s) flagged as bot`)
+      setSelectedSessions(new Set())
+      mutateSessions()
+      mutateBotStats()
+    } catch {
+      toast.error('Failed to flag sessions')
+    }
+  }
+
+  const handleBotUnfilter = async (sessionIds: string[]) => {
+    try {
+      await botUnfilterSessions(siteId, sessionIds)
+      toast.success(`${sessionIds.length} session(s) unblocked`)
+      setSelectedSessions(new Set())
+      mutateSessions()
+      mutateBotStats()
+    } catch {
+      toast.error('Failed to unblock sessions')
+    }
+  }
+
   useEffect(() => {
     if (!site) return
     setFormData({
@@ -641,6 +674,19 @@ export default function SiteSettingsPage() {
             <ShieldCheck className="w-5 h-5" />
             Data & Privacy
           </button>
+          <button
+            onClick={() => setActiveTab('bot')}
+            role="tab"
+            aria-selected={activeTab === 'bot'}
+            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
+              activeTab === 'bot'
+                ? 'bg-brand-orange/10 text-brand-orange'
+                : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
+            }`}
+          >
+            <Bug className="w-5 h-5" />
+            Bot & Spam
+          </button>
           <button
             onClick={() => setActiveTab('goals')}
             role="tab"
@@ -1078,28 +1124,9 @@ export default function SiteSettingsPage() {
                     </div>
                   </div>
 
-                  {/* Bot and noise filtering */}
+                  {/* Filtering */}
                   <div className="space-y-4 pt-6 border-t border-neutral-100 dark:border-neutral-800">
                     <h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">Filtering</h3>
-                    <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
-                      <div className="flex items-center justify-between">
-                        <div>
-                          <h4 className="font-medium text-neutral-900 dark:text-white">Filter bots and referrer spam</h4>
-                          <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
-                            Exclude known crawlers, scrapers, and referrer spam domains from your stats
-                          </p>
-                        </div>
-                        <label className="relative inline-flex items-center cursor-pointer">
-                          <input
-                            type="checkbox"
-                            checked={formData.filter_bots}
-                            onChange={(e) => setFormData({ ...formData, filter_bots: e.target.checked })}
-                            className="sr-only peer"
-                          />
-                          <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
-                        </label>
-                      </div>
-                    </div>
                     <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
                       <div className="flex items-center justify-between">
                         <div>
@@ -1250,6 +1277,201 @@ export default function SiteSettingsPage() {
               </div>
             )}
 
+            {activeTab === 'bot' && (
+              <div className="flex-1 space-y-6">
+                <div>
+                  <h2 className="text-xl font-bold text-white mb-1">Bot & Spam</h2>
+                  <p className="text-neutral-400 text-sm">Manage automated and manual bot filtering.</p>
+                </div>
+
+                {/* Automated Filtering Section */}
+                <div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-5">
+                  <h3 className="font-semibold text-white mb-3">Automated Filtering</h3>
+                  <div className="flex items-center justify-between py-3">
+                    <div>
+                      <p className="font-medium text-white">Filter bots and referrer spam</p>
+                      <p className="text-sm text-neutral-400 mt-0.5">Automatically block known bots, crawlers, and spam referrers</p>
+                    </div>
+                    <label className="relative inline-flex items-center cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={formData.filter_bots}
+                        onChange={(e) => setFormData({ ...formData, filter_bots: e.target.checked })}
+                        className="sr-only peer"
+                      />
+                      <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
+                    </label>
+                  </div>
+                  {botStats && (
+                    <div className="mt-3 pt-3 border-t border-neutral-800 flex gap-6 text-sm">
+                      <div>
+                        <span className="text-neutral-400">Auto-blocked this month:</span>
+                        <span className="ml-2 font-medium text-white">{botStats.auto_blocked_this_month.toLocaleString()}</span>
+                      </div>
+                      <div>
+                        <span className="text-neutral-400">Manually flagged:</span>
+                        <span className="ml-2 font-medium text-white">{botStats.filtered_sessions} sessions ({botStats.filtered_events} events)</span>
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                {/* Session Review Section */}
+                <div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-5">
+                  <div className="flex items-center justify-between mb-4">
+                    <h3 className="font-semibold text-white">Session Review</h3>
+                    <div className="flex items-center gap-3">
+                      {/* Review / Blocked toggle */}
+                      <div className="flex items-center rounded-lg border border-neutral-700 overflow-hidden text-sm">
+                        <button
+                          onClick={() => { setBotView('review'); setSelectedSessions(new Set()) }}
+                          className={`px-3 py-1.5 transition-colors ${botView === 'review' ? 'bg-neutral-800 text-white' : 'text-neutral-400 hover:text-white'}`}
+                        >
+                          Review
+                        </button>
+                        <button
+                          onClick={() => { setBotView('blocked'); setSelectedSessions(new Set()) }}
+                          className={`px-3 py-1.5 transition-colors ${botView === 'blocked' ? 'bg-neutral-800 text-white' : 'text-neutral-400 hover:text-white'}`}
+                        >
+                          Blocked
+                        </button>
+                      </div>
+                      {botView === 'review' && (
+                        <label className="flex items-center gap-2 text-sm text-neutral-400">
+                          <input
+                            type="checkbox"
+                            checked={suspiciousOnly}
+                            onChange={(e) => setSuspiciousOnly(e.target.checked)}
+                            className="rounded border-neutral-600 bg-neutral-800 text-brand-orange focus:ring-brand-orange"
+                          />
+                          Suspicious only
+                        </label>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Bulk actions */}
+                  {selectedSessions.size > 0 && (
+                    <div className="mb-3 flex items-center gap-3 p-2 bg-brand-orange/10 border border-brand-orange/20 rounded-lg">
+                      <span className="text-sm text-brand-orange font-medium">{selectedSessions.size} selected</span>
+                      {botView === 'review' ? (
+                        <button onClick={() => handleBotFilter(Array.from(selectedSessions))} className="text-sm font-medium text-red-400 hover:text-red-300">
+                          Flag as bot
+                        </button>
+                      ) : (
+                        <button onClick={() => handleBotUnfilter(Array.from(selectedSessions))} className="text-sm font-medium text-green-400 hover:text-green-300">
+                          Unblock
+                        </button>
+                      )}
+                      <button onClick={() => setSelectedSessions(new Set())} className="text-sm text-neutral-400 hover:text-white ml-auto">
+                        Clear
+                      </button>
+                    </div>
+                  )}
+
+                  {/* Sessions table */}
+                  <div className="overflow-x-auto">
+                    <table className="w-full text-left text-sm">
+                      <thead className="border-b border-neutral-800">
+                        <tr>
+                          <th className="pb-2 pr-2 w-8">
+                            <input
+                              type="checkbox"
+                              onChange={(e) => {
+                                if (e.target.checked) {
+                                  const allIds = new Set((sessions?.sessions || []).map(s => s.session_id))
+                                  setSelectedSessions(allIds)
+                                } else {
+                                  setSelectedSessions(new Set())
+                                }
+                              }}
+                              checked={selectedSessions.size > 0 && selectedSessions.size === (sessions?.sessions || []).length}
+                              className="rounded border-neutral-600 bg-neutral-800 text-brand-orange focus:ring-brand-orange"
+                            />
+                          </th>
+                          <th className="pb-2 text-neutral-400 font-medium">Session</th>
+                          <th className="pb-2 text-neutral-400 font-medium">Pages</th>
+                          <th className="pb-2 text-neutral-400 font-medium">Duration</th>
+                          <th className="pb-2 text-neutral-400 font-medium">Location</th>
+                          <th className="pb-2 text-neutral-400 font-medium">Browser</th>
+                          <th className="pb-2 text-neutral-400 font-medium">Referrer</th>
+                          <th className="pb-2 text-neutral-400 font-medium">Score</th>
+                          <th className="pb-2 text-neutral-400 font-medium">Action</th>
+                        </tr>
+                      </thead>
+                      <tbody className="divide-y divide-neutral-800">
+                        {(sessions?.sessions || [])
+                          .filter(s => botView === 'blocked' ? s.bot_filtered : !s.bot_filtered)
+                          .map((session) => (
+                          <tr key={session.session_id} className="hover:bg-neutral-800/50">
+                            <td className="py-2.5 pr-2">
+                              <input
+                                type="checkbox"
+                                checked={selectedSessions.has(session.session_id)}
+                                onChange={(e) => {
+                                  const next = new Set(selectedSessions)
+                                  if (e.target.checked) next.add(session.session_id)
+                                  else next.delete(session.session_id)
+                                  setSelectedSessions(next)
+                                }}
+                                className="rounded border-neutral-600 bg-neutral-800 text-brand-orange focus:ring-brand-orange"
+                              />
+                            </td>
+                            <td className="py-2.5">
+                              <div className="font-mono text-xs text-neutral-300">{session.session_id.slice(0, 12)}...</div>
+                              <div className="text-xs text-neutral-500 mt-0.5">{session.first_page}</div>
+                            </td>
+                            <td className="py-2.5 text-neutral-300">{session.pageviews}</td>
+                            <td className="py-2.5 text-neutral-300">
+                              {session.duration != null ? `${Math.round(session.duration)}s` : <span className="text-neutral-600">&mdash;</span>}
+                            </td>
+                            <td className="py-2.5 text-neutral-300 text-xs">
+                              {[session.city, session.country].filter(Boolean).join(', ') || '\u2014'}
+                            </td>
+                            <td className="py-2.5 text-neutral-300 text-xs">{session.browser || '\u2014'}</td>
+                            <td className="py-2.5 text-neutral-300 text-xs">{session.referrer || <span className="text-neutral-600">Direct</span>}</td>
+                            <td className="py-2.5">
+                              <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
+                                session.suspicion_score >= 5 ? 'bg-red-900/30 text-red-400' :
+                                session.suspicion_score >= 3 ? 'bg-yellow-900/30 text-yellow-400' :
+                                'bg-neutral-800 text-neutral-400'
+                              }`}>
+                                {session.suspicion_score}
+                              </span>
+                            </td>
+                            <td className="py-2.5">
+                              {botView === 'review' ? (
+                                <button
+                                  onClick={() => handleBotFilter([session.session_id])}
+                                  className="text-xs font-medium text-red-400 hover:text-red-300"
+                                >
+                                  Flag
+                                </button>
+                              ) : (
+                                <button
+                                  onClick={() => handleBotUnfilter([session.session_id])}
+                                  className="text-xs font-medium text-green-400 hover:text-green-300"
+                                >
+                                  Unblock
+                                </button>
+                              )}
+                            </td>
+                          </tr>
+                        ))}
+                        {(sessions?.sessions || []).filter(s => botView === 'blocked' ? s.bot_filtered : !s.bot_filtered).length === 0 && (
+                          <tr>
+                            <td colSpan={9} className="py-8 text-center text-neutral-500 text-sm">
+                              {botView === 'blocked' ? 'No blocked sessions' : 'No suspicious sessions found'}
+                            </td>
+                          </tr>
+                        )}
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+            )}
+
             {activeTab === 'goals' && (
               <div className="space-y-6">
                 <div>
diff --git a/lib/api/bot-filter.ts b/lib/api/bot-filter.ts
new file mode 100644
index 0000000..3361fdb
--- /dev/null
+++ b/lib/api/bot-filter.ts
@@ -0,0 +1,56 @@
+import apiRequest from './client'
+
+export interface SessionSummary {
+  session_id: string
+  pageviews: number
+  duration: number | null
+  first_page: string
+  referrer: string | null
+  country: string | null
+  city: string | null
+  region: string | null
+  browser: string | null
+  os: string | null
+  screen_resolution: string | null
+  first_seen: string
+  bot_filtered: boolean
+  suspicion_score: number
+}
+
+export interface BotFilterStats {
+  filtered_sessions: number
+  filtered_events: number
+  auto_blocked_this_month: number
+}
+
+function buildQuery(opts: { startDate?: string; endDate?: string; suspicious?: boolean; limit?: number }): string {
+  const params = new URLSearchParams()
+  if (opts.startDate) params.append('start_date', opts.startDate)
+  if (opts.endDate) params.append('end_date', opts.endDate)
+  if (opts.suspicious) params.append('suspicious', 'true')
+  if (opts.limit != null) params.append('limit', opts.limit.toString())
+  const q = params.toString()
+  return q ? `?${q}` : ''
+}
+
+export function listSessions(siteId: string, startDate: string, endDate: string, suspiciousOnly?: boolean, limit?: number): Promise<{ sessions: SessionSummary[] }> {
+  return apiRequest<{ sessions: SessionSummary[] }>(`/sites/${siteId}/sessions${buildQuery({ startDate, endDate, suspicious: suspiciousOnly, limit })}`)
+}
+
+export function botFilterSessions(siteId: string, sessionIds: string[]): Promise<{ updated: number }> {
+  return apiRequest<{ updated: number }>(`/sites/${siteId}/bot-filter`, {
+    method: 'POST',
+    body: JSON.stringify({ session_ids: sessionIds }),
+  })
+}
+
+export function botUnfilterSessions(siteId: string, sessionIds: string[]): Promise<{ updated: number }> {
+  return apiRequest<{ updated: number }>(`/sites/${siteId}/bot-filter`, {
+    method: 'DELETE',
+    body: JSON.stringify({ session_ids: sessionIds }),
+  })
+}
+
+export function getBotFilterStats(siteId: string): Promise<BotFilterStats> {
+  return apiRequest<BotFilterStats>(`/sites/${siteId}/bot-filter/stats`)
+}
diff --git a/lib/swr/dashboard.ts b/lib/swr/dashboard.ts
index 8b15a85..60b0fdb 100644
--- a/lib/swr/dashboard.ts
+++ b/lib/swr/dashboard.ts
@@ -33,6 +33,7 @@ import { listFunnels, type Funnel } from '@/lib/api/funnels'
 import { getUptimeStatus, type UptimeStatusResponse } from '@/lib/api/uptime'
 import { listGoals, type Goal } from '@/lib/api/goals'
 import { listReportSchedules, type ReportSchedule } from '@/lib/api/report-schedules'
+import { listSessions, getBotFilterStats, type SessionSummary, type BotFilterStats } from '@/lib/api/bot-filter'
 import { getGSCStatus, getGSCOverview, getGSCTopQueries, getGSCTopPages, getGSCDailyTotals, getGSCNewQueries } from '@/lib/api/gsc'
 import type { GSCStatus, GSCOverview, GSCQueryResponse, GSCPageResponse, GSCDailyTotal, GSCNewQueries } from '@/lib/api/gsc'
 import { getBunnyStatus, getBunnyOverview, getBunnyDailyStats, getBunnyTopCountries } from '@/lib/api/bunny'
@@ -517,5 +518,23 @@ export function useSubscription() {
   )
 }
 
+// * Hook for session list (bot review)
+export function useSessions(siteId: string, startDate: string, endDate: string, suspiciousOnly: boolean) {
+  return useSWR<{ sessions: SessionSummary[] }>(
+    siteId && startDate && endDate ? ['sessions', siteId, startDate, endDate, suspiciousOnly] : null,
+    () => listSessions(siteId, startDate, endDate, suspiciousOnly),
+    { ...dashboardSWRConfig, refreshInterval: 0, dedupingInterval: 10 * 1000 }
+  )
+}
+
+// * Hook for bot filter stats
+export function useBotFilterStats(siteId: string) {
+  return useSWR<BotFilterStats>(
+    siteId ? ['botFilterStats', siteId] : null,
+    () => getBotFilterStats(siteId),
+    { ...dashboardSWRConfig, refreshInterval: 60 * 1000, dedupingInterval: 10 * 1000 }
+  )
+}
+
 // * Re-export for convenience
 export { fetchers }
-- 
2.49.1


From 0878bde259d348effb01a4c0fb677cff8e1c9e58 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 13:25:02 +0100
Subject: [PATCH 152/428] fix: redesign session review as card layout instead
 of cramped table

---
 app/sites/[id]/settings/page.tsx | 156 ++++++++++++-------------------
 1 file changed, 59 insertions(+), 97 deletions(-)

diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index 5fefba0..e2cfe98 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -1369,104 +1369,66 @@ export default function SiteSettingsPage() {
                     </div>
                   )}
 
-                  {/* Sessions table */}
-                  <div className="overflow-x-auto">
-                    <table className="w-full text-left text-sm">
-                      <thead className="border-b border-neutral-800">
-                        <tr>
-                          <th className="pb-2 pr-2 w-8">
-                            <input
-                              type="checkbox"
-                              onChange={(e) => {
-                                if (e.target.checked) {
-                                  const allIds = new Set((sessions?.sessions || []).map(s => s.session_id))
-                                  setSelectedSessions(allIds)
-                                } else {
-                                  setSelectedSessions(new Set())
-                                }
-                              }}
-                              checked={selectedSessions.size > 0 && selectedSessions.size === (sessions?.sessions || []).length}
-                              className="rounded border-neutral-600 bg-neutral-800 text-brand-orange focus:ring-brand-orange"
-                            />
-                          </th>
-                          <th className="pb-2 text-neutral-400 font-medium">Session</th>
-                          <th className="pb-2 text-neutral-400 font-medium">Pages</th>
-                          <th className="pb-2 text-neutral-400 font-medium">Duration</th>
-                          <th className="pb-2 text-neutral-400 font-medium">Location</th>
-                          <th className="pb-2 text-neutral-400 font-medium">Browser</th>
-                          <th className="pb-2 text-neutral-400 font-medium">Referrer</th>
-                          <th className="pb-2 text-neutral-400 font-medium">Score</th>
-                          <th className="pb-2 text-neutral-400 font-medium">Action</th>
-                        </tr>
-                      </thead>
-                      <tbody className="divide-y divide-neutral-800">
-                        {(sessions?.sessions || [])
-                          .filter(s => botView === 'blocked' ? s.bot_filtered : !s.bot_filtered)
-                          .map((session) => (
-                          <tr key={session.session_id} className="hover:bg-neutral-800/50">
-                            <td className="py-2.5 pr-2">
-                              <input
-                                type="checkbox"
-                                checked={selectedSessions.has(session.session_id)}
-                                onChange={(e) => {
-                                  const next = new Set(selectedSessions)
-                                  if (e.target.checked) next.add(session.session_id)
-                                  else next.delete(session.session_id)
-                                  setSelectedSessions(next)
-                                }}
-                                className="rounded border-neutral-600 bg-neutral-800 text-brand-orange focus:ring-brand-orange"
-                              />
-                            </td>
-                            <td className="py-2.5">
-                              <div className="font-mono text-xs text-neutral-300">{session.session_id.slice(0, 12)}...</div>
-                              <div className="text-xs text-neutral-500 mt-0.5">{session.first_page}</div>
-                            </td>
-                            <td className="py-2.5 text-neutral-300">{session.pageviews}</td>
-                            <td className="py-2.5 text-neutral-300">
-                              {session.duration != null ? `${Math.round(session.duration)}s` : <span className="text-neutral-600">&mdash;</span>}
-                            </td>
-                            <td className="py-2.5 text-neutral-300 text-xs">
-                              {[session.city, session.country].filter(Boolean).join(', ') || '\u2014'}
-                            </td>
-                            <td className="py-2.5 text-neutral-300 text-xs">{session.browser || '\u2014'}</td>
-                            <td className="py-2.5 text-neutral-300 text-xs">{session.referrer || <span className="text-neutral-600">Direct</span>}</td>
-                            <td className="py-2.5">
-                              <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
-                                session.suspicion_score >= 5 ? 'bg-red-900/30 text-red-400' :
-                                session.suspicion_score >= 3 ? 'bg-yellow-900/30 text-yellow-400' :
-                                'bg-neutral-800 text-neutral-400'
-                              }`}>
-                                {session.suspicion_score}
-                              </span>
-                            </td>
-                            <td className="py-2.5">
-                              {botView === 'review' ? (
-                                <button
-                                  onClick={() => handleBotFilter([session.session_id])}
-                                  className="text-xs font-medium text-red-400 hover:text-red-300"
-                                >
-                                  Flag
-                                </button>
-                              ) : (
-                                <button
-                                  onClick={() => handleBotUnfilter([session.session_id])}
-                                  className="text-xs font-medium text-green-400 hover:text-green-300"
-                                >
-                                  Unblock
-                                </button>
-                              )}
-                            </td>
-                          </tr>
-                        ))}
-                        {(sessions?.sessions || []).filter(s => botView === 'blocked' ? s.bot_filtered : !s.bot_filtered).length === 0 && (
-                          <tr>
-                            <td colSpan={9} className="py-8 text-center text-neutral-500 text-sm">
-                              {botView === 'blocked' ? 'No blocked sessions' : 'No suspicious sessions found'}
-                            </td>
-                          </tr>
+                  {/* Session cards */}
+                  <div className="space-y-2">
+                    {(sessions?.sessions || [])
+                      .filter(s => botView === 'blocked' ? s.bot_filtered : !s.bot_filtered)
+                      .map((session) => (
+                      <div key={session.session_id} className="flex items-center gap-3 p-3 rounded-xl border border-neutral-800 hover:border-neutral-700 transition-colors">
+                        <input
+                          type="checkbox"
+                          checked={selectedSessions.has(session.session_id)}
+                          onChange={(e) => {
+                            const next = new Set(selectedSessions)
+                            if (e.target.checked) next.add(session.session_id)
+                            else next.delete(session.session_id)
+                            setSelectedSessions(next)
+                          }}
+                          className="rounded border-neutral-600 bg-neutral-800 text-brand-orange focus:ring-brand-orange shrink-0"
+                        />
+
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-2 mb-1">
+                            <span className="text-sm font-medium text-white truncate">{session.first_page}</span>
+                            <span className={`shrink-0 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
+                              session.suspicion_score >= 5 ? 'bg-red-900/30 text-red-400' :
+                              session.suspicion_score >= 3 ? 'bg-yellow-900/30 text-yellow-400' :
+                              'bg-neutral-800 text-neutral-400'
+                            }`}>
+                              {session.suspicion_score >= 5 ? 'High risk' : session.suspicion_score >= 3 ? 'Suspicious' : 'Low risk'}
+                            </span>
+                          </div>
+                          <div className="flex items-center gap-3 text-xs text-neutral-500">
+                            <span>{session.pageviews} page{session.pageviews !== 1 ? 's' : ''}</span>
+                            <span>{session.duration != null ? `${Math.round(session.duration)}s` : 'No duration'}</span>
+                            <span>{[session.city, session.country].filter(Boolean).join(', ') || 'Unknown location'}</span>
+                            <span>{session.browser || 'Unknown browser'}</span>
+                            <span>{session.referrer || 'Direct'}</span>
+                          </div>
+                        </div>
+
+                        {botView === 'review' ? (
+                          <button
+                            onClick={() => handleBotFilter([session.session_id])}
+                            className="shrink-0 px-3 py-1.5 text-xs font-medium text-red-400 hover:text-white hover:bg-red-500/20 rounded-lg border border-red-500/20 transition-colors"
+                          >
+                            Flag as bot
+                          </button>
+                        ) : (
+                          <button
+                            onClick={() => handleBotUnfilter([session.session_id])}
+                            className="shrink-0 px-3 py-1.5 text-xs font-medium text-green-400 hover:text-white hover:bg-green-500/20 rounded-lg border border-green-500/20 transition-colors"
+                          >
+                            Unblock
+                          </button>
                         )}
-                      </tbody>
-                    </table>
+                      </div>
+                    ))}
+                    {(sessions?.sessions || []).filter(s => botView === 'blocked' ? s.bot_filtered : !s.bot_filtered).length === 0 && (
+                      <div className="py-12 text-center text-neutral-500 text-sm">
+                        {botView === 'blocked' ? 'No blocked sessions' : 'No suspicious sessions found'}
+                      </div>
+                    )}
                   </div>
                 </div>
               </div>
-- 
2.49.1


From 3f3d81a41f53a8dadd4d8ca33e775d6be2448655 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 13:30:29 +0100
Subject: [PATCH 153/428] fix: style bot filter checkboxes with accent-color
 orange

---
 app/sites/[id]/settings/page.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index e2cfe98..22c1f01 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -1337,12 +1337,13 @@ export default function SiteSettingsPage() {
                         </button>
                       </div>
                       {botView === 'review' && (
-                        <label className="flex items-center gap-2 text-sm text-neutral-400">
+                        <label className="flex items-center gap-2 text-sm text-neutral-400 cursor-pointer">
                           <input
                             type="checkbox"
                             checked={suspiciousOnly}
                             onChange={(e) => setSuspiciousOnly(e.target.checked)}
-                            className="rounded border-neutral-600 bg-neutral-800 text-brand-orange focus:ring-brand-orange"
+                            className="w-4 h-4 cursor-pointer"
+                            style={{ accentColor: '#FD5E0F' }}
                           />
                           Suspicious only
                         </label>
@@ -1384,7 +1385,8 @@ export default function SiteSettingsPage() {
                             else next.delete(session.session_id)
                             setSelectedSessions(next)
                           }}
-                          className="rounded border-neutral-600 bg-neutral-800 text-brand-orange focus:ring-brand-orange shrink-0"
+                          className="w-4 h-4 shrink-0 cursor-pointer"
+                          style={{ accentColor: '#FD5E0F' }}
                         />
 
                         <div className="flex-1 min-w-0">
-- 
2.49.1


From 0805bbaeeebafb21a3b651b7b31409452172d487 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 13:40:26 +0100
Subject: [PATCH 154/428] fix: improve password protection UX with status badge
 and remove option

- Shows green "Password set" badge when a password is active
- Simplified placeholder to "Enter new password"
- Added helper text explaining current password persists
- Added "Remove password protection" link for easy removal
- Cleaned up dark-mode toggle styling
---
 app/sites/[id]/settings/page.tsx | 65 +++++++++++++++++++++++---------
 1 file changed, 47 insertions(+), 18 deletions(-)

diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index 22c1f01..6795db4 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -947,22 +947,30 @@ export default function SiteSettingsPage() {
                           </div>
 
                           <div>
-                            <div className="flex items-center justify-between mb-4">
-                              <div>
-                                <h3 className="text-sm font-medium text-neutral-900 dark:text-white">Password Protection</h3>
-                                <p className="text-xs text-neutral-500 mt-1">Restrict access to this dashboard.</p>
+                            <div className="flex items-center justify-between">
+                              <div className="flex items-center gap-3">
+                                <div>
+                                  <h3 className="text-sm font-medium text-white">Password Protection</h3>
+                                  <p className="text-xs text-neutral-500 mt-0.5">Restrict access to this dashboard.</p>
+                                </div>
+                                {isPasswordEnabled && site?.has_password && !formData.password && (
+                                  <span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900/30 text-green-400 border border-green-500/20">
+                                    <span className="w-1.5 h-1.5 rounded-full bg-green-400" />
+                                    Password set
+                                  </span>
+                                )}
                               </div>
                               <label className="relative inline-flex items-center cursor-pointer">
-                                <input 
-                                  type="checkbox" 
-                                  checked={isPasswordEnabled} 
+                                <input
+                                  type="checkbox"
+                                  checked={isPasswordEnabled}
                                   onChange={(e) => {
                                     setIsPasswordEnabled(e.target.checked);
-                                    if (!e.target.checked) setFormData({...formData, password: ''}); 
+                                    if (!e.target.checked) setFormData({...formData, password: ''});
                                   }}
                                   className="sr-only peer"
                                 />
-                                <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
+                                <div className="w-11 h-6 bg-neutral-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-600 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-orange"></div>
                               </label>
                             </div>
 
@@ -974,15 +982,36 @@ export default function SiteSettingsPage() {
                                   exit={{ opacity: 0, height: 0 }}
                                   className="overflow-hidden"
                                 >
-                                  <PasswordInput
-                                    id="password"
-                                    value={formData.password}
-                                    onChange={(e) => setFormData({ ...formData, password: e.target.value })}
-                                    placeholder={site.has_password ? "Change password (leave empty to keep current)" : "Set a password"}
-                                  />
-                                  <p className="mt-2 text-xs text-neutral-500 dark:text-neutral-400">
-                                    Visitors will need to enter this password to view the dashboard.
-                                  </p>
+                                  <div className="mt-4 space-y-3">
+                                    <PasswordInput
+                                      id="password"
+                                      value={formData.password}
+                                      onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+                                      placeholder="Enter new password"
+                                    />
+                                    {site?.has_password && (
+                                      <p className="text-xs text-neutral-500">
+                                        Current password will remain unchanged unless you enter a new one.
+                                      </p>
+                                    )}
+                                    {site?.has_password && (
+                                      <button
+                                        type="button"
+                                        onClick={() => {
+                                          setIsPasswordEnabled(false)
+                                          setFormData({ ...formData, password: '' })
+                                        }}
+                                        className="text-xs font-medium text-red-400 hover:text-red-300 transition-colors"
+                                      >
+                                        Remove password protection
+                                      </button>
+                                    )}
+                                    {!site?.has_password && (
+                                      <p className="text-xs text-neutral-500">
+                                        Visitors will need to enter this password to view the dashboard.
+                                      </p>
+                                    )}
+                                  </div>
                                 </motion.div>
                               )}
                             </AnimatePresence>
-- 
2.49.1


From ef21004519bd21536f7b5e8e8307eeba1ee849ed Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 13:47:02 +0100
Subject: [PATCH 155/428] fix: skip auth token refresh for public API endpoints

Public dashboard endpoints use password auth, not session tokens.
A 401 on /public/ should surface to the caller (for password prompt),
not trigger a token refresh that fails and shows "Session expired".
---
 lib/api/client.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/lib/api/client.ts b/lib/api/client.ts
index 4d348e5..3919cb4 100644
--- a/lib/api/client.ts
+++ b/lib/api/client.ts
@@ -238,8 +238,9 @@ async function apiRequest<T>(
     if (response.status === 401) {
       // * Attempt Token Refresh if 401
       if (typeof window !== 'undefined') {
-        // * Prevent infinite loop: Don't refresh if the failed request WAS a refresh request (unlikely via apiRequest but safe to check)
-        if (!endpoint.includes('/auth/refresh')) {
+        // * Skip token refresh for public endpoints (they use password auth, not session tokens)
+        // * and for refresh requests themselves (prevent infinite loop)
+        if (!endpoint.includes('/auth/refresh') && !endpoint.includes('/public/')) {
           if (isRefreshing) {
             // * If refresh is already in progress, wait for it to complete (or fail)
             return new Promise<T>((resolve, reject) => {
-- 
2.49.1


From 82a201a043323eb6ab04fe2c0d0b06ac4c6a6d41 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 13:52:10 +0100
Subject: [PATCH 156/428] fix: stop password keystrokes from triggering API
 calls on public dashboard

Used refs for password/captcha values so loadDashboard doesn't
recreate on every keystroke. Password is only sent to API on
explicit form submit. Also fixes stale captcha state in closures.
---
 app/share/[id]/page.tsx | 47 +++++++++++++++++++++++++++--------------
 1 file changed, 31 insertions(+), 16 deletions(-)

diff --git a/app/share/[id]/page.tsx b/app/share/[id]/page.tsx
index 125e030..e43966c 100644
--- a/app/share/[id]/page.tsx
+++ b/app/share/[id]/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import Image from 'next/image'
 import { useParams, useSearchParams, useRouter } from 'next/navigation'
 import { getPublicDashboard, getPublicStats, getPublicDailyStats, getPublicRealtime, type DashboardData, type Stats, type DailyStat } from '@/lib/api/stats'
@@ -39,6 +39,7 @@ export default function PublicDashboardPage() {
   const [loading, setLoading] = useState(true)
   const [data, setData] = useState<DashboardData | null>(null)
   const [password, setPassword] = useState(passwordParam || '')
+  const [submittedPassword, setSubmittedPassword] = useState(passwordParam || '')
   const [isPasswordProtected, setIsPasswordProtected] = useState(false)
   
   // Captcha State
@@ -92,11 +93,11 @@ export default function PublicDashboardPage() {
   const loadRealtime = useCallback(async () => {
     try {
       const auth = {
-        password,
+        password: passwordRef.current,
         captcha: {
-          captcha_id: captchaId,
-          captcha_solution: captchaSolution,
-          captcha_token: captchaToken
+          captcha_id: captchaIdRef.current,
+          captcha_solution: captchaSolutionRef.current,
+          captcha_token: captchaTokenRef.current
         }
       }
       const realtimeData = await getPublicRealtime(siteId, auth)
@@ -109,19 +110,30 @@ export default function PublicDashboardPage() {
     } catch (error) {
       // Silently fail for realtime updates
     }
-  }, [siteId, password, captchaId, captchaSolution, captchaToken, data])
+  }, [siteId, data])
+
+  // Use refs for auth values so loadDashboard doesn't recreate on every keystroke/captcha change
+  const passwordRef = useRef(submittedPassword)
+  const captchaIdRef = useRef(captchaId)
+  const captchaSolutionRef = useRef(captchaSolution)
+  const captchaTokenRef = useRef(captchaToken)
+  passwordRef.current = submittedPassword
+  captchaIdRef.current = captchaId
+  captchaSolutionRef.current = captchaSolution
+  captchaTokenRef.current = captchaToken
 
   const loadDashboard = useCallback(async (silent = false) => {
     try {
       if (!silent) setLoading(true)
-      
+
       const interval = dateRange.start === dateRange.end ? todayInterval : multiDayInterval
+      const pw = passwordRef.current
       const auth = {
-        password,
+        password: pw,
         captcha: {
-            captcha_id: captchaId,
-            captcha_solution: captchaSolution,
-            captcha_token: captchaToken
+            captcha_id: captchaIdRef.current,
+            captcha_solution: captchaSolutionRef.current,
+            captcha_token: captchaTokenRef.current
         }
       }
 
@@ -132,7 +144,7 @@ export default function PublicDashboardPage() {
             dateRange.end,
             10,
             interval,
-            password,
+            pw,
             auth.captcha
         ),
         (async () => {
@@ -144,7 +156,7 @@ export default function PublicDashboardPage() {
             return getPublicDailyStats(siteId, prevRange.start, prevRange.end, interval, auth)
         })()
       ])
-      
+
       setData(dashboardData)
       setPrevStats(prevStatsData)
       setPrevDailyStats(prevDailyStatsData)
@@ -159,7 +171,7 @@ export default function PublicDashboardPage() {
       const apiErr = error instanceof ApiError ? error : null
       if (apiErr?.status === 401 && (apiErr.data as Record<string, unknown>)?.is_protected) {
         setIsPasswordProtected(true)
-        if (password) {
+        if (passwordRef.current) {
           toast.error('Invalid password or captcha')
           // Reset captcha on failure
           setCaptchaId('')
@@ -174,7 +186,7 @@ export default function PublicDashboardPage() {
     } finally {
       if (!silent) setLoading(false)
     }
-  }, [siteId, dateRange, todayInterval, multiDayInterval, password, captchaId, captchaSolution, captchaToken])
+  }, [siteId, dateRange, todayInterval, multiDayInterval])
 
   // * Auto-refresh interval: chart, KPIs, and realtime count update every 30 seconds
   useEffect(() => {
@@ -185,7 +197,7 @@ export default function PublicDashboardPage() {
       }, 30000)
       return () => clearInterval(interval)
     }
-  }, [data, isPasswordProtected, dateRange, todayInterval, multiDayInterval, password, loadDashboard, loadRealtime])
+  }, [data, isPasswordProtected, dateRange, todayInterval, multiDayInterval, loadDashboard, loadRealtime])
 
   useEffect(() => {
     loadDashboard()
@@ -193,6 +205,9 @@ export default function PublicDashboardPage() {
 
   const handlePasswordSubmit = (e: React.FormEvent) => {
     e.preventDefault()
+    // Update ref immediately so loadDashboard reads the latest password
+    passwordRef.current = password
+    setSubmittedPassword(password)
     loadDashboard()
   }
 
-- 
2.49.1


From 430e6f5d48d4d41619a5631fb80b46dd70df1381 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 14:45:25 +0100
Subject: [PATCH 157/428] feat: use session cookie auth for public dashboard
 password flow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

handlePasswordSubmit now calls POST /public/sites/:id/auth which
sets an HttpOnly cookie. All subsequent API calls authenticate via
cookie automatically — no password in URLs, no captcha state needed
for data fetching. Simplifies share page state management.
---
 app/share/[id]/page.tsx | 97 ++++++++++++++---------------------------
 lib/api/stats.ts        | 15 +++++++
 2 files changed, 48 insertions(+), 64 deletions(-)

diff --git a/app/share/[id]/page.tsx b/app/share/[id]/page.tsx
index e43966c..780c17f 100644
--- a/app/share/[id]/page.tsx
+++ b/app/share/[id]/page.tsx
@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import Image from 'next/image'
 import { useParams, useSearchParams, useRouter } from 'next/navigation'
-import { getPublicDashboard, getPublicStats, getPublicDailyStats, getPublicRealtime, type DashboardData, type Stats, type DailyStat } from '@/lib/api/stats'
+import { getPublicDashboard, getPublicStats, getPublicDailyStats, getPublicRealtime, authenticatePublicDashboard, type DashboardData, type Stats, type DailyStat } from '@/lib/api/stats'
 import { toast } from '@ciphera-net/ui'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { ApiError } from '@/lib/api/client'
@@ -39,9 +39,10 @@ export default function PublicDashboardPage() {
   const [loading, setLoading] = useState(true)
   const [data, setData] = useState<DashboardData | null>(null)
   const [password, setPassword] = useState(passwordParam || '')
-  const [submittedPassword, setSubmittedPassword] = useState(passwordParam || '')
   const [isPasswordProtected, setIsPasswordProtected] = useState(false)
-  
+  const [isAuthenticated, setIsAuthenticated] = useState(false)
+  const [authLoading, setAuthLoading] = useState(false)
+
   // Captcha State
   const [captchaId, setCaptchaId] = useState('')
   const [captchaSolution, setCaptchaSolution] = useState('')
@@ -92,68 +93,30 @@ export default function PublicDashboardPage() {
 
   const loadRealtime = useCallback(async () => {
     try {
-      const auth = {
-        password: passwordRef.current,
-        captcha: {
-          captcha_id: captchaIdRef.current,
-          captcha_solution: captchaSolutionRef.current,
-          captcha_token: captchaTokenRef.current
-        }
-      }
-      const realtimeData = await getPublicRealtime(siteId, auth)
+      const realtimeData = await getPublicRealtime(siteId)
       if (data) {
-        setData({
-          ...data,
-          realtime_visitors: realtimeData.visitors
-        })
+        setData({ ...data, realtime_visitors: realtimeData.visitors })
       }
-    } catch (error) {
+    } catch {
       // Silently fail for realtime updates
     }
   }, [siteId, data])
 
-  // Use refs for auth values so loadDashboard doesn't recreate on every keystroke/captcha change
-  const passwordRef = useRef(submittedPassword)
-  const captchaIdRef = useRef(captchaId)
-  const captchaSolutionRef = useRef(captchaSolution)
-  const captchaTokenRef = useRef(captchaToken)
-  passwordRef.current = submittedPassword
-  captchaIdRef.current = captchaId
-  captchaSolutionRef.current = captchaSolution
-  captchaTokenRef.current = captchaToken
-
   const loadDashboard = useCallback(async (silent = false) => {
     try {
       if (!silent) setLoading(true)
 
       const interval = dateRange.start === dateRange.end ? todayInterval : multiDayInterval
-      const pw = passwordRef.current
-      const auth = {
-        password: pw,
-        captcha: {
-            captcha_id: captchaIdRef.current,
-            captcha_solution: captchaSolutionRef.current,
-            captcha_token: captchaTokenRef.current
-        }
-      }
 
       const [dashboardData, prevStatsData, prevDailyStatsData] = await Promise.all([
-        getPublicDashboard(
-            siteId,
-            dateRange.start,
-            dateRange.end,
-            10,
-            interval,
-            pw,
-            auth.captcha
-        ),
+        getPublicDashboard(siteId, dateRange.start, dateRange.end, 10, interval),
         (async () => {
             const prevRange = getPreviousDateRange(dateRange.start, dateRange.end)
-            return getPublicStats(siteId, prevRange.start, prevRange.end, auth)
+            return getPublicStats(siteId, prevRange.start, prevRange.end)
         })(),
         (async () => {
             const prevRange = getPreviousDateRange(dateRange.start, dateRange.end)
-            return getPublicDailyStats(siteId, prevRange.start, prevRange.end, interval, auth)
+            return getPublicDailyStats(siteId, prevRange.start, prevRange.end, interval)
         })()
       ])
 
@@ -161,23 +124,11 @@ export default function PublicDashboardPage() {
       setPrevStats(prevStatsData)
       setPrevDailyStats(prevDailyStatsData)
       setLastUpdatedAt(Date.now())
-
       setIsPasswordProtected(false)
-      // Reset captcha
-      setCaptchaId('')
-      setCaptchaSolution('')
-      setCaptchaToken('')
     } catch (error: unknown) {
       const apiErr = error instanceof ApiError ? error : null
       if (apiErr?.status === 401 && (apiErr.data as Record<string, unknown>)?.is_protected) {
         setIsPasswordProtected(true)
-        if (passwordRef.current) {
-          toast.error('Invalid password or captcha')
-          // Reset captcha on failure
-          setCaptchaId('')
-          setCaptchaSolution('')
-          setCaptchaToken('')
-        }
       } else if (apiErr?.status === 404) {
         toast.error('Site not found')
       } else if (!silent) {
@@ -203,12 +154,30 @@ export default function PublicDashboardPage() {
     loadDashboard()
   }, [siteId, dateRange, todayInterval, multiDayInterval, loadDashboard])
 
-  const handlePasswordSubmit = (e: React.FormEvent) => {
+  const handlePasswordSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
-    // Update ref immediately so loadDashboard reads the latest password
-    passwordRef.current = password
-    setSubmittedPassword(password)
-    loadDashboard()
+    setAuthLoading(true)
+    try {
+      await authenticatePublicDashboard(siteId, password, captchaToken, captchaId, captchaSolution)
+      // Cookie is now set — load dashboard (cookie sent automatically)
+      setIsAuthenticated(true)
+      await loadDashboard()
+    } catch (error: unknown) {
+      const apiErr = error instanceof ApiError ? error : null
+      if (apiErr?.status === 401) {
+        const errData = apiErr.data as Record<string, unknown> | undefined
+        const errMsg = errData?.error as string | undefined
+        toast.error(errMsg || 'Invalid password or captcha')
+      } else {
+        toast.error('Authentication failed')
+      }
+      // Reset captcha on failure
+      setCaptchaId('')
+      setCaptchaSolution('')
+      setCaptchaToken('')
+    } finally {
+      setAuthLoading(false)
+    }
   }
 
   const showSkeleton = useMinimumLoading(loading && !data && !isPasswordProtected)
diff --git a/lib/api/stats.ts b/lib/api/stats.ts
index a26fa04..9897d6c 100644
--- a/lib/api/stats.ts
+++ b/lib/api/stats.ts
@@ -117,6 +117,21 @@ export interface FrustrationByPage {
   unique_elements: number
 }
 
+// ─── Public Auth ─────────────────────────────────────────────────────
+
+export function authenticatePublicDashboard(siteId: string, password: string, captchaToken?: string, captchaId?: string, captchaSolution?: string): Promise<{ status: string }> {
+  return apiRequest<{ status: string }>(`/public/sites/${siteId}/auth`, {
+    method: 'POST',
+    body: JSON.stringify({
+      password,
+      captcha_token: captchaToken || '',
+      captcha_id: captchaId || '',
+      captcha_solution: captchaSolution || '',
+    }),
+    credentials: 'include',
+  })
+}
+
 // ─── Helpers ────────────────────────────────────────────────────────
 
 function appendAuthParams(params: URLSearchParams, auth?: AuthParams) {
-- 
2.49.1


From c85f305f1ea3ae61bf3b67d91119b37635a1f895 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 14:59:24 +0100
Subject: [PATCH 158/428] fix: show time labels on X-axis and tooltip for
 intra-day chart views

Added formatLabel prop to XAxis component. When viewing Today (hour
or minute interval), X-axis shows "2:00 PM" instead of "Mar 22".
Tooltip shows time for intra-day, date for multi-day.
---
 components/dashboard/Chart.tsx | 33 ++++++++++++++++++++++++++-------
 components/ui/area-chart.tsx   | 13 +++++++------
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index 8e4938d..2b91c7e 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -436,7 +436,13 @@ export default function Chart({
                   strokeWidth={2}
                   gradientToOpacity={0}
                 />
-                <VisxXAxis numTicks={6} />
+                <VisxXAxis
+                  numTicks={6}
+                  formatLabel={interval === 'minute' || interval === 'hour'
+                    ? (d) => d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })
+                    : undefined
+                  }
+                />
                 <VisxYAxis
                   numTicks={6}
                   formatValue={(v) => {
@@ -445,14 +451,27 @@ export default function Chart({
                   }}
                 />
                 <VisxChartTooltip
-                  rows={(point) => {
+                  content={({ point }) => {
+                    const dateObj = point.dateObj as Date
                     const config = METRIC_CONFIGS.find((m) => m.key === metric)
                     const value = point[metric] as number
-                    return [{
-                      color: CHART_COLORS[metric],
-                      label: config?.label || metric,
-                      value: config ? config.format(value) : value,
-                    }]
+                    const title = interval === 'minute' || interval === 'hour'
+                      ? dateObj.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })
+                      : dateObj.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })
+                    return (
+                      <div className="px-3 py-2.5">
+                        <div className="mb-2 font-medium text-neutral-400 text-xs">{title}</div>
+                        <div className="flex items-center justify-between gap-4">
+                          <div className="flex items-center gap-2">
+                            <span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: CHART_COLORS[metric] }} />
+                            <span className="text-neutral-400 text-sm">{config?.label || metric}</span>
+                          </div>
+                          <span className="font-medium text-white text-sm tabular-nums">
+                            {config ? config.format(value) : value}
+                          </span>
+                        </div>
+                      </div>
+                    )
                   }}
                 />
               </VisxAreaChart>
diff --git a/components/ui/area-chart.tsx b/components/ui/area-chart.tsx
index 0515ed9..e2d52fd 100644
--- a/components/ui/area-chart.tsx
+++ b/components/ui/area-chart.tsx
@@ -1293,6 +1293,7 @@ Grid.displayName = "Grid";
 export interface XAxisProps {
   numTicks?: number;
   tickerHalfWidth?: number;
+  formatLabel?: (date: Date) => string;
 }
 
 interface XAxisLabelProps {
@@ -1346,7 +1347,7 @@ function XAxisLabel({
   );
 }
 
-export function XAxis({ numTicks = 5, tickerHalfWidth = 50 }: XAxisProps) {
+export function XAxis({ numTicks = 5, tickerHalfWidth = 50, formatLabel }: XAxisProps) {
   const { xScale, margin, tooltipData, containerRef } = useChart();
   const [mounted, setMounted] = useState(false);
 
@@ -1376,15 +1377,15 @@ export function XAxis({ numTicks = 5, tickerHalfWidth = 50 }: XAxisProps) {
       dates.push(new Date(time));
     }
 
+    const defaultFormat = (d: Date) => d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+    const fmt = formatLabel ?? defaultFormat;
+
     return dates.map((date) => ({
       date,
       x: (xScale(date) ?? 0) + margin.left,
-      label: date.toLocaleDateString("en-US", {
-        month: "short",
-        day: "numeric",
-      }),
+      label: fmt(date),
     }));
-  }, [xScale, margin.left, numTicks]);
+  }, [xScale, margin.left, numTicks, formatLabel]);
 
   const isHovering = tooltipData !== null;
   const crosshairX = tooltipData ? tooltipData.x + margin.left : null;
-- 
2.49.1


From bd023e76f50a4d6f08d718c5c31658c57b419642 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 15:04:11 +0100
Subject: [PATCH 159/428] fix: use European date/time formats (en-GB) and guard
 against undefined dateObj

---
 components/dashboard/Chart.tsx | 10 +++++-----
 components/ui/area-chart.tsx   |  6 +++---
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index 2b91c7e..0e5c4f2 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -439,8 +439,8 @@ export default function Chart({
                 <VisxXAxis
                   numTicks={6}
                   formatLabel={interval === 'minute' || interval === 'hour'
-                    ? (d) => d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })
-                    : undefined
+                    ? (d) => d.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' })
+                    : (d) => d.toLocaleDateString('en-GB', { day: 'numeric', month: 'short' })
                   }
                 />
                 <VisxYAxis
@@ -452,12 +452,12 @@ export default function Chart({
                 />
                 <VisxChartTooltip
                   content={({ point }) => {
-                    const dateObj = point.dateObj as Date
+                    const dateObj = point.dateObj instanceof Date ? point.dateObj : new Date(point.dateObj as string || Date.now())
                     const config = METRIC_CONFIGS.find((m) => m.key === metric)
                     const value = point[metric] as number
                     const title = interval === 'minute' || interval === 'hour'
-                      ? dateObj.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })
-                      : dateObj.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })
+                      ? dateObj.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' })
+                      : dateObj.toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short' })
                     return (
                       <div className="px-3 py-2.5">
                         <div className="mb-2 font-medium text-neutral-400 text-xs">{title}</div>
diff --git a/components/ui/area-chart.tsx b/components/ui/area-chart.tsx
index e2d52fd..7fe4fd2 100644
--- a/components/ui/area-chart.tsx
+++ b/components/ui/area-chart.tsx
@@ -1061,7 +1061,7 @@ export function ChartTooltip({
     if (barXAccessor) {
       return barXAccessor(tooltipData.point);
     }
-    return xAccessor(tooltipData.point).toLocaleDateString("en-US", {
+    return xAccessor(tooltipData.point).toLocaleDateString("en-GB", {
       weekday: "short",
       month: "short",
       day: "numeric",
@@ -1377,7 +1377,7 @@ export function XAxis({ numTicks = 5, tickerHalfWidth = 50, formatLabel }: XAxis
       dates.push(new Date(time));
     }
 
-    const defaultFormat = (d: Date) => d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+    const defaultFormat = (d: Date) => d.toLocaleDateString("en-GB", { month: "short", day: "numeric" });
     const fmt = formatLabel ?? defaultFormat;
 
     return dates.map((date) => ({
@@ -2135,7 +2135,7 @@ function ChartInner({
   const dateLabels = useMemo(
     () =>
       data.map((d) =>
-        xAccessor(d).toLocaleDateString("en-US", {
+        xAccessor(d).toLocaleDateString("en-GB", {
           month: "short",
           day: "numeric",
         })
-- 
2.49.1


From e626350f14d04d40020631e770344634736ebf5c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 15:16:20 +0100
Subject: [PATCH 160/428] fix: use UTC hours for intra-day chart labels to
 match server timezone buckets

Backend returns timestamps already bucketed in site timezone but as
UTC values. Using getUTCHours/getUTCMinutes prevents the browser
from adding its local timezone offset.
---
 components/dashboard/Chart.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index 0e5c4f2..4b47fc0 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -439,7 +439,7 @@ export default function Chart({
                 <VisxXAxis
                   numTicks={6}
                   formatLabel={interval === 'minute' || interval === 'hour'
-                    ? (d) => d.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' })
+                    ? (d) => `${String(d.getUTCHours()).padStart(2, '0')}:${String(d.getUTCMinutes()).padStart(2, '0')}`
                     : (d) => d.toLocaleDateString('en-GB', { day: 'numeric', month: 'short' })
                   }
                 />
@@ -456,7 +456,7 @@ export default function Chart({
                     const config = METRIC_CONFIGS.find((m) => m.key === metric)
                     const value = point[metric] as number
                     const title = interval === 'minute' || interval === 'hour'
-                      ? dateObj.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' })
+                      ? `${String(dateObj.getUTCHours()).padStart(2, '0')}:${String(dateObj.getUTCMinutes()).padStart(2, '0')}`
                       : dateObj.toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short' })
                     return (
                       <div className="px-3 py-2.5">
-- 
2.49.1


From b7e92abb40e42378b70b7167076a65701aa505d6 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 15:31:45 +0100
Subject: [PATCH 161/428] feat: persist script feature toggles to backend

Features (scroll, 404, outbound, downloads, frustration, storage, ttl)
are saved to site.script_features JSONB column on every toggle change.
Values are read from the site object on load.
---
 app/sites/[id]/settings/page.tsx      |  8 +++++-
 components/sites/ScriptSetupBlock.tsx | 37 +++++++++++++++++++--------
 lib/api/sites.ts                      |  4 +++
 3 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index 6795db4..9d26399 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -809,9 +809,15 @@ export default function SiteSettingsPage() {
                       Add this script to your website to start tracking visitors. Choose your framework for setup instructions.
                     </p>
                     <ScriptSetupBlock
-                      site={{ domain: site.domain, name: site.name }}
+                      site={{ domain: site.domain, name: site.name, script_features: site.script_features }}
                       showFrameworkPicker
                       className="mb-4"
+                      onFeaturesChange={async (features) => {
+                        try {
+                          await updateSite(siteId, { name: site.name, script_features: features })
+                          mutateSite()
+                        } catch { /* silent — not critical */ }
+                      }}
                     />
 
                     <div className="flex items-center gap-4 mt-4">
diff --git a/components/sites/ScriptSetupBlock.tsx b/components/sites/ScriptSetupBlock.tsx
index 339fbfb..6648d27 100644
--- a/components/sites/ScriptSetupBlock.tsx
+++ b/components/sites/ScriptSetupBlock.tsx
@@ -37,6 +37,7 @@ type FeatureKey = (typeof FEATURES)[number]['key'] | 'frustration'
 export interface ScriptSetupBlockSite {
   domain: string
   name?: string
+  script_features?: Record<string, unknown>
 }
 
 interface ScriptSetupBlockProps {
@@ -44,27 +45,39 @@ interface ScriptSetupBlockProps {
   site: ScriptSetupBlockSite
   /** Called when user copies the script (e.g. for analytics). */
   onScriptCopy?: () => void
+  /** Called when features change so the parent can save to backend. */
+  onFeaturesChange?: (features: Record<string, unknown>) => void
   /** Show framework picker. Default true. */
   showFrameworkPicker?: boolean
   /** Optional class for the root wrapper. */
   className?: string
 }
 
+const DEFAULT_FEATURES: Record<FeatureKey, boolean> = {
+  scroll: true,
+  '404': true,
+  outbound: true,
+  downloads: true,
+  frustration: false,
+}
+
 export default function ScriptSetupBlock({
   site,
   onScriptCopy,
+  onFeaturesChange,
   showFrameworkPicker = true,
   className = '',
 }: ScriptSetupBlockProps) {
+  const sf = site.script_features || {}
   const [features, setFeatures] = useState<Record<FeatureKey, boolean>>({
-    scroll: true,
-    '404': true,
-    outbound: true,
-    downloads: true,
-    frustration: false,
+    scroll: sf.scroll != null ? Boolean(sf.scroll) : DEFAULT_FEATURES.scroll,
+    '404': sf['404'] != null ? Boolean(sf['404']) : DEFAULT_FEATURES['404'],
+    outbound: sf.outbound != null ? Boolean(sf.outbound) : DEFAULT_FEATURES.outbound,
+    downloads: sf.downloads != null ? Boolean(sf.downloads) : DEFAULT_FEATURES.downloads,
+    frustration: sf.frustration != null ? Boolean(sf.frustration) : DEFAULT_FEATURES.frustration,
   })
-  const [storage, setStorage] = useState('local')
-  const [ttl, setTtl] = useState('24')
+  const [storage, setStorage] = useState(typeof sf.storage === 'string' ? sf.storage : 'local')
+  const [ttl, setTtl] = useState(typeof sf.ttl === 'string' ? sf.ttl : '24')
   const [framework, setFramework] = useState('')
   const [copied, setCopied] = useState(false)
 
@@ -97,7 +110,11 @@ export default function ScriptSetupBlock({
   }, [scriptSnippet, onScriptCopy])
 
   const toggleFeature = (key: FeatureKey) => {
-    setFeatures((prev) => ({ ...prev, [key]: !prev[key] }))
+    setFeatures((prev) => {
+      const next = { ...prev, [key]: !prev[key] }
+      onFeaturesChange?.({ ...next, storage, ttl })
+      return next
+    })
   }
 
   const selectedIntegration = framework ? getIntegration(framework) : null
@@ -201,7 +218,7 @@ export default function ScriptSetupBlock({
             <Select
               variant="input"
               value={storage}
-              onChange={setStorage}
+              onChange={(v: string) => { setStorage(v); onFeaturesChange?.({ ...features, storage: v, ttl }) }}
               options={STORAGE_OPTIONS}
             />
           </div>
@@ -213,7 +230,7 @@ export default function ScriptSetupBlock({
               <Select
                 variant="input"
                 value={ttl}
-                onChange={setTtl}
+                onChange={(v: string) => { setTtl(v); onFeaturesChange?.({ ...features, storage, ttl: v }) }}
                 options={TTL_OPTIONS}
               />
             </div>
diff --git a/lib/api/sites.ts b/lib/api/sites.ts
index 7093b57..5cdf284 100644
--- a/lib/api/sites.ts
+++ b/lib/api/sites.ts
@@ -23,6 +23,8 @@ export interface Site {
   hide_unknown_locations?: boolean
   // Data retention (months); 0 = keep forever
   data_retention_months?: number
+  // Script feature toggles
+  script_features?: Record<string, unknown>
   is_verified?: boolean
   created_at: string
   updated_at: string
@@ -49,6 +51,8 @@ export interface UpdateSiteRequest {
   collect_screen_resolution?: boolean
   // Bot and noise filtering
   filter_bots?: boolean
+  // Script feature toggles
+  script_features?: Record<string, unknown>
   // Hide unknown locations from stats
   hide_unknown_locations?: boolean
   // Data retention (months); 0 = keep forever
-- 
2.49.1


From 5c30043550b56923147cea2cc00cd0de0a03f43e Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 16:47:15 +0100
Subject: [PATCH 162/428] feat: remove uptime CRUD functions from API client

Removes create/update/delete/list monitor functions and request types.
Keeps getUptimeStatus and getMonitorChecks for the simplified UI.
---
 lib/api/uptime.ts | 54 -----------------------------------------------
 1 file changed, 54 deletions(-)

diff --git a/lib/api/uptime.ts b/lib/api/uptime.ts
index 5f4ec6f..f53e69d 100644
--- a/lib/api/uptime.ts
+++ b/lib/api/uptime.ts
@@ -54,23 +54,6 @@ export interface UptimeStatusResponse {
   total_monitors: number
 }
 
-export interface CreateMonitorRequest {
-  name: string
-  url: string
-  check_interval_seconds?: number
-  expected_status_code?: number
-  timeout_seconds?: number
-}
-
-export interface UpdateMonitorRequest {
-  name: string
-  url: string
-  check_interval_seconds?: number
-  expected_status_code?: number
-  timeout_seconds?: number
-  enabled?: boolean
-}
-
 /**
  * Fetches the uptime status overview for all monitors of a site
  */
@@ -82,43 +65,6 @@ export async function getUptimeStatus(siteId: string, startDate?: string, endDat
   return apiRequest<UptimeStatusResponse>(`/sites/${siteId}/uptime/status${query ? `?${query}` : ''}`)
 }
 
-/**
- * Lists all uptime monitors for a site
- */
-export async function listUptimeMonitors(siteId: string): Promise<UptimeMonitor[]> {
-  const res = await apiRequest<{ monitors: UptimeMonitor[] }>(`/sites/${siteId}/uptime/monitors`)
-  return res?.monitors ?? []
-}
-
-/**
- * Creates a new uptime monitor
- */
-export async function createUptimeMonitor(siteId: string, data: CreateMonitorRequest): Promise<UptimeMonitor> {
-  return apiRequest<UptimeMonitor>(`/sites/${siteId}/uptime/monitors`, {
-    method: 'POST',
-    body: JSON.stringify(data),
-  })
-}
-
-/**
- * Updates an existing uptime monitor
- */
-export async function updateUptimeMonitor(siteId: string, monitorId: string, data: UpdateMonitorRequest): Promise<UptimeMonitor> {
-  return apiRequest<UptimeMonitor>(`/sites/${siteId}/uptime/monitors/${monitorId}`, {
-    method: 'PUT',
-    body: JSON.stringify(data),
-  })
-}
-
-/**
- * Deletes an uptime monitor
- */
-export async function deleteUptimeMonitor(siteId: string, monitorId: string): Promise<void> {
-  await apiRequest(`/sites/${siteId}/uptime/monitors/${monitorId}`, {
-    method: 'DELETE',
-  })
-}
-
 /**
  * Fetches recent checks for a specific monitor
  */
-- 
2.49.1


From 1d268197278c1aaf9a14d991663b5d96938afdfd Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 16:51:42 +0100
Subject: [PATCH 163/428] feat: simplify uptime page to single auto-managed
 monitor with toggle

Rewrites uptime page from 978 to ~370 lines. Removes all monitor CRUD
UI (modals, monitor list, selection state). Adds enable/disable toggle
and empty state. Reads the single auto-managed monitor.
---
 app/sites/[id]/uptime/page.tsx | 791 +++++++++------------------------
 lib/api/sites.ts               |   4 +
 2 files changed, 209 insertions(+), 586 deletions(-)

diff --git a/app/sites/[id]/uptime/page.tsx b/app/sites/[id]/uptime/page.tsx
index 497f95b..67dda0b 100644
--- a/app/sites/[id]/uptime/page.tsx
+++ b/app/sites/[id]/uptime/page.tsx
@@ -1,25 +1,19 @@
 'use client'
 
 import { useAuth } from '@/lib/auth/context'
-import { useEffect, useState, useRef } from 'react'
-import { useParams, useRouter } from 'next/navigation'
-import { motion, AnimatePresence } from 'framer-motion'
+import { useEffect, useState } from 'react'
+import { useParams } from 'next/navigation'
 import { useSite, useUptimeStatus } from '@/lib/swr/dashboard'
+import { updateSite, type Site } from '@/lib/api/sites'
 import {
-  createUptimeMonitor,
-  updateUptimeMonitor,
-  deleteUptimeMonitor,
   getMonitorChecks,
   type UptimeStatusResponse,
   type MonitorStatus,
   type UptimeCheck,
   type UptimeDailyStat,
-  type CreateMonitorRequest,
 } from '@/lib/api/uptime'
 import { toast } from '@ciphera-net/ui'
-import { useTheme } from '@ciphera-net/ui'
-import { getAuthErrorMessage } from '@ciphera-net/ui'
-import { Button, Modal } from '@ciphera-net/ui'
+import { Button } from '@ciphera-net/ui'
 import { UptimeSkeleton, ChecksSkeleton, useMinimumLoading, useSkeletonFade } from '@/components/skeletons'
 import { formatDateFull, formatTime, formatDateTimeShort } from '@/lib/utils/formatDate'
 import {
@@ -335,300 +329,65 @@ function ResponseTimeChart({ checks }: { checks: UptimeCheck[] }) {
   )
 }
 
-// * Component: Monitor card (matches the reference image design)
-function MonitorCard({
-  monitorStatus,
-  expanded,
-  onToggle,
-  onEdit,
-  onDelete,
-  canEdit,
-  siteId,
-}: {
-  monitorStatus: MonitorStatus
-  expanded: boolean
-  onToggle: () => void
-  onEdit: () => void
-  onDelete: () => void
-  canEdit: boolean
-  siteId: string
-}) {
-  const { monitor, daily_stats, overall_uptime } = monitorStatus
-  const [checks, setChecks] = useState<UptimeCheck[]>([])
-  const [loadingChecks, setLoadingChecks] = useState(false)
-
-  useEffect(() => {
-    if (expanded && checks.length === 0) {
-      const fetchChecks = async () => {
-        setLoadingChecks(true)
-        try {
-          const data = await getMonitorChecks(siteId, monitor.id, 50)
-          setChecks(data)
-        } catch {
-          // * Silent fail for check details
-        } finally {
-          setLoadingChecks(false)
-        }
-      }
-      fetchChecks()
-    }
-  }, [expanded, siteId, monitor.id, checks.length])
-
-  return (
-    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden">
-      {/* Header */}
-      <button
-        onClick={onToggle}
-        className="w-full p-5 flex items-center justify-between hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors"
-      >
-        <div className="flex items-center gap-3">
-          {/* Status indicator */}
-          <div className={`w-3 h-3 rounded-full ${getStatusDotColor(monitor.last_status)} shrink-0`} />
-          <span className="font-semibold text-neutral-900 dark:text-white">
-            {monitor.name}
-          </span>
-          <span className="text-sm text-neutral-500 dark:text-neutral-400 hidden sm:inline">
-            {monitor.url}
-          </span>
-        </div>
-        <div className="flex items-center gap-4">
-          {monitor.last_response_time_ms !== null && (
-            <span className="text-sm text-neutral-500 dark:text-neutral-400 hidden sm:inline">
-              {formatMs(monitor.last_response_time_ms)}
-            </span>
-          )}
-          <span className="text-sm font-semibold text-neutral-900 dark:text-white">
-            {formatUptime(overall_uptime)} uptime
-          </span>
-          <svg
-            className={`w-4 h-4 text-neutral-400 transition-transform ${expanded ? 'rotate-180' : ''}`}
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            strokeWidth={2}
-          >
-            <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-          </svg>
-        </div>
-      </button>
-
-      {/* Status bar */}
-      <div className="px-5 pb-4">
-        <UptimeStatusBar dailyStats={daily_stats} />
-        <div className="flex justify-between mt-1.5 text-xs text-neutral-400 dark:text-neutral-500">
-          <span>90 days ago</span>
-          <span>Today</span>
-        </div>
-      </div>
-
-      {/* Expanded details */}
-      <AnimatePresence>
-        {expanded && (
-          <motion.div
-            initial={{ height: 0, opacity: 0 }}
-            animate={{ height: 'auto', opacity: 1 }}
-            exit={{ height: 0, opacity: 0 }}
-            transition={{ duration: 0.2 }}
-            className="overflow-hidden"
-          >
-            <div className="px-5 pb-5 border-t border-neutral-200 dark:border-neutral-800 pt-4">
-              {/* Monitor details grid */}
-              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-5">
-                <div>
-                  <div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-1">
-                    Status
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <div className={`w-2 h-2 rounded-full ${getStatusDotColor(monitor.last_status)}`} />
-                    <span className="text-sm font-medium text-neutral-900 dark:text-white">
-                      {getStatusLabel(monitor.last_status)}
-                    </span>
-                  </div>
-                </div>
-                <div>
-                  <div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-1">
-                    Response Time
-                  </div>
-                  <span className="text-sm font-medium text-neutral-900 dark:text-white">
-                    {formatMs(monitor.last_response_time_ms)}
-                  </span>
-                </div>
-                <div>
-                  <div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-1">
-                    Check Interval
-                  </div>
-                  <span className="text-sm font-medium text-neutral-900 dark:text-white">
-                    {monitor.check_interval_seconds >= 60
-                      ? `${Math.floor(monitor.check_interval_seconds / 60)}m`
-                      : `${monitor.check_interval_seconds}s`}
-                  </span>
-                </div>
-                <div>
-                  <div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-1">
-                    Last Checked
-                  </div>
-                  <span className="text-sm font-medium text-neutral-900 dark:text-white">
-                    {formatTimeAgo(monitor.last_checked_at)}
-                  </span>
-                </div>
-              </div>
-
-              {/* Response time chart */}
-              {loadingChecks ? (
-                <ChecksSkeleton />
-              ) : checks.length > 0 ? (
-                <>
-                  <ResponseTimeChart checks={checks} />
-
-                  {/* Recent checks */}
-                  <div className="mt-5">
-                    <h4 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-3">
-                      Recent Checks
-                    </h4>
-                    <div className="space-y-1.5 max-h-48 overflow-y-auto">
-                      {checks.slice(0, 20).map((check) => (
-                        <div
-                          key={check.id}
-                          className="flex items-center justify-between py-1.5 px-2 rounded-lg hover:bg-neutral-50 dark:hover:bg-neutral-800 text-sm"
-                        >
-                          <div className="flex items-center gap-2">
-                            <div className={`w-2 h-2 rounded-full ${getStatusDotColor(check.status)}`} />
-                            <span className="text-neutral-600 dark:text-neutral-300 text-xs">
-                              {formatDateTimeShort(new Date(check.checked_at))}
-                            </span>
-                          </div>
-                          <div className="flex items-center gap-3">
-                            {check.status_code && (
-                              <span className="text-xs text-neutral-500 dark:text-neutral-400">
-                                {check.status_code}
-                              </span>
-                            )}
-                            <span className="text-xs font-medium text-neutral-700 dark:text-neutral-300">
-                              {formatMs(check.response_time_ms)}
-                            </span>
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                </>
-              ) : null}
-
-              {/* Actions */}
-              {canEdit && (
-                <div className="flex gap-2 mt-4 pt-4 border-t border-neutral-200 dark:border-neutral-800">
-                  <Button
-                    onClick={(e: React.MouseEvent) => { e.stopPropagation(); onEdit() }}
-                    variant="secondary"
-                    className="text-sm"
-                  >
-                    Edit
-                  </Button>
-                  <Button
-                    onClick={(e: React.MouseEvent) => { e.stopPropagation(); onDelete() }}
-                    variant="secondary"
-                    className="text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
-                  >
-                    Delete
-                  </Button>
-                </div>
-              )}
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  )
-}
-
 // * Main uptime page
 export default function UptimePage() {
   const { user } = useAuth()
   const canEdit = user?.role === 'owner' || user?.role === 'admin'
   const params = useParams()
-  const router = useRouter()
   const siteId = params.id as string
 
-  const { data: site } = useSite(siteId)
+  const { data: site, mutate: mutateSite } = useSite(siteId)
   const { data: uptimeData, isLoading, mutate: mutateUptime } = useUptimeStatus(siteId)
-  const [expandedMonitor, setExpandedMonitor] = useState<string | null>(null)
-  const [showAddModal, setShowAddModal] = useState(false)
-  const [showEditModal, setShowEditModal] = useState(false)
-  const [editingMonitor, setEditingMonitor] = useState<MonitorStatus | null>(null)
-  const [formData, setFormData] = useState<CreateMonitorRequest>({
-    name: '',
-    url: '',
-    check_interval_seconds: 300,
-    expected_status_code: 200,
-    timeout_seconds: 30,
-  })
-  const [saving, setSaving] = useState(false)
+  const [toggling, setToggling] = useState(false)
+  const [checks, setChecks] = useState<UptimeCheck[]>([])
+  const [loadingChecks, setLoadingChecks] = useState(false)
 
-  const handleAddMonitor = async () => {
-    if (!formData.name || !formData.url) {
-      toast.error('Name and URL are required')
+  // * Single monitor from the auto-managed uptime system
+  const monitor = uptimeData?.monitors?.[0] ?? null
+  const overallUptime = uptimeData?.overall_uptime ?? 100
+  const overallStatus = uptimeData?.status ?? 'operational'
+
+  // * Fetch recent checks when we have a monitor
+  useEffect(() => {
+    if (!monitor) {
+      setChecks([])
       return
     }
-    setSaving(true)
-    try {
-      await createUptimeMonitor(siteId, formData)
-      toast.success('Monitor created successfully')
-      setShowAddModal(false)
-      setFormData({ name: '', url: '', check_interval_seconds: 300, expected_status_code: 200, timeout_seconds: 30 })
-      mutateUptime()
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to create monitor')
-    } finally {
-      setSaving(false)
+    const fetchChecks = async () => {
+      setLoadingChecks(true)
+      try {
+        const data = await getMonitorChecks(siteId, monitor.monitor.id, 20)
+        setChecks(data)
+      } catch {
+        // * Silent fail for check details
+      } finally {
+        setLoadingChecks(false)
+      }
     }
-  }
+    fetchChecks()
+  }, [siteId, monitor?.monitor.id])
 
-  const handleEditMonitor = async () => {
-    if (!editingMonitor || !formData.name || !formData.url) return
-    setSaving(true)
+  const handleToggleUptime = async (enabled: boolean) => {
+    if (!site) return
+    setToggling(true)
     try {
-      await updateUptimeMonitor(siteId, editingMonitor.monitor.id, {
-        name: formData.name,
-        url: formData.url,
-        check_interval_seconds: formData.check_interval_seconds,
-        expected_status_code: formData.expected_status_code,
-        timeout_seconds: formData.timeout_seconds,
-        enabled: editingMonitor.monitor.enabled,
+      await updateSite(site.id, {
+        name: site.name,
+        timezone: site.timezone,
+        is_public: site.is_public,
+        excluded_paths: site.excluded_paths,
+        uptime_enabled: enabled,
       })
-      toast.success('Monitor updated successfully')
-      setShowEditModal(false)
-      setEditingMonitor(null)
+      mutateSite()
       mutateUptime()
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to update monitor')
+      toast.success(enabled ? 'Uptime monitoring enabled' : 'Uptime monitoring disabled')
+    } catch {
+      toast.error('Failed to update uptime monitoring')
     } finally {
-      setSaving(false)
+      setToggling(false)
     }
   }
 
-  const handleDeleteMonitor = async (monitorId: string) => {
-    if (!window.confirm('Are you sure you want to delete this monitor? All historical data will be lost.')) return
-    try {
-      await deleteUptimeMonitor(siteId, monitorId)
-      toast.success('Monitor deleted')
-      mutateUptime()
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to delete monitor')
-    }
-  }
-
-  const openEditModal = (ms: MonitorStatus) => {
-    setEditingMonitor(ms)
-    setFormData({
-      name: ms.monitor.name,
-      url: ms.monitor.url,
-      check_interval_seconds: ms.monitor.check_interval_seconds,
-      expected_status_code: ms.monitor.expected_status_code,
-      timeout_seconds: ms.monitor.timeout_seconds,
-    })
-    setShowEditModal(true)
-  }
-
   useEffect(() => {
     if (site?.domain) document.title = `Uptime · ${site.domain} | Pulse`
   }, [site?.domain])
@@ -639,10 +398,49 @@ export default function UptimePage() {
   if (showSkeleton) return <UptimeSkeleton />
   if (!site) return <div className="p-8 text-neutral-500">Site not found</div>
 
-  const monitors = Array.isArray(uptimeData?.monitors) ? uptimeData.monitors : []
-  const overallUptime = uptimeData?.overall_uptime ?? 100
-  const overallStatus = uptimeData?.status ?? 'operational'
+  const uptimeEnabled = site.uptime_enabled
 
+  // * Disabled state — show empty state with enable toggle
+  if (!uptimeEnabled) {
+    return (
+      <div className={`w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">
+            Uptime
+          </h1>
+          <p className="text-sm text-neutral-500 dark:text-neutral-400">
+            Monitor your site&apos;s availability and response time
+          </p>
+        </div>
+
+        {/* Empty state */}
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-12 text-center">
+          <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center">
+            <svg className="w-8 h-8 text-neutral-500 dark:text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+          <h3 className="font-semibold text-neutral-900 dark:text-white mb-2">
+            Uptime monitoring is disabled
+          </h3>
+          <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-6 max-w-md mx-auto">
+            Enable uptime monitoring to track your site&apos;s availability and response time around the clock.
+          </p>
+          {canEdit && (
+            <Button
+              onClick={() => handleToggleUptime(true)}
+              disabled={toggling}
+            >
+              {toggling ? 'Enabling...' : 'Enable Uptime Monitoring'}
+            </Button>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  // * Enabled state — show uptime dashboard
   return (
     <div className={`w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       {/* Header */}
@@ -652,327 +450,148 @@ export default function UptimePage() {
             Uptime
           </h1>
           <p className="text-sm text-neutral-500 dark:text-neutral-400">
-            Monitor your endpoints and track availability over time
+            Monitor your site&apos;s availability and response time
           </p>
         </div>
         {canEdit && (
           <Button
-            onClick={() => {
-              setFormData({ name: '', url: '', check_interval_seconds: 300, expected_status_code: 200, timeout_seconds: 30 })
-              setShowAddModal(true)
-            }}
+            variant="secondary"
+            onClick={() => handleToggleUptime(false)}
+            disabled={toggling}
+            className="text-sm"
           >
-            Add Monitor
+            {toggling ? 'Disabling...' : 'Disable Monitoring'}
           </Button>
         )}
       </div>
 
       {/* Overall status card */}
-      {monitors.length > 0 && (
-        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 mb-6">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <div className={`w-3.5 h-3.5 rounded-full ${getStatusDotColor(overallStatus)}`} />
-              <div>
-                <span className="font-semibold text-neutral-900 dark:text-white text-lg">
-                  {site.name}
-                </span>
-                <span className={`text-sm font-medium ml-3 ${getOverallStatusTextColor(overallStatus)}`}>
-                  {getOverallStatusText(overallStatus)}
-                </span>
-              </div>
-            </div>
-            <div className="text-right">
-              <span className="text-sm font-semibold text-neutral-900 dark:text-white">
-                {formatUptime(overallUptime)} uptime
+      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 mb-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className={`w-3.5 h-3.5 rounded-full ${getStatusDotColor(overallStatus)}`} />
+            <div>
+              <span className="font-semibold text-neutral-900 dark:text-white text-lg">
+                {site.name}
+              </span>
+              <span className={`text-sm font-medium ml-3 ${getOverallStatusTextColor(overallStatus)}`}>
+                {getOverallStatusText(overallStatus)}
               </span>
-              <div className="text-xs text-neutral-500 dark:text-neutral-400">
-                {monitors.length} {monitors.length === 1 ? 'component' : 'components'}
-              </div>
             </div>
           </div>
-        </div>
-      )}
-
-      {/* Monitor list */}
-      {monitors.length > 0 ? (
-        <div className="space-y-4">
-          {monitors.map((ms) => (
-            <MonitorCard
-              key={ms.monitor.id}
-              monitorStatus={ms}
-              expanded={expandedMonitor === ms.monitor.id}
-              onToggle={() => setExpandedMonitor(
-                expandedMonitor === ms.monitor.id ? null : ms.monitor.id
-              )}
-              onEdit={() => openEditModal(ms)}
-              onDelete={() => handleDeleteMonitor(ms.monitor.id)}
-              canEdit={canEdit}
-              siteId={siteId}
-            />
-          ))}
-        </div>
-      ) : (
-        /* Empty state */
-        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-12 text-center">
-          <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center">
-            <svg className="w-8 h-8 text-neutral-500 dark:text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-              <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-          </div>
-          <h3 className="font-semibold text-neutral-900 dark:text-white mb-2">
-            No monitors yet
-          </h3>
-          <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-6 max-w-md mx-auto">
-            Add a monitor to start tracking the uptime and response time of your endpoints. You can monitor APIs, websites, and any HTTP endpoint.
-          </p>
-          {canEdit && (
-            <Button
-              onClick={() => {
-                setFormData({ name: '', url: '', check_interval_seconds: 300, expected_status_code: 200, timeout_seconds: 30 })
-                setShowAddModal(true)
-              }}
-            >
-              Add Your First Monitor
-            </Button>
-          )}
-        </div>
-      )}
-
-      {/* Add Monitor Modal */}
-      <Modal isOpen={showAddModal} onClose={() => setShowAddModal(false)} title="Add Monitor">
-        <MonitorForm
-          formData={formData}
-          setFormData={setFormData}
-          onSubmit={handleAddMonitor}
-          onCancel={() => setShowAddModal(false)}
-          saving={saving}
-          submitLabel="Create Monitor"
-          siteDomain={site.domain}
-        />
-      </Modal>
-
-      {/* Edit Monitor Modal */}
-      <Modal isOpen={showEditModal} onClose={() => setShowEditModal(false)} title="Edit Monitor">
-        <MonitorForm
-          formData={formData}
-          setFormData={setFormData}
-          onSubmit={handleEditMonitor}
-          onCancel={() => setShowEditModal(false)}
-          saving={saving}
-          submitLabel="Save Changes"
-          siteDomain={site.domain}
-        />
-      </Modal>
-    </div>
-  )
-}
-
-// * Monitor creation/edit form
-function MonitorForm({
-  formData,
-  setFormData,
-  onSubmit,
-  onCancel,
-  saving,
-  submitLabel,
-  siteDomain,
-}: {
-  formData: CreateMonitorRequest
-  setFormData: (data: CreateMonitorRequest) => void
-  onSubmit: () => void
-  onCancel: () => void
-  saving: boolean
-  submitLabel: string
-  siteDomain: string
-}) {
-  // * Derive protocol from formData.url so edit modal shows the monitor's actual scheme (no desync)
-  const protocol: 'https://' | 'http://' = formData.url.startsWith('http://') ? 'http://' : 'https://'
-  const [showProtocolDropdown, setShowProtocolDropdown] = useState(false)
-  const dropdownRef = useRef<HTMLDivElement>(null)
-
-  // * Extract the path portion from the full URL
-  const getPath = (): string => {
-    const url = formData.url
-    if (!url) return ''
-    try {
-      const parsed = new URL(url)
-      const pathAndRest = parsed.pathname + parsed.search + parsed.hash
-      return pathAndRest === '/' ? '' : pathAndRest
-    } catch {
-      // ? If not a valid full URL, try stripping the protocol prefix
-      if (url.startsWith('https://')) return url.slice(8 + siteDomain.length)
-      if (url.startsWith('http://')) return url.slice(7 + siteDomain.length)
-      return url
-    }
-  }
-
-  const handlePathChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const path = e.target.value
-    const safePath = path.startsWith('/') || path === '' ? path : `/${path}`
-    setFormData({ ...formData, url: `${protocol}${siteDomain}${safePath}` })
-  }
-
-  const handleProtocolChange = (proto: 'https://' | 'http://') => {
-    setShowProtocolDropdown(false)
-    const path = getPath()
-    setFormData({ ...formData, url: `${proto}${siteDomain}${path}` })
-  }
-
-  // * Initialize URL if empty
-  useEffect(() => {
-    if (!formData.url) {
-      setFormData({ ...formData, url: `${protocol}${siteDomain}` })
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  // * Close dropdown on outside click
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
-        setShowProtocolDropdown(false)
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => document.removeEventListener('mousedown', handleClickOutside)
-  }, [])
-
-  return (
-    <div className="space-y-4">
-      {/* Name */}
-      <div>
-        <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
-          Name
-        </label>
-        <input
-          type="text"
-          value={formData.name}
-          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-          placeholder="e.g. API, Website, CDN"
-          autoFocus
-          maxLength={100}
-          className="w-full px-3 py-2 rounded-lg border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:border-transparent text-sm"
-        />
-        {formData.name.length > 80 && (
-          <span className={`text-xs tabular-nums mt-1 ${formData.name.length > 90 ? 'text-amber-500' : 'text-neutral-400'}`}>{formData.name.length}/100</span>
-        )}
-      </div>
-
-      {/* URL with protocol dropdown + domain prefix */}
-      <div>
-        <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
-          URL
-        </label>
-        <div className="flex rounded-lg border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 focus-within:ring-2 focus-within:ring-brand-orange focus-within:border-transparent overflow-hidden">
-          {/* Protocol dropdown */}
-          <div ref={dropdownRef} className="relative">
-            <button
-              type="button"
-              onClick={() => setShowProtocolDropdown(!showProtocolDropdown)}
-              className="h-full px-3 flex items-center gap-1 bg-neutral-100 dark:bg-neutral-700 text-neutral-600 dark:text-neutral-300 text-sm border-r border-neutral-300 dark:border-neutral-600 hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors select-none whitespace-nowrap"
-            >
-              {protocol}
-              <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-              </svg>
-            </button>
-            {showProtocolDropdown && (
-              <div className="absolute top-full left-0 mt-1 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg transition-shadow duration-300 z-10 min-w-[100px]">
-                <button
-                  type="button"
-                  onClick={() => handleProtocolChange('https://')}
-                  className={`w-full text-left px-3 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors rounded-t-lg ${protocol === 'https://' ? 'text-brand-orange font-medium' : 'text-neutral-700 dark:text-neutral-300'}`}
-                >
-                  https://
-                </button>
-                <button
-                  type="button"
-                  onClick={() => handleProtocolChange('http://')}
-                  className={`w-full text-left px-3 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors rounded-b-lg ${protocol === 'http://' ? 'text-brand-orange font-medium' : 'text-neutral-700 dark:text-neutral-300'}`}
-                >
-                  http://
-                </button>
+          <div className="text-right">
+            <span className="text-sm font-semibold text-neutral-900 dark:text-white">
+              {formatUptime(overallUptime)} uptime
+            </span>
+            {monitor && (
+              <div className="text-xs text-neutral-500 dark:text-neutral-400">
+                Last checked {formatTimeAgo(monitor.monitor.last_checked_at)}
               </div>
             )}
           </div>
-          {/* Domain prefix */}
-          <span className="flex items-center px-1.5 text-sm text-neutral-500 dark:text-neutral-400 select-none whitespace-nowrap bg-neutral-100 dark:bg-neutral-700 border-r border-neutral-300 dark:border-neutral-600">
-            {siteDomain}
-          </span>
-          {/* Path input */}
-          <input
-            type="text"
-            value={getPath()}
-            onChange={handlePathChange}
-            placeholder="/api/health"
-            className="flex-1 min-w-0 px-3 py-2 bg-transparent text-neutral-900 dark:text-white placeholder-neutral-400 focus:outline-none text-sm"
-          />
         </div>
-        <p className="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
-          Add a specific path (e.g. /api/health) or leave empty for the root domain
-        </p>
       </div>
 
-      {/* Check interval */}
-      <div>
-        <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
-          Check Interval
-        </label>
-        <select
-          value={formData.check_interval_seconds}
-          onChange={(e) => setFormData({ ...formData, check_interval_seconds: parseInt(e.target.value) })}
-          className="w-full px-3 py-2 rounded-lg border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-orange focus:border-transparent text-sm"
-        >
-          <option value={60}>Every 1 minute</option>
-          <option value={120}>Every 2 minutes</option>
-          <option value={300}>Every 5 minutes</option>
-          <option value={600}>Every 10 minutes</option>
-          <option value={900}>Every 15 minutes</option>
-          <option value={1800}>Every 30 minutes</option>
-          <option value={3600}>Every 1 hour</option>
-        </select>
-      </div>
+      {/* 90-day uptime bar */}
+      {monitor && (
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 mb-6">
+          <h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-3">
+            90-Day Availability
+          </h3>
+          <UptimeStatusBar dailyStats={monitor.daily_stats} />
+          <div className="flex justify-between mt-1.5 text-xs text-neutral-400 dark:text-neutral-500">
+            <span>90 days ago</span>
+            <span>Today</span>
+          </div>
+        </div>
+      )}
 
-      {/* Expected status code */}
-      <div>
-        <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
-          Expected Status Code
-        </label>
-        <input
-          type="number"
-          value={formData.expected_status_code}
-          onChange={(e) => setFormData({ ...formData, expected_status_code: parseInt(e.target.value) || 200 })}
-          min={100}
-          max={599}
-          className="w-full px-3 py-2 rounded-lg border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-orange focus:border-transparent text-sm [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-        />
-      </div>
+      {/* Response time chart + Recent checks */}
+      {monitor && (
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5">
+          {/* Monitor details grid */}
+          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-5">
+            <div>
+              <div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-1">
+                Status
+              </div>
+              <div className="flex items-center gap-2">
+                <div className={`w-2 h-2 rounded-full ${getStatusDotColor(monitor.monitor.last_status)}`} />
+                <span className="text-sm font-medium text-neutral-900 dark:text-white">
+                  {getStatusLabel(monitor.monitor.last_status)}
+                </span>
+              </div>
+            </div>
+            <div>
+              <div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-1">
+                Response Time
+              </div>
+              <span className="text-sm font-medium text-neutral-900 dark:text-white">
+                {formatMs(monitor.monitor.last_response_time_ms)}
+              </span>
+            </div>
+            <div>
+              <div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-1">
+                Check Interval
+              </div>
+              <span className="text-sm font-medium text-neutral-900 dark:text-white">
+                {monitor.monitor.check_interval_seconds >= 60
+                  ? `${Math.floor(monitor.monitor.check_interval_seconds / 60)}m`
+                  : `${monitor.monitor.check_interval_seconds}s`}
+              </span>
+            </div>
+            <div>
+              <div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-1">
+                Overall Uptime
+              </div>
+              <span className="text-sm font-medium text-neutral-900 dark:text-white">
+                {formatUptime(monitor.overall_uptime)}
+              </span>
+            </div>
+          </div>
 
-      {/* Timeout */}
-      <div>
-        <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
-          Timeout (seconds)
-        </label>
-        <input
-          type="number"
-          value={formData.timeout_seconds}
-          onChange={(e) => setFormData({ ...formData, timeout_seconds: parseInt(e.target.value) || 30 })}
-          min={5}
-          max={60}
-          className="w-full px-3 py-2 rounded-lg border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-orange focus:border-transparent text-sm [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-        />
-      </div>
+          {/* Response time chart */}
+          {loadingChecks ? (
+            <ChecksSkeleton />
+          ) : checks.length > 0 ? (
+            <>
+              <ResponseTimeChart checks={checks} />
 
-      {/* Actions */}
-      <div className="flex justify-end gap-2 pt-2">
-        <Button variant="secondary" onClick={onCancel}>
-          Cancel
-        </Button>
-        <Button onClick={onSubmit} disabled={saving || !formData.name || !formData.url}>
-          {saving ? 'Saving...' : submitLabel}
-        </Button>
-      </div>
+              {/* Recent checks */}
+              <div className="mt-5">
+                <h4 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-3">
+                  Recent Checks
+                </h4>
+                <div className="space-y-1.5 max-h-48 overflow-y-auto">
+                  {checks.slice(0, 20).map((check) => (
+                    <div
+                      key={check.id}
+                      className="flex items-center justify-between py-1.5 px-2 rounded-lg hover:bg-neutral-50 dark:hover:bg-neutral-800 text-sm"
+                    >
+                      <div className="flex items-center gap-2">
+                        <div className={`w-2 h-2 rounded-full ${getStatusDotColor(check.status)}`} />
+                        <span className="text-neutral-600 dark:text-neutral-300 text-xs">
+                          {formatDateTimeShort(new Date(check.checked_at))}
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-3">
+                        {check.status_code && (
+                          <span className="text-xs text-neutral-500 dark:text-neutral-400">
+                            {check.status_code}
+                          </span>
+                        )}
+                        <span className="text-xs font-medium text-neutral-700 dark:text-neutral-300">
+                          {formatMs(check.response_time_ms)}
+                        </span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </>
+          ) : null}
+        </div>
+      )}
     </div>
   )
 }
diff --git a/lib/api/sites.ts b/lib/api/sites.ts
index 5cdf284..55992f9 100644
--- a/lib/api/sites.ts
+++ b/lib/api/sites.ts
@@ -25,6 +25,8 @@ export interface Site {
   data_retention_months?: number
   // Script feature toggles
   script_features?: Record<string, unknown>
+  // Uptime monitoring toggle
+  uptime_enabled: boolean
   is_verified?: boolean
   created_at: string
   updated_at: string
@@ -53,6 +55,8 @@ export interface UpdateSiteRequest {
   filter_bots?: boolean
   // Script feature toggles
   script_features?: Record<string, unknown>
+  // Uptime monitoring toggle
+  uptime_enabled?: boolean
   // Hide unknown locations from stats
   hide_unknown_locations?: boolean
   // Data retention (months); 0 = keep forever
-- 
2.49.1


From 6a1698b79493e8bced572c0e2f44d1f3f3db912b Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 16:57:04 +0100
Subject: [PATCH 164/428] feat: add Notifications section to settings with
 Reports and Alerts

- Adds purpose field to report schedule API client
- Adds useAlertSchedules SWR hook
- Reorganizes settings: Reports tab becomes Notifications tab
- Groups existing Reports and new Alerts subsections
- Alert channels reuse report delivery infrastructure (email, Slack, Discord, webhooks)
---
 app/sites/[id]/settings/page.tsx | 562 ++++++++++++++++++++++++-------
 lib/api/report-schedules.ts      |   8 +
 lib/swr/dashboard.ts             |  16 +-
 3 files changed, 460 insertions(+), 126 deletions(-)

diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index 9d26399..6e1520f 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState, useRef } from 'react'
 import { useParams, useRouter, useSearchParams } from 'next/navigation'
 import { updateSite, resetSiteData, type Site, type GeoDataLevel } from '@/lib/api/sites'
 import { createGoal, updateGoal, deleteGoal, type Goal } from '@/lib/api/goals'
-import { createReportSchedule, updateReportSchedule, deleteReportSchedule, testReportSchedule, type ReportSchedule, type CreateReportScheduleRequest, type EmailConfig, type WebhookConfig } from '@/lib/api/report-schedules'
+import { createReportSchedule, updateReportSchedule, deleteReportSchedule, testReportSchedule, listAlertSchedules, type ReportSchedule, type CreateReportScheduleRequest, type EmailConfig, type WebhookConfig } from '@/lib/api/report-schedules'
 import { botFilterSessions, botUnfilterSessions } from '@/lib/api/bot-filter'
 import { getGSCAuthURL, disconnectGSC } from '@/lib/api/gsc'
 import { getBunnyPullZones, connectBunny, disconnectBunny } from '@/lib/api/bunny'
@@ -21,7 +21,7 @@ import { Select, Modal, Button } from '@ciphera-net/ui'
 import { APP_URL } from '@/lib/api/client'
 import { generatePrivacySnippet } from '@/lib/utils/privacySnippet'
 import { useUnsavedChanges } from '@/lib/hooks/useUnsavedChanges'
-import { useSite, useGoals, useReportSchedules, useSubscription, useGSCStatus, useBunnyStatus, useSessions, useBotFilterStats } from '@/lib/swr/dashboard'
+import { useSite, useGoals, useReportSchedules, useAlertSchedules, useSubscription, useGSCStatus, useBunnyStatus, useSessions, useBotFilterStats } from '@/lib/swr/dashboard'
 import { getRetentionOptionsForPlan, formatRetentionMonths } from '@/lib/plans'
 import { motion, AnimatePresence } from 'framer-motion'
 import { useAuth } from '@/lib/auth/context'
@@ -32,7 +32,7 @@ import {
   AlertTriangleIcon,
   ZapIcon,
 } from '@ciphera-net/ui'
-import { PaperPlaneTilt, Envelope, WebhooksLogo, SpinnerGap, Trash, PencilSimple, Play, Plugs, ShieldCheck, Bug } from '@phosphor-icons/react'
+import { PaperPlaneTilt, Envelope, WebhooksLogo, SpinnerGap, Trash, PencilSimple, Play, Plugs, ShieldCheck, Bug, BellSimple } from '@phosphor-icons/react'
 import { SiDiscord } from '@icons-pack/react-simple-icons'
 
 function SlackIcon({ size = 16 }: { size?: number }) {
@@ -88,7 +88,7 @@ export default function SiteSettingsPage() {
   const { data: site, isLoading: siteLoading, mutate: mutateSite } = useSite(siteId)
   const [saving, setSaving] = useState(false)
   const [showDeleteModal, setShowDeleteModal] = useState(false)
-  const [activeTab, setActiveTab] = useState<'general' | 'visibility' | 'data' | 'bot' | 'goals' | 'reports' | 'integrations'>('general')
+  const [activeTab, setActiveTab] = useState<'general' | 'visibility' | 'data' | 'bot' | 'goals' | 'notifications' | 'integrations'>('general')
   const searchParams = useSearchParams()
 
   const [formData, setFormData] = useState({
@@ -124,6 +124,8 @@ export default function SiteSettingsPage() {
 
   // Report schedules
   const { data: reportSchedules = [], isLoading: reportLoading, mutate: mutateReportSchedules } = useReportSchedules(siteId)
+  // Alert schedules (uptime alerts)
+  const { data: alertSchedules = [], isLoading: alertLoading, mutate: mutateAlertSchedules } = useAlertSchedules(siteId)
   const { data: gscStatus, mutate: mutateGSCStatus } = useGSCStatus(siteId)
   const [gscConnecting, setGscConnecting] = useState(false)
   const [gscDisconnecting, setGscDisconnecting] = useState(false)
@@ -149,6 +151,17 @@ export default function SiteSettingsPage() {
     sendDay: 1,
   })
 
+  // Alert channel state
+  const [alertModalOpen, setAlertModalOpen] = useState(false)
+  const [editingAlert, setEditingAlert] = useState<ReportSchedule | null>(null)
+  const [alertSaving, setAlertSaving] = useState(false)
+  const [alertTesting, setAlertTesting] = useState<string | null>(null)
+  const [alertForm, setAlertForm] = useState({
+    channel: 'email' as string,
+    recipients: '',
+    webhookUrl: '',
+  })
+
   // Bot & Spam tab state
   const [botDateRange, setBotDateRange] = useState(() => getDateRange(7))
   const [suspiciousOnly, setSuspiciousOnly] = useState(true)
@@ -337,6 +350,103 @@ export default function SiteSettingsPage() {
     }
   }
 
+  // Alert channel handlers
+  const resetAlertForm = () => {
+    setAlertForm({
+      channel: 'email',
+      recipients: '',
+      webhookUrl: '',
+    })
+  }
+
+  const openEditAlert = (schedule: ReportSchedule) => {
+    setEditingAlert(schedule)
+    const isEmail = schedule.channel === 'email'
+    setAlertForm({
+      channel: schedule.channel,
+      recipients: isEmail ? (schedule.channel_config as EmailConfig).recipients.join(', ') : '',
+      webhookUrl: !isEmail ? (schedule.channel_config as WebhookConfig).url : '',
+    })
+    setAlertModalOpen(true)
+  }
+
+  const handleAlertSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+
+    let channelConfig: EmailConfig | WebhookConfig
+    if (alertForm.channel === 'email') {
+      const recipients = alertForm.recipients.split(',').map(r => r.trim()).filter(r => r.length > 0)
+      if (recipients.length === 0) {
+        toast.error('At least one recipient email is required')
+        return
+      }
+      channelConfig = { recipients }
+    } else {
+      if (!alertForm.webhookUrl.trim()) {
+        toast.error('Webhook URL is required')
+        return
+      }
+      channelConfig = { url: alertForm.webhookUrl.trim() }
+    }
+
+    const payload: CreateReportScheduleRequest = {
+      channel: alertForm.channel,
+      channel_config: channelConfig,
+      frequency: 'daily',
+      purpose: 'alert',
+    }
+
+    setAlertSaving(true)
+    try {
+      if (editingAlert) {
+        await updateReportSchedule(siteId, editingAlert.id, { ...payload, purpose: 'alert' })
+        toast.success('Alert channel updated')
+      } else {
+        await createReportSchedule(siteId, payload)
+        toast.success('Alert channel created')
+      }
+      setAlertModalOpen(false)
+      mutateAlertSchedules()
+    } catch (error: unknown) {
+      toast.error(getAuthErrorMessage(error) || 'Failed to save alert channel')
+    } finally {
+      setAlertSaving(false)
+    }
+  }
+
+  const handleAlertDelete = async (schedule: ReportSchedule) => {
+    if (!confirm('Delete this alert channel?')) return
+    try {
+      await deleteReportSchedule(siteId, schedule.id)
+      toast.success('Alert channel deleted')
+      mutateAlertSchedules()
+    } catch (error: unknown) {
+      toast.error(getAuthErrorMessage(error) || 'Failed to delete alert channel')
+    }
+  }
+
+  const handleAlertToggle = async (schedule: ReportSchedule) => {
+    try {
+      await updateReportSchedule(siteId, schedule.id, { enabled: !schedule.enabled })
+      toast.success(schedule.enabled ? 'Alert paused' : 'Alert enabled')
+      mutateAlertSchedules()
+    } catch (error: unknown) {
+      toast.error(getAuthErrorMessage(error) || 'Failed to update alert channel')
+    }
+  }
+
+  const handleAlertTest = async (schedule: ReportSchedule) => {
+    setAlertTesting(schedule.id)
+    try {
+      await testReportSchedule(siteId, schedule.id)
+      toast.success('Test alert sent successfully')
+    } catch (error: unknown) {
+      toast.error(getAuthErrorMessage(error) || 'Failed to send test alert')
+    } finally {
+      setAlertTesting(null)
+    }
+  }
+
   const getChannelLabel = (channel: string) => {
     switch (channel) {
       case 'email': return 'Email'
@@ -701,17 +811,17 @@ export default function SiteSettingsPage() {
             Goals & Events
           </button>
           <button
-            onClick={() => setActiveTab('reports')}
+            onClick={() => setActiveTab('notifications')}
             role="tab"
-            aria-selected={activeTab === 'reports'}
+            aria-selected={activeTab === 'notifications'}
             className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
-              activeTab === 'reports'
+              activeTab === 'notifications'
                 ? 'bg-brand-orange/10 text-brand-orange'
                 : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
             }`}
           >
-            <PaperPlaneTilt className="w-5 h-5" />
-            Reports
+            <BellSimple className="w-5 h-5" />
+            Notifications
           </button>
           <button
             onClick={() => setActiveTab('integrations')}
@@ -1530,128 +1640,257 @@ export default function SiteSettingsPage() {
               </div>
             )}
 
-            {activeTab === 'reports' && (
-              <div className="space-y-6">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Scheduled Reports</h2>
-                    <p className="text-sm text-neutral-500 dark:text-neutral-400">Automatically deliver analytics reports via email or webhooks.</p>
+            {activeTab === 'notifications' && (
+              <div className="space-y-8">
+                <div>
+                  <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Notifications</h2>
+                  <p className="text-sm text-neutral-500 dark:text-neutral-400">Configure how you receive reports and alerts.</p>
+                </div>
+
+                {/* Reports subsection */}
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <h3 className="text-base font-medium text-neutral-900 dark:text-white">Reports</h3>
+                      <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">Automatically deliver analytics reports via email or webhooks.</p>
+                    </div>
+                    {canEdit && (
+                      <Button onClick={() => { setEditingSchedule(null); resetReportForm(); setReportModalOpen(true) }}>
+                        Add Report
+                      </Button>
+                    )}
                   </div>
-                  {canEdit && (
-                    <Button onClick={() => { setEditingSchedule(null); resetReportForm(); setReportModalOpen(true) }}>
-                      Add Report
-                    </Button>
+
+                  {reportLoading ? (
+                    <div className="space-y-2">
+                      {Array.from({ length: 3 }).map((_, i) => (
+                        <div key={i} className="h-20 animate-pulse rounded-xl bg-neutral-100 dark:bg-neutral-800" />
+                      ))}
+                    </div>
+                  ) : reportSchedules.length === 0 ? (
+                    <div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-500 dark:text-neutral-400 text-sm">
+                      No scheduled reports yet. Add a report to automatically receive analytics summaries.
+                    </div>
+                  ) : (
+                    <div className="space-y-3">
+                      {reportSchedules.map((schedule) => (
+                        <div
+                          key={schedule.id}
+                          className={`rounded-xl border p-4 transition-colors ${
+                            schedule.enabled
+                              ? 'border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900/50'
+                              : 'border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/30 opacity-60'
+                          }`}
+                        >
+                          <div className="flex items-start justify-between gap-4">
+                            <div className="flex items-start gap-3 min-w-0">
+                              <div className="p-2 bg-neutral-800 rounded-lg mt-0.5">
+                                {CHANNEL_ICONS_LG[schedule.channel] || <WebhooksLogo className="w-5 h-5 text-neutral-400" />}
+                              </div>
+                              <div className="min-w-0">
+                                <div className="flex items-center gap-2 flex-wrap">
+                                  <span className="font-medium text-neutral-900 dark:text-white">
+                                    {getChannelLabel(schedule.channel)}
+                                  </span>
+                                  <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-brand-orange/10 text-brand-orange">
+                                    {getFrequencyLabel(schedule.frequency)}
+                                  </span>
+                                  <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400">
+                                    {getReportTypeLabel(schedule.report_type)}
+                                  </span>
+                                </div>
+                                <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1 truncate">
+                                  {schedule.channel === 'email'
+                                    ? (schedule.channel_config as EmailConfig).recipients.join(', ')
+                                    : (schedule.channel_config as WebhookConfig).url}
+                                </p>
+                                <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-1">
+                                  {getScheduleDescription(schedule)}
+                                </p>
+                                <div className="flex items-center gap-3 mt-1 text-xs text-neutral-400 dark:text-neutral-500">
+                                  <span>
+                                    Last sent: {schedule.last_sent_at
+                                      ? formatDateTime(new Date(schedule.last_sent_at))
+                                      : 'Never'}
+                                  </span>
+                                </div>
+                                {schedule.last_error && (
+                                  <p className="text-xs text-red-500 dark:text-red-400 mt-1">
+                                    Error: {schedule.last_error}
+                                  </p>
+                                )}
+                              </div>
+                            </div>
+
+                            {canEdit && (
+                              <div className="flex items-center gap-2 flex-shrink-0">
+                                <button
+                                  type="button"
+                                  onClick={() => handleReportTest(schedule)}
+                                  disabled={reportTesting === schedule.id}
+                                  className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors disabled:opacity-50"
+                                  title="Send test report"
+                                >
+                                  {reportTesting === schedule.id ? (
+                                    <SpinnerGap className="w-4 h-4 animate-spin" />
+                                  ) : (
+                                    <Play className="w-4 h-4" />
+                                  )}
+                                </button>
+                                <button
+                                  type="button"
+                                  onClick={() => openEditSchedule(schedule)}
+                                  className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
+                                  title="Edit schedule"
+                                >
+                                  <PencilSimple className="w-4 h-4" />
+                                </button>
+                                <label className="relative inline-flex items-center cursor-pointer">
+                                  <input
+                                    type="checkbox"
+                                    checked={schedule.enabled}
+                                    onChange={() => handleReportToggle(schedule)}
+                                    className="sr-only peer"
+                                  />
+                                  <div className="w-9 h-5 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
+                                </label>
+                                <button
+                                  type="button"
+                                  onClick={() => handleReportDelete(schedule)}
+                                  className="p-2 text-neutral-500 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
+                                  title="Delete schedule"
+                                >
+                                  <Trash className="w-4 h-4" />
+                                </button>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
                   )}
                 </div>
 
-                {reportLoading ? (
-                  <div className="space-y-2">
-                    {Array.from({ length: 3 }).map((_, i) => (
-                      <div key={i} className="h-20 animate-pulse rounded-xl bg-neutral-100 dark:bg-neutral-800" />
-                    ))}
-                  </div>
-                ) : reportSchedules.length === 0 ? (
-                  <div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-500 dark:text-neutral-400 text-sm">
-                    No scheduled reports yet. Add a report to automatically receive analytics summaries.
-                  </div>
-                ) : (
-                  <div className="space-y-3">
-                    {reportSchedules.map((schedule) => (
-                      <div
-                        key={schedule.id}
-                        className={`rounded-xl border p-4 transition-colors ${
-                          schedule.enabled
-                            ? 'border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900/50'
-                            : 'border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/30 opacity-60'
-                        }`}
-                      >
-                        <div className="flex items-start justify-between gap-4">
-                          <div className="flex items-start gap-3 min-w-0">
-                            <div className="p-2 bg-neutral-800 rounded-lg mt-0.5">
-                              {CHANNEL_ICONS_LG[schedule.channel] || <WebhooksLogo className="w-5 h-5 text-neutral-400" />}
-                            </div>
-                            <div className="min-w-0">
-                              <div className="flex items-center gap-2 flex-wrap">
-                                <span className="font-medium text-neutral-900 dark:text-white">
-                                  {getChannelLabel(schedule.channel)}
-                                </span>
-                                <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-brand-orange/10 text-brand-orange">
-                                  {getFrequencyLabel(schedule.frequency)}
-                                </span>
-                                <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400">
-                                  {getReportTypeLabel(schedule.report_type)}
-                                </span>
-                              </div>
-                              <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1 truncate">
-                                {schedule.channel === 'email'
-                                  ? (schedule.channel_config as EmailConfig).recipients.join(', ')
-                                  : (schedule.channel_config as WebhookConfig).url}
-                              </p>
-                              <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-1">
-                                {getScheduleDescription(schedule)}
-                              </p>
-                              <div className="flex items-center gap-3 mt-1 text-xs text-neutral-400 dark:text-neutral-500">
-                                <span>
-                                  Last sent: {schedule.last_sent_at
-                                    ? formatDateTime(new Date(schedule.last_sent_at))
-                                    : 'Never'}
-                                </span>
-                              </div>
-                              {schedule.last_error && (
-                                <p className="text-xs text-red-500 dark:text-red-400 mt-1">
-                                  Error: {schedule.last_error}
-                                </p>
-                              )}
-                            </div>
-                          </div>
+                {/* Divider */}
+                <div className="border-t border-neutral-200 dark:border-neutral-800" />
 
-                          {canEdit && (
-                            <div className="flex items-center gap-2 flex-shrink-0">
-                              <button
-                                type="button"
-                                onClick={() => handleReportTest(schedule)}
-                                disabled={reportTesting === schedule.id}
-                                className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors disabled:opacity-50"
-                                title="Send test report"
-                              >
-                                {reportTesting === schedule.id ? (
-                                  <SpinnerGap className="w-4 h-4 animate-spin" />
-                                ) : (
-                                  <Play className="w-4 h-4" />
-                                )}
-                              </button>
-                              <button
-                                type="button"
-                                onClick={() => openEditSchedule(schedule)}
-                                className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
-                                title="Edit schedule"
-                              >
-                                <PencilSimple className="w-4 h-4" />
-                              </button>
-                              <label className="relative inline-flex items-center cursor-pointer">
-                                <input
-                                  type="checkbox"
-                                  checked={schedule.enabled}
-                                  onChange={() => handleReportToggle(schedule)}
-                                  className="sr-only peer"
-                                />
-                                <div className="w-9 h-5 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
-                              </label>
-                              <button
-                                type="button"
-                                onClick={() => handleReportDelete(schedule)}
-                                className="p-2 text-neutral-500 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
-                                title="Delete schedule"
-                              >
-                                <Trash className="w-4 h-4" />
-                              </button>
-                            </div>
-                          )}
-                        </div>
-                      </div>
-                    ))}
+                {/* Alerts subsection */}
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <h3 className="text-base font-medium text-neutral-900 dark:text-white">Alerts</h3>
+                      <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">Get notified when your site goes down or recovers.</p>
+                    </div>
+                    {canEdit && (
+                      <Button onClick={() => { setEditingAlert(null); resetAlertForm(); setAlertModalOpen(true) }}>
+                        Add Alert Channel
+                      </Button>
+                    )}
                   </div>
-                )}
+
+                  {alertLoading ? (
+                    <div className="space-y-2">
+                      {Array.from({ length: 2 }).map((_, i) => (
+                        <div key={i} className="h-20 animate-pulse rounded-xl bg-neutral-100 dark:bg-neutral-800" />
+                      ))}
+                    </div>
+                  ) : alertSchedules.length === 0 ? (
+                    <div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-500 dark:text-neutral-400 text-sm">
+                      No alert channels configured. Add a channel to receive uptime alerts when your site goes down or recovers.
+                    </div>
+                  ) : (
+                    <div className="space-y-3">
+                      {alertSchedules.map((schedule) => (
+                        <div
+                          key={schedule.id}
+                          className={`rounded-xl border p-4 transition-colors ${
+                            schedule.enabled
+                              ? 'border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900/50'
+                              : 'border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/30 opacity-60'
+                          }`}
+                        >
+                          <div className="flex items-start justify-between gap-4">
+                            <div className="flex items-start gap-3 min-w-0">
+                              <div className="p-2 bg-neutral-800 rounded-lg mt-0.5">
+                                {CHANNEL_ICONS_LG[schedule.channel] || <WebhooksLogo className="w-5 h-5 text-neutral-400" />}
+                              </div>
+                              <div className="min-w-0">
+                                <div className="flex items-center gap-2 flex-wrap">
+                                  <span className="font-medium text-neutral-900 dark:text-white">
+                                    {getChannelLabel(schedule.channel)}
+                                  </span>
+                                  <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-500">
+                                    Uptime Alert
+                                  </span>
+                                </div>
+                                <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1 truncate">
+                                  {schedule.channel === 'email'
+                                    ? (schedule.channel_config as EmailConfig).recipients.join(', ')
+                                    : (schedule.channel_config as WebhookConfig).url}
+                                </p>
+                                <div className="flex items-center gap-3 mt-1 text-xs text-neutral-400 dark:text-neutral-500">
+                                  <span>
+                                    Last sent: {schedule.last_sent_at
+                                      ? formatDateTime(new Date(schedule.last_sent_at))
+                                      : 'Never'}
+                                  </span>
+                                </div>
+                                {schedule.last_error && (
+                                  <p className="text-xs text-red-500 dark:text-red-400 mt-1">
+                                    Error: {schedule.last_error}
+                                  </p>
+                                )}
+                              </div>
+                            </div>
+
+                            {canEdit && (
+                              <div className="flex items-center gap-2 flex-shrink-0">
+                                <button
+                                  type="button"
+                                  onClick={() => handleAlertTest(schedule)}
+                                  disabled={alertTesting === schedule.id}
+                                  className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors disabled:opacity-50"
+                                  title="Send test alert"
+                                >
+                                  {alertTesting === schedule.id ? (
+                                    <SpinnerGap className="w-4 h-4 animate-spin" />
+                                  ) : (
+                                    <Play className="w-4 h-4" />
+                                  )}
+                                </button>
+                                <button
+                                  type="button"
+                                  onClick={() => openEditAlert(schedule)}
+                                  className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
+                                  title="Edit alert channel"
+                                >
+                                  <PencilSimple className="w-4 h-4" />
+                                </button>
+                                <label className="relative inline-flex items-center cursor-pointer">
+                                  <input
+                                    type="checkbox"
+                                    checked={schedule.enabled}
+                                    onChange={() => handleAlertToggle(schedule)}
+                                    className="sr-only peer"
+                                  />
+                                  <div className="w-9 h-5 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
+                                </label>
+                                <button
+                                  type="button"
+                                  onClick={() => handleAlertDelete(schedule)}
+                                  className="p-2 text-neutral-500 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
+                                  title="Delete alert channel"
+                                >
+                                  <Trash className="w-4 h-4" />
+                                </button>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
               </div>
             )}
 
@@ -2265,6 +2504,79 @@ export default function SiteSettingsPage() {
         </form>
       </Modal>
 
+      <Modal
+        isOpen={alertModalOpen}
+        onClose={() => setAlertModalOpen(false)}
+        title={editingAlert ? 'Edit alert channel' : 'Add alert channel'}
+      >
+        <form onSubmit={handleAlertSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Channel</label>
+            <div className="grid grid-cols-2 gap-2">
+              {(['email', 'slack', 'discord', 'webhook'] as const).map((ch) => (
+                <button
+                  key={ch}
+                  type="button"
+                  onClick={() => setAlertForm({ ...alertForm, channel: ch })}
+                  className={`flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-colors ${
+                    alertForm.channel === ch
+                      ? 'border-brand-orange bg-brand-orange/10 text-brand-orange'
+                      : 'border-neutral-200 dark:border-neutral-700 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-50 dark:hover:bg-neutral-800'
+                  }`}
+                >
+                  {CHANNEL_ICONS[ch]}
+                  {getChannelLabel(ch)}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {alertForm.channel === 'email' ? (
+            <div>
+              <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Recipients</label>
+              <input
+                type="text"
+                value={alertForm.recipients}
+                onChange={(e) => setAlertForm({ ...alertForm, recipients: e.target.value })}
+                placeholder="email1@example.com, email2@example.com"
+                className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white"
+                required
+              />
+              <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">Comma-separated email addresses.</p>
+            </div>
+          ) : (
+            <div>
+              <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
+                {alertForm.channel === 'slack' ? 'Slack Webhook URL' : alertForm.channel === 'discord' ? 'Discord Webhook URL' : 'Webhook URL'}
+              </label>
+              <input
+                type="url"
+                value={alertForm.webhookUrl}
+                onChange={(e) => setAlertForm({ ...alertForm, webhookUrl: e.target.value })}
+                placeholder="https://hooks.example.com/..."
+                className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white"
+                required
+              />
+            </div>
+          )}
+
+          <div className="p-3 rounded-lg bg-neutral-50 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-700">
+            <p className="text-xs text-neutral-500 dark:text-neutral-400">
+              Alerts are sent automatically when your site goes down or recovers. No schedule configuration needed.
+            </p>
+          </div>
+
+          <div className="flex justify-end gap-2 pt-2">
+            <Button type="button" variant="secondary" onClick={() => setAlertModalOpen(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" variant="primary" disabled={alertSaving}>
+              {alertSaving ? 'Saving...' : editingAlert ? 'Update' : 'Create'}
+            </Button>
+          </div>
+        </form>
+      </Modal>
+
       <VerificationModal
         isOpen={showVerificationModal}
         onClose={() => setShowVerificationModal(false)}
diff --git a/lib/api/report-schedules.ts b/lib/api/report-schedules.ts
index 685b06f..cc0cfdb 100644
--- a/lib/api/report-schedules.ts
+++ b/lib/api/report-schedules.ts
@@ -10,6 +10,7 @@ export interface ReportSchedule {
   timezone: string
   enabled: boolean
   report_type: 'summary' | 'pages' | 'sources' | 'goals'
+  purpose: 'report' | 'alert'
   send_hour: number
   send_day: number | null
   next_send_at: string | null
@@ -33,6 +34,7 @@ export interface CreateReportScheduleRequest {
   frequency: string
   timezone?: string
   report_type?: string
+  purpose?: 'report' | 'alert'
   send_hour?: number
   send_day?: number
 }
@@ -43,6 +45,7 @@ export interface UpdateReportScheduleRequest {
   frequency?: string
   timezone?: string
   report_type?: string
+  purpose?: 'report' | 'alert'
   enabled?: boolean
   send_hour?: number
   send_day?: number
@@ -73,6 +76,11 @@ export async function deleteReportSchedule(siteId: string, scheduleId: string):
   })
 }
 
+export async function listAlertSchedules(siteId: string): Promise<ReportSchedule[]> {
+  const res = await apiRequest<{ report_schedules: ReportSchedule[] }>(`/sites/${siteId}/report-schedules?purpose=alert`)
+  return res?.report_schedules ?? []
+}
+
 export async function testReportSchedule(siteId: string, scheduleId: string): Promise<void> {
   await apiRequest(`/sites/${siteId}/report-schedules/${scheduleId}/test`, {
     method: 'POST',
diff --git a/lib/swr/dashboard.ts b/lib/swr/dashboard.ts
index 60b0fdb..1962e67 100644
--- a/lib/swr/dashboard.ts
+++ b/lib/swr/dashboard.ts
@@ -32,7 +32,7 @@ import type { Site } from '@/lib/api/sites'
 import { listFunnels, type Funnel } from '@/lib/api/funnels'
 import { getUptimeStatus, type UptimeStatusResponse } from '@/lib/api/uptime'
 import { listGoals, type Goal } from '@/lib/api/goals'
-import { listReportSchedules, type ReportSchedule } from '@/lib/api/report-schedules'
+import { listReportSchedules, listAlertSchedules, type ReportSchedule } from '@/lib/api/report-schedules'
 import { listSessions, getBotFilterStats, type SessionSummary, type BotFilterStats } from '@/lib/api/bot-filter'
 import { getGSCStatus, getGSCOverview, getGSCTopQueries, getGSCTopPages, getGSCDailyTotals, getGSCNewQueries } from '@/lib/api/gsc'
 import type { GSCStatus, GSCOverview, GSCQueryResponse, GSCPageResponse, GSCDailyTotal, GSCNewQueries } from '@/lib/api/gsc'
@@ -81,6 +81,7 @@ const fetchers = {
   uptimeStatus: (siteId: string) => getUptimeStatus(siteId),
   goals: (siteId: string) => listGoals(siteId),
   reportSchedules: (siteId: string) => listReportSchedules(siteId),
+  alertSchedules: (siteId: string) => listAlertSchedules(siteId),
   gscStatus: (siteId: string) => getGSCStatus(siteId),
   gscOverview: (siteId: string, start: string, end: string) => getGSCOverview(siteId, start, end),
   gscTopQueries: (siteId: string, start: string, end: string, limit: number, offset: number) => getGSCTopQueries(siteId, start, end, limit, offset),
@@ -411,6 +412,19 @@ export function useReportSchedules(siteId: string) {
   )
 }
 
+// * Hook for alert schedules (uptime alerts)
+export function useAlertSchedules(siteId: string) {
+  return useSWR<ReportSchedule[]>(
+    siteId ? ['alertSchedules', siteId] : null,
+    () => fetchers.alertSchedules(siteId),
+    {
+      ...dashboardSWRConfig,
+      refreshInterval: 60 * 1000,
+      dedupingInterval: 10 * 1000,
+    }
+  )
+}
+
 // * Hook for GSC connection status
 export function useGSCStatus(siteId: string) {
   return useSWR<GSCStatus>(
-- 
2.49.1


From 780dd464a157a4d706ed92912d275ff591fc59fe Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 18:05:17 +0100
Subject: [PATCH 165/428] feat(pagespeed): add API client, SWR hooks, and
 sidebar navigation

- PageSpeed API client with types for config, checks, and audits
- SWR hooks: usePageSpeedConfig, usePageSpeedLatest, usePageSpeedHistory
- GaugeIcon added to sidebar under Infrastructure group
---
 components/dashboard/Sidebar.tsx |  2 +
 lib/api/pagespeed.ts             | 83 ++++++++++++++++++++++++++++++++
 lib/swr/dashboard.ts             | 31 ++++++++++++
 3 files changed, 116 insertions(+)
 create mode 100644 lib/api/pagespeed.ts

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 042ac0a..53ccc32 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -18,6 +18,7 @@ import {
   SearchIcon,
   CloudUploadIcon,
   HeartbeatIcon,
+  GaugeIcon,
   SettingsIcon,
   CollapseLeftIcon,
   CollapseRightIcon,
@@ -88,6 +89,7 @@ const NAV_GROUPS: NavGroup[] = [
     items: [
       { label: 'CDN', href: (id) => `/sites/${id}/cdn`, icon: CloudUploadIcon, matchPrefix: true },
       { label: 'Uptime', href: (id) => `/sites/${id}/uptime`, icon: HeartbeatIcon, matchPrefix: true },
+      { label: 'PageSpeed', href: (id) => `/sites/${id}/pagespeed`, icon: GaugeIcon, matchPrefix: true },
     ],
   },
 ]
diff --git a/lib/api/pagespeed.ts b/lib/api/pagespeed.ts
new file mode 100644
index 0000000..ede2fd7
--- /dev/null
+++ b/lib/api/pagespeed.ts
@@ -0,0 +1,83 @@
+import apiRequest from './client'
+
+// * Types for PageSpeed Insights monitoring
+
+export interface PageSpeedConfig {
+  site_id: string
+  enabled: boolean
+  frequency: 'daily' | 'weekly' | 'monthly'
+  url: string | null
+  next_check_at: string | null
+  created_at: string
+  updated_at: string
+}
+
+export interface AuditSummary {
+  id: string
+  title: string
+  description: string
+  score: number | null
+  display_value?: string
+  savings_ms?: number
+  category: 'opportunity' | 'diagnostic' | 'passed'
+}
+
+export interface PageSpeedCheck {
+  id: string
+  site_id: string
+  strategy: 'mobile' | 'desktop'
+  performance_score: number | null
+  accessibility_score: number | null
+  best_practices_score: number | null
+  seo_score: number | null
+  lcp_ms: number | null
+  cls: number | null
+  tbt_ms: number | null
+  fcp_ms: number | null
+  si_ms: number | null
+  tti_ms: number | null
+  audits: AuditSummary[] | null
+  triggered_by: 'scheduled' | 'manual'
+  checked_at: string
+}
+
+export async function getPageSpeedConfig(siteId: string): Promise<PageSpeedConfig> {
+  return apiRequest<PageSpeedConfig>(`/sites/${siteId}/pagespeed/config`)
+}
+
+export async function updatePageSpeedConfig(
+  siteId: string,
+  config: { enabled: boolean; frequency: string; url?: string }
+): Promise<PageSpeedConfig> {
+  return apiRequest<PageSpeedConfig>(`/sites/${siteId}/pagespeed/config`, {
+    method: 'PUT',
+    body: JSON.stringify(config),
+  })
+}
+
+export async function getPageSpeedLatest(siteId: string): Promise<PageSpeedCheck[]> {
+  const res = await apiRequest<{ checks: PageSpeedCheck[] }>(`/sites/${siteId}/pagespeed/latest`)
+  return res?.checks ?? []
+}
+
+export async function getPageSpeedHistory(
+  siteId: string,
+  strategy: 'mobile' | 'desktop' = 'mobile',
+  days = 90
+): Promise<PageSpeedCheck[]> {
+  const res = await apiRequest<{ checks: PageSpeedCheck[] }>(
+    `/sites/${siteId}/pagespeed/history?strategy=${strategy}&days=${days}`
+  )
+  return res?.checks ?? []
+}
+
+export async function getPageSpeedCheck(siteId: string, checkId: string): Promise<PageSpeedCheck> {
+  return apiRequest<PageSpeedCheck>(`/sites/${siteId}/pagespeed/checks/${checkId}`)
+}
+
+export async function triggerPageSpeedCheck(siteId: string): Promise<PageSpeedCheck[]> {
+  const res = await apiRequest<{ checks: PageSpeedCheck[] }>(`/sites/${siteId}/pagespeed/check`, {
+    method: 'POST',
+  })
+  return res?.checks ?? []
+}
diff --git a/lib/swr/dashboard.ts b/lib/swr/dashboard.ts
index 1962e67..b08feba 100644
--- a/lib/swr/dashboard.ts
+++ b/lib/swr/dashboard.ts
@@ -31,6 +31,7 @@ import { getSite } from '@/lib/api/sites'
 import type { Site } from '@/lib/api/sites'
 import { listFunnels, type Funnel } from '@/lib/api/funnels'
 import { getUptimeStatus, type UptimeStatusResponse } from '@/lib/api/uptime'
+import { getPageSpeedConfig, getPageSpeedLatest, getPageSpeedHistory, type PageSpeedConfig, type PageSpeedCheck } from '@/lib/api/pagespeed'
 import { listGoals, type Goal } from '@/lib/api/goals'
 import { listReportSchedules, listAlertSchedules, type ReportSchedule } from '@/lib/api/report-schedules'
 import { listSessions, getBotFilterStats, type SessionSummary, type BotFilterStats } from '@/lib/api/bot-filter'
@@ -79,6 +80,9 @@ const fetchers = {
     getJourneyEntryPoints(siteId, start, end),
   funnels: (siteId: string) => listFunnels(siteId),
   uptimeStatus: (siteId: string) => getUptimeStatus(siteId),
+  pageSpeedConfig: (siteId: string) => getPageSpeedConfig(siteId),
+  pageSpeedLatest: (siteId: string) => getPageSpeedLatest(siteId),
+  pageSpeedHistory: (siteId: string, strategy: 'mobile' | 'desktop', days: number) => getPageSpeedHistory(siteId, strategy, days),
   goals: (siteId: string) => listGoals(siteId),
   reportSchedules: (siteId: string) => listReportSchedules(siteId),
   alertSchedules: (siteId: string) => listAlertSchedules(siteId),
@@ -550,5 +554,32 @@ export function useBotFilterStats(siteId: string) {
   )
 }
 
+// * Hook for PageSpeed config
+export function usePageSpeedConfig(siteId: string) {
+  return useSWR<PageSpeedConfig>(
+    siteId ? ['pageSpeedConfig', siteId] : null,
+    () => fetchers.pageSpeedConfig(siteId),
+    { ...dashboardSWRConfig, refreshInterval: 0, dedupingInterval: 10 * 1000 }
+  )
+}
+
+// * Hook for latest PageSpeed checks (mobile + desktop)
+export function usePageSpeedLatest(siteId: string) {
+  return useSWR<PageSpeedCheck[]>(
+    siteId ? ['pageSpeedLatest', siteId] : null,
+    () => fetchers.pageSpeedLatest(siteId),
+    { ...dashboardSWRConfig, refreshInterval: 60 * 1000, dedupingInterval: 10 * 1000, keepPreviousData: true }
+  )
+}
+
+// * Hook for PageSpeed score history (trend chart)
+export function usePageSpeedHistory(siteId: string, strategy: 'mobile' | 'desktop', days = 90) {
+  return useSWR<PageSpeedCheck[]>(
+    siteId ? ['pageSpeedHistory', siteId, strategy, days] : null,
+    () => fetchers.pageSpeedHistory(siteId, strategy, days),
+    { ...dashboardSWRConfig, refreshInterval: 60 * 1000, dedupingInterval: 10 * 1000, keepPreviousData: true }
+  )
+}
+
 // * Re-export for convenience
 export { fetchers }
-- 
2.49.1


From 52906344cf1f05dbfc12e1d95d751045078cf039 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 18:13:08 +0100
Subject: [PATCH 166/428] feat(pagespeed): add PageSpeed page with gauges, CWV
 cards, chart, and diagnostics

- ScoreGauge SVG component with color-coded circular arcs
- Full page: disabled state, score overview, CWV metrics, trend chart
- Diagnostics accordion with opportunities/diagnostics/passed groups
- Mobile/desktop strategy toggle, manual check trigger
- Loading skeleton, frequency selector
---
 app/sites/[id]/pagespeed/page.tsx   | 489 ++++++++++++++++++++++++++++
 components/dashboard/Sidebar.tsx    |   2 +-
 components/pagespeed/ScoreGauge.tsx |  71 ++++
 3 files changed, 561 insertions(+), 1 deletion(-)
 create mode 100644 app/sites/[id]/pagespeed/page.tsx
 create mode 100644 components/pagespeed/ScoreGauge.tsx

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
new file mode 100644
index 0000000..cca1fdf
--- /dev/null
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -0,0 +1,489 @@
+'use client'
+
+import { useAuth } from '@/lib/auth/context'
+import { useEffect, useState } from 'react'
+import { useParams } from 'next/navigation'
+import { useSite, usePageSpeedConfig, usePageSpeedLatest, usePageSpeedHistory } from '@/lib/swr/dashboard'
+import { updatePageSpeedConfig, triggerPageSpeedCheck, type PageSpeedCheck, type AuditSummary } from '@/lib/api/pagespeed'
+import { toast, Button } from '@ciphera-net/ui'
+import ScoreGauge from '@/components/pagespeed/ScoreGauge'
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  ReferenceLine,
+} from 'recharts'
+import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from '@/components/charts'
+
+// * Chart configuration for score trend
+const chartConfig = {
+  score: { label: 'Performance', color: 'var(--chart-1)' },
+} satisfies ChartConfig
+
+// * Metric status thresholds (Google's Core Web Vitals thresholds)
+function getMetricStatus(metric: string, value: number | null): { label: string; color: string } {
+  if (value === null) return { label: '--', color: 'text-neutral-400' }
+  const thresholds: Record<string, [number, number]> = {
+    lcp: [2500, 4000],
+    cls: [0.1, 0.25],
+    tbt: [200, 600],
+    fcp: [1800, 3000],
+    si: [3400, 5800],
+    tti: [3800, 7300],
+  }
+  const [good, poor] = thresholds[metric] ?? [0, 0]
+  if (value <= good) return { label: 'Good', color: 'text-emerald-600 dark:text-emerald-400' }
+  if (value <= poor) return { label: 'Needs Improvement', color: 'text-amber-600 dark:text-amber-400' }
+  return { label: 'Poor', color: 'text-red-600 dark:text-red-400' }
+}
+
+// * Format metric values for display
+function formatMetricValue(metric: string, value: number | null): string {
+  if (value === null) return '--'
+  if (metric === 'cls') return value.toFixed(3)
+  if (value < 1000) return `${value}ms`
+  return `${(value / 1000).toFixed(1)}s`
+}
+
+// * Format time ago for last checked display
+function formatTimeAgo(dateString: string | null): string {
+  if (!dateString) return 'Never'
+  const date = new Date(dateString)
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffSec = Math.floor(diffMs / 1000)
+
+  if (diffSec < 60) return 'just now'
+  if (diffSec < 3600) return `${Math.floor(diffSec / 60)}m ago`
+  if (diffSec < 86400) return `${Math.floor(diffSec / 3600)}h ago`
+  return `${Math.floor(diffSec / 86400)}d ago`
+}
+
+// * Get dot color for audit items based on score
+function getAuditDotColor(score: number | null): string {
+  if (score === null) return 'bg-neutral-400'
+  if (score >= 0.9) return 'bg-emerald-500'
+  if (score >= 0.5) return 'bg-amber-500'
+  return 'bg-red-500'
+}
+
+// * Main PageSpeed page
+export default function PageSpeedPage() {
+  const { user } = useAuth()
+  const canEdit = user?.role === 'owner' || user?.role === 'admin'
+  const params = useParams()
+  const siteId = params.id as string
+
+  const { data: site } = useSite(siteId)
+  const { data: config, mutate: mutateConfig } = usePageSpeedConfig(siteId)
+  const { data: latestChecks, isLoading, mutate: mutateLatest } = usePageSpeedLatest(siteId)
+
+  const [strategy, setStrategy] = useState<'mobile' | 'desktop'>('mobile')
+  const [running, setRunning] = useState(false)
+  const [toggling, setToggling] = useState(false)
+  const [frequency, setFrequency] = useState<string>('weekly')
+
+  const { data: historyChecks } = usePageSpeedHistory(siteId, strategy)
+
+  // * Get the check for the current strategy
+  const currentCheck = latestChecks?.find(c => c.strategy === strategy) ?? null
+
+  // * Set document title
+  useEffect(() => {
+    if (site?.domain) document.title = `PageSpeed · ${site.domain} | Pulse`
+  }, [site?.domain])
+
+  // * Sync frequency from config when loaded
+  useEffect(() => {
+    if (config?.frequency) setFrequency(config.frequency)
+  }, [config?.frequency])
+
+  // * Toggle PageSpeed monitoring on/off
+  const handleToggle = async (enabled: boolean) => {
+    setToggling(true)
+    try {
+      await updatePageSpeedConfig(siteId, { enabled, frequency })
+      mutateConfig()
+      mutateLatest()
+      toast.success(enabled ? 'PageSpeed monitoring enabled' : 'PageSpeed monitoring disabled')
+    } catch {
+      toast.error('Failed to update PageSpeed monitoring')
+    } finally {
+      setToggling(false)
+    }
+  }
+
+  // * Trigger a manual PageSpeed check
+  const handleRunCheck = async () => {
+    setRunning(true)
+    try {
+      await triggerPageSpeedCheck(siteId)
+      mutateLatest()
+      toast.success('PageSpeed check complete')
+    } catch (err: any) {
+      toast.error(err?.message || 'Failed to run check')
+    } finally {
+      setRunning(false)
+    }
+  }
+
+  // * Loading state
+  if (isLoading && !latestChecks) return <PageSpeedSkeleton />
+  if (!site) return <div className="p-8 text-neutral-500">Site not found</div>
+
+  const enabled = config?.enabled ?? false
+
+  // * Disabled state — show empty state with enable toggle
+  if (!enabled) {
+    return (
+      <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">
+            PageSpeed
+          </h1>
+          <p className="text-sm text-neutral-500 dark:text-neutral-400">
+            Monitor your site&apos;s performance and Core Web Vitals
+          </p>
+        </div>
+
+        {/* Empty state */}
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-12 text-center">
+          <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center">
+            <svg className="w-8 h-8 text-neutral-500 dark:text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+          <h3 className="font-semibold text-neutral-900 dark:text-white mb-2">
+            PageSpeed monitoring is disabled
+          </h3>
+          <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-6 max-w-md mx-auto">
+            Enable PageSpeed monitoring to track your site&apos;s performance scores, Core Web Vitals, and get actionable improvement suggestions.
+          </p>
+
+          {/* Frequency selector */}
+          <div className="flex items-center justify-center gap-3 mb-6">
+            <label className="text-sm text-neutral-600 dark:text-neutral-400">Check frequency:</label>
+            <select
+              value={frequency}
+              onChange={(e) => setFrequency(e.target.value)}
+              className="text-sm border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-100"
+            >
+              <option value="daily">Daily</option>
+              <option value="weekly">Weekly</option>
+              <option value="monthly">Monthly</option>
+            </select>
+          </div>
+
+          {canEdit && (
+            <Button
+              onClick={() => handleToggle(true)}
+              disabled={toggling}
+            >
+              {toggling ? 'Enabling...' : 'Enable PageSpeed Monitoring'}
+            </Button>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  // * Prepare chart data from history
+  const chartData = (historyChecks ?? []).map(c => ({
+    date: new Date(c.checked_at).toLocaleDateString('en-GB', { day: '2-digit', month: 'short' }),
+    score: c.performance_score,
+  }))
+
+  // * Parse audits into groups
+  const audits = currentCheck?.audits ?? []
+  const opportunities = audits
+    .filter(a => a.category === 'opportunity')
+    .sort((a, b) => (b.savings_ms ?? 0) - (a.savings_ms ?? 0))
+  const diagnostics = audits.filter(a => a.category === 'diagnostic')
+  const passed = audits.filter(a => a.category === 'passed')
+
+  // * Core Web Vitals metrics
+  const metrics = [
+    { key: 'lcp', label: 'Largest Contentful Paint', value: currentCheck?.lcp_ms ?? null },
+    { key: 'cls', label: 'Cumulative Layout Shift', value: currentCheck?.cls ?? null },
+    { key: 'tbt', label: 'Total Blocking Time', value: currentCheck?.tbt_ms ?? null },
+    { key: 'fcp', label: 'First Contentful Paint', value: currentCheck?.fcp_ms ?? null },
+    { key: 'si', label: 'Speed Index', value: currentCheck?.si_ms ?? null },
+    { key: 'tti', label: 'Time to Interactive', value: currentCheck?.tti_ms ?? null },
+  ]
+
+  // * Enabled state — show full PageSpeed dashboard
+  return (
+    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
+      {/* Header */}
+      <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">
+            PageSpeed
+          </h1>
+          <p className="text-sm text-neutral-500 dark:text-neutral-400">
+            Performance scores and Core Web Vitals for {site.domain}
+          </p>
+        </div>
+        <div className="flex items-center gap-3">
+          {/* Mobile / Desktop toggle */}
+          <div className="flex gap-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg p-1">
+            <button
+              onClick={() => setStrategy('mobile')}
+              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
+                strategy === 'mobile'
+                  ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
+                  : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300'
+              }`}
+            >
+              Mobile
+            </button>
+            <button
+              onClick={() => setStrategy('desktop')}
+              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
+                strategy === 'desktop'
+                  ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
+                  : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300'
+              }`}
+            >
+              Desktop
+            </button>
+          </div>
+
+          {canEdit && (
+            <>
+              <Button
+                onClick={handleRunCheck}
+                disabled={running}
+              >
+                {running ? 'Running...' : 'Run Check'}
+              </Button>
+              <Button
+                variant="secondary"
+                onClick={() => handleToggle(false)}
+                disabled={toggling}
+                className="text-sm"
+              >
+                {toggling ? 'Disabling...' : 'Disable'}
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Section 1 — Score Overview */}
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 flex justify-center">
+          <ScoreGauge score={currentCheck?.performance_score ?? null} label="Performance" />
+        </div>
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 flex justify-center">
+          <ScoreGauge score={currentCheck?.accessibility_score ?? null} label="Accessibility" />
+        </div>
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 flex justify-center">
+          <ScoreGauge score={currentCheck?.best_practices_score ?? null} label="Best Practices" />
+        </div>
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 flex justify-center">
+          <ScoreGauge score={currentCheck?.seo_score ?? null} label="SEO" />
+        </div>
+      </div>
+
+      {/* Last checked info */}
+      <div className="flex items-center gap-3 mb-6 text-sm text-neutral-500 dark:text-neutral-400">
+        {currentCheck?.checked_at && (
+          <span>Last checked {formatTimeAgo(currentCheck.checked_at)}</span>
+        )}
+        {config?.frequency && (
+          <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400">
+            {config.frequency}
+          </span>
+        )}
+      </div>
+
+      {/* Section 2 — Core Web Vitals */}
+      <div className="mb-6">
+        <h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-3">
+          Core Web Vitals
+        </h3>
+        <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
+          {metrics.map(({ key, label, value }) => {
+            const status = getMetricStatus(key, value)
+            return (
+              <div
+                key={key}
+                className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5"
+              >
+                <div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-2">
+                  {label}
+                </div>
+                <div className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">
+                  {formatMetricValue(key, value)}
+                </div>
+                <span className={`text-xs font-medium ${status.color}`}>
+                  {status.label}
+                </span>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* Section 3 — Score Trend Chart */}
+      {chartData.length >= 2 && (
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 mb-6">
+          <h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-3">
+            Performance Score Trend
+          </h3>
+          <ChartContainer config={chartConfig} className="h-48">
+            <AreaChart accessibilityLayer data={chartData} margin={{ top: 5, right: 5, left: -20, bottom: 0 }}>
+              <defs>
+                <linearGradient id="scoreGradient" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stopColor="var(--color-score)" stopOpacity={0.3} />
+                  <stop offset="100%" stopColor="var(--color-score)" stopOpacity={0.02} />
+                </linearGradient>
+              </defs>
+              <CartesianGrid
+                strokeDasharray="3 3"
+                stroke="var(--chart-grid)"
+                strokeOpacity={0.5}
+                vertical={false}
+              />
+              <XAxis
+                dataKey="date"
+                tick={{ fontSize: 10, fill: 'var(--chart-axis)' }}
+                tickLine={false}
+                axisLine={false}
+                interval="preserveStartEnd"
+              />
+              <YAxis
+                domain={[0, 100]}
+                tick={{ fontSize: 10, fill: 'var(--chart-axis)' }}
+                tickLine={false}
+                axisLine={false}
+              />
+              <ReferenceLine y={90} stroke="#0cce6b" strokeDasharray="4 4" strokeOpacity={0.6} />
+              <ReferenceLine y={50} stroke="#ff4e42" strokeDasharray="4 4" strokeOpacity={0.6} />
+              <ChartTooltip
+                content={
+                  <ChartTooltipContent
+                    className="text-xs"
+                    labelKey="date"
+                    formatter={(value) => <span className="font-semibold">{value}</span>}
+                  />
+                }
+              />
+              <Area
+                type="monotone"
+                dataKey="score"
+                stroke="var(--color-score)"
+                strokeWidth={2}
+                fill="url(#scoreGradient)"
+                dot={false}
+                activeDot={{ r: 4, fill: 'var(--color-score)', strokeWidth: 0 }}
+              />
+            </AreaChart>
+          </ChartContainer>
+        </div>
+      )}
+
+      {/* Section 4 — Diagnostics Accordion */}
+      {audits.length > 0 && (
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5">
+          <h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-4">
+            Diagnostics
+          </h3>
+          <div className="space-y-4">
+            {/* Opportunities */}
+            {opportunities.length > 0 && (
+              <details open>
+                <summary className="cursor-pointer text-sm font-semibold text-neutral-900 dark:text-white select-none">
+                  Opportunities ({opportunities.length})
+                </summary>
+                <div className="mt-2 space-y-2">
+                  {opportunities.map(audit => (
+                    <div key={audit.id} className="flex items-center gap-2 py-1.5 px-2 rounded-lg hover:bg-neutral-50 dark:hover:bg-neutral-800">
+                      <div className={`w-2 h-2 rounded-full flex-shrink-0 ${getAuditDotColor(audit.score)}`} />
+                      <span className="font-medium text-sm text-neutral-900 dark:text-white">{audit.title}</span>
+                      {audit.display_value && (
+                        <span className="text-xs text-neutral-500 dark:text-neutral-400">{audit.display_value}</span>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </details>
+            )}
+
+            {/* Diagnostics */}
+            {diagnostics.length > 0 && (
+              <details open>
+                <summary className="cursor-pointer text-sm font-semibold text-neutral-900 dark:text-white select-none">
+                  Diagnostics ({diagnostics.length})
+                </summary>
+                <div className="mt-2 space-y-2">
+                  {diagnostics.map(audit => (
+                    <div key={audit.id} className="flex items-center gap-2 py-1.5 px-2 rounded-lg hover:bg-neutral-50 dark:hover:bg-neutral-800">
+                      <div className={`w-2 h-2 rounded-full flex-shrink-0 ${getAuditDotColor(audit.score)}`} />
+                      <span className="font-medium text-sm text-neutral-900 dark:text-white">{audit.title}</span>
+                      {audit.display_value && (
+                        <span className="text-xs text-neutral-500 dark:text-neutral-400">{audit.display_value}</span>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </details>
+            )}
+
+            {/* Passed Audits */}
+            {passed.length > 0 && (
+              <details>
+                <summary className="cursor-pointer text-sm font-semibold text-neutral-900 dark:text-white select-none">
+                  Passed Audits ({passed.length})
+                </summary>
+                <div className="mt-2 space-y-2">
+                  {passed.map(audit => (
+                    <div key={audit.id} className="flex items-center gap-2 py-1.5 px-2 rounded-lg hover:bg-neutral-50 dark:hover:bg-neutral-800">
+                      <div className={`w-2 h-2 rounded-full flex-shrink-0 ${getAuditDotColor(audit.score)}`} />
+                      <span className="font-medium text-sm text-neutral-900 dark:text-white">{audit.title}</span>
+                      {audit.display_value && (
+                        <span className="text-xs text-neutral-500 dark:text-neutral-400">{audit.display_value}</span>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </details>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// * Skeleton loading state
+function PageSpeedSkeleton() {
+  return (
+    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 space-y-6">
+      <div className="animate-pulse space-y-2 mb-8">
+        <div className="h-8 w-48 bg-neutral-200 dark:bg-neutral-700 rounded" />
+        <div className="h-4 w-72 bg-neutral-200 dark:bg-neutral-700 rounded" />
+      </div>
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        {[...Array(4)].map((_, i) => (
+          <div key={i} className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 animate-pulse">
+            <div className="w-24 h-24 rounded-full bg-neutral-200 dark:bg-neutral-700 mx-auto mb-3" />
+            <div className="h-4 w-20 bg-neutral-200 dark:bg-neutral-700 rounded mx-auto" />
+          </div>
+        ))}
+      </div>
+      <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
+        {[...Array(6)].map((_, i) => (
+          <div key={i} className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 animate-pulse">
+            <div className="h-4 w-24 bg-neutral-200 dark:bg-neutral-700 rounded mb-2" />
+            <div className="h-6 w-16 bg-neutral-200 dark:bg-neutral-700 rounded" />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 53ccc32..284208d 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -10,6 +10,7 @@ import { getUserOrganizations, switchContext, type OrganizationMember } from '@/
 import { setSessionAction } from '@/app/actions/auth'
 import { logger } from '@/lib/utils/logger'
 import { FAVICON_SERVICE_URL } from '@/lib/utils/icons'
+import { Gauge as GaugeIcon } from '@phosphor-icons/react'
 import {
   LayoutDashboardIcon,
   PathIcon,
@@ -18,7 +19,6 @@ import {
   SearchIcon,
   CloudUploadIcon,
   HeartbeatIcon,
-  GaugeIcon,
   SettingsIcon,
   CollapseLeftIcon,
   CollapseRightIcon,
diff --git a/components/pagespeed/ScoreGauge.tsx b/components/pagespeed/ScoreGauge.tsx
new file mode 100644
index 0000000..78886ca
--- /dev/null
+++ b/components/pagespeed/ScoreGauge.tsx
@@ -0,0 +1,71 @@
+'use client'
+
+interface ScoreGaugeProps {
+  score: number | null
+  label: string
+}
+
+const RADIUS = 44
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS
+
+function getColor(score: number): string {
+  if (score >= 90) return '#0cce6b'
+  if (score >= 50) return '#ffa400'
+  return '#ff4e42'
+}
+
+export default function ScoreGauge({ score, label }: ScoreGaugeProps) {
+  const hasScore = score !== null && score !== undefined
+  const displayScore = hasScore ? Math.round(score) : null
+  const offset = hasScore ? CIRCUMFERENCE * (1 - score / 100) : CIRCUMFERENCE
+  const color = hasScore ? getColor(score) : '#6b7280'
+
+  return (
+    <div className="flex flex-col items-center gap-2">
+      <div className="relative w-[120px] h-[120px]">
+        <svg
+          className="w-full h-full -rotate-90"
+          viewBox="0 0 100 100"
+        >
+          {/* Track */}
+          <circle
+            cx="50"
+            cy="50"
+            r={RADIUS}
+            fill="none"
+            stroke="currentColor"
+            className="text-neutral-200 dark:text-neutral-700"
+            strokeWidth="8"
+          />
+          {/* Filled arc */}
+          <circle
+            cx="50"
+            cy="50"
+            r={RADIUS}
+            fill="none"
+            stroke={color}
+            strokeWidth="8"
+            strokeLinecap="round"
+            strokeDasharray={CIRCUMFERENCE}
+            strokeDashoffset={offset}
+            style={{ transition: 'stroke-dashoffset 0.6s ease' }}
+          />
+        </svg>
+        {/* Score text */}
+        <div className="absolute inset-0 flex items-center justify-center">
+          <span
+            className="text-2xl font-bold"
+            style={{ color: hasScore ? color : undefined }}
+          >
+            {displayScore !== null ? displayScore : (
+              <span className="text-neutral-400 dark:text-neutral-500">--</span>
+            )}
+          </span>
+        </div>
+      </div>
+      <span className="text-sm font-medium text-neutral-600 dark:text-neutral-400">
+        {label}
+      </span>
+    </div>
+  )
+}
-- 
2.49.1


From d1af25266b85abb823c660086e9cae7adf3c718b Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 18:28:06 +0100
Subject: [PATCH 167/428] fix(pagespeed): increase fetch timeout for manual PSI
 checks to 120s

PSI checks run mobile + desktop sequentially (up to 60s total).
The default 30s client timeout was causing false network errors.
---
 lib/api/pagespeed.ts | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/lib/api/pagespeed.ts b/lib/api/pagespeed.ts
index ede2fd7..c67f8a7 100644
--- a/lib/api/pagespeed.ts
+++ b/lib/api/pagespeed.ts
@@ -76,8 +76,16 @@ export async function getPageSpeedCheck(siteId: string, checkId: string): Promis
 }
 
 export async function triggerPageSpeedCheck(siteId: string): Promise<PageSpeedCheck[]> {
-  const res = await apiRequest<{ checks: PageSpeedCheck[] }>(`/sites/${siteId}/pagespeed/check`, {
-    method: 'POST',
-  })
-  return res?.checks ?? []
+  // * PSI checks take 10-30s per strategy (mobile + desktop sequential = up to 60s)
+  const controller = new AbortController()
+  const timeoutId = setTimeout(() => controller.abort(), 120_000)
+  try {
+    const res = await apiRequest<{ checks: PageSpeedCheck[] }>(`/sites/${siteId}/pagespeed/check`, {
+      method: 'POST',
+      signal: controller.signal,
+    })
+    return res?.checks ?? []
+  } finally {
+    clearTimeout(timeoutId)
+  }
 }
-- 
2.49.1


From 2fd9bf82f121e6ebf53afcc988cdb2c90503277c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 18:35:17 +0100
Subject: [PATCH 168/428] fix(pagespeed): poll for results after async check
 trigger

Backend now returns 202 immediately. Frontend polls every 5s for up
to 2 minutes until new results appear, then shows success toast.
---
 app/sites/[id]/pagespeed/page.tsx | 42 +++++++++++++++++++++++++++----
 lib/api/pagespeed.ts              | 17 +++----------
 2 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index cca1fdf..6d7c894 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useAuth } from '@/lib/auth/context'
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef, useCallback } from 'react'
 import { useParams } from 'next/navigation'
 import { useSite, usePageSpeedConfig, usePageSpeedLatest, usePageSpeedHistory } from '@/lib/swr/dashboard'
 import { updatePageSpeedConfig, triggerPageSpeedCheck, type PageSpeedCheck, type AuditSummary } from '@/lib/api/pagespeed'
@@ -116,15 +116,47 @@ export default function PageSpeedPage() {
   }
 
   // * Trigger a manual PageSpeed check
+  // * Poll for results after triggering an async check
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null)
+  const stopPolling = useCallback(() => {
+    if (pollRef.current) {
+      clearInterval(pollRef.current)
+      pollRef.current = null
+    }
+  }, [])
+
+  // * Clean up polling on unmount
+  useEffect(() => () => stopPolling(), [stopPolling])
+
   const handleRunCheck = async () => {
     setRunning(true)
     try {
       await triggerPageSpeedCheck(siteId)
-      mutateLatest()
-      toast.success('PageSpeed check complete')
+      toast.success('PageSpeed check started — results will appear in 30-60 seconds')
+
+      // * Poll every 5s for up to 2 minutes until new results appear
+      const startedAt = Date.now()
+      const initialCheckedAt = latestChecks?.[0]?.checked_at
+
+      stopPolling()
+      pollRef.current = setInterval(async () => {
+        const elapsed = Date.now() - startedAt
+        if (elapsed > 120_000) {
+          stopPolling()
+          setRunning(false)
+          toast.error('Check is taking longer than expected. Results will appear when ready.')
+          return
+        }
+        const freshData = await mutateLatest()
+        const freshCheckedAt = freshData?.[0]?.checked_at
+        if (freshCheckedAt && freshCheckedAt !== initialCheckedAt) {
+          stopPolling()
+          setRunning(false)
+          toast.success('PageSpeed check complete')
+        }
+      }, 5000)
     } catch (err: any) {
-      toast.error(err?.message || 'Failed to run check')
-    } finally {
+      toast.error(err?.message || 'Failed to start check')
       setRunning(false)
     }
   }
diff --git a/lib/api/pagespeed.ts b/lib/api/pagespeed.ts
index c67f8a7..5650a9c 100644
--- a/lib/api/pagespeed.ts
+++ b/lib/api/pagespeed.ts
@@ -75,17 +75,8 @@ export async function getPageSpeedCheck(siteId: string, checkId: string): Promis
   return apiRequest<PageSpeedCheck>(`/sites/${siteId}/pagespeed/checks/${checkId}`)
 }
 
-export async function triggerPageSpeedCheck(siteId: string): Promise<PageSpeedCheck[]> {
-  // * PSI checks take 10-30s per strategy (mobile + desktop sequential = up to 60s)
-  const controller = new AbortController()
-  const timeoutId = setTimeout(() => controller.abort(), 120_000)
-  try {
-    const res = await apiRequest<{ checks: PageSpeedCheck[] }>(`/sites/${siteId}/pagespeed/check`, {
-      method: 'POST',
-      signal: controller.signal,
-    })
-    return res?.checks ?? []
-  } finally {
-    clearTimeout(timeoutId)
-  }
+// * Triggers an async PageSpeed check. Returns immediately (202).
+// * Caller should poll getPageSpeedLatest() for results.
+export async function triggerPageSpeedCheck(siteId: string): Promise<void> {
+  await apiRequest(`/sites/${siteId}/pagespeed/check`, { method: 'POST' })
 }
-- 
2.49.1


From b0e6db36a198647f48259654bd251bde3b4d8646 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 18:54:45 +0100
Subject: [PATCH 169/428] feat(pagespeed): add screenshot display and
 expandable diagnostics

- Page screenshot thumbnail next to score gauges
- Expandable audit rows with description and detail items table
- Shows URLs, HTML snippets, wasted bytes/ms for each failing element
- AuditRow component replaces flat diagnostic rows
---
 app/sites/[id]/pagespeed/page.tsx | 141 +++++++++++++++++++++---------
 lib/api/pagespeed.ts              |   5 ++
 2 files changed, 104 insertions(+), 42 deletions(-)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index 6d7c894..8e86056 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -306,19 +306,34 @@ export default function PageSpeedPage() {
       </div>
 
       {/* Section 1 — Score Overview */}
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 flex justify-center">
-          <ScoreGauge score={currentCheck?.performance_score ?? null} label="Performance" />
-        </div>
-        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 flex justify-center">
-          <ScoreGauge score={currentCheck?.accessibility_score ?? null} label="Accessibility" />
-        </div>
-        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 flex justify-center">
-          <ScoreGauge score={currentCheck?.best_practices_score ?? null} label="Best Practices" />
-        </div>
-        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 flex justify-center">
-          <ScoreGauge score={currentCheck?.seo_score ?? null} label="SEO" />
+      <div className="flex flex-col lg:flex-row gap-6 mb-6">
+        {/* Score gauges */}
+        <div className="flex-1">
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+            <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 flex justify-center">
+              <ScoreGauge score={currentCheck?.performance_score ?? null} label="Performance" />
+            </div>
+            <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 flex justify-center">
+              <ScoreGauge score={currentCheck?.accessibility_score ?? null} label="Accessibility" />
+            </div>
+            <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 flex justify-center">
+              <ScoreGauge score={currentCheck?.best_practices_score ?? null} label="Best Practices" />
+            </div>
+            <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 flex justify-center">
+              <ScoreGauge score={currentCheck?.seo_score ?? null} label="SEO" />
+            </div>
+          </div>
         </div>
+        {/* Screenshot */}
+        {currentCheck?.screenshot && (
+          <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-4 flex items-center justify-center lg:w-72">
+            <img
+              src={currentCheck.screenshot}
+              alt={`${strategy} screenshot`}
+              className="rounded-lg max-h-48 object-contain"
+            />
+          </div>
+        )}
       </div>
 
       {/* Last checked info */}
@@ -432,16 +447,8 @@ export default function PageSpeedPage() {
                 <summary className="cursor-pointer text-sm font-semibold text-neutral-900 dark:text-white select-none">
                   Opportunities ({opportunities.length})
                 </summary>
-                <div className="mt-2 space-y-2">
-                  {opportunities.map(audit => (
-                    <div key={audit.id} className="flex items-center gap-2 py-1.5 px-2 rounded-lg hover:bg-neutral-50 dark:hover:bg-neutral-800">
-                      <div className={`w-2 h-2 rounded-full flex-shrink-0 ${getAuditDotColor(audit.score)}`} />
-                      <span className="font-medium text-sm text-neutral-900 dark:text-white">{audit.title}</span>
-                      {audit.display_value && (
-                        <span className="text-xs text-neutral-500 dark:text-neutral-400">{audit.display_value}</span>
-                      )}
-                    </div>
-                  ))}
+                <div className="mt-2 space-y-1">
+                  {opportunities.map(audit => <AuditRow key={audit.id} audit={audit} />)}
                 </div>
               </details>
             )}
@@ -452,16 +459,8 @@ export default function PageSpeedPage() {
                 <summary className="cursor-pointer text-sm font-semibold text-neutral-900 dark:text-white select-none">
                   Diagnostics ({diagnostics.length})
                 </summary>
-                <div className="mt-2 space-y-2">
-                  {diagnostics.map(audit => (
-                    <div key={audit.id} className="flex items-center gap-2 py-1.5 px-2 rounded-lg hover:bg-neutral-50 dark:hover:bg-neutral-800">
-                      <div className={`w-2 h-2 rounded-full flex-shrink-0 ${getAuditDotColor(audit.score)}`} />
-                      <span className="font-medium text-sm text-neutral-900 dark:text-white">{audit.title}</span>
-                      {audit.display_value && (
-                        <span className="text-xs text-neutral-500 dark:text-neutral-400">{audit.display_value}</span>
-                      )}
-                    </div>
-                  ))}
+                <div className="mt-2 space-y-1">
+                  {diagnostics.map(audit => <AuditRow key={audit.id} audit={audit} />)}
                 </div>
               </details>
             )}
@@ -472,16 +471,8 @@ export default function PageSpeedPage() {
                 <summary className="cursor-pointer text-sm font-semibold text-neutral-900 dark:text-white select-none">
                   Passed Audits ({passed.length})
                 </summary>
-                <div className="mt-2 space-y-2">
-                  {passed.map(audit => (
-                    <div key={audit.id} className="flex items-center gap-2 py-1.5 px-2 rounded-lg hover:bg-neutral-50 dark:hover:bg-neutral-800">
-                      <div className={`w-2 h-2 rounded-full flex-shrink-0 ${getAuditDotColor(audit.score)}`} />
-                      <span className="font-medium text-sm text-neutral-900 dark:text-white">{audit.title}</span>
-                      {audit.display_value && (
-                        <span className="text-xs text-neutral-500 dark:text-neutral-400">{audit.display_value}</span>
-                      )}
-                    </div>
-                  ))}
+                <div className="mt-2 space-y-1">
+                  {passed.map(audit => <AuditRow key={audit.id} audit={audit} />)}
                 </div>
               </details>
             )}
@@ -492,6 +483,72 @@ export default function PageSpeedPage() {
   )
 }
 
+// * Expandable audit row with description and detail items
+function AuditRow({ audit }: { audit: AuditSummary }) {
+  return (
+    <details className="group">
+      <summary className="flex items-center gap-2 py-1.5 px-2 rounded-lg hover:bg-neutral-50 dark:hover:bg-neutral-800 cursor-pointer list-none">
+        <div className={`w-2 h-2 rounded-full flex-shrink-0 ${getAuditDotColor(audit.score)}`} />
+        <span className="font-medium text-sm text-neutral-900 dark:text-white">{audit.title}</span>
+        {audit.display_value && (
+          <span className="text-xs text-neutral-500 dark:text-neutral-400">{audit.display_value}</span>
+        )}
+        <svg className="w-4 h-4 ml-auto text-neutral-400 transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+        </svg>
+      </summary>
+      <div className="pl-6 pr-2 pb-2 pt-1">
+        {/* Description */}
+        {audit.description && (
+          <p className="text-xs text-neutral-500 dark:text-neutral-400 mb-2">{audit.description}</p>
+        )}
+        {/* Items table */}
+        {audit.details && Array.isArray(audit.details) && audit.details.length > 0 && (
+          <div className="overflow-x-auto">
+            <table className="w-full text-xs">
+              <tbody className="divide-y divide-neutral-100 dark:divide-neutral-800">
+                {audit.details.slice(0, 10).map((item: Record<string, any>, idx: number) => (
+                  <tr key={idx} className="text-neutral-600 dark:text-neutral-400">
+                    {/* URL or label */}
+                    <td className="py-1.5 pr-3 max-w-xs truncate">
+                      {item.url ? (
+                        <span className="font-mono text-xs break-all">{item.url}</span>
+                      ) : item.node?.snippet ? (
+                        <code className="text-xs bg-neutral-100 dark:bg-neutral-800 px-1 py-0.5 rounded break-all">{item.node.snippet}</code>
+                      ) : item.label || item.groupLabel || item.statistic || ''}
+                    </td>
+                    {/* Wasted bytes */}
+                    {item.wastedBytes != null && (
+                      <td className="py-1.5 pr-3 text-right whitespace-nowrap text-amber-600 dark:text-amber-400">
+                        {item.wastedBytes < 1024 ? `${item.wastedBytes} B` : `${(item.wastedBytes / 1024).toFixed(1)} KiB`}
+                      </td>
+                    )}
+                    {/* Total bytes */}
+                    {item.totalBytes != null && !item.wastedBytes && (
+                      <td className="py-1.5 pr-3 text-right whitespace-nowrap">
+                        {item.totalBytes < 1024 ? `${item.totalBytes} B` : `${(item.totalBytes / 1024).toFixed(1)} KiB`}
+                      </td>
+                    )}
+                    {/* Wasted ms */}
+                    {item.wastedMs != null && (
+                      <td className="py-1.5 text-right whitespace-nowrap text-amber-600 dark:text-amber-400">
+                        {item.wastedMs < 1000 ? `${Math.round(item.wastedMs)}ms` : `${(item.wastedMs / 1000).toFixed(1)}s`}
+                      </td>
+                    )}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+            {audit.details.length > 10 && (
+              <p className="text-xs text-neutral-400 mt-1">+ {audit.details.length - 10} more items</p>
+            )}
+          </div>
+        )}
+      </div>
+    </details>
+  )
+}
+
 // * Skeleton loading state
 function PageSpeedSkeleton() {
   return (
diff --git a/lib/api/pagespeed.ts b/lib/api/pagespeed.ts
index 5650a9c..d3f4654 100644
--- a/lib/api/pagespeed.ts
+++ b/lib/api/pagespeed.ts
@@ -20,8 +20,12 @@ export interface AuditSummary {
   display_value?: string
   savings_ms?: number
   category: 'opportunity' | 'diagnostic' | 'passed'
+  details?: AuditDetailItem[]
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AuditDetailItem = Record<string, any>
+
 export interface PageSpeedCheck {
   id: string
   site_id: string
@@ -37,6 +41,7 @@ export interface PageSpeedCheck {
   si_ms: number | null
   tti_ms: number | null
   audits: AuditSummary[] | null
+  screenshot?: string | null
   triggered_by: 'scheduled' | 'manual'
   checked_at: string
 }
-- 
2.49.1


From 6b00b8b04a3dbf518a909047bce3ae5bfed48188 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 19:10:47 +0100
Subject: [PATCH 170/428] redesign(pagespeed): full page redesign inspired by
 pagespeed.web.dev

- Hero card: large performance gauge + compact inline scores + screenshot
- Single metrics card with 2x3 grid and colored status dots
- Flat diagnostics list sorted by impact with severity indicators
- ScoreGauge accepts size prop for flexible gauge sizing
- Unicode severity markers (triangle/square/circle) per audit
---
 app/sites/[id]/pagespeed/page.tsx   | 266 +++++++++++++++++-----------
 components/pagespeed/ScoreGauge.tsx |   9 +-
 2 files changed, 164 insertions(+), 111 deletions(-)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index 8e86056..df1f307 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -230,22 +230,51 @@ export default function PageSpeedPage() {
 
   // * Parse audits into groups
   const audits = currentCheck?.audits ?? []
-  const opportunities = audits
-    .filter(a => a.category === 'opportunity')
-    .sort((a, b) => (b.savings_ms ?? 0) - (a.savings_ms ?? 0))
-  const diagnostics = audits.filter(a => a.category === 'diagnostic')
+  const failingAudits = audits
+    .filter(a => a.category !== 'passed')
+    .sort((a, b) => {
+      // Opportunities first (sorted by savings_ms desc), then diagnostics
+      if (a.category === 'opportunity' && b.category !== 'opportunity') return -1
+      if (a.category !== 'opportunity' && b.category === 'opportunity') return 1
+      if (a.category === 'opportunity' && b.category === 'opportunity') {
+        return (b.savings_ms ?? 0) - (a.savings_ms ?? 0)
+      }
+      return 0
+    })
   const passed = audits.filter(a => a.category === 'passed')
 
   // * Core Web Vitals metrics
   const metrics = [
-    { key: 'lcp', label: 'Largest Contentful Paint', value: currentCheck?.lcp_ms ?? null },
-    { key: 'cls', label: 'Cumulative Layout Shift', value: currentCheck?.cls ?? null },
-    { key: 'tbt', label: 'Total Blocking Time', value: currentCheck?.tbt_ms ?? null },
     { key: 'fcp', label: 'First Contentful Paint', value: currentCheck?.fcp_ms ?? null },
+    { key: 'lcp', label: 'Largest Contentful Paint', value: currentCheck?.lcp_ms ?? null },
+    { key: 'tbt', label: 'Total Blocking Time', value: currentCheck?.tbt_ms ?? null },
+    { key: 'cls', label: 'Cumulative Layout Shift', value: currentCheck?.cls ?? null },
     { key: 'si', label: 'Speed Index', value: currentCheck?.si_ms ?? null },
     { key: 'tti', label: 'Time to Interactive', value: currentCheck?.tti_ms ?? null },
   ]
 
+  // * Compact score helper for the hero section
+  const compactScores = [
+    { label: 'Accessibility', score: currentCheck?.accessibility_score ?? null },
+    { label: 'Best Practices', score: currentCheck?.best_practices_score ?? null },
+    { label: 'SEO', score: currentCheck?.seo_score ?? null },
+  ]
+
+  function getScoreColor(score: number | null): string {
+    if (score === null) return '#6b7280'
+    if (score >= 90) return '#0cce6b'
+    if (score >= 50) return '#ffa400'
+    return '#ff4e42'
+  }
+
+  function getMetricDotColor(metric: string, value: number | null): string {
+    if (value === null) return 'bg-neutral-400'
+    const status = getMetricStatus(metric, value)
+    if (status.label === 'Good') return 'bg-emerald-500'
+    if (status.label === 'Needs Improvement') return 'bg-amber-500'
+    return 'bg-red-500'
+  }
+
   // * Enabled state — show full PageSpeed dashboard
   return (
     <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
@@ -305,81 +334,101 @@ export default function PageSpeedPage() {
         </div>
       </div>
 
-      {/* Section 1 — Score Overview */}
-      <div className="flex flex-col lg:flex-row gap-6 mb-6">
-        {/* Score gauges */}
-        <div className="flex-1">
-          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-            <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 flex justify-center">
-              <ScoreGauge score={currentCheck?.performance_score ?? null} label="Performance" />
+      {/* Section 1 — Hero Card: Score Gauge + Compact Scores + Screenshot */}
+      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8 mb-6">
+        <div className="flex flex-col md:flex-row items-center md:items-start gap-8">
+          {/* Left — Large Performance Gauge */}
+          <div className="flex-shrink-0">
+            <ScoreGauge score={currentCheck?.performance_score ?? null} label="Performance" size={160} />
+          </div>
+
+          {/* Center — Compact Scores + Meta */}
+          <div className="flex-1 flex flex-col justify-center gap-4 min-w-0">
+            <div className="flex flex-col gap-3">
+              {compactScores.map(({ label, score }) => (
+                <div key={label} className="flex items-center gap-3">
+                  <span
+                    className="inline-block w-3 h-3 rounded-full flex-shrink-0"
+                    style={{ backgroundColor: getScoreColor(score) }}
+                  />
+                  <span className="text-xl font-bold text-neutral-900 dark:text-white tabular-nums" style={{ color: getScoreColor(score) }}>
+                    {score !== null ? Math.round(score) : '--'}
+                  </span>
+                  <span className="text-sm text-neutral-600 dark:text-neutral-400">
+                    {label}
+                  </span>
+                </div>
+              ))}
             </div>
-            <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 flex justify-center">
-              <ScoreGauge score={currentCheck?.accessibility_score ?? null} label="Accessibility" />
+
+            {/* Last checked + frequency */}
+            <div className="flex items-center gap-3 text-sm text-neutral-500 dark:text-neutral-400 mt-1">
+              {currentCheck?.checked_at && (
+                <span>Last checked {formatTimeAgo(currentCheck.checked_at)}</span>
+              )}
+              {config?.frequency && (
+                <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400">
+                  {config.frequency}
+                </span>
+              )}
             </div>
-            <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 flex justify-center">
-              <ScoreGauge score={currentCheck?.best_practices_score ?? null} label="Best Practices" />
-            </div>
-            <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 flex justify-center">
-              <ScoreGauge score={currentCheck?.seo_score ?? null} label="SEO" />
+
+            {/* Score Legend */}
+            <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-neutral-500 dark:text-neutral-400">
+              <span className="flex items-center gap-1.5">
+                <span className="inline-block w-2.5 h-2.5 rounded-full bg-red-500" />
+                0&ndash;49 Poor
+              </span>
+              <span className="flex items-center gap-1.5">
+                <span className="inline-block w-2.5 h-2.5 rounded-full bg-amber-500" />
+                50&ndash;89 Needs Improvement
+              </span>
+              <span className="flex items-center gap-1.5">
+                <span className="inline-block w-2.5 h-2.5 rounded-full bg-emerald-500" />
+                90&ndash;100 Good
+              </span>
             </div>
           </div>
+
+          {/* Right — Screenshot */}
+          {currentCheck?.screenshot && (
+            <div className="flex-shrink-0 flex items-center justify-center">
+              <img
+                src={currentCheck.screenshot}
+                alt={`${strategy} screenshot`}
+                className="rounded-lg max-h-48 w-auto border border-neutral-200 dark:border-neutral-700 object-contain"
+              />
+            </div>
+          )}
         </div>
-        {/* Screenshot */}
-        {currentCheck?.screenshot && (
-          <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-4 flex items-center justify-center lg:w-72">
-            <img
-              src={currentCheck.screenshot}
-              alt={`${strategy} screenshot`}
-              className="rounded-lg max-h-48 object-contain"
-            />
-          </div>
-        )}
       </div>
 
-      {/* Last checked info */}
-      <div className="flex items-center gap-3 mb-6 text-sm text-neutral-500 dark:text-neutral-400">
-        {currentCheck?.checked_at && (
-          <span>Last checked {formatTimeAgo(currentCheck.checked_at)}</span>
-        )}
-        {config?.frequency && (
-          <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400">
-            {config.frequency}
-          </span>
-        )}
-      </div>
-
-      {/* Section 2 — Core Web Vitals */}
-      <div className="mb-6">
-        <h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-3">
-          Core Web Vitals
+      {/* Section 2 — Metrics Card */}
+      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8 mb-6">
+        <h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-5">
+          Metrics
         </h3>
-        <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
-          {metrics.map(({ key, label, value }) => {
-            const status = getMetricStatus(key, value)
-            return (
-              <div
-                key={key}
-                className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5"
-              >
-                <div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-2">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-6">
+          {metrics.map(({ key, label, value }) => (
+            <div key={key} className="flex items-start gap-3">
+              <span className={`mt-1.5 inline-block w-2.5 h-2.5 rounded-full flex-shrink-0 ${getMetricDotColor(key, value)}`} />
+              <div>
+                <div className="text-sm text-neutral-500 dark:text-neutral-400">
                   {label}
                 </div>
-                <div className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">
+                <div className="text-2xl font-bold text-neutral-900 dark:text-white tabular-nums">
                   {formatMetricValue(key, value)}
                 </div>
-                <span className={`text-xs font-medium ${status.color}`}>
-                  {status.label}
-                </span>
               </div>
-            )
-          })}
+            </div>
+          ))}
         </div>
       </div>
 
       {/* Section 3 — Score Trend Chart */}
       {chartData.length >= 2 && (
-        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 mb-6">
-          <h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-3">
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8 mb-6">
+          <h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-4">
             Performance Score Trend
           </h3>
           <ChartContainer config={chartConfig} className="h-48">
@@ -434,73 +483,74 @@ export default function PageSpeedPage() {
         </div>
       )}
 
-      {/* Section 4 — Diagnostics Accordion */}
+      {/* Section 4 — Diagnostics */}
       {audits.length > 0 && (
-        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5">
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8">
           <h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-4">
             Diagnostics
           </h3>
-          <div className="space-y-4">
-            {/* Opportunities */}
-            {opportunities.length > 0 && (
-              <details open>
-                <summary className="cursor-pointer text-sm font-semibold text-neutral-900 dark:text-white select-none">
-                  Opportunities ({opportunities.length})
-                </summary>
-                <div className="mt-2 space-y-1">
-                  {opportunities.map(audit => <AuditRow key={audit.id} audit={audit} />)}
-                </div>
-              </details>
-            )}
 
-            {/* Diagnostics */}
-            {diagnostics.length > 0 && (
-              <details open>
-                <summary className="cursor-pointer text-sm font-semibold text-neutral-900 dark:text-white select-none">
-                  Diagnostics ({diagnostics.length})
-                </summary>
-                <div className="mt-2 space-y-1">
-                  {diagnostics.map(audit => <AuditRow key={audit.id} audit={audit} />)}
-                </div>
-              </details>
-            )}
+          {/* Failing audits — flat list sorted by impact */}
+          {failingAudits.length > 0 && (
+            <div className="divide-y divide-neutral-100 dark:divide-neutral-800">
+              {failingAudits.map(audit => <AuditRow key={audit.id} audit={audit} />)}
+            </div>
+          )}
 
-            {/* Passed Audits */}
-            {passed.length > 0 && (
-              <details>
-                <summary className="cursor-pointer text-sm font-semibold text-neutral-900 dark:text-white select-none">
-                  Passed Audits ({passed.length})
-                </summary>
-                <div className="mt-2 space-y-1">
-                  {passed.map(audit => <AuditRow key={audit.id} audit={audit} />)}
-                </div>
-              </details>
-            )}
-          </div>
+          {/* Passed audits — collapsed */}
+          {passed.length > 0 && (
+            <details className="mt-4">
+              <summary className="cursor-pointer text-sm font-medium text-neutral-500 dark:text-neutral-400 select-none hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors">
+                <span className="ml-1">{passed.length} passed audit{passed.length !== 1 ? 's' : ''}</span>
+              </summary>
+              <div className="mt-2 divide-y divide-neutral-100 dark:divide-neutral-800">
+                {passed.map(audit => <AuditRow key={audit.id} audit={audit} />)}
+              </div>
+            </details>
+          )}
         </div>
       )}
     </div>
   )
 }
 
+// * Severity indicator based on audit score (pagespeed.web.dev style)
+function AuditSeverityIcon({ score }: { score: number | null }) {
+  if (score === null || score < 0.5) {
+    // Red triangle for poor / unknown
+    return <span className="text-red-500 text-sm leading-none flex-shrink-0" aria-label="Poor">&#9650;</span>
+  }
+  if (score < 0.9) {
+    // Amber square for needs improvement
+    return <span className="text-amber-500 text-sm leading-none flex-shrink-0" aria-label="Needs Improvement">&#9632;</span>
+  }
+  // Green circle for good
+  return <span className="text-emerald-500 text-sm leading-none flex-shrink-0" aria-label="Good">&#9679;</span>
+}
+
 // * Expandable audit row with description and detail items
 function AuditRow({ audit }: { audit: AuditSummary }) {
   return (
     <details className="group">
-      <summary className="flex items-center gap-2 py-1.5 px-2 rounded-lg hover:bg-neutral-50 dark:hover:bg-neutral-800 cursor-pointer list-none">
-        <div className={`w-2 h-2 rounded-full flex-shrink-0 ${getAuditDotColor(audit.score)}`} />
-        <span className="font-medium text-sm text-neutral-900 dark:text-white">{audit.title}</span>
+      <summary className="flex items-center gap-3 py-3 px-2 rounded-lg hover:bg-neutral-50 dark:hover:bg-neutral-800/50 cursor-pointer list-none">
+        <AuditSeverityIcon score={audit.score} />
+        <span className="font-medium text-sm text-neutral-900 dark:text-white flex-1 min-w-0 truncate">{audit.title}</span>
         {audit.display_value && (
-          <span className="text-xs text-neutral-500 dark:text-neutral-400">{audit.display_value}</span>
+          <span className="text-sm font-medium text-neutral-500 dark:text-neutral-400 flex-shrink-0 tabular-nums">{audit.display_value}</span>
         )}
-        <svg className="w-4 h-4 ml-auto text-neutral-400 transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        {audit.savings_ms != null && audit.savings_ms > 0 && !audit.display_value && (
+          <span className="text-sm font-medium text-amber-600 dark:text-amber-400 flex-shrink-0 tabular-nums">
+            {audit.savings_ms < 1000 ? `${Math.round(audit.savings_ms)}ms` : `${(audit.savings_ms / 1000).toFixed(1)}s`}
+          </span>
+        )}
+        <svg className="w-4 h-4 text-neutral-400 transition-transform group-open:rotate-180 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
           <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
         </svg>
       </summary>
-      <div className="pl-6 pr-2 pb-2 pt-1">
+      <div className="pl-8 pr-2 pb-3 pt-1">
         {/* Description */}
         {audit.description && (
-          <p className="text-xs text-neutral-500 dark:text-neutral-400 mb-2">{audit.description}</p>
+          <p className="text-xs text-neutral-500 dark:text-neutral-400 mb-3 leading-relaxed">{audit.description}</p>
         )}
         {/* Items table */}
         {audit.details && Array.isArray(audit.details) && audit.details.length > 0 && (
diff --git a/components/pagespeed/ScoreGauge.tsx b/components/pagespeed/ScoreGauge.tsx
index 78886ca..7b9ceb4 100644
--- a/components/pagespeed/ScoreGauge.tsx
+++ b/components/pagespeed/ScoreGauge.tsx
@@ -3,6 +3,7 @@
 interface ScoreGaugeProps {
   score: number | null
   label: string
+  size?: number
 }
 
 const RADIUS = 44
@@ -14,15 +15,17 @@ function getColor(score: number): string {
   return '#ff4e42'
 }
 
-export default function ScoreGauge({ score, label }: ScoreGaugeProps) {
+export default function ScoreGauge({ score, label, size = 120 }: ScoreGaugeProps) {
   const hasScore = score !== null && score !== undefined
   const displayScore = hasScore ? Math.round(score) : null
   const offset = hasScore ? CIRCUMFERENCE * (1 - score / 100) : CIRCUMFERENCE
   const color = hasScore ? getColor(score) : '#6b7280'
 
+  const fontSize = size >= 160 ? 'text-4xl' : 'text-2xl'
+
   return (
     <div className="flex flex-col items-center gap-2">
-      <div className="relative w-[120px] h-[120px]">
+      <div className="relative" style={{ width: size, height: size }}>
         <svg
           className="w-full h-full -rotate-90"
           viewBox="0 0 100 100"
@@ -54,7 +57,7 @@ export default function ScoreGauge({ score, label }: ScoreGaugeProps) {
         {/* Score text */}
         <div className="absolute inset-0 flex items-center justify-center">
           <span
-            className="text-2xl font-bold"
+            className={`${fontSize} font-bold`}
             style={{ color: hasScore ? color : undefined }}
           >
             {displayScore !== null ? displayScore : (
-- 
2.49.1


From 50960d0556e0a42ac473f6e1a4489ebb9a6bb6b3 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 19:18:03 +0100
Subject: [PATCH 171/428] feat(pagespeed): render element screenshots in
 expandable audit items
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Shows node screenshots, labels, HTML snippets, and URLs in audit
detail rows — matching pagespeed.web.dev's failing elements display.
---
 app/sites/[id]/pagespeed/page.tsx | 89 ++++++++++++++++++-------------
 1 file changed, 53 insertions(+), 36 deletions(-)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index df1f307..843a396 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -552,43 +552,60 @@ function AuditRow({ audit }: { audit: AuditSummary }) {
         {audit.description && (
           <p className="text-xs text-neutral-500 dark:text-neutral-400 mb-3 leading-relaxed">{audit.description}</p>
         )}
-        {/* Items table */}
+        {/* Items list */}
         {audit.details && Array.isArray(audit.details) && audit.details.length > 0 && (
-          <div className="overflow-x-auto">
-            <table className="w-full text-xs">
-              <tbody className="divide-y divide-neutral-100 dark:divide-neutral-800">
-                {audit.details.slice(0, 10).map((item: Record<string, any>, idx: number) => (
-                  <tr key={idx} className="text-neutral-600 dark:text-neutral-400">
-                    {/* URL or label */}
-                    <td className="py-1.5 pr-3 max-w-xs truncate">
-                      {item.url ? (
-                        <span className="font-mono text-xs break-all">{item.url}</span>
-                      ) : item.node?.snippet ? (
-                        <code className="text-xs bg-neutral-100 dark:bg-neutral-800 px-1 py-0.5 rounded break-all">{item.node.snippet}</code>
-                      ) : item.label || item.groupLabel || item.statistic || ''}
-                    </td>
-                    {/* Wasted bytes */}
-                    {item.wastedBytes != null && (
-                      <td className="py-1.5 pr-3 text-right whitespace-nowrap text-amber-600 dark:text-amber-400">
-                        {item.wastedBytes < 1024 ? `${item.wastedBytes} B` : `${(item.wastedBytes / 1024).toFixed(1)} KiB`}
-                      </td>
-                    )}
-                    {/* Total bytes */}
-                    {item.totalBytes != null && !item.wastedBytes && (
-                      <td className="py-1.5 pr-3 text-right whitespace-nowrap">
-                        {item.totalBytes < 1024 ? `${item.totalBytes} B` : `${(item.totalBytes / 1024).toFixed(1)} KiB`}
-                      </td>
-                    )}
-                    {/* Wasted ms */}
-                    {item.wastedMs != null && (
-                      <td className="py-1.5 text-right whitespace-nowrap text-amber-600 dark:text-amber-400">
-                        {item.wastedMs < 1000 ? `${Math.round(item.wastedMs)}ms` : `${(item.wastedMs / 1000).toFixed(1)}s`}
-                      </td>
-                    )}
-                  </tr>
-                ))}
-              </tbody>
-            </table>
+          <div className="space-y-2">
+            {audit.details.slice(0, 10).map((item: Record<string, any>, idx: number) => (
+              <div key={idx} className="flex items-start gap-3 py-2 border-b border-neutral-100 dark:border-neutral-800 last:border-0 text-xs text-neutral-600 dark:text-neutral-400">
+                {/* Element screenshot */}
+                {item.node?.screenshot?.data && (
+                  <img
+                    src={item.node.screenshot.data}
+                    alt=""
+                    className="w-20 h-14 object-contain rounded border border-neutral-200 dark:border-neutral-700 flex-shrink-0 bg-neutral-50 dark:bg-neutral-800"
+                  />
+                )}
+                {/* Content */}
+                <div className="flex-1 min-w-0">
+                  {/* Label / node explanation */}
+                  {(item.node?.nodeLabel || item.label || item.groupLabel) && (
+                    <div className="font-medium text-neutral-900 dark:text-white text-xs mb-0.5">
+                      {item.node?.nodeLabel || item.label || item.groupLabel}
+                    </div>
+                  )}
+                  {/* URL */}
+                  {item.url && (
+                    <div className="font-mono text-xs text-neutral-500 dark:text-neutral-400 break-all">{item.url}</div>
+                  )}
+                  {/* HTML snippet */}
+                  {item.node?.snippet && (
+                    <code className="text-xs bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded break-all mt-1 inline-block">{item.node.snippet}</code>
+                  )}
+                  {/* Statistic-type items */}
+                  {!item.url && !item.node && item.statistic && (
+                    <span>{item.statistic}</span>
+                  )}
+                </div>
+                {/* Metrics on the right */}
+                <div className="flex-shrink-0 text-right space-y-0.5">
+                  {item.wastedBytes != null && (
+                    <div className="text-amber-600 dark:text-amber-400 whitespace-nowrap">
+                      {item.wastedBytes < 1024 ? `${item.wastedBytes} B` : `${(item.wastedBytes / 1024).toFixed(1)} KiB`}
+                    </div>
+                  )}
+                  {item.totalBytes != null && !item.wastedBytes && (
+                    <div className="whitespace-nowrap">
+                      {item.totalBytes < 1024 ? `${item.totalBytes} B` : `${(item.totalBytes / 1024).toFixed(1)} KiB`}
+                    </div>
+                  )}
+                  {item.wastedMs != null && (
+                    <div className="text-amber-600 dark:text-amber-400 whitespace-nowrap">
+                      {item.wastedMs < 1000 ? `${Math.round(item.wastedMs)}ms` : `${(item.wastedMs / 1000).toFixed(1)}s`}
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
             {audit.details.length > 10 && (
               <p className="text-xs text-neutral-400 mt-1">+ {audit.details.length - 10} more items</p>
             )}
-- 
2.49.1


From fcbf21b71523bf91a55502d0448266e4403ab32f Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 19:43:44 +0100
Subject: [PATCH 172/428] feat(pagespeed): render page load filmstrip between
 hero and metrics

Horizontal scrollable filmstrip showing page rendering progression
with timing labels. Appears between the score hero and metrics card.
---
 app/sites/[id]/pagespeed/page.tsx | 20 ++++++++++++++++++++
 lib/api/pagespeed.ts              |  6 ++++++
 2 files changed, 26 insertions(+)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index 843a396..33d5f3e 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -403,6 +403,26 @@ export default function PageSpeedPage() {
         </div>
       </div>
 
+      {/* Filmstrip — page load progression */}
+      {currentCheck?.filmstrip && currentCheck.filmstrip.length > 0 && (
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 mb-6">
+          <div className="flex items-center overflow-x-auto gap-1">
+            {currentCheck.filmstrip.map((frame, idx) => (
+              <div key={idx} className="flex-shrink-0 text-center">
+                <img
+                  src={frame.data}
+                  alt={`${frame.timing}ms`}
+                  className="h-24 rounded border border-neutral-200 dark:border-neutral-700 object-contain bg-white"
+                />
+                <span className="text-[10px] text-neutral-400 mt-1 block">
+                  {frame.timing < 1000 ? `${frame.timing}ms` : `${(frame.timing / 1000).toFixed(1)}s`}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
       {/* Section 2 — Metrics Card */}
       <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8 mb-6">
         <h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-5">
diff --git a/lib/api/pagespeed.ts b/lib/api/pagespeed.ts
index d3f4654..f3d811e 100644
--- a/lib/api/pagespeed.ts
+++ b/lib/api/pagespeed.ts
@@ -26,6 +26,11 @@ export interface AuditSummary {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type AuditDetailItem = Record<string, any>
 
+export interface FilmstripFrame {
+  timing: number
+  data: string
+}
+
 export interface PageSpeedCheck {
   id: string
   site_id: string
@@ -42,6 +47,7 @@ export interface PageSpeedCheck {
   tti_ms: number | null
   audits: AuditSummary[] | null
   screenshot?: string | null
+  filmstrip?: FilmstripFrame[] | null
   triggered_by: 'scheduled' | 'manual'
   checked_at: string
 }
-- 
2.49.1


From 8649f37bb964a84bfbd62dc6fb45b550cea8c186 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 19:52:49 +0100
Subject: [PATCH 173/428] feat(pagespeed): split diagnostics by category
 (Performance, Accessibility, Best Practices, SEO)

Each Lighthouse category gets its own card with failing audits sorted
by impact and collapsed passed audits. Matches pagespeed.web.dev layout.
---
 app/sites/[id]/pagespeed/page.tsx | 84 +++++++++++++++++++------------
 lib/api/pagespeed.ts              |  1 +
 2 files changed, 52 insertions(+), 33 deletions(-)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index 33d5f3e..c0b0f34 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -228,21 +228,32 @@ export default function PageSpeedPage() {
     score: c.performance_score,
   }))
 
-  // * Parse audits into groups
+  // * Parse audits into groups by Lighthouse category
   const audits = currentCheck?.audits ?? []
-  const failingAudits = audits
-    .filter(a => a.category !== 'passed')
-    .sort((a, b) => {
-      // Opportunities first (sorted by savings_ms desc), then diagnostics
-      if (a.category === 'opportunity' && b.category !== 'opportunity') return -1
-      if (a.category !== 'opportunity' && b.category === 'opportunity') return 1
-      if (a.category === 'opportunity' && b.category === 'opportunity') {
-        return (b.savings_ms ?? 0) - (a.savings_ms ?? 0)
-      }
-      return 0
-    })
   const passed = audits.filter(a => a.category === 'passed')
 
+  const categoryGroups = [
+    { key: 'performance', label: 'Performance' },
+    { key: 'accessibility', label: 'Accessibility' },
+    { key: 'best-practices', label: 'Best Practices' },
+    { key: 'seo', label: 'SEO' },
+  ]
+
+  // * Build per-category failing audits, sorted by impact
+  const auditsByGroup: Record<string, typeof audits> = {}
+  for (const group of categoryGroups) {
+    auditsByGroup[group.key] = audits
+      .filter(a => a.category !== 'passed' && a.group === group.key)
+      .sort((a, b) => {
+        if (a.category === 'opportunity' && b.category !== 'opportunity') return -1
+        if (a.category !== 'opportunity' && b.category === 'opportunity') return 1
+        if (a.category === 'opportunity' && b.category === 'opportunity') {
+          return (b.savings_ms ?? 0) - (a.savings_ms ?? 0)
+        }
+        return 0
+      })
+  }
+
   // * Core Web Vitals metrics
   const metrics = [
     { key: 'fcp', label: 'First Contentful Paint', value: currentCheck?.fcp_ms ?? null },
@@ -503,31 +514,38 @@ export default function PageSpeedPage() {
         </div>
       )}
 
-      {/* Section 4 — Diagnostics */}
+      {/* Section 4 — Diagnostics by Category */}
       {audits.length > 0 && (
-        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8">
-          <h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-4">
-            Diagnostics
-          </h3>
+        <div className="space-y-6">
+          {categoryGroups.map(group => {
+            const groupAudits = auditsByGroup[group.key] ?? []
+            const groupPassed = passed.filter(a => a.group === group.key)
+            if (groupAudits.length === 0 && groupPassed.length === 0) return null
+            return (
+              <div key={group.key} className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8">
+                <h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-4">
+                  {group.label}
+                </h3>
 
-          {/* Failing audits — flat list sorted by impact */}
-          {failingAudits.length > 0 && (
-            <div className="divide-y divide-neutral-100 dark:divide-neutral-800">
-              {failingAudits.map(audit => <AuditRow key={audit.id} audit={audit} />)}
-            </div>
-          )}
+                {groupAudits.length > 0 && (
+                  <div className="divide-y divide-neutral-100 dark:divide-neutral-800">
+                    {groupAudits.map(audit => <AuditRow key={audit.id} audit={audit} />)}
+                  </div>
+                )}
 
-          {/* Passed audits — collapsed */}
-          {passed.length > 0 && (
-            <details className="mt-4">
-              <summary className="cursor-pointer text-sm font-medium text-neutral-500 dark:text-neutral-400 select-none hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors">
-                <span className="ml-1">{passed.length} passed audit{passed.length !== 1 ? 's' : ''}</span>
-              </summary>
-              <div className="mt-2 divide-y divide-neutral-100 dark:divide-neutral-800">
-                {passed.map(audit => <AuditRow key={audit.id} audit={audit} />)}
+                {groupPassed.length > 0 && (
+                  <details className="mt-4">
+                    <summary className="cursor-pointer text-sm font-medium text-neutral-500 dark:text-neutral-400 select-none hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors">
+                      <span className="ml-1">{groupPassed.length} passed audit{groupPassed.length !== 1 ? 's' : ''}</span>
+                    </summary>
+                    <div className="mt-2 divide-y divide-neutral-100 dark:divide-neutral-800">
+                      {groupPassed.map(audit => <AuditRow key={audit.id} audit={audit} />)}
+                    </div>
+                  </details>
+                )}
               </div>
-            </details>
-          )}
+            )
+          })}
         </div>
       )}
     </div>
diff --git a/lib/api/pagespeed.ts b/lib/api/pagespeed.ts
index f3d811e..b036d52 100644
--- a/lib/api/pagespeed.ts
+++ b/lib/api/pagespeed.ts
@@ -20,6 +20,7 @@ export interface AuditSummary {
   display_value?: string
   savings_ms?: number
   category: 'opportunity' | 'diagnostic' | 'passed'
+  group?: string // "performance", "accessibility", "best-practices", "seo"
   details?: AuditDetailItem[]
 }
 
-- 
2.49.1


From dd0700cbea403ed99444e1c5accdeb5df75fcb07 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 19:56:00 +0100
Subject: [PATCH 174/428] fix(pagespeed): poll silently without triggering SWR
 re-renders

Use direct API fetch for polling instead of mutateLatest() which was
causing the page to flicker and clear data every 5 seconds. SWR cache
is only updated once when new results arrive.
---
 app/sites/[id]/pagespeed/page.tsx | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index c0b0f34..081ae72 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -4,7 +4,7 @@ import { useAuth } from '@/lib/auth/context'
 import { useEffect, useState, useRef, useCallback } from 'react'
 import { useParams } from 'next/navigation'
 import { useSite, usePageSpeedConfig, usePageSpeedLatest, usePageSpeedHistory } from '@/lib/swr/dashboard'
-import { updatePageSpeedConfig, triggerPageSpeedCheck, type PageSpeedCheck, type AuditSummary } from '@/lib/api/pagespeed'
+import { updatePageSpeedConfig, triggerPageSpeedCheck, getPageSpeedLatest, type PageSpeedCheck, type AuditSummary } from '@/lib/api/pagespeed'
 import { toast, Button } from '@ciphera-net/ui'
 import ScoreGauge from '@/components/pagespeed/ScoreGauge'
 import {
@@ -116,7 +116,6 @@ export default function PageSpeedPage() {
   }
 
   // * Trigger a manual PageSpeed check
-  // * Poll for results after triggering an async check
   const pollRef = useRef<ReturnType<typeof setInterval> | null>(null)
   const stopPolling = useCallback(() => {
     if (pollRef.current) {
@@ -125,7 +124,6 @@ export default function PageSpeedPage() {
     }
   }, [])
 
-  // * Clean up polling on unmount
   useEffect(() => () => stopPolling(), [stopPolling])
 
   const handleRunCheck = async () => {
@@ -134,25 +132,29 @@ export default function PageSpeedPage() {
       await triggerPageSpeedCheck(siteId)
       toast.success('PageSpeed check started — results will appear in 30-60 seconds')
 
-      // * Poll every 5s for up to 2 minutes until new results appear
-      const startedAt = Date.now()
+      // * Poll silently without triggering SWR re-renders.
+      // * Fetch latest directly and only update SWR cache once when new data arrives.
       const initialCheckedAt = latestChecks?.[0]?.checked_at
+      const startedAt = Date.now()
 
       stopPolling()
       pollRef.current = setInterval(async () => {
-        const elapsed = Date.now() - startedAt
-        if (elapsed > 120_000) {
+        if (Date.now() - startedAt > 120_000) {
           stopPolling()
           setRunning(false)
           toast.error('Check is taking longer than expected. Results will appear when ready.')
           return
         }
-        const freshData = await mutateLatest()
-        const freshCheckedAt = freshData?.[0]?.checked_at
-        if (freshCheckedAt && freshCheckedAt !== initialCheckedAt) {
-          stopPolling()
-          setRunning(false)
-          toast.success('PageSpeed check complete')
+        try {
+          const fresh = await getPageSpeedLatest(siteId)
+          if (fresh?.[0]?.checked_at && fresh[0].checked_at !== initialCheckedAt) {
+            stopPolling()
+            setRunning(false)
+            mutateLatest() // * Single SWR revalidation when new data is ready
+            toast.success('PageSpeed check complete')
+          }
+        } catch {
+          // * Silent — keep polling
         }
       }, 5000)
     } catch (err: any) {
-- 
2.49.1


From 783530940eb38cba142becf7cd0de4ccf25b2463 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 20:19:07 +0100
Subject: [PATCH 175/428] polish(pagespeed): design consistency pass

- Filmstrip: dark mode bg fix, consistent card padding, scroll fade
- Metrics: font-semibold to match uptime page
- Hero: tighter compact scores, smaller legend, centered alignment
- Chart: hide x-axis when single day, height matches uptime (h-40)
- Diagnostics: hide categories with zero failures, muted display values
- Skeleton: matches new hero layout
---
 app/sites/[id]/pagespeed/page.tsx | 89 ++++++++++++++++++-------------
 1 file changed, 52 insertions(+), 37 deletions(-)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index 081ae72..ed2c8b2 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -229,6 +229,9 @@ export default function PageSpeedPage() {
     date: new Date(c.checked_at).toLocaleDateString('en-GB', { day: '2-digit', month: 'short' }),
     score: c.performance_score,
   }))
+  // * Check if all chart labels are the same (single day of data)
+  const uniqueDates = new Set(chartData.map(d => d.date))
+  const hideXAxis = uniqueDates.size <= 1
 
   // * Parse audits into groups by Lighthouse category
   const audits = currentCheck?.audits ?? []
@@ -349,7 +352,7 @@ export default function PageSpeedPage() {
 
       {/* Section 1 — Hero Card: Score Gauge + Compact Scores + Screenshot */}
       <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8 mb-6">
-        <div className="flex flex-col md:flex-row items-center md:items-start gap-8">
+        <div className="flex flex-col md:flex-row items-center gap-8">
           {/* Left — Large Performance Gauge */}
           <div className="flex-shrink-0">
             <ScoreGauge score={currentCheck?.performance_score ?? null} label="Performance" size={160} />
@@ -357,17 +360,17 @@ export default function PageSpeedPage() {
 
           {/* Center — Compact Scores + Meta */}
           <div className="flex-1 flex flex-col justify-center gap-4 min-w-0">
-            <div className="flex flex-col gap-3">
+            <div className="flex flex-col gap-2">
               {compactScores.map(({ label, score }) => (
-                <div key={label} className="flex items-center gap-3">
+                <div key={label} className="flex items-center gap-2.5">
                   <span
-                    className="inline-block w-3 h-3 rounded-full flex-shrink-0"
+                    className="inline-block w-2.5 h-2.5 rounded-full flex-shrink-0"
                     style={{ backgroundColor: getScoreColor(score) }}
                   />
-                  <span className="text-xl font-bold text-neutral-900 dark:text-white tabular-nums" style={{ color: getScoreColor(score) }}>
+                  <span className="text-lg font-semibold tabular-nums leading-tight" style={{ color: getScoreColor(score) }}>
                     {score !== null ? Math.round(score) : '--'}
                   </span>
-                  <span className="text-sm text-neutral-600 dark:text-neutral-400">
+                  <span className="text-sm text-neutral-500 dark:text-neutral-400">
                     {label}
                   </span>
                 </div>
@@ -387,18 +390,18 @@ export default function PageSpeedPage() {
             </div>
 
             {/* Score Legend */}
-            <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-neutral-500 dark:text-neutral-400">
-              <span className="flex items-center gap-1.5">
-                <span className="inline-block w-2.5 h-2.5 rounded-full bg-red-500" />
-                0&ndash;49 Poor
+            <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-neutral-400 dark:text-neutral-500">
+              <span className="flex items-center gap-1">
+                <span className="inline-block w-2 h-2 rounded-full bg-red-500" />
+                0&ndash;49
               </span>
-              <span className="flex items-center gap-1.5">
-                <span className="inline-block w-2.5 h-2.5 rounded-full bg-amber-500" />
-                50&ndash;89 Needs Improvement
+              <span className="flex items-center gap-1">
+                <span className="inline-block w-2 h-2 rounded-full bg-amber-500" />
+                50&ndash;89
               </span>
-              <span className="flex items-center gap-1.5">
-                <span className="inline-block w-2.5 h-2.5 rounded-full bg-emerald-500" />
-                90&ndash;100 Good
+              <span className="flex items-center gap-1">
+                <span className="inline-block w-2 h-2 rounded-full bg-emerald-500" />
+                90&ndash;100
               </span>
             </div>
           </div>
@@ -418,14 +421,14 @@ export default function PageSpeedPage() {
 
       {/* Filmstrip — page load progression */}
       {currentCheck?.filmstrip && currentCheck.filmstrip.length > 0 && (
-        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 mb-6">
-          <div className="flex items-center overflow-x-auto gap-1">
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8 mb-6 relative">
+          <div className="flex items-center overflow-x-auto gap-1 scrollbar-none">
             {currentCheck.filmstrip.map((frame, idx) => (
               <div key={idx} className="flex-shrink-0 text-center">
                 <img
                   src={frame.data}
                   alt={`${frame.timing}ms`}
-                  className="h-24 rounded border border-neutral-200 dark:border-neutral-700 object-contain bg-white"
+                  className="h-24 rounded border border-neutral-200 dark:border-neutral-700 object-contain bg-neutral-50 dark:bg-neutral-800"
                 />
                 <span className="text-[10px] text-neutral-400 mt-1 block">
                   {frame.timing < 1000 ? `${frame.timing}ms` : `${(frame.timing / 1000).toFixed(1)}s`}
@@ -433,6 +436,8 @@ export default function PageSpeedPage() {
               </div>
             ))}
           </div>
+          {/* Fade indicator for horizontal scroll */}
+          <div className="absolute right-0 top-0 bottom-0 w-12 bg-gradient-to-l from-white dark:from-neutral-900 to-transparent rounded-r-2xl pointer-events-none" />
         </div>
       )}
 
@@ -449,7 +454,7 @@ export default function PageSpeedPage() {
                 <div className="text-sm text-neutral-500 dark:text-neutral-400">
                   {label}
                 </div>
-                <div className="text-2xl font-bold text-neutral-900 dark:text-white tabular-nums">
+                <div className="text-2xl font-semibold text-neutral-900 dark:text-white tabular-nums">
                   {formatMetricValue(key, value)}
                 </div>
               </div>
@@ -464,7 +469,7 @@ export default function PageSpeedPage() {
           <h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-4">
             Performance Score Trend
           </h3>
-          <ChartContainer config={chartConfig} className="h-48">
+          <ChartContainer config={chartConfig} className="h-40">
             <AreaChart accessibilityLayer data={chartData} margin={{ top: 5, right: 5, left: -20, bottom: 0 }}>
               <defs>
                 <linearGradient id="scoreGradient" x1="0" y1="0" x2="0" y2="1">
@@ -480,10 +485,11 @@ export default function PageSpeedPage() {
               />
               <XAxis
                 dataKey="date"
-                tick={{ fontSize: 10, fill: 'var(--chart-axis)' }}
+                tick={hideXAxis ? false : { fontSize: 10, fill: 'var(--chart-axis)' }}
                 tickLine={false}
                 axisLine={false}
                 interval="preserveStartEnd"
+                hide={hideXAxis}
               />
               <YAxis
                 domain={[0, 100]}
@@ -522,7 +528,8 @@ export default function PageSpeedPage() {
           {categoryGroups.map(group => {
             const groupAudits = auditsByGroup[group.key] ?? []
             const groupPassed = passed.filter(a => a.group === group.key)
-            if (groupAudits.length === 0 && groupPassed.length === 0) return null
+            // * Hide categories with no failing audits — showing only passed count adds no value
+            if (groupAudits.length === 0) return null
             return (
               <div key={group.key} className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8">
                 <h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-4">
@@ -576,7 +583,7 @@ function AuditRow({ audit }: { audit: AuditSummary }) {
         <AuditSeverityIcon score={audit.score} />
         <span className="font-medium text-sm text-neutral-900 dark:text-white flex-1 min-w-0 truncate">{audit.title}</span>
         {audit.display_value && (
-          <span className="text-sm font-medium text-neutral-500 dark:text-neutral-400 flex-shrink-0 tabular-nums">{audit.display_value}</span>
+          <span className="text-xs text-neutral-500 dark:text-neutral-500 flex-shrink-0 tabular-nums">{audit.display_value}</span>
         )}
         {audit.savings_ms != null && audit.savings_ms > 0 && !audit.display_value && (
           <span className="text-sm font-medium text-amber-600 dark:text-amber-400 flex-shrink-0 tabular-nums">
@@ -664,21 +671,29 @@ function PageSpeedSkeleton() {
         <div className="h-8 w-48 bg-neutral-200 dark:bg-neutral-700 rounded" />
         <div className="h-4 w-72 bg-neutral-200 dark:bg-neutral-700 rounded" />
       </div>
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-        {[...Array(4)].map((_, i) => (
-          <div key={i} className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 animate-pulse">
-            <div className="w-24 h-24 rounded-full bg-neutral-200 dark:bg-neutral-700 mx-auto mb-3" />
-            <div className="h-4 w-20 bg-neutral-200 dark:bg-neutral-700 rounded mx-auto" />
+      {/* Hero skeleton */}
+      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8 animate-pulse">
+        <div className="flex items-center gap-8">
+          <div className="w-40 h-40 rounded-full bg-neutral-200 dark:bg-neutral-700 flex-shrink-0" />
+          <div className="flex-1 space-y-3">
+            <div className="h-5 w-32 bg-neutral-200 dark:bg-neutral-700 rounded" />
+            <div className="h-5 w-36 bg-neutral-200 dark:bg-neutral-700 rounded" />
+            <div className="h-5 w-24 bg-neutral-200 dark:bg-neutral-700 rounded" />
           </div>
-        ))}
+          <div className="w-48 h-36 bg-neutral-200 dark:bg-neutral-700 rounded-lg flex-shrink-0 hidden md:block" />
+        </div>
       </div>
-      <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
-        {[...Array(6)].map((_, i) => (
-          <div key={i} className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 animate-pulse">
-            <div className="h-4 w-24 bg-neutral-200 dark:bg-neutral-700 rounded mb-2" />
-            <div className="h-6 w-16 bg-neutral-200 dark:bg-neutral-700 rounded" />
-          </div>
-        ))}
+      {/* Metrics skeleton */}
+      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8 animate-pulse">
+        <div className="h-3 w-16 bg-neutral-200 dark:bg-neutral-700 rounded mb-5" />
+        <div className="grid grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-6">
+          {[...Array(6)].map((_, i) => (
+            <div key={i} className="space-y-2">
+              <div className="h-3 w-32 bg-neutral-200 dark:bg-neutral-700 rounded" />
+              <div className="h-7 w-20 bg-neutral-200 dark:bg-neutral-700 rounded" />
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   )
-- 
2.49.1


From 8b95620ec155ebf8dcb39ac8ec28c667f5e51362 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 20:43:11 +0100
Subject: [PATCH 176/428] polish(pagespeed): mini gauges, animated tab
 switcher, filmstrip title

- Replace compact dot+number scores with 64px ScoreGauge circles
- ScoreGauge scales font/stroke/spacing for small sizes
- Add "Page Load Timeline" header to filmstrip section
- Replace pill toggle with animated underline tabs (matches dashboard)
---
 app/sites/[id]/pagespeed/page.tsx   | 63 +++++++++++++----------------
 components/pagespeed/ScoreGauge.tsx | 13 +++---
 2 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index ed2c8b2..af19026 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -6,6 +6,7 @@ import { useParams } from 'next/navigation'
 import { useSite, usePageSpeedConfig, usePageSpeedLatest, usePageSpeedHistory } from '@/lib/swr/dashboard'
 import { updatePageSpeedConfig, triggerPageSpeedCheck, getPageSpeedLatest, type PageSpeedCheck, type AuditSummary } from '@/lib/api/pagespeed'
 import { toast, Button } from '@ciphera-net/ui'
+import { motion } from 'framer-motion'
 import ScoreGauge from '@/components/pagespeed/ScoreGauge'
 import {
   AreaChart,
@@ -306,27 +307,29 @@ export default function PageSpeedPage() {
         </div>
         <div className="flex items-center gap-3">
           {/* Mobile / Desktop toggle */}
-          <div className="flex gap-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg p-1">
-            <button
-              onClick={() => setStrategy('mobile')}
-              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
-                strategy === 'mobile'
-                  ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
-                  : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300'
-              }`}
-            >
-              Mobile
-            </button>
-            <button
-              onClick={() => setStrategy('desktop')}
-              className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
-                strategy === 'desktop'
-                  ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
-                  : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300'
-              }`}
-            >
-              Desktop
-            </button>
+          <div className="flex gap-1" role="tablist" aria-label="Strategy tabs">
+            {(['mobile', 'desktop'] as const).map(tab => (
+              <button
+                key={tab}
+                onClick={() => setStrategy(tab)}
+                role="tab"
+                aria-selected={strategy === tab}
+                className={`relative px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded cursor-pointer ${
+                  strategy === tab
+                    ? 'text-white'
+                    : 'text-neutral-400 dark:text-neutral-500 hover:text-neutral-300'
+                }`}
+              >
+                {tab === 'mobile' ? 'Mobile' : 'Desktop'}
+                {strategy === tab && (
+                  <motion.div
+                    layoutId="pagespeedStrategyTab"
+                    className="absolute inset-x-0 -bottom-px h-0.5 bg-brand-orange"
+                    transition={{ type: 'spring', stiffness: 500, damping: 35 }}
+                  />
+                )}
+              </button>
+            ))}
           </div>
 
           {canEdit && (
@@ -360,20 +363,9 @@ export default function PageSpeedPage() {
 
           {/* Center — Compact Scores + Meta */}
           <div className="flex-1 flex flex-col justify-center gap-4 min-w-0">
-            <div className="flex flex-col gap-2">
+            <div className="flex flex-wrap gap-4">
               {compactScores.map(({ label, score }) => (
-                <div key={label} className="flex items-center gap-2.5">
-                  <span
-                    className="inline-block w-2.5 h-2.5 rounded-full flex-shrink-0"
-                    style={{ backgroundColor: getScoreColor(score) }}
-                  />
-                  <span className="text-lg font-semibold tabular-nums leading-tight" style={{ color: getScoreColor(score) }}>
-                    {score !== null ? Math.round(score) : '--'}
-                  </span>
-                  <span className="text-sm text-neutral-500 dark:text-neutral-400">
-                    {label}
-                  </span>
-                </div>
+                <ScoreGauge key={label} score={score} label={label} size={64} />
               ))}
             </div>
 
@@ -422,6 +414,9 @@ export default function PageSpeedPage() {
       {/* Filmstrip — page load progression */}
       {currentCheck?.filmstrip && currentCheck.filmstrip.length > 0 && (
         <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8 mb-6 relative">
+          <h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-4">
+            Page Load Timeline
+          </h3>
           <div className="flex items-center overflow-x-auto gap-1 scrollbar-none">
             {currentCheck.filmstrip.map((frame, idx) => (
               <div key={idx} className="flex-shrink-0 text-center">
diff --git a/components/pagespeed/ScoreGauge.tsx b/components/pagespeed/ScoreGauge.tsx
index 7b9ceb4..617742c 100644
--- a/components/pagespeed/ScoreGauge.tsx
+++ b/components/pagespeed/ScoreGauge.tsx
@@ -21,10 +21,13 @@ export default function ScoreGauge({ score, label, size = 120 }: ScoreGaugeProps
   const offset = hasScore ? CIRCUMFERENCE * (1 - score / 100) : CIRCUMFERENCE
   const color = hasScore ? getColor(score) : '#6b7280'
 
-  const fontSize = size >= 160 ? 'text-4xl' : 'text-2xl'
+  const fontSize = size >= 160 ? 'text-4xl' : size >= 100 ? 'text-2xl' : size >= 80 ? 'text-lg' : 'text-xs'
+  const labelSize = size >= 100 ? 'text-sm' : 'text-[10px]'
+  const strokeWidth = size >= 100 ? 8 : 6
+  const gap = size >= 100 ? 'gap-2' : 'gap-1'
 
   return (
-    <div className="flex flex-col items-center gap-2">
+    <div className={`flex flex-col items-center ${gap}`}>
       <div className="relative" style={{ width: size, height: size }}>
         <svg
           className="w-full h-full -rotate-90"
@@ -38,7 +41,7 @@ export default function ScoreGauge({ score, label, size = 120 }: ScoreGaugeProps
             fill="none"
             stroke="currentColor"
             className="text-neutral-200 dark:text-neutral-700"
-            strokeWidth="8"
+            strokeWidth={strokeWidth}
           />
           {/* Filled arc */}
           <circle
@@ -47,7 +50,7 @@ export default function ScoreGauge({ score, label, size = 120 }: ScoreGaugeProps
             r={RADIUS}
             fill="none"
             stroke={color}
-            strokeWidth="8"
+            strokeWidth={strokeWidth}
             strokeLinecap="round"
             strokeDasharray={CIRCUMFERENCE}
             strokeDashoffset={offset}
@@ -66,7 +69,7 @@ export default function ScoreGauge({ score, label, size = 120 }: ScoreGaugeProps
           </span>
         </div>
       </div>
-      <span className="text-sm font-medium text-neutral-600 dark:text-neutral-400">
+      <span className={`${labelSize} font-medium text-neutral-600 dark:text-neutral-400 text-center`}>
         {label}
       </span>
     </div>
-- 
2.49.1


From ab6008daf9ca3ffee327bdb6cd4b2a19c4d3cb2b Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 20:52:50 +0100
Subject: [PATCH 177/428] fix(pagespeed): parse markdown links + handle more
 audit item fields

- AuditDescription: converts [text](url) to clickable links
- AuditItem: handles href, text/linkText, source.url from PSI API
---
 app/sites/[id]/pagespeed/page.tsx | 144 +++++++++++++++++++-----------
 1 file changed, 93 insertions(+), 51 deletions(-)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index af19026..8d047ae 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -590,63 +590,17 @@ function AuditRow({ audit }: { audit: AuditSummary }) {
         </svg>
       </summary>
       <div className="pl-8 pr-2 pb-3 pt-1">
-        {/* Description */}
+        {/* Description with parsed markdown links */}
         {audit.description && (
-          <p className="text-xs text-neutral-500 dark:text-neutral-400 mb-3 leading-relaxed">{audit.description}</p>
+          <p className="text-xs text-neutral-500 dark:text-neutral-400 mb-3 leading-relaxed">
+            <AuditDescription text={audit.description} />
+          </p>
         )}
         {/* Items list */}
         {audit.details && Array.isArray(audit.details) && audit.details.length > 0 && (
           <div className="space-y-2">
             {audit.details.slice(0, 10).map((item: Record<string, any>, idx: number) => (
-              <div key={idx} className="flex items-start gap-3 py-2 border-b border-neutral-100 dark:border-neutral-800 last:border-0 text-xs text-neutral-600 dark:text-neutral-400">
-                {/* Element screenshot */}
-                {item.node?.screenshot?.data && (
-                  <img
-                    src={item.node.screenshot.data}
-                    alt=""
-                    className="w-20 h-14 object-contain rounded border border-neutral-200 dark:border-neutral-700 flex-shrink-0 bg-neutral-50 dark:bg-neutral-800"
-                  />
-                )}
-                {/* Content */}
-                <div className="flex-1 min-w-0">
-                  {/* Label / node explanation */}
-                  {(item.node?.nodeLabel || item.label || item.groupLabel) && (
-                    <div className="font-medium text-neutral-900 dark:text-white text-xs mb-0.5">
-                      {item.node?.nodeLabel || item.label || item.groupLabel}
-                    </div>
-                  )}
-                  {/* URL */}
-                  {item.url && (
-                    <div className="font-mono text-xs text-neutral-500 dark:text-neutral-400 break-all">{item.url}</div>
-                  )}
-                  {/* HTML snippet */}
-                  {item.node?.snippet && (
-                    <code className="text-xs bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded break-all mt-1 inline-block">{item.node.snippet}</code>
-                  )}
-                  {/* Statistic-type items */}
-                  {!item.url && !item.node && item.statistic && (
-                    <span>{item.statistic}</span>
-                  )}
-                </div>
-                {/* Metrics on the right */}
-                <div className="flex-shrink-0 text-right space-y-0.5">
-                  {item.wastedBytes != null && (
-                    <div className="text-amber-600 dark:text-amber-400 whitespace-nowrap">
-                      {item.wastedBytes < 1024 ? `${item.wastedBytes} B` : `${(item.wastedBytes / 1024).toFixed(1)} KiB`}
-                    </div>
-                  )}
-                  {item.totalBytes != null && !item.wastedBytes && (
-                    <div className="whitespace-nowrap">
-                      {item.totalBytes < 1024 ? `${item.totalBytes} B` : `${(item.totalBytes / 1024).toFixed(1)} KiB`}
-                    </div>
-                  )}
-                  {item.wastedMs != null && (
-                    <div className="text-amber-600 dark:text-amber-400 whitespace-nowrap">
-                      {item.wastedMs < 1000 ? `${Math.round(item.wastedMs)}ms` : `${(item.wastedMs / 1000).toFixed(1)}s`}
-                    </div>
-                  )}
-                </div>
-              </div>
+              <AuditItem key={idx} item={item} />
             ))}
             {audit.details.length > 10 && (
               <p className="text-xs text-neutral-400 mt-1">+ {audit.details.length - 10} more items</p>
@@ -658,6 +612,94 @@ function AuditRow({ audit }: { audit: AuditSummary }) {
   )
 }
 
+// * Parse markdown-style links [text](url) into clickable <a> tags
+function AuditDescription({ text }: { text: string }) {
+  const parts = text.split(/(\[[^\]]+\]\([^)]+\))/g)
+  return (
+    <>
+      {parts.map((part, i) => {
+        const match = part.match(/^\[([^\]]+)\]\(([^)]+)\)$/)
+        if (match) {
+          return (
+            <a
+              key={i}
+              href={match[2]}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-brand-orange hover:underline"
+            >
+              {match[1]}
+            </a>
+          )
+        }
+        return <span key={i}>{part}</span>
+      })}
+    </>
+  )
+}
+
+// * Render a single audit detail item — handles various field types from the PSI API
+function AuditItem({ item }: { item: Record<string, any> }) {
+  // * Determine the primary label
+  const label = item.node?.nodeLabel || item.label || item.groupLabel || item.source?.url || null
+  // * URL can be in item.url or item.href
+  const url = item.url || item.href || null
+  // * Text content (used by SEO audits like "link text")
+  const text = item.text || item.linkText || null
+
+  return (
+    <div className="flex items-start gap-3 py-2 border-b border-neutral-100 dark:border-neutral-800 last:border-0 text-xs text-neutral-600 dark:text-neutral-400">
+      {/* Element screenshot */}
+      {item.node?.screenshot?.data && (
+        <img
+          src={item.node.screenshot.data}
+          alt=""
+          className="w-20 h-14 object-contain rounded border border-neutral-200 dark:border-neutral-700 flex-shrink-0 bg-neutral-50 dark:bg-neutral-800"
+        />
+      )}
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        {label && (
+          <div className="font-medium text-neutral-900 dark:text-white text-xs mb-0.5">
+            {label}
+          </div>
+        )}
+        {url && (
+          <div className="font-mono text-xs text-neutral-500 dark:text-neutral-400 break-all">{url}</div>
+        )}
+        {text && (
+          <div className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">{text}</div>
+        )}
+        {item.node?.snippet && (
+          <code className="text-xs bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded break-all mt-1 inline-block">{item.node.snippet}</code>
+        )}
+        {/* Fallback for items with only string values we haven't handled */}
+        {!label && !url && !text && !item.node && item.statistic && (
+          <span>{item.statistic}</span>
+        )}
+      </div>
+      {/* Metrics on the right */}
+      <div className="flex-shrink-0 text-right space-y-0.5">
+        {item.wastedBytes != null && (
+          <div className="text-amber-600 dark:text-amber-400 whitespace-nowrap">
+            {item.wastedBytes < 1024 ? `${item.wastedBytes} B` : `${(item.wastedBytes / 1024).toFixed(1)} KiB`}
+          </div>
+        )}
+        {item.totalBytes != null && !item.wastedBytes && (
+          <div className="whitespace-nowrap">
+            {item.totalBytes < 1024 ? `${item.totalBytes} B` : `${(item.totalBytes / 1024).toFixed(1)} KiB`}
+          </div>
+        )}
+        {item.wastedMs != null && (
+          <div className="text-amber-600 dark:text-amber-400 whitespace-nowrap">
+            {item.wastedMs < 1000 ? `${Math.round(item.wastedMs)}ms` : `${(item.wastedMs / 1000).toFixed(1)}s`}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
 // * Skeleton loading state
 function PageSpeedSkeleton() {
   return (
-- 
2.49.1


From 5003175305fe0a1615d7b1009bb2f22afc78cdc1 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 20:55:55 +0100
Subject: [PATCH 178/428] redesign(pagespeed): equal gauges in hero + category
 gauges in diagnostics

- Hero: 4 equal 90px ScoreGauges in a row with screenshot on right
- Diagnostics: each category card gets a 56px gauge header with score
  and issue count, matching pagespeed.web.dev's category sections
- Legend and metadata moved to footer bar in hero card
---
 app/sites/[id]/pagespeed/page.tsx | 109 ++++++++++++++----------------
 1 file changed, 52 insertions(+), 57 deletions(-)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index 8d047ae..bb41293 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -270,18 +270,20 @@ export default function PageSpeedPage() {
     { key: 'tti', label: 'Time to Interactive', value: currentCheck?.tti_ms ?? null },
   ]
 
-  // * Compact score helper for the hero section
-  const compactScores = [
-    { label: 'Accessibility', score: currentCheck?.accessibility_score ?? null },
-    { label: 'Best Practices', score: currentCheck?.best_practices_score ?? null },
-    { label: 'SEO', score: currentCheck?.seo_score ?? null },
+  // * All 4 category scores for the hero row
+  const allScores = [
+    { key: 'performance', label: 'Performance', score: currentCheck?.performance_score ?? null },
+    { key: 'accessibility', label: 'Accessibility', score: currentCheck?.accessibility_score ?? null },
+    { key: 'best-practices', label: 'Best Practices', score: currentCheck?.best_practices_score ?? null },
+    { key: 'seo', label: 'SEO', score: currentCheck?.seo_score ?? null },
   ]
 
-  function getScoreColor(score: number | null): string {
-    if (score === null) return '#6b7280'
-    if (score >= 90) return '#0cce6b'
-    if (score >= 50) return '#ffa400'
-    return '#ff4e42'
+  // * Map category key to score for diagnostics section
+  const scoreByGroup: Record<string, number | null> = {
+    'performance': currentCheck?.performance_score ?? null,
+    'accessibility': currentCheck?.accessibility_score ?? null,
+    'best-practices': currentCheck?.best_practices_score ?? null,
+    'seo': currentCheck?.seo_score ?? null,
   }
 
   function getMetricDotColor(metric: string, value: number | null): string {
@@ -353,62 +355,46 @@ export default function PageSpeedPage() {
         </div>
       </div>
 
-      {/* Section 1 — Hero Card: Score Gauge + Compact Scores + Screenshot */}
+      {/* Section 1 — Score Overview: 4 equal gauges + screenshot */}
       <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8 mb-6">
-        <div className="flex flex-col md:flex-row items-center gap-8">
-          {/* Left — Large Performance Gauge */}
-          <div className="flex-shrink-0">
-            <ScoreGauge score={currentCheck?.performance_score ?? null} label="Performance" size={160} />
+        <div className="flex flex-col lg:flex-row items-center gap-8">
+          {/* 4 equal gauges */}
+          <div className="flex-1 flex items-center justify-center gap-6 sm:gap-8 flex-wrap">
+            {allScores.map(({ label, score }) => (
+              <ScoreGauge key={label} score={score} label={label} size={90} />
+            ))}
           </div>
 
-          {/* Center — Compact Scores + Meta */}
-          <div className="flex-1 flex flex-col justify-center gap-4 min-w-0">
-            <div className="flex flex-wrap gap-4">
-              {compactScores.map(({ label, score }) => (
-                <ScoreGauge key={label} score={score} label={label} size={64} />
-              ))}
-            </div>
-
-            {/* Last checked + frequency */}
-            <div className="flex items-center gap-3 text-sm text-neutral-500 dark:text-neutral-400 mt-1">
-              {currentCheck?.checked_at && (
-                <span>Last checked {formatTimeAgo(currentCheck.checked_at)}</span>
-              )}
-              {config?.frequency && (
-                <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400">
-                  {config.frequency}
-                </span>
-              )}
-            </div>
-
-            {/* Score Legend */}
-            <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-neutral-400 dark:text-neutral-500">
-              <span className="flex items-center gap-1">
-                <span className="inline-block w-2 h-2 rounded-full bg-red-500" />
-                0&ndash;49
-              </span>
-              <span className="flex items-center gap-1">
-                <span className="inline-block w-2 h-2 rounded-full bg-amber-500" />
-                50&ndash;89
-              </span>
-              <span className="flex items-center gap-1">
-                <span className="inline-block w-2 h-2 rounded-full bg-emerald-500" />
-                90&ndash;100
-              </span>
-            </div>
-          </div>
-
-          {/* Right — Screenshot */}
+          {/* Screenshot */}
           {currentCheck?.screenshot && (
             <div className="flex-shrink-0 flex items-center justify-center">
               <img
                 src={currentCheck.screenshot}
                 alt={`${strategy} screenshot`}
-                className="rounded-lg max-h-48 w-auto border border-neutral-200 dark:border-neutral-700 object-contain"
+                className="rounded-lg max-h-44 w-auto border border-neutral-200 dark:border-neutral-700 object-contain"
               />
             </div>
           )}
         </div>
+
+        {/* Last checked + frequency + legend */}
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-2 mt-6 pt-4 border-t border-neutral-100 dark:border-neutral-800">
+          <div className="flex items-center gap-3 text-sm text-neutral-500 dark:text-neutral-400">
+            {currentCheck?.checked_at && (
+              <span>Last checked {formatTimeAgo(currentCheck.checked_at)}</span>
+            )}
+            {config?.frequency && (
+              <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400">
+                {config.frequency}
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-x-3 text-[11px] text-neutral-400 dark:text-neutral-500 ml-auto">
+            <span className="flex items-center gap-1"><span className="inline-block w-2 h-2 rounded-full bg-red-500" />0&ndash;49</span>
+            <span className="flex items-center gap-1"><span className="inline-block w-2 h-2 rounded-full bg-amber-500" />50&ndash;89</span>
+            <span className="flex items-center gap-1"><span className="inline-block w-2 h-2 rounded-full bg-emerald-500" />90&ndash;100</span>
+          </div>
+        </div>
       </div>
 
       {/* Filmstrip — page load progression */}
@@ -527,9 +513,18 @@ export default function PageSpeedPage() {
             if (groupAudits.length === 0) return null
             return (
               <div key={group.key} className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8">
-                <h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-4">
-                  {group.label}
-                </h3>
+                {/* Category header with gauge */}
+                <div className="flex items-center gap-5 mb-6">
+                  <ScoreGauge score={scoreByGroup[group.key]} label="" size={56} />
+                  <div>
+                    <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+                      {group.label}
+                    </h3>
+                    <p className="text-xs text-neutral-500 dark:text-neutral-400">
+                      {groupAudits.length} issue{groupAudits.length !== 1 ? 's' : ''} found
+                    </p>
+                  </div>
+                </div>
 
                 {groupAudits.length > 0 && (
                   <div className="divide-y divide-neutral-100 dark:divide-neutral-800">
-- 
2.49.1


From dfcf6bebdec423fd4f6c5388d69c53366a8ede56 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 20:59:52 +0100
Subject: [PATCH 179/428] fix(pagespeed): show all 4 category cards including
 those with 0 issues

---
 app/sites/[id]/pagespeed/page.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index bb41293..7d07859 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -509,8 +509,7 @@ export default function PageSpeedPage() {
           {categoryGroups.map(group => {
             const groupAudits = auditsByGroup[group.key] ?? []
             const groupPassed = passed.filter(a => a.group === group.key)
-            // * Hide categories with no failing audits — showing only passed count adds no value
-            if (groupAudits.length === 0) return null
+            if (groupAudits.length === 0 && groupPassed.length === 0) return null
             return (
               <div key={group.key} className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8">
                 {/* Category header with gauge */}
@@ -521,7 +520,7 @@ export default function PageSpeedPage() {
                       {group.label}
                     </h3>
                     <p className="text-xs text-neutral-500 dark:text-neutral-400">
-                      {groupAudits.length} issue{groupAudits.length !== 1 ? 's' : ''} found
+                      {groupAudits.length === 0 ? 'No issues found' : `${groupAudits.length} issue${groupAudits.length !== 1 ? 's' : ''} found`}
                     </p>
                   </div>
                 </div>
-- 
2.49.1


From a0173636d47f45236120b021e78b5fca9029d8c1 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 21:08:50 +0100
Subject: [PATCH 180/428] fix(pagespeed): show empty circle for
 unscored/informative audits
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Null scores now show ○ (informative) instead of ▲ (poor), matching
pagespeed.web.dev's "Unscored" indicator for informative audits.
---
 app/sites/[id]/pagespeed/page.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index 7d07859..c66ef4f 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -552,8 +552,12 @@ export default function PageSpeedPage() {
 
 // * Severity indicator based on audit score (pagespeed.web.dev style)
 function AuditSeverityIcon({ score }: { score: number | null }) {
-  if (score === null || score < 0.5) {
-    // Red triangle for poor / unknown
+  if (score === null) {
+    // Empty circle for informative/unscored audits
+    return <span className="text-neutral-400 text-sm leading-none flex-shrink-0" aria-label="Informative">&#9675;</span>
+  }
+  if (score < 0.5) {
+    // Red triangle for poor
     return <span className="text-red-500 text-sm leading-none flex-shrink-0" aria-label="Poor">&#9650;</span>
   }
   if (score < 0.9) {
-- 
2.49.1


From 98429f82f5a91d81184a90848d391a66c58fea29 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 22:03:13 +0100
Subject: [PATCH 181/428] feat(pagespeed): render audit sub-group headers in
 diagnostics

Group audits within each category by sub-group (e.g., "Names and
Labels", "Contrast") with small uppercase headers, matching the
pagespeed.web.dev layout.
---
 app/sites/[id]/pagespeed/page.tsx | 50 +++++++++++++++++++++++++++++--
 lib/api/pagespeed.ts              |  2 ++
 2 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index c66ef4f..2a5c39b 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -526,9 +526,7 @@ export default function PageSpeedPage() {
                 </div>
 
                 {groupAudits.length > 0 && (
-                  <div className="divide-y divide-neutral-100 dark:divide-neutral-800">
-                    {groupAudits.map(audit => <AuditRow key={audit.id} audit={audit} />)}
-                  </div>
+                  <AuditsBySubGroup audits={groupAudits} />
                 )}
 
                 {groupPassed.length > 0 && (
@@ -550,6 +548,52 @@ export default function PageSpeedPage() {
   )
 }
 
+// * Group audits by sub-group within a category (e.g., "Names and Labels", "Contrast")
+function AuditsBySubGroup({ audits }: { audits: AuditSummary[] }) {
+  // * Collect unique sub-groups in order of appearance
+  const subGroupOrder: string[] = []
+  const bySubGroup: Record<string, AuditSummary[]> = {}
+
+  for (const audit of audits) {
+    const key = audit.sub_group || '__none__'
+    if (!bySubGroup[key]) {
+      bySubGroup[key] = []
+      subGroupOrder.push(key)
+    }
+    bySubGroup[key].push(audit)
+  }
+
+  // * If no sub-groups exist, render flat list
+  if (subGroupOrder.length === 1 && subGroupOrder[0] === '__none__') {
+    return (
+      <div className="divide-y divide-neutral-100 dark:divide-neutral-800">
+        {audits.map(audit => <AuditRow key={audit.id} audit={audit} />)}
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-5">
+      {subGroupOrder.map(key => {
+        const items = bySubGroup[key]
+        const title = items[0]?.sub_group_title
+        return (
+          <div key={key}>
+            {title && (
+              <h4 className="text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-2">
+                {title}
+              </h4>
+            )}
+            <div className="divide-y divide-neutral-100 dark:divide-neutral-800">
+              {items.map(audit => <AuditRow key={audit.id} audit={audit} />)}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
 // * Severity indicator based on audit score (pagespeed.web.dev style)
 function AuditSeverityIcon({ score }: { score: number | null }) {
   if (score === null) {
diff --git a/lib/api/pagespeed.ts b/lib/api/pagespeed.ts
index b036d52..840b3df 100644
--- a/lib/api/pagespeed.ts
+++ b/lib/api/pagespeed.ts
@@ -21,6 +21,8 @@ export interface AuditSummary {
   savings_ms?: number
   category: 'opportunity' | 'diagnostic' | 'passed'
   group?: string // "performance", "accessibility", "best-practices", "seo"
+  sub_group?: string // "a11y-names-labels", "a11y-contrast", etc.
+  sub_group_title?: string // "Names and Labels", "Contrast", etc.
   details?: AuditDetailItem[]
 }
 
-- 
2.49.1


From 9d1d2dbb809a2e983766d7b7c690b499ca72bd4d Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 22:11:49 +0100
Subject: [PATCH 182/428] fix(pagespeed): issue count excludes
 informative/unscored audits

Only audits with a real score (non-null) count toward the issue total.
Informative audits (score: null) are shown but not counted.
---
 app/sites/[id]/pagespeed/page.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index 2a5c39b..96e96be 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -520,7 +520,10 @@ export default function PageSpeedPage() {
                       {group.label}
                     </h3>
                     <p className="text-xs text-neutral-500 dark:text-neutral-400">
-                      {groupAudits.length === 0 ? 'No issues found' : `${groupAudits.length} issue${groupAudits.length !== 1 ? 's' : ''} found`}
+                      {(() => {
+                        const realIssues = groupAudits.filter(a => a.score !== null && a.score !== undefined).length
+                        return realIssues === 0 ? 'No issues found' : `${realIssues} issue${realIssues !== 1 ? 's' : ''} found`
+                      })()}
                     </p>
                   </div>
                 </div>
-- 
2.49.1


From d232a8a6d102a3ce02314d7e9f6a1d6f562f6596 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 23:25:11 +0100
Subject: [PATCH 183/428] feat(pagespeed): sort audits by severity + insights
 before diagnostics
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sort order within each sub-group: red → orange → empty → green.
Sub-groups sorted so insights come before diagnostics.
---
 app/sites/[id]/pagespeed/page.tsx | 34 +++++++++++++++++++++++++------
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index 96e96be..2f48d21 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -551,26 +551,48 @@ export default function PageSpeedPage() {
   )
 }
 
+// * Sort audits by severity: red (< 0.5) → orange (0.5-0.89) → empty (null) → green (>= 0.9)
+function sortBySeverity(audits: AuditSummary[]): AuditSummary[] {
+  return [...audits].sort((a, b) => {
+    const rank = (s: number | null | undefined) => {
+      if (s === null || s === undefined) return 2 // empty circle
+      if (s < 0.5) return 0 // red
+      if (s < 0.9) return 1 // orange
+      return 3 // green
+    }
+    return rank(a.score) - rank(b.score)
+  })
+}
+
+// * Known sub-group ordering: insights-type groups come before diagnostics-type groups
+const subGroupPriority: Record<string, number> = {
+  'budgets': 0, 'load-opportunities': 0, 'diagnostics': 1,
+}
+
 // * Group audits by sub-group within a category (e.g., "Names and Labels", "Contrast")
 function AuditsBySubGroup({ audits }: { audits: AuditSummary[] }) {
-  // * Collect unique sub-groups in order of appearance
-  const subGroupOrder: string[] = []
+  // * Collect unique sub-groups
   const bySubGroup: Record<string, AuditSummary[]> = {}
 
   for (const audit of audits) {
     const key = audit.sub_group || '__none__'
     if (!bySubGroup[key]) {
       bySubGroup[key] = []
-      subGroupOrder.push(key)
     }
     bySubGroup[key].push(audit)
   }
 
-  // * If no sub-groups exist, render flat list
+  const subGroupOrder = Object.keys(bySubGroup).sort((a, b) => {
+    const pa = subGroupPriority[a] ?? 0
+    const pb = subGroupPriority[b] ?? 0
+    return pa - pb
+  })
+
+  // * If no sub-groups exist, render flat list sorted by severity
   if (subGroupOrder.length === 1 && subGroupOrder[0] === '__none__') {
     return (
       <div className="divide-y divide-neutral-100 dark:divide-neutral-800">
-        {audits.map(audit => <AuditRow key={audit.id} audit={audit} />)}
+        {sortBySeverity(audits).map(audit => <AuditRow key={audit.id} audit={audit} />)}
       </div>
     )
   }
@@ -578,7 +600,7 @@ function AuditsBySubGroup({ audits }: { audits: AuditSummary[] }) {
   return (
     <div className="space-y-5">
       {subGroupOrder.map(key => {
-        const items = bySubGroup[key]
+        const items = sortBySeverity(bySubGroup[key])
         const title = items[0]?.sub_group_title
         return (
           <div key={key}>
-- 
2.49.1


From 354331646baa393157114fd1876ebd2e0e96a78e Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 23:38:58 +0100
Subject: [PATCH 184/428] =?UTF-8?q?fix(pagespeed):=20order=20accessibility?=
 =?UTF-8?q?=20sub-groups:=20names/labels=20=E2=86=92=20contrast=20?=
 =?UTF-8?q?=E2=86=92=20best=20practices?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/sites/[id]/pagespeed/page.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index 2f48d21..7a7af2a 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -566,7 +566,14 @@ function sortBySeverity(audits: AuditSummary[]): AuditSummary[] {
 
 // * Known sub-group ordering: insights-type groups come before diagnostics-type groups
 const subGroupPriority: Record<string, number> = {
+  // * Performance
   'budgets': 0, 'load-opportunities': 0, 'diagnostics': 1,
+  // * Accessibility
+  'a11y-names-labels': 0, 'a11y-contrast': 1, 'a11y-best-practices': 2,
+  'a11y-color-contrast': 1, 'a11y-aria': 3, 'a11y-navigation': 4,
+  'a11y-language': 5, 'a11y-audio-video': 6, 'a11y-tables-lists': 7,
+  // * SEO
+  'seo-mobile': 0, 'seo-content': 1, 'seo-crawl': 2,
 }
 
 // * Group audits by sub-group within a category (e.g., "Names and Labels", "Contrast")
-- 
2.49.1


From bba25c722aea9b673f01c52931504542ddec39fc Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 22 Mar 2026 23:45:36 +0100
Subject: [PATCH 185/428] feat(pagespeed): manual check section, consistent dot
 indicators

- Add "Additional items to manually check" collapsed section
- Replace triangle/square severity icons with consistent filled circles
- Empty circle (border only) for informative/unscored audits
---
 app/sites/[id]/pagespeed/page.tsx | 30 ++++++++++++++++++++----------
 lib/api/pagespeed.ts              |  2 +-
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index 7a7af2a..5463f20 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -247,9 +247,10 @@ export default function PageSpeedPage() {
 
   // * Build per-category failing audits, sorted by impact
   const auditsByGroup: Record<string, typeof audits> = {}
+  const manualByGroup: Record<string, typeof audits> = {}
   for (const group of categoryGroups) {
     auditsByGroup[group.key] = audits
-      .filter(a => a.category !== 'passed' && a.group === group.key)
+      .filter(a => a.category !== 'passed' && a.category !== 'manual' && a.group === group.key)
       .sort((a, b) => {
         if (a.category === 'opportunity' && b.category !== 'opportunity') return -1
         if (a.category !== 'opportunity' && b.category === 'opportunity') return 1
@@ -258,6 +259,7 @@ export default function PageSpeedPage() {
         }
         return 0
       })
+    manualByGroup[group.key] = audits.filter(a => a.category === 'manual' && a.group === group.key)
   }
 
   // * Core Web Vitals metrics
@@ -509,7 +511,8 @@ export default function PageSpeedPage() {
           {categoryGroups.map(group => {
             const groupAudits = auditsByGroup[group.key] ?? []
             const groupPassed = passed.filter(a => a.group === group.key)
-            if (groupAudits.length === 0 && groupPassed.length === 0) return null
+            const groupManual = manualByGroup[group.key] ?? []
+            if (groupAudits.length === 0 && groupPassed.length === 0 && groupManual.length === 0) return null
             return (
               <div key={group.key} className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8">
                 {/* Category header with gauge */}
@@ -532,6 +535,17 @@ export default function PageSpeedPage() {
                   <AuditsBySubGroup audits={groupAudits} />
                 )}
 
+                {groupManual.length > 0 && (
+                  <details className="mt-4">
+                    <summary className="cursor-pointer text-sm font-medium text-neutral-500 dark:text-neutral-400 select-none hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors">
+                      <span className="ml-1">Additional items to manually check ({groupManual.length})</span>
+                    </summary>
+                    <div className="mt-2 divide-y divide-neutral-100 dark:divide-neutral-800">
+                      {groupManual.map(audit => <AuditRow key={audit.id} audit={audit} />)}
+                    </div>
+                  </details>
+                )}
+
                 {groupPassed.length > 0 && (
                   <details className="mt-4">
                     <summary className="cursor-pointer text-sm font-medium text-neutral-500 dark:text-neutral-400 select-none hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors">
@@ -629,19 +643,15 @@ function AuditsBySubGroup({ audits }: { audits: AuditSummary[] }) {
 // * Severity indicator based on audit score (pagespeed.web.dev style)
 function AuditSeverityIcon({ score }: { score: number | null }) {
   if (score === null) {
-    // Empty circle for informative/unscored audits
-    return <span className="text-neutral-400 text-sm leading-none flex-shrink-0" aria-label="Informative">&#9675;</span>
+    return <span className="inline-block w-2.5 h-2.5 rounded-full border-2 border-neutral-400 flex-shrink-0" aria-label="Informative" />
   }
   if (score < 0.5) {
-    // Red triangle for poor
-    return <span className="text-red-500 text-sm leading-none flex-shrink-0" aria-label="Poor">&#9650;</span>
+    return <span className="inline-block w-2.5 h-2.5 rounded-full bg-red-500 flex-shrink-0" aria-label="Poor" />
   }
   if (score < 0.9) {
-    // Amber square for needs improvement
-    return <span className="text-amber-500 text-sm leading-none flex-shrink-0" aria-label="Needs Improvement">&#9632;</span>
+    return <span className="inline-block w-2.5 h-2.5 rounded-full bg-amber-500 flex-shrink-0" aria-label="Needs Improvement" />
   }
-  // Green circle for good
-  return <span className="text-emerald-500 text-sm leading-none flex-shrink-0" aria-label="Good">&#9679;</span>
+  return <span className="inline-block w-2.5 h-2.5 rounded-full bg-emerald-500 flex-shrink-0" aria-label="Good" />
 }
 
 // * Expandable audit row with description and detail items
diff --git a/lib/api/pagespeed.ts b/lib/api/pagespeed.ts
index 840b3df..97a45d8 100644
--- a/lib/api/pagespeed.ts
+++ b/lib/api/pagespeed.ts
@@ -19,7 +19,7 @@ export interface AuditSummary {
   score: number | null
   display_value?: string
   savings_ms?: number
-  category: 'opportunity' | 'diagnostic' | 'passed'
+  category: 'opportunity' | 'diagnostic' | 'passed' | 'manual'
   group?: string // "performance", "accessibility", "best-practices", "seo"
   sub_group?: string // "a11y-names-labels", "a11y-contrast", etc.
   sub_group_title?: string // "Names and Labels", "Contrast", etc.
-- 
2.49.1


From 98fcce46478d89e3cf324278880af8715e5726bd Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 10:54:09 +0100
Subject: [PATCH 186/428] feat(pagespeed): switch trend chart from Recharts to
 visx for dashboard consistency

---
 app/sites/[id]/pagespeed/page.tsx | 103 ++++++++++--------------------
 1 file changed, 35 insertions(+), 68 deletions(-)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index 5463f20..3a22b43 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -8,20 +8,7 @@ import { updatePageSpeedConfig, triggerPageSpeedCheck, getPageSpeedLatest, type
 import { toast, Button } from '@ciphera-net/ui'
 import { motion } from 'framer-motion'
 import ScoreGauge from '@/components/pagespeed/ScoreGauge'
-import {
-  AreaChart,
-  Area,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  ReferenceLine,
-} from 'recharts'
-import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from '@/components/charts'
-
-// * Chart configuration for score trend
-const chartConfig = {
-  score: { label: 'Performance', color: 'var(--chart-1)' },
-} satisfies ChartConfig
+import { AreaChart as VisxAreaChart, Area as VisxArea, Grid as VisxGrid, XAxis as VisxXAxis, YAxis as VisxYAxis, ChartTooltip as VisxChartTooltip } from '@/components/ui/area-chart'
 
 // * Metric status thresholds (Google's Core Web Vitals thresholds)
 function getMetricStatus(metric: string, value: number | null): { label: string; color: string } {
@@ -225,14 +212,11 @@ export default function PageSpeedPage() {
     )
   }
 
-  // * Prepare chart data from history
+  // * Prepare chart data from history (visx needs Date objects for x-axis)
   const chartData = (historyChecks ?? []).map(c => ({
-    date: new Date(c.checked_at).toLocaleDateString('en-GB', { day: '2-digit', month: 'short' }),
-    score: c.performance_score,
+    dateObj: new Date(c.checked_at),
+    score: c.performance_score ?? 0,
   }))
-  // * Check if all chart labels are the same (single day of data)
-  const uniqueDates = new Set(chartData.map(d => d.date))
-  const hideXAxis = uniqueDates.size <= 1
 
   // * Parse audits into groups by Lighthouse category
   const audits = currentCheck?.audits ?? []
@@ -446,62 +430,45 @@ export default function PageSpeedPage() {
         </div>
       </div>
 
-      {/* Section 3 — Score Trend Chart */}
+      {/* Section 3 — Score Trend Chart (visx) */}
       {chartData.length >= 2 && (
         <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8 mb-6">
           <h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-4">
             Performance Score Trend
           </h3>
-          <ChartContainer config={chartConfig} className="h-40">
-            <AreaChart accessibilityLayer data={chartData} margin={{ top: 5, right: 5, left: -20, bottom: 0 }}>
-              <defs>
-                <linearGradient id="scoreGradient" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="0%" stopColor="var(--color-score)" stopOpacity={0.3} />
-                  <stop offset="100%" stopColor="var(--color-score)" stopOpacity={0.02} />
-                </linearGradient>
-              </defs>
-              <CartesianGrid
-                strokeDasharray="3 3"
-                stroke="var(--chart-grid)"
-                strokeOpacity={0.5}
-                vertical={false}
-              />
-              <XAxis
-                dataKey="date"
-                tick={hideXAxis ? false : { fontSize: 10, fill: 'var(--chart-axis)' }}
-                tickLine={false}
-                axisLine={false}
-                interval="preserveStartEnd"
-                hide={hideXAxis}
-              />
-              <YAxis
-                domain={[0, 100]}
-                tick={{ fontSize: 10, fill: 'var(--chart-axis)' }}
-                tickLine={false}
-                axisLine={false}
-              />
-              <ReferenceLine y={90} stroke="#0cce6b" strokeDasharray="4 4" strokeOpacity={0.6} />
-              <ReferenceLine y={50} stroke="#ff4e42" strokeDasharray="4 4" strokeOpacity={0.6} />
-              <ChartTooltip
-                content={
-                  <ChartTooltipContent
-                    className="text-xs"
-                    labelKey="date"
-                    formatter={(value) => <span className="font-semibold">{value}</span>}
-                  />
-                }
-              />
-              <Area
-                type="monotone"
+          <div className="h-40">
+            <VisxAreaChart
+              data={chartData as Record<string, unknown>[]}
+              xDataKey="dateObj"
+              aspectRatio="3 / 1"
+              margin={{ top: 10, right: 10, bottom: 30, left: 40 }}
+            >
+              <VisxGrid horizontal vertical={false} stroke="var(--chart-grid)" strokeDasharray="4,4" />
+              <VisxArea
                 dataKey="score"
-                stroke="var(--color-score)"
+                fill="var(--chart-line-primary)"
+                fillOpacity={0.15}
+                stroke="var(--chart-line-primary)"
                 strokeWidth={2}
-                fill="url(#scoreGradient)"
-                dot={false}
-                activeDot={{ r: 4, fill: 'var(--color-score)', strokeWidth: 0 }}
+                gradientToOpacity={0}
               />
-            </AreaChart>
-          </ChartContainer>
+              <VisxXAxis
+                numTicks={5}
+                formatLabel={(d: Date) => d.toLocaleDateString('en-GB', { day: 'numeric', month: 'short' })}
+              />
+              <VisxYAxis
+                numTicks={5}
+                formatValue={(v: number) => String(Math.round(v))}
+              />
+              <VisxChartTooltip
+                rows={(point: Record<string, unknown>) => [{
+                  label: 'Score',
+                  value: String(Math.round(point.score as number)),
+                  color: 'var(--chart-line-primary)',
+                }]}
+              />
+            </VisxAreaChart>
+          </div>
         </div>
       )}
 
-- 
2.49.1


From d02d8429e292002c9250f7df9c417a0bf3323af4 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 11:26:18 +0100
Subject: [PATCH 187/428] fix(pagespeed): contain visx chart within card bounds

---
 app/sites/[id]/pagespeed/page.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index 3a22b43..ab0d09f 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -432,15 +432,15 @@ export default function PageSpeedPage() {
 
       {/* Section 3 — Score Trend Chart (visx) */}
       {chartData.length >= 2 && (
-        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8 mb-6">
+        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8 mb-6 overflow-hidden">
           <h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-4">
             Performance Score Trend
           </h3>
-          <div className="h-40">
+          <div>
             <VisxAreaChart
               data={chartData as Record<string, unknown>[]}
               xDataKey="dateObj"
-              aspectRatio="3 / 1"
+              aspectRatio="4 / 1"
               margin={{ top: 10, right: 10, bottom: 30, left: 40 }}
             >
               <VisxGrid horizontal vertical={false} stroke="var(--chart-grid)" strokeDasharray="4,4" />
-- 
2.49.1


From 8d9a3f35927655ffb89364c95780fd257fd539a5 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 11:34:05 +0100
Subject: [PATCH 188/428] feat(pagespeed): add check history navigation with
 prev/next arrows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Navigate between historical checks using ◀ ▶ arrows in the hero
footer bar. Shows formatted date when viewing historical data,
"Last checked X ago" when on latest. Fetches full audit data via
getPageSpeedCheck when navigating to a historical check.
---
 app/sites/[id]/pagespeed/page.tsx | 121 ++++++++++++++++++++++++++++--
 1 file changed, 113 insertions(+), 8 deletions(-)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index ab0d09f..6ff082c 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -1,10 +1,10 @@
 'use client'
 
 import { useAuth } from '@/lib/auth/context'
-import { useEffect, useState, useRef, useCallback } from 'react'
+import { useEffect, useState, useRef, useCallback, useMemo } from 'react'
 import { useParams } from 'next/navigation'
 import { useSite, usePageSpeedConfig, usePageSpeedLatest, usePageSpeedHistory } from '@/lib/swr/dashboard'
-import { updatePageSpeedConfig, triggerPageSpeedCheck, getPageSpeedLatest, type PageSpeedCheck, type AuditSummary } from '@/lib/api/pagespeed'
+import { updatePageSpeedConfig, triggerPageSpeedCheck, getPageSpeedLatest, getPageSpeedCheck, type PageSpeedCheck, type AuditSummary } from '@/lib/api/pagespeed'
 import { toast, Button } from '@ciphera-net/ui'
 import { motion } from 'framer-motion'
 import ScoreGauge from '@/components/pagespeed/ScoreGauge'
@@ -75,8 +75,80 @@ export default function PageSpeedPage() {
 
   const { data: historyChecks } = usePageSpeedHistory(siteId, strategy)
 
-  // * Get the check for the current strategy
-  const currentCheck = latestChecks?.find(c => c.strategy === strategy) ?? null
+  // * Check history navigation — build unique check timestamps from history data
+  const [selectedCheckId, setSelectedCheckId] = useState<string | null>(null)
+  const [selectedCheckData, setSelectedCheckData] = useState<PageSpeedCheck | null>(null)
+  const [loadingCheck, setLoadingCheck] = useState(false)
+
+  // * Build unique check timestamps (each check has mobile+desktop at the same time)
+  const checkTimestamps = useMemo(() => {
+    if (!historyChecks?.length) return []
+    const seen = new Set<string>()
+    const timestamps: { id: string; checked_at: string }[] = []
+    // * History is sorted ASC by checked_at, reverse for newest first
+    for (let i = historyChecks.length - 1; i >= 0; i--) {
+      const c = historyChecks[i]
+      // * Group by minute to deduplicate mobile+desktop pairs
+      const key = c.checked_at.slice(0, 16)
+      if (!seen.has(key)) {
+        seen.add(key)
+        timestamps.push({ id: c.id, checked_at: c.checked_at })
+      }
+    }
+    return timestamps
+  }, [historyChecks])
+
+  const selectedIndex = selectedCheckId
+    ? checkTimestamps.findIndex(t => t.id === selectedCheckId)
+    : 0 // * 0 = latest
+
+  const canGoPrev = selectedIndex < checkTimestamps.length - 1
+  const canGoNext = selectedIndex > 0
+
+  const handlePrevCheck = () => {
+    if (!canGoPrev) return
+    const next = checkTimestamps[selectedIndex + 1]
+    setSelectedCheckId(next.id)
+  }
+
+  const handleNextCheck = () => {
+    if (selectedIndex <= 1) {
+      // * Going back to latest
+      setSelectedCheckId(null)
+      setSelectedCheckData(null)
+      return
+    }
+    const next = checkTimestamps[selectedIndex - 1]
+    setSelectedCheckId(next.id)
+  }
+
+  // * Fetch full check data when navigating to a historical check
+  useEffect(() => {
+    if (!selectedCheckId || !siteId) {
+      setSelectedCheckData(null)
+      return
+    }
+    let cancelled = false
+    setLoadingCheck(true)
+    getPageSpeedCheck(siteId, selectedCheckId).then(data => {
+      if (!cancelled) {
+        setSelectedCheckData(data)
+        setLoadingCheck(false)
+      }
+    }).catch(() => {
+      if (!cancelled) setLoadingCheck(false)
+    })
+    return () => { cancelled = true }
+  }, [selectedCheckId, siteId])
+
+  // * Determine which check to display — selected historical or latest
+  const displayCheck = selectedCheckId && selectedCheckData
+    ? selectedCheckData
+    : latestChecks?.find(c => c.strategy === strategy) ?? null
+
+  // * When viewing a historical check, we need both strategies — fetch the other one too
+  // * For simplicity, historical view shows the selected strategy's check
+  const currentCheck = displayCheck
 
   // * Set document title
   useEffect(() => {
@@ -299,7 +371,7 @@ export default function PageSpeedPage() {
             {(['mobile', 'desktop'] as const).map(tab => (
               <button
                 key={tab}
-                onClick={() => setStrategy(tab)}
+                onClick={() => { setStrategy(tab); setSelectedCheckId(null); setSelectedCheckData(null) }}
                 role="tab"
                 aria-selected={strategy === tab}
                 className={`relative px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded cursor-pointer ${
@@ -363,17 +435,50 @@ export default function PageSpeedPage() {
           )}
         </div>
 
-        {/* Last checked + frequency + legend */}
+        {/* Check navigator + frequency + legend */}
         <div className="flex flex-wrap items-center gap-x-4 gap-y-2 mt-6 pt-4 border-t border-neutral-100 dark:border-neutral-800">
-          <div className="flex items-center gap-3 text-sm text-neutral-500 dark:text-neutral-400">
+          <div className="flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400">
+            {/* Prev/Next arrows */}
+            {checkTimestamps.length > 1 && (
+              <button
+                onClick={handlePrevCheck}
+                disabled={!canGoPrev}
+                className="p-1 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+                aria-label="Previous check"
+              >
+                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+                </svg>
+              </button>
+            )}
             {currentCheck?.checked_at && (
-              <span>Last checked {formatTimeAgo(currentCheck.checked_at)}</span>
+              <span className="tabular-nums">
+                {selectedCheckId
+                  ? new Date(currentCheck.checked_at).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' })
+                  : `Last checked ${formatTimeAgo(currentCheck.checked_at)}`
+                }
+              </span>
+            )}
+            {checkTimestamps.length > 1 && (
+              <button
+                onClick={handleNextCheck}
+                disabled={!canGoNext}
+                className="p-1 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+                aria-label="Next check"
+              >
+                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+                </svg>
+              </button>
             )}
             {config?.frequency && (
               <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400">
                 {config.frequency}
               </span>
             )}
+            {loadingCheck && (
+              <span className="text-xs text-neutral-400 animate-pulse">Loading...</span>
+            )}
           </div>
           <div className="flex items-center gap-x-3 text-[11px] text-neutral-400 dark:text-neutral-500 ml-auto">
             <span className="flex items-center gap-1"><span className="inline-block w-2 h-2 rounded-full bg-red-500" />0&ndash;49</span>
-- 
2.49.1


From a0ef570137a9a55ef830dbbb79ee0fae69587e84 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 11:51:40 +0100
Subject: [PATCH 189/428] feat(pagespeed): inline frequency selector in hero
 footer

Replace static frequency badge with a pill toggle (Daily/Weekly/Monthly)
matching the Mobile/Desktop tab style. Updates config via API on click.
Read-only badge shown for non-admin users.
---
 app/sites/[id]/pagespeed/page.tsx | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index 6ff082c..71d3265 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -471,7 +471,34 @@ export default function PageSpeedPage() {
                 </svg>
               </button>
             )}
-            {config?.frequency && (
+            {/* Frequency selector */}
+            {canEdit && config && (
+              <div className="flex items-center gap-0.5 ml-1 bg-neutral-100 dark:bg-neutral-800 rounded-md p-0.5">
+                {(['daily', 'weekly', 'monthly'] as const).map(f => (
+                  <button
+                    key={f}
+                    onClick={async () => {
+                      if (f === config.frequency) return
+                      try {
+                        await updatePageSpeedConfig(siteId, { enabled: true, frequency: f })
+                        mutateConfig()
+                        toast.success(`Frequency updated to ${f}`)
+                      } catch {
+                        toast.error('Failed to update frequency')
+                      }
+                    }}
+                    className={`px-2 py-0.5 text-[11px] font-medium rounded transition-colors ${
+                      config.frequency === f
+                        ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
+                        : 'text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300'
+                    }`}
+                  >
+                    {f.charAt(0).toUpperCase() + f.slice(1)}
+                  </button>
+                ))}
+              </div>
+            )}
+            {!canEdit && config?.frequency && (
               <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400">
                 {config.frequency}
               </span>
-- 
2.49.1


From 31471792f896bcac6b912d664dfa3a409da1729c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 11:58:09 +0100
Subject: [PATCH 190/428] feat(pagespeed): move frequency selector to site
 settings

Revert inline frequency toggle from pagespeed page. Add PageSpeed
Monitoring section to site settings under the Data tab with a Select
dropdown for Daily/Weekly/Monthly. Shows "Not enabled" when PSI is off.
---
 app/sites/[id]/pagespeed/page.tsx | 29 +-------------------
 app/sites/[id]/settings/page.tsx  | 45 ++++++++++++++++++++++++++++++-
 2 files changed, 45 insertions(+), 29 deletions(-)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index 71d3265..6ff082c 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -471,34 +471,7 @@ export default function PageSpeedPage() {
                 </svg>
               </button>
             )}
-            {/* Frequency selector */}
-            {canEdit && config && (
-              <div className="flex items-center gap-0.5 ml-1 bg-neutral-100 dark:bg-neutral-800 rounded-md p-0.5">
-                {(['daily', 'weekly', 'monthly'] as const).map(f => (
-                  <button
-                    key={f}
-                    onClick={async () => {
-                      if (f === config.frequency) return
-                      try {
-                        await updatePageSpeedConfig(siteId, { enabled: true, frequency: f })
-                        mutateConfig()
-                        toast.success(`Frequency updated to ${f}`)
-                      } catch {
-                        toast.error('Failed to update frequency')
-                      }
-                    }}
-                    className={`px-2 py-0.5 text-[11px] font-medium rounded transition-colors ${
-                      config.frequency === f
-                        ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
-                        : 'text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300'
-                    }`}
-                  >
-                    {f.charAt(0).toUpperCase() + f.slice(1)}
-                  </button>
-                ))}
-              </div>
-            )}
-            {!canEdit && config?.frequency && (
+            {config?.frequency && (
               <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400">
                 {config.frequency}
               </span>
diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index 6e1520f..3b2d05d 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -21,7 +21,8 @@ import { Select, Modal, Button } from '@ciphera-net/ui'
 import { APP_URL } from '@/lib/api/client'
 import { generatePrivacySnippet } from '@/lib/utils/privacySnippet'
 import { useUnsavedChanges } from '@/lib/hooks/useUnsavedChanges'
-import { useSite, useGoals, useReportSchedules, useAlertSchedules, useSubscription, useGSCStatus, useBunnyStatus, useSessions, useBotFilterStats } from '@/lib/swr/dashboard'
+import { useSite, useGoals, useReportSchedules, useAlertSchedules, useSubscription, useGSCStatus, useBunnyStatus, useSessions, useBotFilterStats, usePageSpeedConfig } from '@/lib/swr/dashboard'
+import { updatePageSpeedConfig } from '@/lib/api/pagespeed'
 import { getRetentionOptionsForPlan, formatRetentionMonths } from '@/lib/plans'
 import { motion, AnimatePresence } from 'framer-motion'
 import { useAuth } from '@/lib/auth/context'
@@ -130,6 +131,7 @@ export default function SiteSettingsPage() {
   const [gscConnecting, setGscConnecting] = useState(false)
   const [gscDisconnecting, setGscDisconnecting] = useState(false)
   const { data: bunnyStatus, mutate: mutateBunnyStatus } = useBunnyStatus(siteId)
+  const { data: psiConfig, mutate: mutatePSIConfig } = usePageSpeedConfig(siteId)
   const [bunnyApiKey, setBunnyApiKey] = useState('')
   const [bunnyPullZones, setBunnyPullZones] = useState<BunnyPullZone[]>([])
   const [bunnySelectedZone, setBunnySelectedZone] = useState<BunnyPullZone | null>(null)
@@ -1345,6 +1347,47 @@ export default function SiteSettingsPage() {
                     </div>
                   </div>
 
+                  {/* PageSpeed Monitoring */}
+                  <div className="space-y-4 pt-6 border-t border-neutral-100 dark:border-neutral-800">
+                    <h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">PageSpeed Monitoring</h3>
+                    <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
+                      <div className="flex items-center justify-between">
+                        <div>
+                          <h4 className="font-medium text-neutral-900 dark:text-white">Check frequency</h4>
+                          <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
+                            How often PageSpeed Insights runs automated checks on your site.
+                          </p>
+                        </div>
+                        {psiConfig?.enabled ? (
+                          <Select
+                            value={psiConfig.frequency}
+                            onChange={async (v) => {
+                              try {
+                                await updatePageSpeedConfig(siteId, { enabled: true, frequency: v })
+                                mutatePSIConfig()
+                                toast.success(`PageSpeed frequency updated to ${v}`)
+                              } catch {
+                                toast.error('Failed to update frequency')
+                              }
+                            }}
+                            options={[
+                              { value: 'daily', label: 'Daily' },
+                              { value: 'weekly', label: 'Weekly' },
+                              { value: 'monthly', label: 'Monthly' },
+                            ]}
+                            variant="input"
+                            align="right"
+                            className="min-w-[130px]"
+                          />
+                        ) : (
+                          <span className="text-sm text-neutral-400 dark:text-neutral-500">
+                            Not enabled
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+
                   {/* Excluded Paths */}
                   <div className="space-y-4 pt-6 border-t border-neutral-100 dark:border-neutral-800">
                     <h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">Path Filtering</h3>
-- 
2.49.1


From 508bb006a8a6781257a01ec0fa790ff179181b70 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 12:23:10 +0100
Subject: [PATCH 191/428] fix(referrers): replace low-res Google favicon globe
 with proper icons

Detect Google's 16x16 default globe fallback via naturalWidth on load
and fall back to Phosphor icons. Add Chrome icon for googlechrome.github.io,
CursorClick for Direct, and abbreviation support (ig, fb, yt).
---
 components/dashboard/TopReferrers.tsx | 12 +++++++++---
 lib/utils/icons.tsx                   | 20 +++++++++++++++++---
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/components/dashboard/TopReferrers.tsx b/components/dashboard/TopReferrers.tsx
index 04f1e19..abf1353 100644
--- a/components/dashboard/TopReferrers.tsx
+++ b/components/dashboard/TopReferrers.tsx
@@ -2,7 +2,6 @@
 
 import { useState, useEffect } from 'react'
 import { logger } from '@/lib/utils/logger'
-import Image from 'next/image'
 import { formatNumber } from '@ciphera-net/ui'
 import { getReferrerDisplayName, getReferrerFavicon, getReferrerIcon, mergeReferrersByDisplayName } from '@/lib/utils/icons'
 import Link from 'next/link'
@@ -48,14 +47,21 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
     const useFavicon = faviconUrl && !faviconFailed.has(referrer)
     if (useFavicon) {
       return (
-        <Image
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
           src={faviconUrl}
           alt=""
           width={20}
           height={20}
           className="w-5 h-5 flex-shrink-0 rounded object-contain"
           onError={() => setFaviconFailed((prev) => new Set(prev).add(referrer))}
-          unoptimized
+          onLoad={(e) => {
+            // Google's favicon service returns a 16x16 default globe when no real favicon exists
+            const img = e.currentTarget
+            if (img.naturalWidth <= 16) {
+              setFaviconFailed((prev) => new Set(prev).add(referrer))
+            }
+          }}
         />
       )
     }
diff --git a/lib/utils/icons.tsx b/lib/utils/icons.tsx
index e1c7d4f..af5867c 100644
--- a/lib/utils/icons.tsx
+++ b/lib/utils/icons.tsx
@@ -6,6 +6,7 @@ import {
   DeviceTablet,
   Desktop,
   Link,
+  CursorClick,
 } from '@phosphor-icons/react'
 import {
   SiGoogle,
@@ -122,12 +123,16 @@ const SI = { size: 16 } as const
 export function getReferrerIcon(referrerName: string) {
   if (!referrerName) return <Globe className="text-neutral-400" />
   const lower = referrerName.toLowerCase()
+  // Direct traffic
+  if (lower === 'direct') return <CursorClick className="text-neutral-500" />
+  // Browsers as referrers (e.g. googlechrome.com, firefox.com)
+  if (lower.includes('googlechrome') || lower.includes('chrome')) return <img src="/icons/browsers/chrome.svg" alt="Chrome" width={16} height={16} className="inline-block" />
   // Social / platforms
   if (lower.includes('google') && !lower.includes('gemini')) return <SiGoogle size={SI.size} color="#4285F4" />
-  if (lower.includes('facebook')) return <SiFacebook size={SI.size} color="#0866FF" />
+  if (lower.includes('facebook') || lower === 'fb') return <SiFacebook size={SI.size} color="#0866FF" />
   if (lower.includes('twitter') || lower.includes('t.co') || lower.includes('x.com')) return <XIcon />
   if (lower.includes('linkedin')) return <LinkedInIcon />
-  if (lower.includes('instagram')) return <SiInstagram size={SI.size} color="#E4405F" />
+  if (lower.includes('instagram') || lower === 'ig') return <SiInstagram size={SI.size} color="#E4405F" />
   if (lower.includes('github')) return <SiGithub size={SI.size} color="#fff" />
   if (lower.includes('youtube')) return <SiYoutube size={SI.size} color="#FF0000" />
   if (lower.includes('reddit')) return <SiReddit size={SI.size} color="#FF4500" />
@@ -183,6 +188,10 @@ const REFERRER_DISPLAY_OVERRIDES: Record<string, string> = {
   threads: 'Threads',
   tumblr: 'Tumblr',
   quora: 'Quora',
+  ig: 'Instagram',
+  fb: 'Facebook',
+  yt: 'YouTube',
+  googlechrome: 'Google Chrome',
   't.co': 'X',
   'x.com': 'X',
   // AI assistants and search tools
@@ -239,7 +248,12 @@ export function getReferrerDisplayName(referrer: string): string {
   const trimmed = referrer.trim()
   if (trimmed === '') return ''
   const hostname = getReferrerHostname(trimmed)
-  if (!hostname) return trimmed
+  if (!hostname) {
+    // Plain names without a dot (e.g. "Ig", "Direct") — check override map before returning raw
+    const overrideByPlain = REFERRER_DISPLAY_OVERRIDES[trimmed.toLowerCase()]
+    if (overrideByPlain) return overrideByPlain
+    return trimmed
+  }
   const overrideByHostname = REFERRER_DISPLAY_OVERRIDES[hostname]
   if (overrideByHostname) return overrideByHostname
   const label = getReferrerLabel(hostname)
-- 
2.49.1


From 4064f7eabfe14010c2cbb535594f7bf754eec4fe Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 13:12:57 +0100
Subject: [PATCH 192/428] fix(referrers): prevent t.co substring match on
 reddit.com

"reddit.com".includes("t.co") was true, causing Reddit to show the
X icon. Use exact match or slash-delimited check instead.
---
 lib/utils/icons.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/utils/icons.tsx b/lib/utils/icons.tsx
index af5867c..a4e836c 100644
--- a/lib/utils/icons.tsx
+++ b/lib/utils/icons.tsx
@@ -130,7 +130,7 @@ export function getReferrerIcon(referrerName: string) {
   // Social / platforms
   if (lower.includes('google') && !lower.includes('gemini')) return <SiGoogle size={SI.size} color="#4285F4" />
   if (lower.includes('facebook') || lower === 'fb') return <SiFacebook size={SI.size} color="#0866FF" />
-  if (lower.includes('twitter') || lower.includes('t.co') || lower.includes('x.com')) return <XIcon />
+  if (lower.includes('twitter') || lower === 't.co' || lower.includes('t.co/') || lower.includes('x.com')) return <XIcon />
   if (lower.includes('linkedin')) return <LinkedInIcon />
   if (lower.includes('instagram') || lower === 'ig') return <SiInstagram size={SI.size} color="#E4405F" />
   if (lower.includes('github')) return <SiGithub size={SI.size} color="#fff" />
-- 
2.49.1


From 75bf8acd1e516b1ef8e0cfaac96988c617808fd0 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 13:21:15 +0100
Subject: [PATCH 193/428] refactor(referrers): unify icon, display name, and
 favicon into single registry
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace three separate data structures (getReferrerIcon if-chain,
REFERRER_DISPLAY_OVERRIDES, REFERRER_PREFER_ICON) with a single
REFERRER_REGISTRY. All matching is now exact key/hostname lookup
via resolveReferrer() — no more substring includes() that caused
collisions like t.co matching reddit.com.
---
 lib/utils/icons.tsx | 329 ++++++++++++++++++++++----------------------
 1 file changed, 162 insertions(+), 167 deletions(-)

diff --git a/lib/utils/icons.tsx b/lib/utils/icons.tsx
index a4e836c..d6a3d8d 100644
--- a/lib/utils/icons.tsx
+++ b/lib/utils/icons.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type ReactNode } from 'react'
 import {
   Globe,
   Question,
@@ -49,6 +49,8 @@ function BingIcon({ size = 16, color = '#258FFA' }: { size?: number; color?: str
  */
 export const FAVICON_SERVICE_URL = 'https://www.google.com/s2/favicons'
 
+// ─── Browser, OS, Device icons (unchanged) ───────────────────────────────────
+
 const BROWSER_ICON_MAP: Record<string, { file: string; ext: 'svg' | 'png' }> = {
   'chrome':           { file: 'chrome',           ext: 'svg' },
   'firefox':          { file: 'firefox',          ext: 'svg' },
@@ -118,49 +120,94 @@ export function getDeviceIcon(deviceName: string) {
   return <Question className="text-neutral-400" />
 }
 
+// ─── Referrer Registry ───────────────────────────────────────────────────────
+
 const SI = { size: 16 } as const
 
-export function getReferrerIcon(referrerName: string) {
-  if (!referrerName) return <Globe className="text-neutral-400" />
-  const lower = referrerName.toLowerCase()
-  // Direct traffic
-  if (lower === 'direct') return <CursorClick className="text-neutral-500" />
-  // Browsers as referrers (e.g. googlechrome.com, firefox.com)
-  if (lower.includes('googlechrome') || lower.includes('chrome')) return <img src="/icons/browsers/chrome.svg" alt="Chrome" width={16} height={16} className="inline-block" />
-  // Social / platforms
-  if (lower.includes('google') && !lower.includes('gemini')) return <SiGoogle size={SI.size} color="#4285F4" />
-  if (lower.includes('facebook') || lower === 'fb') return <SiFacebook size={SI.size} color="#0866FF" />
-  if (lower.includes('twitter') || lower === 't.co' || lower.includes('t.co/') || lower.includes('x.com')) return <XIcon />
-  if (lower.includes('linkedin')) return <LinkedInIcon />
-  if (lower.includes('instagram') || lower === 'ig') return <SiInstagram size={SI.size} color="#E4405F" />
-  if (lower.includes('github')) return <SiGithub size={SI.size} color="#fff" />
-  if (lower.includes('youtube')) return <SiYoutube size={SI.size} color="#FF0000" />
-  if (lower.includes('reddit')) return <SiReddit size={SI.size} color="#FF4500" />
-  if (lower.includes('whatsapp')) return <SiWhatsapp size={SI.size} color="#25D366" />
-  if (lower.includes('telegram')) return <SiTelegram size={SI.size} color="#26A5E4" />
-  if (lower.includes('snapchat')) return <SiSnapchat size={SI.size} color="#FFFC00" />
-  if (lower.includes('pinterest')) return <SiPinterest size={SI.size} color="#BD081C" />
-  if (lower.includes('threads')) return <SiThreads size={SI.size} color="#fff" />
-  if (lower.includes('discord')) return <SiDiscord size={SI.size} color="#5865F2" />
-  // Search engines
-  if (lower.includes('bing')) return <BingIcon />
-  if (lower.includes('duckduckgo')) return <SiDuckduckgo size={SI.size} color="#DE5833" />
-  if (lower.includes('brave')) return <SiBrave size={SI.size} color="#FB542B" />
-  // AI assistants
-  if (lower.includes('chatgpt') || lower.includes('openai')) return <OpenAIIcon />
-  if (lower.includes('perplexity')) return <SiPerplexity size={SI.size} color="#1FB8CD" />
-  if (lower.includes('claude') || lower.includes('anthropic')) return <SiAnthropic size={SI.size} color="#D97757" />
-  if (lower.includes('gemini')) return <SiGooglegemini size={SI.size} color="#8E75B2" />
-  if (lower.includes('copilot')) return <SiGithubcopilot size={SI.size} color="#fff" />
-  if (lower.includes('deepseek')) return <OpenAIIcon color="#4D6BFE" />
-  if (lower.includes('grok') || lower.includes('x.ai')) return <XIcon />
-  // Shared Link
-  if (lower === 'shared link') return <Link className="text-neutral-500" />
-
-  return <Globe className="text-neutral-400" />
+interface ReferrerEntry {
+  display: string
+  icon: () => ReactNode
+  hostnames?: string[]
+  aliases?: string[]
 }
 
-const REFERRER_NO_FAVICON = ['direct', 'shared link', 'unknown', '']
+/**
+ * Single source of truth for all known referrer brands.
+ * Key = canonical label (what getReferrerLabel extracts from hostnames).
+ * Adding a new brand = adding one entry here. Nothing else.
+ */
+const REFERRER_REGISTRY: Record<string, ReferrerEntry> = {
+  // ── Special ──
+  direct:      { display: 'Direct',      icon: () => <CursorClick className="text-neutral-500" /> },
+  'shared link': { display: 'Shared Link', icon: () => <Link className="text-neutral-500" /> },
+
+  // ── Social / platforms ──
+  google:      { display: 'Google',      icon: () => <SiGoogle size={SI.size} color="#4285F4" /> },
+  facebook:    { display: 'Facebook',    icon: () => <SiFacebook size={SI.size} color="#0866FF" />,    aliases: ['fb'] },
+  x:           { display: 'X',           icon: () => <XIcon />,                                       hostnames: ['t.co', 'x.com', 'twitter.com'] },
+  linkedin:    { display: 'LinkedIn',    icon: () => <LinkedInIcon /> },
+  instagram:   { display: 'Instagram',   icon: () => <SiInstagram size={SI.size} color="#E4405F" />,   aliases: ['ig'] },
+  github:      { display: 'GitHub',      icon: () => <SiGithub size={SI.size} color="#fff" /> },
+  youtube:     { display: 'YouTube',     icon: () => <SiYoutube size={SI.size} color="#FF0000" />,     aliases: ['yt'] },
+  reddit:      { display: 'Reddit',      icon: () => <SiReddit size={SI.size} color="#FF4500" /> },
+  whatsapp:    { display: 'WhatsApp',    icon: () => <SiWhatsapp size={SI.size} color="#25D366" /> },
+  telegram:    { display: 'Telegram',    icon: () => <SiTelegram size={SI.size} color="#26A5E4" />,    hostnames: ['t.me'] },
+  snapchat:    { display: 'Snapchat',    icon: () => <SiSnapchat size={SI.size} color="#FFFC00" /> },
+  pinterest:   { display: 'Pinterest',   icon: () => <SiPinterest size={SI.size} color="#BD081C" /> },
+  threads:     { display: 'Threads',     icon: () => <SiThreads size={SI.size} color="#fff" /> },
+  discord:     { display: 'Discord',     icon: () => <SiDiscord size={SI.size} color="#5865F2" /> },
+  tumblr:      { display: 'Tumblr',      icon: () => <Globe className="text-neutral-400" /> },
+  quora:       { display: 'Quora',       icon: () => <Globe className="text-neutral-400" /> },
+
+  // ── Search engines ──
+  bing:        { display: 'Bing',        icon: () => <BingIcon /> },
+  duckduckgo:  { display: 'DuckDuckGo',  icon: () => <SiDuckduckgo size={SI.size} color="#DE5833" /> },
+  brave:       { display: 'Brave',       icon: () => <SiBrave size={SI.size} color="#FB542B" /> },
+
+  // ── AI assistants ──
+  chatgpt:     { display: 'ChatGPT',     icon: () => <OpenAIIcon />,                                  hostnames: ['chat.openai.com', 'openai.com'] },
+  perplexity:  { display: 'Perplexity',  icon: () => <SiPerplexity size={SI.size} color="#1FB8CD" /> },
+  claude:      { display: 'Claude',      icon: () => <SiAnthropic size={SI.size} color="#D97757" />,   hostnames: ['anthropic.com'] },
+  gemini:      { display: 'Gemini',      icon: () => <SiGooglegemini size={SI.size} color="#8E75B2" />, hostnames: ['gemini.google.com'] },
+  copilot:     { display: 'Copilot',     icon: () => <SiGithubcopilot size={SI.size} color="#fff" />,  hostnames: ['copilot.microsoft.com'] },
+  deepseek:    { display: 'DeepSeek',    icon: () => <OpenAIIcon color="#4D6BFE" />,                   hostnames: ['chat.deepseek.com'] },
+  grok:        { display: 'Grok',        icon: () => <XIcon />,                                       hostnames: ['grok.x.ai', 'x.ai'] },
+  you:         { display: 'You.com',     icon: () => <Globe className="text-neutral-400" /> },
+  phind:       { display: 'Phind',       icon: () => <Globe className="text-neutral-400" /> },
+
+  // ── Browsers as referrers ──
+  googlechrome: { display: 'Google Chrome', icon: () => <img src="/icons/browsers/chrome.svg" alt="Chrome" width={16} height={16} className="inline-block" />, hostnames: ['googlechrome.github.io'] },
+}
+
+// ── Derived lookup maps (built once at module load) ──
+
+/** alias → registry key (e.g. "ig" → "instagram", "fb" → "facebook") */
+const ALIAS_TO_KEY: Record<string, string> = {}
+
+/** exact hostname → registry key (e.g. "t.co" → "x", "t.me" → "telegram") */
+const HOSTNAME_TO_KEY: Record<string, string> = {}
+
+/** All known hostnames — union of auto-derived (key + ".com") and explicit hostnames */
+const ALL_KNOWN_HOSTNAMES = new Set<string>()
+
+for (const [key, entry] of Object.entries(REFERRER_REGISTRY)) {
+  if (entry.aliases) {
+    for (const alias of entry.aliases) {
+      ALIAS_TO_KEY[alias] = key
+    }
+  }
+  if (entry.hostnames) {
+    for (const hostname of entry.hostnames) {
+      HOSTNAME_TO_KEY[hostname] = key
+      ALL_KNOWN_HOSTNAMES.add(hostname)
+    }
+  }
+  // Auto-derive common hostnames from the key itself
+  ALL_KNOWN_HOSTNAMES.add(`${key}.com`)
+  ALL_KNOWN_HOSTNAMES.add(`www.${key}.com`)
+}
+
+// ── Referrer resolution ──
 
 /** Common subdomains to skip when deriving the main label (e.g. l.instagram.com → instagram). */
 const REFERRER_SUBDOMAIN_SKIP = new Set([
@@ -168,59 +215,7 @@ const REFERRER_SUBDOMAIN_SKIP = new Set([
   'sub', 'api', 'static', 'cdn', 'blog', 'shop', 'support', 'help', 'link',
 ])
 
-/**
- * Override map for display names when the heuristic would be wrong (casing or brand alias).
- * Keys: lowercase label or hostname. Values: exact display name.
- */
-const REFERRER_DISPLAY_OVERRIDES: Record<string, string> = {
-  chatgpt: 'ChatGPT',
-  linkedin: 'LinkedIn',
-  youtube: 'YouTube',
-  reddit: 'Reddit',
-  github: 'GitHub',
-  bing: 'Bing',
-  brave: 'Brave',
-  duckduckgo: 'DuckDuckGo',
-  whatsapp: 'WhatsApp',
-  telegram: 'Telegram',
-  pinterest: 'Pinterest',
-  snapchat: 'Snapchat',
-  threads: 'Threads',
-  tumblr: 'Tumblr',
-  quora: 'Quora',
-  ig: 'Instagram',
-  fb: 'Facebook',
-  yt: 'YouTube',
-  googlechrome: 'Google Chrome',
-  't.co': 'X',
-  'x.com': 'X',
-  // AI assistants and search tools
-  openai: 'ChatGPT',
-  perplexity: 'Perplexity',
-  claude: 'Claude',
-  anthropic: 'Claude',
-  gemini: 'Gemini',
-  copilot: 'Copilot',
-  deepseek: 'DeepSeek',
-  grok: 'Grok',
-  'you': 'You.com',
-  phind: 'Phind',
-}
-
-/**
- * Returns the hostname for a referrer string (URL or plain hostname), or null if invalid.
- */
-function getReferrerHostname(referrer: string): string | null {
-  if (!referrer || typeof referrer !== 'string') return null
-  const trimmed = referrer.trim()
-  if (REFERRER_NO_FAVICON.includes(trimmed.toLowerCase())) return null
-  try {
-    const url = new URL(trimmed.startsWith('http') ? trimmed : `https://${trimmed}`)
-    return url.hostname.toLowerCase()
-  } catch {
-    return null
-  }
-}
+const REFERRER_NO_FAVICON = new Set(['direct', 'shared link', 'unknown', ''])
 
 /**
  * Derives the main label from a hostname (e.g. "l.instagram.com" → "instagram", "google.com" → "google").
@@ -234,32 +229,91 @@ function getReferrerLabel(hostname: string): string {
   return parts[0] ?? withoutWww
 }
 
+function getReferrerHostname(referrer: string): string | null {
+  if (!referrer || typeof referrer !== 'string') return null
+  const trimmed = referrer.trim()
+  if (REFERRER_NO_FAVICON.has(trimmed.toLowerCase())) return null
+  try {
+    const url = new URL(trimmed.startsWith('http') ? trimmed : `https://${trimmed}`)
+    return url.hostname.toLowerCase()
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Resolves a raw referrer string to a registry entry.
+ * Returns null if no known brand matches (unknown domain → use favicon service).
+ */
+function resolveReferrer(referrer: string): ReferrerEntry | null {
+  if (!referrer || typeof referrer !== 'string') return null
+  const lower = referrer.trim().toLowerCase()
+
+  // 1. Exact registry key match (e.g. "Direct", "Reddit", "Google")
+  if (REFERRER_REGISTRY[lower]) return REFERRER_REGISTRY[lower]
+
+  // 2. Alias match (e.g. "ig" → instagram, "fb" → facebook)
+  const aliasKey = ALIAS_TO_KEY[lower]
+  if (aliasKey) return REFERRER_REGISTRY[aliasKey]
+
+  // 3. Hostname-based matching
+  const hostname = getReferrerHostname(referrer)
+  if (!hostname) return null
+
+  // 3a. Exact hostname match (e.g. "t.co" → x, "t.me" → telegram)
+  const hostnameKey = HOSTNAME_TO_KEY[hostname]
+  if (hostnameKey) return REFERRER_REGISTRY[hostnameKey]
+
+  // 3b. Label-based lookup (e.g. "old.reddit.com" → label "reddit" → registry hit)
+  const label = getReferrerLabel(hostname)
+  if (REFERRER_REGISTRY[label]) return REFERRER_REGISTRY[label]
+
+  // 3c. Check alias from label (e.g. hostname "ig.something.com" → label "ig" → alias → instagram)
+  const labelAliasKey = ALIAS_TO_KEY[label]
+  if (labelAliasKey) return REFERRER_REGISTRY[labelAliasKey]
+
+  return null
+}
+
+// ── Public API (same signatures as before) ──
+
+export function getReferrerIcon(referrerName: string): ReactNode {
+  if (!referrerName) return <Globe className="text-neutral-400" />
+  const entry = resolveReferrer(referrerName)
+  if (entry) return entry.icon()
+  return <Globe className="text-neutral-400" />
+}
+
 function capitalizeLabel(label: string): string {
   if (!label) return label
   return label.charAt(0).toUpperCase() + label.slice(1).toLowerCase()
 }
 
-/**
- * Returns a friendly display name for the referrer (e.g. "Google" instead of "google.com").
- * Uses a heuristic (hostname → main label → capitalize) plus a small override map for famous brands.
- */
 export function getReferrerDisplayName(referrer: string): string {
   if (!referrer || typeof referrer !== 'string') return referrer || ''
   const trimmed = referrer.trim()
   if (trimmed === '') return ''
+  const entry = resolveReferrer(trimmed)
+  if (entry) return entry.display
+  // Unknown referrer — derive display name from hostname
   const hostname = getReferrerHostname(trimmed)
-  if (!hostname) {
-    // Plain names without a dot (e.g. "Ig", "Direct") — check override map before returning raw
-    const overrideByPlain = REFERRER_DISPLAY_OVERRIDES[trimmed.toLowerCase()]
-    if (overrideByPlain) return overrideByPlain
-    return trimmed
+  if (!hostname) return trimmed
+  return capitalizeLabel(getReferrerLabel(hostname))
+}
+
+export function getReferrerFavicon(referrer: string): string | null {
+  if (!referrer || typeof referrer !== 'string') return null
+  const normalized = referrer.trim().toLowerCase()
+  if (REFERRER_NO_FAVICON.has(normalized)) return null
+  if (!normalized.includes('.')) return null
+  // Known brand → skip favicon service, use registry icon
+  if (resolveReferrer(referrer)) return null
+  try {
+    const url = new URL(referrer.startsWith('http') ? referrer : `https://${referrer}`)
+    return `${FAVICON_SERVICE_URL}?domain=${url.hostname.toLowerCase()}&sz=32`
+  } catch {
+    return null
   }
-  const overrideByHostname = REFERRER_DISPLAY_OVERRIDES[hostname]
-  if (overrideByHostname) return overrideByHostname
-  const label = getReferrerLabel(hostname)
-  const overrideByLabel = REFERRER_DISPLAY_OVERRIDES[label]
-  if (overrideByLabel) return overrideByLabel
-  return capitalizeLabel(label)
 }
 
 /**
@@ -287,62 +341,3 @@ export function mergeReferrersByDisplayName(
     .map(({ referrer, pageviews }) => ({ referrer, pageviews }))
     .sort((a, b) => b.pageviews - a.pageviews)
 }
-
-/**
- * Domains/labels where the Phosphor icon is better than Google's favicon service.
- * For these, getReferrerFavicon returns null so the caller falls back to getReferrerIcon.
- */
-const REFERRER_PREFER_ICON = new Set([
-  // Social / platforms
-  't.co', 'x.com', 'twitter.com', 'www.twitter.com',
-  'google.com', 'www.google.com',
-  'facebook.com', 'www.facebook.com', 'm.facebook.com', 'l.facebook.com',
-  'instagram.com', 'www.instagram.com', 'l.instagram.com',
-  'linkedin.com', 'www.linkedin.com',
-  'github.com', 'www.github.com',
-  'youtube.com', 'www.youtube.com', 'm.youtube.com',
-  'reddit.com', 'www.reddit.com', 'old.reddit.com',
-  'whatsapp.com', 'www.whatsapp.com', 'web.whatsapp.com',
-  'telegram.org', 'web.telegram.org', 't.me',
-  'snapchat.com', 'www.snapchat.com',
-  'pinterest.com', 'www.pinterest.com',
-  'threads.net', 'www.threads.net',
-  // Search engines
-  'bing.com', 'www.bing.com',
-  'duckduckgo.com', 'www.duckduckgo.com',
-  'search.brave.com', 'brave.com',
-  // AI assistants
-  'chatgpt.com', 'chat.openai.com', 'openai.com',
-  'perplexity.ai', 'www.perplexity.ai',
-  'claude.ai', 'www.claude.ai', 'anthropic.com',
-  'gemini.google.com',
-  'copilot.microsoft.com',
-  'deepseek.com', 'chat.deepseek.com',
-  'grok.x.ai', 'x.ai',
-  'phind.com', 'www.phind.com',
-  'you.com', 'www.you.com',
-])
-
-/**
- * Returns a favicon URL for the referrer's domain, or null for non-URL referrers
- * (e.g. "Direct", "Unknown") or known services where the Phosphor icon is better.
- */
-export function getReferrerFavicon(referrer: string): string | null {
-  if (!referrer || typeof referrer !== 'string') return null
-  const normalized = referrer.trim().toLowerCase()
-  if (REFERRER_NO_FAVICON.includes(normalized)) return null
-  // Plain names without a dot (e.g. "Instagram", "WhatsApp") are not real domains
-  if (!normalized.includes('.')) return null
-  try {
-    const url = new URL(referrer.startsWith('http') ? referrer : `https://${referrer}`)
-    const hostname = url.hostname.toLowerCase()
-    // Use Phosphor icon for known services — Google favicons are unreliable for these
-    if (REFERRER_PREFER_ICON.has(hostname)) return null
-    // Also check if the label matches a known referrer (catches subdomains like search.google.com)
-    const label = getReferrerLabel(hostname)
-    if (REFERRER_DISPLAY_OVERRIDES[label]) return null
-    return `${FAVICON_SERVICE_URL}?domain=${hostname}&sz=32`
-  } catch {
-    return null
-  }
-}
-- 
2.49.1


From 55a08301f4b20984571759c8724ec73b3cd2f01b Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 13:29:53 +0100
Subject: [PATCH 194/428] fix(build): extract FAVICON_SERVICE_URL to prevent
 server-side createContext error

The share/[id] layout is a server component that imported FAVICON_SERVICE_URL
from icons.tsx, pulling in the entire React icon registry and triggering
createContext on the server. Moved the constant to its own favicon.ts module.
---
 app/share/[id]/layout.tsx        | 2 +-
 app/share/[id]/page.tsx          | 2 +-
 components/dashboard/Sidebar.tsx | 2 +-
 components/sites/SiteList.tsx    | 2 +-
 lib/utils/favicon.ts             | 8 ++++++++
 lib/utils/icons.tsx              | 7 ++-----
 6 files changed, 14 insertions(+), 9 deletions(-)
 create mode 100644 lib/utils/favicon.ts

diff --git a/app/share/[id]/layout.tsx b/app/share/[id]/layout.tsx
index 60de8ee..7a0189e 100644
--- a/app/share/[id]/layout.tsx
+++ b/app/share/[id]/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from 'next'
-import { FAVICON_SERVICE_URL } from '@/lib/utils/icons'
+import { FAVICON_SERVICE_URL } from '@/lib/utils/favicon'
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8082'
 
diff --git a/app/share/[id]/page.tsx b/app/share/[id]/page.tsx
index 780c17f..c5b00b9 100644
--- a/app/share/[id]/page.tsx
+++ b/app/share/[id]/page.tsx
@@ -16,7 +16,7 @@ import TechSpecs from '@/components/dashboard/TechSpecs'
 import { Select, DatePicker as DatePickerModal, Captcha, DownloadIcon, ZapIcon } from '@ciphera-net/ui'
 import { DashboardSkeleton, useMinimumLoading, useSkeletonFade } from '@/components/skeletons'
 import ExportModal from '@/components/dashboard/ExportModal'
-import { FAVICON_SERVICE_URL } from '@/lib/utils/icons'
+import { FAVICON_SERVICE_URL } from '@/lib/utils/favicon'
 
 // Helper to get date ranges
 const getDateRange = (days: number) => {
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 284208d..b5d514b 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -9,7 +9,7 @@ import { useSettingsModal } from '@/lib/settings-modal-context'
 import { getUserOrganizations, switchContext, type OrganizationMember } from '@/lib/api/organization'
 import { setSessionAction } from '@/app/actions/auth'
 import { logger } from '@/lib/utils/logger'
-import { FAVICON_SERVICE_URL } from '@/lib/utils/icons'
+import { FAVICON_SERVICE_URL } from '@/lib/utils/favicon'
 import { Gauge as GaugeIcon } from '@phosphor-icons/react'
 import {
   LayoutDashboardIcon,
diff --git a/components/sites/SiteList.tsx b/components/sites/SiteList.tsx
index ea15114..7480442 100644
--- a/components/sites/SiteList.tsx
+++ b/components/sites/SiteList.tsx
@@ -7,7 +7,7 @@ import type { Stats } from '@/lib/api/stats'
 import { formatNumber } from '@ciphera-net/ui'
 import { BarChartIcon, SettingsIcon, BookOpenIcon, ExternalLinkIcon, Button } from '@ciphera-net/ui'
 import { useAuth } from '@/lib/auth/context'
-import { FAVICON_SERVICE_URL } from '@/lib/utils/icons'
+import { FAVICON_SERVICE_URL } from '@/lib/utils/favicon'
 
 export type SiteStatsMap = Record<string, { stats: Stats }>
 
diff --git a/lib/utils/favicon.ts b/lib/utils/favicon.ts
new file mode 100644
index 0000000..8e77df8
--- /dev/null
+++ b/lib/utils/favicon.ts
@@ -0,0 +1,8 @@
+/**
+ * Google's public favicon service base URL.
+ * Append `?domain=<host>&sz=<px>` to get a favicon.
+ *
+ * Kept in a separate module so server components can import it
+ * without pulling in the React-dependent icon registry.
+ */
+export const FAVICON_SERVICE_URL = 'https://www.google.com/s2/favicons'
diff --git a/lib/utils/icons.tsx b/lib/utils/icons.tsx
index d6a3d8d..71b1f28 100644
--- a/lib/utils/icons.tsx
+++ b/lib/utils/icons.tsx
@@ -43,11 +43,8 @@ function BingIcon({ size = 16, color = '#258FFA' }: { size?: number; color?: str
   return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M5.71 0v18.39l4.44 2.46 8.14-4.69v-4.71l-8.14-2.84V4.09L5.71 0zm4.44 11.19l4.39 1.53v2.78l-4.39 2.53v-6.84z"/></svg>
 }
 
-/**
- * Google's public favicon service base URL.
- * Append `?domain=<host>&sz=<px>` to get a favicon.
- */
-export const FAVICON_SERVICE_URL = 'https://www.google.com/s2/favicons'
+import { FAVICON_SERVICE_URL } from './favicon'
+export { FAVICON_SERVICE_URL }
 
 // ─── Browser, OS, Device icons (unchanged) ───────────────────────────────────
 
-- 
2.49.1


From 01c50ab971be69d6d8eb9daa99c93e5e8d53a1b7 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 14:43:41 +0100
Subject: [PATCH 195/428] fix(pagespeed): make frequency interactive and show
 next check time

- Replace dead frequency badge with inline dropdown selector
- Add "Next in Xh" indicator from next_check_at
- Demote "Disable" button to subtle text link (was competing with Run Check)
- Add cursor-pointer to prev/next history arrows
- Narrow filmstrip fade to avoid covering content
---
 app/sites/[id]/pagespeed/page.tsx | 71 +++++++++++++++++++++++++------
 1 file changed, 58 insertions(+), 13 deletions(-)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index 6ff082c..8ef7e7d 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -49,6 +49,18 @@ function formatTimeAgo(dateString: string | null): string {
   return `${Math.floor(diffSec / 86400)}d ago`
 }
 
+function formatTimeUntil(dateString: string | null): string | null {
+  if (!dateString) return null
+  const date = new Date(dateString)
+  const now = new Date()
+  const diffMs = date.getTime() - now.getTime()
+  if (diffMs <= 0) return 'soon'
+  const diffSec = Math.floor(diffMs / 1000)
+  if (diffSec < 3600) return `in ${Math.floor(diffSec / 60)}m`
+  if (diffSec < 86400) return `in ${Math.floor(diffSec / 3600)}h`
+  return `in ${Math.floor(diffSec / 86400)}d`
+}
+
 // * Get dot color for audit items based on score
 function getAuditDotColor(score: number | null): string {
   if (score === null) return 'bg-neutral-400'
@@ -175,6 +187,18 @@ export default function PageSpeedPage() {
     }
   }
 
+  // * Change frequency inline (without disabling/re-enabling)
+  const handleFrequencyChange = async (newFrequency: string) => {
+    setFrequency(newFrequency)
+    try {
+      await updatePageSpeedConfig(siteId, { enabled: true, frequency: newFrequency })
+      mutateConfig()
+    } catch {
+      toast.error('Failed to update check frequency')
+      if (config?.frequency) setFrequency(config.frequency)
+    }
+  }
+
   // * Trigger a manual PageSpeed check
   const pollRef = useRef<ReturnType<typeof setInterval> | null>(null)
   const stopPolling = useCallback(() => {
@@ -400,14 +424,13 @@ export default function PageSpeedPage() {
               >
                 {running ? 'Running...' : 'Run Check'}
               </Button>
-              <Button
-                variant="secondary"
+              <button
                 onClick={() => handleToggle(false)}
                 disabled={toggling}
-                className="text-sm"
+                className="text-sm text-neutral-400 dark:text-neutral-500 hover:text-red-500 dark:hover:text-red-400 disabled:opacity-50 cursor-pointer transition-colors"
               >
                 {toggling ? 'Disabling...' : 'Disable'}
-              </Button>
+              </button>
             </>
           )}
         </div>
@@ -443,7 +466,7 @@ export default function PageSpeedPage() {
               <button
                 onClick={handlePrevCheck}
                 disabled={!canGoPrev}
-                className="p-1 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+                className="p-1 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800 disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer transition-colors"
                 aria-label="Previous check"
               >
                 <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -463,7 +486,7 @@ export default function PageSpeedPage() {
               <button
                 onClick={handleNextCheck}
                 disabled={!canGoNext}
-                className="p-1 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+                className="p-1 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800 disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer transition-colors"
                 aria-label="Next check"
               >
                 <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -471,14 +494,36 @@ export default function PageSpeedPage() {
                 </svg>
               </button>
             )}
-            {config?.frequency && (
-              <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400">
-                {config.frequency}
-              </span>
-            )}
             {loadingCheck && (
               <span className="text-xs text-neutral-400 animate-pulse">Loading...</span>
             )}
+            <span className="text-neutral-300 dark:text-neutral-700 select-none">&middot;</span>
+            {/* Inline frequency selector */}
+            {canEdit ? (
+              <select
+                value={frequency}
+                onChange={(e) => handleFrequencyChange(e.target.value)}
+                className="text-xs bg-transparent border-none text-neutral-500 dark:text-neutral-400 cursor-pointer focus:outline-none focus:ring-0 p-0 pr-4 appearance-none"
+                style={{ backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'right center' }}
+              >
+                <option value="daily">daily</option>
+                <option value="weekly">weekly</option>
+                <option value="monthly">monthly</option>
+              </select>
+            ) : (
+              <span className="text-xs text-neutral-500 dark:text-neutral-400">
+                {config?.frequency}
+              </span>
+            )}
+            {/* Next check indicator */}
+            {config?.next_check_at && !selectedCheckId && (
+              <>
+                <span className="text-neutral-300 dark:text-neutral-700 select-none">&middot;</span>
+                <span className="text-xs text-neutral-400 dark:text-neutral-500">
+                  Next {formatTimeUntil(config.next_check_at)}
+                </span>
+              </>
+            )}
           </div>
           <div className="flex items-center gap-x-3 text-[11px] text-neutral-400 dark:text-neutral-500 ml-auto">
             <span className="flex items-center gap-1"><span className="inline-block w-2 h-2 rounded-full bg-red-500" />0&ndash;49</span>
@@ -508,8 +553,8 @@ export default function PageSpeedPage() {
               </div>
             ))}
           </div>
-          {/* Fade indicator for horizontal scroll */}
-          <div className="absolute right-0 top-0 bottom-0 w-12 bg-gradient-to-l from-white dark:from-neutral-900 to-transparent rounded-r-2xl pointer-events-none" />
+          {/* Fade indicator for horizontal scroll — only covers padding area */}
+          <div className="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-white dark:from-neutral-900 to-transparent rounded-r-2xl pointer-events-none" />
         </div>
       )}
 
-- 
2.49.1


From 8c3b77e8e5d73f30f4beefcd05e1c4261c66ed1c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 14:46:10 +0100
Subject: [PATCH 196/428] Revert "fix(pagespeed): make frequency interactive
 and show next check time"

This reverts commit 01c50ab971be69d6d8eb9daa99c93e5e8d53a1b7.
---
 app/sites/[id]/pagespeed/page.tsx | 71 ++++++-------------------------
 1 file changed, 13 insertions(+), 58 deletions(-)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index 8ef7e7d..6ff082c 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -49,18 +49,6 @@ function formatTimeAgo(dateString: string | null): string {
   return `${Math.floor(diffSec / 86400)}d ago`
 }
 
-function formatTimeUntil(dateString: string | null): string | null {
-  if (!dateString) return null
-  const date = new Date(dateString)
-  const now = new Date()
-  const diffMs = date.getTime() - now.getTime()
-  if (diffMs <= 0) return 'soon'
-  const diffSec = Math.floor(diffMs / 1000)
-  if (diffSec < 3600) return `in ${Math.floor(diffSec / 60)}m`
-  if (diffSec < 86400) return `in ${Math.floor(diffSec / 3600)}h`
-  return `in ${Math.floor(diffSec / 86400)}d`
-}
-
 // * Get dot color for audit items based on score
 function getAuditDotColor(score: number | null): string {
   if (score === null) return 'bg-neutral-400'
@@ -187,18 +175,6 @@ export default function PageSpeedPage() {
     }
   }
 
-  // * Change frequency inline (without disabling/re-enabling)
-  const handleFrequencyChange = async (newFrequency: string) => {
-    setFrequency(newFrequency)
-    try {
-      await updatePageSpeedConfig(siteId, { enabled: true, frequency: newFrequency })
-      mutateConfig()
-    } catch {
-      toast.error('Failed to update check frequency')
-      if (config?.frequency) setFrequency(config.frequency)
-    }
-  }
-
   // * Trigger a manual PageSpeed check
   const pollRef = useRef<ReturnType<typeof setInterval> | null>(null)
   const stopPolling = useCallback(() => {
@@ -424,13 +400,14 @@ export default function PageSpeedPage() {
               >
                 {running ? 'Running...' : 'Run Check'}
               </Button>
-              <button
+              <Button
+                variant="secondary"
                 onClick={() => handleToggle(false)}
                 disabled={toggling}
-                className="text-sm text-neutral-400 dark:text-neutral-500 hover:text-red-500 dark:hover:text-red-400 disabled:opacity-50 cursor-pointer transition-colors"
+                className="text-sm"
               >
                 {toggling ? 'Disabling...' : 'Disable'}
-              </button>
+              </Button>
             </>
           )}
         </div>
@@ -466,7 +443,7 @@ export default function PageSpeedPage() {
               <button
                 onClick={handlePrevCheck}
                 disabled={!canGoPrev}
-                className="p-1 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800 disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer transition-colors"
+                className="p-1 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
                 aria-label="Previous check"
               >
                 <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -486,7 +463,7 @@ export default function PageSpeedPage() {
               <button
                 onClick={handleNextCheck}
                 disabled={!canGoNext}
-                className="p-1 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800 disabled:opacity-30 disabled:cursor-not-allowed cursor-pointer transition-colors"
+                className="p-1 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
                 aria-label="Next check"
               >
                 <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -494,35 +471,13 @@ export default function PageSpeedPage() {
                 </svg>
               </button>
             )}
-            {loadingCheck && (
-              <span className="text-xs text-neutral-400 animate-pulse">Loading...</span>
-            )}
-            <span className="text-neutral-300 dark:text-neutral-700 select-none">&middot;</span>
-            {/* Inline frequency selector */}
-            {canEdit ? (
-              <select
-                value={frequency}
-                onChange={(e) => handleFrequencyChange(e.target.value)}
-                className="text-xs bg-transparent border-none text-neutral-500 dark:text-neutral-400 cursor-pointer focus:outline-none focus:ring-0 p-0 pr-4 appearance-none"
-                style={{ backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'right center' }}
-              >
-                <option value="daily">daily</option>
-                <option value="weekly">weekly</option>
-                <option value="monthly">monthly</option>
-              </select>
-            ) : (
-              <span className="text-xs text-neutral-500 dark:text-neutral-400">
-                {config?.frequency}
+            {config?.frequency && (
+              <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400">
+                {config.frequency}
               </span>
             )}
-            {/* Next check indicator */}
-            {config?.next_check_at && !selectedCheckId && (
-              <>
-                <span className="text-neutral-300 dark:text-neutral-700 select-none">&middot;</span>
-                <span className="text-xs text-neutral-400 dark:text-neutral-500">
-                  Next {formatTimeUntil(config.next_check_at)}
-                </span>
-              </>
+            {loadingCheck && (
+              <span className="text-xs text-neutral-400 animate-pulse">Loading...</span>
             )}
           </div>
           <div className="flex items-center gap-x-3 text-[11px] text-neutral-400 dark:text-neutral-500 ml-auto">
@@ -553,8 +508,8 @@ export default function PageSpeedPage() {
               </div>
             ))}
           </div>
-          {/* Fade indicator for horizontal scroll — only covers padding area */}
-          <div className="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-white dark:from-neutral-900 to-transparent rounded-r-2xl pointer-events-none" />
+          {/* Fade indicator for horizontal scroll */}
+          <div className="absolute right-0 top-0 bottom-0 w-12 bg-gradient-to-l from-white dark:from-neutral-900 to-transparent rounded-r-2xl pointer-events-none" />
         </div>
       )}
 
-- 
2.49.1


From cbb7445d74b57177c152aa6bf26ab3a4d2329fe9 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 14:55:05 +0100
Subject: [PATCH 197/428] feat(pagespeed): click score gauges to scroll to
 diagnostics category

---
 app/sites/[id]/pagespeed/page.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index 6ff082c..0e9354b 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -416,10 +416,16 @@ export default function PageSpeedPage() {
       {/* Section 1 — Score Overview: 4 equal gauges + screenshot */}
       <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8 mb-6">
         <div className="flex flex-col lg:flex-row items-center gap-8">
-          {/* 4 equal gauges */}
+          {/* 4 equal gauges — click to scroll to diagnostics */}
           <div className="flex-1 flex items-center justify-center gap-6 sm:gap-8 flex-wrap">
-            {allScores.map(({ label, score }) => (
-              <ScoreGauge key={label} score={score} label={label} size={90} />
+            {allScores.map(({ key, label, score }) => (
+              <button
+                key={key}
+                onClick={() => document.getElementById(`diag-${key}`)?.scrollIntoView({ behavior: 'smooth', block: 'start' })}
+                className="cursor-pointer hover:opacity-80 transition-opacity"
+              >
+                <ScoreGauge score={score} label={label} size={90} />
+              </button>
             ))}
           </div>
 
@@ -586,7 +592,7 @@ export default function PageSpeedPage() {
             const groupManual = manualByGroup[group.key] ?? []
             if (groupAudits.length === 0 && groupPassed.length === 0 && groupManual.length === 0) return null
             return (
-              <div key={group.key} className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8">
+              <div key={group.key} id={`diag-${group.key}`} className="scroll-mt-6 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8">
                 {/* Category header with gauge */}
                 <div className="flex items-center gap-5 mb-6">
                   <ScoreGauge score={scoreByGroup[group.key]} label="" size={56} />
-- 
2.49.1


From 198bd3b00ffd6460372d845b2fed4735e8c8d5a7 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 15:15:28 +0100
Subject: [PATCH 198/428] feat(sidebar): extract SidebarContent to proper React
 component

Convert the sidebarContent(isMobile) closure function to a proper
SidebarContent component with explicit props, enabling correct React
reconciliation for both desktop and mobile sidebar instances.
---
 components/dashboard/Sidebar.tsx | 257 +++++++++++++++++++------------
 1 file changed, 159 insertions(+), 98 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index b5d514b..41a35e5 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -269,6 +269,129 @@ function NavLink({
   )
 }
 
+// ─── Sidebar Content ────────────────────────────────────────
+
+interface SidebarContentProps {
+  isMobile: boolean
+  collapsed: boolean
+  siteId: string
+  sites: Site[]
+  canEdit: boolean
+  pendingHref: string | null
+  onNavigate: (href: string) => void
+  onMobileClose: () => void
+  onExpand: () => void
+  onCollapse: () => void
+  onToggle: () => void
+  wasCollapsed: React.MutableRefObject<boolean>
+  auth: ReturnType<typeof useAuth>
+  orgs: OrganizationMember[]
+  onSwitchOrganization: (orgId: string | null) => Promise<void>
+  openSettings: () => void
+}
+
+function SidebarContent({
+  isMobile, collapsed, siteId, sites, canEdit, pendingHref,
+  onNavigate, onMobileClose, onExpand, onCollapse, onToggle,
+  wasCollapsed, auth, orgs, onSwitchOrganization, openSettings,
+}: SidebarContentProps) {
+  const router = useRouter()
+  const c = isMobile ? false : collapsed
+  const { user } = auth
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      {/* App Switcher — top of sidebar (scope-level switch) */}
+      <div className="flex items-center gap-2.5 px-[14px] pt-3 pb-1 shrink-0 overflow-hidden">
+        <span className="w-9 h-9 flex items-center justify-center shrink-0">
+          <AppLauncher apps={CIPHERA_APPS} currentAppId="pulse" anchor="right" />
+        </span>
+        <Label collapsed={c}>
+          <span className="text-xs font-medium text-neutral-400 dark:text-neutral-500 uppercase tracking-wider">Ciphera</span>
+        </Label>
+      </div>
+
+      {/* Logo — fixed layout, text fades */}
+      <Link href="/" className="flex items-center gap-3 px-[14px] py-4 shrink-0 group overflow-hidden">
+        <span className="w-9 h-9 flex items-center justify-center shrink-0">
+          <img src="/pulse_icon_no_margins.png" alt="Pulse" className="w-9 h-9 shrink-0 object-contain group-hover:scale-105 transition-transform duration-200" />
+        </span>
+        <span className={`text-xl font-bold text-white tracking-tight group-hover:text-brand-orange whitespace-nowrap transition-opacity duration-150 ${c ? 'opacity-0' : 'opacity-100'}`}>
+          Pulse
+        </span>
+      </Link>
+
+      {/* Site Picker */}
+      <SitePicker sites={sites} siteId={siteId} collapsed={c} onExpand={onExpand} onCollapse={onCollapse} wasCollapsed={wasCollapsed} />
+
+      {/* Nav Groups */}
+      <nav className="flex-1 overflow-y-auto overflow-x-hidden px-2 space-y-4">
+        {NAV_GROUPS.map((group) => (
+          <div key={group.label}>
+            <div className="h-5 flex items-center overflow-hidden">
+              <p className={`px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap transition-opacity duration-150 ${c ? 'opacity-0' : 'opacity-100'}`}>
+                {group.label}
+              </p>
+            </div>
+            <div className="space-y-0.5">
+              {group.items.map((item) => (
+                <NavLink key={item.label} item={item} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={onNavigate} />
+              ))}
+              {group.label === 'Infrastructure' && canEdit && (
+                <NavLink item={SETTINGS_ITEM} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={onNavigate} />
+              )}
+            </div>
+          </div>
+        ))}
+      </nav>
+
+      {/* Bottom — utility items */}
+      <div className="border-t border-neutral-800/60 px-2 py-3 shrink-0">
+        {/* Notifications, Profile — same layout as nav items */}
+        <div className="space-y-0.5 mb-1">
+          <span title={c ? 'Notifications' : undefined}>
+            <NotificationCenter anchor="right" variant="sidebar">
+              <Label collapsed={c}>Notifications</Label>
+            </NotificationCenter>
+          </span>
+          <span title={c ? (user?.display_name?.trim() || 'Profile') : undefined}>
+            <UserMenu
+              auth={auth}
+              LinkComponent={Link}
+              orgs={orgs}
+              activeOrgId={auth.user?.org_id}
+              onSwitchOrganization={onSwitchOrganization}
+              onCreateOrganization={() => router.push('/onboarding')}
+              allowPersonalOrganization={false}
+              onOpenSettings={openSettings}
+              compact
+              anchor="right"
+            >
+              <Label collapsed={c}>{user?.display_name?.trim() || 'Profile'}</Label>
+            </UserMenu>
+          </span>
+        </div>
+
+        {/* Settings + Collapse */}
+        <div className="space-y-0.5">
+          {!isMobile && (
+            <button
+              onClick={onToggle}
+              className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800 w-full overflow-hidden"
+              title={collapsed ? 'Expand sidebar (press [)' : 'Collapse sidebar (press [)'}
+            >
+              <span className="w-7 h-7 flex items-center justify-center shrink-0">
+                <CollapseLeftIcon className={`w-[18px] h-[18px] transition-transform duration-200 ${c ? 'rotate-180' : ''}`} />
+              </span>
+              <Label collapsed={c}>Collapse</Label>
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
 // ─── Main Sidebar ───────────────────────────────────────────
 
 export default function Sidebar({
@@ -339,102 +462,6 @@ export default function Sidebar({
 
   const handleNavigate = useCallback((href: string) => { setPendingHref(href) }, [])
 
-  const sidebarContent = (isMobile: boolean) => {
-    const c = isMobile ? false : collapsed
-
-    return (
-      <div className="flex flex-col h-full overflow-hidden">
-        {/* App Switcher — top of sidebar (scope-level switch) */}
-        <div className="flex items-center gap-2.5 px-[14px] pt-3 pb-1 shrink-0 overflow-hidden">
-          <span className="w-9 h-9 flex items-center justify-center shrink-0">
-            <AppLauncher apps={CIPHERA_APPS} currentAppId="pulse" anchor="right" />
-          </span>
-          <Label collapsed={c}>
-            <span className="text-xs font-medium text-neutral-400 dark:text-neutral-500 uppercase tracking-wider">Ciphera</span>
-          </Label>
-        </div>
-
-        {/* Logo — fixed layout, text fades */}
-        <Link href="/" className="flex items-center gap-3 px-[14px] py-4 shrink-0 group overflow-hidden">
-          <span className="w-9 h-9 flex items-center justify-center shrink-0">
-            <img src="/pulse_icon_no_margins.png" alt="Pulse" className="w-9 h-9 shrink-0 object-contain group-hover:scale-105 transition-transform duration-200" />
-          </span>
-          <span className={`text-xl font-bold text-white tracking-tight group-hover:text-brand-orange whitespace-nowrap transition-opacity duration-150 ${c ? 'opacity-0' : 'opacity-100'}`}>
-            Pulse
-          </span>
-        </Link>
-
-        {/* Site Picker */}
-        <SitePicker sites={sites} siteId={siteId} collapsed={c} onExpand={expand} onCollapse={collapse} wasCollapsed={wasCollapsedRef} />
-
-        {/* Nav Groups */}
-        <nav className="flex-1 overflow-y-auto overflow-x-hidden px-2 space-y-4">
-          {NAV_GROUPS.map((group) => (
-            <div key={group.label}>
-              <div className="h-5 flex items-center overflow-hidden">
-                <p className={`px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap transition-opacity duration-150 ${c ? 'opacity-0' : 'opacity-100'}`}>
-                  {group.label}
-                </p>
-              </div>
-              <div className="space-y-0.5">
-                {group.items.map((item) => (
-                  <NavLink key={item.label} item={item} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={handleNavigate} />
-                ))}
-                {group.label === 'Infrastructure' && canEdit && (
-                  <NavLink item={SETTINGS_ITEM} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={handleNavigate} />
-                )}
-              </div>
-            </div>
-          ))}
-        </nav>
-
-        {/* Bottom — utility items */}
-        <div className="border-t border-neutral-800/60 px-2 py-3 shrink-0">
-          {/* Notifications, Profile — same layout as nav items */}
-          <div className="space-y-0.5 mb-1">
-            <span title={c ? 'Notifications' : undefined}>
-              <NotificationCenter anchor="right" variant="sidebar">
-                <Label collapsed={c}>Notifications</Label>
-              </NotificationCenter>
-            </span>
-            <span title={c ? (user?.display_name?.trim() || 'Profile') : undefined}>
-              <UserMenu
-                auth={auth}
-                LinkComponent={Link}
-                orgs={orgs}
-                activeOrgId={auth.user?.org_id}
-                onSwitchOrganization={handleSwitchOrganization}
-                onCreateOrganization={() => router.push('/onboarding')}
-                allowPersonalOrganization={false}
-                onOpenSettings={openSettings}
-                compact
-                anchor="right"
-              >
-                <Label collapsed={c}>{user?.display_name?.trim() || 'Profile'}</Label>
-              </UserMenu>
-            </span>
-          </div>
-
-          {/* Settings + Collapse */}
-          <div className="space-y-0.5">
-            {!isMobile && (
-              <button
-                onClick={toggle}
-                className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800 w-full overflow-hidden"
-                title={collapsed ? 'Expand sidebar (press [)' : 'Collapse sidebar (press [)'}
-              >
-                <span className="w-7 h-7 flex items-center justify-center shrink-0">
-                  <CollapseLeftIcon className={`w-[18px] h-[18px] transition-transform duration-200 ${c ? 'rotate-180' : ''}`} />
-                </span>
-                <Label collapsed={c}>Collapse</Label>
-              </button>
-            )}
-          </div>
-        </div>
-      </div>
-    )
-  }
-
   return (
     <>
       {/* Desktop — ssr:false means this only renders on client, no hydration flash */}
@@ -442,7 +469,24 @@ export default function Sidebar({
         className="hidden md:flex flex-col shrink-0 border-r border-neutral-800/60 bg-neutral-900/90 backdrop-blur-xl overflow-hidden relative z-10"
         style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
       >
-        {sidebarContent(false)}
+        <SidebarContent
+          isMobile={false}
+          collapsed={collapsed}
+          siteId={siteId}
+          sites={sites}
+          canEdit={canEdit}
+          pendingHref={pendingHref}
+          onNavigate={handleNavigate}
+          onMobileClose={onMobileClose}
+          onExpand={expand}
+          onCollapse={collapse}
+          onToggle={toggle}
+          wasCollapsed={wasCollapsedRef}
+          auth={auth}
+          orgs={orgs}
+          onSwitchOrganization={handleSwitchOrganization}
+          openSettings={openSettings}
+        />
       </aside>
 
       {/* Mobile overlay */}
@@ -456,7 +500,24 @@ export default function Sidebar({
                 <XIcon className="w-5 h-5" />
               </button>
             </div>
-            {sidebarContent(true)}
+            <SidebarContent
+              isMobile={true}
+              collapsed={collapsed}
+              siteId={siteId}
+              sites={sites}
+              canEdit={canEdit}
+              pendingHref={pendingHref}
+              onNavigate={handleNavigate}
+              onMobileClose={onMobileClose}
+              onExpand={expand}
+              onCollapse={collapse}
+              onToggle={toggle}
+              wasCollapsed={wasCollapsedRef}
+              auth={auth}
+              orgs={orgs}
+              onSwitchOrganization={handleSwitchOrganization}
+              openSettings={openSettings}
+            />
           </aside>
         </>
       )}
-- 
2.49.1


From d6cef95c4b9175e983b8db7773ff5dec9dd530da Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 15:19:52 +0100
Subject: [PATCH 199/428] fix(sidebar): dynamic collapse label, favicon
 fallback, escape key, remove setTimeout hack

---
 components/dashboard/Sidebar.tsx | 49 ++++++++++++++++++++++++--------
 1 file changed, 37 insertions(+), 12 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 41a35e5..8cbf35a 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -112,9 +112,10 @@ function Label({ children, collapsed }: { children: React.ReactNode; collapsed:
 
 // ─── Site Picker ────────────────────────────────────────────
 
-function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollapsed }: {
+function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollapsed, pickerOpenCallback }: {
   sites: Site[]; siteId: string; collapsed: boolean
   onExpand: () => void; onCollapse: () => void; wasCollapsed: React.MutableRefObject<boolean>
+  pickerOpenCallback: React.MutableRefObject<(() => void) | null>
 }) {
   const [open, setOpen] = useState(false)
   const [search, setSearch] = useState('')
@@ -157,9 +158,8 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
         onClick={() => {
           if (collapsed) {
             wasCollapsed.current = true
+            pickerOpenCallback.current = () => setOpen(true)
             onExpand()
-            // Open picker after sidebar expands
-            setTimeout(() => setOpen(true), 220)
           } else {
             setOpen(!open)
           }
@@ -178,7 +178,11 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
                 onError={() => setFaviconFailed(true)}
               />
             </>
-          ) : null}
+          ) : (
+            <span className="text-xs font-bold text-brand-orange">
+              {currentSite?.name?.charAt(0).toUpperCase() || '?'}
+            </span>
+          )}
         </span>
         <Label collapsed={collapsed}>
           <span className="flex items-center gap-1">
@@ -196,6 +200,13 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
               placeholder="Search sites..."
               value={search}
               onChange={(e) => setSearch(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Escape') {
+                  setOpen(false)
+                  setSearch('')
+                  if (wasCollapsed.current) { onCollapse(); wasCollapsed.current = false }
+                }
+              }}
               className="w-full px-3 py-1.5 text-sm bg-neutral-800 border border-neutral-700 rounded-lg outline-none focus:ring-2 focus:ring-brand-orange/40 text-white placeholder:text-neutral-400"
               autoFocus
             />
@@ -284,6 +295,7 @@ interface SidebarContentProps {
   onCollapse: () => void
   onToggle: () => void
   wasCollapsed: React.MutableRefObject<boolean>
+  pickerOpenCallbackRef: React.MutableRefObject<(() => void) | null>
   auth: ReturnType<typeof useAuth>
   orgs: OrganizationMember[]
   onSwitchOrganization: (orgId: string | null) => Promise<void>
@@ -293,7 +305,7 @@ interface SidebarContentProps {
 function SidebarContent({
   isMobile, collapsed, siteId, sites, canEdit, pendingHref,
   onNavigate, onMobileClose, onExpand, onCollapse, onToggle,
-  wasCollapsed, auth, orgs, onSwitchOrganization, openSettings,
+  wasCollapsed, pickerOpenCallbackRef, auth, orgs, onSwitchOrganization, openSettings,
 }: SidebarContentProps) {
   const router = useRouter()
   const c = isMobile ? false : collapsed
@@ -322,17 +334,21 @@ function SidebarContent({
       </Link>
 
       {/* Site Picker */}
-      <SitePicker sites={sites} siteId={siteId} collapsed={c} onExpand={onExpand} onCollapse={onCollapse} wasCollapsed={wasCollapsed} />
+      <SitePicker sites={sites} siteId={siteId} collapsed={c} onExpand={onExpand} onCollapse={onCollapse} wasCollapsed={wasCollapsed} pickerOpenCallback={pickerOpenCallbackRef} />
 
       {/* Nav Groups */}
       <nav className="flex-1 overflow-y-auto overflow-x-hidden px-2 space-y-4">
         {NAV_GROUPS.map((group) => (
           <div key={group.label}>
-            <div className="h-5 flex items-center overflow-hidden">
-              <p className={`px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap transition-opacity duration-150 ${c ? 'opacity-0' : 'opacity-100'}`}>
-                {group.label}
-              </p>
-            </div>
+            {c ? (
+              <div className="mx-3 my-2 border-t border-neutral-800/40" />
+            ) : (
+              <div className="h-5 flex items-center overflow-hidden">
+                <p className="px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap">
+                  {group.label}
+                </p>
+              </div>
+            )}
             <div className="space-y-0.5">
               {group.items.map((item) => (
                 <NavLink key={item.label} item={item} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={onNavigate} />
@@ -383,7 +399,7 @@ function SidebarContent({
               <span className="w-7 h-7 flex items-center justify-center shrink-0">
                 <CollapseLeftIcon className={`w-[18px] h-[18px] transition-transform duration-200 ${c ? 'rotate-180' : ''}`} />
               </span>
-              <Label collapsed={c}>Collapse</Label>
+              <Label collapsed={c}>{c ? 'Expand' : 'Collapse'}</Label>
             </button>
           )}
         </div>
@@ -409,6 +425,7 @@ export default function Sidebar({
   const [orgs, setOrgs] = useState<OrganizationMember[]>([])
   const [pendingHref, setPendingHref] = useState<string | null>(null)
   const wasCollapsedRef = useRef(false)
+  const pickerOpenCallbackRef = useRef<(() => void) | null>(null)
   // Safe to read localStorage directly — this component is loaded with ssr:false
   const [collapsed, setCollapsed] = useState(() => {
     return localStorage.getItem(SIDEBAR_KEY) !== 'false'
@@ -468,6 +485,12 @@ export default function Sidebar({
       <aside
         className="hidden md:flex flex-col shrink-0 border-r border-neutral-800/60 bg-neutral-900/90 backdrop-blur-xl overflow-hidden relative z-10"
         style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
+        onTransitionEnd={(e) => {
+          if (e.propertyName === 'width' && pickerOpenCallbackRef.current) {
+            pickerOpenCallbackRef.current()
+            pickerOpenCallbackRef.current = null
+          }
+        }}
       >
         <SidebarContent
           isMobile={false}
@@ -482,6 +505,7 @@ export default function Sidebar({
           onCollapse={collapse}
           onToggle={toggle}
           wasCollapsed={wasCollapsedRef}
+          pickerOpenCallbackRef={pickerOpenCallbackRef}
           auth={auth}
           orgs={orgs}
           onSwitchOrganization={handleSwitchOrganization}
@@ -513,6 +537,7 @@ export default function Sidebar({
               onCollapse={collapse}
               onToggle={toggle}
               wasCollapsed={wasCollapsedRef}
+              pickerOpenCallbackRef={pickerOpenCallbackRef}
               auth={auth}
               orgs={orgs}
               onSwitchOrganization={handleSwitchOrganization}
-- 
2.49.1


From 645e3e78efe991aebedfa6d723ca6618bbe3808d Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 15:23:26 +0100
Subject: [PATCH 200/428] feat(empty-states): add undraw illustrations to empty
 state screens

Add brand-orange recolored SVG illustrations from undraw to five empty
states: sites list, dashboard chart, funnels, journeys, and behavior.
---
 app/sites/[id]/funnels/page.tsx          | 14 ++++--
 components/behavior/FrustrationTable.tsx |  8 ++--
 components/dashboard/Chart.tsx           |  7 ++-
 components/journeys/ColumnJourney.tsx    |  8 ++--
 components/sites/SiteList.tsx            | 10 ++++-
 public/illustrations/blank-canvas.svg    | 30 +++++++++++++
 public/illustrations/data-trends.svg     | 56 ++++++++++++++++++++++++
 public/illustrations/journey.svg         | 41 +++++++++++++++++
 public/illustrations/no-data.svg         | 12 +++++
 public/illustrations/setup-analytics.svg | 35 +++++++++++++++
 10 files changed, 209 insertions(+), 12 deletions(-)
 create mode 100644 public/illustrations/blank-canvas.svg
 create mode 100644 public/illustrations/data-trends.svg
 create mode 100644 public/illustrations/journey.svg
 create mode 100644 public/illustrations/no-data.svg
 create mode 100644 public/illustrations/setup-analytics.svg

diff --git a/app/sites/[id]/funnels/page.tsx b/app/sites/[id]/funnels/page.tsx
index 2b40d16..cec7b5b 100644
--- a/app/sites/[id]/funnels/page.tsx
+++ b/app/sites/[id]/funnels/page.tsx
@@ -6,6 +6,7 @@ import { useFunnels } from '@/lib/swr/dashboard'
 import { toast, PlusIcon, ArrowRightIcon, ChevronLeftIcon, TrashIcon, Button } from '@ciphera-net/ui'
 import { FunnelsListSkeleton, useMinimumLoading, useSkeletonFade } from '@/components/skeletons'
 import Link from 'next/link'
+import Image from 'next/image'
 
 export default function FunnelsPage() {
   const params = useParams()
@@ -55,10 +56,15 @@ export default function FunnelsPage() {
         </div>
 
         {funnels.length === 0 ? (
-          <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-12 text-center">
-            <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4 mx-auto mb-4 w-fit">
-              <ArrowRightIcon className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
-            </div>
+          <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-12 text-center flex flex-col items-center">
+            <Image
+              src="/illustrations/data-trends.svg"
+              alt="Create your first funnel"
+              width={260}
+              height={195}
+              className="mb-6"
+              unoptimized
+            />
             <h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-2">
               No funnels yet
             </h3>
diff --git a/components/behavior/FrustrationTable.tsx b/components/behavior/FrustrationTable.tsx
index 916b749..d362b14 100644
--- a/components/behavior/FrustrationTable.tsx
+++ b/components/behavior/FrustrationTable.tsx
@@ -177,9 +177,11 @@ export default function FrustrationTable({
             </>
           ) : (
             <div className="h-full flex flex-col items-center justify-center text-center px-6 py-8 gap-4">
-              <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
-                <CursorClick className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
-              </div>
+              <img
+                src="/illustrations/blank-canvas.svg"
+                alt="No frustration signals"
+                className="w-44 h-auto mb-1"
+              />
               <h4 className="font-semibold text-neutral-900 dark:text-white">
                 No {title.toLowerCase()} detected
               </h4>
diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index 4b47fc0..633dbff 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -414,7 +414,12 @@ export default function Chart({
           </div>
 
           {!hasData || !hasAnyNonZero ? (
-            <div className="flex h-96 flex-col items-center justify-center gap-2">
+            <div className="flex h-96 flex-col items-center justify-center gap-3">
+              <img
+                src="/illustrations/no-data.svg"
+                alt="No data available"
+                className="w-48 h-auto mb-2"
+              />
               <p className="text-sm text-neutral-400 dark:text-neutral-500">
                 {!hasData ? 'No data for this period' : `No ${METRIC_CONFIGS.find((m) => m.key === metric)?.label.toLowerCase()} recorded`}
               </p>
diff --git a/components/journeys/ColumnJourney.tsx b/components/journeys/ColumnJourney.tsx
index fe6e706..eed557d 100644
--- a/components/journeys/ColumnJourney.tsx
+++ b/components/journeys/ColumnJourney.tsx
@@ -556,9 +556,11 @@ export default function ColumnJourney({
   if (!transitions.length) {
     return (
       <div className="h-[400px] flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
-        <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
-          <TreeStructure className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
-        </div>
+        <img
+          src="/illustrations/journey.svg"
+          alt="No journey data"
+          className="w-52 h-auto mb-2"
+        />
         <h4 className="font-semibold text-neutral-900 dark:text-white">
           No journey data yet
         </h4>
diff --git a/components/sites/SiteList.tsx b/components/sites/SiteList.tsx
index 7480442..2168e16 100644
--- a/components/sites/SiteList.tsx
+++ b/components/sites/SiteList.tsx
@@ -135,7 +135,15 @@ export default function SiteList({ sites, siteStats, loading, onDelete }: SiteLi
 
   if (sites.length === 0) {
     return (
-      <div className="rounded-lg border border-dashed border-neutral-300 dark:border-neutral-700 p-12 text-center">
+      <div className="rounded-2xl border border-dashed border-neutral-300 dark:border-neutral-700 p-12 text-center flex flex-col items-center">
+        <Image
+          src="/illustrations/setup-analytics.svg"
+          alt="Set up your first site"
+          width={280}
+          height={210}
+          className="mb-6"
+          unoptimized
+        />
         <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">No sites yet</h3>
         <p className="mt-2 text-sm text-neutral-500 dark:text-neutral-400 mb-4">Create your first site to get started.</p>
         <Link href="/sites/new">
diff --git a/public/illustrations/blank-canvas.svg b/public/illustrations/blank-canvas.svg
new file mode 100644
index 0000000..efd66c3
--- /dev/null
+++ b/public/illustrations/blank-canvas.svg
@@ -0,0 +1,30 @@
+<svg data-name="Layer 1" viewBox="0 0 550.71039 567.98584" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <path d="M711.24677,733.99292H560.52137a6.616,6.616,0,0,1-6.60858-6.60839V622.00475a6.616,6.616,0,0,1,6.60858-6.60858h150.7254a6.616,6.616,0,0,1,6.60839,6.60858V727.38453A6.6161,6.6161,0,0,1,711.24677,733.99292Z" fill="#f2f2f2" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M464.93162,459.293a11.22645,11.22645,0,0,0-3.595-16.83486l-.94985-100.813-18.84219,8.64691,4.1444,97.50067A11.2873,11.2873,0,0,0,464.93162,459.293Z" fill="#9e616a" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M464.42409,316.12137s-18.32929-8.89112-20.86418,7.88369-12.96145,60.43336-12.96145,60.43336l31.63926-2.23768Z" fill="#9e616a" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M464.93162,459.293a11.22645,11.22645,0,0,0-3.595-16.83486l-.94985-100.813-18.84219,8.64691,4.1444,97.50067A11.2873,11.2873,0,0,0,464.93162,459.293Z" fill="#9e616a" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M464.42409,316.12137s-18.32929-8.89112-20.86418,7.88369-12.96145,60.43336-12.96145,60.43336l31.63926-2.23768Z" fill="#FD5E0F" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M411.35263,704.46626a3.61323,3.61323,0,0,1-2.61865-6.26262c.09111-.36213.15647-.62217.24758-.9843q-.0489-.11821-.09837-.23628a9.70311,9.70311,0,0,0-17.89849.06652c-2.92739,7.05051-6.65447,14.11307-7.57216,21.5678a28.7054,28.7054,0,0,0,.5039,9.87234,115.08614,115.08614,0,0,1-10.46893-47.79893,111.07991,111.07991,0,0,1,.689-12.392q.5708-5.05966,1.58377-10.0473a116.4192,116.4192,0,0,1,23.087-49.34152,30.9826,30.9826,0,0,0,12.88556-13.36893,23.6336,23.6336,0,0,0,2.14933-6.45821c-.62729.08228-1.26489.13369-1.89217.17479-.19543.01023-.40108.02055-.59651.03087l-.07369.0033a3.57989,3.57989,0,0,1-2.9401-5.83225q.40627-.5.81305-.99948c.4114-.51423.833-1.01814,1.24434-1.53228a1.7836,1.7836,0,0,0,.13369-.15432c.47313-.58619.94609-1.16206,1.41922-1.74825a10.35176,10.35176,0,0,0-3.39367-3.28044c-4.74083-2.77661-11.28133-.85358-14.70586,3.43476-3.43476,4.28826-4.0826,10.30438-2.88976,15.66218a41.48513,41.48513,0,0,0,5.73842,12.793c-.25715.32912-.52454.64792-.78161.977a117.17121,117.17121,0,0,0-12.22973,19.37481,48.70929,48.70929,0,0,0-2.908-22.62447c-2.78346-6.71479-8.00064-12.37-12.595-18.17495-5.51857-6.97261-16.83488-3.9296-17.80713,4.90927q-.01412.12837-.02757.25665,1.02363.57749,2.004,1.22586a4.9011,4.9011,0,0,1-1.976,8.91908l-.09994.01543a48.7668,48.7668,0,0,0,1.28544,7.29124A50.20988,50.20988,0,0,0,376.56347,641.273c.40108.20565.79193.41131,1.193.60673a119.598,119.598,0,0,0-6.43767,30.296,113.43525,113.43525,0,0,0,.08228,18.31542l-.03086-.216a29.97408,29.97408,0,0,0-10.23241-17.3076c-7.87438-6.46853-18.9994-8.8505-27.49446-14.04994a5.62528,5.62528,0,0,0-8.61571,5.47252q.01709.11352.03474.227a32.92633,32.92633,0,0,1,3.69184,1.779q1.02362.57761,2.004,1.22585a4.90116,4.90116,0,0,1-1.976,8.91917l-.1.01535c-.072.01031-.13369.02063-.20557.03094a48.80758,48.80758,0,0,0,8.97767,14.05786A50.25446,50.25446,0,0,0,373.9,706.63672h.01032a119.56344,119.56344,0,0,0,8.03167,23.447h28.69167c.10291-.3188.19542-.64792.288-.96672a32.59925,32.59925,0,0,1-7.93916-.473c2.12878-2.61214,4.25747-5.24483,6.38625-7.85688a1.78139,1.78139,0,0,0,.1337-.15424c1.07978-1.33685,2.16987-2.66347,3.24965-4.00032l.00058-.00165a47.75027,47.75027,0,0,0-1.39916-12.16412Z" fill="#f2f2f2" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M834.35263,704.46626a3.61323,3.61323,0,0,1-2.61865-6.26262c.09111-.36213.15647-.62217.24758-.9843q-.0489-.11821-.09837-.23628a9.70311,9.70311,0,0,0-17.89849.06652c-2.92739,7.05051-6.65447,14.11307-7.57216,21.5678a28.7054,28.7054,0,0,0,.5039,9.87234,115.08614,115.08614,0,0,1-10.46893-47.79893,111.07991,111.07991,0,0,1,.689-12.392q.5708-5.05966,1.58377-10.0473a116.4192,116.4192,0,0,1,23.087-49.34152,30.9826,30.9826,0,0,0,12.88556-13.36893,23.6336,23.6336,0,0,0,2.14933-6.45821c-.62729.08228-1.26489.13369-1.89217.17479-.19543.01023-.40108.02055-.59651.03087l-.07369.0033a3.57989,3.57989,0,0,1-2.9401-5.83225q.40627-.5.813-.99948c.4114-.51423.833-1.01814,1.24434-1.53228a1.7836,1.7836,0,0,0,.13369-.15432c.47313-.58619.94609-1.16206,1.41922-1.74825a10.35176,10.35176,0,0,0-3.39367-3.28044c-4.74083-2.77661-11.28133-.85358-14.70586,3.43476-3.43476,4.28826-4.0826,10.30438-2.88976,15.66218a41.48513,41.48513,0,0,0,5.73842,12.793c-.25715.32912-.52454.64792-.78161.977a117.17121,117.17121,0,0,0-12.22973,19.37481,48.70929,48.70929,0,0,0-2.908-22.62447c-2.78346-6.71479-8.00064-12.37-12.595-18.17495-5.51857-6.97261-16.83488-3.9296-17.80713,4.90927q-.01412.12837-.02757.25665,1.02363.57749,2.004,1.22586a4.9011,4.9011,0,0,1-1.976,8.91908l-.09994.01543a48.7668,48.7668,0,0,0,1.28544,7.29124A50.20988,50.20988,0,0,0,799.56347,641.273c.40108.20565.79193.41131,1.193.60673a119.598,119.598,0,0,0-6.43767,30.296,113.43525,113.43525,0,0,0,.08228,18.31542l-.03086-.216a29.97408,29.97408,0,0,0-10.23241-17.3076c-7.87438-6.46853-18.9994-8.8505-27.49446-14.04994a5.62528,5.62528,0,0,0-8.61571,5.47252q.01708.11352.03474.227a32.92633,32.92633,0,0,1,3.69184,1.779q1.02362.57761,2.004,1.22585a4.90116,4.90116,0,0,1-1.976,8.91917l-.1.01535c-.072.01031-.13369.02063-.20557.03094a48.80758,48.80758,0,0,0,8.97767,14.05786A50.25446,50.25446,0,0,0,796.9,706.63672h.01032a119.56344,119.56344,0,0,0,8.03167,23.447h28.69167c.10291-.3188.19542-.64792.288-.96672a32.59925,32.59925,0,0,1-7.93916-.473c2.12878-2.61214,4.25747-5.24483,6.38625-7.85688a1.78139,1.78139,0,0,0,.1337-.15424c1.07978-1.33685,2.16987-2.66347,3.24965-4.00032l.00058-.00165a47.75027,47.75027,0,0,0-1.39916-12.16412Z" fill="#f2f2f2" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M723.86447,729.89617c-.08252,0-.165-.00195-.24756-.0039a8.169,8.169,0,0,1-7.70215-8.25488c0-12.79493-9.13965-20.25879-18.19726-21.9795-9.05762-1.71972-20.29785,1.8711-24.98926,13.77637l-4.26514,10.707a19.67152,19.67152,0,0,1-27.78662,0l-.25244-.252.15674-.32129,75.334-154.13379v-3.77734a19.488,19.488,0,0,1,.002-3.5l-.002-388.20313a7.94627,7.94627,0,0,1,8.19043-7.94287,8.16941,8.16941,0,0,1,7.70264,8.25488v387.936a19.489,19.489,0,0,1-.00195,3.5l.00195,3.73144,75.49072,154.45606-.25244.252a19.67152,19.67152,0,0,1-27.78662,0l-.11182-.16992-4.15332-10.53711c-4.6914-11.9043-15.93017-15.49316-24.98926-13.77637-9.05761,1.72071-18.19726,9.18457-18.19726,21.9795v.3125a7.94652,7.94652,0,0,1-7.94336,7.94628Z" fill="#e6e6e6" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M861.76287,446.99292H585.95965A12.10626,12.10626,0,0,1,573.867,434.90063v-192.828A12.10611,12.10611,0,0,1,585.95965,229.98H861.76287a12.10626,12.10626,0,0,1,12.09229,12.09264v192.828A12.10641,12.10641,0,0,1,861.76287,446.99292Z" fill="#fff" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M861.76291,448.49285H585.95968a13.60791,13.60791,0,0,1-13.59277-13.59179V242.07244a13.608,13.608,0,0,1,13.59277-13.59228H861.76291a13.60791,13.60791,0,0,1,13.59228,13.59228V434.90106A13.6078,13.6078,0,0,1,861.76291,448.49285ZM585.95968,231.48016a10.60442,10.60442,0,0,0-10.59277,10.59228V434.90106a10.60463,10.60463,0,0,0,10.59277,10.59179H861.76291a10.60421,10.60421,0,0,0,10.59228-10.59179V242.07244a10.604,10.604,0,0,0-10.59228-10.59228Z" fill="#f2f2f2" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M764.63979,242.0363H683.08263a19.52487,19.52487,0,0,1-19.5028-19.5028v-.35459H784.14258v.35459A19.52486,19.52486,0,0,1,764.63979,242.0363Z" fill="#e6e6e6" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M764.99438,459.04925H683.43723a19.52509,19.52509,0,0,1-19.5028-19.5028v-.35459H784.49718v.35459A19.52509,19.52509,0,0,1,764.99438,459.04925Z" fill="#e6e6e6" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M874.31485,730.88939a1.18647,1.18647,0,0,1-1.19006,1.19h-547.29a1.19,1.19,0,0,1,0-2.38h547.29A1.18651,1.18651,0,0,1,874.31485,730.88939Z" fill="#ccc" transform="translate(-324.64481 -166.00708)"/>
+ <polygon fill="#9e616a" points="184.306 537.181 198.722 537.181 205.58 481.575 184.303 481.576 184.306 537.181"/>
+ <path d="M504.06863,696.07669l22.78907-1.3602v9.76383l21.6662,14.96345a6.09886,6.09886,0,0,1-3.46558,11.11765H517.92709l-4.67648-9.65792-1.82593,9.65792H501.19512Z" fill="#2f2e41" transform="translate(-324.64481 -166.00708)"/>
+ <polygon fill="#9e616a" points="135.277 227.892 133.865 234.622 132.664 259.447 180.908 252.915 184.613 224.169 179.492 215.755 135.277 227.892"/>
+ <polygon fill="#9e616a" points="111.347 537.181 125.763 537.181 132.621 481.575 111.344 481.576 111.347 537.181"/>
+ <path d="M428.1707,604.94848l-.00054-.14891,5.39635-25.192,3.32751-12.54128-9.24939-73.42936c-2.17782-53.34848,28.7723-78.9931,29.01588-79.24519l.67116-.69775,49.63579-1.2147c26.70628,16.00123,23.683,103.51941,28.57341,163.039.34872,4.24414,4.73124,10.50859,3.654,14.54583-8.54582,32.02677-6.04255,66.6612-12.553,67.685l-19.96125-.27744-10.30939-46.78874,9.51636-35.68634c-4.22057-.77752-7.13727-21.41179-7.13727-21.41179-1.83905-2.18368-8.1881-20.75593-8.1881-20.75593l-8.46552-51.40977-13.601,88.42417,3.27551,20.74438-2.71071,7.13285-11.60823,58.88563-.12339.94878L435.44348,655.37Z" fill="#2f2e41" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M431.10991,696.07669l22.78906-1.3602v9.76383l21.6662,14.96345a6.09886,6.09886,0,0,1-3.46557,11.11765H444.96836l-4.67648-9.65792-1.82593,9.65792H428.23639Z" fill="#2f2e41" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M499.72323,296.81336l12.16793,13.51992,14.61521,27.54745-7.17925,33.96819,3.13895,15.93971,4.635,17.52209c-17.8595,9.87926-39.074-3.76443-58.5635-9.82419l-19.176,8.4722,1.014-23.32186.52-58.76042a16.46939,16.46939,0,0,1,17.73187-16.27514h0l12.84392-9.464Z" fill="#FD5E0F" transform="translate(-324.64481 -166.00708)"/>
+ <circle cx="171.67023" cy="98.07194" fill="#9e616a" r="25.65727"/>
+ <path d="M526.50637,254.81959c-.452,2.51394-11.2531,3.72725-10.928-.74545-2.10149,4.211-5.24175,10.322-1.24175,17.322a10.98281,10.98281,0,0,0-1.48157,12.81309,33.15262,33.15262,0,0,1,2.847,5.84463,8.87535,8.87535,0,0,1,.32512,1.51466,2.89763,2.89763,0,0,1-4.12372,2.97386c-10.88039-5.32913-29.85434-4.42589-41.75772-1.17444q.119-3.47344-.09516-6.93107a17.13363,17.13363,0,0,1-3.37832,7.91442c-2.03809.60271-4.03649,1.22919-5.97148,1.84777a1.71539,1.71539,0,0,1-2.18084-2.09361,9.64658,9.64658,0,0,0,.2062-4.203c-.49172-2.90252-1.95087-5.52745-2.9818-8.27924s-1.61781-5.916-.35687-8.57264c1.95876-4.12377,7.47826-5.38471,9.91287-9.24676,2.736-4.33784.61065-9.99215,1.03886-15.1072.60271-7.23243,6.52662-13.10875,13.204-15.94781,11.56233-4.9168,26.02719-.935,34.695,8.15314a7.93768,7.93768,0,0,1,8.303-.35687c2.56152,1.37192,4.4013,2.08567,5.5512,4.75817C529.09959,247.65062,526.96634,252.29776,526.50637,254.81959Z" fill="#2f2e41" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M515.48591,556.53986l-60.36453-60.36452a3.7472,3.7472,0,0,1-.00008-5.29331l42.20391-42.20391a3.74715,3.74715,0,0,1,5.29338,0l60.36453,60.36453a3.7472,3.7472,0,0,1-.00008,5.29331l-42.2039,42.2039A3.74724,3.74724,0,0,1,515.48591,556.53986Z" fill="#fff" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M518.13254,558.63348a4.71009,4.71009,0,0,1-3.35352-1.38672L454.41427,496.8825a4.74593,4.74593,0,0,1,0-6.707l42.20411-42.2041a4.74649,4.74649,0,0,1,6.70752,0l60.36425,60.36426a4.7459,4.7459,0,0,1,0,6.707l-42.2041,42.2041A4.71009,4.71009,0,0,1,518.13254,558.63348ZM499.97189,448.58367a2.71951,2.71951,0,0,0-1.939.80176l-42.20459,42.2041a2.74665,2.74665,0,0,0,0,3.87891l60.36474,60.36426a2.81453,2.81453,0,0,0,3.87891,0l42.2041-42.2041a2.74665,2.74665,0,0,0,0-3.87891l-60.36475-60.36426A2.72144,2.72144,0,0,0,499.97189,448.58367Z" fill="#e6e6e6" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M492.74166,454.293a11.22642,11.22642,0,0,1,3.595-16.83486l.94985-100.813,18.84219,8.64691-4.1444,97.50067A11.2873,11.2873,0,0,1,492.74166,454.293Z" fill="#9e616a" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M493.24918,311.12137s18.3293-8.89112,20.86419,7.88369,12.96145,60.43336,12.96145,60.43336l-31.63926-2.23768Z" fill="#9e616a" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M492.74166,454.293a11.22642,11.22642,0,0,1,3.595-16.83486l.94985-100.813,18.84219,8.64691-4.1444,97.50067A11.2873,11.2873,0,0,1,492.74166,454.293Z" fill="#9e616a" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M493.24918,311.12137s18.3293-8.89112,20.86419,7.88369,12.96145,60.43336,12.96145,60.43336l-31.63926-2.23768Z" fill="#FD5E0F" transform="translate(-324.64481 -166.00708)"/>
+</svg>
diff --git a/public/illustrations/data-trends.svg b/public/illustrations/data-trends.svg
new file mode 100644
index 0000000..927edfe
--- /dev/null
+++ b/public/illustrations/data-trends.svg
@@ -0,0 +1,56 @@
+<svg data-name="Layer 1" viewBox="0 0 942.54724 631.43903" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <path d="M879.59026,413.72015l2.79791-22.42655a30.28454,30.28454,0,0,1,60.10315,7.4984l-2.79791,22.42654a4.07267,4.07267,0,0,1-4.5404,3.53316l-52.02959-6.49115A4.07266,4.07266,0,0,1,879.59026,413.72015Z" fill="#2f2e41" transform="translate(-128.72638 -134.28048)"/>
+ <circle cx="775.78648" cy="263.92678" fill="#ffb8b8" r="22.20356"/>
+ <path d="M875.05486,392.20076a23.98352,23.98352,0,0,1,26.73792-20.80636l4.48553.55961a23.98334,23.98334,0,0,1,20.80614,26.73789l-.056.44853-9.47894-1.18258-2.10358-9.45631L913.67,397.47385l-4.8988-.61117-1.06132-4.77116-.89618,4.52695-31.81482-3.96918Z" fill="#2f2e41" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M795.91611,477.41149a10.22784,10.22784,0,0,0,15.28426,3.51477L831.3673,492.74l10.16823-10.50441-28.71392-16.28326a10.28328,10.28328,0,0,0-16.9055,11.45917Z" fill="#ffb8b8" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M862.01251,498.63944c-14.87549,0-41.052-6.65918-42.50146-7.03125l-.45777-.11719,4.11988-20.85889,39.98193,7.897,21.7207-30.58692,24.93726-2.53515-.69605.916c-.32422.42676-32.46972,42.74317-37.47241,49.8418C870.38214,497.95585,866.77618,498.63944,862.01251,498.63944Z" fill="#3f3d56" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M866.00055,576.92752l-.59522-.28417c-.12671-.06055-12.76513-6.208-19.31128-18.209-6.51489-11.94434,23.98316-62.6123,26.1167-66.12793l.031-16.09082L883.213,446.59452l13.9917-7.90821L885.19171,466.7161Z" fill="#3f3d56" transform="translate(-128.72638 -134.28048)"/>
+ <polygon fill="#ffb8b8" points="723.257 615.591 709.885 615.59 703.523 564.011 723.259 564.012 723.257 615.591"/>
+ <path d="M855.39347,762.83333l-43.11785-.00159v-.54537A16.78359,16.78359,0,0,1,829.05829,745.504h.00107l26.33491.00107Z" fill="#2f2e41" transform="translate(-128.72638 -134.28048)"/>
+ <polygon fill="#ffb8b8" points="866.891 603.872 854.184 608.035 832.077 561.002 850.832 554.857 866.891 603.872"/>
+ <path d="M1002.89464,749.40842,961.92,762.83333l-.16982-.51825a16.78358,16.78358,0,0,1,10.72241-21.174l.001-.00033,25.02593-8.1994Z" fill="#2f2e41" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M969.72638,729.71952l-38.1205-63.64087L899.4256,598.08573l-28.95826,60.06054-11.50366,77.78809-40.343.56055.15893-.63086L880.51715,490.5535l48.352,7.22363-2.20093,31.916,1.31079,1.86426c10.92261,15.5166,22.21607,31.55957,15.73877,48.85351l18.36231,54.52246,40.64624,90.78614Z" fill="#2f2e41" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M882.72638,543.71952c-7.00635,0-15-8-10.853-21.65821l-.26855-.19433,9.96069-44.00781c-8.69263-12.43165,2.76807-22.69141,3.842-23.60791l5.4707-9.84717,24.1377-15.30811L927.22882,530.5701l-.18066.17285C918.2276,539.18241,888.60358,543.71952,882.72638,543.71952Z" fill="#FD5E0F" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M932.15948,566.617a11.88134,11.88134,0,0,1-2.85131-.30176c-.93873-.23535-2.4585-1.43066-4.80689-9.07715-9.33618-30.39746-20.35913-121.86035-12.35083-130.81055l.18335-.20507,13.14893,2.1914c1.093-.80664,6.82861-4.81054,12.12133-4.11425a8.033,8.033,0,0,1,5.49659,3.249l.09057.11865,4.189,59.59424,15.34619,70.13086-.36792.167C961.46564,557.96561,942.303,566.617,932.15948,566.617Z" fill="#3f3d56" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M923.31655,543.32446a10.22788,10.22788,0,0,0,9.66238-12.35317l19.24856-13.25752-5.20361-13.66228-26.91975,19.104a10.28328,10.28328,0,0,0,3.21242,20.169Z" fill="#ffb8b8" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M945.876,528.3367l-17.14551-12.57324,24.10083-32.86426L934.33624,450.261l8.27466-23.66113.53467,1.019c.249.47461,24.94824,47.52686,29.25683,55.06738,4.48267,7.84375-24.97,43.76075-26.22583,45.28516Z" fill="#3f3d56" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M560.20614,676.255l-14.5923-6.1443-10.01026-73.15138H402.299L391.4486,669.81186l-13.05511,6.52746a3.10016,3.10016,0,0,0,1.38657,5.873H559.00349A3.1,3.1,0,0,0,560.20614,676.255Z" fill="#e6e6e6" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M797.09757,606.69181H142.26837a12.97344,12.97344,0,0,1-12.9443-12.97332V501.379h680.7178v92.33952A12.97357,12.97357,0,0,1,797.09757,606.69181Z" fill="#ccc" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M810.72638,545.02084h-682V149.91957A15.65719,15.65719,0,0,1,144.366,134.28048H795.08655a15.65736,15.65736,0,0,1,15.63983,15.63909Z" fill="#3f3d56" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M769.99322,516.34435H169.45954a12.07024,12.07024,0,0,1-12.057-12.05667v-329.274a12.07088,12.07088,0,0,1,12.057-12.05741H769.99322a12.07088,12.07088,0,0,1,12.057,12.05741v329.274A12.07024,12.07024,0,0,1,769.99322,516.34435Z" fill="#fff" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M638.14638,682.97542l-337.44822,0a1.56681,1.56681,0,0,1-1.53908-1.13363,1.52911,1.52911,0,0,1,1.47725-1.91893l337.385,0a1.61535,1.61535,0,0,1,1.61617,1.19368A1.52819,1.52819,0,0,1,638.14638,682.97542Z" fill="#ccc" transform="translate(-128.72638 -134.28048)"/>
+ <rect fill="#f2f2f2" height="110.7733" width="144.99594" x="489.85973" y="81.90943"/>
+ <rect fill="#fff" height="99.76477" width="130.58641" x="497.0645" y="87.41369"/>
+ <path d="M693.37738,295.69477q.02592.00028.05185-.00109a34.81675,34.81675,0,0,0,.779-69.48892.79424.79424,0,0,0-.60112.20836.78592.78592,0,0,0-.25678.57553l-.7612,67.902a.79707.79707,0,0,0,.78826.80412Z" fill="#3f3d56" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M666.072,237.43291a1.02524,1.02524,0,0,1,.71962.30735l23.37584,23.90588a1.01418,1.01418,0,0,1,.29094.72511l-.36424,32.49143a1.01059,1.01059,0,0,1-.33018.73985,1.026,1.026,0,0,1-.77126.26782,35.04446,35.04446,0,0,1-23.69951-58.09062,1.02636,1.02636,0,0,1,.74091-.34658Q666.05306,237.4327,666.072,237.43291Z" fill="#e6e6e6" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M689.84193,225.9272a1.02931,1.02931,0,0,1,.69948.28585,1.01135,1.01135,0,0,1,.31394.74786l-.32864,29.31578a1.02077,1.02077,0,0,1-1.75041.70223L668.378,236.11808a1.02291,1.02291,0,0,1,.05493-1.48163,35.11806,35.11806,0,0,1,21.34564-8.708C689.79961,225.92739,689.82088,225.927,689.84193,225.9272Z" fill="#FD5E0F" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M679.33353,309.77539a6.25343,6.25343,0,1,1-6.18294-6.32313A6.26054,6.26054,0,0,1,679.33353,309.77539Z" fill="#FD5E0F" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M697.19935,309.97567a6.25343,6.25343,0,1,1-6.18294-6.32313A6.26056,6.26056,0,0,1,697.19935,309.97567Z" fill="#3f3d56" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M715.06516,310.176a6.25343,6.25343,0,1,1-6.18294-6.32314A6.26054,6.26054,0,0,1,715.06516,310.176Z" fill="#e6e6e6" transform="translate(-128.72638 -134.28048)"/>
+ <rect fill="#f2f2f2" height="110.7733" width="144.99594" x="488.33346" y="210.11637"/>
+ <rect fill="#fff" height="99.76477" width="130.58641" x="495.53823" y="215.62063"/>
+ <circle cx="517.69473" cy="242.98812" fill="#3f3d56" r="5.42203"/>
+ <path d="M733.53881,373.0493a3.67713,3.67713,0,1,1,0,7.35425H676.51323a3.67712,3.67712,0,1,1,0-7.35425h57.02558m0-.9006H676.51323a4.57773,4.57773,0,1,0,0,9.15545h57.02558a4.57773,4.57773,0,1,0,0-9.15545Z" fill="#3f3d56" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M711.03754,381.30414h-42.9283a4.57772,4.57772,0,1,1,0-9.15544h42.9283a4.57772,4.57772,0,0,1,0,9.15544Z" fill="#FD5E0F" transform="translate(-128.72638 -134.28048)"/>
+ <circle cx="517.69473" cy="265.50302" fill="#3f3d56" r="5.42203"/>
+ <path d="M733.53881,395.5642a3.67713,3.67713,0,1,1,0,7.35425H676.51323a3.67712,3.67712,0,1,1,0-7.35425h57.02558m0-.9006H676.51323a4.57772,4.57772,0,1,0,0,9.15545h57.02558a4.57772,4.57772,0,1,0,0-9.15545Z" fill="#3f3d56" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M727.24826,403.819h-59.139a4.57772,4.57772,0,1,1,0-9.15544h59.139a4.57772,4.57772,0,0,1,0,9.15544Z" fill="#FD5E0F" transform="translate(-128.72638 -134.28048)"/>
+ <circle cx="517.69473" cy="288.01792" fill="#3f3d56" r="5.42203"/>
+ <path d="M733.53881,418.0791a3.67713,3.67713,0,1,1,0,7.35425H676.51323a3.67712,3.67712,0,1,1,0-7.35425h57.02558m0-.9006H676.51323a4.57772,4.57772,0,1,0,0,9.15545h57.02558a4.57772,4.57772,0,1,0,0-9.15545Z" fill="#3f3d56" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M692.125,426.33393H668.10924a4.57772,4.57772,0,1,1,0-9.15543H692.125a4.57772,4.57772,0,0,1,0,9.15543Z" fill="#FD5E0F" transform="translate(-128.72638 -134.28048)"/>
+ <rect fill="#f2f2f2" height="207.61032" width="405.09331" x="51.18842" y="101.50782"/>
+ <rect fill="#fff" height="186.97824" width="378.08709" x="64.69153" y="111.82386"/>
+ <path d="M524.61425,404.55724H248.996a.8626.8626,0,0,1-.86256-.86256V271.59086a.86256.86256,0,1,1,1.72512,0V402.83212H524.61425a.86256.86256,0,0,1,0,1.72512Z" fill="#3f3d56" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M307.88363,395.06909H282.81508a2.56336,2.56336,0,0,1-2.56051-2.5603V357.95166a2.56337,2.56337,0,0,1,2.56051-2.5603h25.06855a2.56337,2.56337,0,0,1,2.56051,2.5603v34.55713A2.56336,2.56336,0,0,1,307.88363,395.06909Z" fill="#FD5E0F" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M353.59927,395.06909H328.53072a2.56336,2.56336,0,0,1-2.56051-2.5603V325.17441a2.56336,2.56336,0,0,1,2.56051-2.5603h25.06855a2.56336,2.56336,0,0,1,2.56051,2.5603v67.33438A2.56336,2.56336,0,0,1,353.59927,395.06909Z" fill="#FD5E0F" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M399.31491,395.06909H374.24636a2.56337,2.56337,0,0,1-2.56051-2.5603V357.95166a2.56337,2.56337,0,0,1,2.56051-2.5603h25.06855a2.56337,2.56337,0,0,1,2.56052,2.5603v34.55713A2.56337,2.56337,0,0,1,399.31491,395.06909Z" fill="#FD5E0F" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M445.03056,395.06909H419.962a2.50734,2.50734,0,0,1-2.56052-2.44431V312.12a2.50734,2.50734,0,0,1,2.56052-2.44431h25.06855a2.50734,2.50734,0,0,1,2.56051,2.44431v80.50475A2.50734,2.50734,0,0,1,445.03056,395.06909Z" fill="#FD5E0F" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M490.7462,395.06909H465.67765a2.56336,2.56336,0,0,1-2.56051-2.5603V288.94692a2.56336,2.56336,0,0,1,2.56051-2.5603H490.7462a2.56336,2.56336,0,0,1,2.56051,2.5603V392.50879A2.56336,2.56336,0,0,1,490.7462,395.06909Z" fill="#FD5E0F" transform="translate(-128.72638 -134.28048)"/>
+ <circle cx="166.62298" cy="205.58481" fill="#3f3d56" r="5.17536"/>
+ <circle cx="212.33862" cy="171.945" fill="#3f3d56" r="5.17536"/>
+ <circle cx="258.05426" cy="205.58481" fill="#3f3d56" r="5.17536"/>
+ <circle cx="303.7699" cy="155.55637" fill="#3f3d56" r="5.17536"/>
+ <circle cx="349.48555" cy="136.58007" fill="#3f3d56" r="5.17536"/>
+ <polygon fill="#3f3d56" points="258.163 206.744 212.339 172.421 167.14 206.275 166.106 204.895 212.339 170.265 257.945 204.425 303.266 154.83 303.447 154.756 349.163 136.337 349.808 137.937 304.274 156.283 258.163 206.744"/>
+ <path d="M1070.27362,765.71952h-381a1,1,0,0,1,0-2h381a1,1,0,0,1,0,2Z" fill="#ccc" transform="translate(-128.72638 -134.28048)"/>
+</svg>
diff --git a/public/illustrations/journey.svg b/public/illustrations/journey.svg
new file mode 100644
index 0000000..ecddddd
--- /dev/null
+++ b/public/illustrations/journey.svg
@@ -0,0 +1,41 @@
+<svg viewBox="0 0 606.78384 466.94693" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <path d="M243.1138,465.75693c0,.66003,.53003,1.19,1.19006,1.19h361.28998c.65997,0,1.19-.52997,1.19-1.19,0-.65997-.53003-1.19-1.19-1.19H244.30386c-.66003,0-1.19006,.53003-1.19006,1.19Z" fill="#ccc"/>
+ <g>
+  <path d="M478.73106,208.21561l-12.81104-88.46045,11.30322-1.22412c11.81543-1.27734,22.81394,5.6587,26.74851,16.87208,7.11395,9.12006,11.27283,19.82416,11.45898,32.65771,4.6001,13.10986-2.28025,27.63817-15.33689,32.38622l-21.36279,7.76855Z" fill="#3f3d56"/>
+  <g>
+   <polygon fill="#a0616a" points="480.18534 444.73761 471.57779 444.94074 466.7798 406.27023 479.48238 405.96963 480.18534 444.73761"/>
+   <path d="M450.65393,462.69556h0c0,1.45409,1.03191,2.63289,2.30485,2.63289h17.08527s1.68133-6.7585,8.53637-9.66706l.47312,9.66706h8.81369l-1.06787-15.5442s2.35771-8.3162-2.53875-12.5672c-4.89651-4.251-.93052-3.65923-.93052-3.65923l-1.9262-9.62068-13.31844,1.56616-.09793,15.10222-6.46334,14.99036-9.48016,4.68304c-.84378,.4168-1.39,1.3665-1.39,2.41661l-.00011,.00003Z" fill="#2f2e41"/>
+  </g>
+  <g>
+   <polygon fill="#a0616a" points="448.73769 444.44459 440.13013 444.64772 435.33214 405.97721 448.03472 405.67661 448.73769 444.44459"/>
+   <path d="M419.20627,462.40254h0c0,1.45409,1.03191,2.63289,2.30485,2.63289h17.08527s1.68133-6.7585,8.53637-9.66706l.47312,9.66706h8.81369l-1.06787-15.5442s2.35771-8.3162-2.53875-12.5672c-4.89651-4.251-.93052-3.65923-.93052-3.65923l-1.9262-9.62068-13.31844,1.56616-.09793,15.10222-6.46334,14.99036-9.48016,4.68304c-.84378,.4168-1.39,1.3665-1.39,2.41661l-.00011,.00003Z" fill="#2f2e41"/>
+  </g>
+  <path d="M473.51973,114.47654l-30.99834,5.39101c-2.13559-5.46579-12.47307-20.54879-13.35857-25.90032-2.30216-13.91303,8.07112-26.73999,22.13422-27.78947h.00005c13.48814-1.00658,21.70534,1.51938,22.85326,14.367,.40236,4.50321,6.26672,8.56659,7.44772,12.93076,6.51556,24.07697-6.52003,15.87037-8.07834,21.00102Z" fill="#2f2e41"/>
+  <path d="M426.97896,215.32013l-2.02163,30.99834,8.68046,172.71696,16-3,10.79624-140.74026,3.9451,143.19884,18.86855,.67388,13.26058-168.16821c1.01319-12.84915-2.35442-25.66276-9.55424-36.3534v-.00002l-59.97505,.67388Z" fill="#2f2e41"/>
+  <path d="M466.06382,115.58636h-24.73181l-5.59265,8.7604-19.54243,8.08652,10.78203,76.82196-2.69551,33.01997c15.23536,5.16951,50.59214,13.171,76.16536-7.94676l-22.92909-41.24626,5.39101-57.95341-10.44509-9.50326-6.40183-10.03917Z" fill="#FD5E0F"/>
+  <circle cx="452.38118" cy="92.54439" fill="#a0616a" r="18.68574"/>
+  <path d="M498.50889,260.19966c-.40161-2.02836-.3118-3.97925,.16337-5.58086l-5.04638-19.08113,9.14981-2.13566,4.13391,19.58585c1.04964,1.2997,1.87607,3.06917,2.27768,5.09753,.91748,4.63378-.72921,8.86346-3.67797,9.4473-2.94876,.58384-6.08294-2.69925-7.00042-7.33302h0Z" fill="#a0616a"/>
+  <path d="M470.44402,130.74859s11.45591-4.71714,16.84692,4.04326c5.39101,8.7604,19.54243,111.86356,19.54243,111.86356l-11.79285,1.68469-23.24875-83.22379-1.34775-34.36772Z" fill="#FD5E0F"/>
+  <polygon fill="#3f3d56" points="478.6378 190.03543 469.07173 122.96288 477.22047 129.48033 478.6378 190.03543"/>
+  <g>
+   <path d="M473.60477,147.41331c-1.53019,1.57383-3.28897,2.67156-4.97489,3.222l-13.63005,15.91357-7.38258-6.70724,14.62119-15.42057c.5028-1.70074,1.55066-3.48969,3.08085-5.06352,3.49571-3.59541,8.18429-4.7067,10.47226-2.48215,2.28798,2.22454,1.30893,6.9425-2.18677,10.53791h0Z" fill="#a0616a"/>
+   <path d="M428.687,127.80491s-12.87212,1.47288-13.84915,6.83274,5.99069,55.13488,5.99069,55.13488l9.68255,10.2629,37.82838-45.06214-11.37771-7.14613-17.48543,13.73961-10.78935-33.76186Z" fill="#FD5E0F"/>
+  </g>
+  <path d="M450.09075,69.15171c-7.60062,1.33743-14.96605,5.45258-18.90924,12.08654-3.94319,6.63396-11.16814,15.87716-5.93007,21.54468,1.81043,1.95886,4.11695,3.44175,5.74553,5.55422,2.77133,3.59476,3.17157,8.64549,1.78962,12.969s-4.34565,7.9896-7.73629,11.00723c7.25776-.74874,13.88133-5.90489,16.38777-12.75715,1.15985-3.17087,1.39592-6.97442-.58875-9.70586-1.04378-1.43653-2.58113-2.41857-3.90693-3.59981-3.41944-3.0466-1.22336-7.64853-1.20302-12.22827s.59689-7.76592,4.04326-10.78203c2.37347,1.8969,10.24363,1.43894,13.24276,.9523,2.99913-.48664,11.38654,11.03204,13.03844,8.48198,3.23374,4.15672,1.02121-4.4089,.41411,.82243-.43433,3.74256-2.89171,6.97085-3.63262,10.66496-.64474,3.21461,.05988,6.5598,1.19239,9.63662,2.55466,6.9406,7.34433,13.03873,13.48203,17.1651-3.54377-5.01207-7.23832-10.48941-7.12173-16.62664,.08648-4.55209,9.78516-21.94748,11.14336-26.29309,2.59893-8.31535-4.55362-9.53005-10.08652-16.25957-4.85898-5.90985-14.25182-4.08367-21.69996-2.33402" fill="#2f2e41"/>
+ </g>
+ <path d="M304.97998,0H19.02002C8.53003,0,0,8.52997,0,19.01996V313.97998c0,10.48999,8.53003,19.02002,19.02002,19.02002H304.97998c10.48999,0,19.02002-8.53003,19.02002-19.02002V19.01996c0-10.48999-8.53003-19.01996-19.02002-19.01996Zm17.02002,313.97998c0,9.39001-7.63,17.02002-17.02002,17.02002H19.02002c-9.39001,0-17.02002-7.63-17.02002-17.02002V19.01996C2,9.63,9.63,2,19.02002,2H304.97998c9.39001,0,17.02002,7.63,17.02002,17.01996V313.97998Z" fill="#3f3d56"/>
+ <g>
+  <path d="M129.03003,19.34998h-28.06006c-1.40997,0-2.56,1.15002-2.56,2.56,0,1.41998,1.15002,2.57001,2.56,2.57001h28.06006c1.40997,0,2.56-1.15002,2.56-2.57001,0-1.40997-1.15002-2.56-2.56-2.56Z" fill="#e6e6e6"/>
+  <path d="M176.03003,19.34998h-28.06006c-1.40997,0-2.56,1.15002-2.56,2.56,0,1.41998,1.15002,2.57001,2.56,2.57001h28.06006c1.40997,0,2.56-1.15002,2.56-2.57001,0-1.40997-1.15002-2.56-2.56-2.56Z" fill="#e6e6e6"/>
+  <path d="M223.03003,19.34998h-28.06006c-1.40997,0-2.56,1.15002-2.56,2.56,0,1.41998,1.15002,2.57001,2.56,2.57001h28.06006c1.40997,0,2.56-1.15002,2.56-2.57001,0-1.40997-1.15002-2.56-2.56-2.56Z" fill="#3f3d56"/>
+ </g>
+ <path d="M85.49814,87.41216H50.29819c-4.36005,0-7.90002,3.53998-7.90002,7.89996v20.20001c0,4.35999,3.53998,7.90002,7.90002,7.90002h35.19995c4.36005,0,7.90002-3.54004,7.90002-7.90002v-20.20001c0-4.35999-3.53998-7.89996-7.90002-7.89996Z" fill="#FD5E0F"/>
+ <path d="M122.73777,140.88811h-35.19995c-4.36005,0-7.90002,3.53998-7.90002,7.89996v20.20001c0,4.35999,3.53998,7.90002,7.90002,7.90002h35.19995c4.36005,0,7.90002-3.54004,7.90002-7.90002v-20.20001c0-4.35999-3.53998-7.89996-7.90002-7.89996Z" fill="#e6e6e6"/>
+ <path d="M129.43365,122.27012c-.66503,0-1.20414-.53911-1.20414-1.20414v-31.30765c0-.66503,.53911-1.20414,1.20414-1.20414s1.20414,.53911,1.20414,1.20414v31.30765c0,.66503-.53911,1.20414-1.20414,1.20414Zm-6.0207-16.85797c0,.66503-.53911,1.20414-1.20414,1.20414h-13.95117l5.17058,5.16817c.47084,.47084,.47084,1.23422,0,1.70506s-1.23422,.47084-1.70506,0l-7.22484-7.22484c-.47084-.46965-.4718-1.23207-.00215-1.70291l.00215-.00215,7.22484-7.22484c.47084-.47084,1.23422-.47084,1.70506,0s.47084,1.23422,0,1.70506l-5.17058,5.16817h13.95117c.66503,0,1.20414,.53911,1.20414,1.20414Z" fill="#3f3d56"/>
+ <path d="M49.62301,158.88811c0,.66503,.53911,1.20414,1.20414,1.20414h13.95117l-5.17058,5.16817c-.47084,.47084-.47084,1.23422,0,1.70506s1.23422,.47084,1.70506,0l7.22484-7.22484c.47084-.46965,.47181-1.23207,.00215-1.70291l-.00215-.00215-7.22484-7.22484c-.47084-.47084-1.23422-.47084-1.70506,0s-.47084,1.23422,0,1.70506l5.17058,5.16817h-13.95117c-.66503,0-1.20414,.53911-1.20414,1.20414Zm-6.0207,16.85797c-.66503,0-1.20414-.53911-1.20414-1.20414v-31.30765c0-.66503,.53911-1.20414,1.20414-1.20414s1.20414,.53911,1.20414,1.20414v31.30765c0,.66503-.53911,1.20414-1.20414,1.20414Z" fill="#3f3d56"/>
+ <path d="M231.73777,115.03543h-35.19995c-4.36005,0-7.90002,3.53998-7.90002,7.89996v20.20001c0,4.35999,3.53998,7.90002,7.90002,7.90002h35.19995c4.36005,0,7.90002-3.54004,7.90002-7.90002v-20.20001c0-4.35999-3.53998-7.89996-7.90002-7.89996Z" fill="#e6e6e6"/>
+ <path d="M231.73777,239.03543h-35.19995c-4.36005,0-7.90002,3.53998-7.90002,7.89996v20.20001c0,4.35999,3.53998,7.90002,7.90002,7.90002h35.19995c4.36005,0,7.90002-3.54004,7.90002-7.90002v-20.20001c0-4.35999-3.53998-7.89996-7.90002-7.89996Z" fill="#e6e6e6"/>
+ <path d="M197.27983,204.60386c0-.66503,.53911-1.20414,1.20414-1.20414h31.30765c.66503,0,1.20414,.53911,1.20414,1.20414s-.53911,1.20414-1.20414,1.20414h-31.30765c-.66503,0-1.20414-.53911-1.20414-1.20414Zm16.85797,6.0207c.66503,0,1.20414,.53911,1.20414,1.20414v13.95117l5.16817-5.17058c.47084-.47084,1.23422-.47084,1.70506,0s.47084,1.23422,0,1.70506l-7.22484,7.22484c-.46965,.47084-1.23207,.47181-1.70291,.00215l-.00215-.00215-7.22484-7.22484c-.47084-.47084-.47084-1.23422,0-1.70506s1.23422-.47084,1.70506,0l5.16817,5.17058v-13.95117c0-.66503,.53911-1.20414,1.20414-1.20414Z" fill="#3f3d56"/>
+ <path d="M214.1378,180.81059c.66503,0,1.20414-.53911,1.20414-1.20414v-13.95117l5.16817,5.17058c.47084,.47084,1.23422,.47084,1.70506,0s.47084-1.23422,0-1.70506l-7.22484-7.22484c-.46965-.47084-1.23207-.4718-1.70291-.00215l-.00215,.00215-7.22484,7.22484c-.47084,.47084-.47084,1.23422,0,1.70506s1.23422,.47084,1.70506,0l5.16817-5.17058v13.95117c0,.66503,.53911,1.20414,1.20414,1.20414Zm-16.85797,6.0207c0-.66503,.53911-1.20414,1.20414-1.20414h31.30765c.66503,0,1.20414,.53911,1.20414,1.20414s-.53911,1.20414-1.20414,1.20414h-31.30765c-.66503,0-1.20414-.53911-1.20414-1.20414Z" fill="#3f3d56"/>
+ <circle cx="208.6378" cy="22.03543" fill="#FD5E0F" r="9"/>
+</svg>
diff --git a/public/illustrations/no-data.svg b/public/illustrations/no-data.svg
new file mode 100644
index 0000000..1343b9c
--- /dev/null
+++ b/public/illustrations/no-data.svg
@@ -0,0 +1,12 @@
+<svg data-name="Layer 1" viewBox="0 0 647.63626 632.17383" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <path d="M687.3279,276.08691H512.81813a15.01828,15.01828,0,0,0-15,15v387.85l-2,.61005-42.81006,13.11a8.00676,8.00676,0,0,1-9.98974-5.31L315.678,271.39691a8.00313,8.00313,0,0,1,5.31006-9.99l65.97022-20.2,191.25-58.54,65.96972-20.2a7.98927,7.98927,0,0,1,9.99024,5.3l32.5498,106.32Z" fill="#f2f2f2" transform="translate(-276.18187 -133.91309)"/>
+ <path d="M725.408,274.08691l-39.23-128.14a16.99368,16.99368,0,0,0-21.23-11.28l-92.75,28.39L380.95827,221.60693l-92.75,28.4a17.0152,17.0152,0,0,0-11.28028,21.23l134.08008,437.93a17.02661,17.02661,0,0,0,16.26026,12.03,16.78926,16.78926,0,0,0,4.96972-.75l63.58008-19.46,2-.62v-2.09l-2,.61-64.16992,19.65a15.01489,15.01489,0,0,1-18.73-9.95l-134.06983-437.94a14.97935,14.97935,0,0,1,9.94971-18.73l92.75-28.4,191.24024-58.54,92.75-28.4a15.15551,15.15551,0,0,1,4.40966-.66,15.01461,15.01461,0,0,1,14.32032,10.61l39.0498,127.56.62012,2h2.08008Z" fill="#3f3d56" transform="translate(-276.18187 -133.91309)"/>
+ <path d="M398.86279,261.73389a9.0157,9.0157,0,0,1-8.61133-6.3667l-12.88037-42.07178a8.99884,8.99884,0,0,1,5.9712-11.24023l175.939-53.86377a9.00867,9.00867,0,0,1,11.24072,5.9707l12.88037,42.07227a9.01029,9.01029,0,0,1-5.9707,11.24072L401.49219,261.33887A8.976,8.976,0,0,1,398.86279,261.73389Z" fill="#FD5E0F" transform="translate(-276.18187 -133.91309)"/>
+ <circle cx="190.15351" cy="24.95465" fill="#FD5E0F" r="20"/>
+ <circle cx="190.15351" cy="24.95465" fill="#fff" r="12.66462"/>
+ <path d="M878.81836,716.08691h-338a8.50981,8.50981,0,0,1-8.5-8.5v-405a8.50951,8.50951,0,0,1,8.5-8.5h338a8.50982,8.50982,0,0,1,8.5,8.5v405A8.51013,8.51013,0,0,1,878.81836,716.08691Z" fill="#e6e6e6" transform="translate(-276.18187 -133.91309)"/>
+ <path d="M723.31813,274.08691h-210.5a17.02411,17.02411,0,0,0-17,17v407.8l2-.61v-407.19a15.01828,15.01828,0,0,1,15-15H723.93825Zm183.5,0h-394a17.02411,17.02411,0,0,0-17,17v458a17.0241,17.0241,0,0,0,17,17h394a17.0241,17.0241,0,0,0,17-17v-458A17.02411,17.02411,0,0,0,906.81813,274.08691Zm15,475a15.01828,15.01828,0,0,1-15,15h-394a15.01828,15.01828,0,0,1-15-15v-458a15.01828,15.01828,0,0,1,15-15h394a15.01828,15.01828,0,0,1,15,15Z" fill="#3f3d56" transform="translate(-276.18187 -133.91309)"/>
+ <path d="M801.81836,318.08691h-184a9.01015,9.01015,0,0,1-9-9v-44a9.01016,9.01016,0,0,1,9-9h184a9.01016,9.01016,0,0,1,9,9v44A9.01015,9.01015,0,0,1,801.81836,318.08691Z" fill="#FD5E0F" transform="translate(-276.18187 -133.91309)"/>
+ <circle cx="433.63626" cy="105.17383" fill="#FD5E0F" r="20"/>
+ <circle cx="433.63626" cy="105.17383" fill="#fff" r="12.18187"/>
+</svg>
diff --git a/public/illustrations/setup-analytics.svg b/public/illustrations/setup-analytics.svg
new file mode 100644
index 0000000..349ced2
--- /dev/null
+++ b/public/illustrations/setup-analytics.svg
@@ -0,0 +1,35 @@
+<svg data-name="Layer 1" viewBox="0 0 686.30979 507.37542" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <path d="M839.55171,703.68771h-29.02c-.43018-.78-.83008-1.58-1.2002-2.39-3.33984-7.15-4.75-15.13-6.1001-22.95l-2.18994-12.7q10.5,7.635,20.99024,15.26c2.27978,1.66,4.60986,3.39,6.7998,5.26,4.61035,3.91,8.59033,8.43,10.1499,14.17.08008.32.16016.64.22022.96A19.46641,19.46641,0,0,1,839.55171,703.68771Z" fill="#f0f0f0" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M843.62153,701.29769a.77484.77484,0,0,1-.00976.15,10.48655,10.48655,0,0,1-.54,2.24H830.04145a16.31218,16.31218,0,0,1-1.03955-2.39,17.49851,17.49851,0,0,1-.8501-3.39,35.21814,35.21814,0,0,1,.67969-11.74c.25-1.25.52-2.51.79-3.75l1.54-7.08,7.71,12.39C841.45161,691.87771,844.13179,696.44766,843.62153,701.29769Z" fill="#f0f0f0" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M942.16168,232.86478H257.83832a1.0156,1.0156,0,0,1,0-2.0307H942.16168a1.0156,1.0156,0,0,1,0,2.0307Z" fill="#cacaca" transform="translate(-256.84511 -196.31229)"/>
+ <ellipse cx="23.34831" cy="11.16881" fill="#3f3d56" rx="10.92534" ry="11.16881"/>
+ <ellipse cx="61.09038" cy="11.16881" fill="#3f3d56" rx="10.92534" ry="11.16881"/>
+ <ellipse cx="98.83246" cy="11.16881" fill="#3f3d56" rx="10.92534" ry="11.16881"/>
+ <path d="M919.5485,203.1439H892.73177a2.03119,2.03119,0,0,1,0-4.06139H919.5485a2.03119,2.03119,0,0,1,0,4.06139Z" fill="#3f3d56" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M919.5485,210.759H892.73177a2.03119,2.03119,0,0,1,0-4.06139H919.5485a2.03119,2.03119,0,0,1,0,4.06139Z" fill="#3f3d56" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M919.5485,218.3741H892.73177a2.03119,2.03119,0,0,1,0-4.06139H919.5485a2.03119,2.03119,0,0,1,0,4.06139Z" fill="#3f3d56" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M841.26582,578.28769H321.67744a20.7293,20.7293,0,0,1-20.70581-20.70606V298.99325a20.72918,20.72918,0,0,1,20.70581-20.70556H841.26582a20.72919,20.72919,0,0,1,20.70581,20.70556V557.58163A20.7293,20.7293,0,0,1,841.26582,578.28769Z" fill="#f0f0f0" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M898.30024,648.84188H378.71186a20.7293,20.7293,0,0,1-20.70581-20.706V369.54745a20.7292,20.7292,0,0,1,20.70581-20.70557H898.30024a20.72919,20.72919,0,0,1,20.70581,20.70557V628.13583A20.72929,20.72929,0,0,1,898.30024,648.84188Z" fill="#fff" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M898.30024,648.84188H378.71186a20.7293,20.7293,0,0,1-20.70581-20.706V369.54745a20.7292,20.7292,0,0,1,20.70581-20.70557H898.30024a20.72919,20.72919,0,0,1,20.70581,20.70557V628.13583A20.72929,20.72929,0,0,1,898.30024,648.84188Zm-519.58838-297a17.72584,17.72584,0,0,0-17.70581,17.70557V628.13583a17.72594,17.72594,0,0,0,17.70581,17.706H898.30024a17.726,17.726,0,0,0,17.70581-17.706V369.54745a17.72592,17.72592,0,0,0-17.70581-17.70557Z" fill="#e4e4e4" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M418.61225,603.56884H834.09264V532.35693a56.38609,56.38609,0,0,0-17.29473-40.16373l-.11295-.11031c-7.42075-7.44571-32.22061-26.34266-57.88-24.74044-13.55448.84379-25.159,7.3761-34.49064,19.4157-29.04672,37.48987-67.20243,24.835-87.36145,13.955-17.76588-9.59031-35.90932-14.09161-53.93-13.37521-25.23817.98693-60.76106,10.28438-86.6677,48.9746-9.89467,14.76533-31.41327,34.80813-77.74291,46.587Z" fill="#FD5E0F" style="isolation:isolate" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M857.6003,605.225H419.41186a1.3714,1.3714,0,0,1-1.37133-1.37133V393.8299a1.37133,1.37133,0,0,1,2.74266,0V602.4823H857.6003a1.37133,1.37133,0,1,1,0,2.74266Z" fill="#3f3d56" transform="translate(-256.84511 -196.31229)"/>
+ <circle cx="325.26146" cy="293.18288" fill="#3f3d56" r="8.22798"/>
+ <circle cx="486.63869" cy="271.66591" fill="#3f3d56" r="8.22798"/>
+ <circle cx="405.95007" cy="316.04465" fill="#3f3d56" r="8.22798"/>
+ <circle cx="244.57284" cy="328.14794" fill="#3f3d56" r="8.22798"/>
+ <circle cx="567.32731" cy="301.25174" fill="#3f3d56" r="8.22798"/>
+ <path d="M919.49205,523.44529a8.62866,8.62866,0,0,1,.92064-13.199L911.5418,480.8942l15.27123,4.54873,6.0827,27.17593a8.67542,8.67542,0,0,1-13.40368,10.82643Z" fill="#9e616a" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M775.49791,348.90049a8.62865,8.62865,0,0,0,8.96991,9.72628l11.42578,28.4551,9.0756-13.09714-12.24151-25.01351a8.67542,8.67542,0,0,0-17.22978-.07073Z" fill="#9e616a" transform="translate(-256.84511 -196.31229)"/>
+ <polygon fill="#9e616a" points="647.472 494.812 636.952 494.812 631.948 454.235 647.474 454.236 647.472 494.812"/>
+ <path d="M907.00008,701.32191l-33.92056-.00126v-.429A13.20353,13.20353,0,0,1,886.28235,687.689h.00084l20.71751.00084Z" fill="#2f2e41" transform="translate(-256.84511 -196.31229)"/>
+ <polygon fill="#9e616a" points="613.047 494.478 603.018 491.303 610.493 451.107 625.295 455.794 613.047 494.478"/>
+ <path d="M869.37275,701.32191l-32.33854-10.23828.12948-.409a13.20355,13.20355,0,0,1,16.57171-8.60245l.0008.00025,19.75126,6.25326Z" fill="#2f2e41" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M857.43293,492.80844s-15.60875,24.50868-10.09315,46.383,11.52216,63.92019,11.52216,63.92019l29.90593,71.17205,22.2929-.90945L888.92232,589.46l.87536-56.10627s15.38706-26.81444,12.39054-35.16157S857.43293,492.80844,857.43293,492.80844Z" fill="#2f2e41" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M908.42646,501.571s1.92027,24.31339-4.08629,34.61035-12.406,49.48841-12.406,49.48841l-10.20948,78.38239-21.14661-6.88153,18.03212-87.81806,14.1729-69.07881Z" fill="#2f2e41" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M915.92425,383.87218l-16.499-11.34081-25.10769-.72927-8.74352,8.57208-13.34314,6.81363-1.23569,111.00437s39.95671,19.15179,61.45273,9.90725l10.341-86.47174C927.07929,404.4661,915.92425,383.87218,915.92425,383.87218Z" fill="#3f3d56" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M855.58211,416.85183H811.57262l-28.9141-49.77031,18.80108-7.447,15.92224,28.32334,23.04561-2.08571,14.38938-.69593a15.84711,15.84711,0,0,1,16.49437,17.75949h0A15.86568,15.86568,0,0,1,855.58211,416.85183Z" fill="#3f3d56" transform="translate(-256.84511 -196.31229)"/>
+ <circle cx="632.07342" cy="144.5792" fill="#9e616a" r="21.76948"/>
+ <path d="M915.1489,335.93858c-.66849-4.77931-3.90535-9.31727-8.50873-10.76518-1.82866-5.31031-6.67233-9.21985-12.0238-10.92407a23.48728,23.48728,0,0,0-27.00124,9.84786c-.40956.64393-1.66882,2.22585-1.63362,2.99427.04462.97592,1.53767,1.98358,2.28765,2.59886a33.53927,33.53927,0,0,0,5.98121,3.69167c7.8281,4.05838,5.22223,10.43637,5.116,17.66385-.05153,3.51224,1.121,6.51112,4.1159,8.51727,4.32224,2.89534,10.50791,1.74345,15.2108.58145,5.3364-1.31865,9.773-6.00656,12.81631-10.52662C914.20472,345.61491,915.8176,340.71788,915.1489,335.93858Z" fill="#2f2e41" transform="translate(-256.84511 -196.31229)"/>
+ <polygon fill="#3f3d56" points="658.087 215.476 676.547 306.933 649.333 308.422 658.087 215.476"/>
+ <path d="M933.99165,702.4877a1.19488,1.19488,0,0,1-1.18994,1.2H791.5019a1.195,1.195,0,0,1,0-2.39H932.80171A1.19269,1.19269,0,0,1,933.99165,702.4877Z" fill="#cacaca" transform="translate(-256.84511 -196.31229)"/>
+</svg>
-- 
2.49.1


From 414e112d3dfee9fa21b38c32031eacc23cd25ab3 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 15:23:31 +0100
Subject: [PATCH 201/428] feat(sidebar): mobile exit animation, site picker
 entrance, hover nudge, CSS tooltips

---
 components/dashboard/Sidebar.tsx | 112 +++++++++++++++++++++----------
 1 file changed, 77 insertions(+), 35 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 8cbf35a..ec938ff 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -193,7 +193,7 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
       </button>
 
       {open && (
-        <div className="absolute left-3 top-full mt-1 z-50 w-[240px] bg-neutral-900 border border-neutral-700 rounded-xl shadow-xl overflow-hidden">
+        <div className="absolute left-3 top-full mt-1 z-50 w-[240px] bg-neutral-900 border border-neutral-700 rounded-xl shadow-xl overflow-hidden animate-in fade-in zoom-in-95 duration-150">
           <div className="p-2">
             <input
               type="text"
@@ -262,21 +262,27 @@ function NavLink({
   const active = matchesPathname || matchesPending
 
   return (
-    <Link
-      href={href}
-      onClick={() => { onNavigate(href); onClick?.() }}
-      title={collapsed ? item.label : undefined}
-      className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden ${
-        active
-          ? 'bg-brand-orange/10 text-brand-orange'
-          : 'text-neutral-400 hover:text-white hover:bg-neutral-800'
-      }`}
-    >
-      <span className="w-7 h-7 flex items-center justify-center shrink-0">
-        <item.icon className="w-[18px] h-[18px]" weight={active ? 'fill' : 'regular'} />
-      </span>
-      <Label collapsed={collapsed}>{item.label}</Label>
-    </Link>
+    <div className="relative group/nav">
+      <Link
+        href={href}
+        onClick={() => { onNavigate(href); onClick?.() }}
+        className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 ${
+          active
+            ? 'bg-brand-orange/10 text-brand-orange'
+            : 'text-neutral-400 hover:text-white hover:bg-neutral-800 hover:translate-x-0.5'
+        }`}
+      >
+        <span className="w-7 h-7 flex items-center justify-center shrink-0">
+          <item.icon className="w-[18px] h-[18px]" weight={active ? 'fill' : 'regular'} />
+        </span>
+        <Label collapsed={collapsed}>{item.label}</Label>
+      </Link>
+      {collapsed && (
+        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/nav:opacity-100 transition-opacity duration-150 delay-150 z-50">
+          {item.label}
+        </span>
+      )}
+    </div>
   )
 }
 
@@ -365,12 +371,17 @@ function SidebarContent({
       <div className="border-t border-neutral-800/60 px-2 py-3 shrink-0">
         {/* Notifications, Profile — same layout as nav items */}
         <div className="space-y-0.5 mb-1">
-          <span title={c ? 'Notifications' : undefined}>
+          <div className="relative group/notif">
             <NotificationCenter anchor="right" variant="sidebar">
               <Label collapsed={c}>Notifications</Label>
             </NotificationCenter>
-          </span>
-          <span title={c ? (user?.display_name?.trim() || 'Profile') : undefined}>
+            {c && (
+              <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/notif:opacity-100 transition-opacity duration-150 delay-150 z-50">
+                Notifications
+              </span>
+            )}
+          </div>
+          <div className="relative group/user">
             <UserMenu
               auth={auth}
               LinkComponent={Link}
@@ -385,22 +396,33 @@ function SidebarContent({
             >
               <Label collapsed={c}>{user?.display_name?.trim() || 'Profile'}</Label>
             </UserMenu>
-          </span>
+            {c && (
+              <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/user:opacity-100 transition-opacity duration-150 delay-150 z-50">
+                {user?.display_name?.trim() || 'Profile'}
+              </span>
+            )}
+          </div>
         </div>
 
         {/* Settings + Collapse */}
         <div className="space-y-0.5">
           {!isMobile && (
-            <button
-              onClick={onToggle}
-              className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800 w-full overflow-hidden"
-              title={collapsed ? 'Expand sidebar (press [)' : 'Collapse sidebar (press [)'}
-            >
-              <span className="w-7 h-7 flex items-center justify-center shrink-0">
-                <CollapseLeftIcon className={`w-[18px] h-[18px] transition-transform duration-200 ${c ? 'rotate-180' : ''}`} />
-              </span>
-              <Label collapsed={c}>{c ? 'Expand' : 'Collapse'}</Label>
-            </button>
+            <div className="relative group/collapse">
+              <button
+                onClick={onToggle}
+                className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800 w-full overflow-hidden"
+              >
+                <span className="w-7 h-7 flex items-center justify-center shrink-0">
+                  <CollapseLeftIcon className={`w-[18px] h-[18px] transition-transform duration-200 ${c ? 'rotate-180' : ''}`} />
+                </span>
+                <Label collapsed={c}>{c ? 'Expand' : 'Collapse'}</Label>
+              </button>
+              {c && (
+                <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/collapse:opacity-100 transition-opacity duration-150 delay-150 z-50">
+                  Expand (press [)
+                </span>
+              )}
+            </div>
           )}
         </div>
       </div>
@@ -424,6 +446,7 @@ export default function Sidebar({
   const [sites, setSites] = useState<Site[]>([])
   const [orgs, setOrgs] = useState<OrganizationMember[]>([])
   const [pendingHref, setPendingHref] = useState<string | null>(null)
+  const [mobileClosing, setMobileClosing] = useState(false)
   const wasCollapsedRef = useRef(false)
   const pickerOpenCallbackRef = useRef<(() => void) | null>(null)
   // Safe to read localStorage directly — this component is loaded with ssr:false
@@ -477,6 +500,14 @@ export default function Sidebar({
     setCollapsed(true); localStorage.setItem(SIDEBAR_KEY, 'true')
   }, [])
 
+  const handleMobileClose = useCallback(() => {
+    setMobileClosing(true)
+    setTimeout(() => {
+      setMobileClosing(false)
+      onMobileClose()
+    }, 200)
+  }, [onMobileClose])
+
   const handleNavigate = useCallback((href: string) => { setPendingHref(href) }, [])
 
   return (
@@ -514,13 +545,24 @@ export default function Sidebar({
       </aside>
 
       {/* Mobile overlay */}
-      {mobileOpen && (
+      {(mobileOpen || mobileClosing) && (
         <>
-          <div className="fixed inset-0 z-40 bg-black/30 md:hidden" onClick={onMobileClose} />
-          <aside className="fixed inset-y-0 left-0 z-50 w-72 bg-neutral-900 border-r border-neutral-800 shadow-xl md:hidden animate-in slide-in-from-left duration-200">
+          <div
+            className={`fixed inset-0 z-40 md:hidden transition-opacity duration-200 ${
+              mobileClosing ? 'bg-black/0' : 'bg-black/30'
+            }`}
+            onClick={handleMobileClose}
+          />
+          <aside
+            className={`fixed inset-y-0 left-0 z-50 w-72 bg-neutral-900 border-r border-neutral-800 shadow-xl md:hidden ${
+              mobileClosing
+                ? 'animate-out slide-out-to-left duration-200 fill-mode-forwards'
+                : 'animate-in slide-in-from-left duration-200'
+            }`}
+          >
             <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-800">
               <span className="text-sm font-semibold text-white">Navigation</span>
-              <button onClick={onMobileClose} className="p-1.5 text-neutral-400 hover:text-neutral-300">
+              <button onClick={handleMobileClose} className="p-1.5 text-neutral-400 hover:text-neutral-300">
                 <XIcon className="w-5 h-5" />
               </button>
             </div>
@@ -532,7 +574,7 @@ export default function Sidebar({
               canEdit={canEdit}
               pendingHref={pendingHref}
               onNavigate={handleNavigate}
-              onMobileClose={onMobileClose}
+              onMobileClose={handleMobileClose}
               onExpand={expand}
               onCollapse={collapse}
               onToggle={toggle}
-- 
2.49.1


From 9510e2da8c09ac0c450ccd67ffa5e86351ad480e Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 15:28:03 +0100
Subject: [PATCH 202/428] feat(sidebar): fix backdrop fade transition, add
 shimmer to SSR placeholder

Use opacity instead of bg-color swap for proper transition-opacity
animation on mobile backdrop. Add shimmer gradient to the sidebar
loading placeholder in DashboardShell.
---
 components/dashboard/DashboardShell.tsx | 6 ++++--
 components/dashboard/Sidebar.tsx        | 4 ++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 23bd12a..122a73f 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -11,9 +11,11 @@ const Sidebar = dynamic(() => import('./Sidebar'), {
   // so page content never occupies the sidebar zone
   loading: () => (
     <div
-      className="hidden md:block shrink-0 border-r border-neutral-800/60 bg-neutral-900/90 backdrop-blur-xl"
+      className="hidden md:block shrink-0 border-r border-neutral-800/60 bg-neutral-900/90 backdrop-blur-xl overflow-hidden relative"
       style={{ width: 64 }}
-    />
+    >
+      <div className="absolute inset-0 bg-gradient-to-r from-transparent via-neutral-800/10 to-transparent animate-shimmer" />
+    </div>
   ),
 })
 
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index ec938ff..4fcbe2e 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -548,8 +548,8 @@ export default function Sidebar({
       {(mobileOpen || mobileClosing) && (
         <>
           <div
-            className={`fixed inset-0 z-40 md:hidden transition-opacity duration-200 ${
-              mobileClosing ? 'bg-black/0' : 'bg-black/30'
+            className={`fixed inset-0 z-40 bg-black/30 md:hidden transition-opacity duration-200 ${
+              mobileClosing ? 'opacity-0' : 'opacity-100'
             }`}
             onClick={handleMobileClose}
           />
-- 
2.49.1


From c07c020015a16016ffbb65b03b1e19e94582d128 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 15:28:52 +0100
Subject: [PATCH 203/428] feat(home): add illustration to home page empty state

Replace globe icon with setup-analytics illustration on the home page
when no sites are created.
---
 app/page.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 851f089..24cd274 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -13,7 +13,7 @@ import { LoadingOverlay } from '@ciphera-net/ui'
 import SiteList from '@/components/sites/SiteList'
 import DeleteSiteModal from '@/components/sites/DeleteSiteModal'
 import { Button } from '@ciphera-net/ui'
-import { XIcon, GlobeIcon } from '@ciphera-net/ui'
+import { XIcon } from '@ciphera-net/ui'
 import { Cookie, ShieldCheck, Code, Lightning, ArrowRight, GithubLogo } from '@phosphor-icons/react'
 import DashboardDemo from '@/components/marketing/DashboardDemo'
 import FeatureSections from '@/components/marketing/FeatureSections'
@@ -383,10 +383,12 @@ export default function HomePage() {
       </div>
 
       {!sitesLoading && sites.length === 0 && (
-        <div className="mb-8 rounded-2xl border-2 border-dashed border-brand-orange/30 bg-brand-orange/10 p-6 text-center">
-          <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-brand-orange/20 text-brand-orange mb-4">
-            <GlobeIcon className="h-7 w-7" />
-          </div>
+        <div className="mb-8 rounded-2xl border-2 border-dashed border-brand-orange/30 bg-brand-orange/10 p-8 text-center flex flex-col items-center">
+          <img
+            src="/illustrations/setup-analytics.svg"
+            alt="Set up your first site"
+            className="w-56 h-auto mb-6"
+          />
           <h2 className="text-xl font-bold text-white mb-2">Add your first site</h2>
           <p className="text-neutral-400 mb-6 max-w-md mx-auto">
             Connect a domain to start collecting privacy-friendly analytics. You can add more sites later from the dashboard.
-- 
2.49.1


From 21cee4f4aecec6da5655dfe55414052aacca35c0 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 15:34:40 +0100
Subject: [PATCH 204/428] fix(illustrations): remap SVG colors to dark theme
 palette

Replace light fills (white, light grays) with dark neutral equivalents
so illustrations blend with Pulse's dark UI.
---
 public/illustrations/blank-canvas.svg    | 30 +++++-----
 public/illustrations/data-trends.svg     | 76 ++++++++++++------------
 public/illustrations/journey.svg         | 38 ++++++------
 public/illustrations/no-data.svg         | 12 ++--
 public/illustrations/setup-analytics.svg | 54 ++++++++---------
 5 files changed, 105 insertions(+), 105 deletions(-)

diff --git a/public/illustrations/blank-canvas.svg b/public/illustrations/blank-canvas.svg
index efd66c3..0258e5c 100644
--- a/public/illustrations/blank-canvas.svg
+++ b/public/illustrations/blank-canvas.svg
@@ -1,28 +1,28 @@
 <svg data-name="Layer 1" viewBox="0 0 550.71039 567.98584" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <path d="M711.24677,733.99292H560.52137a6.616,6.616,0,0,1-6.60858-6.60839V622.00475a6.616,6.616,0,0,1,6.60858-6.60858h150.7254a6.616,6.616,0,0,1,6.60839,6.60858V727.38453A6.6161,6.6161,0,0,1,711.24677,733.99292Z" fill="#f2f2f2" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M711.24677,733.99292H560.52137a6.616,6.616,0,0,1-6.60858-6.60839V622.00475a6.616,6.616,0,0,1,6.60858-6.60858h150.7254a6.616,6.616,0,0,1,6.60839,6.60858V727.38453A6.6161,6.6161,0,0,1,711.24677,733.99292Z" fill="#2a2a2a" transform="translate(-324.64481 -166.00708)"/>
  <path d="M464.93162,459.293a11.22645,11.22645,0,0,0-3.595-16.83486l-.94985-100.813-18.84219,8.64691,4.1444,97.50067A11.2873,11.2873,0,0,0,464.93162,459.293Z" fill="#9e616a" transform="translate(-324.64481 -166.00708)"/>
  <path d="M464.42409,316.12137s-18.32929-8.89112-20.86418,7.88369-12.96145,60.43336-12.96145,60.43336l31.63926-2.23768Z" fill="#9e616a" transform="translate(-324.64481 -166.00708)"/>
  <path d="M464.93162,459.293a11.22645,11.22645,0,0,0-3.595-16.83486l-.94985-100.813-18.84219,8.64691,4.1444,97.50067A11.2873,11.2873,0,0,0,464.93162,459.293Z" fill="#9e616a" transform="translate(-324.64481 -166.00708)"/>
  <path d="M464.42409,316.12137s-18.32929-8.89112-20.86418,7.88369-12.96145,60.43336-12.96145,60.43336l31.63926-2.23768Z" fill="#FD5E0F" transform="translate(-324.64481 -166.00708)"/>
- <path d="M411.35263,704.46626a3.61323,3.61323,0,0,1-2.61865-6.26262c.09111-.36213.15647-.62217.24758-.9843q-.0489-.11821-.09837-.23628a9.70311,9.70311,0,0,0-17.89849.06652c-2.92739,7.05051-6.65447,14.11307-7.57216,21.5678a28.7054,28.7054,0,0,0,.5039,9.87234,115.08614,115.08614,0,0,1-10.46893-47.79893,111.07991,111.07991,0,0,1,.689-12.392q.5708-5.05966,1.58377-10.0473a116.4192,116.4192,0,0,1,23.087-49.34152,30.9826,30.9826,0,0,0,12.88556-13.36893,23.6336,23.6336,0,0,0,2.14933-6.45821c-.62729.08228-1.26489.13369-1.89217.17479-.19543.01023-.40108.02055-.59651.03087l-.07369.0033a3.57989,3.57989,0,0,1-2.9401-5.83225q.40627-.5.81305-.99948c.4114-.51423.833-1.01814,1.24434-1.53228a1.7836,1.7836,0,0,0,.13369-.15432c.47313-.58619.94609-1.16206,1.41922-1.74825a10.35176,10.35176,0,0,0-3.39367-3.28044c-4.74083-2.77661-11.28133-.85358-14.70586,3.43476-3.43476,4.28826-4.0826,10.30438-2.88976,15.66218a41.48513,41.48513,0,0,0,5.73842,12.793c-.25715.32912-.52454.64792-.78161.977a117.17121,117.17121,0,0,0-12.22973,19.37481,48.70929,48.70929,0,0,0-2.908-22.62447c-2.78346-6.71479-8.00064-12.37-12.595-18.17495-5.51857-6.97261-16.83488-3.9296-17.80713,4.90927q-.01412.12837-.02757.25665,1.02363.57749,2.004,1.22586a4.9011,4.9011,0,0,1-1.976,8.91908l-.09994.01543a48.7668,48.7668,0,0,0,1.28544,7.29124A50.20988,50.20988,0,0,0,376.56347,641.273c.40108.20565.79193.41131,1.193.60673a119.598,119.598,0,0,0-6.43767,30.296,113.43525,113.43525,0,0,0,.08228,18.31542l-.03086-.216a29.97408,29.97408,0,0,0-10.23241-17.3076c-7.87438-6.46853-18.9994-8.8505-27.49446-14.04994a5.62528,5.62528,0,0,0-8.61571,5.47252q.01709.11352.03474.227a32.92633,32.92633,0,0,1,3.69184,1.779q1.02362.57761,2.004,1.22585a4.90116,4.90116,0,0,1-1.976,8.91917l-.1.01535c-.072.01031-.13369.02063-.20557.03094a48.80758,48.80758,0,0,0,8.97767,14.05786A50.25446,50.25446,0,0,0,373.9,706.63672h.01032a119.56344,119.56344,0,0,0,8.03167,23.447h28.69167c.10291-.3188.19542-.64792.288-.96672a32.59925,32.59925,0,0,1-7.93916-.473c2.12878-2.61214,4.25747-5.24483,6.38625-7.85688a1.78139,1.78139,0,0,0,.1337-.15424c1.07978-1.33685,2.16987-2.66347,3.24965-4.00032l.00058-.00165a47.75027,47.75027,0,0,0-1.39916-12.16412Z" fill="#f2f2f2" transform="translate(-324.64481 -166.00708)"/>
- <path d="M834.35263,704.46626a3.61323,3.61323,0,0,1-2.61865-6.26262c.09111-.36213.15647-.62217.24758-.9843q-.0489-.11821-.09837-.23628a9.70311,9.70311,0,0,0-17.89849.06652c-2.92739,7.05051-6.65447,14.11307-7.57216,21.5678a28.7054,28.7054,0,0,0,.5039,9.87234,115.08614,115.08614,0,0,1-10.46893-47.79893,111.07991,111.07991,0,0,1,.689-12.392q.5708-5.05966,1.58377-10.0473a116.4192,116.4192,0,0,1,23.087-49.34152,30.9826,30.9826,0,0,0,12.88556-13.36893,23.6336,23.6336,0,0,0,2.14933-6.45821c-.62729.08228-1.26489.13369-1.89217.17479-.19543.01023-.40108.02055-.59651.03087l-.07369.0033a3.57989,3.57989,0,0,1-2.9401-5.83225q.40627-.5.813-.99948c.4114-.51423.833-1.01814,1.24434-1.53228a1.7836,1.7836,0,0,0,.13369-.15432c.47313-.58619.94609-1.16206,1.41922-1.74825a10.35176,10.35176,0,0,0-3.39367-3.28044c-4.74083-2.77661-11.28133-.85358-14.70586,3.43476-3.43476,4.28826-4.0826,10.30438-2.88976,15.66218a41.48513,41.48513,0,0,0,5.73842,12.793c-.25715.32912-.52454.64792-.78161.977a117.17121,117.17121,0,0,0-12.22973,19.37481,48.70929,48.70929,0,0,0-2.908-22.62447c-2.78346-6.71479-8.00064-12.37-12.595-18.17495-5.51857-6.97261-16.83488-3.9296-17.80713,4.90927q-.01412.12837-.02757.25665,1.02363.57749,2.004,1.22586a4.9011,4.9011,0,0,1-1.976,8.91908l-.09994.01543a48.7668,48.7668,0,0,0,1.28544,7.29124A50.20988,50.20988,0,0,0,799.56347,641.273c.40108.20565.79193.41131,1.193.60673a119.598,119.598,0,0,0-6.43767,30.296,113.43525,113.43525,0,0,0,.08228,18.31542l-.03086-.216a29.97408,29.97408,0,0,0-10.23241-17.3076c-7.87438-6.46853-18.9994-8.8505-27.49446-14.04994a5.62528,5.62528,0,0,0-8.61571,5.47252q.01708.11352.03474.227a32.92633,32.92633,0,0,1,3.69184,1.779q1.02362.57761,2.004,1.22585a4.90116,4.90116,0,0,1-1.976,8.91917l-.1.01535c-.072.01031-.13369.02063-.20557.03094a48.80758,48.80758,0,0,0,8.97767,14.05786A50.25446,50.25446,0,0,0,796.9,706.63672h.01032a119.56344,119.56344,0,0,0,8.03167,23.447h28.69167c.10291-.3188.19542-.64792.288-.96672a32.59925,32.59925,0,0,1-7.93916-.473c2.12878-2.61214,4.25747-5.24483,6.38625-7.85688a1.78139,1.78139,0,0,0,.1337-.15424c1.07978-1.33685,2.16987-2.66347,3.24965-4.00032l.00058-.00165a47.75027,47.75027,0,0,0-1.39916-12.16412Z" fill="#f2f2f2" transform="translate(-324.64481 -166.00708)"/>
- <path d="M723.86447,729.89617c-.08252,0-.165-.00195-.24756-.0039a8.169,8.169,0,0,1-7.70215-8.25488c0-12.79493-9.13965-20.25879-18.19726-21.9795-9.05762-1.71972-20.29785,1.8711-24.98926,13.77637l-4.26514,10.707a19.67152,19.67152,0,0,1-27.78662,0l-.25244-.252.15674-.32129,75.334-154.13379v-3.77734a19.488,19.488,0,0,1,.002-3.5l-.002-388.20313a7.94627,7.94627,0,0,1,8.19043-7.94287,8.16941,8.16941,0,0,1,7.70264,8.25488v387.936a19.489,19.489,0,0,1-.00195,3.5l.00195,3.73144,75.49072,154.45606-.25244.252a19.67152,19.67152,0,0,1-27.78662,0l-.11182-.16992-4.15332-10.53711c-4.6914-11.9043-15.93017-15.49316-24.98926-13.77637-9.05761,1.72071-18.19726,9.18457-18.19726,21.9795v.3125a7.94652,7.94652,0,0,1-7.94336,7.94628Z" fill="#e6e6e6" transform="translate(-324.64481 -166.00708)"/>
- <path d="M861.76287,446.99292H585.95965A12.10626,12.10626,0,0,1,573.867,434.90063v-192.828A12.10611,12.10611,0,0,1,585.95965,229.98H861.76287a12.10626,12.10626,0,0,1,12.09229,12.09264v192.828A12.10641,12.10641,0,0,1,861.76287,446.99292Z" fill="#fff" transform="translate(-324.64481 -166.00708)"/>
- <path d="M861.76291,448.49285H585.95968a13.60791,13.60791,0,0,1-13.59277-13.59179V242.07244a13.608,13.608,0,0,1,13.59277-13.59228H861.76291a13.60791,13.60791,0,0,1,13.59228,13.59228V434.90106A13.6078,13.6078,0,0,1,861.76291,448.49285ZM585.95968,231.48016a10.60442,10.60442,0,0,0-10.59277,10.59228V434.90106a10.60463,10.60463,0,0,0,10.59277,10.59179H861.76291a10.60421,10.60421,0,0,0,10.59228-10.59179V242.07244a10.604,10.604,0,0,0-10.59228-10.59228Z" fill="#f2f2f2" transform="translate(-324.64481 -166.00708)"/>
- <path d="M764.63979,242.0363H683.08263a19.52487,19.52487,0,0,1-19.5028-19.5028v-.35459H784.14258v.35459A19.52486,19.52486,0,0,1,764.63979,242.0363Z" fill="#e6e6e6" transform="translate(-324.64481 -166.00708)"/>
- <path d="M764.99438,459.04925H683.43723a19.52509,19.52509,0,0,1-19.5028-19.5028v-.35459H784.49718v.35459A19.52509,19.52509,0,0,1,764.99438,459.04925Z" fill="#e6e6e6" transform="translate(-324.64481 -166.00708)"/>
- <path d="M874.31485,730.88939a1.18647,1.18647,0,0,1-1.19006,1.19h-547.29a1.19,1.19,0,0,1,0-2.38h547.29A1.18651,1.18651,0,0,1,874.31485,730.88939Z" fill="#ccc" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M411.35263,704.46626a3.61323,3.61323,0,0,1-2.61865-6.26262c.09111-.36213.15647-.62217.24758-.9843q-.0489-.11821-.09837-.23628a9.70311,9.70311,0,0,0-17.89849.06652c-2.92739,7.05051-6.65447,14.11307-7.57216,21.5678a28.7054,28.7054,0,0,0,.5039,9.87234,115.08614,115.08614,0,0,1-10.46893-47.79893,111.07991,111.07991,0,0,1,.689-12.392q.5708-5.05966,1.58377-10.0473a116.4192,116.4192,0,0,1,23.087-49.34152,30.9826,30.9826,0,0,0,12.88556-13.36893,23.6336,23.6336,0,0,0,2.14933-6.45821c-.62729.08228-1.26489.13369-1.89217.17479-.19543.01023-.40108.02055-.59651.03087l-.07369.0033a3.57989,3.57989,0,0,1-2.9401-5.83225q.40627-.5.81305-.99948c.4114-.51423.833-1.01814,1.24434-1.53228a1.7836,1.7836,0,0,0,.13369-.15432c.47313-.58619.94609-1.16206,1.41922-1.74825a10.35176,10.35176,0,0,0-3.39367-3.28044c-4.74083-2.77661-11.28133-.85358-14.70586,3.43476-3.43476,4.28826-4.0826,10.30438-2.88976,15.66218a41.48513,41.48513,0,0,0,5.73842,12.793c-.25715.32912-.52454.64792-.78161.977a117.17121,117.17121,0,0,0-12.22973,19.37481,48.70929,48.70929,0,0,0-2.908-22.62447c-2.78346-6.71479-8.00064-12.37-12.595-18.17495-5.51857-6.97261-16.83488-3.9296-17.80713,4.90927q-.01412.12837-.02757.25665,1.02363.57749,2.004,1.22586a4.9011,4.9011,0,0,1-1.976,8.91908l-.09994.01543a48.7668,48.7668,0,0,0,1.28544,7.29124A50.20988,50.20988,0,0,0,376.56347,641.273c.40108.20565.79193.41131,1.193.60673a119.598,119.598,0,0,0-6.43767,30.296,113.43525,113.43525,0,0,0,.08228,18.31542l-.03086-.216a29.97408,29.97408,0,0,0-10.23241-17.3076c-7.87438-6.46853-18.9994-8.8505-27.49446-14.04994a5.62528,5.62528,0,0,0-8.61571,5.47252q.01709.11352.03474.227a32.92633,32.92633,0,0,1,3.69184,1.779q1.02362.57761,2.004,1.22585a4.90116,4.90116,0,0,1-1.976,8.91917l-.1.01535c-.072.01031-.13369.02063-.20557.03094a48.80758,48.80758,0,0,0,8.97767,14.05786A50.25446,50.25446,0,0,0,373.9,706.63672h.01032a119.56344,119.56344,0,0,0,8.03167,23.447h28.69167c.10291-.3188.19542-.64792.288-.96672a32.59925,32.59925,0,0,1-7.93916-.473c2.12878-2.61214,4.25747-5.24483,6.38625-7.85688a1.78139,1.78139,0,0,0,.1337-.15424c1.07978-1.33685,2.16987-2.66347,3.24965-4.00032l.00058-.00165a47.75027,47.75027,0,0,0-1.39916-12.16412Z" fill="#2a2a2a" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M834.35263,704.46626a3.61323,3.61323,0,0,1-2.61865-6.26262c.09111-.36213.15647-.62217.24758-.9843q-.0489-.11821-.09837-.23628a9.70311,9.70311,0,0,0-17.89849.06652c-2.92739,7.05051-6.65447,14.11307-7.57216,21.5678a28.7054,28.7054,0,0,0,.5039,9.87234,115.08614,115.08614,0,0,1-10.46893-47.79893,111.07991,111.07991,0,0,1,.689-12.392q.5708-5.05966,1.58377-10.0473a116.4192,116.4192,0,0,1,23.087-49.34152,30.9826,30.9826,0,0,0,12.88556-13.36893,23.6336,23.6336,0,0,0,2.14933-6.45821c-.62729.08228-1.26489.13369-1.89217.17479-.19543.01023-.40108.02055-.59651.03087l-.07369.0033a3.57989,3.57989,0,0,1-2.9401-5.83225q.40627-.5.813-.99948c.4114-.51423.833-1.01814,1.24434-1.53228a1.7836,1.7836,0,0,0,.13369-.15432c.47313-.58619.94609-1.16206,1.41922-1.74825a10.35176,10.35176,0,0,0-3.39367-3.28044c-4.74083-2.77661-11.28133-.85358-14.70586,3.43476-3.43476,4.28826-4.0826,10.30438-2.88976,15.66218a41.48513,41.48513,0,0,0,5.73842,12.793c-.25715.32912-.52454.64792-.78161.977a117.17121,117.17121,0,0,0-12.22973,19.37481,48.70929,48.70929,0,0,0-2.908-22.62447c-2.78346-6.71479-8.00064-12.37-12.595-18.17495-5.51857-6.97261-16.83488-3.9296-17.80713,4.90927q-.01412.12837-.02757.25665,1.02363.57749,2.004,1.22586a4.9011,4.9011,0,0,1-1.976,8.91908l-.09994.01543a48.7668,48.7668,0,0,0,1.28544,7.29124A50.20988,50.20988,0,0,0,799.56347,641.273c.40108.20565.79193.41131,1.193.60673a119.598,119.598,0,0,0-6.43767,30.296,113.43525,113.43525,0,0,0,.08228,18.31542l-.03086-.216a29.97408,29.97408,0,0,0-10.23241-17.3076c-7.87438-6.46853-18.9994-8.8505-27.49446-14.04994a5.62528,5.62528,0,0,0-8.61571,5.47252q.01708.11352.03474.227a32.92633,32.92633,0,0,1,3.69184,1.779q1.02362.57761,2.004,1.22585a4.90116,4.90116,0,0,1-1.976,8.91917l-.1.01535c-.072.01031-.13369.02063-.20557.03094a48.80758,48.80758,0,0,0,8.97767,14.05786A50.25446,50.25446,0,0,0,796.9,706.63672h.01032a119.56344,119.56344,0,0,0,8.03167,23.447h28.69167c.10291-.3188.19542-.64792.288-.96672a32.59925,32.59925,0,0,1-7.93916-.473c2.12878-2.61214,4.25747-5.24483,6.38625-7.85688a1.78139,1.78139,0,0,0,.1337-.15424c1.07978-1.33685,2.16987-2.66347,3.24965-4.00032l.00058-.00165a47.75027,47.75027,0,0,0-1.39916-12.16412Z" fill="#2a2a2a" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M723.86447,729.89617c-.08252,0-.165-.00195-.24756-.0039a8.169,8.169,0,0,1-7.70215-8.25488c0-12.79493-9.13965-20.25879-18.19726-21.9795-9.05762-1.71972-20.29785,1.8711-24.98926,13.77637l-4.26514,10.707a19.67152,19.67152,0,0,1-27.78662,0l-.25244-.252.15674-.32129,75.334-154.13379v-3.77734a19.488,19.488,0,0,1,.002-3.5l-.002-388.20313a7.94627,7.94627,0,0,1,8.19043-7.94287,8.16941,8.16941,0,0,1,7.70264,8.25488v387.936a19.489,19.489,0,0,1-.00195,3.5l.00195,3.73144,75.49072,154.45606-.25244.252a19.67152,19.67152,0,0,1-27.78662,0l-.11182-.16992-4.15332-10.53711c-4.6914-11.9043-15.93017-15.49316-24.98926-13.77637-9.05761,1.72071-18.19726,9.18457-18.19726,21.9795v.3125a7.94652,7.94652,0,0,1-7.94336,7.94628Z" fill="#404040" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M861.76287,446.99292H585.95965A12.10626,12.10626,0,0,1,573.867,434.90063v-192.828A12.10611,12.10611,0,0,1,585.95965,229.98H861.76287a12.10626,12.10626,0,0,1,12.09229,12.09264v192.828A12.10641,12.10641,0,0,1,861.76287,446.99292Z" fill="#262626" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M861.76291,448.49285H585.95968a13.60791,13.60791,0,0,1-13.59277-13.59179V242.07244a13.608,13.608,0,0,1,13.59277-13.59228H861.76291a13.60791,13.60791,0,0,1,13.59228,13.59228V434.90106A13.6078,13.6078,0,0,1,861.76291,448.49285ZM585.95968,231.48016a10.60442,10.60442,0,0,0-10.59277,10.59228V434.90106a10.60463,10.60463,0,0,0,10.59277,10.59179H861.76291a10.60421,10.60421,0,0,0,10.59228-10.59179V242.07244a10.604,10.604,0,0,0-10.59228-10.59228Z" fill="#2a2a2a" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M764.63979,242.0363H683.08263a19.52487,19.52487,0,0,1-19.5028-19.5028v-.35459H784.14258v.35459A19.52486,19.52486,0,0,1,764.63979,242.0363Z" fill="#404040" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M764.99438,459.04925H683.43723a19.52509,19.52509,0,0,1-19.5028-19.5028v-.35459H784.49718v.35459A19.52509,19.52509,0,0,1,764.99438,459.04925Z" fill="#404040" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M874.31485,730.88939a1.18647,1.18647,0,0,1-1.19006,1.19h-547.29a1.19,1.19,0,0,1,0-2.38h547.29A1.18651,1.18651,0,0,1,874.31485,730.88939Z" fill="#525252" transform="translate(-324.64481 -166.00708)"/>
  <polygon fill="#9e616a" points="184.306 537.181 198.722 537.181 205.58 481.575 184.303 481.576 184.306 537.181"/>
- <path d="M504.06863,696.07669l22.78907-1.3602v9.76383l21.6662,14.96345a6.09886,6.09886,0,0,1-3.46558,11.11765H517.92709l-4.67648-9.65792-1.82593,9.65792H501.19512Z" fill="#2f2e41" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M504.06863,696.07669l22.78907-1.3602v9.76383l21.6662,14.96345a6.09886,6.09886,0,0,1-3.46558,11.11765H517.92709l-4.67648-9.65792-1.82593,9.65792H501.19512Z" fill="#a3a3a3" transform="translate(-324.64481 -166.00708)"/>
  <polygon fill="#9e616a" points="135.277 227.892 133.865 234.622 132.664 259.447 180.908 252.915 184.613 224.169 179.492 215.755 135.277 227.892"/>
  <polygon fill="#9e616a" points="111.347 537.181 125.763 537.181 132.621 481.575 111.344 481.576 111.347 537.181"/>
- <path d="M428.1707,604.94848l-.00054-.14891,5.39635-25.192,3.32751-12.54128-9.24939-73.42936c-2.17782-53.34848,28.7723-78.9931,29.01588-79.24519l.67116-.69775,49.63579-1.2147c26.70628,16.00123,23.683,103.51941,28.57341,163.039.34872,4.24414,4.73124,10.50859,3.654,14.54583-8.54582,32.02677-6.04255,66.6612-12.553,67.685l-19.96125-.27744-10.30939-46.78874,9.51636-35.68634c-4.22057-.77752-7.13727-21.41179-7.13727-21.41179-1.83905-2.18368-8.1881-20.75593-8.1881-20.75593l-8.46552-51.40977-13.601,88.42417,3.27551,20.74438-2.71071,7.13285-11.60823,58.88563-.12339.94878L435.44348,655.37Z" fill="#2f2e41" transform="translate(-324.64481 -166.00708)"/>
- <path d="M431.10991,696.07669l22.78906-1.3602v9.76383l21.6662,14.96345a6.09886,6.09886,0,0,1-3.46557,11.11765H444.96836l-4.67648-9.65792-1.82593,9.65792H428.23639Z" fill="#2f2e41" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M428.1707,604.94848l-.00054-.14891,5.39635-25.192,3.32751-12.54128-9.24939-73.42936c-2.17782-53.34848,28.7723-78.9931,29.01588-79.24519l.67116-.69775,49.63579-1.2147c26.70628,16.00123,23.683,103.51941,28.57341,163.039.34872,4.24414,4.73124,10.50859,3.654,14.54583-8.54582,32.02677-6.04255,66.6612-12.553,67.685l-19.96125-.27744-10.30939-46.78874,9.51636-35.68634c-4.22057-.77752-7.13727-21.41179-7.13727-21.41179-1.83905-2.18368-8.1881-20.75593-8.1881-20.75593l-8.46552-51.40977-13.601,88.42417,3.27551,20.74438-2.71071,7.13285-11.60823,58.88563-.12339.94878L435.44348,655.37Z" fill="#a3a3a3" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M431.10991,696.07669l22.78906-1.3602v9.76383l21.6662,14.96345a6.09886,6.09886,0,0,1-3.46557,11.11765H444.96836l-4.67648-9.65792-1.82593,9.65792H428.23639Z" fill="#a3a3a3" transform="translate(-324.64481 -166.00708)"/>
  <path d="M499.72323,296.81336l12.16793,13.51992,14.61521,27.54745-7.17925,33.96819,3.13895,15.93971,4.635,17.52209c-17.8595,9.87926-39.074-3.76443-58.5635-9.82419l-19.176,8.4722,1.014-23.32186.52-58.76042a16.46939,16.46939,0,0,1,17.73187-16.27514h0l12.84392-9.464Z" fill="#FD5E0F" transform="translate(-324.64481 -166.00708)"/>
  <circle cx="171.67023" cy="98.07194" fill="#9e616a" r="25.65727"/>
- <path d="M526.50637,254.81959c-.452,2.51394-11.2531,3.72725-10.928-.74545-2.10149,4.211-5.24175,10.322-1.24175,17.322a10.98281,10.98281,0,0,0-1.48157,12.81309,33.15262,33.15262,0,0,1,2.847,5.84463,8.87535,8.87535,0,0,1,.32512,1.51466,2.89763,2.89763,0,0,1-4.12372,2.97386c-10.88039-5.32913-29.85434-4.42589-41.75772-1.17444q.119-3.47344-.09516-6.93107a17.13363,17.13363,0,0,1-3.37832,7.91442c-2.03809.60271-4.03649,1.22919-5.97148,1.84777a1.71539,1.71539,0,0,1-2.18084-2.09361,9.64658,9.64658,0,0,0,.2062-4.203c-.49172-2.90252-1.95087-5.52745-2.9818-8.27924s-1.61781-5.916-.35687-8.57264c1.95876-4.12377,7.47826-5.38471,9.91287-9.24676,2.736-4.33784.61065-9.99215,1.03886-15.1072.60271-7.23243,6.52662-13.10875,13.204-15.94781,11.56233-4.9168,26.02719-.935,34.695,8.15314a7.93768,7.93768,0,0,1,8.303-.35687c2.56152,1.37192,4.4013,2.08567,5.5512,4.75817C529.09959,247.65062,526.96634,252.29776,526.50637,254.81959Z" fill="#2f2e41" transform="translate(-324.64481 -166.00708)"/>
- <path d="M515.48591,556.53986l-60.36453-60.36452a3.7472,3.7472,0,0,1-.00008-5.29331l42.20391-42.20391a3.74715,3.74715,0,0,1,5.29338,0l60.36453,60.36453a3.7472,3.7472,0,0,1-.00008,5.29331l-42.2039,42.2039A3.74724,3.74724,0,0,1,515.48591,556.53986Z" fill="#fff" transform="translate(-324.64481 -166.00708)"/>
- <path d="M518.13254,558.63348a4.71009,4.71009,0,0,1-3.35352-1.38672L454.41427,496.8825a4.74593,4.74593,0,0,1,0-6.707l42.20411-42.2041a4.74649,4.74649,0,0,1,6.70752,0l60.36425,60.36426a4.7459,4.7459,0,0,1,0,6.707l-42.2041,42.2041A4.71009,4.71009,0,0,1,518.13254,558.63348ZM499.97189,448.58367a2.71951,2.71951,0,0,0-1.939.80176l-42.20459,42.2041a2.74665,2.74665,0,0,0,0,3.87891l60.36474,60.36426a2.81453,2.81453,0,0,0,3.87891,0l42.2041-42.2041a2.74665,2.74665,0,0,0,0-3.87891l-60.36475-60.36426A2.72144,2.72144,0,0,0,499.97189,448.58367Z" fill="#e6e6e6" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M526.50637,254.81959c-.452,2.51394-11.2531,3.72725-10.928-.74545-2.10149,4.211-5.24175,10.322-1.24175,17.322a10.98281,10.98281,0,0,0-1.48157,12.81309,33.15262,33.15262,0,0,1,2.847,5.84463,8.87535,8.87535,0,0,1,.32512,1.51466,2.89763,2.89763,0,0,1-4.12372,2.97386c-10.88039-5.32913-29.85434-4.42589-41.75772-1.17444q.119-3.47344-.09516-6.93107a17.13363,17.13363,0,0,1-3.37832,7.91442c-2.03809.60271-4.03649,1.22919-5.97148,1.84777a1.71539,1.71539,0,0,1-2.18084-2.09361,9.64658,9.64658,0,0,0,.2062-4.203c-.49172-2.90252-1.95087-5.52745-2.9818-8.27924s-1.61781-5.916-.35687-8.57264c1.95876-4.12377,7.47826-5.38471,9.91287-9.24676,2.736-4.33784.61065-9.99215,1.03886-15.1072.60271-7.23243,6.52662-13.10875,13.204-15.94781,11.56233-4.9168,26.02719-.935,34.695,8.15314a7.93768,7.93768,0,0,1,8.303-.35687c2.56152,1.37192,4.4013,2.08567,5.5512,4.75817C529.09959,247.65062,526.96634,252.29776,526.50637,254.81959Z" fill="#a3a3a3" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M515.48591,556.53986l-60.36453-60.36452a3.7472,3.7472,0,0,1-.00008-5.29331l42.20391-42.20391a3.74715,3.74715,0,0,1,5.29338,0l60.36453,60.36453a3.7472,3.7472,0,0,1-.00008,5.29331l-42.2039,42.2039A3.74724,3.74724,0,0,1,515.48591,556.53986Z" fill="#262626" transform="translate(-324.64481 -166.00708)"/>
+ <path d="M518.13254,558.63348a4.71009,4.71009,0,0,1-3.35352-1.38672L454.41427,496.8825a4.74593,4.74593,0,0,1,0-6.707l42.20411-42.2041a4.74649,4.74649,0,0,1,6.70752,0l60.36425,60.36426a4.7459,4.7459,0,0,1,0,6.707l-42.2041,42.2041A4.71009,4.71009,0,0,1,518.13254,558.63348ZM499.97189,448.58367a2.71951,2.71951,0,0,0-1.939.80176l-42.20459,42.2041a2.74665,2.74665,0,0,0,0,3.87891l60.36474,60.36426a2.81453,2.81453,0,0,0,3.87891,0l42.2041-42.2041a2.74665,2.74665,0,0,0,0-3.87891l-60.36475-60.36426A2.72144,2.72144,0,0,0,499.97189,448.58367Z" fill="#404040" transform="translate(-324.64481 -166.00708)"/>
  <path d="M492.74166,454.293a11.22642,11.22642,0,0,1,3.595-16.83486l.94985-100.813,18.84219,8.64691-4.1444,97.50067A11.2873,11.2873,0,0,1,492.74166,454.293Z" fill="#9e616a" transform="translate(-324.64481 -166.00708)"/>
  <path d="M493.24918,311.12137s18.3293-8.89112,20.86419,7.88369,12.96145,60.43336,12.96145,60.43336l-31.63926-2.23768Z" fill="#9e616a" transform="translate(-324.64481 -166.00708)"/>
  <path d="M492.74166,454.293a11.22642,11.22642,0,0,1,3.595-16.83486l.94985-100.813,18.84219,8.64691-4.1444,97.50067A11.2873,11.2873,0,0,1,492.74166,454.293Z" fill="#9e616a" transform="translate(-324.64481 -166.00708)"/>
diff --git a/public/illustrations/data-trends.svg b/public/illustrations/data-trends.svg
index 927edfe..8d57683 100644
--- a/public/illustrations/data-trends.svg
+++ b/public/illustrations/data-trends.svg
@@ -1,56 +1,56 @@
 <svg data-name="Layer 1" viewBox="0 0 942.54724 631.43903" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <path d="M879.59026,413.72015l2.79791-22.42655a30.28454,30.28454,0,0,1,60.10315,7.4984l-2.79791,22.42654a4.07267,4.07267,0,0,1-4.5404,3.53316l-52.02959-6.49115A4.07266,4.07266,0,0,1,879.59026,413.72015Z" fill="#2f2e41" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M879.59026,413.72015l2.79791-22.42655a30.28454,30.28454,0,0,1,60.10315,7.4984l-2.79791,22.42654a4.07267,4.07267,0,0,1-4.5404,3.53316l-52.02959-6.49115A4.07266,4.07266,0,0,1,879.59026,413.72015Z" fill="#a3a3a3" transform="translate(-128.72638 -134.28048)"/>
  <circle cx="775.78648" cy="263.92678" fill="#ffb8b8" r="22.20356"/>
- <path d="M875.05486,392.20076a23.98352,23.98352,0,0,1,26.73792-20.80636l4.48553.55961a23.98334,23.98334,0,0,1,20.80614,26.73789l-.056.44853-9.47894-1.18258-2.10358-9.45631L913.67,397.47385l-4.8988-.61117-1.06132-4.77116-.89618,4.52695-31.81482-3.96918Z" fill="#2f2e41" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M875.05486,392.20076a23.98352,23.98352,0,0,1,26.73792-20.80636l4.48553.55961a23.98334,23.98334,0,0,1,20.80614,26.73789l-.056.44853-9.47894-1.18258-2.10358-9.45631L913.67,397.47385l-4.8988-.61117-1.06132-4.77116-.89618,4.52695-31.81482-3.96918Z" fill="#a3a3a3" transform="translate(-128.72638 -134.28048)"/>
  <path d="M795.91611,477.41149a10.22784,10.22784,0,0,0,15.28426,3.51477L831.3673,492.74l10.16823-10.50441-28.71392-16.28326a10.28328,10.28328,0,0,0-16.9055,11.45917Z" fill="#ffb8b8" transform="translate(-128.72638 -134.28048)"/>
- <path d="M862.01251,498.63944c-14.87549,0-41.052-6.65918-42.50146-7.03125l-.45777-.11719,4.11988-20.85889,39.98193,7.897,21.7207-30.58692,24.93726-2.53515-.69605.916c-.32422.42676-32.46972,42.74317-37.47241,49.8418C870.38214,497.95585,866.77618,498.63944,862.01251,498.63944Z" fill="#3f3d56" transform="translate(-128.72638 -134.28048)"/>
- <path d="M866.00055,576.92752l-.59522-.28417c-.12671-.06055-12.76513-6.208-19.31128-18.209-6.51489-11.94434,23.98316-62.6123,26.1167-66.12793l.031-16.09082L883.213,446.59452l13.9917-7.90821L885.19171,466.7161Z" fill="#3f3d56" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M862.01251,498.63944c-14.87549,0-41.052-6.65918-42.50146-7.03125l-.45777-.11719,4.11988-20.85889,39.98193,7.897,21.7207-30.58692,24.93726-2.53515-.69605.916c-.32422.42676-32.46972,42.74317-37.47241,49.8418C870.38214,497.95585,866.77618,498.63944,862.01251,498.63944Z" fill="#d4d4d4" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M866.00055,576.92752l-.59522-.28417c-.12671-.06055-12.76513-6.208-19.31128-18.209-6.51489-11.94434,23.98316-62.6123,26.1167-66.12793l.031-16.09082L883.213,446.59452l13.9917-7.90821L885.19171,466.7161Z" fill="#d4d4d4" transform="translate(-128.72638 -134.28048)"/>
  <polygon fill="#ffb8b8" points="723.257 615.591 709.885 615.59 703.523 564.011 723.259 564.012 723.257 615.591"/>
- <path d="M855.39347,762.83333l-43.11785-.00159v-.54537A16.78359,16.78359,0,0,1,829.05829,745.504h.00107l26.33491.00107Z" fill="#2f2e41" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M855.39347,762.83333l-43.11785-.00159v-.54537A16.78359,16.78359,0,0,1,829.05829,745.504h.00107l26.33491.00107Z" fill="#a3a3a3" transform="translate(-128.72638 -134.28048)"/>
  <polygon fill="#ffb8b8" points="866.891 603.872 854.184 608.035 832.077 561.002 850.832 554.857 866.891 603.872"/>
- <path d="M1002.89464,749.40842,961.92,762.83333l-.16982-.51825a16.78358,16.78358,0,0,1,10.72241-21.174l.001-.00033,25.02593-8.1994Z" fill="#2f2e41" transform="translate(-128.72638 -134.28048)"/>
- <path d="M969.72638,729.71952l-38.1205-63.64087L899.4256,598.08573l-28.95826,60.06054-11.50366,77.78809-40.343.56055.15893-.63086L880.51715,490.5535l48.352,7.22363-2.20093,31.916,1.31079,1.86426c10.92261,15.5166,22.21607,31.55957,15.73877,48.85351l18.36231,54.52246,40.64624,90.78614Z" fill="#2f2e41" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M1002.89464,749.40842,961.92,762.83333l-.16982-.51825a16.78358,16.78358,0,0,1,10.72241-21.174l.001-.00033,25.02593-8.1994Z" fill="#a3a3a3" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M969.72638,729.71952l-38.1205-63.64087L899.4256,598.08573l-28.95826,60.06054-11.50366,77.78809-40.343.56055.15893-.63086L880.51715,490.5535l48.352,7.22363-2.20093,31.916,1.31079,1.86426c10.92261,15.5166,22.21607,31.55957,15.73877,48.85351l18.36231,54.52246,40.64624,90.78614Z" fill="#a3a3a3" transform="translate(-128.72638 -134.28048)"/>
  <path d="M882.72638,543.71952c-7.00635,0-15-8-10.853-21.65821l-.26855-.19433,9.96069-44.00781c-8.69263-12.43165,2.76807-22.69141,3.842-23.60791l5.4707-9.84717,24.1377-15.30811L927.22882,530.5701l-.18066.17285C918.2276,539.18241,888.60358,543.71952,882.72638,543.71952Z" fill="#FD5E0F" transform="translate(-128.72638 -134.28048)"/>
- <path d="M932.15948,566.617a11.88134,11.88134,0,0,1-2.85131-.30176c-.93873-.23535-2.4585-1.43066-4.80689-9.07715-9.33618-30.39746-20.35913-121.86035-12.35083-130.81055l.18335-.20507,13.14893,2.1914c1.093-.80664,6.82861-4.81054,12.12133-4.11425a8.033,8.033,0,0,1,5.49659,3.249l.09057.11865,4.189,59.59424,15.34619,70.13086-.36792.167C961.46564,557.96561,942.303,566.617,932.15948,566.617Z" fill="#3f3d56" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M932.15948,566.617a11.88134,11.88134,0,0,1-2.85131-.30176c-.93873-.23535-2.4585-1.43066-4.80689-9.07715-9.33618-30.39746-20.35913-121.86035-12.35083-130.81055l.18335-.20507,13.14893,2.1914c1.093-.80664,6.82861-4.81054,12.12133-4.11425a8.033,8.033,0,0,1,5.49659,3.249l.09057.11865,4.189,59.59424,15.34619,70.13086-.36792.167C961.46564,557.96561,942.303,566.617,932.15948,566.617Z" fill="#d4d4d4" transform="translate(-128.72638 -134.28048)"/>
  <path d="M923.31655,543.32446a10.22788,10.22788,0,0,0,9.66238-12.35317l19.24856-13.25752-5.20361-13.66228-26.91975,19.104a10.28328,10.28328,0,0,0,3.21242,20.169Z" fill="#ffb8b8" transform="translate(-128.72638 -134.28048)"/>
- <path d="M945.876,528.3367l-17.14551-12.57324,24.10083-32.86426L934.33624,450.261l8.27466-23.66113.53467,1.019c.249.47461,24.94824,47.52686,29.25683,55.06738,4.48267,7.84375-24.97,43.76075-26.22583,45.28516Z" fill="#3f3d56" transform="translate(-128.72638 -134.28048)"/>
- <path d="M560.20614,676.255l-14.5923-6.1443-10.01026-73.15138H402.299L391.4486,669.81186l-13.05511,6.52746a3.10016,3.10016,0,0,0,1.38657,5.873H559.00349A3.1,3.1,0,0,0,560.20614,676.255Z" fill="#e6e6e6" transform="translate(-128.72638 -134.28048)"/>
- <path d="M797.09757,606.69181H142.26837a12.97344,12.97344,0,0,1-12.9443-12.97332V501.379h680.7178v92.33952A12.97357,12.97357,0,0,1,797.09757,606.69181Z" fill="#ccc" transform="translate(-128.72638 -134.28048)"/>
- <path d="M810.72638,545.02084h-682V149.91957A15.65719,15.65719,0,0,1,144.366,134.28048H795.08655a15.65736,15.65736,0,0,1,15.63983,15.63909Z" fill="#3f3d56" transform="translate(-128.72638 -134.28048)"/>
- <path d="M769.99322,516.34435H169.45954a12.07024,12.07024,0,0,1-12.057-12.05667v-329.274a12.07088,12.07088,0,0,1,12.057-12.05741H769.99322a12.07088,12.07088,0,0,1,12.057,12.05741v329.274A12.07024,12.07024,0,0,1,769.99322,516.34435Z" fill="#fff" transform="translate(-128.72638 -134.28048)"/>
- <path d="M638.14638,682.97542l-337.44822,0a1.56681,1.56681,0,0,1-1.53908-1.13363,1.52911,1.52911,0,0,1,1.47725-1.91893l337.385,0a1.61535,1.61535,0,0,1,1.61617,1.19368A1.52819,1.52819,0,0,1,638.14638,682.97542Z" fill="#ccc" transform="translate(-128.72638 -134.28048)"/>
- <rect fill="#f2f2f2" height="110.7733" width="144.99594" x="489.85973" y="81.90943"/>
- <rect fill="#fff" height="99.76477" width="130.58641" x="497.0645" y="87.41369"/>
- <path d="M693.37738,295.69477q.02592.00028.05185-.00109a34.81675,34.81675,0,0,0,.779-69.48892.79424.79424,0,0,0-.60112.20836.78592.78592,0,0,0-.25678.57553l-.7612,67.902a.79707.79707,0,0,0,.78826.80412Z" fill="#3f3d56" transform="translate(-128.72638 -134.28048)"/>
- <path d="M666.072,237.43291a1.02524,1.02524,0,0,1,.71962.30735l23.37584,23.90588a1.01418,1.01418,0,0,1,.29094.72511l-.36424,32.49143a1.01059,1.01059,0,0,1-.33018.73985,1.026,1.026,0,0,1-.77126.26782,35.04446,35.04446,0,0,1-23.69951-58.09062,1.02636,1.02636,0,0,1,.74091-.34658Q666.05306,237.4327,666.072,237.43291Z" fill="#e6e6e6" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M945.876,528.3367l-17.14551-12.57324,24.10083-32.86426L934.33624,450.261l8.27466-23.66113.53467,1.019c.249.47461,24.94824,47.52686,29.25683,55.06738,4.48267,7.84375-24.97,43.76075-26.22583,45.28516Z" fill="#d4d4d4" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M560.20614,676.255l-14.5923-6.1443-10.01026-73.15138H402.299L391.4486,669.81186l-13.05511,6.52746a3.10016,3.10016,0,0,0,1.38657,5.873H559.00349A3.1,3.1,0,0,0,560.20614,676.255Z" fill="#404040" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M797.09757,606.69181H142.26837a12.97344,12.97344,0,0,1-12.9443-12.97332V501.379h680.7178v92.33952A12.97357,12.97357,0,0,1,797.09757,606.69181Z" fill="#525252" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M810.72638,545.02084h-682V149.91957A15.65719,15.65719,0,0,1,144.366,134.28048H795.08655a15.65736,15.65736,0,0,1,15.63983,15.63909Z" fill="#d4d4d4" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M769.99322,516.34435H169.45954a12.07024,12.07024,0,0,1-12.057-12.05667v-329.274a12.07088,12.07088,0,0,1,12.057-12.05741H769.99322a12.07088,12.07088,0,0,1,12.057,12.05741v329.274A12.07024,12.07024,0,0,1,769.99322,516.34435Z" fill="#262626" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M638.14638,682.97542l-337.44822,0a1.56681,1.56681,0,0,1-1.53908-1.13363,1.52911,1.52911,0,0,1,1.47725-1.91893l337.385,0a1.61535,1.61535,0,0,1,1.61617,1.19368A1.52819,1.52819,0,0,1,638.14638,682.97542Z" fill="#525252" transform="translate(-128.72638 -134.28048)"/>
+ <rect fill="#2a2a2a" height="110.7733" width="144.99594" x="489.85973" y="81.90943"/>
+ <rect fill="#262626" height="99.76477" width="130.58641" x="497.0645" y="87.41369"/>
+ <path d="M693.37738,295.69477q.02592.00028.05185-.00109a34.81675,34.81675,0,0,0,.779-69.48892.79424.79424,0,0,0-.60112.20836.78592.78592,0,0,0-.25678.57553l-.7612,67.902a.79707.79707,0,0,0,.78826.80412Z" fill="#d4d4d4" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M666.072,237.43291a1.02524,1.02524,0,0,1,.71962.30735l23.37584,23.90588a1.01418,1.01418,0,0,1,.29094.72511l-.36424,32.49143a1.01059,1.01059,0,0,1-.33018.73985,1.026,1.026,0,0,1-.77126.26782,35.04446,35.04446,0,0,1-23.69951-58.09062,1.02636,1.02636,0,0,1,.74091-.34658Q666.05306,237.4327,666.072,237.43291Z" fill="#404040" transform="translate(-128.72638 -134.28048)"/>
  <path d="M689.84193,225.9272a1.02931,1.02931,0,0,1,.69948.28585,1.01135,1.01135,0,0,1,.31394.74786l-.32864,29.31578a1.02077,1.02077,0,0,1-1.75041.70223L668.378,236.11808a1.02291,1.02291,0,0,1,.05493-1.48163,35.11806,35.11806,0,0,1,21.34564-8.708C689.79961,225.92739,689.82088,225.927,689.84193,225.9272Z" fill="#FD5E0F" transform="translate(-128.72638 -134.28048)"/>
  <path d="M679.33353,309.77539a6.25343,6.25343,0,1,1-6.18294-6.32313A6.26054,6.26054,0,0,1,679.33353,309.77539Z" fill="#FD5E0F" transform="translate(-128.72638 -134.28048)"/>
- <path d="M697.19935,309.97567a6.25343,6.25343,0,1,1-6.18294-6.32313A6.26056,6.26056,0,0,1,697.19935,309.97567Z" fill="#3f3d56" transform="translate(-128.72638 -134.28048)"/>
- <path d="M715.06516,310.176a6.25343,6.25343,0,1,1-6.18294-6.32314A6.26054,6.26054,0,0,1,715.06516,310.176Z" fill="#e6e6e6" transform="translate(-128.72638 -134.28048)"/>
- <rect fill="#f2f2f2" height="110.7733" width="144.99594" x="488.33346" y="210.11637"/>
- <rect fill="#fff" height="99.76477" width="130.58641" x="495.53823" y="215.62063"/>
- <circle cx="517.69473" cy="242.98812" fill="#3f3d56" r="5.42203"/>
- <path d="M733.53881,373.0493a3.67713,3.67713,0,1,1,0,7.35425H676.51323a3.67712,3.67712,0,1,1,0-7.35425h57.02558m0-.9006H676.51323a4.57773,4.57773,0,1,0,0,9.15545h57.02558a4.57773,4.57773,0,1,0,0-9.15545Z" fill="#3f3d56" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M697.19935,309.97567a6.25343,6.25343,0,1,1-6.18294-6.32313A6.26056,6.26056,0,0,1,697.19935,309.97567Z" fill="#d4d4d4" transform="translate(-128.72638 -134.28048)"/>
+ <path d="M715.06516,310.176a6.25343,6.25343,0,1,1-6.18294-6.32314A6.26054,6.26054,0,0,1,715.06516,310.176Z" fill="#404040" transform="translate(-128.72638 -134.28048)"/>
+ <rect fill="#2a2a2a" height="110.7733" width="144.99594" x="488.33346" y="210.11637"/>
+ <rect fill="#262626" height="99.76477" width="130.58641" x="495.53823" y="215.62063"/>
+ <circle cx="517.69473" cy="242.98812" fill="#d4d4d4" r="5.42203"/>
+ <path d="M733.53881,373.0493a3.67713,3.67713,0,1,1,0,7.35425H676.51323a3.67712,3.67712,0,1,1,0-7.35425h57.02558m0-.9006H676.51323a4.57773,4.57773,0,1,0,0,9.15545h57.02558a4.57773,4.57773,0,1,0,0-9.15545Z" fill="#d4d4d4" transform="translate(-128.72638 -134.28048)"/>
  <path d="M711.03754,381.30414h-42.9283a4.57772,4.57772,0,1,1,0-9.15544h42.9283a4.57772,4.57772,0,0,1,0,9.15544Z" fill="#FD5E0F" transform="translate(-128.72638 -134.28048)"/>
- <circle cx="517.69473" cy="265.50302" fill="#3f3d56" r="5.42203"/>
- <path d="M733.53881,395.5642a3.67713,3.67713,0,1,1,0,7.35425H676.51323a3.67712,3.67712,0,1,1,0-7.35425h57.02558m0-.9006H676.51323a4.57772,4.57772,0,1,0,0,9.15545h57.02558a4.57772,4.57772,0,1,0,0-9.15545Z" fill="#3f3d56" transform="translate(-128.72638 -134.28048)"/>
+ <circle cx="517.69473" cy="265.50302" fill="#d4d4d4" r="5.42203"/>
+ <path d="M733.53881,395.5642a3.67713,3.67713,0,1,1,0,7.35425H676.51323a3.67712,3.67712,0,1,1,0-7.35425h57.02558m0-.9006H676.51323a4.57772,4.57772,0,1,0,0,9.15545h57.02558a4.57772,4.57772,0,1,0,0-9.15545Z" fill="#d4d4d4" transform="translate(-128.72638 -134.28048)"/>
  <path d="M727.24826,403.819h-59.139a4.57772,4.57772,0,1,1,0-9.15544h59.139a4.57772,4.57772,0,0,1,0,9.15544Z" fill="#FD5E0F" transform="translate(-128.72638 -134.28048)"/>
- <circle cx="517.69473" cy="288.01792" fill="#3f3d56" r="5.42203"/>
- <path d="M733.53881,418.0791a3.67713,3.67713,0,1,1,0,7.35425H676.51323a3.67712,3.67712,0,1,1,0-7.35425h57.02558m0-.9006H676.51323a4.57772,4.57772,0,1,0,0,9.15545h57.02558a4.57772,4.57772,0,1,0,0-9.15545Z" fill="#3f3d56" transform="translate(-128.72638 -134.28048)"/>
+ <circle cx="517.69473" cy="288.01792" fill="#d4d4d4" r="5.42203"/>
+ <path d="M733.53881,418.0791a3.67713,3.67713,0,1,1,0,7.35425H676.51323a3.67712,3.67712,0,1,1,0-7.35425h57.02558m0-.9006H676.51323a4.57772,4.57772,0,1,0,0,9.15545h57.02558a4.57772,4.57772,0,1,0,0-9.15545Z" fill="#d4d4d4" transform="translate(-128.72638 -134.28048)"/>
  <path d="M692.125,426.33393H668.10924a4.57772,4.57772,0,1,1,0-9.15543H692.125a4.57772,4.57772,0,0,1,0,9.15543Z" fill="#FD5E0F" transform="translate(-128.72638 -134.28048)"/>
- <rect fill="#f2f2f2" height="207.61032" width="405.09331" x="51.18842" y="101.50782"/>
- <rect fill="#fff" height="186.97824" width="378.08709" x="64.69153" y="111.82386"/>
- <path d="M524.61425,404.55724H248.996a.8626.8626,0,0,1-.86256-.86256V271.59086a.86256.86256,0,1,1,1.72512,0V402.83212H524.61425a.86256.86256,0,0,1,0,1.72512Z" fill="#3f3d56" transform="translate(-128.72638 -134.28048)"/>
+ <rect fill="#2a2a2a" height="207.61032" width="405.09331" x="51.18842" y="101.50782"/>
+ <rect fill="#262626" height="186.97824" width="378.08709" x="64.69153" y="111.82386"/>
+ <path d="M524.61425,404.55724H248.996a.8626.8626,0,0,1-.86256-.86256V271.59086a.86256.86256,0,1,1,1.72512,0V402.83212H524.61425a.86256.86256,0,0,1,0,1.72512Z" fill="#d4d4d4" transform="translate(-128.72638 -134.28048)"/>
  <path d="M307.88363,395.06909H282.81508a2.56336,2.56336,0,0,1-2.56051-2.5603V357.95166a2.56337,2.56337,0,0,1,2.56051-2.5603h25.06855a2.56337,2.56337,0,0,1,2.56051,2.5603v34.55713A2.56336,2.56336,0,0,1,307.88363,395.06909Z" fill="#FD5E0F" transform="translate(-128.72638 -134.28048)"/>
  <path d="M353.59927,395.06909H328.53072a2.56336,2.56336,0,0,1-2.56051-2.5603V325.17441a2.56336,2.56336,0,0,1,2.56051-2.5603h25.06855a2.56336,2.56336,0,0,1,2.56051,2.5603v67.33438A2.56336,2.56336,0,0,1,353.59927,395.06909Z" fill="#FD5E0F" transform="translate(-128.72638 -134.28048)"/>
  <path d="M399.31491,395.06909H374.24636a2.56337,2.56337,0,0,1-2.56051-2.5603V357.95166a2.56337,2.56337,0,0,1,2.56051-2.5603h25.06855a2.56337,2.56337,0,0,1,2.56052,2.5603v34.55713A2.56337,2.56337,0,0,1,399.31491,395.06909Z" fill="#FD5E0F" transform="translate(-128.72638 -134.28048)"/>
  <path d="M445.03056,395.06909H419.962a2.50734,2.50734,0,0,1-2.56052-2.44431V312.12a2.50734,2.50734,0,0,1,2.56052-2.44431h25.06855a2.50734,2.50734,0,0,1,2.56051,2.44431v80.50475A2.50734,2.50734,0,0,1,445.03056,395.06909Z" fill="#FD5E0F" transform="translate(-128.72638 -134.28048)"/>
  <path d="M490.7462,395.06909H465.67765a2.56336,2.56336,0,0,1-2.56051-2.5603V288.94692a2.56336,2.56336,0,0,1,2.56051-2.5603H490.7462a2.56336,2.56336,0,0,1,2.56051,2.5603V392.50879A2.56336,2.56336,0,0,1,490.7462,395.06909Z" fill="#FD5E0F" transform="translate(-128.72638 -134.28048)"/>
- <circle cx="166.62298" cy="205.58481" fill="#3f3d56" r="5.17536"/>
- <circle cx="212.33862" cy="171.945" fill="#3f3d56" r="5.17536"/>
- <circle cx="258.05426" cy="205.58481" fill="#3f3d56" r="5.17536"/>
- <circle cx="303.7699" cy="155.55637" fill="#3f3d56" r="5.17536"/>
- <circle cx="349.48555" cy="136.58007" fill="#3f3d56" r="5.17536"/>
- <polygon fill="#3f3d56" points="258.163 206.744 212.339 172.421 167.14 206.275 166.106 204.895 212.339 170.265 257.945 204.425 303.266 154.83 303.447 154.756 349.163 136.337 349.808 137.937 304.274 156.283 258.163 206.744"/>
- <path d="M1070.27362,765.71952h-381a1,1,0,0,1,0-2h381a1,1,0,0,1,0,2Z" fill="#ccc" transform="translate(-128.72638 -134.28048)"/>
+ <circle cx="166.62298" cy="205.58481" fill="#d4d4d4" r="5.17536"/>
+ <circle cx="212.33862" cy="171.945" fill="#d4d4d4" r="5.17536"/>
+ <circle cx="258.05426" cy="205.58481" fill="#d4d4d4" r="5.17536"/>
+ <circle cx="303.7699" cy="155.55637" fill="#d4d4d4" r="5.17536"/>
+ <circle cx="349.48555" cy="136.58007" fill="#d4d4d4" r="5.17536"/>
+ <polygon fill="#d4d4d4" points="258.163 206.744 212.339 172.421 167.14 206.275 166.106 204.895 212.339 170.265 257.945 204.425 303.266 154.83 303.447 154.756 349.163 136.337 349.808 137.937 304.274 156.283 258.163 206.744"/>
+ <path d="M1070.27362,765.71952h-381a1,1,0,0,1,0-2h381a1,1,0,0,1,0,2Z" fill="#525252" transform="translate(-128.72638 -134.28048)"/>
 </svg>
diff --git a/public/illustrations/journey.svg b/public/illustrations/journey.svg
index ecddddd..5d1e97d 100644
--- a/public/illustrations/journey.svg
+++ b/public/illustrations/journey.svg
@@ -1,41 +1,41 @@
 <svg viewBox="0 0 606.78384 466.94693" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <path d="M243.1138,465.75693c0,.66003,.53003,1.19,1.19006,1.19h361.28998c.65997,0,1.19-.52997,1.19-1.19,0-.65997-.53003-1.19-1.19-1.19H244.30386c-.66003,0-1.19006,.53003-1.19006,1.19Z" fill="#ccc"/>
+ <path d="M243.1138,465.75693c0,.66003,.53003,1.19,1.19006,1.19h361.28998c.65997,0,1.19-.52997,1.19-1.19,0-.65997-.53003-1.19-1.19-1.19H244.30386c-.66003,0-1.19006,.53003-1.19006,1.19Z" fill="#525252"/>
  <g>
-  <path d="M478.73106,208.21561l-12.81104-88.46045,11.30322-1.22412c11.81543-1.27734,22.81394,5.6587,26.74851,16.87208,7.11395,9.12006,11.27283,19.82416,11.45898,32.65771,4.6001,13.10986-2.28025,27.63817-15.33689,32.38622l-21.36279,7.76855Z" fill="#3f3d56"/>
+  <path d="M478.73106,208.21561l-12.81104-88.46045,11.30322-1.22412c11.81543-1.27734,22.81394,5.6587,26.74851,16.87208,7.11395,9.12006,11.27283,19.82416,11.45898,32.65771,4.6001,13.10986-2.28025,27.63817-15.33689,32.38622l-21.36279,7.76855Z" fill="#d4d4d4"/>
   <g>
    <polygon fill="#a0616a" points="480.18534 444.73761 471.57779 444.94074 466.7798 406.27023 479.48238 405.96963 480.18534 444.73761"/>
-   <path d="M450.65393,462.69556h0c0,1.45409,1.03191,2.63289,2.30485,2.63289h17.08527s1.68133-6.7585,8.53637-9.66706l.47312,9.66706h8.81369l-1.06787-15.5442s2.35771-8.3162-2.53875-12.5672c-4.89651-4.251-.93052-3.65923-.93052-3.65923l-1.9262-9.62068-13.31844,1.56616-.09793,15.10222-6.46334,14.99036-9.48016,4.68304c-.84378,.4168-1.39,1.3665-1.39,2.41661l-.00011,.00003Z" fill="#2f2e41"/>
+   <path d="M450.65393,462.69556h0c0,1.45409,1.03191,2.63289,2.30485,2.63289h17.08527s1.68133-6.7585,8.53637-9.66706l.47312,9.66706h8.81369l-1.06787-15.5442s2.35771-8.3162-2.53875-12.5672c-4.89651-4.251-.93052-3.65923-.93052-3.65923l-1.9262-9.62068-13.31844,1.56616-.09793,15.10222-6.46334,14.99036-9.48016,4.68304c-.84378,.4168-1.39,1.3665-1.39,2.41661l-.00011,.00003Z" fill="#a3a3a3"/>
   </g>
   <g>
    <polygon fill="#a0616a" points="448.73769 444.44459 440.13013 444.64772 435.33214 405.97721 448.03472 405.67661 448.73769 444.44459"/>
-   <path d="M419.20627,462.40254h0c0,1.45409,1.03191,2.63289,2.30485,2.63289h17.08527s1.68133-6.7585,8.53637-9.66706l.47312,9.66706h8.81369l-1.06787-15.5442s2.35771-8.3162-2.53875-12.5672c-4.89651-4.251-.93052-3.65923-.93052-3.65923l-1.9262-9.62068-13.31844,1.56616-.09793,15.10222-6.46334,14.99036-9.48016,4.68304c-.84378,.4168-1.39,1.3665-1.39,2.41661l-.00011,.00003Z" fill="#2f2e41"/>
+   <path d="M419.20627,462.40254h0c0,1.45409,1.03191,2.63289,2.30485,2.63289h17.08527s1.68133-6.7585,8.53637-9.66706l.47312,9.66706h8.81369l-1.06787-15.5442s2.35771-8.3162-2.53875-12.5672c-4.89651-4.251-.93052-3.65923-.93052-3.65923l-1.9262-9.62068-13.31844,1.56616-.09793,15.10222-6.46334,14.99036-9.48016,4.68304c-.84378,.4168-1.39,1.3665-1.39,2.41661l-.00011,.00003Z" fill="#a3a3a3"/>
   </g>
-  <path d="M473.51973,114.47654l-30.99834,5.39101c-2.13559-5.46579-12.47307-20.54879-13.35857-25.90032-2.30216-13.91303,8.07112-26.73999,22.13422-27.78947h.00005c13.48814-1.00658,21.70534,1.51938,22.85326,14.367,.40236,4.50321,6.26672,8.56659,7.44772,12.93076,6.51556,24.07697-6.52003,15.87037-8.07834,21.00102Z" fill="#2f2e41"/>
-  <path d="M426.97896,215.32013l-2.02163,30.99834,8.68046,172.71696,16-3,10.79624-140.74026,3.9451,143.19884,18.86855,.67388,13.26058-168.16821c1.01319-12.84915-2.35442-25.66276-9.55424-36.3534v-.00002l-59.97505,.67388Z" fill="#2f2e41"/>
+  <path d="M473.51973,114.47654l-30.99834,5.39101c-2.13559-5.46579-12.47307-20.54879-13.35857-25.90032-2.30216-13.91303,8.07112-26.73999,22.13422-27.78947h.00005c13.48814-1.00658,21.70534,1.51938,22.85326,14.367,.40236,4.50321,6.26672,8.56659,7.44772,12.93076,6.51556,24.07697-6.52003,15.87037-8.07834,21.00102Z" fill="#a3a3a3"/>
+  <path d="M426.97896,215.32013l-2.02163,30.99834,8.68046,172.71696,16-3,10.79624-140.74026,3.9451,143.19884,18.86855,.67388,13.26058-168.16821c1.01319-12.84915-2.35442-25.66276-9.55424-36.3534v-.00002l-59.97505,.67388Z" fill="#a3a3a3"/>
   <path d="M466.06382,115.58636h-24.73181l-5.59265,8.7604-19.54243,8.08652,10.78203,76.82196-2.69551,33.01997c15.23536,5.16951,50.59214,13.171,76.16536-7.94676l-22.92909-41.24626,5.39101-57.95341-10.44509-9.50326-6.40183-10.03917Z" fill="#FD5E0F"/>
   <circle cx="452.38118" cy="92.54439" fill="#a0616a" r="18.68574"/>
   <path d="M498.50889,260.19966c-.40161-2.02836-.3118-3.97925,.16337-5.58086l-5.04638-19.08113,9.14981-2.13566,4.13391,19.58585c1.04964,1.2997,1.87607,3.06917,2.27768,5.09753,.91748,4.63378-.72921,8.86346-3.67797,9.4473-2.94876,.58384-6.08294-2.69925-7.00042-7.33302h0Z" fill="#a0616a"/>
   <path d="M470.44402,130.74859s11.45591-4.71714,16.84692,4.04326c5.39101,8.7604,19.54243,111.86356,19.54243,111.86356l-11.79285,1.68469-23.24875-83.22379-1.34775-34.36772Z" fill="#FD5E0F"/>
-  <polygon fill="#3f3d56" points="478.6378 190.03543 469.07173 122.96288 477.22047 129.48033 478.6378 190.03543"/>
+  <polygon fill="#d4d4d4" points="478.6378 190.03543 469.07173 122.96288 477.22047 129.48033 478.6378 190.03543"/>
   <g>
    <path d="M473.60477,147.41331c-1.53019,1.57383-3.28897,2.67156-4.97489,3.222l-13.63005,15.91357-7.38258-6.70724,14.62119-15.42057c.5028-1.70074,1.55066-3.48969,3.08085-5.06352,3.49571-3.59541,8.18429-4.7067,10.47226-2.48215,2.28798,2.22454,1.30893,6.9425-2.18677,10.53791h0Z" fill="#a0616a"/>
    <path d="M428.687,127.80491s-12.87212,1.47288-13.84915,6.83274,5.99069,55.13488,5.99069,55.13488l9.68255,10.2629,37.82838-45.06214-11.37771-7.14613-17.48543,13.73961-10.78935-33.76186Z" fill="#FD5E0F"/>
   </g>
-  <path d="M450.09075,69.15171c-7.60062,1.33743-14.96605,5.45258-18.90924,12.08654-3.94319,6.63396-11.16814,15.87716-5.93007,21.54468,1.81043,1.95886,4.11695,3.44175,5.74553,5.55422,2.77133,3.59476,3.17157,8.64549,1.78962,12.969s-4.34565,7.9896-7.73629,11.00723c7.25776-.74874,13.88133-5.90489,16.38777-12.75715,1.15985-3.17087,1.39592-6.97442-.58875-9.70586-1.04378-1.43653-2.58113-2.41857-3.90693-3.59981-3.41944-3.0466-1.22336-7.64853-1.20302-12.22827s.59689-7.76592,4.04326-10.78203c2.37347,1.8969,10.24363,1.43894,13.24276,.9523,2.99913-.48664,11.38654,11.03204,13.03844,8.48198,3.23374,4.15672,1.02121-4.4089,.41411,.82243-.43433,3.74256-2.89171,6.97085-3.63262,10.66496-.64474,3.21461,.05988,6.5598,1.19239,9.63662,2.55466,6.9406,7.34433,13.03873,13.48203,17.1651-3.54377-5.01207-7.23832-10.48941-7.12173-16.62664,.08648-4.55209,9.78516-21.94748,11.14336-26.29309,2.59893-8.31535-4.55362-9.53005-10.08652-16.25957-4.85898-5.90985-14.25182-4.08367-21.69996-2.33402" fill="#2f2e41"/>
+  <path d="M450.09075,69.15171c-7.60062,1.33743-14.96605,5.45258-18.90924,12.08654-3.94319,6.63396-11.16814,15.87716-5.93007,21.54468,1.81043,1.95886,4.11695,3.44175,5.74553,5.55422,2.77133,3.59476,3.17157,8.64549,1.78962,12.969s-4.34565,7.9896-7.73629,11.00723c7.25776-.74874,13.88133-5.90489,16.38777-12.75715,1.15985-3.17087,1.39592-6.97442-.58875-9.70586-1.04378-1.43653-2.58113-2.41857-3.90693-3.59981-3.41944-3.0466-1.22336-7.64853-1.20302-12.22827s.59689-7.76592,4.04326-10.78203c2.37347,1.8969,10.24363,1.43894,13.24276,.9523,2.99913-.48664,11.38654,11.03204,13.03844,8.48198,3.23374,4.15672,1.02121-4.4089,.41411,.82243-.43433,3.74256-2.89171,6.97085-3.63262,10.66496-.64474,3.21461,.05988,6.5598,1.19239,9.63662,2.55466,6.9406,7.34433,13.03873,13.48203,17.1651-3.54377-5.01207-7.23832-10.48941-7.12173-16.62664,.08648-4.55209,9.78516-21.94748,11.14336-26.29309,2.59893-8.31535-4.55362-9.53005-10.08652-16.25957-4.85898-5.90985-14.25182-4.08367-21.69996-2.33402" fill="#a3a3a3"/>
  </g>
- <path d="M304.97998,0H19.02002C8.53003,0,0,8.52997,0,19.01996V313.97998c0,10.48999,8.53003,19.02002,19.02002,19.02002H304.97998c10.48999,0,19.02002-8.53003,19.02002-19.02002V19.01996c0-10.48999-8.53003-19.01996-19.02002-19.01996Zm17.02002,313.97998c0,9.39001-7.63,17.02002-17.02002,17.02002H19.02002c-9.39001,0-17.02002-7.63-17.02002-17.02002V19.01996C2,9.63,9.63,2,19.02002,2H304.97998c9.39001,0,17.02002,7.63,17.02002,17.01996V313.97998Z" fill="#3f3d56"/>
+ <path d="M304.97998,0H19.02002C8.53003,0,0,8.52997,0,19.01996V313.97998c0,10.48999,8.53003,19.02002,19.02002,19.02002H304.97998c10.48999,0,19.02002-8.53003,19.02002-19.02002V19.01996c0-10.48999-8.53003-19.01996-19.02002-19.01996Zm17.02002,313.97998c0,9.39001-7.63,17.02002-17.02002,17.02002H19.02002c-9.39001,0-17.02002-7.63-17.02002-17.02002V19.01996C2,9.63,9.63,2,19.02002,2H304.97998c9.39001,0,17.02002,7.63,17.02002,17.01996V313.97998Z" fill="#d4d4d4"/>
  <g>
-  <path d="M129.03003,19.34998h-28.06006c-1.40997,0-2.56,1.15002-2.56,2.56,0,1.41998,1.15002,2.57001,2.56,2.57001h28.06006c1.40997,0,2.56-1.15002,2.56-2.57001,0-1.40997-1.15002-2.56-2.56-2.56Z" fill="#e6e6e6"/>
-  <path d="M176.03003,19.34998h-28.06006c-1.40997,0-2.56,1.15002-2.56,2.56,0,1.41998,1.15002,2.57001,2.56,2.57001h28.06006c1.40997,0,2.56-1.15002,2.56-2.57001,0-1.40997-1.15002-2.56-2.56-2.56Z" fill="#e6e6e6"/>
-  <path d="M223.03003,19.34998h-28.06006c-1.40997,0-2.56,1.15002-2.56,2.56,0,1.41998,1.15002,2.57001,2.56,2.57001h28.06006c1.40997,0,2.56-1.15002,2.56-2.57001,0-1.40997-1.15002-2.56-2.56-2.56Z" fill="#3f3d56"/>
+  <path d="M129.03003,19.34998h-28.06006c-1.40997,0-2.56,1.15002-2.56,2.56,0,1.41998,1.15002,2.57001,2.56,2.57001h28.06006c1.40997,0,2.56-1.15002,2.56-2.57001,0-1.40997-1.15002-2.56-2.56-2.56Z" fill="#404040"/>
+  <path d="M176.03003,19.34998h-28.06006c-1.40997,0-2.56,1.15002-2.56,2.56,0,1.41998,1.15002,2.57001,2.56,2.57001h28.06006c1.40997,0,2.56-1.15002,2.56-2.57001,0-1.40997-1.15002-2.56-2.56-2.56Z" fill="#404040"/>
+  <path d="M223.03003,19.34998h-28.06006c-1.40997,0-2.56,1.15002-2.56,2.56,0,1.41998,1.15002,2.57001,2.56,2.57001h28.06006c1.40997,0,2.56-1.15002,2.56-2.57001,0-1.40997-1.15002-2.56-2.56-2.56Z" fill="#d4d4d4"/>
  </g>
  <path d="M85.49814,87.41216H50.29819c-4.36005,0-7.90002,3.53998-7.90002,7.89996v20.20001c0,4.35999,3.53998,7.90002,7.90002,7.90002h35.19995c4.36005,0,7.90002-3.54004,7.90002-7.90002v-20.20001c0-4.35999-3.53998-7.89996-7.90002-7.89996Z" fill="#FD5E0F"/>
- <path d="M122.73777,140.88811h-35.19995c-4.36005,0-7.90002,3.53998-7.90002,7.89996v20.20001c0,4.35999,3.53998,7.90002,7.90002,7.90002h35.19995c4.36005,0,7.90002-3.54004,7.90002-7.90002v-20.20001c0-4.35999-3.53998-7.89996-7.90002-7.89996Z" fill="#e6e6e6"/>
- <path d="M129.43365,122.27012c-.66503,0-1.20414-.53911-1.20414-1.20414v-31.30765c0-.66503,.53911-1.20414,1.20414-1.20414s1.20414,.53911,1.20414,1.20414v31.30765c0,.66503-.53911,1.20414-1.20414,1.20414Zm-6.0207-16.85797c0,.66503-.53911,1.20414-1.20414,1.20414h-13.95117l5.17058,5.16817c.47084,.47084,.47084,1.23422,0,1.70506s-1.23422,.47084-1.70506,0l-7.22484-7.22484c-.47084-.46965-.4718-1.23207-.00215-1.70291l.00215-.00215,7.22484-7.22484c.47084-.47084,1.23422-.47084,1.70506,0s.47084,1.23422,0,1.70506l-5.17058,5.16817h13.95117c.66503,0,1.20414,.53911,1.20414,1.20414Z" fill="#3f3d56"/>
- <path d="M49.62301,158.88811c0,.66503,.53911,1.20414,1.20414,1.20414h13.95117l-5.17058,5.16817c-.47084,.47084-.47084,1.23422,0,1.70506s1.23422,.47084,1.70506,0l7.22484-7.22484c.47084-.46965,.47181-1.23207,.00215-1.70291l-.00215-.00215-7.22484-7.22484c-.47084-.47084-1.23422-.47084-1.70506,0s-.47084,1.23422,0,1.70506l5.17058,5.16817h-13.95117c-.66503,0-1.20414,.53911-1.20414,1.20414Zm-6.0207,16.85797c-.66503,0-1.20414-.53911-1.20414-1.20414v-31.30765c0-.66503,.53911-1.20414,1.20414-1.20414s1.20414,.53911,1.20414,1.20414v31.30765c0,.66503-.53911,1.20414-1.20414,1.20414Z" fill="#3f3d56"/>
- <path d="M231.73777,115.03543h-35.19995c-4.36005,0-7.90002,3.53998-7.90002,7.89996v20.20001c0,4.35999,3.53998,7.90002,7.90002,7.90002h35.19995c4.36005,0,7.90002-3.54004,7.90002-7.90002v-20.20001c0-4.35999-3.53998-7.89996-7.90002-7.89996Z" fill="#e6e6e6"/>
- <path d="M231.73777,239.03543h-35.19995c-4.36005,0-7.90002,3.53998-7.90002,7.89996v20.20001c0,4.35999,3.53998,7.90002,7.90002,7.90002h35.19995c4.36005,0,7.90002-3.54004,7.90002-7.90002v-20.20001c0-4.35999-3.53998-7.89996-7.90002-7.89996Z" fill="#e6e6e6"/>
- <path d="M197.27983,204.60386c0-.66503,.53911-1.20414,1.20414-1.20414h31.30765c.66503,0,1.20414,.53911,1.20414,1.20414s-.53911,1.20414-1.20414,1.20414h-31.30765c-.66503,0-1.20414-.53911-1.20414-1.20414Zm16.85797,6.0207c.66503,0,1.20414,.53911,1.20414,1.20414v13.95117l5.16817-5.17058c.47084-.47084,1.23422-.47084,1.70506,0s.47084,1.23422,0,1.70506l-7.22484,7.22484c-.46965,.47084-1.23207,.47181-1.70291,.00215l-.00215-.00215-7.22484-7.22484c-.47084-.47084-.47084-1.23422,0-1.70506s1.23422-.47084,1.70506,0l5.16817,5.17058v-13.95117c0-.66503,.53911-1.20414,1.20414-1.20414Z" fill="#3f3d56"/>
- <path d="M214.1378,180.81059c.66503,0,1.20414-.53911,1.20414-1.20414v-13.95117l5.16817,5.17058c.47084,.47084,1.23422,.47084,1.70506,0s.47084-1.23422,0-1.70506l-7.22484-7.22484c-.46965-.47084-1.23207-.4718-1.70291-.00215l-.00215,.00215-7.22484,7.22484c-.47084,.47084-.47084,1.23422,0,1.70506s1.23422,.47084,1.70506,0l5.16817-5.17058v13.95117c0,.66503,.53911,1.20414,1.20414,1.20414Zm-16.85797,6.0207c0-.66503,.53911-1.20414,1.20414-1.20414h31.30765c.66503,0,1.20414,.53911,1.20414,1.20414s-.53911,1.20414-1.20414,1.20414h-31.30765c-.66503,0-1.20414-.53911-1.20414-1.20414Z" fill="#3f3d56"/>
+ <path d="M122.73777,140.88811h-35.19995c-4.36005,0-7.90002,3.53998-7.90002,7.89996v20.20001c0,4.35999,3.53998,7.90002,7.90002,7.90002h35.19995c4.36005,0,7.90002-3.54004,7.90002-7.90002v-20.20001c0-4.35999-3.53998-7.89996-7.90002-7.89996Z" fill="#404040"/>
+ <path d="M129.43365,122.27012c-.66503,0-1.20414-.53911-1.20414-1.20414v-31.30765c0-.66503,.53911-1.20414,1.20414-1.20414s1.20414,.53911,1.20414,1.20414v31.30765c0,.66503-.53911,1.20414-1.20414,1.20414Zm-6.0207-16.85797c0,.66503-.53911,1.20414-1.20414,1.20414h-13.95117l5.17058,5.16817c.47084,.47084,.47084,1.23422,0,1.70506s-1.23422,.47084-1.70506,0l-7.22484-7.22484c-.47084-.46965-.4718-1.23207-.00215-1.70291l.00215-.00215,7.22484-7.22484c.47084-.47084,1.23422-.47084,1.70506,0s.47084,1.23422,0,1.70506l-5.17058,5.16817h13.95117c.66503,0,1.20414,.53911,1.20414,1.20414Z" fill="#d4d4d4"/>
+ <path d="M49.62301,158.88811c0,.66503,.53911,1.20414,1.20414,1.20414h13.95117l-5.17058,5.16817c-.47084,.47084-.47084,1.23422,0,1.70506s1.23422,.47084,1.70506,0l7.22484-7.22484c.47084-.46965,.47181-1.23207,.00215-1.70291l-.00215-.00215-7.22484-7.22484c-.47084-.47084-1.23422-.47084-1.70506,0s-.47084,1.23422,0,1.70506l5.17058,5.16817h-13.95117c-.66503,0-1.20414,.53911-1.20414,1.20414Zm-6.0207,16.85797c-.66503,0-1.20414-.53911-1.20414-1.20414v-31.30765c0-.66503,.53911-1.20414,1.20414-1.20414s1.20414,.53911,1.20414,1.20414v31.30765c0,.66503-.53911,1.20414-1.20414,1.20414Z" fill="#d4d4d4"/>
+ <path d="M231.73777,115.03543h-35.19995c-4.36005,0-7.90002,3.53998-7.90002,7.89996v20.20001c0,4.35999,3.53998,7.90002,7.90002,7.90002h35.19995c4.36005,0,7.90002-3.54004,7.90002-7.90002v-20.20001c0-4.35999-3.53998-7.89996-7.90002-7.89996Z" fill="#404040"/>
+ <path d="M231.73777,239.03543h-35.19995c-4.36005,0-7.90002,3.53998-7.90002,7.89996v20.20001c0,4.35999,3.53998,7.90002,7.90002,7.90002h35.19995c4.36005,0,7.90002-3.54004,7.90002-7.90002v-20.20001c0-4.35999-3.53998-7.89996-7.90002-7.89996Z" fill="#404040"/>
+ <path d="M197.27983,204.60386c0-.66503,.53911-1.20414,1.20414-1.20414h31.30765c.66503,0,1.20414,.53911,1.20414,1.20414s-.53911,1.20414-1.20414,1.20414h-31.30765c-.66503,0-1.20414-.53911-1.20414-1.20414Zm16.85797,6.0207c.66503,0,1.20414,.53911,1.20414,1.20414v13.95117l5.16817-5.17058c.47084-.47084,1.23422-.47084,1.70506,0s.47084,1.23422,0,1.70506l-7.22484,7.22484c-.46965,.47084-1.23207,.47181-1.70291,.00215l-.00215-.00215-7.22484-7.22484c-.47084-.47084-.47084-1.23422,0-1.70506s1.23422-.47084,1.70506,0l5.16817,5.17058v-13.95117c0-.66503,.53911-1.20414,1.20414-1.20414Z" fill="#d4d4d4"/>
+ <path d="M214.1378,180.81059c.66503,0,1.20414-.53911,1.20414-1.20414v-13.95117l5.16817,5.17058c.47084,.47084,1.23422,.47084,1.70506,0s.47084-1.23422,0-1.70506l-7.22484-7.22484c-.46965-.47084-1.23207-.4718-1.70291-.00215l-.00215,.00215-7.22484,7.22484c-.47084,.47084-.47084,1.23422,0,1.70506s1.23422,.47084,1.70506,0l5.16817-5.17058v13.95117c0,.66503,.53911,1.20414,1.20414,1.20414Zm-16.85797,6.0207c0-.66503,.53911-1.20414,1.20414-1.20414h31.30765c.66503,0,1.20414,.53911,1.20414,1.20414s-.53911,1.20414-1.20414,1.20414h-31.30765c-.66503,0-1.20414-.53911-1.20414-1.20414Z" fill="#d4d4d4"/>
  <circle cx="208.6378" cy="22.03543" fill="#FD5E0F" r="9"/>
 </svg>
diff --git a/public/illustrations/no-data.svg b/public/illustrations/no-data.svg
index 1343b9c..b62d284 100644
--- a/public/illustrations/no-data.svg
+++ b/public/illustrations/no-data.svg
@@ -1,12 +1,12 @@
 <svg data-name="Layer 1" viewBox="0 0 647.63626 632.17383" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <path d="M687.3279,276.08691H512.81813a15.01828,15.01828,0,0,0-15,15v387.85l-2,.61005-42.81006,13.11a8.00676,8.00676,0,0,1-9.98974-5.31L315.678,271.39691a8.00313,8.00313,0,0,1,5.31006-9.99l65.97022-20.2,191.25-58.54,65.96972-20.2a7.98927,7.98927,0,0,1,9.99024,5.3l32.5498,106.32Z" fill="#f2f2f2" transform="translate(-276.18187 -133.91309)"/>
- <path d="M725.408,274.08691l-39.23-128.14a16.99368,16.99368,0,0,0-21.23-11.28l-92.75,28.39L380.95827,221.60693l-92.75,28.4a17.0152,17.0152,0,0,0-11.28028,21.23l134.08008,437.93a17.02661,17.02661,0,0,0,16.26026,12.03,16.78926,16.78926,0,0,0,4.96972-.75l63.58008-19.46,2-.62v-2.09l-2,.61-64.16992,19.65a15.01489,15.01489,0,0,1-18.73-9.95l-134.06983-437.94a14.97935,14.97935,0,0,1,9.94971-18.73l92.75-28.4,191.24024-58.54,92.75-28.4a15.15551,15.15551,0,0,1,4.40966-.66,15.01461,15.01461,0,0,1,14.32032,10.61l39.0498,127.56.62012,2h2.08008Z" fill="#3f3d56" transform="translate(-276.18187 -133.91309)"/>
+ <path d="M687.3279,276.08691H512.81813a15.01828,15.01828,0,0,0-15,15v387.85l-2,.61005-42.81006,13.11a8.00676,8.00676,0,0,1-9.98974-5.31L315.678,271.39691a8.00313,8.00313,0,0,1,5.31006-9.99l65.97022-20.2,191.25-58.54,65.96972-20.2a7.98927,7.98927,0,0,1,9.99024,5.3l32.5498,106.32Z" fill="#2a2a2a" transform="translate(-276.18187 -133.91309)"/>
+ <path d="M725.408,274.08691l-39.23-128.14a16.99368,16.99368,0,0,0-21.23-11.28l-92.75,28.39L380.95827,221.60693l-92.75,28.4a17.0152,17.0152,0,0,0-11.28028,21.23l134.08008,437.93a17.02661,17.02661,0,0,0,16.26026,12.03,16.78926,16.78926,0,0,0,4.96972-.75l63.58008-19.46,2-.62v-2.09l-2,.61-64.16992,19.65a15.01489,15.01489,0,0,1-18.73-9.95l-134.06983-437.94a14.97935,14.97935,0,0,1,9.94971-18.73l92.75-28.4,191.24024-58.54,92.75-28.4a15.15551,15.15551,0,0,1,4.40966-.66,15.01461,15.01461,0,0,1,14.32032,10.61l39.0498,127.56.62012,2h2.08008Z" fill="#d4d4d4" transform="translate(-276.18187 -133.91309)"/>
  <path d="M398.86279,261.73389a9.0157,9.0157,0,0,1-8.61133-6.3667l-12.88037-42.07178a8.99884,8.99884,0,0,1,5.9712-11.24023l175.939-53.86377a9.00867,9.00867,0,0,1,11.24072,5.9707l12.88037,42.07227a9.01029,9.01029,0,0,1-5.9707,11.24072L401.49219,261.33887A8.976,8.976,0,0,1,398.86279,261.73389Z" fill="#FD5E0F" transform="translate(-276.18187 -133.91309)"/>
  <circle cx="190.15351" cy="24.95465" fill="#FD5E0F" r="20"/>
- <circle cx="190.15351" cy="24.95465" fill="#fff" r="12.66462"/>
- <path d="M878.81836,716.08691h-338a8.50981,8.50981,0,0,1-8.5-8.5v-405a8.50951,8.50951,0,0,1,8.5-8.5h338a8.50982,8.50982,0,0,1,8.5,8.5v405A8.51013,8.51013,0,0,1,878.81836,716.08691Z" fill="#e6e6e6" transform="translate(-276.18187 -133.91309)"/>
- <path d="M723.31813,274.08691h-210.5a17.02411,17.02411,0,0,0-17,17v407.8l2-.61v-407.19a15.01828,15.01828,0,0,1,15-15H723.93825Zm183.5,0h-394a17.02411,17.02411,0,0,0-17,17v458a17.0241,17.0241,0,0,0,17,17h394a17.0241,17.0241,0,0,0,17-17v-458A17.02411,17.02411,0,0,0,906.81813,274.08691Zm15,475a15.01828,15.01828,0,0,1-15,15h-394a15.01828,15.01828,0,0,1-15-15v-458a15.01828,15.01828,0,0,1,15-15h394a15.01828,15.01828,0,0,1,15,15Z" fill="#3f3d56" transform="translate(-276.18187 -133.91309)"/>
+ <circle cx="190.15351" cy="24.95465" fill="#262626" r="12.66462"/>
+ <path d="M878.81836,716.08691h-338a8.50981,8.50981,0,0,1-8.5-8.5v-405a8.50951,8.50951,0,0,1,8.5-8.5h338a8.50982,8.50982,0,0,1,8.5,8.5v405A8.51013,8.51013,0,0,1,878.81836,716.08691Z" fill="#404040" transform="translate(-276.18187 -133.91309)"/>
+ <path d="M723.31813,274.08691h-210.5a17.02411,17.02411,0,0,0-17,17v407.8l2-.61v-407.19a15.01828,15.01828,0,0,1,15-15H723.93825Zm183.5,0h-394a17.02411,17.02411,0,0,0-17,17v458a17.0241,17.0241,0,0,0,17,17h394a17.0241,17.0241,0,0,0,17-17v-458A17.02411,17.02411,0,0,0,906.81813,274.08691Zm15,475a15.01828,15.01828,0,0,1-15,15h-394a15.01828,15.01828,0,0,1-15-15v-458a15.01828,15.01828,0,0,1,15-15h394a15.01828,15.01828,0,0,1,15,15Z" fill="#d4d4d4" transform="translate(-276.18187 -133.91309)"/>
  <path d="M801.81836,318.08691h-184a9.01015,9.01015,0,0,1-9-9v-44a9.01016,9.01016,0,0,1,9-9h184a9.01016,9.01016,0,0,1,9,9v44A9.01015,9.01015,0,0,1,801.81836,318.08691Z" fill="#FD5E0F" transform="translate(-276.18187 -133.91309)"/>
  <circle cx="433.63626" cy="105.17383" fill="#FD5E0F" r="20"/>
- <circle cx="433.63626" cy="105.17383" fill="#fff" r="12.18187"/>
+ <circle cx="433.63626" cy="105.17383" fill="#262626" r="12.18187"/>
 </svg>
diff --git a/public/illustrations/setup-analytics.svg b/public/illustrations/setup-analytics.svg
index 349ced2..68055ea 100644
--- a/public/illustrations/setup-analytics.svg
+++ b/public/illustrations/setup-analytics.svg
@@ -1,35 +1,35 @@
 <svg data-name="Layer 1" viewBox="0 0 686.30979 507.37542" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <path d="M839.55171,703.68771h-29.02c-.43018-.78-.83008-1.58-1.2002-2.39-3.33984-7.15-4.75-15.13-6.1001-22.95l-2.18994-12.7q10.5,7.635,20.99024,15.26c2.27978,1.66,4.60986,3.39,6.7998,5.26,4.61035,3.91,8.59033,8.43,10.1499,14.17.08008.32.16016.64.22022.96A19.46641,19.46641,0,0,1,839.55171,703.68771Z" fill="#f0f0f0" transform="translate(-256.84511 -196.31229)"/>
- <path d="M843.62153,701.29769a.77484.77484,0,0,1-.00976.15,10.48655,10.48655,0,0,1-.54,2.24H830.04145a16.31218,16.31218,0,0,1-1.03955-2.39,17.49851,17.49851,0,0,1-.8501-3.39,35.21814,35.21814,0,0,1,.67969-11.74c.25-1.25.52-2.51.79-3.75l1.54-7.08,7.71,12.39C841.45161,691.87771,844.13179,696.44766,843.62153,701.29769Z" fill="#f0f0f0" transform="translate(-256.84511 -196.31229)"/>
- <path d="M942.16168,232.86478H257.83832a1.0156,1.0156,0,0,1,0-2.0307H942.16168a1.0156,1.0156,0,0,1,0,2.0307Z" fill="#cacaca" transform="translate(-256.84511 -196.31229)"/>
- <ellipse cx="23.34831" cy="11.16881" fill="#3f3d56" rx="10.92534" ry="11.16881"/>
- <ellipse cx="61.09038" cy="11.16881" fill="#3f3d56" rx="10.92534" ry="11.16881"/>
- <ellipse cx="98.83246" cy="11.16881" fill="#3f3d56" rx="10.92534" ry="11.16881"/>
- <path d="M919.5485,203.1439H892.73177a2.03119,2.03119,0,0,1,0-4.06139H919.5485a2.03119,2.03119,0,0,1,0,4.06139Z" fill="#3f3d56" transform="translate(-256.84511 -196.31229)"/>
- <path d="M919.5485,210.759H892.73177a2.03119,2.03119,0,0,1,0-4.06139H919.5485a2.03119,2.03119,0,0,1,0,4.06139Z" fill="#3f3d56" transform="translate(-256.84511 -196.31229)"/>
- <path d="M919.5485,218.3741H892.73177a2.03119,2.03119,0,0,1,0-4.06139H919.5485a2.03119,2.03119,0,0,1,0,4.06139Z" fill="#3f3d56" transform="translate(-256.84511 -196.31229)"/>
- <path d="M841.26582,578.28769H321.67744a20.7293,20.7293,0,0,1-20.70581-20.70606V298.99325a20.72918,20.72918,0,0,1,20.70581-20.70556H841.26582a20.72919,20.72919,0,0,1,20.70581,20.70556V557.58163A20.7293,20.7293,0,0,1,841.26582,578.28769Z" fill="#f0f0f0" transform="translate(-256.84511 -196.31229)"/>
- <path d="M898.30024,648.84188H378.71186a20.7293,20.7293,0,0,1-20.70581-20.706V369.54745a20.7292,20.7292,0,0,1,20.70581-20.70557H898.30024a20.72919,20.72919,0,0,1,20.70581,20.70557V628.13583A20.72929,20.72929,0,0,1,898.30024,648.84188Z" fill="#fff" transform="translate(-256.84511 -196.31229)"/>
- <path d="M898.30024,648.84188H378.71186a20.7293,20.7293,0,0,1-20.70581-20.706V369.54745a20.7292,20.7292,0,0,1,20.70581-20.70557H898.30024a20.72919,20.72919,0,0,1,20.70581,20.70557V628.13583A20.72929,20.72929,0,0,1,898.30024,648.84188Zm-519.58838-297a17.72584,17.72584,0,0,0-17.70581,17.70557V628.13583a17.72594,17.72594,0,0,0,17.70581,17.706H898.30024a17.726,17.726,0,0,0,17.70581-17.706V369.54745a17.72592,17.72592,0,0,0-17.70581-17.70557Z" fill="#e4e4e4" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M839.55171,703.68771h-29.02c-.43018-.78-.83008-1.58-1.2002-2.39-3.33984-7.15-4.75-15.13-6.1001-22.95l-2.18994-12.7q10.5,7.635,20.99024,15.26c2.27978,1.66,4.60986,3.39,6.7998,5.26,4.61035,3.91,8.59033,8.43,10.1499,14.17.08008.32.16016.64.22022.96A19.46641,19.46641,0,0,1,839.55171,703.68771Z" fill="#2a2a2a" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M843.62153,701.29769a.77484.77484,0,0,1-.00976.15,10.48655,10.48655,0,0,1-.54,2.24H830.04145a16.31218,16.31218,0,0,1-1.03955-2.39,17.49851,17.49851,0,0,1-.8501-3.39,35.21814,35.21814,0,0,1,.67969-11.74c.25-1.25.52-2.51.79-3.75l1.54-7.08,7.71,12.39C841.45161,691.87771,844.13179,696.44766,843.62153,701.29769Z" fill="#2a2a2a" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M942.16168,232.86478H257.83832a1.0156,1.0156,0,0,1,0-2.0307H942.16168a1.0156,1.0156,0,0,1,0,2.0307Z" fill="#525252" transform="translate(-256.84511 -196.31229)"/>
+ <ellipse cx="23.34831" cy="11.16881" fill="#d4d4d4" rx="10.92534" ry="11.16881"/>
+ <ellipse cx="61.09038" cy="11.16881" fill="#d4d4d4" rx="10.92534" ry="11.16881"/>
+ <ellipse cx="98.83246" cy="11.16881" fill="#d4d4d4" rx="10.92534" ry="11.16881"/>
+ <path d="M919.5485,203.1439H892.73177a2.03119,2.03119,0,0,1,0-4.06139H919.5485a2.03119,2.03119,0,0,1,0,4.06139Z" fill="#d4d4d4" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M919.5485,210.759H892.73177a2.03119,2.03119,0,0,1,0-4.06139H919.5485a2.03119,2.03119,0,0,1,0,4.06139Z" fill="#d4d4d4" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M919.5485,218.3741H892.73177a2.03119,2.03119,0,0,1,0-4.06139H919.5485a2.03119,2.03119,0,0,1,0,4.06139Z" fill="#d4d4d4" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M841.26582,578.28769H321.67744a20.7293,20.7293,0,0,1-20.70581-20.70606V298.99325a20.72918,20.72918,0,0,1,20.70581-20.70556H841.26582a20.72919,20.72919,0,0,1,20.70581,20.70556V557.58163A20.7293,20.7293,0,0,1,841.26582,578.28769Z" fill="#2a2a2a" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M898.30024,648.84188H378.71186a20.7293,20.7293,0,0,1-20.70581-20.706V369.54745a20.7292,20.7292,0,0,1,20.70581-20.70557H898.30024a20.72919,20.72919,0,0,1,20.70581,20.70557V628.13583A20.72929,20.72929,0,0,1,898.30024,648.84188Z" fill="#262626" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M898.30024,648.84188H378.71186a20.7293,20.7293,0,0,1-20.70581-20.706V369.54745a20.7292,20.7292,0,0,1,20.70581-20.70557H898.30024a20.72919,20.72919,0,0,1,20.70581,20.70557V628.13583A20.72929,20.72929,0,0,1,898.30024,648.84188Zm-519.58838-297a17.72584,17.72584,0,0,0-17.70581,17.70557V628.13583a17.72594,17.72594,0,0,0,17.70581,17.706H898.30024a17.726,17.726,0,0,0,17.70581-17.706V369.54745a17.72592,17.72592,0,0,0-17.70581-17.70557Z" fill="#404040" transform="translate(-256.84511 -196.31229)"/>
  <path d="M418.61225,603.56884H834.09264V532.35693a56.38609,56.38609,0,0,0-17.29473-40.16373l-.11295-.11031c-7.42075-7.44571-32.22061-26.34266-57.88-24.74044-13.55448.84379-25.159,7.3761-34.49064,19.4157-29.04672,37.48987-67.20243,24.835-87.36145,13.955-17.76588-9.59031-35.90932-14.09161-53.93-13.37521-25.23817.98693-60.76106,10.28438-86.6677,48.9746-9.89467,14.76533-31.41327,34.80813-77.74291,46.587Z" fill="#FD5E0F" style="isolation:isolate" transform="translate(-256.84511 -196.31229)"/>
- <path d="M857.6003,605.225H419.41186a1.3714,1.3714,0,0,1-1.37133-1.37133V393.8299a1.37133,1.37133,0,0,1,2.74266,0V602.4823H857.6003a1.37133,1.37133,0,1,1,0,2.74266Z" fill="#3f3d56" transform="translate(-256.84511 -196.31229)"/>
- <circle cx="325.26146" cy="293.18288" fill="#3f3d56" r="8.22798"/>
- <circle cx="486.63869" cy="271.66591" fill="#3f3d56" r="8.22798"/>
- <circle cx="405.95007" cy="316.04465" fill="#3f3d56" r="8.22798"/>
- <circle cx="244.57284" cy="328.14794" fill="#3f3d56" r="8.22798"/>
- <circle cx="567.32731" cy="301.25174" fill="#3f3d56" r="8.22798"/>
+ <path d="M857.6003,605.225H419.41186a1.3714,1.3714,0,0,1-1.37133-1.37133V393.8299a1.37133,1.37133,0,0,1,2.74266,0V602.4823H857.6003a1.37133,1.37133,0,1,1,0,2.74266Z" fill="#d4d4d4" transform="translate(-256.84511 -196.31229)"/>
+ <circle cx="325.26146" cy="293.18288" fill="#d4d4d4" r="8.22798"/>
+ <circle cx="486.63869" cy="271.66591" fill="#d4d4d4" r="8.22798"/>
+ <circle cx="405.95007" cy="316.04465" fill="#d4d4d4" r="8.22798"/>
+ <circle cx="244.57284" cy="328.14794" fill="#d4d4d4" r="8.22798"/>
+ <circle cx="567.32731" cy="301.25174" fill="#d4d4d4" r="8.22798"/>
  <path d="M919.49205,523.44529a8.62866,8.62866,0,0,1,.92064-13.199L911.5418,480.8942l15.27123,4.54873,6.0827,27.17593a8.67542,8.67542,0,0,1-13.40368,10.82643Z" fill="#9e616a" transform="translate(-256.84511 -196.31229)"/>
  <path d="M775.49791,348.90049a8.62865,8.62865,0,0,0,8.96991,9.72628l11.42578,28.4551,9.0756-13.09714-12.24151-25.01351a8.67542,8.67542,0,0,0-17.22978-.07073Z" fill="#9e616a" transform="translate(-256.84511 -196.31229)"/>
  <polygon fill="#9e616a" points="647.472 494.812 636.952 494.812 631.948 454.235 647.474 454.236 647.472 494.812"/>
- <path d="M907.00008,701.32191l-33.92056-.00126v-.429A13.20353,13.20353,0,0,1,886.28235,687.689h.00084l20.71751.00084Z" fill="#2f2e41" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M907.00008,701.32191l-33.92056-.00126v-.429A13.20353,13.20353,0,0,1,886.28235,687.689h.00084l20.71751.00084Z" fill="#a3a3a3" transform="translate(-256.84511 -196.31229)"/>
  <polygon fill="#9e616a" points="613.047 494.478 603.018 491.303 610.493 451.107 625.295 455.794 613.047 494.478"/>
- <path d="M869.37275,701.32191l-32.33854-10.23828.12948-.409a13.20355,13.20355,0,0,1,16.57171-8.60245l.0008.00025,19.75126,6.25326Z" fill="#2f2e41" transform="translate(-256.84511 -196.31229)"/>
- <path d="M857.43293,492.80844s-15.60875,24.50868-10.09315,46.383,11.52216,63.92019,11.52216,63.92019l29.90593,71.17205,22.2929-.90945L888.92232,589.46l.87536-56.10627s15.38706-26.81444,12.39054-35.16157S857.43293,492.80844,857.43293,492.80844Z" fill="#2f2e41" transform="translate(-256.84511 -196.31229)"/>
- <path d="M908.42646,501.571s1.92027,24.31339-4.08629,34.61035-12.406,49.48841-12.406,49.48841l-10.20948,78.38239-21.14661-6.88153,18.03212-87.81806,14.1729-69.07881Z" fill="#2f2e41" transform="translate(-256.84511 -196.31229)"/>
- <path d="M915.92425,383.87218l-16.499-11.34081-25.10769-.72927-8.74352,8.57208-13.34314,6.81363-1.23569,111.00437s39.95671,19.15179,61.45273,9.90725l10.341-86.47174C927.07929,404.4661,915.92425,383.87218,915.92425,383.87218Z" fill="#3f3d56" transform="translate(-256.84511 -196.31229)"/>
- <path d="M855.58211,416.85183H811.57262l-28.9141-49.77031,18.80108-7.447,15.92224,28.32334,23.04561-2.08571,14.38938-.69593a15.84711,15.84711,0,0,1,16.49437,17.75949h0A15.86568,15.86568,0,0,1,855.58211,416.85183Z" fill="#3f3d56" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M869.37275,701.32191l-32.33854-10.23828.12948-.409a13.20355,13.20355,0,0,1,16.57171-8.60245l.0008.00025,19.75126,6.25326Z" fill="#a3a3a3" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M857.43293,492.80844s-15.60875,24.50868-10.09315,46.383,11.52216,63.92019,11.52216,63.92019l29.90593,71.17205,22.2929-.90945L888.92232,589.46l.87536-56.10627s15.38706-26.81444,12.39054-35.16157S857.43293,492.80844,857.43293,492.80844Z" fill="#a3a3a3" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M908.42646,501.571s1.92027,24.31339-4.08629,34.61035-12.406,49.48841-12.406,49.48841l-10.20948,78.38239-21.14661-6.88153,18.03212-87.81806,14.1729-69.07881Z" fill="#a3a3a3" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M915.92425,383.87218l-16.499-11.34081-25.10769-.72927-8.74352,8.57208-13.34314,6.81363-1.23569,111.00437s39.95671,19.15179,61.45273,9.90725l10.341-86.47174C927.07929,404.4661,915.92425,383.87218,915.92425,383.87218Z" fill="#d4d4d4" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M855.58211,416.85183H811.57262l-28.9141-49.77031,18.80108-7.447,15.92224,28.32334,23.04561-2.08571,14.38938-.69593a15.84711,15.84711,0,0,1,16.49437,17.75949h0A15.86568,15.86568,0,0,1,855.58211,416.85183Z" fill="#d4d4d4" transform="translate(-256.84511 -196.31229)"/>
  <circle cx="632.07342" cy="144.5792" fill="#9e616a" r="21.76948"/>
- <path d="M915.1489,335.93858c-.66849-4.77931-3.90535-9.31727-8.50873-10.76518-1.82866-5.31031-6.67233-9.21985-12.0238-10.92407a23.48728,23.48728,0,0,0-27.00124,9.84786c-.40956.64393-1.66882,2.22585-1.63362,2.99427.04462.97592,1.53767,1.98358,2.28765,2.59886a33.53927,33.53927,0,0,0,5.98121,3.69167c7.8281,4.05838,5.22223,10.43637,5.116,17.66385-.05153,3.51224,1.121,6.51112,4.1159,8.51727,4.32224,2.89534,10.50791,1.74345,15.2108.58145,5.3364-1.31865,9.773-6.00656,12.81631-10.52662C914.20472,345.61491,915.8176,340.71788,915.1489,335.93858Z" fill="#2f2e41" transform="translate(-256.84511 -196.31229)"/>
- <polygon fill="#3f3d56" points="658.087 215.476 676.547 306.933 649.333 308.422 658.087 215.476"/>
- <path d="M933.99165,702.4877a1.19488,1.19488,0,0,1-1.18994,1.2H791.5019a1.195,1.195,0,0,1,0-2.39H932.80171A1.19269,1.19269,0,0,1,933.99165,702.4877Z" fill="#cacaca" transform="translate(-256.84511 -196.31229)"/>
+ <path d="M915.1489,335.93858c-.66849-4.77931-3.90535-9.31727-8.50873-10.76518-1.82866-5.31031-6.67233-9.21985-12.0238-10.92407a23.48728,23.48728,0,0,0-27.00124,9.84786c-.40956.64393-1.66882,2.22585-1.63362,2.99427.04462.97592,1.53767,1.98358,2.28765,2.59886a33.53927,33.53927,0,0,0,5.98121,3.69167c7.8281,4.05838,5.22223,10.43637,5.116,17.66385-.05153,3.51224,1.121,6.51112,4.1159,8.51727,4.32224,2.89534,10.50791,1.74345,15.2108.58145,5.3364-1.31865,9.773-6.00656,12.81631-10.52662C914.20472,345.61491,915.8176,340.71788,915.1489,335.93858Z" fill="#a3a3a3" transform="translate(-256.84511 -196.31229)"/>
+ <polygon fill="#d4d4d4" points="658.087 215.476 676.547 306.933 649.333 308.422 658.087 215.476"/>
+ <path d="M933.99165,702.4877a1.19488,1.19488,0,0,1-1.18994,1.2H791.5019a1.195,1.195,0,0,1,0-2.39H932.80171A1.19269,1.19269,0,0,1,933.99165,702.4877Z" fill="#525252" transform="translate(-256.84511 -196.31229)"/>
 </svg>
-- 
2.49.1


From cd347ea072c1cba36833313ee38b36268960238e Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 15:40:01 +0100
Subject: [PATCH 205/428] feat: add illustrations to 404, error page, and
 welcome flow

- 404 page: replace large "404" text with page-not-found illustration
- ErrorDisplay: replace warning icon with server-down illustration
- Welcome step 1 (no orgs): welcome illustration
- Welcome step 4 (add site): website-setup illustration
- Welcome step 5 (done): confirmed illustration
All SVGs dark-themed with brand orange accent.
---
 app/not-found.tsx                       |  8 ++--
 app/welcome/page.tsx                    | 26 ++++++-----
 components/ErrorDisplay.tsx             | 10 ++---
 public/illustrations/confirmed.svg      | 21 +++++++++
 public/illustrations/page-not-found.svg | 38 ++++++++++++++++
 public/illustrations/server-down.svg    | 55 +++++++++++++++++++++++
 public/illustrations/website-setup.svg  | 36 +++++++++++++++
 public/illustrations/welcome.svg        | 59 +++++++++++++++++++++++++
 8 files changed, 234 insertions(+), 19 deletions(-)
 create mode 100644 public/illustrations/confirmed.svg
 create mode 100644 public/illustrations/page-not-found.svg
 create mode 100644 public/illustrations/server-down.svg
 create mode 100644 public/illustrations/website-setup.svg
 create mode 100644 public/illustrations/welcome.svg

diff --git a/app/not-found.tsx b/app/not-found.tsx
index 924cc99..90efa7c 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -14,9 +14,11 @@ export default function NotFound() {
       </div>
 
       <div className="text-center px-4 z-10">
-        <h1 className="text-9xl font-bold text-transparent bg-clip-text bg-gradient-to-b from-white to-neutral-500 mb-4">
-          404
-        </h1>
+        <img
+          src="/illustrations/page-not-found.svg"
+          alt="Page not found"
+          className="w-72 h-auto mx-auto mb-8"
+        />
         <h2 className="text-2xl font-bold text-white mb-6">
           Page not found
         </h2>
diff --git a/app/welcome/page.tsx b/app/welcome/page.tsx
index a61de13..b4c73b4 100644
--- a/app/welcome/page.tsx
+++ b/app/welcome/page.tsx
@@ -39,8 +39,6 @@ import {
   ArrowRightIcon,
   ArrowLeftIcon,
   BarChartIcon,
-  GlobeIcon,
-  ZapIcon,
   PlusIcon,
 } from '@ciphera-net/ui'
 import Link from 'next/link'
@@ -440,9 +438,11 @@ function WelcomeContent() {
                 </>
               ) : (
                 <div className="text-center">
-                  <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-brand-orange/10 text-brand-orange mb-6">
-                    <ZapIcon className="h-7 w-7" />
-                  </div>
+                  <img
+                    src="/illustrations/welcome.svg"
+                    alt="Welcome to Pulse"
+                    className="w-48 h-auto mx-auto mb-6"
+                  />
                   <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
                     Welcome to Pulse
                   </h1>
@@ -638,9 +638,11 @@ function WelcomeContent() {
                 Back
               </button>
               <div className="text-center mb-6">
-                <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-brand-orange/10 text-brand-orange mb-4">
-                  <GlobeIcon className="h-7 w-7" />
-                </div>
+                <img
+                  src="/illustrations/website-setup.svg"
+                  alt="Add your first site"
+                  className="w-44 h-auto mx-auto mb-4"
+                />
                 <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
                   Add your first site
                 </h1>
@@ -723,9 +725,11 @@ function WelcomeContent() {
               className={cardClass}
             >
               <div className="text-center">
-                <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-green-500/10 text-green-600 dark:text-green-400 mb-6">
-                  <CheckCircleIcon className="h-7 w-7" />
-                </div>
+                <img
+                  src="/illustrations/confirmed.svg"
+                  alt="All set"
+                  className="w-44 h-auto mx-auto mb-6"
+                />
                 <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
                   You're all set
                 </h1>
diff --git a/components/ErrorDisplay.tsx b/components/ErrorDisplay.tsx
index 6bed625..9ca2d01 100644
--- a/components/ErrorDisplay.tsx
+++ b/components/ErrorDisplay.tsx
@@ -30,11 +30,11 @@ export default function ErrorDisplay({
       </div>
 
       <div className="text-center px-4 z-10">
-        <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-red-100 dark:bg-red-900/30 mb-6">
-          <svg className="w-8 h-8 text-red-500" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
-          </svg>
-        </div>
+        <img
+          src="/illustrations/server-down.svg"
+          alt="Something went wrong"
+          className="w-56 h-auto mx-auto mb-8"
+        />
 
         <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">
           {title}
diff --git a/public/illustrations/confirmed.svg b/public/illustrations/confirmed.svg
new file mode 100644
index 0000000..64275bb
--- /dev/null
+++ b/public/illustrations/confirmed.svg
@@ -0,0 +1,21 @@
+<svg data-name="Layer 1" viewBox="0 0 505.46625 596.94537" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <path d="M706.73312,652.47268l5,96S500.239,547.178,473.89063,488.28153,497.13921,283.694,497.13921,283.694l110.04332,60.44633Z" fill="#9f616a" transform="translate(-347.26688 -151.52732)"/>
+ <path d="M382.44618,243.39641l-32.548,3.09981s-17.049,37.19774,35.64783,40.29756Z" fill="#9f616a" transform="translate(-347.26688 -151.52732)"/>
+ <path d="M382.44618,300.74293l-32.548,3.09981s-17.049,37.19774,35.64783,40.29755Z" fill="#9f616a" transform="translate(-347.26688 -151.52732)"/>
+ <path d="M382.44618,362.73916l-32.548,3.09981s-17.049,37.19774,35.64783,40.29756Z" fill="#9f616a" transform="translate(-347.26688 -151.52732)"/>
+ <path d="M391.74562,424.7354l-32.548,3.09981s-17.049,37.19774,35.64784,40.29755Z" fill="#9f616a" transform="translate(-347.26688 -151.52732)"/>
+ <path d="M366.60044,258.3401h2.46966V190.68455a39.15718,39.15718,0,0,1,39.15715-39.15723H551.56477a39.15718,39.15718,0,0,1,39.15726,39.1571V561.84816a39.15719,39.15719,0,0,1-39.15715,39.15723H408.22744a39.1572,39.1572,0,0,1-39.15731-39.15708V306.49848h-2.46969Z" fill="#d4d4d4" transform="translate(-347.26688 -151.52732)"/>
+ <path d="M406.64739,161.71467h18.71028a13.8929,13.8929,0,0,0,12.86292,19.13985h82.1162a13.89286,13.89286,0,0,0,12.86291-19.13987h17.47545a29.24215,29.24215,0,0,1,29.24218,29.24211V561.57589a29.24216,29.24216,0,0,1-29.24214,29.24218H406.64739a29.24216,29.24216,0,0,1-29.24218-29.24214h0V190.95679A29.24214,29.24214,0,0,1,406.64739,161.71467Z" fill="#262626" transform="translate(-347.26688 -151.52732)"/>
+ <rect fill="#FD5E0F" height="14.89247" style="isolation:isolate" width="61.71533" x="100.53673" y="114.01642"/>
+ <rect fill="#e5e5e5" height="14.89247" width="67.59164" x="97.59857" y="178.00873"/>
+ <rect fill="#e5e5e5" height="14.89247" width="150.85812" x="55.96534" y="209.9996"/>
+ <rect fill="#e5e5e5" height="14.89247" width="150.85812" x="55.96534" y="241.99047"/>
+ <path d="M852.73312,702.47268l-173.48-197.91713-6.19962-127.09228-65.096-108.49341-18.59887-46.49718s-43.39736,4.64972-7.74953,92.99435l14.72411,47.27213,0,0a216.67408,216.67408,0,0,0-20.14876,91.24394v108.3237c0,25.50678,121.55,164.44287,135.69866,185.6658l0,0Z" fill="#9f616a" transform="translate(-347.26688 -151.52732)"/>
+ <polygon opacity="0.2" points="247.195 126.636 260.136 120.276 259.695 119.378 247.738 125.255 229.688 77.932 228.754 78.289 247.195 126.636"/>
+ <rect height="20.43016" opacity="0.2" transform="translate(-346.65612 349.39987) rotate(-69.7779)" width="1.00012" x="358.98404" y="239.81058"/>
+ <rect height="20.43016" opacity="0.2" transform="translate(-401.08099 387.35158) rotate(-69.7779)" width="1.00012" x="358.98404" y="297.81058"/>
+ <rect height="20.43016" opacity="0.2" transform="translate(-459.25929 427.92066) rotate(-69.7779)" width="1.00012" x="358.98404" y="359.81058"/>
+ <rect height="10.35283" opacity="0.2" transform="translate(-528.7721 421.49849) rotate(-64.36101)" width="0.99981" x="364.06574" y="425.55799"/>
+ <circle cx="131.47081" cy="342.17535" fill="#FD5E0F" r="43.22999"/>
+ <polygon fill="#262626" points="127.351 360.424 114.413 343.787 121.937 337.935 128.063 345.812 148.76 323.964 155.681 330.521 127.351 360.424"/>
+</svg>
diff --git a/public/illustrations/page-not-found.svg b/public/illustrations/page-not-found.svg
new file mode 100644
index 0000000..3a6a605
--- /dev/null
+++ b/public/illustrations/page-not-found.svg
@@ -0,0 +1,38 @@
+<svg data-name="Layer 1" viewBox="0 0 860.13137 571.14799" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <path d="M605.66974,324.95306c-7.66934-12.68446-16.7572-26.22768-30.98954-30.36953-16.482-4.7965-33.4132,4.73193-47.77473,14.13453a1392.15692,1392.15692,0,0,0-123.89338,91.28311l.04331.49238q46.22556-3.1878,92.451-6.37554c22.26532-1.53546,45.29557-3.2827,64.97195-13.8156,7.46652-3.99683,14.74475-9.33579,23.20555-9.70782,10.51175-.46217,19.67733,6.87923,26.8802,14.54931,42.60731,45.371,54.937,114.75409,102.73817,154.61591A1516.99453,1516.99453,0,0,0,605.66974,324.95306Z" fill="#2a2a2a" transform="translate(-169.93432 -164.42601)"/>
+ <path d="M867.57068,709.78146c-4.71167-5.94958-6.6369-7.343-11.28457-13.34761q-56.7644-73.41638-106.70791-151.79237-33.92354-53.23-64.48275-108.50439-14.54864-26.2781-28.29961-52.96872-10.67044-20.6952-20.8646-41.63793c-1.94358-3.98782-3.8321-7.99393-5.71122-12.00922-4.42788-9.44232-8.77341-18.93047-13.43943-28.24449-5.31686-10.61572-11.789-21.74485-21.55259-28.877a29.40493,29.40493,0,0,0-15.31855-5.89458c-7.948-.51336-15.28184,2.76855-22.17568,6.35295-50.43859,26.301-97.65922,59.27589-140.3696,96.79771A730.77816,730.77816,0,0,0,303.32241,496.24719c-1.008,1.43927-3.39164.06417-2.37419-1.38422q6.00933-8.49818,12.25681-16.81288A734.817,734.817,0,0,1,500.80465,303.06436q18.24824-11.82581,37.18269-22.54245c6.36206-3.60275,12.75188-7.15967,19.25136-10.49653,6.37146-3.27274,13.13683-6.21547,20.41563-6.32547,24.7701-.385,37.59539,27.66695,46.40506,46.54248q4.15283,8.9106,8.40636,17.76626,16.0748,33.62106,33.38729,66.628,10.68453,20.379,21.83683,40.51955,34.7071,62.71816,73.77854,122.897c34.5059,53.1429,68.73651,100.08874,108.04585,149.78472C870.59617,709.21309,868.662,711.17491,867.57068,709.78146Z" fill="#404040" transform="translate(-169.93432 -164.42601)"/>
+ <path d="M414.91613,355.804c-1.43911-1.60428-2.86927-3.20856-4.31777-4.81284-11.42244-12.63259-23.6788-25.11847-39.3644-32.36067a57.11025,57.11025,0,0,0-23.92679-5.54622c-8.56213.02753-16.93178,2.27348-24.84306,5.41792-3.74034,1.49427-7.39831,3.1902-11.00078,4.99614-4.11634,2.07182-8.15927,4.28118-12.1834,6.50883q-11.33112,6.27044-22.36816,13.09089-21.9606,13.57221-42.54566,29.21623-10.67111,8.11311-20.90174,16.75788-9.51557,8.03054-18.64618,16.492c-1.30169,1.20091-3.24527-.74255-1.94358-1.94347,1.60428-1.49428,3.22691-2.97938,4.84955-4.44613q6.87547-6.21546,13.9712-12.19257,12.93921-10.91827,26.54851-20.99312,21.16293-15.67614,43.78288-29.22541,11.30361-6.76545,22.91829-12.96259c2.33794-1.24675,4.70318-2.466,7.09572-3.6211a113.11578,113.11578,0,0,1,16.86777-6.86632,60.0063,60.0063,0,0,1,25.476-2.50265,66.32706,66.32706,0,0,1,23.50512,8.1314c15.40091,8.60812,27.34573,21.919,38.97,34.90915C418.03337,355.17141,416.09875,357.12405,414.91613,355.804Z" fill="#404040" transform="translate(-169.93432 -164.42601)"/>
+ <path d="M730.47659,486.71092l36.90462-13.498,18.32327-6.70183c5.96758-2.18267,11.92082-4.66747,18.08988-6.23036a28.53871,28.53871,0,0,1,16.37356.20862,37.73753,37.73753,0,0,1,12.771,7.91666,103.63965,103.63965,0,0,1,10.47487,11.18643c3.98932,4.79426,7.91971,9.63877,11.86772,14.46706q24.44136,29.89094,48.56307,60.04134,24.12117,30.14991,47.91981,60.556,23.85681,30.48041,47.38548,61.21573,2.88229,3.76518,5.75966,7.53415c1.0598,1.38809,3.44949.01962,2.37472-1.38808Q983.582,650.9742,959.54931,620.184q-24.09177-30.86383-48.51647-61.46586-24.42421-30.60141-49.17853-60.93743-6.16706-7.55761-12.35445-15.09858c-3.47953-4.24073-6.91983-8.52718-10.73628-12.47427-7.00539-7.24516-15.75772-13.64794-26.23437-13.82166-6.15972-.10214-12.121,1.85248-17.844,3.92287-6.16968,2.232-12.32455,4.50571-18.48633,6.75941l-37.16269,13.59243-9.29067,3.3981c-1.64875.603-.93651,3.2619.73111,2.652Z" fill="#404040" transform="translate(-169.93432 -164.42601)"/>
+ <path d="M366.37741,334.52609c-18.75411-9.63866-42.77137-7.75087-60.00508,4.29119a855.84708,855.84708,0,0,1,97.37056,22.72581C390.4603,353.75916,380.07013,341.5635,366.37741,334.52609Z" fill="#2a2a2a" transform="translate(-169.93432 -164.42601)"/>
+ <path d="M306.18775,338.7841l-3.61042,2.93462c1.22123-1.02713,2.4908-1.99013,3.795-2.90144C306.31073,338.80665,306.24935,338.79473,306.18775,338.7841Z" fill="#2a2a2a" transform="translate(-169.93432 -164.42601)"/>
+ <path d="M831.54929,486.84576c-3.6328-4.42207-7.56046-9.05222-12.99421-10.84836l-5.07308.20008A575.436,575.436,0,0,0,966.74929,651.418Q899.14929,569.13192,831.54929,486.84576Z" fill="#2a2a2a" transform="translate(-169.93432 -164.42601)"/>
+ <path d="M516.08388,450.36652A37.4811,37.4811,0,0,0,531.015,471.32518c2.82017,1.92011,6.15681,3.76209,7.12158,7.03463a8.37858,8.37858,0,0,1-.87362,6.1499,24.88351,24.88351,0,0,1-3.86126,5.04137l-.13667.512c-6.99843-4.14731-13.65641-9.3934-17.52227-16.55115s-4.40553-16.53895.34116-23.14544" fill="#2a2a2a" transform="translate(-169.93432 -164.42601)"/>
+ <path d="M749.08388,653.36652A37.4811,37.4811,0,0,0,764.015,674.32518c2.82017,1.92011,6.15681,3.76209,7.12158,7.03463a8.37858,8.37858,0,0,1-.87362,6.1499,24.88351,24.88351,0,0,1-3.86126,5.04137l-.13667.512c-6.99843-4.14731-13.65641-9.3934-17.52227-16.55115s-4.40553-16.53895.34116-23.14544" fill="#2a2a2a" transform="translate(-169.93432 -164.42601)"/>
+ <path d="M284.08388,639.36652A37.4811,37.4811,0,0,0,299.015,660.32518c2.82017,1.92011,6.15681,3.76209,7.12158,7.03463a8.37858,8.37858,0,0,1-.87362,6.1499,24.88351,24.88351,0,0,1-3.86126,5.04137l-.13667.512c-6.99843-4.14731-13.65641-9.3934-17.52227-16.55115s-4.40553-16.53895.34116-23.14544" fill="#2a2a2a" transform="translate(-169.93432 -164.42601)"/>
+ <circle cx="649.24878" cy="51" fill="#FD5E0F" r="51"/>
+ <path d="M911.21851,176.29639c-24.7168-3.34094-52.93512,10.01868-59.34131,34.12353a21.59653,21.59653,0,0,0-41.09351,2.10871l2.82972,2.02667a372.27461,372.27461,0,0,0,160.65881-.72638C957.07935,195.76,935.93537,179.63727,911.21851,176.29639Z" fill="#2a2a2a" transform="translate(-169.93432 -164.42601)"/>
+ <path d="M805.21851,244.29639c-24.7168-3.34094-52.93512,10.01868-59.34131,34.12353a21.59653,21.59653,0,0,0-41.09351,2.10871l2.82972,2.02667a372.27461,372.27461,0,0,0,160.65881-.72638C851.07935,263.76,829.93537,247.63727,805.21851,244.29639Z" fill="#2a2a2a" transform="translate(-169.93432 -164.42601)"/>
+ <path d="M1020.94552,257.15423a.98189.98189,0,0,1-.30176-.04688C756.237,173.48919,523.19942,184.42376,374.26388,208.32122c-20.26856,3.251-40.59131,7.00586-60.40381,11.16113-5.05811,1.05957-10.30567,2.19532-15.59668,3.37793-6.31885,1.40723-12.55371,2.85645-18.53223,4.30567q-3.873.917-7.59472,1.84863c-3.75831.92773-7.57178,1.89453-11.65967,2.957-4.56787,1.17774-9.209,2.41309-13.79737,3.67188a.44239.44239,0,0,1-.05127.01465l.00049.001c-5.18261,1.415-10.33789,2.8711-15.32324,4.3252-2.69824.77929-5.30371,1.54785-7.79932,2.30664-.2788.07715-.52587.15136-.77636.22754l-.53614.16308c-.31054.09473-.61718.1875-.92382.27539l-.01953.00586.00048.001-.81152.252c-.96777.293-1.91211.5791-2.84082.86426-24.54492,7.56641-38.03809,12.94922-38.17139,13.00195a1,1,0,1,1-.74414-1.85644c.13428-.05274,13.69336-5.46289,38.32764-13.05762.93213-.28613,1.87891-.57226,2.84961-.86621l.7539-.23438c.02588-.00976.05176-.01757.07813-.02539.30518-.08691.60986-.17968.91943-.27343l.53711-.16309c.26758-.08105.53125-.16113.80127-.23535,2.47852-.75391,5.09278-1.52441,7.79785-2.30664,4.98731-1.45508,10.14746-2.91113,15.334-4.32813.01611-.00586.03271-.00976.04883-.01464v-.001c4.60449-1.2627,9.26269-2.50293,13.84521-3.68457,4.09424-1.06348,7.915-2.03223,11.67969-2.96192q3.73755-.93017,7.60937-1.85253c5.98536-1.45118,12.23291-2.90235,18.563-4.3125,5.29932-1.1836,10.55567-2.32227,15.62207-3.38282,19.84326-4.16211,40.19776-7.92285,60.49707-11.17871C523.09591,182.415,756.46749,171.46282,1021.2463,255.2011a.99974.99974,0,0,1-.30078,1.95313Z" fill="#525252" transform="translate(-169.93432 -164.42601)"/>
+ <path d="M432.92309,584.266a6.72948,6.72948,0,0,0-1.7-2.67,6.42983,6.42983,0,0,0-.92-.71c-2.61-1.74-6.51-2.13-8.99,0a5.81012,5.81012,0,0,0-.69.71q-1.11,1.365-2.28,2.67c-1.28,1.46-2.59,2.87-3.96,4.24-.39.38-.78.77-1.18,1.15-.23.23-.46.45-.69.67-.88.84-1.78,1.65-2.69,2.45-.48.43-.96.85-1.45,1.26-.73.61-1.46,1.22-2.2,1.81-.07.05-.14.1-.21.16-.02.01-.03.03-.05.04-.01,0-.02,0-.03.02a.17861.17861,0,0,0-.07.05c-.22.15-.37.25-.48.34.04-.01995.08-.05.12-.07-.18.14-.37.28-.55.42-1.75,1.29-3.54,2.53-5.37,3.69a99.21022,99.21022,0,0,1-14.22,7.55c-.33.13-.67.27-1.01.4a85.96993,85.96993,0,0,1-40.85,6.02q-2.13008-.165-4.26-.45c-1.64-.24-3.27-.53-4.89-.86a97.93186,97.93186,0,0,1-18.02-5.44,118.65185,118.65185,0,0,1-20.66-12.12c-1-.71-2.01-1.42-3.02-2.11,1.15-2.82,2.28-5.64,3.38-8.48.55-1.37,1.08-2.74,1.6-4.12,4.09-10.63,7.93-21.36,11.61-32.13q5.58-16.365,10.53-32.92.51-1.68.99-3.36,2.595-8.745,4.98-17.53c.15-.56994.31-1.12994.45-1.7q.68994-2.52,1.35-5.04c1-3.79-1.26-8.32-5.24-9.23a7.63441,7.63441,0,0,0-9.22,5.24c-.43,1.62-.86,3.23-1.3,4.85q-3.165,11.74494-6.66,23.41-.51,1.68-1.02,3.36-7.71,25.41-16.93,50.31-1.11,3.015-2.25,6.01c-.37.98-.74,1.96-1.12,2.94-.73,1.93-1.48,3.86-2.23,5.79-.43006,1.13-.87006,2.26-1.31,3.38-.29.71-.57,1.42-.85,2.12a41.80941,41.80941,0,0,0-8.81-2.12l-.48-.06a27.397,27.397,0,0,0-7.01.06,23.91419,23.91419,0,0,0-17.24,10.66c-4.77,7.51-4.71,18.25,1.98,24.63,6.89,6.57,17.32,6.52,25.43,2.41a28.35124,28.35124,0,0,0,10.52-9.86,50.56939,50.56939,0,0,0,2.74-4.65c.21.14.42.28.63.43.8.56,1.6,1.13,2.39,1.69a111.73777,111.73777,0,0,0,14.51,8.91,108.35887,108.35887,0,0,0,34.62,10.47c.27.03.53.07.8.1,1.33.17,2.67.3,4.01.41a103.78229,103.78229,0,0,0,55.58-11.36q2.175-1.125,4.31-2.36,3.315-1.92,6.48-4.08c1.15-.78,2.27-1.57,3.38-2.4a101.04244,101.04244,0,0,0,13.51-11.95q2.35491-2.475,4.51-5.11005a8.0612,8.0612,0,0,0,2.2-5.3A7.5644,7.5644,0,0,0,432.92309,584.266Zm-165.59,23.82c.21-.15.42-.31.62-.47C267.89312,607.766,267.60308,607.936,267.33312,608.086Zm3.21-3.23c-.23.26-.44.52-.67.78a23.36609,23.36609,0,0,1-2.25,2.2c-.11.1-.23.2-.35.29a.00976.00976,0,0,0-.01.01,3.80417,3.80417,0,0,0-.42005.22q-.645.39-1.31994.72a17.00459,17.00459,0,0,1-2.71.75,16.79925,16.79925,0,0,1-2.13.02h-.02a14.82252,14.82252,0,0,1-1.45-.4c-.24-.12-.47-.25994-.7-.4-.09-.08-.17005-.16-.22-.21a2.44015,2.44015,0,0,1-.26995-.29.0098.0098,0,0,0-.01-.01c-.11005-.2-.23005-.4-.34-.6a.031.031,0,0,1-.01-.02c-.08-.25-.15-.51-.21-.77a12.51066,12.51066,0,0,1,.01-1.37,13.4675,13.4675,0,0,1,.54-1.88,11.06776,11.06776,0,0,1,.69-1.26c.02-.04.12-.2.23-.38.01-.01.01-.01.01-.02.15-.17.3-.35.46-.51.27-.3.56-.56.85-.83a18.02212,18.02212,0,0,1,1.75-1.01,19.48061,19.48061,0,0,1,2.93-.79,24.98945,24.98945,0,0,1,4.41.04,30.30134,30.30134,0,0,1,4.1,1.01,36.94452,36.94452,0,0,1-2.77,4.54C270.6231,604.746,270.58312,604.806,270.54308,604.856Zm-11.12-3.29a2.18029,2.18029,0,0,1-.31.38995A1.40868,1.40868,0,0,1,259.42309,601.566Z" fill="#d4d4d4" transform="translate(-169.93432 -164.42601)"/>
+ <path d="M402.86309,482.136q-.13494,4.71-.27,9.42-.285,10.455-.59,20.92-.315,11.775-.66,23.54-.165,6.07507-.34,12.15-.465,16.365-.92,32.72c-.03,1.13-.07,2.25-.1,3.38q-.225,8.11506-.45,16.23-.255,8.805-.5,17.61-.18,6.59994-.37,13.21-1.34994,47.895-2.7,95.79a7.64844,7.64844,0,0,1-7.5,7.5,7.56114,7.56114,0,0,1-7.5-7.5q.75-26.94,1.52-53.88.675-24.36,1.37-48.72.225-8.025.45-16.06.345-12.09.68-24.18c.03-1.13.07-2.25.1-3.38.02-.99.05-1.97.08-2.96q.66-23.475,1.32-46.96.27-9.24.52-18.49.3-10.545.6-21.08c.09-3.09.17005-6.17.26-9.26a7.64844,7.64844,0,0,1,7.5-7.5A7.56116,7.56116,0,0,1,402.86309,482.136Z" fill="#d4d4d4" transform="translate(-169.93432 -164.42601)"/>
+ <path d="M814.29118,484.2172a893.23753,893.23753,0,0,1-28.16112,87.94127c-3.007,7.94641-6.08319,15.877-9.3715,23.71185l.75606-1.7916a54.58274,54.58274,0,0,1-5.58953,10.61184q-.22935.32119-.46685.63642,1.16559-1.49043.4428-.589c-.25405.30065-.5049.60219-.7676.89546a23.66436,23.66436,0,0,1-2.2489,2.20318q-.30139.25767-.61188.5043l.93783-.729c-.10884.25668-.87275.59747-1.11067.74287a18.25362,18.25362,0,0,1-2.40479,1.21853l1.7916-.75606a19.0859,19.0859,0,0,1-4.23122,1.16069l1.9938-.26791a17.02055,17.02055,0,0,1-4.29785.046l1.99379.2679a14.0022,14.0022,0,0,1-3.40493-.917l1.79159.75606a12.01175,12.01175,0,0,1-1.67882-.89614c-.27135-.17688-1.10526-.80852-.01487.02461,1.13336.86595.14562.07434-.08763-.15584-.19427-.19171-.36962-.4-.55974-.595-.88208-.90454.99637,1.55662.39689.49858a18.18179,18.18179,0,0,1-.87827-1.63672l.75606,1.7916a11.92493,11.92493,0,0,1-.728-2.65143l.26791,1.9938a13.65147,13.65147,0,0,1-.00316-3.40491l-.2679,1.9938a15.96371,15.96371,0,0,1,.99486-3.68011l-.75606,1.7916a16.72914,16.72914,0,0,1,1.17794-2.29848,6.72934,6.72934,0,0,1,.72851-1.0714c.04915.01594-1.26865,1.51278-.56937.757.1829-.19767.354-.40592.539-.602.29617-.31382.61354-.60082.92561-.89791,1.04458-.99442-1.46188.966-.25652.17907a19.0489,19.0489,0,0,1,2.74925-1.49923l-1.79159.75606a20.31136,20.31136,0,0,1,4.99523-1.33984l-1.9938.2679a25.62828,25.62828,0,0,1,6.46062.07647l-1.9938-.2679a33.21056,33.21056,0,0,1,7.89178,2.2199l-1.7916-.75606c5.38965,2.31383,10.16308,5.74926,14.928,9.118a111.94962,111.94962,0,0,0,14.50615,8.9065,108.38849,108.38849,0,0,0,34.62226,10.47371,103.93268,103.93268,0,0,0,92.58557-36.75192,8.07773,8.07773,0,0,0,2.1967-5.3033,7.63232,7.63232,0,0,0-2.1967-5.3033c-2.75154-2.52586-7.94926-3.239-10.6066,0a95.63575,95.63575,0,0,1-8.10664,8.72692q-2.01736,1.914-4.14232,3.70983-1.21364,1.02588-2.46086,2.01121c-.3934.31081-1.61863,1.13807.26309-.19744-.43135.30614-.845.64036-1.27058.95478a99.26881,99.26881,0,0,1-20.33215,11.56478l1.79159-.75606a96.8364,96.8364,0,0,1-24.17119,6.62249l1.99379-.2679a97.64308,97.64308,0,0,1-25.75362-.03807l1.99379.2679a99.79982,99.79982,0,0,1-24.857-6.77027l1.7916.75607a116.02515,116.02515,0,0,1-21.7364-12.59112,86.87725,86.87725,0,0,0-11.113-6.99417,42.8238,42.8238,0,0,0-14.43784-4.38851c-9.43884-1.11076-19.0571,2.56562-24.24624,10.72035-4.77557,7.50482-4.71394,18.24362,1.97369,24.62519,6.8877,6.5725,17.31846,6.51693,25.43556,2.40567,7.81741-3.95946,12.51288-12.18539,15.815-19.94186,7.43109-17.45514,14.01023-35.31364,20.1399-53.263q9.09651-26.63712,16.49855-53.81332.91661-3.36581,1.80683-6.73869c1.001-3.78869-1.26094-8.32-5.23829-9.22589a7.63317,7.63317,0,0,0-9.22589,5.23829Z" fill="#d4d4d4" transform="translate(-169.93432 -164.42601)"/>
+ <path d="M889.12382,482.13557l-2.69954,95.79311-2.68548,95.29418-1.5185,53.88362a7.56465,7.56465,0,0,0,7.5,7.5,7.64923,7.64923,0,0,0,7.5-7.5l2.69955-95.79311,2.68548-95.29418,1.51849-53.88362a7.56465,7.56465,0,0,0-7.5-7.5,7.64923,7.64923,0,0,0-7.5,7.5Z" fill="#d4d4d4" transform="translate(-169.93432 -164.42601)"/>
+ <path d="M629.52566,700.36106h2.32885V594.31942h54.32863v-2.32291H631.85451V547.25214H673.8102q-.92256-1.17339-1.89893-2.31694H631.85451V515.38231c-.7703-.32846-1.54659-.64493-2.32885-.9435V544.9352h-45.652V507.07c-.78227.03583-1.55258.08959-2.3289.15527v37.71h-36.4201V516.68409c-.78227.34636-1.55258.71061-2.31694,1.0928V544.9352h-30.6158v2.31694h30.6158v44.74437h-30.6158v2.32291h30.6158V700.36106h2.31694V594.31942a36.41283,36.41283,0,0,1,36.4201,36.42007v69.62157h2.3289V594.31942h45.652Zm-84.401-108.36455V547.25214h36.4201v44.74437Zm38.749,0V547.25214h.91362a44.74135,44.74135,0,0,1,44.73842,44.74437Z" opacity="0.2" transform="translate(-169.93432 -164.42601)"/>
+ <path d="M615.30309,668.566a63.05854,63.05854,0,0,1-20.05,33.7c-.74.64-1.48,1.26-2.25,1.87q-2.805.25506-5.57.52c-1.53.14-3.04.29-4.54.43l-.27.03-.19-1.64-.76-6.64a37.623,37.623,0,0,1-3.3-32.44c2.64-7.12,7.42-13.41,12.12-19.65,6.49-8.62,12.8-17.14,13.03-27.65a60.54415,60.54415,0,0,1,7.9,13.33,16.432,16.432,0,0,0-5.12,3.76995c-.41.45-.82,1.08-.54,1.62006.24.46.84.57,1.36.62994,1.25.13,2.51.26,3.76.39,1,.11,2,.21,3,.32a63.99025,63.99025,0,0,1,2.45,12.18A61.18851,61.18851,0,0,1,615.30309,668.566Z" fill="#d4d4d4" transform="translate(-169.93432 -164.42601)"/>
+ <path d="M648.50311,642.356c-5.9,4.29-9.35,10.46-12.03,17.26a16.62776,16.62776,0,0,0-7.17,4.58c-.41.45-.82,1.08-.54,1.62006.24.46.84.57,1.36.62994,1.25.13,2.51.26,3.76.39-2.68,8.04-5.14,16.36-9.88,23.15a36.98942,36.98942,0,0,1-12.03,10.91,38.49166,38.49166,0,0,1-4.02,1.99q-7.62.585-14.95,1.25-2.805.25506-5.57.52c-1.53.14-3.04.29-4.54.43q-.015-.825,0-1.65a63.30382,63.30382,0,0,1,15.25-39.86c.45-.52.91-1.03,1.38-1.54a61.7925,61.7925,0,0,1,16.81-12.7A62.65425,62.65425,0,0,1,648.50311,642.356Z" fill="#FD5E0F" transform="translate(-169.93432 -164.42601)"/>
+ <path d="M589.16308,699.526l-1.15,3.4-.58,1.73c-1.53.14-3.04.29-4.54.43l-.27.03c-1.66.17-3.31.34-4.96.51-.43-.5-.86-1.01-1.28-1.53a62.03045,62.03045,0,0,1,8.07-87.11c-1.32,6.91.22,13.53,2.75,20.1-.27.11-.53.22-.78.34a16.432,16.432,0,0,0-5.12,3.76995c-.41.45-.82,1.08-.54,1.62006.24.46.84.57,1.36.62994,1.25.13,2.51.26,3.76.39,1,.11,2,.21,3,.32q.705.075,1.41.15c.07.15.13.29.2.44,2.85,6.18,5.92,12.39,7.65,18.83a43.66591,43.66591,0,0,1,1.02,4.91A37.604,37.604,0,0,1,589.16308,699.526Z" fill="#FD5E0F" transform="translate(-169.93432 -164.42601)"/>
+ <path d="M689.82123,554.48655c-8.60876-16.79219-21.94605-30.92088-37.63219-41.30357a114.2374,114.2374,0,0,0-52.5626-18.37992q-3.69043-.33535-7.399-.39281c-2.92141-.04371-46.866,12.63176-61.58712,22.98214a114.29462,114.29462,0,0,0-35.333,39.527,102.49972,102.49972,0,0,0-12.12557,51.6334,113.56387,113.56387,0,0,0,14.70268,51.47577,110.47507,110.47507,0,0,0,36.44425,38.74592C549.66655,708.561,565.07375,734.51,583.1831,735.426c18.24576.923,39.05418-23.55495,55.6951-30.98707a104.42533,104.42533,0,0,0,41.72554-34.005,110.24964,110.24964,0,0,0,19.599-48.94777c2.57368-18.08313,1.37415-36.73271-4.80123-54.01627a111.85969,111.85969,0,0,0-5.58024-12.9833c-1.77961-3.50519-6.996-4.7959-10.26142-2.69063a7.67979,7.67979,0,0,0-2.69064,10.26142q1.56766,3.08773,2.91536,6.27758l-.75606-1.7916a101.15088,101.15088,0,0,1,6.87641,25.53816l-.26791-1.99379a109.2286,109.2286,0,0,1-.06613,28.68252l.26791-1.9938a109.73379,109.73379,0,0,1-7.55462,27.67419l.75606-1.79159a104.212,104.212,0,0,1-6.67151,13.09835q-1.92308,3.18563-4.08062,6.22159c-.63172.8881-1.28287,1.761-1.939,2.63114-.85625,1.13555,1.16691-1.48321.28228-.36941-.15068.18972-.30049.3801-.45182.5693q-.68121.85165-1.3818,1.68765a93.61337,93.61337,0,0,1-10.17647,10.38359q-1.36615,1.19232-2.77786,2.33115c-.46871.37832-.932.77269-1.42079,1.12472.01861-.0134,1.57956-1.19945.65556-.511-.2905.21644-.57851.43619-.86961.65184q-2.90994,2.1558-5.97433,4.092a103.48509,103.48509,0,0,1-14.75565,7.7131l1.7916-.75606a109.21493,109.21493,0,0,1-27.59663,7.55154l1.9938-.26791a108.15361,108.15361,0,0,1-28.58907.0506l1.99379.2679a99.835,99.835,0,0,1-25.09531-6.78448l1.79159.75607a93.64314,93.64314,0,0,1-13.41605-6.99094q-3.17437-2-6.18358-4.24743c-.2862-.21359-.56992-.43038-.855-.64549-.9155-.69088.65765.50965.67021.51787a19.16864,19.16864,0,0,1-1.535-1.22469q-1.45353-1.18358-2.86136-2.4218a101.98931,101.98931,0,0,1-10.49319-10.70945q-1.21308-1.43379-2.37407-2.91054c-.33524-.4263-.9465-1.29026.40424.5289-.17775-.23939-.36206-.47414-.54159-.71223q-.64657-.85751-1.27568-1.72793-2.203-3.048-4.18787-6.24586a109.29037,109.29037,0,0,1-7.8054-15.10831l.75606,1.7916a106.58753,106.58753,0,0,1-7.34039-26.837l.26791,1.9938a97.86589,97.86589,0,0,1-.04843-25.63587l-.2679,1.9938A94.673,94.673,0,0,1,505.27587,570.55l-.75606,1.7916a101.55725,101.55725,0,0,1,7.19519-13.85624q2.0655-3.32328,4.37767-6.4847.52528-.71832,1.06244-1.42786c.324-.4279,1.215-1.49333-.30537.38842.14906-.18449.29252-.37428.43942-.56041q1.26882-1.60756,2.59959-3.1649A107.40164,107.40164,0,0,1,530.772,536.21508q1.47408-1.29171,2.99464-2.52906.6909-.56218,1.39108-1.11284c.18664-.14673.37574-.29073.56152-.43858-1.99743,1.58953-.555.43261-.10157.09288q3.13393-2.34833,6.43534-4.46134a103.64393,103.64393,0,0,1,15.38655-8.10791l-1.7916.75606c7.76008-3.25839,42.14086-10.9492,48.394-10.10973l-1.99379-.26791A106.22471,106.22471,0,0,1,628.768,517.419l-1.7916-.75606a110.31334,110.31334,0,0,1,12.6002,6.32922q3.04344,1.78405,5.96742,3.76252,1.38351.93658,2.73809,1.915.677.48917,1.34626.98885c.24789.185.49386.37253.74135.558,1.03924.779-1.43148-1.1281-.34209-.26655a110.84261,110.84261,0,0,1,10.36783,9.2532q2.401,2.445,4.63686,5.04515,1.14659,1.33419,2.24643,2.70757c.36436.45495,1.60506,2.101.08448.08457.37165.49285.74744.98239,1.11436,1.47884a97.97718,97.97718,0,0,1,8.39161,13.53807c1.79317,3.49775,6.98675,4.80186,10.26142,2.69064A7.67666,7.67666,0,0,0,689.82123,554.48655Z" fill="#d4d4d4" transform="translate(-169.93432 -164.42601)"/>
+ <path d="M602.43116,676.88167a3.77983,3.77983,0,0,1-2.73939-6.55137c.09531-.37882.16368-.65085.259-1.02968q-.05115-.12366-.1029-.24717c-3.47987-8.29769-25.685,14.83336-26.645,22.63179a30.029,30.029,0,0,0,.52714,10.32752A120.39223,120.39223,0,0,1,562.77838,652.01a116.20247,116.20247,0,0,1,.72078-12.96332q.59712-5.293,1.65679-10.51055a121.78667,121.78667,0,0,1,24.1515-51.61646c6.87378.38364,12.898-.66348,13.47967-13.98532.10346-2.36972,1.86113-4.42156,2.24841-6.756-.65621.08607-1.32321.13985-1.97941.18285-.20444.0107-.41958.02149-.624.03228l-.07709.00346a3.745,3.745,0,0,1-3.07566-6.10115q.425-.52305.85054-1.04557c.43036-.53793.87143-1.06507,1.30171-1.60292a1.865,1.865,0,0,0,.13986-.16144c.49494-.61322.98971-1.21564,1.48465-1.82885a10.82911,10.82911,0,0,0-3.55014-3.43169c-4.95941-2.90463-11.80146-.89293-15.38389,3.59313-3.59313,4.486-4.27083,10.77947-3.023,16.3843a43.39764,43.39764,0,0,0,6.003,13.3828c-.269.34429-.54872.67779-.81765,1.02209a122.57366,122.57366,0,0,0-12.79359,20.2681c1.0163-7.93863-11.41159-36.60795-16.21776-42.68052-5.773-7.29409-17.61108-4.11077-18.62815,5.13562q-.01476.13428-.02884.26849,1.07082.60411,2.0964,1.28237a5.12707,5.12707,0,0,1-2.06713,9.33031l-.10452.01613c-9.55573,13.64367,21.07745,49.1547,28.74518,41.18139a125.11045,125.11045,0,0,0-6.73449,31.69282,118.66429,118.66429,0,0,0,.08607,19.15986l-.03231-.22593C558.90163,648.154,529.674,627.51374,521.139,629.233c-4.91675.99041-9.75952.76525-9.01293,5.72484q.01788.11874.03635.2375a34.4418,34.4418,0,0,1,3.862,1.86105q1.07082.60423,2.09639,1.28237a5.12712,5.12712,0,0,1-2.06712,9.33039l-.10464.01606c-.07528.01079-.13987.02157-.21507.03237-4.34967,14.96631,27.90735,39.12,47.5177,31.43461h.01081a125.07484,125.07484,0,0,0,8.402,24.52806H601.679c.10765-.3335.20443-.67779.3013-1.01129a34.102,34.102,0,0,1-8.30521-.49477c2.22693-2.73257,4.45377-5.48664,6.6807-8.21913a1.86122,1.86122,0,0,0,.13986-.16135c1.12956-1.39849,2.26992-2.78627,3.39948-4.18476l.00061-.00173a49.95232,49.95232,0,0,0-1.46367-12.72495Zm-34.37066-67.613.0158-.02133-.0158.04282Zm-6.64832,59.93237-.25822-.58084c.01079-.41957.01079-.83914,0-1.26942,0-.11845-.0215-.23672-.0215-.35508.09678.74228.18285,1.48464.29042,2.22692Z" fill="#d4d4d4" transform="translate(-169.93432 -164.42601)"/>
+ <circle cx="95.24878" cy="439" fill="#d4d4d4" r="11"/>
+ <circle cx="227.24878" cy="559" fill="#d4d4d4" r="11"/>
+ <circle cx="728.24878" cy="559" fill="#d4d4d4" r="11"/>
+ <circle cx="755.24878" cy="419" fill="#d4d4d4" r="11"/>
+ <circle cx="723.24878" cy="317" fill="#d4d4d4" r="11"/>
+ <path d="M434.1831,583.426a10.949,10.949,0,1,1-.21-2.16A10.9921,10.9921,0,0,1,434.1831,583.426Z" fill="#d4d4d4" transform="translate(-169.93432 -164.42601)"/>
+ <circle cx="484.24878" cy="349" fill="#d4d4d4" r="11"/>
+ <path d="M545.1831,513.426a10.949,10.949,0,1,1-.21-2.16A10.9921,10.9921,0,0,1,545.1831,513.426Z" fill="#d4d4d4" transform="translate(-169.93432 -164.42601)"/>
+ <path d="M403.1831,481.426a10.949,10.949,0,1,1-.21-2.16A10.9921,10.9921,0,0,1,403.1831,481.426Z" fill="#d4d4d4" transform="translate(-169.93432 -164.42601)"/>
+ <circle cx="599.24878" cy="443" fill="#d4d4d4" r="11"/>
+ <circle cx="426.24878" cy="338" fill="#d4d4d4" r="16"/>
+ <path d="M1028.875,735.26666l-857.75.30733a1.19068,1.19068,0,1,1,0-2.38136l857.75-.30734a1.19069,1.19069,0,0,1,0,2.38137Z" fill="#525252" transform="translate(-169.93432 -164.42601)"/>
+</svg>
diff --git a/public/illustrations/server-down.svg b/public/illustrations/server-down.svg
new file mode 100644
index 0000000..fe0900b
--- /dev/null
+++ b/public/illustrations/server-down.svg
@@ -0,0 +1,55 @@
+<svg data-name="Layer 1" viewBox="0 0 1119.60911 699" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>
+  server down
+ </title>
+ <circle cx="292.60911" cy="213" fill="#2a2a2a" r="213"/>
+ <path d="M31.39089,151.64237c0,77.49789,48.6181,140.20819,108.70073,140.20819" fill="#a3a3a3" transform="translate(-31.39089 -100.5)"/>
+ <path d="M140.09162,291.85056c0-78.36865,54.255-141.78356,121.30372-141.78356" fill="#FD5E0F" transform="translate(-31.39089 -100.5)"/>
+ <path d="M70.77521,158.66768c0,73.61476,31.00285,133.18288,69.31641,133.18288" fill="#FD5E0F" transform="translate(-31.39089 -100.5)"/>
+ <path d="M140.09162,291.85056c0-100.13772,62.7103-181.16788,140.20819-181.16788" fill="#a3a3a3" transform="translate(-31.39089 -100.5)"/>
+ <path d="M117.22379,292.83905s15.41555-.47479,20.06141-3.783,23.713-7.2585,24.86553-1.95278,23.16671,26.38821,5.76263,26.5286-40.43935-2.711-45.07627-5.53549S117.22379,292.83905,117.22379,292.83905Z" fill="#a8a8a8" transform="translate(-31.39089 -100.5)"/>
+ <path d="M168.224,311.78489c-17.40408.14042-40.43933-2.71094-45.07626-5.53548-3.53126-2.151-4.93843-9.86945-5.40926-13.43043-.32607.014-.51463.02-.51463.02s.97638,12.43276,5.61331,15.2573,27.67217,5.67589,45.07626,5.53547c5.02386-.04052,6.7592-1.82793,6.66391-4.47526C173.87935,310.756,171.96329,311.75474,168.224,311.78489Z" opacity="0.2" transform="translate(-31.39089 -100.5)"/>
+ <ellipse cx="198.60911" cy="424.5" fill="#d4d4d4" rx="187" ry="25.43993"/>
+ <ellipse cx="198.60911" cy="424.5" opacity="0.1" rx="157" ry="21.35866"/>
+ <ellipse cx="836.60911" cy="660.5" fill="#d4d4d4" rx="283" ry="38.5"/>
+ <ellipse cx="310.60911" cy="645.5" fill="#d4d4d4" rx="170" ry="23.12721"/>
+ <path d="M494,726.5c90,23,263-30,282-90" fill="none" stroke="#a3a3a3" stroke-miterlimit="10" stroke-width="2" transform="translate(-31.39089 -100.5)"/>
+ <path d="M341,359.5s130-36,138,80-107,149-17,172" fill="none" stroke="#a3a3a3" stroke-miterlimit="10" stroke-width="2" transform="translate(-31.39089 -100.5)"/>
+ <path d="M215.40233,637.78332s39.0723-10.82,41.47675,24.04449-32.15951,44.78287-5.10946,51.69566" fill="none" stroke="#a3a3a3" stroke-miterlimit="10" stroke-width="2" transform="translate(-31.39089 -100.5)"/>
+ <path d="M810.09554,663.73988,802.218,714.03505s-38.78182,20.60284-11.51335,21.20881,155.73324,0,155.73324,0,24.84461,0-14.54318-21.81478l-7.87756-52.719Z" fill="#a3a3a3" transform="translate(-31.39089 -100.5)"/>
+ <path d="M785.21906,734.69812c6.193-5.51039,16.9989-11.252,16.9989-11.252l7.87756-50.2952,113.9216.10717,7.87756,49.582c9.185,5.08711,14.8749,8.987,18.20362,11.97818,5.05882-1.15422,10.58716-5.44353-18.20362-21.38921l-7.87756-52.719-113.9216,3.02983L802.218,714.03506S769.62985,731.34968,785.21906,734.69812Z" opacity="0.1" transform="translate(-31.39089 -100.5)"/>
+ <rect fill="#a3a3a3" height="357.51989" rx="18.04568" width="513.25314" x="578.43291" y="212.68859"/>
+ <rect fill="#d4d4d4" height="267.83694" width="478.71308" x="595.70294" y="231.77652"/>
+ <circle cx="835.05948" cy="223.29299" fill="#2a2a2a" r="3.02983"/>
+ <path d="M1123.07694,621.32226V652.6628a18.04341,18.04341,0,0,1-18.04568,18.04568H627.86949A18.04341,18.04341,0,0,1,609.8238,652.6628V621.32226Z" fill="#a3a3a3" transform="translate(-31.39089 -100.5)"/>
+ <polygon fill="#a3a3a3" points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 651.452 645.651 962.312 645.651 968.978 667.466"/>
+ <path d="M1125.828,762.03359c-.59383,2.539-2.83591,5.21743-7.90178,7.75032-18.179,9.08949-55.1429-2.42386-55.1429-2.42386s-28.4804-4.84773-28.4804-17.573a22.72457,22.72457,0,0,1,2.49658-1.48459c7.64294-4.04351,32.98449-14.02122,77.9177.42248a18.73921,18.73921,0,0,1,8.54106,5.59715C1125.07908,756.45353,1126.50669,759.15715,1125.828,762.03359Z" fill="#a3a3a3" transform="translate(-31.39089 -100.5)"/>
+ <path d="M1125.828,762.03359c-22.251,8.526-42.0843,9.1622-62.43871-4.975-10.26507-7.12617-19.59089-8.88955-26.58979-8.75618,7.64294-4.04351,32.98449-14.02122,77.9177.42248a18.73921,18.73921,0,0,1,8.54106,5.59715C1125.07908,756.45353,1126.50669,759.15715,1125.828,762.03359Z" opacity="0.1" transform="translate(-31.39089 -100.5)"/>
+ <ellipse cx="1066.53846" cy="654.13477" fill="#2a2a2a" rx="7.87756" ry="2.42386"/>
+ <circle cx="835.05948" cy="545.66686" fill="#2a2a2a" r="11.51335"/>
+ <polygon opacity="0.1" points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 968.978 667.466"/>
+ <rect fill="#a3a3a3" height="242" width="208" x="108.60911" y="159"/>
+ <rect fill="#d4d4d4" height="86" width="250" x="87.60911" y="135"/>
+ <rect fill="#d4d4d4" height="86" width="250" x="87.60911" y="237"/>
+ <rect fill="#d4d4d4" height="86" width="250" x="87.60911" y="339"/>
+ <rect fill="#FD5E0F" height="16" opacity="0.4" width="16" x="271.60911" y="150"/>
+ <rect fill="#FD5E0F" height="16" opacity="0.8" width="16" x="294.60911" y="150"/>
+ <rect fill="#FD5E0F" height="16" width="16" x="317.60911" y="150"/>
+ <rect fill="#FD5E0F" height="16" opacity="0.4" width="16" x="271.60911" y="251"/>
+ <rect fill="#FD5E0F" height="16" opacity="0.8" width="16" x="294.60911" y="251"/>
+ <rect fill="#FD5E0F" height="16" width="16" x="317.60911" y="251"/>
+ <rect fill="#FD5E0F" height="16" opacity="0.4" width="16" x="271.60911" y="352"/>
+ <rect fill="#FD5E0F" height="16" opacity="0.8" width="16" x="294.60911" y="352"/>
+ <rect fill="#FD5E0F" height="16" width="16" x="317.60911" y="352"/>
+ <circle cx="316.60911" cy="538" fill="#a3a3a3" r="79"/>
+ <rect fill="#a3a3a3" height="43" width="24" x="280.60911" y="600"/>
+ <rect fill="#a3a3a3" height="43" width="24" x="328.60911" y="600"/>
+ <ellipse cx="300.60911" cy="643.5" fill="#a3a3a3" rx="20" ry="7.5"/>
+ <ellipse cx="348.60911" cy="642.5" fill="#a3a3a3" rx="20" ry="7.5"/>
+ <circle cx="318.60911" cy="518" fill="#262626" r="27"/>
+ <circle cx="318.60911" cy="518" fill="#d4d4d4" r="9"/>
+ <path d="M271.36733,565.03228c-6.37889-28.56758,14.01185-57.43392,45.544-64.47477s62.2651,10.41,68.644,38.9776-14.51861,39.10379-46.05075,46.14464S277.74622,593.59986,271.36733,565.03228Z" fill="#FD5E0F" transform="translate(-31.39089 -100.5)"/>
+ <ellipse cx="417.21511" cy="611.34365" fill="#a3a3a3" rx="39.5" ry="12.40027" transform="translate(-238.28665 112.98044) rotate(-23.17116)"/>
+ <ellipse cx="269.21511" cy="664.34365" fill="#a3a3a3" rx="39.5" ry="12.40027" transform="translate(-271.07969 59.02084) rotate(-23.17116)"/>
+ <path d="M394,661.5c0,7.732-19.90861,23-42,23s-43-14.268-43-22,20.90861-6,43-6S394,653.768,394,661.5Z" fill="#262626" transform="translate(-31.39089 -100.5)"/>
+</svg>
diff --git a/public/illustrations/website-setup.svg b/public/illustrations/website-setup.svg
new file mode 100644
index 0000000..9b6548b
--- /dev/null
+++ b/public/illustrations/website-setup.svg
@@ -0,0 +1,36 @@
+<svg data-name="Layer 1" viewBox="0 0 842.16979 568.85227" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <path d="M716.621,734.1684v-72.34S744.81264,713.11437,716.621,734.1684Z" fill="#f1f1f1" transform="translate(-178.45119 -165.31613)"/>
+ <path d="M718.36244,734.15568l-53.28962-48.92125S721.918,699.15,718.36244,734.15568Z" fill="#f1f1f1" transform="translate(-178.45119 -165.31613)"/>
+ <rect data-name="Rectangle 62" fill="#e5e5e5" height="399.45384" id="f54375ad-557d-4249-95e2-413e25c77bd8" width="841.81084" x="0.35895" y="23.0788"/>
+ <rect data-name="Rectangle 75" fill="#262626" height="333.27683" id="eb84611c-d49d-4ce2-b538-4fee0a7e188d" width="793.66829" x="24.43081" y="57.33267"/>
+ <rect data-name="Rectangle 80" fill="#FD5E0F" height="35.76263" id="a33b5263-04c3-449f-a8ad-1420252c1e48" width="841.81084"/>
+ <circle cx="26.57607" cy="17.81511" data-name="Ellipse 90" fill="#262626" id="a01a8c4b-bf8b-4728-9381-d6cbaed15ee5" r="6.62847"/>
+ <circle cx="51.73556" cy="17.81511" data-name="Ellipse 91" fill="#262626" id="a70f271b-ee75-4447-9507-72af025f0784" r="6.62847"/>
+ <circle cx="76.89622" cy="17.81511" data-name="Ellipse 92" fill="#262626" id="b6ae4294-4107-4abd-ba05-1d458fcbc8d7" r="6.62847"/>
+ <path d="M332.91148,298.51922a3.268,3.268,0,0,0,0,6.536h89.293a3.268,3.268,0,1,0,0-6.536Z" data-name="Path 680" fill="#d4d4d4" id="a98f5d70-28fc-4129-b4f3-463d07786f2f-1376" transform="translate(-178.45119 -165.31613)"/>
+ <path d="M282.41148,343.51922a3.268,3.268,0,0,0,0,6.536h190.293a3.268,3.268,0,1,0,0-6.536Z" data-name="Path 680" fill="#525252" id="a5717240-4d8d-4c71-83bc-6deeb889f166-1377" transform="translate(-178.45119 -165.31613)"/>
+ <path d="M282.41148,369.51922a3.268,3.268,0,0,0,0,6.536h190.293a3.268,3.268,0,1,0,0-6.536Z" data-name="Path 680" fill="#525252" id="f9c6f13d-6e3a-4758-9844-a0f5d5c969ce-1378" transform="translate(-178.45119 -165.31613)"/>
+ <path d="M282.41148,395.51922a3.268,3.268,0,0,0,0,6.536h190.293a3.268,3.268,0,1,0,0-6.536Z" data-name="Path 680" fill="#525252" id="bf808dfd-2bb2-4793-b7c6-d8671bf7e9b4-1379" transform="translate(-178.45119 -165.31613)"/>
+ <path d="M282.41148,421.51922a3.268,3.268,0,0,0,0,6.536h190.293a3.268,3.268,0,1,0,0-6.536Z" data-name="Path 680" fill="#525252" id="e27373f7-fd0b-426a-8828-0829b084b689-1380" transform="translate(-178.45119 -165.31613)"/>
+ <path d="M282.41148,447.51922a3.268,3.268,0,0,0,0,6.536h190.293a3.268,3.268,0,1,0,0-6.536Z" data-name="Path 680" fill="#525252" id="b4c6c7b3-e22e-4fba-a4f6-80d19d07dbd3-1381" transform="translate(-178.45119 -165.31613)"/>
+ <path d="M282.41148,473.51922a3.268,3.268,0,0,0,0,6.536h190.293a3.268,3.268,0,1,0,0-6.536Z" data-name="Path 680" fill="#525252" id="ebf0dc46-a6ad-47cb-a3de-ddb71e9e94e3-1382" transform="translate(-178.45119 -165.31613)"/>
+ <path d="M910.16054,481.4543H622.05779a7.271,7.271,0,0,1-7.2631-7.26309V304.719a7.271,7.271,0,0,1,7.2631-7.26309H910.16054a7.271,7.271,0,0,1,7.2631,7.26309V474.19121A7.271,7.271,0,0,1,910.16054,481.4543Z" fill="#f1f1f1" transform="translate(-178.45119 -165.31613)"/>
+ <path d="M948.06072,520.21623H659.958a7.271,7.271,0,0,1-7.26309-7.2631V343.48092a7.271,7.271,0,0,1,7.26309-7.26309H948.06072a7.271,7.271,0,0,1,7.26309,7.26309V512.95313A7.271,7.271,0,0,1,948.06072,520.21623Z" fill="#262626" transform="translate(-178.45119 -165.31613)"/>
+ <path d="M948.0605,522.68784H659.958a9.74579,9.74579,0,0,1-9.73465-9.73485V343.4813a9.7458,9.7458,0,0,1,9.73465-9.73486H948.0605a9.74585,9.74585,0,0,1,9.73486,9.73486V512.953A9.74584,9.74584,0,0,1,948.0605,522.68784ZM659.958,338.6895a4.79721,4.79721,0,0,0-4.7916,4.7918V512.953a4.79721,4.79721,0,0,0,4.7916,4.7918H948.0605a4.79738,4.79738,0,0,0,4.7918-4.7918V343.4813a4.79738,4.79738,0,0,0-4.7918-4.7918Z" fill="#d4d4d4" transform="translate(-178.45119 -165.31613)"/>
+ <circle cx="625.16979" cy="285.43031" fill="#ff6583" r="25"/>
+ <path d="M851.849,426.695a16.09868,16.09868,0,0,0-23.02463-.41135l-81.07973,81.08013c-10.386,10.43459-21.22811-5.52482-28.15628-11.9606-16.66045-16.47735-34.65555,14.419-45.85423,23.26678H934.2846v-3.3168Z" fill="#FD5E0F" transform="translate(-178.45119 -165.31613)"/>
+ <path d="M530.68063,524.9767l-4.38425-60.75355,7.8739-56.93181-22.3624-1.50994-4.41411,62.88884L519.869,527.80992a8.79767,8.79767,0,1,0,10.81159-2.83322Z" fill="#9f616a" transform="translate(-178.45119 -165.31613)"/>
+ <path d="M508.95477,413.96379l5.251-22.72576a17.49724,17.49724,0,0,1,34.43542,5.897l-2.8917,25.67924Z" fill="#cbcbcb" transform="translate(-178.45119 -165.31613)"/>
+ <polygon fill="#9f616a" points="371.903 557.597 382.445 557.597 387.46 516.933 371.901 516.934 371.903 557.597"/>
+ <path d="M547.66455,719.47144l20.7617-.00084h.00084a13.23168,13.23168,0,0,1,13.231,13.23076v.43l-33.99289.00126Z" fill="#a3a3a3" transform="translate(-178.45119 -165.31613)"/>
+ <polygon fill="#9f616a" points="424.424 557.252 434.559 554.349 428.184 513.876 413.226 518.161 424.424 557.252"/>
+ <path d="M599.34235,719.99967l19.95893-5.71742.00081-.00024a13.2317,13.2317,0,0,1,16.36256,9.07627l.11839.41333-32.67857,9.361Z" fill="#a3a3a3" transform="translate(-178.45119 -165.31613)"/>
+ <path d="M544.65572,708.15422l4.90409-123.1785-12.73593-55.74418c-17.13859-28.7351,1.35092-74.57013,1.53985-75.02995l.06876-.16759.17972-.02456,44.832-6.074.62973,1.44515a214.69124,214.69124,0,0,1,13.94748,127.51609l-4.66605,23.86585,23.06132,93.11029-21.82566,10.91291-16.74555-43.4245L566.52636,705.79Z" fill="#a3a3a3" transform="translate(-178.45119 -165.31613)"/>
+ <path d="M532.459,465.6262l-14.62586-42.85509c-9.09235-16.01207-3.3251-30.22752,3.11438-39.33307,6.95394-9.83243,7.3714-15.34659,7.46364-15.40768l.07444-.04911,19.21593-.58229,17.78443,18.07143c1.1187-.4371,10.568,22.84952,9.767,24.02026l12.421,40.152Z" fill="#cbcbcb" transform="translate(-178.45119 -165.31613)"/>
+ <path d="M650.88561,473.03769l-48.17993-37.26808L565.551,391.92034,549.50639,407.5705,593.40674,452.817l52.376,30.1644a8.79767,8.79767,0,1,0,5.1029-9.94375Z" fill="#9f616a" transform="translate(-178.45119 -165.31613)"/>
+ <path d="M544.94672,423.42644l-13.42486-19.07371a17.49724,17.49724,0,0,1,27.36746-21.71625l17.199,19.28682Z" fill="#cbcbcb" transform="translate(-178.45119 -165.31613)"/>
+ <circle cx="357.38226" cy="174.00948" fill="#9f616a" r="22.81899"/>
+ <path d="M559.03585,327.74915H522.802V311.95491c7.95292-3.15955,15.73526-5.84657,20.4396,0a15.79433,15.79433,0,0,1,15.79424,15.79423Z" fill="#a3a3a3" transform="translate(-178.45119 -165.31613)"/>
+ <path d="M527.796,308.16769c-33.19817-.90658-26.9117,53.78567-26.9117,53.78567s6.26341.82834,9.12141,1.315l3.45152-1.94369,3.71386,2.43573c1.70527.00851,3.49673-.0245,5.354-.059l1.70255-3.50569,3.79659,3.4428c6.91068.01028,25.66641.20072,25.66641.20072S564.99338,309.18349,527.796,308.16769Z" fill="#a3a3a3" transform="translate(-178.45119 -165.31613)"/>
+ <path d="M796.63279,733.74644h-381a1,1,0,0,1,0-2h381a1,1,0,0,1,0,2Z" fill="#cbcbcb" transform="translate(-178.45119 -165.31613)"/>
+</svg>
diff --git a/public/illustrations/welcome.svg b/public/illustrations/welcome.svg
new file mode 100644
index 0000000..7b2a8a6
--- /dev/null
+++ b/public/illustrations/welcome.svg
@@ -0,0 +1,59 @@
+<svg data-name="Layer 1" viewBox="0 0 943.00108 795.62948" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <path d="M896.49946,436.18526q0,16.77-1.41,33.2-1.11007,12.825-3.03,25.42-2.04,13.335-5,26.35v.01q-1.935,8.565-4.25,16.99a378.35513,378.35513,0,0,1-16.67,47.92005q-2.16,5.08492-4.46,10.1a378.58454,378.58454,0,0,1-19.46,36.94,385.53425,385.53425,0,0,1-74.35,89.85q-4.74,4.215-9.61,8.29a382.42129,382.42129,0,0,1-245.76,88.93c-212.08,0-384-171.92-384-384,0-212.08,171.92-384,384-384a382.30565,382.30565,0,0,1,238.77,83.25q4.77,3.77994,9.42,7.73a386.731,386.731,0,0,1,42.23,41.8h.01A382.50488,382.50488,0,0,1,896.49946,436.18526Z" fill="#2a2a2a" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M241.85571,502.51643c-36.5805-21.77185-64.19-62.46051-60.6056-104.87816a196.13326,196.13326,0,0,0,123.333,54.05479c17.8222,1.0533,37.75447.36912,50.87364,12.47827,8.16321,7.53444,11.96313,18.87789,12.58646,29.96883.62307,11.0915-1.59872,22.12366-3.80913,33.01055l.76073,2.66679C322.42586,529.97758,278.43621,524.28827,241.85571,502.51643Z" fill="#404040" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M182.14218,397.59281a167.64108,167.64108,0,0,0,69.67824,76.04858c6.58713,3.68713,13.59014,6.85416,21.03209,8.3232a41.40533,41.40533,0,0,0,21.72339-1.72118c6.53413-2.20358,12.96265-5.21427,19.91865-5.79112,7.332-.608,14.11977,2.22066,19.45283,7.17513,6.52514,6.06194,10.483,14.107,14.08,22.1088,3.99382,8.88453,8.00139,18.17605,15.6587,24.56517.92779.77413-.32765,2.16848-1.254,1.39552-13.3224-11.116-15.497-29.73205-26.14624-42.82372-4.96915-6.10882-11.80937-10.75713-19.93537-10.63454-7.10584.1072-13.73764,3.20618-20.3343,5.49453-6.92661,2.4028-13.86547,3.53152-21.17809,2.47435-7.4804-1.08142-14.622-3.98133-21.2745-7.48388a162.642,162.642,0,0,1-40.498-30.72269A170.61394,170.61394,0,0,1,180.355,398.16487c-.50063-1.09535,1.28981-1.66025,1.78717-.57206Z" fill="#262626" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M241.62442,468.62037a25.15151,25.15151,0,0,1-31.817,6.95644c-1.06374-.57069-.22689-2.25049.83826-1.67905a23.28975,23.28975,0,0,0,29.5832-6.53143c.72731-.9636,2.11867.296,1.39552,1.254Z" fill="#262626" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M291.41,481.79705a48.47753,48.47753,0,0,0-16.879-31.036c-.925-.77739.33013-2.172,1.254-1.39552A50.42392,50.42392,0,0,1,293.28351,481.697c.14751,1.20061-1.72681,1.29413-1.87352.1Z" fill="#262626" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M201.84064,431.15693a14.237,14.237,0,0,0,4.78953-12.63167c-.16266-1.19814,1.71192-1.29039,1.87352-.1a15.95369,15.95369,0,0,1-5.26753,13.98575.96962.96962,0,0,1-1.32478.07074.94283.94283,0,0,1-.07074-1.32478Z" fill="#262626" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M299.65851,315.46042c.12285.74525.24569,1.49051.38274,2.24283a187.49262,187.49262,0,0,0,7.51687,29.47055c.24331.74656.50113,1.49949.76538,2.23751a197.65952,197.65952,0,0,0,36.58364,62.90818,191.95179,191.95179,0,0,0,20.69372,20.55182c10.23277,8.72195,22.02167,17.36458,28.5824,28.62608a32.93,32.93,0,0,1,1.87051,3.621L368.1892,528.68258c-.13582.11267-.25752.23239-.39365.34577l-.9965,2.58879c-.40487-.299-.81836-.61791-1.22323-.917-.23558-.17249-.465-.35915-.70053-.53165-.15509-.11948-.31-.23971-.45673-.33866-.05177-.03958-.10323-.07987-.14057-.11312-.14678-.099-.27261-.20646-.40487-.29905q-3.47431-2.664-6.92326-5.386c-.01452-.00636-.01452-.00636-.02283-.02689-17.48426-13.872-33.964-29.32552-47.57436-46.78908-.40931-.52555-.83344-1.05676-1.23-1.61134a183.1673,183.1673,0,0,1-16.25037-25.08748,161.92786,161.92786,0,0,1-6.9679-14.82863,134.65273,134.65273,0,0,1-9.58841-40.99451c-2.043-28.07473,4.91554-56.49033,22.9489-77.63158C298.72657,316.52164,299.18229,315.99456,299.65851,315.46042Z" fill="#404040" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M300.40263,315.957a167.64112,167.64112,0,0,0,9.84767,102.67164c3.03955,6.90988,6.7243,13.65486,11.78181,19.30839a41.40533,41.40533,0,0,0,18.38118,11.7047c6.54384,2.17457,13.4893,3.64111,19.39058,7.36852,6.22026,3.92888,9.93686,10.27415,11.21207,17.44089,1.56025,8.7687-.12328,17.57509-2.06892,26.12979-2.16025,9.49835-4.55457,19.32995-2.28733,29.04152.27471,1.17669-1.56718,1.53414-1.84148.35923-3.94461-16.89648,5.52729-33.06962,4.90653-49.93419-.28966-7.86932-2.95259-15.699-9.51455-20.49355-5.73815-4.19261-12.89908-5.711-19.54388-7.85558-6.97717-2.25179-13.197-5.52825-18.39925-10.775-5.3216-5.36717-9.27781-11.98231-12.48069-18.78418a162.64177,162.64177,0,0,1-13.83823-48.913,170.61412,170.61412,0,0,1,2.68312-57.88843c.25974-1.176,2.02942-.54906,1.77137.61925Z" fill="#262626" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M305.13237,408.48092A25.15152,25.15152,0,0,1,275.54,394.87923c-.50575-1.09611,1.17378-1.9335,1.6802-.83594a23.28974,23.28974,0,0,0,27.5529,12.59615c1.16087-.33149,1.51346,1.51189.35923,1.84148Z" fill="#262626" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M336.95008,448.97612a48.47749,48.47749,0,0,0,5.20888-34.94288c-.27053-1.17763,1.57127-1.53543,1.84148-.35923a50.42393,50.42393,0,0,1-5.49422,36.35021c-.60507,1.04743-2.15792-.00636-1.55614-1.0481Z" fill="#262626" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M295.92282,354.61588a14.237,14.237,0,0,0,11.42931-7.202c.59149-1.05458,2.14378.00039,1.55613,1.04811a15.95371,15.95371,0,0,1-12.62621,7.99542.96961.96961,0,0,1-1.10035-.74113.94283.94283,0,0,1,.74112-1.10035Z" fill="#262626" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M394.49946,141.18526l47,550.19219-94,7.06765V148.18526C358.70048,140.77358,374.77921,139.614,394.49946,141.18526Z" fill="#525252" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M626.49946,141.18526l-47,550.19219,94,7.06765V148.18526C662.29844,140.77358,646.2197,139.614,626.49946,141.18526Z" fill="#525252" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M659.42475,721.18526H360.57417a18.09544,18.09544,0,0,1-18.07471-18.07519V156.26a18.09533,18.09533,0,0,1,18.07471-18.07471H659.42475A18.09533,18.09533,0,0,1,677.49946,156.26v546.8501A18.09544,18.09544,0,0,1,659.42475,721.18526Zm-298.85058-577A12.08814,12.08814,0,0,0,348.49946,156.26v546.8501a12.08855,12.08855,0,0,0,12.07471,12.07519H659.42475a12.08856,12.08856,0,0,0,12.07471-12.07519V156.26a12.08814,12.08814,0,0,0-12.07471-12.07471Z" fill="#525252" transform="translate(-128.49946 -52.18526)"/>
+ <rect fill="#525252" height="6" width="329" x="217" y="177"/>
+ <rect fill="#525252" height="6" width="329" x="217" y="277"/>
+ <rect fill="#525252" height="273" width="6" x="317.76367" y="89"/>
+ <rect fill="#525252" height="273" width="6" x="439.23633" y="89"/>
+ <path d="M711.99946,737.68526h-394a27,27,0,0,1,0-54h394a27,27,0,0,1,0,54Z" fill="#525252" transform="translate(-128.49946 -52.18526)"/>
+ <rect fill="#525252" height="20" width="327" x="219" y="348"/>
+ <path d="M453.19434,463.83594l-.415-.2002c-22.29151-10.76855-51.48291-10.75879-94.65332.03516l-.46094.11523-.13818-.45508c-4.5669-14.97412-9.74024-31.93408-.02149-40.27832.13623-24.48535,21.61426-44.36767,47.99561-44.36767,26.376,0,47.85107,19.87207,47.99511,44.35107,14.45752,11.05371,7.56739,27.38819-.06836,40.40235Z" fill="#a3a3a3" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M590.20566,411.40544a13.84439,13.84439,0,0,1-18.64664,10.147l-78.7775,79.16467L485.753,476.13619,563.99364,402.621a13.91943,13.91943,0,0,1,26.212,8.78448Z" fill="#ffb6b6" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M395.50744,487.61758s-7.14729,16.19679,10.48838,26.18518,79.27274-3.81153,89.274-5.73838S542.62493,450.237,542.62493,450.237l-5.282-27.41494-49.53991,43.00485Z" fill="#FD5E0F" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M382.49946,577.18526l1,19s-2.95156,16.83046-.5241,20.46245c2.40918,3.61383,68.15044,4.07012,68.15044,4.07012s4.34382-23.41646,8.08532-43.91265Z" fill="#ffb6b6" transform="translate(-128.49946 -52.18526)"/>
+ <polygon fill="#ffb6b6" points="443.014 776.221 456.758 773.445 452.824 717.931 432.54 722.028 443.014 776.221"/>
+ <polygon fill="#ffb6b6" points="462.701 703.978 475.478 698.233 458.903 645.117 440.045 653.597 462.701 703.978"/>
+ <path d="M602.33005,726.23486l-24.0579,13.62222-59.332-95.342c-41.65145,28.061-82.38133,41.49927-123.44064,48.6702-13.882,2.47175-28.0355,1.21914-30.70059-12.91q-.18689-.99079-.298-1.9926c-1.6393-15.43316,17.5583-35.21508,19.99859-54.09737l52.54046-3.154,6.479,8.307L504.28023,591.982c12.21929-7.51246,28.29076-3.44911,35.89664,9.07572q.60238.992,1.11848,2.03317Z" fill="#a3a3a3" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M587.6052,790.37233l-27.5282,2.5583-49.91315-102.081c-49.49549,8.51244-96.19,11.23939-136.57873.94186-13.67464-3.43841-22.03353-17.55828-18.67008-31.53767q.23582-.98018.54535-1.93955c4.83376-14.748,17.48681-25.183,27.45579-41.40388L455.733,618.0165l-8.13312,28.06226,70.73646-9.15352c14.22531-1.84079,27.217,8.45582,29.01765,22.99812q.14259,1.15179.18634,2.313Z" fill="#a3a3a3" transform="translate(-128.49946 -52.18526)"/>
+ <circle cx="282.43225" cy="367.56976" fill="#ffb6b6" r="29.56777"/>
+ <path d="M393.59763,459.99679l27.1109,3.18952a5.53217,5.53217,0,0,1,4.75822,4.31316l4.31148,19.72906,26.87663,31.65059s9.6511,18.0959,6.032,38.60463-5.20962,35.74761-5.20962,35.74761S385.38114,620.2632,382.96836,616.644s-3.1958-20.0584-3.1958-20.0584L370.12145,489.2165S380.979,471.12059,387.011,471.12059C390.904,470.98933,390.40455,462.2276,393.59763,459.99679Z" fill="#FD5E0F" transform="translate(-128.49946 -52.18526)"/>
+ <ellipse cx="329.71072" cy="539.38696" fill="#FD5E0F" rx="6.8838" ry="8.26056"/>
+ <path d="M564.6931,814.11275l20.95356-10.501,3.9492,9.21313,26.49649,5.35611a6.26128,6.26128,0,0,1,1.22668,11.89231l-25.601,10.97385-8.31908-7.22169,2.18342,9.85173-9.6526,4.13758Z" fill="#a3a3a3" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M585.20373,751.74381l20.76563-10.86793,4.11062,9.14225,26.5866,4.88927a6.26129,6.26129,0,0,1,1.43564,11.86891l-25.404,11.4224-8.44481-7.07426,2.35635,9.81181-9.57833,4.3067Z" fill="#a3a3a3" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M394.03857,410.48047a37.83844,37.83844,0,0,1-21.82568-6.88574l-.21338-.14942v-.26025a28.53242,28.53242,0,0,1,28.5-28.5h12a28.53241,28.53241,0,0,1,28.5,28.5,6.63572,6.63572,0,0,1-6.49023,6.60351l-39.79639.686C394.48828,410.47852,394.2627,410.48047,394.03857,410.48047Z" fill="#a3a3a3" transform="translate(-128.49946 -52.18526)"/>
+ <ellipse cx="437.49946" cy="388.18526" fill="#a3a3a3" rx="8" ry="11" transform="translate(-263.97828 218.57143) rotate(-30)"/>
+ <ellipse cx="377.49955" cy="386.18526" fill="#a3a3a3" rx="11" ry="8" transform="translate(-291.00662 327.85827) rotate(-45)"/>
+ <path d="M644.8378,662.18526H615.3251a4.57,4.57,0,0,0-3.49853,1.61737,6.999,6.999,0,1,0,1.80566,13.1731l2.44776,7.95416a4.6111,4.6111,0,0,0,4.40771,3.25537h19.188a4.611,4.611,0,0,0,4.40723-3.25537l5.16259-16.77692A4.61179,4.61179,0,0,0,644.8378,662.18526Zm-34.25635,13.5a5,5,0,1,1,0-10c.09131,0,.17627.0221.2666.02692a4.56354,4.56354,0,0,0,.06983,2.44079l2.11181,6.86475A4.9367,4.9367,0,0,1,610.58145,675.68526Z" fill="#d4d4d4" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M513.05185,640.47774a13.8444,13.8444,0,0,1-15.07039-14.95132L399.5427,572.77463,421.07356,558.989l92.8728,53.85838a13.91943,13.91943,0,0,1-.89451,27.63037Z" fill="#ffb6b6" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M384.182,475.83189s-17.56648-2.19967-22.075,17.56034,26.39586,74.8462,31.1112,83.87408,68.983,28.77257,68.983,28.77257l24.74683-12.92565-55.41052-35.11829Z" fill="#FD5E0F" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M379.5,342h6a11,11,0,0,1,11,11v0a0,0,0,0,1,0,0h-28a0,0,0,0,1,0,0v0A11,11,0,0,1,379.5,342Z" fill="#525252"/>
+ <circle cx="189.2416" cy="77.32369" fill="#ff6584" r="59.44187"/>
+ <path d="M499.73783,126.41124c-15.7312-16.50248-34.00131-31.55708-55.62979-39.51246a89.414,89.414,0,0,0-18.6325-4.68231c-.05115-.007-.09959.00335-.15045-.00078a2.74577,2.74577,0,0,0-.31429-.06168,71.72506,71.72506,0,0,0-26.62216,1.60723A73.55438,73.55438,0,0,0,385.993,88.07939a108.39914,108.39914,0,0,0-11.63129,6.59173,75.65263,75.65263,0,0,1-25.70256,9.58857,86.46775,86.46775,0,0,1-13.80457,1.35489c-4.01773.0806-7.80669.22017-11.61329,1.67168a27.87432,27.87432,0,0,0-16.97583,18.381,1.80745,1.80745,0,0,0,.80343,1.97437c1.02972.73748,2.03355,1.57421,3.11542,2.23124a9.71934,9.71934,0,0,0,3.04315.83q2.58008.54443,5.16669,1.057,9.52917,1.88808,19.1375,3.34264,19.44216,2.9432,39.09431,4.14643a435.30343,435.30343,0,0,0,78.685-2.36485,436.80225,436.80225,0,0,0,43.65533-7.55074A1.76448,1.76448,0,0,0,499.73783,126.41124Z" fill="#404040" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M320.56218,166.15461a89.414,89.414,0,0,0-18.63249-4.68231c-.05115-.007-.09959.00335-.15046-.00078a2.74708,2.74708,0,0,0-.31429-.06168,71.72508,71.72508,0,0,0-26.62216,1.60723,73.55459,73.55459,0,0,0-12.3956,4.31815,108.40025,108.40025,0,0,0-11.6313,6.59173,75.65258,75.65258,0,0,1-25.70255,9.58857,86.46786,86.46786,0,0,1-13.80457,1.35489c-4.01774.0806-7.8067.22018-11.6133,1.67168A27.87437,27.87437,0,0,0,182.71963,204.923a1.80746,1.80746,0,0,0,.80344,1.97437c1.02972.73749,2.03355,1.57421,3.11542,2.23124a9.71928,9.71928,0,0,0,3.04314.83q2.58007.54443,5.1667,1.057,9.52915,1.88808,19.1375,3.34264,19.44216,2.94319,39.09431,4.14643a435.30343,435.30343,0,0,0,78.685-2.36485,436.80324,436.80324,0,0,0,43.65533-7.55074,1.76448,1.76448,0,0,0,.77149-2.92207C360.46078,189.16459,342.19066,174.11,320.56218,166.15461Z" fill="#404040" transform="translate(-128.49946 -52.18526)"/>
+ <polygon fill="#d4d4d4" points="620.723 557.099 575.011 497.048 538.943 517.442 615.374 608.204 620.723 557.099"/>
+ <path d="M854.51948,511.66524a329.3367,329.3367,0,0,0,11.62,74.41q-2.16,5.08492-4.46,10.1a378.58454,378.58454,0,0,1-19.46,36.94,385.53425,385.53425,0,0,1-74.35,89.85q-4.74,4.215-9.61,8.29c-18.51-25.52-28.5-53.68-32.45-82.66-.5-3.68-.91-7.4-1.22-11.1v-.02a236.75894,236.75894,0,0,1-.73-27.04c.01-.72.03-1.45.06-2.18.35-9.64,1.22-19.3,2.53-28.87v-.01c.15-1.1.3-2.2.47-3.3.48-3.30005,1.02-6.6,1.61005-9.88a400.20768,400.20768,0,0,1,14.34-55.79v-.01c.17-.53.34-1.05.53-1.56994.66-1.98005,1.33-3.94,2.02-5.9a3.43549,3.43549,0,0,1,.16-.45q1.33492-3.84,2.73-7.62.375-1.05.78-2.1c1.05-2.81,2.12-5.6,3.21-8.35.34-.88.69-1.76,1.04-2.63.27-.67.53-1.34.81-2v-.01q2.385-5.895,4.83-11.56c4.57-10.62,9.27-20.61,13.85-29.82l.01-.01c19.01-38.13,36.29-62.89,36.29-62.89l64.89,21c-7.74,13.73-13.73,33.98-17.01,57.87a323.06661,323.06661,0,0,0-2.49,57.3Z" fill="#d4d4d4" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M746.66944,505.55526c-.38-.89-.81-1.76-1.25-2.63a49.25724,49.25724,0,0,0-8.71-12c-.52-.53-1.06-1.06-1.62-1.56a48.71775,48.71775,0,0,0-45.48-11.26l-.04.02-.3.08.07.34a28.2805,28.2805,0,0,0,1.3,4.65c.15.41.32.8.49,1.19.07.18.16.34.24.52,0,0-.01.01.01.01,0,.01.01.02.01.03.19.37.37.75.57,1.11-.41-.39-.8-.79-1.18-1.2-.37006-.38-.71-.78-1.05005-1.18a33.14713,33.14713,0,0,1-3.15-4.34l-.16-.26995-.28.11a49.113,49.113,0,0,0-10.72,5.25l-.36.24a21.80194,21.80194,0,0,1-17.51,2.86,34.71835,34.71835,0,0,0-27.59,4.51,34.303,34.303,0,0,0-7.18,6.26c-.18006.21-.36005.43-.54.64-.38.46-.74.93-1.09,1.41a34.2634,34.2634,0,0,0-6.67,17.23005l-.02.23.19.13a29.71386,29.71386,0,0,0,11.24,4.68,33.63049,33.63049,0,0,1-7.64.19h-.01a30.941,30.941,0,0,1-3.44-.48l-.21-.04h-.01l-.26-.05.04.48a34.39863,34.39863,0,0,0,5.57,17.15l.1.14a1.40671,1.40671,0,0,1,.1.16,35.99726,35.99726,0,0,1,3.52,6.91,32.9178,32.9178,0,0,1,1.48,18.91,34.48047,34.48047,0,0,0,14.12,36.18,34.29564,34.29564,0,0,0,16.95,5.95c.83.07,1.67.11,2.51.11a34.47892,34.47892,0,0,0,13.97-2.91l.16-.06.04-.18a33.84051,33.84051,0,0,1,3.54-7.78,23.57451,23.57451,0,0,0-.74,5.87v.66l.57-.33c.49-.29.99-.6,1.44-.89a35.22572,35.22572,0,0,0,7.27-6.32c.83-.96,1.67-1.89,2.55-2.82l.01-.01c1.71-1.82,3.52-3.6,5.4-5.3a100.97265,100.97265,0,0,1,12.8-9.77,110.30691,110.30691,0,0,1,14.13-7.68h.01c.55-.26,1.11-.51,1.66-.75a48.74065,48.74065,0,0,0,7.01-3.76c.07995-.05005.15-.09.22-.14a48.79243,48.79243,0,0,0,17.92-60.5Z" fill="#FD5E0F" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M626.77694,580.18364a34.46035,34.46035,0,0,0-.61934,3.68371,34.92932,34.92932,0,0,1-.782-18.17648c.20822-.92135.3642-1.85343.48647-2.7905A32.78043,32.78043,0,0,1,626.77694,580.18364Z" opacity="0.15" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M627.53324,536.80588a33.63135,33.63135,0,0,1-8.93169.04258,34.58646,34.58646,0,0,1-2.00672-4.54481A29.30539,29.30539,0,0,0,627.53324,536.80588Z" opacity="0.15" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M618.364,522.48392a34.76139,34.76139,0,0,0-2.16135,8.70514,34.36229,34.36229,0,0,1-1.6021-8.7684l-.02452-.48033.47188.09153A33.39679,33.39679,0,0,0,618.364,522.48392Z" opacity="0.15" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M630.21729,491.73824a34.63169,34.63169,0,0,1,27.57441-4.5156,21.76593,21.76593,0,0,0,17.51959-2.85549l.361-.238a48.96512,48.96512,0,0,1,10.7142-5.26243l.288-.09956.15749.26038a33.1205,33.1205,0,0,0,5.37606,6.72523,25.39838,25.39838,0,0,1-2.6181-7.51049l-.068-.34613.3412-.09036a48.72054,48.72054,0,0,1,61.11632,49.7002,48.72953,48.72953,0,0,0-59.715-35.20742l-.3412.09036.068.34612a25.39856,25.39856,0,0,0,2.6181,7.51049,33.12057,33.12057,0,0,1-5.37606-6.72523l-.15749-.26038-.288.09957a48.96407,48.96407,0,0,0-10.71421,5.26243l-.361.238a21.76593,21.76593,0,0,1-17.51959,2.85549,34.55639,34.55639,0,0,0-39.7997,18.42636,41.88142,41.88142,0,0,1-4.49326-2.5103l-.196-.12419.02318-.23043A34.41763,34.41763,0,0,1,630.21729,491.73824Z" opacity="0.15" transform="translate(-128.49946 -52.18526)"/>
+ <path d="M1001.97944,236.22524l-.94995-.63-.68994.9a81.82985,81.82985,0,0,0-12.59009,22.29,106.75248,106.75248,0,0,1,4.82007-27.29l.29992-.93-.86-.49a157.68874,157.68874,0,0,0-35.5-14.72l-1.35-.36a70.06147,70.06147,0,0,1-44.15-36.28,111.36751,111.36751,0,0,0-111.43-60.49h-.01c-.24.02-.49.05-.73.08-.41.04-.81.09-1.21.14-.82.11-1.62.22-2.42.34-.68.1-1.37.21-2.05.33-.36.05-.71.11-1.06.18-.35.06-.71.12-1.06.19h-.01a110.25362,110.25362,0,0,0-19.66,5.65h-.01v.00995l-1.61.63q-2.49,1.02-4.94,2.16c-.37.17-.73.35-1.1.52-.1.05-.21.1-.31.16-1.05005.5-2.09,1.02-3.12,1.57-.15.07-.30005.15-.45.23l-.96.51q-3.165,1.71-6.22,3.63c-.17.1-.33.2-.5.31-.18005.12-.37.24-.55005.36-.11.06-.22.14-.32995.21-.31.19-.61005.39-.91.6-.6.39-1.2.79-1.79,1.2-.61.41-1.21.84-1.81,1.27l-.6.43.11005.74c.1.61.19,1.22.3,1.82.1.6.2,1.19.31,1.78.17.99.36,1.97.55,2.92.13.63.25,1.25.39,1.86q.195.945.42,1.89c.29,1.3.6,2.56.93,3.8.16.62.33,1.24.51,1.85.1.37.2.74.31,1.1q.12.375.24.75c.02.08.04.17.07.26a2.40607,2.40607,0,0,0,.08.25q.165.55509.33,1.08c.06.19.12.38.19.56.14.43.29.87.44,1.29.16.48.33.96.5,1.43.04.12.08.23.12.35.03.09.06.18.1.27.04.1.08.21.12.31.17.45.34.91.52,1.36.06.16.12.33.19.49a71.63483,71.63483,0,0,0,5.95,11.7q-3.885-3.33-7.48-7.06a107.6581,107.6581,0,0,1-10.2-12.31c-.25-.34-.5-.69-.73-1.04-.47-.67-.93-1.34-1.38-2.02-.48-.7-.94-1.43-1.39-2.15-.3-.48-.6-.97-.88995-1.45-.29-.46-.56-.91-.82-1.37l-.78-1.34h-.01v.01l-1.1,1.07995c-.44.43006-.88.86005-1.31,1.29a111.1344,111.1344,0,0,0-28.27,48.65l-.15.55-.15.57c-.29,1.02-.58,2.01-.89,3.02v.01c-.3,1-.62,2-.96,2.98-.31.93-.63,1.85-.97,2.77q-.165.465-.36.93c-.21.6-.44,1.19-.67,1.79-.11005.27-.22.55-.33.82-.27.66-.54,1.32-.81,1.97-.04.1-.09.21-.14.31-.08.2-.17.4-.25.59-.21.48-.43.97-.64,1.45-.15.31-.29.63-.43.94-.06.14-.13.28-.19.42-.37.8-.75,1.59-1.15,2.37006-.45.92-.91,1.84-1.4,2.74-.43.84-.88,1.66-1.35,2.48-.81,1.45-1.66,2.89-2.54,4.29-.34.54-.68,1.08-1.03,1.62-.08.13-.16.26-.24.38-.29.47-.59.92005-.9,1.38-.21.31-.42.62-.63.92-.35.54-.72,1.06-1.1,1.57-.1.16-.21.31-.32.46-.56.78-1.12,1.54-1.69,2.3-.02.01-.02.02-.03.03-.02,0-.02.01-.03.02-.25.33-.5.66-.76.98-.34.47-.71.93-1.08,1.38-.6.76-1.23,1.53-1.87,2.28-.02.02-.03.04-.05.05a106.52848,106.52848,0,0,1-10.74,10.92c-.07.06-.12.12-.19.17-.54.47-1.08.94-1.64,1.4q-.345.285-.69.57c-.38.32-.77.64-1.15.93a.79251.79251,0,0,1-.15.12c-.34.28-.67.54-1.01.8-.41.33-.82.64-1.24.95q-2.97,2.25-6.1,4.25c-.31.21-.64.42-.96.62-.19.12-.38.24-.56.34-.76.47-1.52.93-2.28,1.37-.76.45-1.54.88-2.31,1.3-1.65.9-3.28,1.84-4.87,2.82-.8.5-1.6,1-2.39,1.51q-4.71,3.06006-9.07,6.55a110.73687,110.73687,0,0,0-8.35,7.41q-.49494.48-.99.99c-.66.65-1.3,1.31-1.91,1.97-.98,1.01-1.92005,2.05-2.85,3.1a112.39814,112.39814,0,0,0-12.96,18.02,105.92614,105.92614,0,0,0-5.08,9.88995c-1.15,2.53-2.2,5.12006-3.15,7.74q-.945,2.625-1.77,5.3c-.27.89-.53,1.79-.78,2.69-.85,3.05-1.56,6.13-2.14,9.22q-.705,3.72006-1.14,7.45c-.15,1.25-.27,2.5-.38,3.74q-.38626,4.5716-.39453,9.15223a111.31038,111.31038,0,0,0,3.31451,27.17779q.735,2.94,1.63,5.85c.3.97.62,1.93.94,2.89q1.215,3.6,2.69,7.13.885,2.115,1.86,4.2a111.61617,111.61617,0,0,0,15.68,24.56q1.545,1.845,3.19,3.63c.01,0,0,.01,0,.01a110.89866,110.89866,0,0,0,8.63,8.44h.01q1.815,1.60492,3.69,3.11c.01-.01.01,0,.01,0,1.26,1.02,2.53,2,3.82995,2.95q.975.705,1.98005,1.41,1.965,1.395,4.01,2.69h.01q2.04008,1.32,4.14,2.52c2.81,1.61,5.69,3.12,8.65,4.49l.5.23.51-.23a109.4607,109.4607,0,0,1,14.64-5.37c1.1-.32,2.21-.61,3.31-.89q4.17-1.035,8.4-1.74a69.10112,69.10112,0,0,0-7.94,4.67c-1.97,1.33-3.91,2.78-5.86,4.38-.65.53-1.3,1.08-1.95,1.64l-1.62,1.4,2.03.67005c.74.24,1.48.48,2.22.7,1.01.32,2.01.61,2.99.88q3.21.90006,6.46,1.59c.53.11,1.05.22,1.58.33,1.03.2,2.07.4,3.11005.57995a.687.687,0,0,0,.13.02c1.08.18,2.17.35,3.25.5q3.01492.435,6.03.69c.22.03.44.04.67.05.49.04.97.08,1.46.11,1.08.07,2.17.12,3.26.16.08,0,.15.01.23.01.55.02,1.1.04,1.65.05,0,0,0,.01.01,0,.55.01,1.1.02,1.65.02h3.04c.56995,0,1.14.01,1.72.01.8,0,1.61.01,2.41.02.21,0,.43.01.65.01,1.28.02,2.56.05,3.84.08.07995,0,.16.01.24.01,1.28.04,2.56.08,3.84.14.28.01.56.02.85.04q1.845.075,3.69.18c.35.02.71.05,1.07.07.93.05,1.87.11,2.8.18.55.03,1.09.07,1.64.12,2.22.17,4.43.36,6.65.58.74.06,1.48.13995,2.22.22q2.97.315,5.96.69c.89.1,1.78.22,2.67.34.1.01.19995.02.3.04,1.1.15,2.19.3,3.29.46.72.1,1.44.21,2.16.32.74.11,1.48.22,2.22.35.4.06.8.13,1.21.2.96.15,1.93.31,2.9.49a2.34757,2.34757,0,0,1,.26.04c2.06.36,4.13.74,6.19,1.15,1.21.23,2.41.47,3.61.72.94.19,1.88.39,2.82.59.16.03.32.07.48.11a.5149.5149,0,0,0,.11.02c1.42.31,2.85.63,4.27.97q7.39508,1.71,14.77,3.8c1.13.31,2.26.64,3.39.97.48.14.95.28,1.42.42.98.29,1.95.58,2.93.89.86.26,1.73.53,2.59.81.54.17,1.08.34,1.62.52.84.26,1.68.53,2.51.82.71.22,1.41.45,2.11.7,1,.33,2.01.67005,3.01,1.03.29.1.59.2.88.31,1.22.42,2.44.85,3.66,1.3,1.19.43,2.38.87,3.56,1.31.82.31,1.64.61,2.45.93.91.35,1.82.7,2.72,1.06,1.3.51,2.61,1.03,3.91,1.56,1.2.48005,2.39.97,3.59,1.48005.22.09.45.18.67.28,1.04.43,2.08.88,3.11,1.33.67.28,1.33.57,1.99.86q4.32,1.89,8.63,3.91h.01c1.8.85,3.63,1.66,5.47,2.43.43005.18.86005.36,1.30005.53.73.31,1.47.6,2.21.9.48.19.96.38,1.45.56.71.28,1.43.55,2.15.81.76.28,1.51.56,2.28.82.27.1.54.19.82.29.89.3,1.78.6,2.68.89.09.03.18.06.28.09.94.30005,1.88.6,2.83.88a2.00224,2.00224,0,0,0,.23.07c1.02.31,2.06.61005,3.09.9,1.52.42,3.05.82,4.58,1.19.28.07.56.14.84.2.82.2,1.63.38995,2.45.57.87006.19995,1.75.37994,2.62006.56.87994.18,1.76.36,2.62994.52.47.09.94.18,1.4.26l1.23.21c.85.15,1.7.28,2.56.42a.195.195,0,0,1,.07.01c.97.15,1.93.29,2.9.41.93.13,1.86.24,2.79.35.19.01995.39.04.59.06.77.09,1.54.18,2.31.25q.33.02994.66.06c.76.07,1.52.14,2.28.19a3.55936,3.55936,0,0,0,.46.03c.68.06,1.36005.11,2.04.14.48.04.95.06,1.43.09.25.01.49.02.74.03.66.04,1.32.06,1.99.08.81.03,1.62.05,2.42005.07.97.01995,1.94995.03,2.92.03h.02c.95,0,1.91-.01,2.86005-.03h.36l1.05-.03c.54-.01,1.08-.03,1.61-.05,1.02-.04,2.03-.09,3.04-.15.4-.01995.81-.05,1.21-.07.18006-.01.37-.03.55005-.04.63-.04,1.25-.08,1.88-.13.65-.05,1.31-.11,1.96-.18.84-.08,1.68-.17,2.52-.26.66-.07,1.32-.15,1.97-.23a2.03236,2.03236,0,0,0,.26-.04c.63-.07,1.26-.15,1.88-.24.74-.1,1.47-.21,2.2-.31994.08-.01.15-.02.23-.03,1.26-.2,2.53-.4,3.8-.63,1.33-.24,2.66-.5,3.98005-.77.49-.1.97-.21,1.46-.31.27-.06.55-.11.81-.17.41-.09.81-.18,1.21-.28.07-.01.15-.03.22-.04.56-.12,1.11-.26,1.67-.4,1.12-.27,2.22-.55005,3.32-.85.49-.12.98-.25,1.44995-.38.14-.04.28-.08.41-.12q3.045-.855,6.04-1.81c.88-.28,1.75-.57,2.62-.88q2.805-.96,5.56-2.02c.49012-.18.98011-.38,1.4701-.57.72-.29,1.43994-.58,2.1499-.87.64-.27,1.28-.54,1.93005-.82.31995-.13.64-.27.96-.41.96009-.42,1.92005-.85,2.87-1.28.64-.3,1.27-.59,1.9-.89,1-.48,1.99-.97,2.98-1.46.25-.13.49-.25994.73011-.38.62988-.32,1.25988-.65,1.8999-.97,1.01-.54,2.02-1.08,3.02-1.64.34-.18.66992-.37,1.01-.56q1.65-.93,3.27-1.89,3.58483-2.145,7.06994-4.48c.58-.38,1.16-.78,1.73011-1.17,1.07983-.74,2.13989-1.5,3.19995-2.26.11-.08.21-.16.31994-.23.53-.39,1.05994-.78,1.59-1.18,1.1001-.83,2.19006-1.67005,3.28-2.53.02-.01.05005-.04.08008-.06.49-.39.98-.78,1.46-1.17,1.49-1.21,2.96-2.44,4.3999-3.71.71008-.61,1.41016-1.24,2.1001-1.87.52-.47,1.04-.94,1.55-1.42,1.0299-.97,2.03991-1.93,3.03991-2.91.5-.48.99-.98,1.49-1.48.49012-.5.99012-1,1.48011-1.51.16992-.17.33984-.35.51-.53.5-.53,1-1.07,1.5-1.6.42993-.46.84985-.94,1.2799-1.42.7201-.8,1.45008-1.6,2.16-2.41a1.53372,1.53372,0,0,1,.12-.12994c.03992-.05.08-.09.11-.13h-.01a156.932,156.932,0,0,0-31.27-232.97Z" fill="#FD5E0F" transform="translate(-128.49946 -52.18526)"/>
+ <g opacity="0.15">
+  <path d="M799.57156,118.2174a78.59589,78.59589,0,0,0,8.90747,20.31988,108.18092,108.18092,0,0,1-17.44281-19.04921Q795.2766,118.686,799.57156,118.2174Z" transform="translate(-128.49946 -52.18526)"/>
+  <path d="M701.994,228.95439a111.70591,111.70591,0,0,0-20.62825,14.50022,113.72127,113.72127,0,0,0,22.80874-43.24937c.053-.191.10641-.3833.158-.5746l.14875-.54118a111.17561,111.17561,0,0,1,29.57395-49.9535l1.10918-1.08072.78224,1.33553a108.70576,108.70576,0,0,0,15.41962,20.31661C742.296,195.30125,724.64606,216.60254,701.994,228.95439Z" transform="translate(-128.49946 -52.18526)"/>
+  <path d="M754.12258,160.83931l-.14875.54119c-.05163.19129-.105.38363-.158.57459-.29213,1.05232-.60258,2.09668-.9229,3.13656a115.87114,115.87114,0,0,1-6.62184-25.4162l-.11633-.73788.60665-.43354a112.16118,112.16118,0,0,1,24.60116-13.37342A111.42726,111.42726,0,0,0,754.12258,160.83931Z" transform="translate(-128.49946 -52.18526)"/>
+  <path d="M652.35278,267.20453a100.592,100.592,0,0,0,18.2784-12.83063,111.14738,111.14738,0,0,0,37.39487,173.177l.50565.23347.50454-.22774a106.62929,106.62929,0,0,1,26.358-8.004,76.16989,76.16989,0,0,0-15.751,10.69333l-1.61786,1.39888,2.0297.67c1.75177.57939,3.50425,1.11241,5.20739,1.5852a112.22255,112.22255,0,0,0,30.74329,4.11339c47.20153-.30231,94.76951,10.6103,141.38167,32.43391a158.83167,158.83167,0,0,0,24.788,9.16144,156.27529,156.27529,0,0,0,111.10276-10.4229,157.13225,157.13225,0,0,1-160.744,48.673,158.83062,158.83062,0,0,1-24.788-9.16143C801.134,486.87379,753.566,475.96118,706.36449,476.26349a112.22205,112.22205,0,0,1-30.74329-4.11338c-1.70314-.4728-3.45562-1.00581-5.2074-1.58521l-2.02969-.67L670.002,468.496a76.17,76.17,0,0,1,15.751-10.69333,106.62906,106.62906,0,0,0-26.358,8.004l-.50453.22773-.50565-.23346a111.201,111.201,0,0,1-6.032-198.59649Z" transform="translate(-128.49946 -52.18526)"/>
+ </g>
+</svg>
-- 
2.49.1


From eca21bf627607fd36983d9107968caf21fd007de Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 16:36:54 +0100
Subject: [PATCH 206/428] feat(billing): update frontend for polar migration

Update billing types, remove invoice preview, replace Stripe invoice
display with Polar orders, update tax ID from array to single object,
remove upcoming invoice amount display.
---
 app/admin/orgs/[id]/page.tsx                 |  10 +-
 app/page.tsx                                 |  17 +--
 components/PricingSection.tsx                |   4 +-
 components/settings/OrganizationSettings.tsx | 122 +++++--------------
 lib/api/admin.ts                             |   4 +-
 lib/api/billing.ts                           |  45 ++-----
 6 files changed, 54 insertions(+), 148 deletions(-)

diff --git a/app/admin/orgs/[id]/page.tsx b/app/admin/orgs/[id]/page.tsx
index 3559ff9..bf93de2 100644
--- a/app/admin/orgs/[id]/page.tsx
+++ b/app/admin/orgs/[id]/page.tsx
@@ -135,11 +135,11 @@ export default function AdminOrgDetailPage() {
                 {org.current_period_end ? formatDateTime(new Date(org.current_period_end)) : '-'}
               </span>
 
-              <span className="text-neutral-500">Stripe Cust:</span>
-              <span className="font-mono text-xs">{org.stripe_customer_id || '-'}</span>
-              
-              <span className="text-neutral-500">Stripe Sub:</span>
-              <span className="font-mono text-xs">{org.stripe_subscription_id || '-'}</span>
+              <span className="text-neutral-500">Customer ID:</span>
+              <span className="font-mono text-xs">{org.billing_customer_id || '-'}</span>
+
+              <span className="text-neutral-500">Subscription ID:</span>
+              <span className="font-mono text-xs">{org.billing_subscription_id || '-'}</span>
           </div>
         </div>
 
diff --git a/app/page.tsx b/app/page.tsx
index 24cd274..fda9c5f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -334,7 +334,7 @@ export default function HomePage() {
                   return `${label} Plan`
                 })()}
               </p>
-              {(typeof subscription.sites_count === 'number' || (subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number') || (subscription.next_invoice_amount_due != null && subscription.next_invoice_currency && !subscription.cancel_at_period_end && (subscription.subscription_status === 'active' || subscription.subscription_status === 'trialing'))) && (
+              {(typeof subscription.sites_count === 'number' || (subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number') || (!subscription.cancel_at_period_end && (subscription.subscription_status === 'active' || subscription.subscription_status === 'trialing'))) && (
                 <p className="text-sm text-neutral-400 mt-1">
                   {typeof subscription.sites_count === 'number' && (
                     <span>Sites: {(() => {
@@ -346,20 +346,9 @@ export default function HomePage() {
                   {subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number' && (
                     <span>Pageviews: {subscription.pageview_usage.toLocaleString()}/{subscription.pageview_limit.toLocaleString()}</span>
                   )}
-                  {subscription.next_invoice_amount_due != null && subscription.next_invoice_currency && !subscription.cancel_at_period_end && (subscription.subscription_status === 'active' || subscription.subscription_status === 'trialing') && (
+                  {!subscription.cancel_at_period_end && (subscription.subscription_status === 'active' || subscription.subscription_status === 'trialing') && subscription.current_period_end && (
                     <span className="block mt-1">
-                      Renews {(() => {
-                        const ts = subscription.next_invoice_period_end ?? subscription.current_period_end
-                        const d = ts ? new Date(typeof ts === 'number' ? ts * 1000 : ts) : null
-                        const dateStr = d && !Number.isNaN(d.getTime()) && d.getTime() !== 0
-                          ? formatDate(d)
-                          : null
-                        const amount = (subscription.next_invoice_amount_due / 100).toLocaleString('en-US', {
-                          style: 'currency',
-                          currency: subscription.next_invoice_currency.toUpperCase(),
-                        })
-                        return dateStr ? `${dateStr} for ${amount}` : amount
-                      })()}
+                      Renews {formatDate(new Date(subscription.current_period_end))}
                     </span>
                   )}
                 </p>
diff --git a/components/PricingSection.tsx b/components/PricingSection.tsx
index 51f5ef8..abe8c1d 100644
--- a/components/PricingSection.tsx
+++ b/components/PricingSection.tsx
@@ -109,7 +109,7 @@ export default function PricingSection() {
   const [loadingPlan, setLoadingPlan] = useState<string | null>(null)
   const { user } = useAuth()
 
-  // * Show toast when redirected from Stripe Checkout with canceled=true
+  // * Show toast when redirected from Polar Checkout with canceled=true
   useEffect(() => {
     if (searchParams.get('canceled') === 'true') {
       toast.info('Checkout was canceled. You can try again whenever you’re ready.')
@@ -196,7 +196,7 @@ export default function PricingSection() {
         limit,
       })
 
-      // 3. Redirect to Stripe Checkout
+      // 3. Redirect to Polar Checkout
       if (url) {
         window.location.href = url
       } else {
diff --git a/components/settings/OrganizationSettings.tsx b/components/settings/OrganizationSettings.tsx
index 4583879..f9c885e 100644
--- a/components/settings/OrganizationSettings.tsx
+++ b/components/settings/OrganizationSettings.tsx
@@ -19,7 +19,7 @@ import {
   OrganizationInvitation,
   Organization
 } from '@/lib/api/organization'
-import { getSubscription, createPortalSession, getInvoices, cancelSubscription, resumeSubscription, changePlan, previewInvoice, createCheckoutSession, SubscriptionDetails, Invoice, PreviewInvoiceResult } from '@/lib/api/billing'
+import { getSubscription, createPortalSession, getOrders, cancelSubscription, resumeSubscription, changePlan, createCheckoutSession, SubscriptionDetails, Order } from '@/lib/api/billing'
 import { TRAFFIC_TIERS, PLAN_ID_SOLO, PLAN_ID_TEAM, PLAN_ID_BUSINESS, getTierIndexForLimit, getLimitForTierIndex, getSitesLimitForPlan } from '@/lib/plans'
 import { getAuditLog, AuditLogEntry, GetAuditLogParams } from '@/lib/api/audit'
 import { getNotificationSettings, updateNotificationSettings } from '@/lib/api/notification-settings'
@@ -36,7 +36,6 @@ import {
   XIcon,
   Captcha,
   BookOpenIcon,
-  DownloadIcon,
   ExternalLinkIcon,
   LayoutDashboardIcon,
   Spinner,
@@ -93,10 +92,8 @@ export default function OrganizationSettings() {
   const [changePlanId, setChangePlanId] = useState<string>(PLAN_ID_SOLO)
   const [changePlanTierIndex, setChangePlanTierIndex] = useState(2)
   const [changePlanYearly, setChangePlanYearly] = useState(false)
-  const [invoicePreview, setInvoicePreview] = useState<PreviewInvoiceResult | null>(null)
-  const [isLoadingPreview, setIsLoadingPreview] = useState(false)
   const [isChangingPlan, setIsChangingPlan] = useState(false)
-  const [invoices, setInvoices] = useState<Invoice[]>([])
+  const [orders, setOrders] = useState<Order[]>([])
   const [isLoadingInvoices, setIsLoadingInvoices] = useState(false)
 
   // Invite State
@@ -195,14 +192,14 @@ export default function OrganizationSettings() {
     }
   }, [currentOrgId])
 
-  const loadInvoices = useCallback(async () => {
+  const loadOrders = useCallback(async () => {
     if (!currentOrgId) return
     setIsLoadingInvoices(true)
     try {
-      const invs = await getInvoices()
-      setInvoices(invs)
+      const ords = await getOrders()
+      setOrders(ords)
     } catch (error) {
-      logger.error('Failed to load invoices:', error)
+      logger.error('Failed to load orders:', error)
     } finally {
       setIsLoadingInvoices(false)
     }
@@ -231,9 +228,9 @@ export default function OrganizationSettings() {
   useEffect(() => {
     if (activeTab === 'billing' && currentOrgId) {
       loadSubscription()
-      loadInvoices()
+      loadOrders()
     }
-  }, [activeTab, currentOrgId, loadSubscription, loadInvoices])
+  }, [activeTab, currentOrgId, loadSubscription, loadOrders])
 
   const loadAudit = useCallback(async () => {
     if (!currentOrgId) return
@@ -307,19 +304,8 @@ export default function OrganizationSettings() {
 
   useEffect(() => {
     if (!showChangePlanModal || !hasActiveSubscription) {
-      setInvoicePreview(null)
       return
     }
-    let cancelled = false
-    setIsLoadingPreview(true)
-    setInvoicePreview(null)
-    const interval = changePlanYearly ? 'year' : 'month'
-    const limit = getLimitForTierIndex(changePlanTierIndex)
-    previewInvoice({ plan_id: changePlanId, interval, limit })
-      .then((res) => { if (!cancelled) setInvoicePreview(res ?? null) })
-      .catch(() => { if (!cancelled) { setInvoicePreview(null) } })
-      .finally(() => { if (!cancelled) setIsLoadingPreview(false) })
-    return () => { cancelled = true }
   }, [showChangePlanModal, hasActiveSubscription, changePlanId, changePlanTierIndex, changePlanYearly])
 
   // If no org ID, we are in personal organization context, so don't show org settings
@@ -382,7 +368,6 @@ export default function OrganizationSettings() {
       setChangePlanTierIndex(2)
     }
     setChangePlanYearly(subscription?.billing_interval === 'year')
-    setInvoicePreview(null)
     setShowChangePlanModal(true)
   }
 
@@ -954,19 +939,15 @@ export default function OrganizationSettings() {
                           Change plan
                         </Button>
                       </div>
-                      {(subscription.business_name || (subscription.tax_ids && subscription.tax_ids.length > 0)) && (
+                      {(subscription.business_name || subscription.tax_id) && (
                         <div className="px-6 pb-2 -mt-2 space-y-1 text-sm text-neutral-500 dark:text-neutral-400">
                           {subscription.business_name && (
                             <div>Billing for: {subscription.business_name}</div>
                           )}
-                          {subscription.tax_ids && subscription.tax_ids.length > 0 && (
-                            <div>
-                              Tax ID{subscription.tax_ids.length > 1 ? 's' : ''}:{' '}
-                              {subscription.tax_ids.map((t) => {
-                                const label = t.type === 'eu_vat' ? 'VAT' : t.type === 'us_ein' ? 'EIN' : t.type.replace(/_/g, ' ').toUpperCase()
-                                return `${label} ${t.value}${t.country ? ` (${t.country})` : ''}`
-                              }).join(', ')}
-                            </div>
+                          {subscription.tax_id && (
+                            <span>
+                              Tax ID: {subscription.tax_id.value} ({subscription.tax_id.type})
+                            </span>
                           )}
                         </div>
                       )}
@@ -1014,18 +995,11 @@ export default function OrganizationSettings() {
                           </div>
                           <div className="text-lg font-semibold text-neutral-900 dark:text-white">
                             {(() => {
-                              const ts = subscription.next_invoice_period_end ?? subscription.current_period_end
-                              const d = ts ? new Date(typeof ts === 'number' ? ts * 1000 : ts) : null
-                              const dateStr = d && !Number.isNaN(d.getTime()) && d.getTime() !== 0
+                              const ts = subscription.current_period_end
+                              const d = ts ? new Date(ts) : null
+                              return d && !Number.isNaN(d.getTime()) && d.getTime() !== 0
                                 ? formatDate(d)
                                 : '—'
-                              const amount = subscription.next_invoice_amount_due != null && subscription.next_invoice_currency
-                                ? (subscription.next_invoice_amount_due / 100).toLocaleString('en-US', {
-                                    style: 'currency',
-                                    currency: subscription.next_invoice_currency.toUpperCase(),
-                                  })
-                                : null
-                              return amount && dateStr !== '—' ? `${dateStr} for ${amount}` : dateStr
                             })()}
                           </div>
                         </div>
@@ -1062,57 +1036,38 @@ export default function OrganizationSettings() {
                       )}
                     </div>
 
-                    {/* Invoice History */}
+                    {/* Order History */}
                     <div>
-                      <h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-3">Recent invoices</h3>
+                      <h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-3">Recent orders</h3>
                       <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden divide-y divide-neutral-200 dark:divide-neutral-800">
                         {isLoadingInvoices ? (
                           <InvoicesListSkeleton />
-                        ) : invoices.length === 0 ? (
-                          <div className="p-8 text-center text-neutral-500 dark:text-neutral-400">No invoices found.</div>
+                        ) : orders.length === 0 ? (
+                          <div className="p-8 text-center text-neutral-500 dark:text-neutral-400">No orders found.</div>
                         ) : (
                           <>
-                            {invoices.map((invoice) => (
-                              <div key={invoice.id} className="px-4 py-3 flex items-center justify-between hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors">
+                            {orders.map((order) => (
+                              <div key={order.id} className="px-4 py-3 flex items-center justify-between hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors">
                                 <div className="flex items-center gap-3">
                                   <div>
                                     <span className="font-medium text-sm text-neutral-900 dark:text-white">
-                                      {(invoice.amount_paid / 100).toLocaleString('en-US', { style: 'currency', currency: invoice.currency.toUpperCase() })}
+                                      {(order.total_amount / 100).toLocaleString('en-US', { style: 'currency', currency: order.currency.toUpperCase() })}
                                     </span>
                                     <span className="text-xs text-neutral-500 ml-2">
-                                      {formatDate(new Date(invoice.created * 1000))}
+                                      {formatDate(new Date(order.created_at))}
                                     </span>
                                   </div>
                                 </div>
                                 <div className="flex items-center gap-3">
                                   <span className={`px-2 py-0.5 rounded-full text-xs font-medium capitalize ${
-                                    invoice.status === 'paid'
+                                    order.status === 'paid'
                                       ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300'
-                                      : invoice.status === 'open'
+                                      : order.status === 'open'
                                       ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
                                       : 'bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300'
                                   }`}>
-                                    {invoice.status}
+                                    {order.status}
                                   </span>
-                                  {invoice.invoice_pdf && (
-                                    <a href={invoice.invoice_pdf} target="_blank" rel="noopener noreferrer"
-                                       className="inline-flex items-center gap-2 px-2.5 py-1.5 text-xs font-medium text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange" title="Download PDF">
-                                      <DownloadIcon className="w-3.5 h-3.5" />
-                                      <span className="hidden sm:inline">Download</span> PDF
-                                    </a>
-                                  )}
-                                  {invoice.hosted_invoice_url && (
-                                    <a href={invoice.hosted_invoice_url} target="_blank" rel="noopener noreferrer"
-                                       className={`inline-flex items-center gap-2 px-2.5 py-1.5 text-xs font-medium rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange ${
-                                         invoice.status === 'open'
-                                           ? 'bg-brand-orange text-white hover:bg-brand-orange-hover'
-                                           : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800'
-                                       }`}
-                                       title={invoice.status === 'open' ? 'Pay now' : 'View invoice'}>
-                                      <ExternalLinkIcon className="w-3.5 h-3.5" />
-                                      {invoice.status === 'open' ? 'Pay now' : <><span className="hidden sm:inline">View </span>Invoice</>}
-                                    </a>
-                                  )}
                                 </div>
                               </div>
                             ))}
@@ -1595,26 +1550,9 @@ export default function OrganizationSettings() {
               </div>
               {hasActiveSubscription && (
                 <div className="mt-4 p-4 rounded-lg bg-neutral-100 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-700">
-                  {isLoadingPreview ? (
-                    <div className="flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400">
-                      <Spinner className="w-4 h-4" />
-                      Calculating next invoice…
-                    </div>
-                  ) : invoicePreview ? (
-                    <p className="text-sm text-neutral-700 dark:text-neutral-300">
-                      Next invoice:{' '}
-                      {(invoicePreview.amount_due / 100).toLocaleString('en-US', {
-                        style: 'currency',
-                        currency: invoicePreview.currency.toUpperCase(),
-                      })}{' '}
-                      on {formatDate(new Date(invoicePreview.period_end * 1000))}{' '}
-                      <span className="text-neutral-500">(prorated)</span>
-                    </p>
-                  ) : (
-                    <p className="text-sm text-neutral-600 dark:text-neutral-400">
-                      Unable to calculate preview. Your next invoice will reflect prorations.
-                    </p>
-                  )}
+                  <p className="text-sm text-neutral-600 dark:text-neutral-400">
+                    Your plan will be updated. Any prorations will be reflected on your next invoice.
+                  </p>
                 </div>
               )}
               <div className="flex gap-2 mt-6">
diff --git a/lib/api/admin.ts b/lib/api/admin.ts
index f9ab143..8e5cf12 100644
--- a/lib/api/admin.ts
+++ b/lib/api/admin.ts
@@ -2,8 +2,8 @@ import { authFetch } from './client'
 
 export interface AdminOrgSummary {
   organization_id: string
-  stripe_customer_id: string
-  stripe_subscription_id: string
+  billing_customer_id: string
+  billing_subscription_id: string
   plan_id: string
   billing_interval: string
   pageview_limit: number
diff --git a/lib/api/billing.ts b/lib/api/billing.ts
index 0bb3245..49660a6 100644
--- a/lib/api/billing.ts
+++ b/lib/api/billing.ts
@@ -19,16 +19,10 @@ export interface SubscriptionDetails {
   sites_count?: number
   /** Pageviews in current billing period (when pageview_limit > 0). Present when backend supports usage API. */
   pageview_usage?: number
-  /** Business name from Stripe Tax ID collection / business purchase flow (optional). */
+  /** Business name from billing (optional). */
   business_name?: string
-  /** Tax IDs collected on the Stripe customer (VAT, EIN, etc.) for invoice verification. */
-  tax_ids?: TaxID[]
-  /** Next invoice amount in cents (for "Renews on X for €Y" display). */
-  next_invoice_amount_due?: number
-  /** Currency for next invoice (e.g. eur). */
-  next_invoice_currency?: string
-  /** Unix timestamp when next invoice period ends. */
-  next_invoice_period_end?: number
+  /** Tax ID collected on the billing customer (VAT, EIN, etc.). */
+  tax_id?: TaxID | null
 }
 
 export async function getSubscription(): Promise<SubscriptionDetails> {
@@ -66,22 +60,6 @@ export interface ChangePlanParams {
   limit: number
 }
 
-export interface PreviewInvoiceResult {
-  amount_due: number
-  currency: string
-  period_end: number
-}
-
-export async function previewInvoice(params: ChangePlanParams): Promise<PreviewInvoiceResult | null> {
-  const res = await apiRequest<PreviewInvoiceResult | Record<string, never>>('/api/billing/preview-invoice', {
-    method: 'POST',
-    body: JSON.stringify(params),
-  })
-  if (res && typeof res === 'object' && 'amount_due' in res && typeof (res as PreviewInvoiceResult).amount_due === 'number') {
-    return res as PreviewInvoiceResult
-  }
-  return null
-}
 
 export async function changePlan(params: ChangePlanParams): Promise<{ ok: boolean }> {
   return apiRequest<{ ok: boolean }>('/api/billing/change-plan', {
@@ -103,17 +81,18 @@ export async function createCheckoutSession(params: CreateCheckoutParams): Promi
   })
 }
 
-export interface Invoice {
+export interface Order {
   id: string
-  amount_paid: number
-  amount_due: number
+  total_amount: number
+  subtotal_amount: number
+  tax_amount: number
   currency: string
   status: string
-  created: number
-  hosted_invoice_url: string
-  invoice_pdf: string
+  created_at: string
+  paid: boolean
+  invoice_number: string
 }
 
-export async function getInvoices(): Promise<Invoice[]> {
-  return apiRequest<Invoice[]>('/api/billing/invoices')
+export async function getOrders(): Promise<Order[]> {
+  return apiRequest<Order[]>('/api/billing/invoices')
 }
-- 
2.49.1


From a3c1af7c958e6828568eb7dfca988755d44b396e Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 19:50:16 +0100
Subject: [PATCH 207/428] =?UTF-8?q?fix:=20frontend=20consistency=20audit?=
 =?UTF-8?q?=20=E2=80=94=2055=20files=20cleaned=20up?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Consistency fixes:
- Extract getThisWeekRange/getThisMonthRange to shared lib/utils/dateRanges.ts
  (removed 4 identical copy-pasted definitions)
- Add error boundaries for behavior, cdn, search, pagespeed pages
  (4 new error.tsx files — previously fell through to generic parent error)
- Add "View setup guide" CTA to empty states on journeys and behavior pages
  (previously showed text with no actionable button)
- Fix non-lazy useState initializer in funnel detail page
- Fix Bot & Spam settings header from text-xl to text-2xl (matches all other sections)
- Add useMinimumLoading to PageSpeed skeleton (consistent with all other pages)

Cleanup:
- Remove 438 redundant dark: class prefixes (app is dark-mode only)
  text-neutral-500 dark:text-neutral-400 → text-neutral-400 (206 occurrences)
  text-neutral-900 dark:text-white → text-white (232 occurrences)
- Remove dead @stripe/react-stripe-js and @stripe/stripe-js packages
  (billing migrated to Polar, no code imports Stripe)
- Remove duplicate motion package (framer-motion is the one actually used)
---
 app/admin/filtered-traffic/page.tsx           |  16 +-
 app/admin/layout.tsx                          |   2 +-
 app/admin/orgs/[id]/page.tsx                  |  10 +-
 app/admin/orgs/page.tsx                       |  20 +-
 app/admin/page.tsx                            |  12 +-
 app/changelog/page.tsx                        |   2 +-
 app/notifications/page.tsx                    |  14 +-
 app/onboarding/page.tsx                       |   2 +-
 app/share/[id]/page.tsx                       |   6 +-
 app/sites/[id]/behavior/error.tsx             |  13 ++
 app/sites/[id]/behavior/page.tsx              |  20 +-
 app/sites/[id]/cdn/error.tsx                  |  13 ++
 app/sites/[id]/cdn/page.tsx                   |  36 ++--
 app/sites/[id]/funnels/[funnelId]/page.tsx    |  20 +-
 app/sites/[id]/funnels/page.tsx               |   6 +-
 app/sites/[id]/journeys/page.tsx              |  26 +--
 app/sites/[id]/page.tsx                       |  17 +-
 app/sites/[id]/pagespeed/error.tsx            |  13 ++
 app/sites/[id]/pagespeed/page.tsx             |  53 +++---
 app/sites/[id]/search/error.tsx               |  13 ++
 app/sites/[id]/search/page.tsx                |  83 ++++----
 app/sites/[id]/settings/page.tsx              | 180 +++++++++---------
 app/sites/[id]/uptime/page.tsx                |  60 +++---
 app/sites/new/page.tsx                        |  12 +-
 app/welcome/page.tsx                          |  26 +--
 components/ErrorDisplay.tsx                   |   2 +-
 components/Footer.tsx                         |  16 +-
 .../behavior/FrustrationByPageTable.tsx       |  17 +-
 .../behavior/FrustrationSummaryCards.tsx      |  14 +-
 components/behavior/FrustrationTable.tsx      |  15 +-
 components/behavior/FrustrationTrend.tsx      |  16 +-
 components/dashboard/Chart.tsx                |  24 +--
 components/dashboard/ExportModal.tsx          |   2 +-
 components/dashboard/FilterBar.tsx            |   2 +-
 components/dashboard/SiteNav.tsx              |   2 +-
 components/dashboard/TopReferrers.tsx         |  16 +-
 components/funnels/BreakdownDrawer.tsx        |   4 +-
 components/funnels/FunnelForm.tsx             |   4 +-
 components/journeys/ColumnJourney.tsx         |  13 +-
 components/journeys/SankeyJourney.tsx         |  11 +-
 components/journeys/TopPathsTable.tsx         |  12 +-
 .../notifications/NotificationCenter.tsx      |  14 +-
 components/search/ClicksImpressionsChart.tsx  |  10 +-
 components/settings/OrganizationSettings.tsx  | 100 +++++-----
 components/settings/SecurityActivityCard.tsx  |  16 +-
 components/settings/SettingsModalWrapper.tsx  |   2 +-
 components/settings/TrustedDevicesCard.tsx    |  12 +-
 components/sites/DeleteSiteModal.tsx          |   4 +-
 components/sites/ScriptSetupBlock.tsx         |  22 +--
 components/sites/SiteList.tsx                 |  16 +-
 components/sites/VerificationModal.tsx        |  12 +-
 components/tools/UtmBuilder.tsx               |  12 +-
 lib/integration-guides.tsx                    |   2 +-
 lib/utils/dateRanges.ts                       |  20 ++
 package.json                                  |   3 -
 55 files changed, 560 insertions(+), 530 deletions(-)
 create mode 100644 app/sites/[id]/behavior/error.tsx
 create mode 100644 app/sites/[id]/cdn/error.tsx
 create mode 100644 app/sites/[id]/pagespeed/error.tsx
 create mode 100644 app/sites/[id]/search/error.tsx
 create mode 100644 lib/utils/dateRanges.ts

diff --git a/app/admin/filtered-traffic/page.tsx b/app/admin/filtered-traffic/page.tsx
index 488f829..348a58b 100644
--- a/app/admin/filtered-traffic/page.tsx
+++ b/app/admin/filtered-traffic/page.tsx
@@ -28,8 +28,8 @@ export default function FilteredTrafficPage() {
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <div>
-          <h2 className="text-xl font-semibold text-neutral-900 dark:text-white">Filtered Traffic</h2>
-          <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1">
+          <h2 className="text-xl font-semibold text-white">Filtered Traffic</h2>
+          <p className="text-sm text-neutral-400 mt-1">
             {totalBlocked.toLocaleString()} spam referrers blocked in the last {days} days
           </p>
         </div>
@@ -52,22 +52,22 @@ export default function FilteredTrafficPage() {
 
       <div className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 shadow-sm overflow-hidden">
         {referrers.length === 0 ? (
-          <div className="p-12 text-center text-neutral-500 dark:text-neutral-400">
+          <div className="p-12 text-center text-neutral-400">
             No filtered referrers in this period
           </div>
         ) : (
           <table className="w-full text-left text-sm">
             <thead className="border-b border-neutral-200 dark:border-neutral-800">
               <tr>
-                <th className="px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Domain</th>
-                <th className="px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Reason</th>
-                <th className="px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400 text-right">Blocked</th>
+                <th className="px-4 py-3 font-medium text-neutral-400">Domain</th>
+                <th className="px-4 py-3 font-medium text-neutral-400">Reason</th>
+                <th className="px-4 py-3 font-medium text-neutral-400 text-right">Blocked</th>
               </tr>
             </thead>
             <tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
               {referrers.map((r) => (
                 <tr key={`${r.domain}-${r.reason}`} className="hover:bg-neutral-50 dark:hover:bg-neutral-900/50">
-                  <td className="px-4 py-3 text-neutral-900 dark:text-white font-mono text-xs">{r.domain}</td>
+                  <td className="px-4 py-3 text-white font-mono text-xs">{r.domain}</td>
                   <td className="px-4 py-3">
                     <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
                       r.reason === 'blocklist'
@@ -77,7 +77,7 @@ export default function FilteredTrafficPage() {
                       {r.reason}
                     </span>
                   </td>
-                  <td className="px-4 py-3 text-right text-neutral-900 dark:text-white tabular-nums">
+                  <td className="px-4 py-3 text-right text-white tabular-nums">
                     {r.count.toLocaleString()}
                   </td>
                 </tr>
diff --git a/app/admin/layout.tsx b/app/admin/layout.tsx
index a777657..0eb6fa3 100644
--- a/app/admin/layout.tsx
+++ b/app/admin/layout.tsx
@@ -37,7 +37,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
   return (
     <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
       <div className="mb-8 flex items-center justify-between">
-        <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">Pulse Admin</h1>
+        <h1 className="text-2xl font-bold text-white">Pulse Admin</h1>
       </div>
       {children}
     </div>
diff --git a/app/admin/orgs/[id]/page.tsx b/app/admin/orgs/[id]/page.tsx
index bf93de2..74e1a55 100644
--- a/app/admin/orgs/[id]/page.tsx
+++ b/app/admin/orgs/[id]/page.tsx
@@ -107,7 +107,7 @@ export default function AdminOrgDetailPage() {
   return (
     <div className="space-y-6 max-w-4xl mx-auto">
       <div className="flex items-center justify-between">
-        <h2 className="text-2xl font-bold text-neutral-900 dark:text-white">
+        <h2 className="text-2xl font-bold text-white">
           {org.business_name || 'Unnamed Organization'}
         </h2>
         <span className="text-sm font-mono text-neutral-500">{org.organization_id}</span>
@@ -116,7 +116,7 @@ export default function AdminOrgDetailPage() {
       <div className="grid gap-6 md:grid-cols-2">
         {/* Current Status */}
         <div className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 shadow-sm">
-          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-4">Current Status</h3>
+          <h3 className="text-lg font-semibold text-white mb-4">Current Status</h3>
           <div className="grid grid-cols-2 gap-2 text-sm">
               <span className="text-neutral-500">Plan:</span>
               <span className="font-medium">{org.plan_id}</span>
@@ -145,7 +145,7 @@ export default function AdminOrgDetailPage() {
 
         {/* Sites */}
         <div className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 shadow-sm">
-          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-4">Sites ({org.sites.length})</h3>
+          <h3 className="text-lg font-semibold text-white mb-4">Sites ({org.sites.length})</h3>
             <ul className="space-y-2 max-h-60 overflow-y-auto">
               {org.sites.map((site) => (
                 <li key={site.id} className="flex justify-between items-center text-sm p-2 bg-neutral-50 dark:bg-neutral-900 rounded">
@@ -160,7 +160,7 @@ export default function AdminOrgDetailPage() {
 
       {/* Grant Plan Form */}
       <div className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 shadow-sm">
-        <h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-4">Grant Plan (Manual Override)</h3>
+        <h3 className="text-lg font-semibold text-white mb-4">Grant Plan (Manual Override)</h3>
           <form onSubmit={handleGrantPlan} className="space-y-4">
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               <div className="space-y-2">
@@ -196,7 +196,7 @@ export default function AdminOrgDetailPage() {
                   type="datetime-local"
                   value={periodEnd}
                   onChange={(e) => setPeriodEnd(e.target.value)}
-                  className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
+                  className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-white focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
                   required
                 />
                 <div className="flex gap-2 mt-1">
diff --git a/app/admin/orgs/page.tsx b/app/admin/orgs/page.tsx
index 59747ec..e1a2f3d 100644
--- a/app/admin/orgs/page.tsx
+++ b/app/admin/orgs/page.tsx
@@ -43,28 +43,28 @@ export default function AdminOrgsPage() {
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
-        <h2 className="text-xl font-semibold text-neutral-900 dark:text-white">Organizations</h2>
+        <h2 className="text-xl font-semibold text-white">Organizations</h2>
       </div>
 
       <div className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 shadow-sm">
-        <h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-4">All Organizations</h3>
+        <h3 className="text-lg font-semibold text-white mb-4">All Organizations</h3>
         <div className="overflow-x-auto">
             <table className="w-full text-left text-sm">
               <thead className="border-b border-neutral-200 dark:border-neutral-800">
                 <tr>
-                  <th className="px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Name</th>
-                  <th className="px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Org ID</th>
-                  <th className="px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Plan</th>
-                  <th className="px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Status</th>
-                  <th className="px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Limit</th>
-                  <th className="px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Updated</th>
-                  <th className="px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Actions</th>
+                  <th className="px-4 py-3 font-medium text-neutral-400">Name</th>
+                  <th className="px-4 py-3 font-medium text-neutral-400">Org ID</th>
+                  <th className="px-4 py-3 font-medium text-neutral-400">Plan</th>
+                  <th className="px-4 py-3 font-medium text-neutral-400">Status</th>
+                  <th className="px-4 py-3 font-medium text-neutral-400">Limit</th>
+                  <th className="px-4 py-3 font-medium text-neutral-400">Updated</th>
+                  <th className="px-4 py-3 font-medium text-neutral-400">Actions</th>
                 </tr>
               </thead>
               <tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
                 {orgs.map((org) => (
                   <tr key={org.organization_id} className="hover:bg-neutral-50 dark:hover:bg-neutral-900/50">
-                    <td className="px-4 py-3 text-neutral-900 dark:text-white font-medium">
+                    <td className="px-4 py-3 text-white font-medium">
                       {org.business_name || 'N/A'}
                     </td>
                     <td className="px-4 py-3">
diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index e4aa99d..05bb448 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -9,9 +9,9 @@ export default function AdminDashboard() {
         href="/admin/orgs"
         className="block transition-transform hover:scale-[1.02] rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 shadow-sm"
       >
-        <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">Organizations</h3>
-        <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1">Manage organization plans and limits</p>
-        <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-4">
+        <h3 className="text-lg font-semibold text-white">Organizations</h3>
+        <p className="text-sm text-neutral-400 mt-1">Manage organization plans and limits</p>
+        <p className="text-sm text-neutral-400 mt-4">
           View all organizations, check billing status, and manually grant plans.
         </p>
       </Link>
@@ -19,9 +19,9 @@ export default function AdminDashboard() {
         href="/admin/filtered-traffic"
         className="block transition-transform hover:scale-[1.02] rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 shadow-sm"
       >
-        <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">Filtered Traffic</h3>
-        <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1">Monitor blocked referrer spam</p>
-        <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-4">
+        <h3 className="text-lg font-semibold text-white">Filtered Traffic</h3>
+        <p className="text-sm text-neutral-400 mt-1">Monitor blocked referrer spam</p>
+        <p className="text-sm text-neutral-400 mt-4">
           View domains blocked by the spam filter and check for false positives.
         </p>
       </Link>
diff --git a/app/changelog/page.tsx b/app/changelog/page.tsx
index c0b9c84..39d8366 100644
--- a/app/changelog/page.tsx
+++ b/app/changelog/page.tsx
@@ -18,7 +18,7 @@ export default function ChangelogPage() {
 
   return (
     <div className="mx-auto max-w-3xl px-4 sm:px-6 py-8">
-      <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white mb-2">
+      <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white mb-2">
         Changelog
       </h1>
       <p className="text-neutral-600 dark:text-neutral-400 mb-8 text-sm">
diff --git a/app/notifications/page.tsx b/app/notifications/page.tsx
index 1e7ea60..eb31ee3 100644
--- a/app/notifications/page.tsx
+++ b/app/notifications/page.tsx
@@ -122,8 +122,8 @@ export default function NotificationsPage() {
           )}
         </div>
 
-        <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">Notifications</h1>
-        <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-6">
+        <h1 className="text-2xl font-bold text-white mb-2">Notifications</h1>
+        <p className="text-sm text-neutral-400 mb-6">
           Manage which notifications you receive in{' '}
           <Link href="/org-settings?tab=notifications" className="text-brand-orange hover:underline">
             Organization Settings → Notifications
@@ -137,7 +137,7 @@ export default function NotificationsPage() {
             {error}
           </div>
         ) : notifications.length === 0 ? (
-          <div className="p-6 text-center text-neutral-500 dark:text-neutral-400 rounded-2xl border border-neutral-200 dark:border-neutral-800">
+          <div className="p-6 text-center text-neutral-400 rounded-2xl border border-neutral-200 dark:border-neutral-800">
             <p>No notifications yet</p>
             <p className="text-sm mt-2">
               Manage which notifications you receive in{' '}
@@ -159,11 +159,11 @@ export default function NotificationsPage() {
                     <div className="flex gap-3">
                       {getTypeIcon(n.type)}
                       <div className="min-w-0 flex-1">
-                        <p className={`text-sm ${!n.read ? 'font-medium' : ''} text-neutral-900 dark:text-white`}>
+                        <p className={`text-sm ${!n.read ? 'font-medium' : ''} text-white`}>
                           {n.title}
                         </p>
                         {n.body && (
-                          <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">{n.body}</p>
+                          <p className="text-xs text-neutral-400 mt-0.5">{n.body}</p>
                         )}
                         <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-1">
                           {formatTimeAgo(n.created_at)}
@@ -182,11 +182,11 @@ export default function NotificationsPage() {
                     <div className="flex gap-3">
                       {getTypeIcon(n.type)}
                       <div className="min-w-0 flex-1">
-                        <p className={`text-sm ${!n.read ? 'font-medium' : ''} text-neutral-900 dark:text-white`}>
+                        <p className={`text-sm ${!n.read ? 'font-medium' : ''} text-white`}>
                           {n.title}
                         </p>
                         {n.body && (
-                          <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">{n.body}</p>
+                          <p className="text-xs text-neutral-400 mt-0.5">{n.body}</p>
                         )}
                         <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-1">
                           {formatTimeAgo(n.created_at)}
diff --git a/app/onboarding/page.tsx b/app/onboarding/page.tsx
index 72b5307..dcbd41f 100644
--- a/app/onboarding/page.tsx
+++ b/app/onboarding/page.tsx
@@ -47,7 +47,7 @@ export default function OnboardingPage() {
     <div className="min-h-screen flex items-center justify-center bg-neutral-50 dark:bg-neutral-900 px-4">
       <div className="max-w-md w-full space-y-8">
         <div className="text-center">
-          <h2 className="mt-6 text-2xl font-bold text-neutral-900 dark:text-white">
+          <h2 className="mt-6 text-2xl font-bold text-white">
             Welcome to Pulse
           </h2>
           <p className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/app/share/[id]/page.tsx b/app/share/[id]/page.tsx
index c5b00b9..664999e 100644
--- a/app/share/[id]/page.tsx
+++ b/app/share/[id]/page.tsx
@@ -195,7 +195,7 @@ export default function PublicDashboardPage() {
              <div className="w-12 h-12 bg-brand-orange/10 rounded-xl flex items-center justify-center mx-auto mb-4 text-brand-orange">
               <ZapIcon className="w-6 h-6" />
             </div>
-            <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">
+            <h1 className="text-2xl font-bold text-white mb-2">
               Protected Dashboard
             </h1>
             <p className="text-neutral-600 dark:text-neutral-400">
@@ -210,7 +210,7 @@ export default function PublicDashboardPage() {
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 placeholder="Enter password"
-                className="w-full px-4 py-2 border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white focus:ring-2 focus:ring-brand-orange focus:border-transparent"
+                className="w-full px-4 py-2 border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-white focus:ring-2 focus:ring-brand-orange focus:border-transparent"
                 autoFocus
               />
             </div>
@@ -270,7 +270,7 @@ export default function PublicDashboardPage() {
                         <div className="w-2 h-2 rounded-full bg-brand-orange animate-pulse" />
                         <span className="text-sm font-medium text-brand-orange uppercase tracking-wider">Public Dashboard</span>
                     </div>
-                    <h1 className="text-2xl font-bold text-neutral-900 dark:text-white flex items-center gap-3">
+                    <h1 className="text-2xl font-bold text-white flex items-center gap-3">
                     <Image
                         src={`${FAVICON_SERVICE_URL}?domain=${site.domain}&sz=64`}
                         alt={site.name}
diff --git a/app/sites/[id]/behavior/error.tsx b/app/sites/[id]/behavior/error.tsx
new file mode 100644
index 0000000..8405632
--- /dev/null
+++ b/app/sites/[id]/behavior/error.tsx
@@ -0,0 +1,13 @@
+'use client'
+
+import ErrorDisplay from '@/components/ErrorDisplay'
+
+export default function BehaviorError({ reset }: { error: Error; reset: () => void }) {
+  return (
+    <ErrorDisplay
+      title="Behavior data failed to load"
+      message="We couldn't load the frustration signals. This might be a temporary issue — try again."
+      onRetry={reset}
+    />
+  )
+}
diff --git a/app/sites/[id]/behavior/page.tsx b/app/sites/[id]/behavior/page.tsx
index 8e0a2c4..050b635 100644
--- a/app/sites/[id]/behavior/page.tsx
+++ b/app/sites/[id]/behavior/page.tsx
@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useState } from 'react'
 import { useParams } from 'next/navigation'
-import { getDateRange, formatDate } from '@ciphera-net/ui'
+import { getDateRange, formatDate, getThisWeekRange, getThisMonthRange } from '@/lib/utils/dateRanges'
 import { Select, DatePicker } from '@ciphera-net/ui'
 import dynamic from 'next/dynamic'
 import { getRageClicks, getDeadClicks } from '@/lib/api/stats'
@@ -15,20 +15,6 @@ import { BehaviorSkeleton, useMinimumLoading, useSkeletonFade } from '@/componen
 
 const ScrollDepth = dynamic(() => import('@/components/dashboard/ScrollDepth'))
 
-function getThisWeekRange(): { start: string; end: string } {
-  const today = new Date()
-  const dayOfWeek = today.getDay()
-  const monday = new Date(today)
-  monday.setDate(today.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1))
-  return { start: formatDate(monday), end: formatDate(today) }
-}
-
-function getThisMonthRange(): { start: string; end: string } {
-  const today = new Date()
-  const firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1)
-  return { start: formatDate(firstOfMonth), end: formatDate(today) }
-}
-
 export default function BehaviorPage() {
   const params = useParams()
   const siteId = params.id as string
@@ -74,10 +60,10 @@ export default function BehaviorPage() {
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">
+          <h1 className="text-2xl font-bold text-white mb-1">
             Behavior
           </h1>
-          <p className="text-sm text-neutral-500 dark:text-neutral-400">
+          <p className="text-sm text-neutral-400">
             Frustration signals and user engagement patterns
           </p>
         </div>
diff --git a/app/sites/[id]/cdn/error.tsx b/app/sites/[id]/cdn/error.tsx
new file mode 100644
index 0000000..e11400b
--- /dev/null
+++ b/app/sites/[id]/cdn/error.tsx
@@ -0,0 +1,13 @@
+'use client'
+
+import ErrorDisplay from '@/components/ErrorDisplay'
+
+export default function CDNError({ reset }: { error: Error; reset: () => void }) {
+  return (
+    <ErrorDisplay
+      title="CDN data failed to load"
+      message="We couldn't load the BunnyCDN data. This might be a temporary issue — try again."
+      onRetry={reset}
+    />
+  )
+}
diff --git a/app/sites/[id]/cdn/page.tsx b/app/sites/[id]/cdn/page.tsx
index a244b55..b8872d0 100644
--- a/app/sites/[id]/cdn/page.tsx
+++ b/app/sites/[id]/cdn/page.tsx
@@ -177,10 +177,10 @@ export default function CDNPage() {
           <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-5 mb-6">
             <CloudArrowUp size={40} className="text-neutral-400 dark:text-neutral-500" />
           </div>
-          <h2 className="text-xl font-semibold text-neutral-900 dark:text-white mb-2">
+          <h2 className="text-xl font-semibold text-white mb-2">
             Connect BunnyCDN
           </h2>
-          <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-md mb-6">
+          <p className="text-sm text-neutral-400 max-w-md mb-6">
             Monitor your CDN performance including bandwidth usage, cache hit rates, request volumes, and geographic distribution.
           </p>
           <Link
@@ -212,10 +212,10 @@ export default function CDNPage() {
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">
+          <h1 className="text-2xl font-bold text-white mb-1">
             CDN Analytics
           </h1>
-          <p className="text-sm text-neutral-500 dark:text-neutral-400">
+          <p className="text-sm text-neutral-400">
             BunnyCDN performance, bandwidth, and cache metrics
           </p>
         </div>
@@ -281,7 +281,7 @@ export default function CDNPage() {
 
       {/* Bandwidth chart */}
       <div className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6 mb-6">
-        <h2 className="text-sm font-semibold text-neutral-900 dark:text-white mb-4">Bandwidth</h2>
+        <h2 className="text-sm font-semibold text-white mb-4">Bandwidth</h2>
         {daily.length > 0 ? (
           <ResponsiveContainer width="100%" height={280}>
             <AreaChart data={daily} margin={{ top: 4, right: 4, bottom: 0, left: 0 }}>
@@ -317,8 +317,8 @@ export default function CDNPage() {
                   if (!active || !payload?.length) return null
                   return (
                     <div className="rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 shadow-lg text-sm">
-                      <p className="text-neutral-500 dark:text-neutral-400 mb-1">{formatDateShort(label)}</p>
-                      <p className="text-neutral-900 dark:text-white font-medium">
+                      <p className="text-neutral-400 mb-1">{formatDateShort(label)}</p>
+                      <p className="text-white font-medium">
                         Total: {formatBytes(payload[0]?.value as number)}
                       </p>
                       {payload[1] && (
@@ -359,7 +359,7 @@ export default function CDNPage() {
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
         {/* Requests chart */}
         <div className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6">
-          <h2 className="text-sm font-semibold text-neutral-900 dark:text-white mb-4">Requests</h2>
+          <h2 className="text-sm font-semibold text-white mb-4">Requests</h2>
           {daily.length > 0 ? (
             <ResponsiveContainer width="100%" height={220}>
               <BarChart data={daily} margin={{ top: 4, right: 4, bottom: 0, left: 0 }}>
@@ -385,8 +385,8 @@ export default function CDNPage() {
                     if (!active || !payload?.length) return null
                     return (
                       <div className="rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 shadow-lg text-sm">
-                        <p className="text-neutral-500 dark:text-neutral-400 mb-1">{formatDateShort(label)}</p>
-                        <p className="text-neutral-900 dark:text-white font-medium">
+                        <p className="text-neutral-400 mb-1">{formatDateShort(label)}</p>
+                        <p className="text-white font-medium">
                           {formatNumber(payload[0]?.value as number)} requests
                         </p>
                       </div>
@@ -405,7 +405,7 @@ export default function CDNPage() {
 
         {/* Errors chart */}
         <div className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6">
-          <h2 className="text-sm font-semibold text-neutral-900 dark:text-white mb-4">Errors</h2>
+          <h2 className="text-sm font-semibold text-white mb-4">Errors</h2>
           {daily.length > 0 ? (
             <ResponsiveContainer width="100%" height={220}>
               <BarChart
@@ -439,7 +439,7 @@ export default function CDNPage() {
                     if (!active || !payload?.length) return null
                     return (
                       <div className="rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 px-3 py-2 shadow-lg text-sm">
-                        <p className="text-neutral-500 dark:text-neutral-400 mb-1">{formatDateShort(label)}</p>
+                        <p className="text-neutral-400 mb-1">{formatDateShort(label)}</p>
                         {payload.map((entry) => (
                           <p key={entry.name} style={{ color: entry.color }} className="font-medium">
                             {entry.name}: {formatNumber(entry.value as number)}
@@ -464,7 +464,7 @@ export default function CDNPage() {
 
       {/* Traffic Distribution */}
       <div className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-6">
-        <h2 className="text-sm font-semibold text-neutral-900 dark:text-white mb-4">Traffic Distribution</h2>
+        <h2 className="text-sm font-semibold text-white mb-4">Traffic Distribution</h2>
         {countries.length > 0 ? (
           <>
             <div className="h-[360px] mb-8">
@@ -480,9 +480,9 @@ export default function CDNPage() {
                     <div className="flex items-center gap-2.5 mb-2">
                       {cc && getFlagIcon(cc)}
                       <div className="flex-1 min-w-0">
-                        <span className="text-sm font-medium text-neutral-900 dark:text-white truncate block">{city}</span>
+                        <span className="text-sm font-medium text-white truncate block">{city}</span>
                       </div>
-                      <span className="text-sm tabular-nums text-neutral-500 dark:text-neutral-400 shrink-0">
+                      <span className="text-sm tabular-nums text-neutral-400 shrink-0">
                         {formatBytes(row.bandwidth)}
                       </span>
                     </div>
@@ -530,13 +530,13 @@ function OverviewCard({
 
   return (
     <div className="p-4 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
-      <p className="text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1">{label}</p>
-      <p className="text-2xl font-bold text-neutral-900 dark:text-white">{value}</p>
+      <p className="text-xs font-medium text-neutral-400 mb-1">{label}</p>
+      <p className="text-2xl font-bold text-white">{value}</p>
       {changeLabel && (
         <p className={`text-xs mt-1 font-medium ${
           isGood ? 'text-green-600 dark:text-green-400' :
           isBad ? 'text-red-600 dark:text-red-400' :
-          'text-neutral-500 dark:text-neutral-400'
+          'text-neutral-400'
         }`}>
           {changeLabel} vs previous period
         </p>
diff --git a/app/sites/[id]/funnels/[funnelId]/page.tsx b/app/sites/[id]/funnels/[funnelId]/page.tsx
index d8fe3c8..0ce4fe1 100644
--- a/app/sites/[id]/funnels/[funnelId]/page.tsx
+++ b/app/sites/[id]/funnels/[funnelId]/page.tsx
@@ -25,7 +25,7 @@ export default function FunnelReportPage() {
   const [funnel, setFunnel] = useState<Funnel | null>(null)
   const [stats, setStats] = useState<FunnelStats | null>(null)
   const [loading, setLoading] = useState(true)
-  const [dateRange, setDateRange] = useState(getDateRange(30))
+  const [dateRange, setDateRange] = useState(() => getDateRange(30))
   const [datePreset, setDatePreset] = useState<'7' | '30' | 'custom'>('30')
   const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
   const [loadError, setLoadError] = useState<'not_found' | 'forbidden' | 'error' | null>(null)
@@ -154,7 +154,7 @@ export default function FunnelReportPage() {
               <ChevronLeftIcon className="w-5 h-5" />
             </Link>
             <div>
-              <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
+              <h1 className="text-2xl font-bold text-white">
                 {funnel.name}
               </h1>
               {funnel.description && (
@@ -236,7 +236,7 @@ export default function FunnelReportPage() {
         {trends && trends.dates.length > 1 && (
           <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden shadow-sm p-6 mb-8">
             <div className="flex items-center justify-between mb-4">
-              <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+              <h3 className="text-lg font-semibold text-white">
                 Conversion Trends
               </h3>
               <div className="flex flex-wrap gap-2">
@@ -322,10 +322,10 @@ export default function FunnelReportPage() {
             <table className="w-full text-left text-sm">
               <thead className="bg-neutral-50 dark:bg-neutral-800/50 border-b border-neutral-200 dark:border-neutral-800">
                 <tr>
-                  <th className="px-6 py-4 font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Step</th>
-                  <th className="px-6 py-4 font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider text-right">Visitors</th>
-                  <th className="px-6 py-4 font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider text-right">Drop-off</th>
-                  <th className="px-6 py-4 font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider text-right">Conversion</th>
+                  <th className="px-6 py-4 font-medium text-neutral-400 uppercase tracking-wider">Step</th>
+                  <th className="px-6 py-4 font-medium text-neutral-400 uppercase tracking-wider text-right">Visitors</th>
+                  <th className="px-6 py-4 font-medium text-neutral-400 uppercase tracking-wider text-right">Drop-off</th>
+                  <th className="px-6 py-4 font-medium text-neutral-400 uppercase tracking-wider text-right">Conversion</th>
                 </tr>
               </thead>
               <tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
@@ -338,13 +338,13 @@ export default function FunnelReportPage() {
                             {i + 1}
                           </span>
                           <div>
-                            <p className="font-medium text-neutral-900 dark:text-white">{step.step.name}</p>
-                            <p className="text-neutral-500 dark:text-neutral-400 text-xs font-mono mt-0.5">{step.step.value}</p>
+                            <p className="font-medium text-white">{step.step.name}</p>
+                            <p className="text-neutral-400 text-xs font-mono mt-0.5">{step.step.value}</p>
                           </div>
                         </div>
                       </td>
                       <td className="px-6 py-4 text-right">
-                        <span className="font-medium text-neutral-900 dark:text-white">
+                        <span className="font-medium text-white">
                           {step.visitors.toLocaleString()}
                         </span>
                       </td>
diff --git a/app/sites/[id]/funnels/page.tsx b/app/sites/[id]/funnels/page.tsx
index cec7b5b..5638bf0 100644
--- a/app/sites/[id]/funnels/page.tsx
+++ b/app/sites/[id]/funnels/page.tsx
@@ -40,7 +40,7 @@ export default function FunnelsPage() {
       <div className="mb-8">
         <div className="flex items-center justify-between mb-6">
           <div>
-            <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
+            <h1 className="text-2xl font-bold text-white">
               Funnels
             </h1>
             <p className="text-neutral-600 dark:text-neutral-400">
@@ -65,7 +65,7 @@ export default function FunnelsPage() {
               className="mb-6"
               unoptimized
             />
-            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-2">
+            <h3 className="text-lg font-semibold text-white mb-2">
               No funnels yet
             </h3>
             <p className="text-neutral-600 dark:text-neutral-400 mb-6 max-w-md mx-auto">
@@ -89,7 +89,7 @@ export default function FunnelsPage() {
                 <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 hover:border-brand-orange/50 transition-colors">
                   <div className="flex items-center justify-between">
                     <div>
-                      <h3 className="text-xl font-bold text-neutral-900 dark:text-white group-hover:text-brand-orange transition-colors">
+                      <h3 className="text-xl font-bold text-white group-hover:text-brand-orange transition-colors">
                         {funnel.name}
                       </h3>
                       {funnel.description && (
diff --git a/app/sites/[id]/journeys/page.tsx b/app/sites/[id]/journeys/page.tsx
index 10d66e6..94fab56 100644
--- a/app/sites/[id]/journeys/page.tsx
+++ b/app/sites/[id]/journeys/page.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react'
 import { useParams } from 'next/navigation'
 import { motion } from 'framer-motion'
-import { getDateRange, formatDate } from '@ciphera-net/ui'
+import { getDateRange, formatDate, getThisWeekRange, getThisMonthRange } from '@/lib/utils/dateRanges'
 import { Select, DatePicker } from '@ciphera-net/ui'
 import ColumnJourney from '@/components/journeys/ColumnJourney'
 import SankeyJourney from '@/components/journeys/SankeyJourney'
@@ -18,20 +18,6 @@ import {
 
 const DEFAULT_DEPTH = 4
 
-function getThisWeekRange(): { start: string; end: string } {
-  const today = new Date()
-  const dayOfWeek = today.getDay()
-  const monday = new Date(today)
-  monday.setDate(today.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1))
-  return { start: formatDate(monday), end: formatDate(today) }
-}
-
-function getThisMonthRange(): { start: string; end: string } {
-  const today = new Date()
-  const firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1)
-  return { start: formatDate(firstOfMonth), end: formatDate(today) }
-}
-
 export default function JourneysPage() {
   const params = useParams()
   const siteId = params.id as string
@@ -91,10 +77,10 @@ export default function JourneysPage() {
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">
+          <h1 className="text-2xl font-bold text-white mb-1">
             Journeys
           </h1>
-          <p className="text-sm text-neutral-500 dark:text-neutral-400">
+          <p className="text-sm text-neutral-400">
             How visitors navigate through your site
           </p>
         </div>
@@ -143,7 +129,7 @@ export default function JourneysPage() {
           <div className="flex flex-col sm:flex-row sm:items-center gap-6">
             {/* Depth slider */}
             <div className="flex-1">
-              <div className="flex justify-between text-sm font-medium text-neutral-500 dark:text-neutral-400 mb-3">
+              <div className="flex justify-between text-sm font-medium text-neutral-400 mb-3">
                 <span>2 steps</span>
                 <span className="text-brand-orange font-bold">
                   {depth} steps deep
@@ -196,7 +182,7 @@ export default function JourneysPage() {
                 aria-selected={viewMode === mode}
                 className={`relative px-3 py-1 text-xs font-medium transition-colors capitalize focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded cursor-pointer ${
                   viewMode === mode
-                    ? 'text-neutral-900 dark:text-white'
+                    ? 'text-white'
                     : 'text-neutral-400 dark:text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300'
                 }`}
               >
@@ -232,7 +218,7 @@ export default function JourneysPage() {
 
         {/* Footer */}
         {totalSessions > 0 && (
-          <div className="px-6 pb-5 text-sm text-neutral-500 dark:text-neutral-400">
+          <div className="px-6 pb-5 text-sm text-neutral-400">
             {totalSessions.toLocaleString()} sessions tracked
           </div>
         )}
diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx
index 5ad39da..892f135 100644
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -17,7 +17,7 @@ import {
   type Stats,
   type DailyStat,
 } from '@/lib/api/stats'
-import { getDateRange, formatDate } from '@ciphera-net/ui'
+import { getDateRange, formatDate, getThisWeekRange, getThisMonthRange } from '@/lib/utils/dateRanges'
 import { toast } from '@ciphera-net/ui'
 import { Button } from '@ciphera-net/ui'
 import { Select, DatePicker, DownloadIcon } from '@ciphera-net/ui'
@@ -63,19 +63,6 @@ function loadSavedSettings(): {
   }
 }
 
-function getThisWeekRange(): { start: string; end: string } {
-  const today = new Date()
-  const dayOfWeek = today.getDay()
-  const monday = new Date(today)
-  monday.setDate(today.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1))
-  return { start: formatDate(monday), end: formatDate(today) }
-}
-
-function getThisMonthRange(): { start: string; end: string } {
-  const today = new Date()
-  const firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1)
-  return { start: formatDate(firstOfMonth), end: formatDate(today) }
-}
 
 function getInitialDateRange(): { start: string; end: string } {
   const settings = loadSavedSettings()
@@ -442,7 +429,7 @@ export default function SiteDashboardPage() {
         <div className="flex items-center justify-between mb-3">
           <div className="flex items-center gap-4">
             <div>
-              <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">
+              <h1 className="text-2xl font-bold text-white mb-1">
                 {site.name}
               </h1>
               <p className="text-neutral-600 dark:text-neutral-400">
diff --git a/app/sites/[id]/pagespeed/error.tsx b/app/sites/[id]/pagespeed/error.tsx
new file mode 100644
index 0000000..04362bb
--- /dev/null
+++ b/app/sites/[id]/pagespeed/error.tsx
@@ -0,0 +1,13 @@
+'use client'
+
+import ErrorDisplay from '@/components/ErrorDisplay'
+
+export default function PageSpeedError({ reset }: { error: Error; reset: () => void }) {
+  return (
+    <ErrorDisplay
+      title="PageSpeed data failed to load"
+      message="We couldn't load the PageSpeed data. This might be a temporary issue — try again."
+      onRetry={reset}
+    />
+  )
+}
diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index 0e9354b..4eb5f27 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -9,6 +9,7 @@ import { toast, Button } from '@ciphera-net/ui'
 import { motion } from 'framer-motion'
 import ScoreGauge from '@/components/pagespeed/ScoreGauge'
 import { AreaChart as VisxAreaChart, Area as VisxArea, Grid as VisxGrid, XAxis as VisxXAxis, YAxis as VisxYAxis, ChartTooltip as VisxChartTooltip } from '@/components/ui/area-chart'
+import { useMinimumLoading, useSkeletonFade } from '@/components/skeletons'
 
 // * Metric status thresholds (Google's Core Web Vitals thresholds)
 function getMetricStatus(metric: string, value: number | null): { label: string; color: string } {
@@ -223,8 +224,10 @@ export default function PageSpeedPage() {
     }
   }
 
-  // * Loading state
-  if (isLoading && !latestChecks) return <PageSpeedSkeleton />
+  // * Loading state with minimum display time (consistent with other pages)
+  const showSkeleton = useMinimumLoading(isLoading && !latestChecks)
+  const fadeClass = useSkeletonFade(showSkeleton)
+  if (showSkeleton) return <PageSpeedSkeleton />
   if (!site) return <div className="p-8 text-neutral-500">Site not found</div>
 
   const enabled = config?.enabled ?? false
@@ -235,10 +238,10 @@ export default function PageSpeedPage() {
       <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
         {/* Header */}
         <div className="mb-8">
-          <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">
+          <h1 className="text-2xl font-bold text-white mb-1">
             PageSpeed
           </h1>
-          <p className="text-sm text-neutral-500 dark:text-neutral-400">
+          <p className="text-sm text-neutral-400">
             Monitor your site&apos;s performance and Core Web Vitals
           </p>
         </div>
@@ -246,14 +249,14 @@ export default function PageSpeedPage() {
         {/* Empty state */}
         <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-12 text-center">
           <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center">
-            <svg className="w-8 h-8 text-neutral-500 dark:text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+            <svg className="w-8 h-8 text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
               <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
             </svg>
           </div>
-          <h3 className="font-semibold text-neutral-900 dark:text-white mb-2">
+          <h3 className="font-semibold text-white mb-2">
             PageSpeed monitoring is disabled
           </h3>
-          <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-6 max-w-md mx-auto">
+          <p className="text-sm text-neutral-400 mb-6 max-w-md mx-auto">
             Enable PageSpeed monitoring to track your site&apos;s performance scores, Core Web Vitals, and get actionable improvement suggestions.
           </p>
 
@@ -263,7 +266,7 @@ export default function PageSpeedPage() {
             <select
               value={frequency}
               onChange={(e) => setFrequency(e.target.value)}
-              className="text-sm border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-100"
+              className="text-sm border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-white rounded-lg px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-100"
             >
               <option value="daily">Daily</option>
               <option value="weekly">Weekly</option>
@@ -358,10 +361,10 @@ export default function PageSpeedPage() {
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">
+          <h1 className="text-2xl font-bold text-white mb-1">
             PageSpeed
           </h1>
-          <p className="text-sm text-neutral-500 dark:text-neutral-400">
+          <p className="text-sm text-neutral-400">
             Performance scores and Core Web Vitals for {site.domain}
           </p>
         </div>
@@ -443,7 +446,7 @@ export default function PageSpeedPage() {
 
         {/* Check navigator + frequency + legend */}
         <div className="flex flex-wrap items-center gap-x-4 gap-y-2 mt-6 pt-4 border-t border-neutral-100 dark:border-neutral-800">
-          <div className="flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400">
+          <div className="flex items-center gap-2 text-sm text-neutral-400">
             {/* Prev/Next arrows */}
             {checkTimestamps.length > 1 && (
               <button
@@ -497,7 +500,7 @@ export default function PageSpeedPage() {
       {/* Filmstrip — page load progression */}
       {currentCheck?.filmstrip && currentCheck.filmstrip.length > 0 && (
         <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8 mb-6 relative">
-          <h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-4">
+          <h3 className="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-4">
             Page Load Timeline
           </h3>
           <div className="flex items-center overflow-x-auto gap-1 scrollbar-none">
@@ -521,7 +524,7 @@ export default function PageSpeedPage() {
 
       {/* Section 2 — Metrics Card */}
       <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8 mb-6">
-        <h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-5">
+        <h3 className="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-5">
           Metrics
         </h3>
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-6">
@@ -529,10 +532,10 @@ export default function PageSpeedPage() {
             <div key={key} className="flex items-start gap-3">
               <span className={`mt-1.5 inline-block w-2.5 h-2.5 rounded-full flex-shrink-0 ${getMetricDotColor(key, value)}`} />
               <div>
-                <div className="text-sm text-neutral-500 dark:text-neutral-400">
+                <div className="text-sm text-neutral-400">
                   {label}
                 </div>
-                <div className="text-2xl font-semibold text-neutral-900 dark:text-white tabular-nums">
+                <div className="text-2xl font-semibold text-white tabular-nums">
                   {formatMetricValue(key, value)}
                 </div>
               </div>
@@ -544,7 +547,7 @@ export default function PageSpeedPage() {
       {/* Section 3 — Score Trend Chart (visx) */}
       {chartData.length >= 2 && (
         <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8 mb-6 overflow-hidden">
-          <h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-4">
+          <h3 className="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-4">
             Performance Score Trend
           </h3>
           <div>
@@ -597,10 +600,10 @@ export default function PageSpeedPage() {
                 <div className="flex items-center gap-5 mb-6">
                   <ScoreGauge score={scoreByGroup[group.key]} label="" size={56} />
                   <div>
-                    <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+                    <h3 className="text-lg font-semibold text-white">
                       {group.label}
                     </h3>
-                    <p className="text-xs text-neutral-500 dark:text-neutral-400">
+                    <p className="text-xs text-neutral-400">
                       {(() => {
                         const realIssues = groupAudits.filter(a => a.score !== null && a.score !== undefined).length
                         return realIssues === 0 ? 'No issues found' : `${realIssues} issue${realIssues !== 1 ? 's' : ''} found`
@@ -615,7 +618,7 @@ export default function PageSpeedPage() {
 
                 {groupManual.length > 0 && (
                   <details className="mt-4">
-                    <summary className="cursor-pointer text-sm font-medium text-neutral-500 dark:text-neutral-400 select-none hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors">
+                    <summary className="cursor-pointer text-sm font-medium text-neutral-400 select-none hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors">
                       <span className="ml-1">Additional items to manually check ({groupManual.length})</span>
                     </summary>
                     <div className="mt-2 divide-y divide-neutral-100 dark:divide-neutral-800">
@@ -626,7 +629,7 @@ export default function PageSpeedPage() {
 
                 {groupPassed.length > 0 && (
                   <details className="mt-4">
-                    <summary className="cursor-pointer text-sm font-medium text-neutral-500 dark:text-neutral-400 select-none hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors">
+                    <summary className="cursor-pointer text-sm font-medium text-neutral-400 select-none hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors">
                       <span className="ml-1">{groupPassed.length} passed audit{groupPassed.length !== 1 ? 's' : ''}</span>
                     </summary>
                     <div className="mt-2 divide-y divide-neutral-100 dark:divide-neutral-800">
@@ -738,7 +741,7 @@ function AuditRow({ audit }: { audit: AuditSummary }) {
     <details className="group">
       <summary className="flex items-center gap-3 py-3 px-2 rounded-lg hover:bg-neutral-50 dark:hover:bg-neutral-800/50 cursor-pointer list-none">
         <AuditSeverityIcon score={audit.score} />
-        <span className="font-medium text-sm text-neutral-900 dark:text-white flex-1 min-w-0 truncate">{audit.title}</span>
+        <span className="font-medium text-sm text-white flex-1 min-w-0 truncate">{audit.title}</span>
         {audit.display_value && (
           <span className="text-xs text-neutral-500 dark:text-neutral-500 flex-shrink-0 tabular-nums">{audit.display_value}</span>
         )}
@@ -754,7 +757,7 @@ function AuditRow({ audit }: { audit: AuditSummary }) {
       <div className="pl-8 pr-2 pb-3 pt-1">
         {/* Description with parsed markdown links */}
         {audit.description && (
-          <p className="text-xs text-neutral-500 dark:text-neutral-400 mb-3 leading-relaxed">
+          <p className="text-xs text-neutral-400 mb-3 leading-relaxed">
             <AuditDescription text={audit.description} />
           </p>
         )}
@@ -822,15 +825,15 @@ function AuditItem({ item }: { item: Record<string, any> }) {
       {/* Content */}
       <div className="flex-1 min-w-0">
         {label && (
-          <div className="font-medium text-neutral-900 dark:text-white text-xs mb-0.5">
+          <div className="font-medium text-white text-xs mb-0.5">
             {label}
           </div>
         )}
         {url && (
-          <div className="font-mono text-xs text-neutral-500 dark:text-neutral-400 break-all">{url}</div>
+          <div className="font-mono text-xs text-neutral-400 break-all">{url}</div>
         )}
         {text && (
-          <div className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">{text}</div>
+          <div className="text-xs text-neutral-400 mt-0.5">{text}</div>
         )}
         {item.node?.snippet && (
           <code className="text-xs bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded break-all mt-1 inline-block">{item.node.snippet}</code>
diff --git a/app/sites/[id]/search/error.tsx b/app/sites/[id]/search/error.tsx
new file mode 100644
index 0000000..65d8929
--- /dev/null
+++ b/app/sites/[id]/search/error.tsx
@@ -0,0 +1,13 @@
+'use client'
+
+import ErrorDisplay from '@/components/ErrorDisplay'
+
+export default function SearchError({ reset }: { error: Error; reset: () => void }) {
+  return (
+    <ErrorDisplay
+      title="Search Console data failed to load"
+      message="We couldn't load the Google Search Console data. This might be a temporary issue — try again."
+      onRetry={reset}
+    />
+  )
+}
diff --git a/app/sites/[id]/search/page.tsx b/app/sites/[id]/search/page.tsx
index 050298c..81f9bbb 100644
--- a/app/sites/[id]/search/page.tsx
+++ b/app/sites/[id]/search/page.tsx
@@ -3,7 +3,8 @@
 import { useEffect, useState } from 'react'
 import { useParams } from 'next/navigation'
 import Link from 'next/link'
-import { getDateRange, formatDate, Select, DatePicker } from '@ciphera-net/ui'
+import { Select, DatePicker } from '@ciphera-net/ui'
+import { getDateRange, formatDate, getThisWeekRange, getThisMonthRange } from '@/lib/utils/dateRanges'
 import { CaretDown, CaretUp, MagnifyingGlass, ArrowSquareOut } from '@phosphor-icons/react'
 import { useDashboard, useGSCStatus, useGSCOverview, useGSCTopQueries, useGSCTopPages, useGSCNewQueries } from '@/lib/swr/dashboard'
 import { getGSCQueryPages, getGSCPageQueries } from '@/lib/api/gsc'
@@ -13,20 +14,6 @@ import ClicksImpressionsChart from '@/components/search/ClicksImpressionsChart'
 
 // ─── Helpers ────────────────────────────────────────────────────
 
-function getThisWeekRange(): { start: string; end: string } {
-  const today = new Date()
-  const dayOfWeek = today.getDay()
-  const monday = new Date(today)
-  monday.setDate(today.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1))
-  return { start: formatDate(monday), end: formatDate(today) }
-}
-
-function getThisMonthRange(): { start: string; end: string } {
-  const today = new Date()
-  const firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1)
-  return { start: formatDate(firstOfMonth), end: formatDate(today) }
-}
-
 const formatPosition = (pos: number) => pos.toFixed(1)
 const formatCTR = (ctr: number) => (ctr * 100).toFixed(1) + '%'
 
@@ -179,10 +166,10 @@ export default function SearchConsolePage() {
           <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-5 mb-6">
             <MagnifyingGlass size={40} className="text-neutral-400 dark:text-neutral-500" />
           </div>
-          <h2 className="text-xl font-semibold text-neutral-900 dark:text-white mb-2">
+          <h2 className="text-xl font-semibold text-white mb-2">
             Connect Google Search Console
           </h2>
-          <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-md mb-6">
+          <p className="text-sm text-neutral-400 max-w-md mb-6">
             See how your site performs in Google Search. View top queries, pages, click-through rates, and average position data.
           </p>
           <Link
@@ -215,10 +202,10 @@ export default function SearchConsolePage() {
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">
+          <h1 className="text-2xl font-bold text-white mb-1">
             Search Console
           </h1>
-          <p className="text-sm text-neutral-500 dark:text-neutral-400">
+          <p className="text-sm text-neutral-400">
             Google Search performance, queries, and page rankings
           </p>
         </div>
@@ -296,9 +283,9 @@ export default function SearchConsolePage() {
         <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3 mb-6">
           {topQueries.queries.slice(0, 5).map((q) => (
             <div key={q.query} className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-3">
-              <p className="text-xs text-neutral-500 dark:text-neutral-400 truncate mb-1">{q.query}</p>
+              <p className="text-xs text-neutral-400 truncate mb-1">{q.query}</p>
               <div className="flex items-baseline gap-1.5">
-                <p className="text-lg font-semibold text-neutral-900 dark:text-white">{q.position.toFixed(1)}</p>
+                <p className="text-lg font-semibold text-white">{q.position.toFixed(1)}</p>
                 <p className="text-xs text-neutral-400">pos</p>
               </div>
               <p className="text-xs text-neutral-500 mt-0.5">{q.clicks} {q.clicks === 1 ? 'click' : 'clicks'}</p>
@@ -322,8 +309,8 @@ export default function SearchConsolePage() {
             onClick={() => { setActiveView('queries'); setExpandedQuery(null); setExpandedData([]) }}
             className={`px-4 py-1.5 text-sm font-medium rounded-md transition-all cursor-pointer ${
               activeView === 'queries'
-                ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
-                : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300'
+                ? 'bg-white dark:bg-neutral-700 text-white shadow-sm'
+                : 'text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300'
             }`}
           >
             Top Queries
@@ -332,8 +319,8 @@ export default function SearchConsolePage() {
             onClick={() => { setActiveView('pages'); setExpandedPage(null); setExpandedData([]) }}
             className={`px-4 py-1.5 text-sm font-medium rounded-md transition-all cursor-pointer ${
               activeView === 'pages'
-                ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
-                : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300'
+                ? 'bg-white dark:bg-neutral-700 text-white shadow-sm'
+                : 'text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300'
             }`}
           >
             Top Pages
@@ -347,12 +334,12 @@ export default function SearchConsolePage() {
           <table className="w-full text-sm">
             <thead>
               <tr className="border-b border-neutral-200 dark:border-neutral-800">
-                <th className="text-left px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400 w-8" />
-                <th className="text-left px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Query</th>
-                <th className="text-right px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Clicks</th>
-                <th className="text-right px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Impressions</th>
-                <th className="text-right px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">CTR</th>
-                <th className="text-right px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Position</th>
+                <th className="text-left px-4 py-3 font-medium text-neutral-400 w-8" />
+                <th className="text-left px-4 py-3 font-medium text-neutral-400">Query</th>
+                <th className="text-right px-4 py-3 font-medium text-neutral-400">Clicks</th>
+                <th className="text-right px-4 py-3 font-medium text-neutral-400">Impressions</th>
+                <th className="text-right px-4 py-3 font-medium text-neutral-400">CTR</th>
+                <th className="text-right px-4 py-3 font-medium text-neutral-400">Position</th>
               </tr>
             </thead>
             <tbody>
@@ -369,7 +356,7 @@ export default function SearchConsolePage() {
                 ))
               ) : queries.length === 0 ? (
                 <tr>
-                  <td colSpan={6} className="px-4 py-12 text-center text-neutral-500 dark:text-neutral-400">
+                  <td colSpan={6} className="px-4 py-12 text-center text-neutral-400">
                     No query data available for this period.
                   </td>
                 </tr>
@@ -391,7 +378,7 @@ export default function SearchConsolePage() {
           {/* Pagination */}
           {queriesTotal > PAGE_SIZE && (
             <div className="flex items-center justify-between px-4 py-3 border-t border-neutral-200 dark:border-neutral-800">
-              <p className="text-sm text-neutral-500 dark:text-neutral-400">
+              <p className="text-sm text-neutral-400">
                 Showing {queryPage * PAGE_SIZE + 1}-{Math.min((queryPage + 1) * PAGE_SIZE, queriesTotal)} of {queriesTotal.toLocaleString()}
               </p>
               <div className="flex gap-2">
@@ -421,12 +408,12 @@ export default function SearchConsolePage() {
           <table className="w-full text-sm">
             <thead>
               <tr className="border-b border-neutral-200 dark:border-neutral-800">
-                <th className="text-left px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400 w-8" />
-                <th className="text-left px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Page</th>
-                <th className="text-right px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Clicks</th>
-                <th className="text-right px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Impressions</th>
-                <th className="text-right px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">CTR</th>
-                <th className="text-right px-4 py-3 font-medium text-neutral-500 dark:text-neutral-400">Position</th>
+                <th className="text-left px-4 py-3 font-medium text-neutral-400 w-8" />
+                <th className="text-left px-4 py-3 font-medium text-neutral-400">Page</th>
+                <th className="text-right px-4 py-3 font-medium text-neutral-400">Clicks</th>
+                <th className="text-right px-4 py-3 font-medium text-neutral-400">Impressions</th>
+                <th className="text-right px-4 py-3 font-medium text-neutral-400">CTR</th>
+                <th className="text-right px-4 py-3 font-medium text-neutral-400">Position</th>
               </tr>
             </thead>
             <tbody>
@@ -443,7 +430,7 @@ export default function SearchConsolePage() {
                 ))
               ) : pages.length === 0 ? (
                 <tr>
-                  <td colSpan={6} className="px-4 py-12 text-center text-neutral-500 dark:text-neutral-400">
+                  <td colSpan={6} className="px-4 py-12 text-center text-neutral-400">
                     No page data available for this period.
                   </td>
                 </tr>
@@ -465,7 +452,7 @@ export default function SearchConsolePage() {
           {/* Pagination */}
           {pagesTotal > PAGE_SIZE && (
             <div className="flex items-center justify-between px-4 py-3 border-t border-neutral-200 dark:border-neutral-800">
-              <p className="text-sm text-neutral-500 dark:text-neutral-400">
+              <p className="text-sm text-neutral-400">
                 Showing {pagePage * PAGE_SIZE + 1}-{Math.min((pagePage + 1) * PAGE_SIZE, pagesTotal)} of {pagesTotal.toLocaleString()}
               </p>
               <div className="flex gap-2">
@@ -522,13 +509,13 @@ function OverviewCard({
 
   return (
     <div className="p-4 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
-      <p className="text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1">{label}</p>
-      <p className="text-2xl font-bold text-neutral-900 dark:text-white">{value}</p>
+      <p className="text-xs font-medium text-neutral-400 mb-1">{label}</p>
+      <p className="text-2xl font-bold text-white">{value}</p>
       {change && (
         <p className={`text-xs mt-1 font-medium ${
           isPositive ? 'text-green-600 dark:text-green-400' :
           isNegative ? 'text-red-600 dark:text-red-400' :
-          'text-neutral-500 dark:text-neutral-400'
+          'text-neutral-400'
         }`}>
           {change.label} vs previous period
         </p>
@@ -560,7 +547,7 @@ function QueryRow({
         <td className="px-4 py-3 text-neutral-400 dark:text-neutral-500">
           <Caret size={14} />
         </td>
-        <td className="px-4 py-3 text-neutral-900 dark:text-white font-medium">{row.query}</td>
+        <td className="px-4 py-3 text-white font-medium">{row.query}</td>
         <td className="px-4 py-3 text-right text-neutral-700 dark:text-neutral-300 tabular-nums">{row.clicks.toLocaleString()}</td>
         <td className="px-4 py-3 text-right text-neutral-700 dark:text-neutral-300 tabular-nums">{row.impressions.toLocaleString()}</td>
         <td className="px-4 py-3 text-right text-neutral-700 dark:text-neutral-300 tabular-nums">{formatCTR(row.ctr)}</td>
@@ -576,7 +563,7 @@ function QueryRow({
                 ))}
               </div>
             ) : expandedData.length === 0 ? (
-              <p className="text-sm text-neutral-500 dark:text-neutral-400 py-1">No pages found for this query.</p>
+              <p className="text-sm text-neutral-400 py-1">No pages found for this query.</p>
             ) : (
               <table className="w-full text-sm">
                 <thead>
@@ -631,7 +618,7 @@ function PageRow({
         <td className="px-4 py-3 text-neutral-400 dark:text-neutral-500">
           <Caret size={14} />
         </td>
-        <td className="px-4 py-3 text-neutral-900 dark:text-white font-medium max-w-md truncate" title={row.page}>{row.page}</td>
+        <td className="px-4 py-3 text-white font-medium max-w-md truncate" title={row.page}>{row.page}</td>
         <td className="px-4 py-3 text-right text-neutral-700 dark:text-neutral-300 tabular-nums">{row.clicks.toLocaleString()}</td>
         <td className="px-4 py-3 text-right text-neutral-700 dark:text-neutral-300 tabular-nums">{row.impressions.toLocaleString()}</td>
         <td className="px-4 py-3 text-right text-neutral-700 dark:text-neutral-300 tabular-nums">{formatCTR(row.ctr)}</td>
@@ -647,7 +634,7 @@ function PageRow({
                 ))}
               </div>
             ) : expandedData.length === 0 ? (
-              <p className="text-sm text-neutral-500 dark:text-neutral-400 py-1">No queries found for this page.</p>
+              <p className="text-sm text-neutral-400 py-1">No queries found for this page.</p>
             ) : (
               <table className="w-full text-sm">
                 <thead>
diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index 3b2d05d..a907e2b 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -738,9 +738,9 @@ export default function SiteSettingsPage() {
 
       <div className="space-y-8">
         <div>
-          <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">Site Settings</h1>
+          <h1 className="text-2xl font-bold text-white">Site Settings</h1>
           <p className="mt-2 text-neutral-600 dark:text-neutral-400">
-            Manage settings for <span className="font-medium text-neutral-900 dark:text-white">{site.domain}</span>
+            Manage settings for <span className="font-medium text-white">{site.domain}</span>
           </p>
         </div>
 
@@ -860,8 +860,8 @@ export default function SiteSettingsPage() {
               <div className="space-y-12">
                 <form onSubmit={handleSubmit} className="space-y-6">
                   <div>
-                    <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">General Configuration</h2>
-                    <p className="text-sm text-neutral-500 dark:text-neutral-400">Update your site details and tracking script.</p>
+                    <h2 className="text-2xl font-bold text-white mb-1">General Configuration</h2>
+                    <p className="text-sm text-neutral-400">Update your site details and tracking script.</p>
                   </div>
 
                   <div className="space-y-4">
@@ -907,17 +907,17 @@ export default function SiteSettingsPage() {
                         type="text"
                         value={site.domain}
                         disabled
-                        className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-neutral-100 dark:bg-neutral-800/50 text-neutral-500 dark:text-neutral-400 cursor-not-allowed"
+                        className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-neutral-100 dark:bg-neutral-800/50 text-neutral-400 cursor-not-allowed"
                       />
-                      <p className="text-xs text-neutral-500 dark:text-neutral-400">
+                      <p className="text-xs text-neutral-400">
                         Domain cannot be changed after creation
                       </p>
                     </div>
                   </div>
 
                   <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800">
-                    <h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-2">Tracking Script</h3>
-                    <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-4">
+                    <h3 className="text-lg font-semibold text-white mb-2">Tracking Script</h3>
+                    <p className="text-sm text-neutral-400 mb-4">
                       Add this script to your website to start tracking visitors. Choose your framework for setup instructions.
                     </p>
                     <ScriptSetupBlock
@@ -945,7 +945,7 @@ export default function SiteSettingsPage() {
                         {site.is_verified ? <CheckIcon className="w-4 h-4" /> : <ZapIcon className="w-4 h-4" />}
                         {site.is_verified ? 'Verified' : 'Verify Installation'}
                       </button>
-                      <p className="text-xs text-neutral-500 dark:text-neutral-400">
+                      <p className="text-xs text-neutral-400">
                         {site.is_verified ? 'Your site is sending data correctly.' : 'Check if your site is sending data correctly.'}
                       </p>
                     </div>
@@ -964,7 +964,7 @@ export default function SiteSettingsPage() {
                   <div className="space-y-6">
                     <div>
                       <h2 className="text-2xl font-bold text-red-600 dark:text-red-500 mb-1">Danger Zone</h2>
-                    <p className="text-sm text-neutral-500 dark:text-neutral-400">Irreversible actions for your site.</p>
+                    <p className="text-sm text-neutral-400">Irreversible actions for your site.</p>
                     </div>
 
                   <div className="space-y-4">
@@ -1003,8 +1003,8 @@ export default function SiteSettingsPage() {
               <div className="space-y-12">
                 <form onSubmit={handleSubmit} className="space-y-6">
                   <div>
-                    <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Visibility Settings</h2>
-                    <p className="text-sm text-neutral-500 dark:text-neutral-400">Manage who can view your dashboard.</p>
+                    <h2 className="text-2xl font-bold text-white mb-1">Visibility Settings</h2>
+                    <p className="text-sm text-neutral-400">Manage who can view your dashboard.</p>
                   </div>
 
                   <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
@@ -1014,8 +1014,8 @@ export default function SiteSettingsPage() {
                           <GlobeIcon className="w-6 h-6" />
                         </div>
                         <div>
-                          <h3 className="font-medium text-neutral-900 dark:text-white">Public Dashboard</h3>
-                          <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                          <h3 className="font-medium text-white">Public Dashboard</h3>
+                          <p className="text-sm text-neutral-400">
                             Allow anyone with the link to view this dashboard
                           </p>
                         </div>
@@ -1041,7 +1041,7 @@ export default function SiteSettingsPage() {
                           className="mt-6 pt-6 border-t border-neutral-200 dark:border-neutral-800 overflow-hidden space-y-6"
                         >
                           <div>
-                            <label className="block text-sm font-medium mb-2 text-neutral-900 dark:text-white">
+                            <label className="block text-sm font-medium mb-2 text-white">
                               Public Link
                             </label>
                             <div className="flex gap-2">
@@ -1054,12 +1054,12 @@ export default function SiteSettingsPage() {
                               <button
                                 type="button"
                                 onClick={copyLink}
-                                className="px-4 py-2 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 text-neutral-900 dark:text-white rounded-xl font-medium hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
+                                className="px-4 py-2 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 text-white rounded-xl font-medium hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
                               >
                                 {linkCopied ? 'Copied!' : 'Copy Link'}
                               </button>
                             </div>
-                            <p className="mt-2 text-xs text-neutral-500 dark:text-neutral-400">
+                            <p className="mt-2 text-xs text-neutral-400">
                               Share this link with others to view the dashboard.
                             </p>
                           </div>
@@ -1154,8 +1154,8 @@ export default function SiteSettingsPage() {
               <div className="space-y-12">
                 <form onSubmit={handleSubmit} className="space-y-6">
                   <div>
-                    <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Data & Privacy</h2>
-                    <p className="text-sm text-neutral-500 dark:text-neutral-400">Control what visitor data is collected. Less data = more privacy.</p>
+                    <h2 className="text-2xl font-bold text-white mb-1">Data & Privacy</h2>
+                    <p className="text-sm text-neutral-400">Control what visitor data is collected. Less data = more privacy.</p>
                   </div>
 
                   {/* Data Collection Controls */}
@@ -1166,8 +1166,8 @@ export default function SiteSettingsPage() {
                     <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
                       <div className="flex items-center justify-between">
                         <div>
-                          <h4 className="font-medium text-neutral-900 dark:text-white">Page Paths</h4>
-                          <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
+                          <h4 className="font-medium text-white">Page Paths</h4>
+                          <p className="text-sm text-neutral-400 mt-0.5">
                             Track which pages visitors view
                           </p>
                         </div>
@@ -1187,8 +1187,8 @@ export default function SiteSettingsPage() {
                     <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
                       <div className="flex items-center justify-between">
                         <div>
-                          <h4 className="font-medium text-neutral-900 dark:text-white">Referrers</h4>
-                          <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
+                          <h4 className="font-medium text-white">Referrers</h4>
+                          <p className="text-sm text-neutral-400 mt-0.5">
                             Track where visitors come from
                           </p>
                         </div>
@@ -1208,8 +1208,8 @@ export default function SiteSettingsPage() {
                     <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
                       <div className="flex items-center justify-between">
                         <div>
-                          <h4 className="font-medium text-neutral-900 dark:text-white">Device Info</h4>
-                          <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
+                          <h4 className="font-medium text-white">Device Info</h4>
+                          <p className="text-sm text-neutral-400 mt-0.5">
                             Track browser, OS, and device type
                           </p>
                         </div>
@@ -1229,8 +1229,8 @@ export default function SiteSettingsPage() {
                     <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
                       <div className="flex items-center justify-between">
                         <div>
-                          <h4 className="font-medium text-neutral-900 dark:text-white">Geographic Data</h4>
-                          <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
+                          <h4 className="font-medium text-white">Geographic Data</h4>
+                          <p className="text-sm text-neutral-400 mt-0.5">
                             Control location tracking granularity
                           </p>
                         </div>
@@ -1253,8 +1253,8 @@ export default function SiteSettingsPage() {
                     <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
                       <div className="flex items-center justify-between">
                         <div>
-                          <h4 className="font-medium text-neutral-900 dark:text-white">Screen Resolution</h4>
-                          <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
+                          <h4 className="font-medium text-white">Screen Resolution</h4>
+                          <p className="text-sm text-neutral-400 mt-0.5">
                             Track visitor screen sizes
                           </p>
                         </div>
@@ -1277,8 +1277,8 @@ export default function SiteSettingsPage() {
                     <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
                       <div className="flex items-center justify-between">
                         <div>
-                          <h4 className="font-medium text-neutral-900 dark:text-white">Hide unknown locations</h4>
-                          <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
+                          <h4 className="font-medium text-white">Hide unknown locations</h4>
+                          <p className="text-sm text-neutral-400 mt-0.5">
                             Exclude entries where geographic data could not be resolved from location stats
                           </p>
                         </div>
@@ -1315,8 +1315,8 @@ export default function SiteSettingsPage() {
                     <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
                       <div className="flex items-center justify-between">
                         <div>
-                          <h4 className="font-medium text-neutral-900 dark:text-white">Keep raw event data for</h4>
-                          <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
+                          <h4 className="font-medium text-white">Keep raw event data for</h4>
+                          <p className="text-sm text-neutral-400 mt-0.5">
                             Events older than this are automatically deleted. Aggregated daily stats are kept permanently.
                           </p>
                         </div>
@@ -1353,8 +1353,8 @@ export default function SiteSettingsPage() {
                     <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
                       <div className="flex items-center justify-between">
                         <div>
-                          <h4 className="font-medium text-neutral-900 dark:text-white">Check frequency</h4>
-                          <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
+                          <h4 className="font-medium text-white">Check frequency</h4>
+                          <p className="text-sm text-neutral-400 mt-0.5">
                             How often PageSpeed Insights runs automated checks on your site.
                           </p>
                         </div>
@@ -1406,7 +1406,7 @@ export default function SiteSettingsPage() {
                           focus:border-brand-orange focus:ring-4 focus:ring-brand-orange/10 outline-none transition-all duration-200 dark:text-white font-mono text-sm"
                         />
                       </div>
-                      <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-2">
+                      <p className="text-sm text-neutral-400 mt-2">
                         Enter paths to exclude from tracking (one per line). Supports wildcards (e.g., /admin/*).
                       </p>
                     </div>
@@ -1417,7 +1417,7 @@ export default function SiteSettingsPage() {
                     <h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
                       For your privacy policy
                     </h3>
-                    <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                    <p className="text-sm text-neutral-400">
                       Copy the text below into your site&apos;s Privacy Policy to describe your use of Pulse.
                       It updates automatically based on your saved settings above.
                     </p>
@@ -1445,7 +1445,7 @@ export default function SiteSettingsPage() {
                         {snippetCopied ? (
                           <CheckIcon className="w-4 h-4 text-green-600" />
                         ) : (
-                          <svg className="w-4 h-4 text-neutral-500 dark:text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <svg className="w-4 h-4 text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <rect x="9" y="9" width="13" height="13" rx="2" ry="2" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                             <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                           </svg>
@@ -1468,7 +1468,7 @@ export default function SiteSettingsPage() {
             {activeTab === 'bot' && (
               <div className="flex-1 space-y-6">
                 <div>
-                  <h2 className="text-xl font-bold text-white mb-1">Bot & Spam</h2>
+                  <h2 className="text-2xl font-bold text-white mb-1">Bot & Spam</h2>
                   <p className="text-neutral-400 text-sm">Manage automated and manual bot filtering.</p>
                 </div>
 
@@ -1627,8 +1627,8 @@ export default function SiteSettingsPage() {
             {activeTab === 'goals' && (
               <div className="space-y-6">
                 <div>
-                  <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Goals & Events</h2>
-                  <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                  <h2 className="text-2xl font-bold text-white mb-1">Goals & Events</h2>
+                  <p className="text-sm text-neutral-400">
                     Define goals to label custom events (e.g. signup, purchase). Track with <code className="px-1.5 py-0.5 rounded bg-neutral-200 dark:bg-neutral-700 text-xs">pulse.track(&apos;event_name&apos;)</code> in your snippet.
                   </p>
                 </div>
@@ -1643,7 +1643,7 @@ export default function SiteSettingsPage() {
                     )}
                     <div className="space-y-2">
                       {goals.length === 0 ? (
-                        <div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-500 dark:text-neutral-400 text-sm">
+                        <div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-400 text-sm">
                           No goals yet. Add a goal to give custom events a display name in the dashboard.
                         </div>
                       ) : (
@@ -1653,8 +1653,8 @@ export default function SiteSettingsPage() {
                             className="flex items-center justify-between py-3 px-4 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/50"
                           >
                             <div>
-                              <span className="font-medium text-neutral-900 dark:text-white">{goal.name}</span>
-                              <span className="text-neutral-500 dark:text-neutral-400 text-sm ml-2">({goal.event_name})</span>
+                              <span className="font-medium text-white">{goal.name}</span>
+                              <span className="text-neutral-400 text-sm ml-2">({goal.event_name})</span>
                             </div>
                             {canEdit && (
                               <div className="flex items-center gap-2">
@@ -1686,16 +1686,16 @@ export default function SiteSettingsPage() {
             {activeTab === 'notifications' && (
               <div className="space-y-8">
                 <div>
-                  <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Notifications</h2>
-                  <p className="text-sm text-neutral-500 dark:text-neutral-400">Configure how you receive reports and alerts.</p>
+                  <h2 className="text-2xl font-bold text-white mb-1">Notifications</h2>
+                  <p className="text-sm text-neutral-400">Configure how you receive reports and alerts.</p>
                 </div>
 
                 {/* Reports subsection */}
                 <div className="space-y-4">
                   <div className="flex items-center justify-between">
                     <div>
-                      <h3 className="text-base font-medium text-neutral-900 dark:text-white">Reports</h3>
-                      <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">Automatically deliver analytics reports via email or webhooks.</p>
+                      <h3 className="text-base font-medium text-white">Reports</h3>
+                      <p className="text-sm text-neutral-400 mt-0.5">Automatically deliver analytics reports via email or webhooks.</p>
                     </div>
                     {canEdit && (
                       <Button onClick={() => { setEditingSchedule(null); resetReportForm(); setReportModalOpen(true) }}>
@@ -1711,7 +1711,7 @@ export default function SiteSettingsPage() {
                       ))}
                     </div>
                   ) : reportSchedules.length === 0 ? (
-                    <div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-500 dark:text-neutral-400 text-sm">
+                    <div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-400 text-sm">
                       No scheduled reports yet. Add a report to automatically receive analytics summaries.
                     </div>
                   ) : (
@@ -1732,7 +1732,7 @@ export default function SiteSettingsPage() {
                               </div>
                               <div className="min-w-0">
                                 <div className="flex items-center gap-2 flex-wrap">
-                                  <span className="font-medium text-neutral-900 dark:text-white">
+                                  <span className="font-medium text-white">
                                     {getChannelLabel(schedule.channel)}
                                   </span>
                                   <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-brand-orange/10 text-brand-orange">
@@ -1742,7 +1742,7 @@ export default function SiteSettingsPage() {
                                     {getReportTypeLabel(schedule.report_type)}
                                   </span>
                                 </div>
-                                <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1 truncate">
+                                <p className="text-sm text-neutral-400 mt-1 truncate">
                                   {schedule.channel === 'email'
                                     ? (schedule.channel_config as EmailConfig).recipients.join(', ')
                                     : (schedule.channel_config as WebhookConfig).url}
@@ -1821,8 +1821,8 @@ export default function SiteSettingsPage() {
                 <div className="space-y-4">
                   <div className="flex items-center justify-between">
                     <div>
-                      <h3 className="text-base font-medium text-neutral-900 dark:text-white">Alerts</h3>
-                      <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">Get notified when your site goes down or recovers.</p>
+                      <h3 className="text-base font-medium text-white">Alerts</h3>
+                      <p className="text-sm text-neutral-400 mt-0.5">Get notified when your site goes down or recovers.</p>
                     </div>
                     {canEdit && (
                       <Button onClick={() => { setEditingAlert(null); resetAlertForm(); setAlertModalOpen(true) }}>
@@ -1838,7 +1838,7 @@ export default function SiteSettingsPage() {
                       ))}
                     </div>
                   ) : alertSchedules.length === 0 ? (
-                    <div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-500 dark:text-neutral-400 text-sm">
+                    <div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-400 text-sm">
                       No alert channels configured. Add a channel to receive uptime alerts when your site goes down or recovers.
                     </div>
                   ) : (
@@ -1859,14 +1859,14 @@ export default function SiteSettingsPage() {
                               </div>
                               <div className="min-w-0">
                                 <div className="flex items-center gap-2 flex-wrap">
-                                  <span className="font-medium text-neutral-900 dark:text-white">
+                                  <span className="font-medium text-white">
                                     {getChannelLabel(schedule.channel)}
                                   </span>
                                   <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-500">
                                     Uptime Alert
                                   </span>
                                 </div>
-                                <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1 truncate">
+                                <p className="text-sm text-neutral-400 mt-1 truncate">
                                   {schedule.channel === 'email'
                                     ? (schedule.channel_config as EmailConfig).recipients.join(', ')
                                     : (schedule.channel_config as WebhookConfig).url}
@@ -1940,8 +1940,8 @@ export default function SiteSettingsPage() {
             {activeTab === 'integrations' && (
               <div className="space-y-6">
                 <div>
-                  <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Integrations</h2>
-                  <p className="text-sm text-neutral-500 dark:text-neutral-400">Connect external services to enrich your analytics data.</p>
+                  <h2 className="text-2xl font-bold text-white mb-1">Integrations</h2>
+                  <p className="text-sm text-neutral-400">Connect external services to enrich your analytics data.</p>
                 </div>
 
                 {/* Google Search Console */}
@@ -1958,7 +1958,7 @@ export default function SiteSettingsPage() {
                           </svg>
                         </div>
                         <div>
-                          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">Google Search Console</h3>
+                          <h3 className="text-lg font-semibold text-white">Google Search Console</h3>
                           <p className="text-sm text-neutral-600 dark:text-neutral-400 mt-1">
                             See which search queries bring visitors to your site, with impressions, clicks, CTR, and ranking position.
                           </p>
@@ -1968,7 +1968,7 @@ export default function SiteSettingsPage() {
                         <svg className="w-4 h-4 text-neutral-400 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
                           <path strokeLinecap="round" strokeLinejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
                         </svg>
-                        <p className="text-xs text-neutral-500 dark:text-neutral-400">
+                        <p className="text-xs text-neutral-400">
                           Pulse only requests read-only access. Your tokens are encrypted at rest and all data can be fully removed at any time.
                         </p>
                       </div>
@@ -2005,7 +2005,7 @@ export default function SiteSettingsPage() {
                             </svg>
                           </div>
                           <div>
-                            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">Google Search Console</h3>
+                            <h3 className="text-lg font-semibold text-white">Google Search Console</h3>
                             <div className="flex items-center gap-2 mt-1.5">
                               <span className={`inline-flex items-center gap-1.5 text-xs font-medium ${
                                 gscStatus.status === 'active'
@@ -2031,28 +2031,28 @@ export default function SiteSettingsPage() {
                       <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                         {gscStatus.google_email && (
                           <div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
-                            <p className="text-xs text-neutral-500 dark:text-neutral-400">Google Account</p>
-                            <p className="text-sm font-medium text-neutral-900 dark:text-white mt-0.5 truncate">{gscStatus.google_email}</p>
+                            <p className="text-xs text-neutral-400">Google Account</p>
+                            <p className="text-sm font-medium text-white mt-0.5 truncate">{gscStatus.google_email}</p>
                           </div>
                         )}
                         {gscStatus.gsc_property && (
                           <div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
-                            <p className="text-xs text-neutral-500 dark:text-neutral-400">Property</p>
-                            <p className="text-sm font-medium text-neutral-900 dark:text-white mt-0.5 truncate">{gscStatus.gsc_property}</p>
+                            <p className="text-xs text-neutral-400">Property</p>
+                            <p className="text-sm font-medium text-white mt-0.5 truncate">{gscStatus.gsc_property}</p>
                           </div>
                         )}
                         {gscStatus.last_synced_at && (
                           <div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
-                            <p className="text-xs text-neutral-500 dark:text-neutral-400">Last Synced</p>
-                            <p className="text-sm font-medium text-neutral-900 dark:text-white mt-0.5">
+                            <p className="text-xs text-neutral-400">Last Synced</p>
+                            <p className="text-sm font-medium text-white mt-0.5">
                               {new Date(gscStatus.last_synced_at).toLocaleString('en-GB')}
                             </p>
                           </div>
                         )}
                         {gscStatus.created_at && (
                           <div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
-                            <p className="text-xs text-neutral-500 dark:text-neutral-400">Connected Since</p>
-                            <p className="text-sm font-medium text-neutral-900 dark:text-white mt-0.5">
+                            <p className="text-xs text-neutral-400">Connected Since</p>
+                            <p className="text-sm font-medium text-white mt-0.5">
                               {new Date(gscStatus.created_at).toLocaleString('en-GB')}
                             </p>
                           </div>
@@ -2121,7 +2121,7 @@ export default function SiteSettingsPage() {
                           </svg>
                         </div>
                         <div>
-                          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">BunnyCDN</h3>
+                          <h3 className="text-lg font-semibold text-white">BunnyCDN</h3>
                           <p className="text-sm text-neutral-600 dark:text-neutral-400 mt-1">
                             Monitor CDN performance with bandwidth usage, cache hit rates, response times, and geographic distribution.
                           </p>
@@ -2131,7 +2131,7 @@ export default function SiteSettingsPage() {
                         <svg className="w-4 h-4 text-neutral-400 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
                           <path strokeLinecap="round" strokeLinejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
                         </svg>
-                        <p className="text-xs text-neutral-500 dark:text-neutral-400">
+                        <p className="text-xs text-neutral-400">
                           Your API key is encrypted at rest and only used to fetch read-only statistics. You can disconnect at any time.
                         </p>
                       </div>
@@ -2147,7 +2147,7 @@ export default function SiteSettingsPage() {
                                 setBunnySelectedZone(null)
                               }}
                               placeholder="BunnyCDN API key"
-                              className="flex-1 px-4 py-2.5 border border-neutral-200 dark:border-neutral-800 rounded-xl bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white text-sm placeholder:text-neutral-400"
+                              className="flex-1 px-4 py-2.5 border border-neutral-200 dark:border-neutral-800 rounded-xl bg-white dark:bg-neutral-900 text-white text-sm placeholder:text-neutral-400"
                             />
                             <button
                               onClick={async () => {
@@ -2190,7 +2190,7 @@ export default function SiteSettingsPage() {
                                     const zone = bunnyPullZones.find(z => z.id === Number(e.target.value))
                                     setBunnySelectedZone(zone || null)
                                   }}
-                                  className="w-full px-4 py-2.5 border border-neutral-200 dark:border-neutral-800 rounded-xl bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white text-sm"
+                                  className="w-full px-4 py-2.5 border border-neutral-200 dark:border-neutral-800 rounded-xl bg-white dark:bg-neutral-900 text-white text-sm"
                                 >
                                   {bunnyPullZones.map((zone) => (
                                     <option key={zone.id} value={zone.id}>{zone.name}</option>
@@ -2252,7 +2252,7 @@ export default function SiteSettingsPage() {
                             </svg>
                           </div>
                           <div>
-                            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">BunnyCDN</h3>
+                            <h3 className="text-lg font-semibold text-white">BunnyCDN</h3>
                             <div className="flex items-center gap-2 mt-1.5">
                               <span className={`inline-flex items-center gap-1.5 text-xs font-medium ${
                                 bunnyStatus.status === 'active'
@@ -2278,22 +2278,22 @@ export default function SiteSettingsPage() {
                       <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                         {bunnyStatus.pull_zone_name && (
                           <div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
-                            <p className="text-xs text-neutral-500 dark:text-neutral-400">Pull Zone</p>
-                            <p className="text-sm font-medium text-neutral-900 dark:text-white mt-0.5 truncate">{bunnyStatus.pull_zone_name}</p>
+                            <p className="text-xs text-neutral-400">Pull Zone</p>
+                            <p className="text-sm font-medium text-white mt-0.5 truncate">{bunnyStatus.pull_zone_name}</p>
                           </div>
                         )}
                         {bunnyStatus.last_synced_at && (
                           <div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
-                            <p className="text-xs text-neutral-500 dark:text-neutral-400">Last Synced</p>
-                            <p className="text-sm font-medium text-neutral-900 dark:text-white mt-0.5">
+                            <p className="text-xs text-neutral-400">Last Synced</p>
+                            <p className="text-sm font-medium text-white mt-0.5">
                               {new Date(bunnyStatus.last_synced_at).toLocaleString('en-GB')}
                             </p>
                           </div>
                         )}
                         {bunnyStatus.created_at && (
                           <div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
-                            <p className="text-xs text-neutral-500 dark:text-neutral-400">Connected Since</p>
-                            <p className="text-sm font-medium text-neutral-900 dark:text-white mt-0.5">
+                            <p className="text-xs text-neutral-400">Connected Since</p>
+                            <p className="text-sm font-medium text-white mt-0.5">
                               {new Date(bunnyStatus.created_at).toLocaleString('en-GB')}
                             </p>
                           </div>
@@ -2354,7 +2354,7 @@ export default function SiteSettingsPage() {
               onChange={(e) => setGoalForm({ ...goalForm, name: e.target.value })}
               placeholder="e.g. Signups"
               autoFocus
-              className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white"
+              className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-white"
               required
             />
           </div>
@@ -2366,11 +2366,11 @@ export default function SiteSettingsPage() {
               onChange={(e) => setGoalForm({ ...goalForm, event_name: e.target.value })}
               placeholder="e.g. signup_click (letters, numbers, underscores only)"
               maxLength={64}
-              className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white"
+              className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-white"
               required
             />
             <div className="flex justify-between mt-1">
-              <p className="text-xs text-neutral-500 dark:text-neutral-400">Letters, numbers, and underscores only. Spaces become underscores.</p>
+              <p className="text-xs text-neutral-400">Letters, numbers, and underscores only. Spaces become underscores.</p>
               <span className={`text-xs tabular-nums ${goalForm.event_name.length > 56 ? 'text-amber-500' : 'text-neutral-400'}`}>{goalForm.event_name.length}/64</span>
             </div>
             {editingGoal && goalForm.event_name.trim().toLowerCase().replace(/\s+/g, '_') !== editingGoal.event_name && (
@@ -2423,10 +2423,10 @@ export default function SiteSettingsPage() {
                 value={reportForm.recipients}
                 onChange={(e) => setReportForm({ ...reportForm, recipients: e.target.value })}
                 placeholder="email1@example.com, email2@example.com"
-                className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white"
+                className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-white"
                 required
               />
-              <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">Comma-separated email addresses.</p>
+              <p className="text-xs text-neutral-400 mt-1">Comma-separated email addresses.</p>
             </div>
           ) : (
             <div>
@@ -2438,7 +2438,7 @@ export default function SiteSettingsPage() {
                 value={reportForm.webhookUrl}
                 onChange={(e) => setReportForm({ ...reportForm, webhookUrl: e.target.value })}
                 placeholder="https://hooks.example.com/..."
-                className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white"
+                className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-white"
                 required
               />
             </div>
@@ -2582,10 +2582,10 @@ export default function SiteSettingsPage() {
                 value={alertForm.recipients}
                 onChange={(e) => setAlertForm({ ...alertForm, recipients: e.target.value })}
                 placeholder="email1@example.com, email2@example.com"
-                className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white"
+                className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-white"
                 required
               />
-              <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">Comma-separated email addresses.</p>
+              <p className="text-xs text-neutral-400 mt-1">Comma-separated email addresses.</p>
             </div>
           ) : (
             <div>
@@ -2597,14 +2597,14 @@ export default function SiteSettingsPage() {
                 value={alertForm.webhookUrl}
                 onChange={(e) => setAlertForm({ ...alertForm, webhookUrl: e.target.value })}
                 placeholder="https://hooks.example.com/..."
-                className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white"
+                className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-white"
                 required
               />
             </div>
           )}
 
           <div className="p-3 rounded-lg bg-neutral-50 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-700">
-            <p className="text-xs text-neutral-500 dark:text-neutral-400">
+            <p className="text-xs text-neutral-400">
               Alerts are sent automatically when your site goes down or recovers. No schedule configuration needed.
             </p>
           </div>
diff --git a/app/sites/[id]/uptime/page.tsx b/app/sites/[id]/uptime/page.tsx
index 67dda0b..8eebd0e 100644
--- a/app/sites/[id]/uptime/page.tsx
+++ b/app/sites/[id]/uptime/page.tsx
@@ -100,7 +100,7 @@ function getOverallStatusTextColor(status: string): string {
     case 'down':
       return 'text-red-600 dark:text-red-400'
     default:
-      return 'text-neutral-500 dark:text-neutral-400'
+      return 'text-neutral-400'
   }
 }
 
@@ -168,22 +168,22 @@ function StatusBarTooltip({
       style={{ left: position.x, top: position.y - 10, transform: 'translate(-50%, -100%)' }}
     >
       <div className="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-lg transition-shadow duration-300 px-3 py-2.5 text-xs min-w-40">
-        <div className="font-semibold text-neutral-900 dark:text-white mb-1.5">{formattedDate}</div>
+        <div className="font-semibold text-white mb-1.5">{formattedDate}</div>
         {stat && stat.total_checks > 0 ? (
           <div className="space-y-1">
             <div className="flex justify-between gap-4">
-              <span className="text-neutral-500 dark:text-neutral-400">Uptime</span>
-              <span className="font-medium text-neutral-900 dark:text-white">
+              <span className="text-neutral-400">Uptime</span>
+              <span className="font-medium text-white">
                 {formatUptime(stat.uptime_percentage)}
               </span>
             </div>
             <div className="flex justify-between gap-4">
-              <span className="text-neutral-500 dark:text-neutral-400">Checks</span>
-              <span className="font-medium text-neutral-900 dark:text-white">{stat.total_checks}</span>
+              <span className="text-neutral-400">Checks</span>
+              <span className="font-medium text-white">{stat.total_checks}</span>
             </div>
             <div className="flex justify-between gap-4">
-              <span className="text-neutral-500 dark:text-neutral-400">Avg Response</span>
-              <span className="font-medium text-neutral-900 dark:text-white">
+              <span className="text-neutral-400">Avg Response</span>
+              <span className="font-medium text-white">
                 {formatMs(Math.round(stat.avg_response_time_ms))}
               </span>
             </div>
@@ -275,7 +275,7 @@ function ResponseTimeChart({ checks }: { checks: UptimeCheck[] }) {
 
   return (
     <div className="mt-4">
-      <h4 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-3">
+      <h4 className="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-3">
         Response Time
       </h4>
       <ChartContainer config={responseTimeChartConfig} className="h-40">
@@ -406,10 +406,10 @@ export default function UptimePage() {
       <div className={`w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
         {/* Header */}
         <div className="mb-8">
-          <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">
+          <h1 className="text-2xl font-bold text-white mb-1">
             Uptime
           </h1>
-          <p className="text-sm text-neutral-500 dark:text-neutral-400">
+          <p className="text-sm text-neutral-400">
             Monitor your site&apos;s availability and response time
           </p>
         </div>
@@ -417,14 +417,14 @@ export default function UptimePage() {
         {/* Empty state */}
         <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-12 text-center">
           <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center">
-            <svg className="w-8 h-8 text-neutral-500 dark:text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+            <svg className="w-8 h-8 text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
               <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
             </svg>
           </div>
-          <h3 className="font-semibold text-neutral-900 dark:text-white mb-2">
+          <h3 className="font-semibold text-white mb-2">
             Uptime monitoring is disabled
           </h3>
-          <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-6 max-w-md mx-auto">
+          <p className="text-sm text-neutral-400 mb-6 max-w-md mx-auto">
             Enable uptime monitoring to track your site&apos;s availability and response time around the clock.
           </p>
           {canEdit && (
@@ -446,10 +446,10 @@ export default function UptimePage() {
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">
+          <h1 className="text-2xl font-bold text-white mb-1">
             Uptime
           </h1>
-          <p className="text-sm text-neutral-500 dark:text-neutral-400">
+          <p className="text-sm text-neutral-400">
             Monitor your site&apos;s availability and response time
           </p>
         </div>
@@ -471,7 +471,7 @@ export default function UptimePage() {
           <div className="flex items-center gap-3">
             <div className={`w-3.5 h-3.5 rounded-full ${getStatusDotColor(overallStatus)}`} />
             <div>
-              <span className="font-semibold text-neutral-900 dark:text-white text-lg">
+              <span className="font-semibold text-white text-lg">
                 {site.name}
               </span>
               <span className={`text-sm font-medium ml-3 ${getOverallStatusTextColor(overallStatus)}`}>
@@ -480,11 +480,11 @@ export default function UptimePage() {
             </div>
           </div>
           <div className="text-right">
-            <span className="text-sm font-semibold text-neutral-900 dark:text-white">
+            <span className="text-sm font-semibold text-white">
               {formatUptime(overallUptime)} uptime
             </span>
             {monitor && (
-              <div className="text-xs text-neutral-500 dark:text-neutral-400">
+              <div className="text-xs text-neutral-400">
                 Last checked {formatTimeAgo(monitor.monitor.last_checked_at)}
               </div>
             )}
@@ -495,7 +495,7 @@ export default function UptimePage() {
       {/* 90-day uptime bar */}
       {monitor && (
         <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 mb-6">
-          <h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-3">
+          <h3 className="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-3">
             90-Day Availability
           </h3>
           <UptimeStatusBar dailyStats={monitor.daily_stats} />
@@ -512,39 +512,39 @@ export default function UptimePage() {
           {/* Monitor details grid */}
           <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-5">
             <div>
-              <div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-1">
+              <div className="text-xs font-medium text-neutral-400 uppercase tracking-wider mb-1">
                 Status
               </div>
               <div className="flex items-center gap-2">
                 <div className={`w-2 h-2 rounded-full ${getStatusDotColor(monitor.monitor.last_status)}`} />
-                <span className="text-sm font-medium text-neutral-900 dark:text-white">
+                <span className="text-sm font-medium text-white">
                   {getStatusLabel(monitor.monitor.last_status)}
                 </span>
               </div>
             </div>
             <div>
-              <div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-1">
+              <div className="text-xs font-medium text-neutral-400 uppercase tracking-wider mb-1">
                 Response Time
               </div>
-              <span className="text-sm font-medium text-neutral-900 dark:text-white">
+              <span className="text-sm font-medium text-white">
                 {formatMs(monitor.monitor.last_response_time_ms)}
               </span>
             </div>
             <div>
-              <div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-1">
+              <div className="text-xs font-medium text-neutral-400 uppercase tracking-wider mb-1">
                 Check Interval
               </div>
-              <span className="text-sm font-medium text-neutral-900 dark:text-white">
+              <span className="text-sm font-medium text-white">
                 {monitor.monitor.check_interval_seconds >= 60
                   ? `${Math.floor(monitor.monitor.check_interval_seconds / 60)}m`
                   : `${monitor.monitor.check_interval_seconds}s`}
               </span>
             </div>
             <div>
-              <div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-1">
+              <div className="text-xs font-medium text-neutral-400 uppercase tracking-wider mb-1">
                 Overall Uptime
               </div>
-              <span className="text-sm font-medium text-neutral-900 dark:text-white">
+              <span className="text-sm font-medium text-white">
                 {formatUptime(monitor.overall_uptime)}
               </span>
             </div>
@@ -559,7 +559,7 @@ export default function UptimePage() {
 
               {/* Recent checks */}
               <div className="mt-5">
-                <h4 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-3">
+                <h4 className="text-xs font-semibold text-neutral-400 uppercase tracking-wider mb-3">
                   Recent Checks
                 </h4>
                 <div className="space-y-1.5 max-h-48 overflow-y-auto">
@@ -576,7 +576,7 @@ export default function UptimePage() {
                       </div>
                       <div className="flex items-center gap-3">
                         {check.status_code && (
-                          <span className="text-xs text-neutral-500 dark:text-neutral-400">
+                          <span className="text-xs text-neutral-400">
                             {check.status_code}
                           </span>
                         )}
diff --git a/app/sites/new/page.tsx b/app/sites/new/page.tsx
index 1638fd1..95feb41 100644
--- a/app/sites/new/page.tsx
+++ b/app/sites/new/page.tsx
@@ -113,7 +113,7 @@ export default function NewSitePage() {
             <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-green-500/10 text-green-600 dark:text-green-400 mb-6">
               <CheckCircleIcon className="h-7 w-7" />
             </div>
-            <h2 className="text-2xl font-bold text-neutral-900 dark:text-white">
+            <h2 className="text-2xl font-bold text-white">
               Site created
             </h2>
             <p className="mt-2 text-neutral-600 dark:text-neutral-400">
@@ -137,7 +137,7 @@ export default function NewSitePage() {
             >
               <span className="text-brand-orange">Verify installation</span>
             </button>
-            <p className="text-xs text-neutral-500 dark:text-neutral-400">
+            <p className="text-xs text-neutral-400">
               Check if your site is sending data correctly.
             </p>
           </div>
@@ -146,7 +146,7 @@ export default function NewSitePage() {
             <button
               type="button"
               onClick={handleBackToForm}
-              className="text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 underline"
+              className="text-sm text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 underline"
             >
               Edit site details
             </button>
@@ -174,7 +174,7 @@ export default function NewSitePage() {
   // * Step 1: Name & domain form
   return (
     <div className="w-full max-w-2xl mx-auto px-4 sm:px-6 py-8">
-      <h1 className="text-2xl font-bold mb-8 text-neutral-900 dark:text-white">
+      <h1 className="text-2xl font-bold mb-8 text-white">
         Create New Site
       </h1>
 
@@ -186,7 +186,7 @@ export default function NewSitePage() {
 
       <form onSubmit={handleSubmit} className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
         <div className="mb-4">
-          <label htmlFor="name" className="block text-sm font-medium mb-2 text-neutral-900 dark:text-white">
+          <label htmlFor="name" className="block text-sm font-medium mb-2 text-white">
             Site Name
           </label>
           <Input
@@ -201,7 +201,7 @@ export default function NewSitePage() {
         </div>
 
         <div className="mb-6">
-          <label htmlFor="domain" className="block text-sm font-medium mb-2 text-neutral-900 dark:text-white">
+          <label htmlFor="domain" className="block text-sm font-medium mb-2 text-white">
             Domain
           </label>
           <Input
diff --git a/app/welcome/page.tsx b/app/welcome/page.tsx
index b4c73b4..55065f6 100644
--- a/app/welcome/page.tsx
+++ b/app/welcome/page.tsx
@@ -378,10 +378,10 @@ function WelcomeContent() {
                     <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-brand-orange/20 to-brand-orange/5 text-brand-orange mb-5 shadow-sm">
                       <BarChartIcon className="h-8 w-8" />
                     </div>
-                    <h2 className="text-2xl font-bold tracking-tight text-neutral-900 dark:text-white">
+                    <h2 className="text-2xl font-bold tracking-tight text-white">
                       Choose your organization
                     </h2>
-                    <p className="mt-2 text-sm text-neutral-500 dark:text-neutral-400 max-w-sm mx-auto">
+                    <p className="mt-2 text-sm text-neutral-400 max-w-sm mx-auto">
                       Continue with an existing one or create a new organization.
                     </p>
                   </div>
@@ -413,7 +413,7 @@ function WelcomeContent() {
                           >
                             {initial}
                           </div>
-                          <span className="flex-1 font-medium text-neutral-900 dark:text-white truncate">
+                          <span className="flex-1 font-medium text-white truncate">
                             {org.organization_name || 'Organization'}
                           </span>
                           {isCurrent && (
@@ -443,7 +443,7 @@ function WelcomeContent() {
                     alt="Welcome to Pulse"
                     className="w-48 h-auto mx-auto mb-6"
                   />
-                  <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
+                  <h1 className="text-2xl font-bold text-white">
                     Welcome to Pulse
                   </h1>
                   <p className="mt-2 text-neutral-600 dark:text-neutral-400">
@@ -475,7 +475,7 @@ function WelcomeContent() {
               <button
                 type="button"
                 onClick={() => setStep(1)}
-                className="flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded"
+                className="flex items-center gap-2 text-sm text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded"
                 aria-label="Back to welcome"
               >
                 <ArrowLeftIcon className="h-4 w-4" />
@@ -485,7 +485,7 @@ function WelcomeContent() {
                 <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-brand-orange/10 text-brand-orange mb-4">
                   <BarChartIcon className="h-7 w-7" />
                 </div>
-                <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
+                <h1 className="text-2xl font-bold text-white">
                   Name your organization
                 </h1>
                 <p className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
@@ -520,7 +520,7 @@ function WelcomeContent() {
                     onChange={(e) => setOrgSlug(e.target.value)}
                     className="w-full"
                   />
-                  <p className="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
+                  <p className="mt-1 text-xs text-neutral-400">
                     Used in your organization URL.
                   </p>
                 </div>
@@ -546,7 +546,7 @@ function WelcomeContent() {
               <button
                 type="button"
                 onClick={() => setStep(2)}
-                className="flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded"
+                className="flex items-center gap-2 text-sm text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded"
                 aria-label="Back to organization"
               >
                 <ArrowLeftIcon className="h-4 w-4" />
@@ -556,7 +556,7 @@ function WelcomeContent() {
                 <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-green-500/10 text-green-600 dark:text-green-400 mb-4">
                   <CheckCircleIcon className="h-7 w-7" />
                 </div>
-                <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
+                <h1 className="text-2xl font-bold text-white">
                   {showPendingCheckoutInStep3 ? 'Complete your plan' : "You're on the free plan"}
                 </h1>
                 <p className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
@@ -631,7 +631,7 @@ function WelcomeContent() {
               <button
                 type="button"
                 onClick={() => setStep(3)}
-                className="flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded"
+                className="flex items-center gap-2 text-sm text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded"
                 aria-label="Back to plan"
               >
                 <ArrowLeftIcon className="h-4 w-4" />
@@ -643,7 +643,7 @@ function WelcomeContent() {
                   alt="Add your first site"
                   className="w-44 h-auto mx-auto mb-4"
                 />
-                <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
+                <h1 className="text-2xl font-bold text-white">
                   Add your first site
                 </h1>
                 <p className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
@@ -730,7 +730,7 @@ function WelcomeContent() {
                   alt="All set"
                   className="w-44 h-auto mx-auto mb-6"
                 />
-                <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">
+                <h1 className="text-2xl font-bold text-white">
                   You're all set
                 </h1>
                 <p className="mt-2 text-neutral-600 dark:text-neutral-400">
@@ -758,7 +758,7 @@ function WelcomeContent() {
                   >
                     <span className="text-brand-orange">Verify installation</span>
                   </button>
-                  <p className="text-xs text-neutral-500 dark:text-neutral-400">
+                  <p className="text-xs text-neutral-400">
                     Check if your site is sending data correctly.
                   </p>
                 </div>
diff --git a/components/ErrorDisplay.tsx b/components/ErrorDisplay.tsx
index 9ca2d01..a1d6d84 100644
--- a/components/ErrorDisplay.tsx
+++ b/components/ErrorDisplay.tsx
@@ -36,7 +36,7 @@ export default function ErrorDisplay({
           className="w-56 h-auto mx-auto mb-8"
         />
 
-        <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">
+        <h2 className="text-2xl font-bold text-white mb-4">
           {title}
         </h2>
         <p className="text-lg text-neutral-600 dark:text-neutral-400 max-w-md mx-auto mb-10 leading-relaxed">
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 7a0ff24..ee8fd54 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -48,7 +48,7 @@ export function Footer({ LinkComponent = Link, appName = 'Pulse', isAuthenticate
       <footer className="w-full py-8 mt-auto border-t border-neutral-100 dark:border-neutral-800 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm">
         <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex flex-col md:flex-row justify-between items-center gap-4">
-            <div className="text-sm text-neutral-500 dark:text-neutral-400">
+            <div className="text-sm text-neutral-400">
               © 2024-{year} Ciphera. All rights reserved.
             </div>
             <div className="flex gap-6 text-sm font-medium text-neutral-600 dark:text-neutral-300">
@@ -88,7 +88,7 @@ export function Footer({ LinkComponent = Link, appName = 'Pulse', isAuthenticate
                 loading="lazy"
                 className="w-9 h-9 object-contain group-hover:scale-105 transition-transform duration-300"
               />
-              <span className="text-xl font-bold text-neutral-900 dark:text-white group-hover:text-brand-orange transition-colors duration-300">
+              <span className="text-xl font-bold text-white group-hover:text-brand-orange transition-colors duration-300">
                 Pulse
               </span>
             </Link>
@@ -125,7 +125,7 @@ export function Footer({ LinkComponent = Link, appName = 'Pulse', isAuthenticate
 
           {/* * Products */}
           <div>
-            <h4 className="font-semibold text-neutral-900 dark:text-white mb-4">Products</h4>
+            <h4 className="font-semibold text-white mb-4">Products</h4>
             <ul className="space-y-3">
               {footerLinks.products.map((link) => (
                 <li key={link.name}>
@@ -153,7 +153,7 @@ export function Footer({ LinkComponent = Link, appName = 'Pulse', isAuthenticate
 
           {/* * Company */}
           <div>
-            <h4 className="font-semibold text-neutral-900 dark:text-white mb-4">Company</h4>
+            <h4 className="font-semibold text-white mb-4">Company</h4>
             <ul className="space-y-3">
               {footerLinks.company.map((link) => (
                 <li key={link.name}>
@@ -181,7 +181,7 @@ export function Footer({ LinkComponent = Link, appName = 'Pulse', isAuthenticate
 
           {/* * Resources */}
           <div>
-            <h4 className="font-semibold text-neutral-900 dark:text-white mb-4">Resources</h4>
+            <h4 className="font-semibold text-white mb-4">Resources</h4>
             <ul className="space-y-3">
               {footerLinks.resources.map((link) => (
                 <li key={link.name}>
@@ -209,7 +209,7 @@ export function Footer({ LinkComponent = Link, appName = 'Pulse', isAuthenticate
 
           {/* * Legal */}
           <div>
-            <h4 className="font-semibold text-neutral-900 dark:text-white mb-4">Legal</h4>
+            <h4 className="font-semibold text-white mb-4">Legal</h4>
             <ul className="space-y-3">
               {footerLinks.legal.map((link) => (
                 <li key={link.name}>
@@ -232,10 +232,10 @@ export function Footer({ LinkComponent = Link, appName = 'Pulse', isAuthenticate
 
         {/* * Bottom bar */}
         <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
-          <p className="text-sm text-neutral-500 dark:text-neutral-400">
+          <p className="text-sm text-neutral-400">
             © 2024-{year} Ciphera. All rights reserved.
           </p>
-          <p className="text-sm text-neutral-500 dark:text-neutral-400">
+          <p className="text-sm text-neutral-400">
             Where Privacy Still Exists
           </p>
         </div>
diff --git a/components/behavior/FrustrationByPageTable.tsx b/components/behavior/FrustrationByPageTable.tsx
index fa1169b..2331228 100644
--- a/components/behavior/FrustrationByPageTable.tsx
+++ b/components/behavior/FrustrationByPageTable.tsx
@@ -34,11 +34,11 @@ export default function FrustrationByPageTable({ pages, loading }: FrustrationBy
   return (
     <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 mb-8">
       <div className="flex items-center justify-between mb-1">
-        <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+        <h3 className="text-lg font-semibold text-white">
           Frustration by Page
         </h3>
       </div>
-      <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-4">
+      <p className="text-sm text-neutral-400 mb-4">
         Pages with the most frustration signals
       </p>
 
@@ -72,7 +72,7 @@ export default function FrustrationByPageTable({ pages, loading }: FrustrationBy
                     style={{ width: `${barWidth}%` }}
                   />
                   <span
-                    className="relative text-sm text-neutral-900 dark:text-white truncate max-w-[200px] sm:max-w-[300px]"
+                    className="relative text-sm text-white truncate max-w-[200px] sm:max-w-[300px]"
                     title={page.page_path}
                   >
                     {page.page_path}
@@ -84,7 +84,7 @@ export default function FrustrationByPageTable({ pages, loading }: FrustrationBy
                     <span className="w-12 text-right text-sm tabular-nums text-neutral-600 dark:text-neutral-400">
                       {formatNumber(page.dead_clicks)}
                     </span>
-                    <span className="w-12 text-right text-sm font-semibold tabular-nums text-neutral-900 dark:text-white">
+                    <span className="w-12 text-right text-sm font-semibold tabular-nums text-white">
                       {formatNumber(page.total)}
                     </span>
                     <span className="w-16 text-right text-sm tabular-nums text-neutral-600 dark:text-neutral-400">
@@ -99,14 +99,17 @@ export default function FrustrationByPageTable({ pages, loading }: FrustrationBy
       ) : (
         <div className="flex flex-col items-center justify-center text-center px-6 py-8 gap-4 min-h-[200px]">
           <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
-            <Files className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+            <Files className="w-8 h-8 text-neutral-400" />
           </div>
-          <h4 className="font-semibold text-neutral-900 dark:text-white">
+          <h4 className="font-semibold text-white">
             No frustration signals detected
           </h4>
-          <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-md">
+          <p className="text-sm text-neutral-400 max-w-md">
             Page-level frustration data will appear here once rage clicks or dead clicks are detected on your site.
           </p>
+          <a href="/installation" target="_blank" rel="noopener noreferrer" className="mt-1 text-sm font-medium text-brand-orange hover:underline">
+            View setup guide
+          </a>
         </div>
       )}
     </div>
diff --git a/components/behavior/FrustrationSummaryCards.tsx b/components/behavior/FrustrationSummaryCards.tsx
index 304c974..6f7cf48 100644
--- a/components/behavior/FrustrationSummaryCards.tsx
+++ b/components/behavior/FrustrationSummaryCards.tsx
@@ -31,7 +31,7 @@ function ChangeIndicator({ change }: { change: ReturnType<typeof pctChange> }) {
           ? 'text-red-600 dark:text-red-400'
           : isDown
             ? 'text-green-600 dark:text-green-400'
-            : 'text-neutral-500 dark:text-neutral-400'
+            : 'text-neutral-400'
       }`}
     >
       {isUp ? '+' : ''}{change.value}%
@@ -71,11 +71,11 @@ export default function FrustrationSummaryCards({ data, loading }: FrustrationSu
     <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
       {/* Rage Clicks */}
       <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
-        <p className="text-sm font-medium text-neutral-500 dark:text-neutral-400 mb-1">
+        <p className="text-sm font-medium text-neutral-400 mb-1">
           Rage Clicks
         </p>
         <div className="flex items-baseline gap-2">
-          <span className="text-2xl font-bold text-neutral-900 dark:text-white tabular-nums">
+          <span className="text-2xl font-bold text-white tabular-nums">
             {data.rage_clicks.toLocaleString()}
           </span>
           <ChangeIndicator change={rageChange} />
@@ -87,11 +87,11 @@ export default function FrustrationSummaryCards({ data, loading }: FrustrationSu
 
       {/* Dead Clicks */}
       <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
-        <p className="text-sm font-medium text-neutral-500 dark:text-neutral-400 mb-1">
+        <p className="text-sm font-medium text-neutral-400 mb-1">
           Dead Clicks
         </p>
         <div className="flex items-baseline gap-2">
-          <span className="text-2xl font-bold text-neutral-900 dark:text-white tabular-nums">
+          <span className="text-2xl font-bold text-white tabular-nums">
             {data.dead_clicks.toLocaleString()}
           </span>
           <ChangeIndicator change={deadChange} />
@@ -103,10 +103,10 @@ export default function FrustrationSummaryCards({ data, loading }: FrustrationSu
 
       {/* Total Frustration Signals */}
       <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
-        <p className="text-sm font-medium text-neutral-500 dark:text-neutral-400 mb-1">
+        <p className="text-sm font-medium text-neutral-400 mb-1">
           Total Signals
         </p>
-        <span className="text-2xl font-bold text-neutral-900 dark:text-white tabular-nums">
+        <span className="text-2xl font-bold text-white tabular-nums">
           {totalSignals.toLocaleString()}
         </span>
         {topPage ? (
diff --git a/components/behavior/FrustrationTable.tsx b/components/behavior/FrustrationTable.tsx
index d362b14..acbdf9a 100644
--- a/components/behavior/FrustrationTable.tsx
+++ b/components/behavior/FrustrationTable.tsx
@@ -53,7 +53,7 @@ function SelectorCell({ selector }: { selector: string }) {
       className="flex items-center gap-1 min-w-0 group/copy cursor-pointer"
       title={selector}
     >
-      <span className="text-sm font-mono text-neutral-900 dark:text-white truncate">
+      <span className="text-sm font-mono text-white truncate">
         {selector}
       </span>
       <span className="opacity-0 group-hover/copy:opacity-100 transition-opacity shrink-0">
@@ -145,7 +145,7 @@ export default function FrustrationTable({
       <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
         <div className="flex items-center justify-between mb-1">
           <div className="flex items-center gap-2">
-            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+            <h3 className="text-lg font-semibold text-white">
               {title}
             </h3>
             {showViewAll && (
@@ -159,7 +159,7 @@ export default function FrustrationTable({
             )}
           </div>
         </div>
-        <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-4">
+        <p className="text-sm text-neutral-400 mb-4">
           {description}
         </p>
 
@@ -182,15 +182,18 @@ export default function FrustrationTable({
                 alt="No frustration signals"
                 className="w-44 h-auto mb-1"
               />
-              <h4 className="font-semibold text-neutral-900 dark:text-white">
+              <h4 className="font-semibold text-white">
                 No {title.toLowerCase()} detected
               </h4>
-              <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-md">
+              <p className="text-sm text-neutral-400 max-w-md">
                 Frustration tracking requires the add-on script. Add it after your core Pulse script:
               </p>
               <code className="text-xs bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 px-3 py-2 rounded-lg font-mono break-all">
                 {'<script defer src="https://pulse.ciphera.net/script.frustration.js"></script>'}
               </code>
+              <a href="/installation" target="_blank" rel="noopener noreferrer" className="mt-1 text-sm font-medium text-brand-orange hover:underline">
+                View setup guide
+              </a>
             </div>
           )}
         </div>
@@ -214,7 +217,7 @@ export default function FrustrationTable({
               ))}
             </div>
           ) : (
-            <p className="text-sm text-neutral-500 dark:text-neutral-400 py-8 text-center">
+            <p className="text-sm text-neutral-400 py-8 text-center">
               No data available
             </p>
           )}
diff --git a/components/behavior/FrustrationTrend.tsx b/components/behavior/FrustrationTrend.tsx
index 9247113..18fb8f6 100644
--- a/components/behavior/FrustrationTrend.tsx
+++ b/components/behavior/FrustrationTrend.tsx
@@ -59,7 +59,7 @@ function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<
         className="h-2.5 w-2.5 shrink-0 rounded-full"
         style={{ backgroundColor: item.fill }}
       />
-      <span className="text-neutral-500 dark:text-neutral-400">
+      <span className="text-neutral-400">
         {LABELS[item.type] ?? item.type}
       </span>
       <span className="font-mono font-medium tabular-nums text-neutral-900 dark:text-neutral-50">
@@ -93,21 +93,21 @@ export default function FrustrationTrend({ summary, loading }: FrustrationTrendP
     return (
       <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
         <div className="flex items-center justify-between mb-1">
-          <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+          <h3 className="text-lg font-semibold text-white">
             Frustration Trend
           </h3>
         </div>
-        <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-4">
+        <p className="text-sm text-neutral-400 mb-4">
           Rage vs. dead click breakdown
         </p>
         <div className="flex-1 min-h-[270px] flex flex-col items-center justify-center text-center px-6 py-8 gap-4">
           <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
-            <TrendUp className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+            <TrendUp className="w-8 h-8 text-neutral-400" />
           </div>
-          <h4 className="font-semibold text-neutral-900 dark:text-white">
+          <h4 className="font-semibold text-white">
             No trend data yet
           </h4>
-          <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-md">
+          <p className="text-sm text-neutral-400 max-w-md">
             Frustration trend data will appear here once rage clicks or dead clicks are detected on your site.
           </p>
         </div>
@@ -118,11 +118,11 @@ export default function FrustrationTrend({ summary, loading }: FrustrationTrendP
   return (
     <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
       <div className="flex items-center justify-between mb-1">
-        <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+        <h3 className="text-lg font-semibold text-white">
           Frustration Trend
         </h3>
       </div>
-      <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-4">
+      <p className="text-sm text-neutral-400 mb-4">
         {hasPrevious
           ? 'Rage and dead clicks split across current and previous period'
           : 'Rage vs. dead click breakdown'}
diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index 633dbff..5a41b30 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -322,7 +322,7 @@ export default function Chart({
               >
                 <div className={cn('text-[10px] font-semibold uppercase tracking-widest mb-2', metric === m.key ? 'text-brand-orange' : 'text-neutral-400 dark:text-neutral-500')}>{m.label}</div>
                 <div className="flex items-baseline gap-2">
-                  <AnimatedNumber value={m.value} format={m.format} className="text-2xl font-bold text-neutral-900 dark:text-white" />
+                  <AnimatedNumber value={m.value} format={m.format} className="text-2xl font-bold text-white" />
                   {m.change !== null && (
                     <span className={cn('flex items-center gap-0.5 text-sm font-semibold', m.isPositive ? 'text-[#10B981]' : 'text-[#EF4444]')}>
                       {m.isPositive ? <ArrowUpRight weight="bold" className="size-3.5" /> : <ArrowDownRight weight="bold" className="size-3.5" />}
@@ -357,7 +357,7 @@ export default function Chart({
           {/* Toolbar */}
           <div className="flex items-center justify-between gap-3 mb-4 px-2">
             <div className="flex items-center gap-3">
-              <span className="text-xs font-medium text-neutral-500 dark:text-neutral-400">
+              <span className="text-xs font-medium text-neutral-400">
                 {METRIC_CONFIGS.find((m) => m.key === metric)?.label}
               </span>
             </div>
@@ -526,7 +526,7 @@ export default function Chart({
                                   <span className="font-medium text-neutral-400 dark:text-neutral-500">
                                     {ANNOTATION_LABELS[a.category] || 'Note'} &middot; {formatEU(a.date)}{a.time ? ` at ${a.time}` : ''}
                                   </span>
-                                  <p className="text-neutral-900 dark:text-white">{a.text}</p>
+                                  <p className="text-white">{a.text}</p>
                                 </div>
                               </div>
                             ))}
@@ -593,16 +593,16 @@ export default function Chart({
       {annotationForm.visible && (
         <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/20 dark:bg-black/40 rounded-2xl">
           <div className="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl p-5 w-[340px] max-w-[90%]">
-            <h3 className="text-sm font-semibold text-neutral-900 dark:text-white mb-3">
+            <h3 className="text-sm font-semibold text-white mb-3">
               {annotationForm.editingId ? 'Edit annotation' : 'Add annotation'}
             </h3>
             <div className="space-y-3">
               <div>
-                <label className="block text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1">Date</label>
+                <label className="block text-xs font-medium text-neutral-400 mb-1">Date</label>
                 <button
                   type="button"
                   onClick={() => setCalendarOpen(true)}
-                  className="w-full px-3 py-1.5 text-sm rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-orange/30 text-left flex items-center justify-between"
+                  className="w-full px-3 py-1.5 text-sm rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-white focus:outline-none focus:ring-2 focus:ring-brand-orange/30 text-left flex items-center justify-between"
                 >
                   <span>{annotationForm.date ? formatEU(annotationForm.date) : 'Select date'}</span>
                   <svg className="w-4 h-4 text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -611,7 +611,7 @@ export default function Chart({
                 </button>
               </div>
               <div>
-                <label className="block text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1">
+                <label className="block text-xs font-medium text-neutral-400 mb-1">
                   Time <span className="text-neutral-400 dark:text-neutral-500">(optional)</span>
                 </label>
                 <div className="flex items-center gap-2">
@@ -619,7 +619,7 @@ export default function Chart({
                     type="time"
                     value={annotationForm.time}
                     onChange={(e) => setAnnotationForm((f) => ({ ...f, time: e.target.value }))}
-                    className="flex-1 px-3 py-1.5 text-sm rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-orange/30"
+                    className="flex-1 px-3 py-1.5 text-sm rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-white focus:outline-none focus:ring-2 focus:ring-brand-orange/30"
                   />
                   {annotationForm.time && (
                     <button
@@ -634,20 +634,20 @@ export default function Chart({
                 </div>
               </div>
               <div>
-                <label className="block text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1">Note</label>
+                <label className="block text-xs font-medium text-neutral-400 mb-1">Note</label>
                 <input
                   type="text"
                   value={annotationForm.text}
                   onChange={(e) => setAnnotationForm((f) => ({ ...f, text: e.target.value.slice(0, 200) }))}
                   placeholder="e.g. Launched new homepage"
                   maxLength={200}
-                  className="w-full px-3 py-1.5 text-sm rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-orange/30"
+                  className="w-full px-3 py-1.5 text-sm rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-white focus:outline-none focus:ring-2 focus:ring-brand-orange/30"
                   autoFocus
                 />
                 <span className="text-[10px] text-neutral-400 mt-0.5 block text-right">{annotationForm.text.length}/200</span>
               </div>
               <div>
-                <label className="block text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1">Category</label>
+                <label className="block text-xs font-medium text-neutral-400 mb-1">Category</label>
                 <Select
                   value={annotationForm.category}
                   onChange={(v) => setAnnotationForm((f) => ({ ...f, category: v }))}
@@ -675,7 +675,7 @@ export default function Chart({
                 <button
                   type="button"
                   onClick={() => setAnnotationForm({ visible: false, date: '', time: '', text: '', category: 'other' })}
-                  className="px-3 py-1.5 text-xs font-medium text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 cursor-pointer"
+                  className="px-3 py-1.5 text-xs font-medium text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 cursor-pointer"
                 >
                   Cancel
                 </button>
diff --git a/components/dashboard/ExportModal.tsx b/components/dashboard/ExportModal.tsx
index 8993ab9..e5ada6d 100644
--- a/components/dashboard/ExportModal.tsx
+++ b/components/dashboard/ExportModal.tsx
@@ -480,7 +480,7 @@ export default function ExportModal({ isOpen, onClose, data, stats, topPages, to
         {/* Progress Bar */}
         {(isExporting || exportDone) && (
           <div className="space-y-2 pt-2">
-            <div className="flex items-center justify-between text-xs text-neutral-500 dark:text-neutral-400">
+            <div className="flex items-center justify-between text-xs text-neutral-400">
               <span>{exportDone ? 'Export complete' : exportProgress.label}</span>
               <span>{exportDone ? '100%' : `${Math.round((exportProgress.step / exportProgress.total) * 100)}%`}</span>
             </div>
diff --git a/components/dashboard/FilterBar.tsx b/components/dashboard/FilterBar.tsx
index 80b4aad..697396d 100644
--- a/components/dashboard/FilterBar.tsx
+++ b/components/dashboard/FilterBar.tsx
@@ -29,7 +29,7 @@ export default function FilterBar({ filters, onRemove, onClear }: FilterBarProps
       {filters.length > 1 && (
         <button
           onClick={onClear}
-          className="px-2 py-1.5 text-xs font-medium text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors cursor-pointer"
+          className="px-2 py-1.5 text-xs font-medium text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors cursor-pointer"
         >
           Clear all
         </button>
diff --git a/components/dashboard/SiteNav.tsx b/components/dashboard/SiteNav.tsx
index 797e3de..e8eb496 100644
--- a/components/dashboard/SiteNav.tsx
+++ b/components/dashboard/SiteNav.tsx
@@ -46,7 +46,7 @@ export default function SiteNav({ siteId }: SiteNavProps) {
             tabIndex={isActive(tab.href) ? 0 : -1}
             className={`relative shrink-0 whitespace-nowrap px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded-t cursor-pointer -mb-px ${
               isActive(tab.href)
-                ? 'text-neutral-900 dark:text-white'
+                ? 'text-white'
                 : 'text-neutral-400 dark:text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300'
             }`}
           >
diff --git a/components/dashboard/TopReferrers.tsx b/components/dashboard/TopReferrers.tsx
index abf1353..7fb325f 100644
--- a/components/dashboard/TopReferrers.tsx
+++ b/components/dashboard/TopReferrers.tsx
@@ -97,7 +97,7 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
         <div className="flex items-center justify-between mb-4">
           <div className="flex items-center gap-2">
             <ArrowSquareOut className="w-5 h-5 text-neutral-400 dark:text-neutral-500" weight="bold" />
-            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+            <h3 className="text-lg font-semibold text-white">
               Referrers
             </h3>
             {showViewAll && (
@@ -115,7 +115,7 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
         <div className="space-y-2 flex-1 min-h-[270px]">
           {!collectReferrers ? (
             <div className="h-full flex flex-col items-center justify-center text-center px-4">
-              <p className="text-neutral-500 dark:text-neutral-400 text-sm">Referrer tracking is disabled in site settings</p>
+              <p className="text-neutral-400 text-sm">Referrer tracking is disabled in site settings</p>
             </div>
           ) : hasData ? (
             <>
@@ -132,7 +132,7 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
                       className="absolute inset-y-0.5 left-0.5 bg-brand-orange/15 dark:bg-brand-orange/40 rounded-md transition-all"
                       style={{ width: `${barWidth}%` }}
                     />
-                    <div className="relative flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
+                    <div className="relative flex-1 truncate text-white flex items-center gap-3">
                       {renderReferrerIcon(ref.referrer)}
                       <span className="truncate" title={ref.referrer}>{getReferrerDisplayName(ref.referrer)}</span>
                     </div>
@@ -154,12 +154,12 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
           ) : (
             <div className="h-full flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
               <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
-                <GlobeIcon className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+                <GlobeIcon className="w-8 h-8 text-neutral-400" />
               </div>
-              <h4 className="font-semibold text-neutral-900 dark:text-white">
+              <h4 className="font-semibold text-white">
                 No referrers yet
               </h4>
-              <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-xs">
+              <p className="text-sm text-neutral-400 max-w-xs">
                 Traffic sources will appear here when visitors come from external sites.
               </p>
               <Link
@@ -186,7 +186,7 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
             value={modalSearch}
             onChange={(e) => setModalSearch(e.target.value)}
             placeholder="Search referrers..."
-            className="w-full px-3 py-2 mb-3 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg text-neutral-900 dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
+            className="w-full px-3 py-2 mb-3 text-sm bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg text-white placeholder-neutral-400 dark:placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
           />
         </div>
         <div className="max-h-[80vh]">
@@ -208,7 +208,7 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
                     onClick={() => { if (onFilter) { onFilter({ dimension: 'referrer', operator: 'is', values: [ref.referrer] }); setIsModalOpen(false) } }}
                     className={`flex items-center justify-between h-9 group hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-lg px-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
                   >
-                    <div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
+                    <div className="flex-1 truncate text-white flex items-center gap-3">
                       {renderReferrerIcon(ref.referrer)}
                       <span className="truncate" title={ref.referrer}>{getReferrerDisplayName(ref.referrer)}</span>
                     </div>
diff --git a/components/funnels/BreakdownDrawer.tsx b/components/funnels/BreakdownDrawer.tsx
index fc605ab..1f8bbe1 100644
--- a/components/funnels/BreakdownDrawer.tsx
+++ b/components/funnels/BreakdownDrawer.tsx
@@ -50,7 +50,7 @@ export default function BreakdownDrawer({ siteId, funnelId, stepIndex, stepName,
         {/* Header */}
         <div className="flex items-center justify-between px-6 py-4 border-b border-neutral-200 dark:border-neutral-800">
           <div>
-            <h3 className="font-semibold text-neutral-900 dark:text-white">Step Breakdown</h3>
+            <h3 className="font-semibold text-white">Step Breakdown</h3>
             <p className="text-sm text-neutral-500">{stepName}</p>
           </div>
           <button onClick={onClose} className="p-2 text-neutral-400 hover:text-neutral-600 rounded-lg">
@@ -91,7 +91,7 @@ export default function BreakdownDrawer({ siteId, funnelId, stepIndex, stepName,
             <div className="space-y-2">
               {breakdown.entries.map(entry => (
                 <div key={entry.value} className="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-neutral-50 dark:hover:bg-neutral-800/50">
-                  <span className="text-sm text-neutral-900 dark:text-white truncate mr-4">
+                  <span className="text-sm text-white truncate mr-4">
                     {entry.value || '(unknown)'}
                   </span>
                   <div className="flex items-center gap-4 text-sm shrink-0">
diff --git a/components/funnels/FunnelForm.tsx b/components/funnels/FunnelForm.tsx
index 0c3b0a1..a755e21 100644
--- a/components/funnels/FunnelForm.tsx
+++ b/components/funnels/FunnelForm.tsx
@@ -206,7 +206,7 @@ export default function FunnelForm({ siteId, initialData, onSubmit, submitLabel,
           Back to Funnels
         </Link>
 
-        <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">
+        <h1 className="text-2xl font-bold text-white mb-2">
           {initialData ? 'Edit Funnel' : 'Create New Funnel'}
         </h1>
         <p className="text-neutral-600 dark:text-neutral-400">
@@ -252,7 +252,7 @@ export default function FunnelForm({ siteId, initialData, onSubmit, submitLabel,
         {/* Steps */}
         <div className="space-y-4 mb-6">
           <div className="flex items-center justify-between">
-            <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+            <h3 className="text-lg font-semibold text-white">
               Funnel Steps
             </h3>
           </div>
diff --git a/components/journeys/ColumnJourney.tsx b/components/journeys/ColumnJourney.tsx
index eed557d..57b34e7 100644
--- a/components/journeys/ColumnJourney.tsx
+++ b/components/journeys/ColumnJourney.tsx
@@ -166,7 +166,7 @@ function ColumnHeader({
         {column.index === 0 ? 'Entry' : `Step ${column.index}`}
       </span>
       <div className="flex items-baseline gap-1.5">
-        <span className="text-sm font-semibold text-neutral-900 dark:text-white tabular-nums">
+        <span className="text-sm font-semibold text-white tabular-nums">
           {column.totalSessions.toLocaleString()} visitors
         </span>
         {column.dropOffPercent !== 0 && (
@@ -235,10 +235,10 @@ function PageRow({
       <span
         className={`relative flex-1 truncate text-sm ${
           isSelected
-            ? 'text-neutral-900 dark:text-white font-medium'
+            ? 'text-white font-medium'
             : isOther
               ? 'italic text-neutral-400 dark:text-neutral-500'
-              : 'text-neutral-900 dark:text-white'
+              : 'text-white'
         }`}
       >
         {isOther ? page.path : smartLabel(page.path)}
@@ -561,12 +561,15 @@ export default function ColumnJourney({
           alt="No journey data"
           className="w-52 h-auto mb-2"
         />
-        <h4 className="font-semibold text-neutral-900 dark:text-white">
+        <h4 className="font-semibold text-white">
           No journey data yet
         </h4>
-        <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-xs">
+        <p className="text-sm text-neutral-400 max-w-xs">
           Navigation flows will appear here as visitors browse through your site.
         </p>
+        <a href="/installation" target="_blank" rel="noopener noreferrer" className="mt-2 text-sm font-medium text-brand-orange hover:underline">
+          View setup guide
+        </a>
       </div>
     )
   }
diff --git a/components/journeys/SankeyJourney.tsx b/components/journeys/SankeyJourney.tsx
index e097cf0..8c570df 100644
--- a/components/journeys/SankeyJourney.tsx
+++ b/components/journeys/SankeyJourney.tsx
@@ -510,14 +510,17 @@ export default function SankeyJourney({
     return (
       <div className="h-[400px] flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
         <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
-          <TreeStructure className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+          <TreeStructure className="w-8 h-8 text-neutral-400" />
         </div>
-        <h4 className="font-semibold text-neutral-900 dark:text-white">
+        <h4 className="font-semibold text-white">
           No journey data yet
         </h4>
-        <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-xs">
+        <p className="text-sm text-neutral-400 max-w-xs">
           Navigation flows will appear here as visitors browse through your site.
         </p>
+        <a href="/installation" target="_blank" rel="noopener noreferrer" className="mt-2 text-sm font-medium text-brand-orange hover:underline">
+          View setup guide
+        </a>
       </div>
     )
   }
@@ -528,7 +531,7 @@ export default function SankeyJourney({
         <div className="flex items-center gap-2 mb-3 px-3 py-2 rounded-lg bg-brand-orange/10 text-sm">
           <span className="text-neutral-700 dark:text-neutral-300">
             Showing flows through{' '}
-            <span className="font-medium text-neutral-900 dark:text-white">
+            <span className="font-medium text-white">
               {filterPath}
             </span>
           </span>
diff --git a/components/journeys/TopPathsTable.tsx b/components/journeys/TopPathsTable.tsx
index 2f6b739..8fb81a0 100644
--- a/components/journeys/TopPathsTable.tsx
+++ b/components/journeys/TopPathsTable.tsx
@@ -38,11 +38,11 @@ export default function TopPathsTable({ paths, loading }: TopPathsTableProps) {
   return (
     <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
       <div className="mb-1">
-        <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+        <h3 className="text-lg font-semibold text-white">
           Top Paths
         </h3>
       </div>
-      <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-5">
+      <p className="text-sm text-neutral-400 mb-5">
         Most common navigation paths across sessions
       </p>
 
@@ -83,7 +83,7 @@ export default function TopPathsTable({ paths, loading }: TopPathsTableProps) {
                           </span>
                         ) : (
                           <span
-                            className="text-sm text-neutral-900 dark:text-white truncate"
+                            className="text-sm text-white truncate"
                             title={page}
                           >
                             {smartLabel(page)}
@@ -113,12 +113,12 @@ export default function TopPathsTable({ paths, loading }: TopPathsTableProps) {
       ) : (
         <div className="flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
           <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
-            <Path className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
+            <Path className="w-8 h-8 text-neutral-400" />
           </div>
-          <h4 className="font-semibold text-neutral-900 dark:text-white">
+          <h4 className="font-semibold text-white">
             No path data yet
           </h4>
-          <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-xs">
+          <p className="text-sm text-neutral-400 max-w-xs">
             Common navigation paths will appear here as visitors browse your site.
           </p>
         </div>
diff --git a/components/notifications/NotificationCenter.tsx b/components/notifications/NotificationCenter.tsx
index ac416e5..d5fe19d 100644
--- a/components/notifications/NotificationCenter.tsx
+++ b/components/notifications/NotificationCenter.tsx
@@ -212,7 +212,7 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
             style={anchor === 'right' && fixedPos ? { left: fixedPos.left, top: fixedPos.top, bottom: fixedPos.bottom } : undefined}
           >
             <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
-              <h3 className="font-semibold text-neutral-900 dark:text-white">Notifications</h3>
+              <h3 className="font-semibold text-white">Notifications</h3>
               {unreadCount > 0 && (
                 <button
                   type="button"
@@ -243,7 +243,7 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
                 <div className="p-6 text-center text-red-500 text-sm">{error}</div>
               )}
               {!loading && !error && (notifications?.length ?? 0) === 0 && (
-                <div className="p-6 text-center text-neutral-500 dark:text-neutral-400 text-sm">
+                <div className="p-6 text-center text-neutral-400 text-sm">
                   No notifications yet
                 </div>
               )}
@@ -260,11 +260,11 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
                           <div className="flex gap-3">
                             {getTypeIcon(n.type)}
                             <div className="min-w-0 flex-1">
-                              <p className={`text-sm ${!n.read ? 'font-medium' : ''} text-neutral-900 dark:text-white`}>
+                              <p className={`text-sm ${!n.read ? 'font-medium' : ''} text-white`}>
                                 {n.title}
                               </p>
                               {n.body && (
-                                <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5 line-clamp-2">
+                                <p className="text-xs text-neutral-400 mt-0.5 line-clamp-2">
                                   {n.body}
                                 </p>
                               )}
@@ -283,11 +283,11 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
                           <div className="flex gap-3">
                             {getTypeIcon(n.type)}
                             <div className="min-w-0 flex-1">
-                              <p className={`text-sm ${!n.read ? 'font-medium' : ''} text-neutral-900 dark:text-white`}>
+                              <p className={`text-sm ${!n.read ? 'font-medium' : ''} text-white`}>
                                 {n.title}
                               </p>
                               {n.body && (
-                                <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5 line-clamp-2">
+                                <p className="text-xs text-neutral-400 mt-0.5 line-clamp-2">
                                   {n.body}
                                 </p>
                               )}
@@ -315,7 +315,7 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
               <Link
                 href="/org-settings?tab=notifications"
                 onClick={() => setOpen(false)}
-                className="flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors"
+                className="flex items-center gap-2 text-sm text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors"
               >
                 <SettingsIcon className="w-4 h-4" aria-hidden="true" />
                 Manage settings
diff --git a/components/search/ClicksImpressionsChart.tsx b/components/search/ClicksImpressionsChart.tsx
index b855d53..26380f0 100644
--- a/components/search/ClicksImpressionsChart.tsx
+++ b/components/search/ClicksImpressionsChart.tsx
@@ -31,19 +31,19 @@ function CustomTooltip({ active, payload, label }: TooltipProps) {
 
   return (
     <div className="rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 p-3 shadow-sm shadow-black/5 min-w-[140px]">
-      <div className="text-xs text-neutral-500 dark:text-neutral-400 mb-1.5">{label}</div>
+      <div className="text-xs text-neutral-400 mb-1.5">{label}</div>
       {clicks && (
         <div className="flex items-center gap-2 text-sm">
           <div className="size-1.5 rounded-full" style={{ backgroundColor: '#FD5E0F' }} />
-          <span className="text-neutral-500 dark:text-neutral-400">Clicks:</span>
-          <span className="font-semibold text-neutral-900 dark:text-white">{clicks.value.toLocaleString()}</span>
+          <span className="text-neutral-400">Clicks:</span>
+          <span className="font-semibold text-white">{clicks.value.toLocaleString()}</span>
         </div>
       )}
       {impressions && (
         <div className="flex items-center gap-2 text-sm mt-1">
           <div className="size-1.5 rounded-full" style={{ backgroundColor: '#9CA3AF' }} />
-          <span className="text-neutral-500 dark:text-neutral-400">Impressions:</span>
-          <span className="font-semibold text-neutral-900 dark:text-white">{impressions.value.toLocaleString()}</span>
+          <span className="text-neutral-400">Impressions:</span>
+          <span className="font-semibold text-white">{impressions.value.toLocaleString()}</span>
         </div>
       )}
     </div>
diff --git a/components/settings/OrganizationSettings.tsx b/components/settings/OrganizationSettings.tsx
index f9c885e..708931e 100644
--- a/components/settings/OrganizationSettings.tsx
+++ b/components/settings/OrganizationSettings.tsx
@@ -311,7 +311,7 @@ export default function OrganizationSettings() {
   // If no org ID, we are in personal organization context, so don't show org settings
   if (!currentOrgId) {
     return (
-        <div className="p-6 text-center text-neutral-500 dark:text-neutral-400">
+        <div className="p-6 text-center text-neutral-400">
             <p>You are in your personal context. Switch to an Organization to manage its settings.</p>
         </div>
     )
@@ -490,7 +490,7 @@ export default function OrganizationSettings() {
   return (
     <div className="space-y-8">
       <div>
-        <h1 className="text-2xl font-bold text-neutral-900 dark:text-white">Organization Settings</h1>
+        <h1 className="text-2xl font-bold text-white">Organization Settings</h1>
         <p className="mt-2 text-neutral-600 dark:text-neutral-400">
           Manage your organization workspace and members.
         </p>
@@ -580,8 +580,8 @@ export default function OrganizationSettings() {
             {activeTab === 'general' && (
               <div className="space-y-12">
                  <div>
-                    <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">General Information</h2>
-                    <p className="text-sm text-neutral-500 dark:text-neutral-400">Basic details about your organization.</p>
+                    <h2 className="text-2xl font-bold text-white mb-1">General Information</h2>
+                    <p className="text-sm text-neutral-400">Basic details about your organization.</p>
                   </div>
 
                  <form onSubmit={handleUpdateOrg} className="space-y-4">
@@ -597,7 +597,7 @@ export default function OrganizationSettings() {
                         minLength={2}
                         maxLength={50}
                         disabled={!isEditing}
-                        className={`bg-white dark:bg-neutral-900 ${!isEditing ? 'text-neutral-500 dark:text-neutral-400' : ''}`}
+                        className={`bg-white dark:bg-neutral-900 ${!isEditing ? 'text-neutral-400' : ''}`}
                       />
                     </div>
                     
@@ -606,7 +606,7 @@ export default function OrganizationSettings() {
                         Organization Slug
                       </label>
                       <div className="flex rounded-xl shadow-sm">
-                        <span className="inline-flex items-center px-3 rounded-l-xl border border-r-0 border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900 text-neutral-500 dark:text-neutral-400 text-sm">
+                        <span className="inline-flex items-center px-3 rounded-l-xl border border-r-0 border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900 text-neutral-400 text-sm">
                           pulse.ciphera.net/
                         </span>
                         <Input
@@ -617,10 +617,10 @@ export default function OrganizationSettings() {
                           minLength={3}
                           maxLength={30}
                           disabled={!isEditing}
-                          className={`rounded-l-none bg-white dark:bg-neutral-900 ${!isEditing ? 'text-neutral-500 dark:text-neutral-400' : ''}`}
+                          className={`rounded-l-none bg-white dark:bg-neutral-900 ${!isEditing ? 'text-neutral-400' : ''}`}
                         />
                       </div>
-                      <p className="text-xs text-neutral-500 dark:text-neutral-400">
+                      <p className="text-xs text-neutral-400">
                         Changing the slug will change your organization's URL.
                       </p>
                     </div>
@@ -658,7 +658,7 @@ export default function OrganizationSettings() {
                  <div className="space-y-6">
                   <div>
                     <h2 className="text-2xl font-bold text-red-600 dark:text-red-500 mb-1">Danger Zone</h2>
-                    <p className="text-sm text-neutral-500 dark:text-neutral-400">Irreversible actions for this organization.</p>
+                    <p className="text-sm text-neutral-400">Irreversible actions for this organization.</p>
                   </div>
 
                   <div className="p-6 border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-900/10 rounded-2xl flex items-center justify-between">
@@ -696,11 +696,11 @@ export default function OrganizationSettings() {
               <div className="space-y-12">
                 {/* Invite Section */}
                 <div>
-                  <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Organization Members</h2>
-                  <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-6">Manage who has access to this organization.</p>
+                  <h2 className="text-2xl font-bold text-white mb-1">Organization Members</h2>
+                  <p className="text-sm text-neutral-400 mb-6">Manage who has access to this organization.</p>
                   
                   <div className="bg-neutral-50 dark:bg-neutral-900/50 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-4">
-                    <h3 className="text-sm font-medium text-neutral-900 dark:text-white mb-3">Invite New Member</h3>
+                    <h3 className="text-sm font-medium text-white mb-3">Invite New Member</h3>
                     <form onSubmit={handleSendInvite} className="flex gap-3 items-end">
                       <div className="flex-1">
                         <Input 
@@ -744,12 +744,12 @@ export default function OrganizationSettings() {
 
                 {/* Members List */}
                 <div className="space-y-4">
-                  <h3 className="text-sm font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Active Members</h3>
+                  <h3 className="text-sm font-medium text-neutral-400 uppercase tracking-wider">Active Members</h3>
                   <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden divide-y divide-neutral-200 dark:divide-neutral-800">
                     {isLoadingMembers ? (
                       <MembersListSkeleton />
                     ) : members.length === 0 ? (
-                      <div className="p-8 text-center text-neutral-500 dark:text-neutral-400">No members found.</div>
+                      <div className="p-8 text-center text-neutral-400">No members found.</div>
                     ) : (
                       members.map((member) => (
                         <div key={member.user_id} className="p-4 flex items-center justify-between hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors">
@@ -758,10 +758,10 @@ export default function OrganizationSettings() {
                               {member.user_email?.[0].toUpperCase() || '?'}
                             </div>
                             <div>
-                              <div className="text-sm font-medium text-neutral-900 dark:text-white">
+                              <div className="text-sm font-medium text-white">
                                 {member.user_email || 'Unknown User'}
                               </div>
-                              <div className="text-xs text-neutral-500 dark:text-neutral-400">
+                              <div className="text-xs text-neutral-400">
                                 Joined {formatDate(new Date(member.joined_at))}
                               </div>
                             </div>
@@ -786,7 +786,7 @@ export default function OrganizationSettings() {
                 {/* Pending Invitations */}
                 {invitations.length > 0 && (
                   <div className="space-y-4">
-                    <h3 className="text-sm font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Pending Invitations</h3>
+                    <h3 className="text-sm font-medium text-neutral-400 uppercase tracking-wider">Pending Invitations</h3>
                     <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden divide-y divide-neutral-200 dark:divide-neutral-800">
                       {invitations.map((invite) => (
                         <div key={invite.id} className="p-4 flex items-center justify-between">
@@ -795,10 +795,10 @@ export default function OrganizationSettings() {
                               <div className="w-2 h-2 rounded-full bg-neutral-400 animate-pulse"></div>
                             </div>
                             <div>
-                              <div className="text-sm font-medium text-neutral-900 dark:text-white">
+                              <div className="text-sm font-medium text-white">
                                 {invite.email}
                               </div>
-                              <div className="text-xs text-neutral-500 dark:text-neutral-400">
+                              <div className="text-xs text-neutral-400">
                                 Invited as <span className="capitalize font-medium">{invite.role}</span> • Expires {formatDate(new Date(invite.expires_at))}
                               </div>
                             </div>
@@ -821,8 +821,8 @@ export default function OrganizationSettings() {
             {activeTab === 'billing' && (
               <div className="space-y-8">
                 <div>
-                  <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Billing & Subscription</h2>
-                  <p className="text-sm text-neutral-500 dark:text-neutral-400">Manage your plan, usage, and payment details.</p>
+                  <h2 className="text-2xl font-bold text-white mb-1">Billing & Subscription</h2>
+                  <p className="text-sm text-neutral-400">Manage your plan, usage, and payment details.</p>
                 </div>
 
                 {isLoadingSubscription ? (
@@ -832,7 +832,7 @@ export default function OrganizationSettings() {
                   </div>
                 ) : !subscription ? (
                   <div className="p-6 text-center bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-200 dark:border-neutral-800">
-                    <p className="text-neutral-500 dark:text-neutral-400">Could not load subscription details.</p>
+                    <p className="text-neutral-400">Could not load subscription details.</p>
                     <Button variant="ghost" onClick={loadSubscription} className="mt-4">Retry</Button>
                   </div>
                 ) : (
@@ -915,7 +915,7 @@ export default function OrganizationSettings() {
                       {/* Plan header */}
                       <div className="p-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                         <div className="flex items-center gap-3">
-                          <span className="text-xl font-bold text-neutral-900 dark:text-white capitalize">
+                          <span className="text-xl font-bold text-white capitalize">
                             {subscription.plan_id?.startsWith('price_') ? 'Pro' : (subscription.plan_id === 'free' || !subscription.plan_id ? 'Free' : subscription.plan_id)} Plan
                           </span>
                           <span className={`px-2.5 py-0.5 rounded-full text-xs font-medium capitalize ${
@@ -940,7 +940,7 @@ export default function OrganizationSettings() {
                         </Button>
                       </div>
                       {(subscription.business_name || subscription.tax_id) && (
-                        <div className="px-6 pb-2 -mt-2 space-y-1 text-sm text-neutral-500 dark:text-neutral-400">
+                        <div className="px-6 pb-2 -mt-2 space-y-1 text-sm text-neutral-400">
                           {subscription.business_name && (
                             <div>Billing for: {subscription.business_name}</div>
                           )}
@@ -956,7 +956,7 @@ export default function OrganizationSettings() {
                       <div className="border-t border-neutral-200 dark:border-neutral-800 p-6 grid grid-cols-2 md:grid-cols-4 gap-y-4 gap-x-6">
                         <div>
                           <div className="text-xs text-neutral-500 uppercase tracking-wider mb-1">Sites</div>
-                          <div className="text-lg font-semibold text-neutral-900 dark:text-white">
+                          <div className="text-lg font-semibold text-white">
                             {typeof subscription.sites_count === 'number'
                               ? (() => {
                                   const limit = getSitesLimitForPlan(subscription.plan_id)
@@ -967,7 +967,7 @@ export default function OrganizationSettings() {
                         </div>
                         <div>
                           <div className="text-xs text-neutral-500 uppercase tracking-wider mb-1">Pageviews</div>
-                          <div className="text-lg font-semibold text-neutral-900 dark:text-white">
+                          <div className="text-lg font-semibold text-white">
                             {subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number'
                               ? `${subscription.pageview_usage.toLocaleString()} / ${subscription.pageview_limit.toLocaleString()}`
                               : '—'}
@@ -993,7 +993,7 @@ export default function OrganizationSettings() {
                           <div className="text-xs text-neutral-500 uppercase tracking-wider mb-1">
                             {subscription.subscription_status === 'trialing' ? 'Trial ends' : (subscription.cancel_at_period_end ? 'Access until' : 'Renews')}
                           </div>
-                          <div className="text-lg font-semibold text-neutral-900 dark:text-white">
+                          <div className="text-lg font-semibold text-white">
                             {(() => {
                               const ts = subscription.current_period_end
                               const d = ts ? new Date(ts) : null
@@ -1005,7 +1005,7 @@ export default function OrganizationSettings() {
                         </div>
                         <div>
                           <div className="text-xs text-neutral-500 uppercase tracking-wider mb-1">Limit</div>
-                          <div className="text-lg font-semibold text-neutral-900 dark:text-white">
+                          <div className="text-lg font-semibold text-white">
                             {subscription.pageview_limit > 0 ? `${subscription.pageview_limit.toLocaleString()} / mo` : 'Unlimited'}
                           </div>
                         </div>
@@ -1038,19 +1038,19 @@ export default function OrganizationSettings() {
 
                     {/* Order History */}
                     <div>
-                      <h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-3">Recent orders</h3>
+                      <h3 className="text-lg font-semibold text-white mb-3">Recent orders</h3>
                       <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden divide-y divide-neutral-200 dark:divide-neutral-800">
                         {isLoadingInvoices ? (
                           <InvoicesListSkeleton />
                         ) : orders.length === 0 ? (
-                          <div className="p-8 text-center text-neutral-500 dark:text-neutral-400">No orders found.</div>
+                          <div className="p-8 text-center text-neutral-400">No orders found.</div>
                         ) : (
                           <>
                             {orders.map((order) => (
                               <div key={order.id} className="px-4 py-3 flex items-center justify-between hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors">
                                 <div className="flex items-center gap-3">
                                   <div>
-                                    <span className="font-medium text-sm text-neutral-900 dark:text-white">
+                                    <span className="font-medium text-sm text-white">
                                       {(order.total_amount / 100).toLocaleString('en-US', { style: 'currency', currency: order.currency.toUpperCase() })}
                                     </span>
                                     <span className="text-xs text-neutral-500 ml-2">
@@ -1084,8 +1084,8 @@ export default function OrganizationSettings() {
             {activeTab === 'notifications' && (
               <div className="space-y-8">
                 <div>
-                  <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Notification Settings</h2>
-                  <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-6">
+                  <h2 className="text-2xl font-bold text-white mb-1">Notification Settings</h2>
+                  <p className="text-sm text-neutral-400 mb-6">
                     Choose which notification types you want to receive. These apply to the notification center for owners and admins.
                   </p>
                 </div>
@@ -1094,7 +1094,7 @@ export default function OrganizationSettings() {
                   <SettingsFormSkeleton />
                 ) : (
                   <div className="space-y-4">
-                    <h3 className="text-sm font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Notification categories</h3>
+                    <h3 className="text-sm font-medium text-neutral-400 uppercase tracking-wider">Notification categories</h3>
                     <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden divide-y divide-neutral-200 dark:divide-neutral-800">
                       {notificationCategories.map((cat) => (
                         <div
@@ -1102,8 +1102,8 @@ export default function OrganizationSettings() {
                           className="p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors"
                         >
                           <div className="flex-1">
-                            <p className="text-sm font-medium text-neutral-900 dark:text-white">{cat.label}</p>
-                            <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">{cat.description}</p>
+                            <p className="text-sm font-medium text-white">{cat.label}</p>
+                            <p className="text-sm text-neutral-400 mt-0.5">{cat.description}</p>
                           </div>
                           <div className="flex items-center shrink-0">
                             <button
@@ -1149,8 +1149,8 @@ export default function OrganizationSettings() {
             {activeTab === 'audit' && (
               <div className="space-y-12">
                 <div>
-                  <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Audit log</h2>
-                  <p className="text-sm text-neutral-500 dark:text-neutral-400">Who did what and when for this organization.</p>
+                  <h2 className="text-2xl font-bold text-white mb-1">Audit log</h2>
+                  <p className="text-sm text-neutral-400">Who did what and when for this organization.</p>
                 </div>
 
                 {/* Advanced Filters */}
@@ -1163,7 +1163,7 @@ export default function OrganizationSettings() {
                         placeholder="e.g. 8a2b3c"
                         value={auditLogIdFilter}
                         onChange={(e) => setAuditLogIdFilter(e.target.value)}
-                        className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm text-neutral-900 dark:text-white focus:ring-2 focus:ring-brand-orange outline-none transition-all"
+                        className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm text-white focus:ring-2 focus:ring-brand-orange outline-none transition-all"
                       />
                     </div>
                     <div className="space-y-1">
@@ -1173,7 +1173,7 @@ export default function OrganizationSettings() {
                         placeholder="e.g. site_created"
                         value={auditActionFilter}
                         onChange={(e) => setAuditActionFilter(e.target.value)}
-                        className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm text-neutral-900 dark:text-white focus:ring-2 focus:ring-brand-orange outline-none transition-all"
+                        className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm text-white focus:ring-2 focus:ring-brand-orange outline-none transition-all"
                       />
                     </div>
                     <div className="space-y-1">
@@ -1182,7 +1182,7 @@ export default function OrganizationSettings() {
                         type="date"
                         value={auditStartDate}
                         onChange={(e) => setAuditStartDate(e.target.value)}
-                        className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm text-neutral-900 dark:text-white focus:ring-2 focus:ring-brand-orange outline-none transition-all"
+                        className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm text-white focus:ring-2 focus:ring-brand-orange outline-none transition-all"
                       />
                     </div>
                     <div className="space-y-1">
@@ -1191,7 +1191,7 @@ export default function OrganizationSettings() {
                         type="date"
                         value={auditEndDate}
                         onChange={(e) => setAuditEndDate(e.target.value)}
-                        className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm text-neutral-900 dark:text-white focus:ring-2 focus:ring-brand-orange outline-none transition-all"
+                        className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm text-white focus:ring-2 focus:ring-brand-orange outline-none transition-all"
                       />
                     </div>
                   </div>
@@ -1240,10 +1240,10 @@ export default function OrganizationSettings() {
                               <td className="px-4 py-3 text-neutral-600 dark:text-neutral-400 whitespace-nowrap">
                                 {formatDateTime(new Date(entry.occurred_at))}
                               </td>
-                              <td className="px-4 py-3 text-neutral-900 dark:text-white whitespace-nowrap" title={entry.actor_email || entry.actor_id || 'System'}>
+                              <td className="px-4 py-3 text-white whitespace-nowrap" title={entry.actor_email || entry.actor_id || 'System'}>
                                 {entry.actor_email || entry.actor_id || 'System'}
                               </td>
-                              <td className="px-4 py-3 font-medium text-neutral-900 dark:text-white whitespace-nowrap" title={entry.action}>{entry.action}</td>
+                              <td className="px-4 py-3 font-medium text-white whitespace-nowrap" title={entry.action}>{entry.action}</td>
                               <td className="px-4 py-3 text-neutral-600 dark:text-neutral-400">{entry.resource_type}</td>
                             </tr>
                           ))}
@@ -1255,7 +1255,7 @@ export default function OrganizationSettings() {
                   {/* Pagination */}
                   {auditTotal > auditPageSize && (
                     <div className="flex items-center justify-between px-4 py-3 border-t border-neutral-200 dark:border-neutral-800">
-                      <span className="text-sm text-neutral-500 dark:text-neutral-400">
+                      <span className="text-sm text-neutral-400">
                         {auditPage * auditPageSize + 1}–{Math.min((auditPage + 1) * auditPageSize, auditTotal)} of {auditTotal}
                       </span>
                       <div className="flex gap-2">
@@ -1361,7 +1361,7 @@ export default function OrganizationSettings() {
                     value={deleteConfirm}
                     onChange={(e) => setDeleteConfirm(e.target.value)}
                     autoComplete="off"
-                    className="w-full px-3 py-2 text-sm border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400"
+                    className="w-full px-3 py-2 text-sm border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400"
                     placeholder="DELETE"
                   />
                 </div>
@@ -1410,7 +1410,7 @@ export default function OrganizationSettings() {
               className="bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl max-w-md w-full p-6 border border-neutral-200 dark:border-neutral-800"
             >
               <div className="flex justify-between items-center mb-4">
-                <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">Cancel subscription?</h3>
+                <h3 className="text-lg font-semibold text-white">Cancel subscription?</h3>
                 <button
                   onClick={() => setShowCancelPrompt(false)}
                   className="text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-400"
@@ -1464,7 +1464,7 @@ export default function OrganizationSettings() {
               className="bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl max-w-md w-full p-6 border border-neutral-200 dark:border-neutral-800"
             >
               <div className="flex justify-between items-center mb-4">
-                <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">Change plan</h3>
+                <h3 className="text-lg font-semibold text-white">Change plan</h3>
                 <button
                   type="button"
                   onClick={() => setShowChangePlanModal(false)}
@@ -1500,7 +1500,7 @@ export default function OrganizationSettings() {
                               : 'border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600'
                           }`}
                         >
-                          <span className={`block text-sm font-semibold ${isSelected ? 'text-brand-orange' : 'text-neutral-900 dark:text-white'}`}>
+                          <span className={`block text-sm font-semibold ${isSelected ? 'text-brand-orange' : 'text-white'}`}>
                             {plan.name}
                           </span>
                           <span className="block text-xs text-neutral-500 mt-0.5">{plan.sites}</span>
@@ -1519,7 +1519,7 @@ export default function OrganizationSettings() {
                   <select
                     value={changePlanTierIndex}
                     onChange={(e) => setChangePlanTierIndex(Number(e.target.value))}
-                    className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white focus:ring-2 focus:ring-brand-orange outline-none"
+                    className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-white focus:ring-2 focus:ring-brand-orange outline-none"
                   >
                     {TRAFFIC_TIERS.map((tier, idx) => (
                       <option key={tier.value} value={idx}>
diff --git a/components/settings/SecurityActivityCard.tsx b/components/settings/SecurityActivityCard.tsx
index c0cd898..4455dac 100644
--- a/components/settings/SecurityActivityCard.tsx
+++ b/components/settings/SecurityActivityCard.tsx
@@ -38,7 +38,7 @@ function getEventColor(eventType: string, outcome: string): string {
   if (eventType === '2fa_disabled') return 'text-amber-500 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/30'
   if (eventType === 'account_deleted') return 'text-red-500 dark:text-red-400 bg-red-50 dark:bg-red-950/30'
   if (eventType === 'recovery_codes_regenerated') return 'text-amber-500 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/30'
-  return 'text-neutral-500 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-800'
+  return 'text-neutral-400 bg-neutral-100 dark:bg-neutral-800'
 }
 
 function getMethodLabel(entry: AuditLogEntry): string | null {
@@ -120,8 +120,8 @@ export default function SecurityActivityCard() {
 
   return (
     <div>
-      <h2 className="text-xl font-semibold text-neutral-900 dark:text-white mb-1">Security Activity</h2>
-      <p className="text-neutral-500 dark:text-neutral-400 text-sm mb-6">
+      <h2 className="text-xl font-semibold text-white mb-1">Security Activity</h2>
+      <p className="text-neutral-400 text-sm mb-6">
         Recent security events on your account{totalCount > 0 ? ` (${totalCount})` : ''}
       </p>
 
@@ -138,7 +138,7 @@ export default function SecurityActivityCard() {
           <svg className="w-12 h-12 mx-auto mb-3 text-neutral-300 dark:text-neutral-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
           </svg>
-          <p className="text-neutral-500 dark:text-neutral-400">No activity recorded yet.</p>
+          <p className="text-neutral-400">No activity recorded yet.</p>
         </div>
       ) : (
         <div className="space-y-2">
@@ -165,11 +165,11 @@ export default function SecurityActivityCard() {
 
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2 flex-wrap">
-                    <span className="font-medium text-neutral-900 dark:text-white text-sm">
+                    <span className="font-medium text-white text-sm">
                       {label}
                     </span>
                     {method && (
-                      <span className="text-xs px-1.5 py-0.5 rounded bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400">
+                      <span className="text-xs px-1.5 py-0.5 rounded bg-neutral-100 dark:bg-neutral-800 text-neutral-400">
                         {method}
                       </span>
                     )}
@@ -179,7 +179,7 @@ export default function SecurityActivityCard() {
                       </span>
                     )}
                   </div>
-                  <div className="flex items-center gap-2 mt-0.5 text-xs text-neutral-500 dark:text-neutral-400 flex-wrap">
+                  <div className="flex items-center gap-2 mt-0.5 text-xs text-neutral-400 flex-wrap">
                     {reason && <span>{reason}</span>}
                     {reason && (deviceStr || entry.ip_address) && <span>&middot;</span>}
                     {deviceStr && <span>{deviceStr}</span>}
@@ -189,7 +189,7 @@ export default function SecurityActivityCard() {
                 </div>
 
                 <div className="flex-shrink-0 text-right">
-                  <span className="text-xs text-neutral-500 dark:text-neutral-400" title={formatDateTimeFull(new Date(entry.created_at))}>
+                  <span className="text-xs text-neutral-400" title={formatDateTimeFull(new Date(entry.created_at))}>
                     {formatRelativeTime(entry.created_at)}
                   </span>
                 </div>
diff --git a/components/settings/SettingsModalWrapper.tsx b/components/settings/SettingsModalWrapper.tsx
index 2d21394..55c187e 100644
--- a/components/settings/SettingsModalWrapper.tsx
+++ b/components/settings/SettingsModalWrapper.tsx
@@ -72,7 +72,7 @@ function NotificationCenterPlaceholder() {
   return (
     <div className="text-center max-w-md mx-auto py-8">
       <BellIcon className="w-12 h-12 text-neutral-300 mx-auto mb-4" />
-      <h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-2">Notification Center</h3>
+      <h3 className="text-lg font-medium text-white mb-2">Notification Center</h3>
       <p className="text-sm text-neutral-500 mb-4">View and manage all your notifications in one place.</p>
       <Link href="/notifications" className="inline-flex items-center gap-2 px-4 py-2 bg-brand-orange text-white rounded-lg hover:bg-brand-orange/90 transition-colors">
         Open Notification Center
diff --git a/components/settings/TrustedDevicesCard.tsx b/components/settings/TrustedDevicesCard.tsx
index c551373..ebd4c7c 100644
--- a/components/settings/TrustedDevicesCard.tsx
+++ b/components/settings/TrustedDevicesCard.tsx
@@ -56,8 +56,8 @@ export default function TrustedDevicesCard() {
 
   return (
     <div>
-      <h2 className="text-xl font-semibold text-neutral-900 dark:text-white mb-1">Trusted Devices</h2>
-      <p className="text-neutral-500 dark:text-neutral-400 text-sm mb-6">
+      <h2 className="text-xl font-semibold text-white mb-1">Trusted Devices</h2>
+      <p className="text-neutral-400 text-sm mb-6">
         Devices that have signed in to your account. Removing a device means the next sign-in from it will trigger a new device alert.
       </p>
 
@@ -74,7 +74,7 @@ export default function TrustedDevicesCard() {
           <svg className="w-12 h-12 mx-auto mb-3 text-neutral-300 dark:text-neutral-600" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25A2.25 2.25 0 015.25 3h13.5A2.25 2.25 0 0121 5.25z" />
           </svg>
-          <p className="text-neutral-500 dark:text-neutral-400">No trusted devices yet. They appear after you sign in.</p>
+          <p className="text-neutral-400">No trusted devices yet. They appear after you sign in.</p>
         </div>
       ) : (
         <div className="space-y-2">
@@ -83,7 +83,7 @@ export default function TrustedDevicesCard() {
               key={device.id}
               className="flex items-center gap-3 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 py-3"
             >
-              <div className="flex-shrink-0 w-9 h-9 rounded-lg flex items-center justify-center bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400">
+              <div className="flex-shrink-0 w-9 h-9 rounded-lg flex items-center justify-center bg-neutral-100 dark:bg-neutral-800 text-neutral-400">
                 <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" d={getDeviceIcon(device.display_hint)} />
                 </svg>
@@ -91,7 +91,7 @@ export default function TrustedDevicesCard() {
 
               <div className="flex-1 min-w-0">
                 <div className="flex items-center gap-2">
-                  <span className="font-medium text-neutral-900 dark:text-white text-sm truncate">
+                  <span className="font-medium text-white text-sm truncate">
                     {device.display_hint || 'Unknown device'}
                   </span>
                   {device.is_current && (
@@ -100,7 +100,7 @@ export default function TrustedDevicesCard() {
                     </span>
                   )}
                 </div>
-                <div className="flex items-center gap-2 mt-0.5 text-xs text-neutral-500 dark:text-neutral-400">
+                <div className="flex items-center gap-2 mt-0.5 text-xs text-neutral-400">
                   <span title={formatDateTimeFull(new Date(device.first_seen_at))}>
                     First seen {formatRelativeTime(device.first_seen_at)}
                   </span>
diff --git a/components/sites/DeleteSiteModal.tsx b/components/sites/DeleteSiteModal.tsx
index b8f7bb7..0d91d45 100644
--- a/components/sites/DeleteSiteModal.tsx
+++ b/components/sites/DeleteSiteModal.tsx
@@ -124,7 +124,7 @@ export default function DeleteSiteModal({ open, onClose, onDeleted, siteName, si
                       value={deleteConfirm}
                       onChange={(e) => setDeleteConfirm(e.target.value)}
                       autoComplete="off"
-                      className="w-full px-3 py-2 text-sm border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400"
+                      className="w-full px-3 py-2 text-sm border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400"
                       placeholder="DELETE"
                     />
                   </div>
@@ -187,7 +187,7 @@ export default function DeleteSiteModal({ open, onClose, onDeleted, siteName, si
                       value={permanentConfirm}
                       onChange={(e) => setPermanentConfirm(e.target.value)}
                       autoComplete="off"
-                      className="w-full px-3 py-2 text-sm border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400"
+                      className="w-full px-3 py-2 text-sm border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400"
                       placeholder={siteDomain}
                     />
                   </div>
diff --git a/components/sites/ScriptSetupBlock.tsx b/components/sites/ScriptSetupBlock.tsx
index 6648d27..ba2d5bb 100644
--- a/components/sites/ScriptSetupBlock.tsx
+++ b/components/sites/ScriptSetupBlock.tsx
@@ -167,7 +167,7 @@ export default function ScriptSetupBlock({
 
       {/* ── Feature toggles ─────────────────────────────────────────────── */}
       <div className="mt-6">
-        <h4 className="text-sm font-semibold text-neutral-900 dark:text-white mb-3">
+        <h4 className="text-sm font-semibold text-white mb-3">
           Features
         </h4>
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
@@ -177,10 +177,10 @@ export default function ScriptSetupBlock({
               className="flex items-center justify-between rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 py-3"
             >
               <div className="min-w-0 mr-3">
-                <span className="text-sm font-medium text-neutral-900 dark:text-white block">
+                <span className="text-sm font-medium text-white block">
                   {f.label}
                 </span>
-                <span className="text-xs text-neutral-500 dark:text-neutral-400">
+                <span className="text-xs text-neutral-400">
                   {f.description}
                 </span>
               </div>
@@ -191,10 +191,10 @@ export default function ScriptSetupBlock({
         {/* * Frustration — full-width, visually distinct as add-on */}
         <div className="mt-3 flex items-center justify-between rounded-xl border border-dashed border-neutral-300 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900/50 px-4 py-3">
           <div className="min-w-0 mr-3">
-            <span className="text-sm font-medium text-neutral-900 dark:text-white block">
+            <span className="text-sm font-medium text-white block">
               Frustration tracking
             </span>
-            <span className="text-xs text-neutral-500 dark:text-neutral-400">
+            <span className="text-xs text-neutral-400">
               Rage clicks &amp; dead clicks &middot; Loads separate add-on script
             </span>
           </div>
@@ -204,15 +204,15 @@ export default function ScriptSetupBlock({
 
       {/* ── Storage + TTL ───────────────────────────────────────────────── */}
       <div className="mt-6">
-        <h4 className="text-sm font-semibold text-neutral-900 dark:text-white mb-1">
+        <h4 className="text-sm font-semibold text-white mb-1">
           Visitor identity
         </h4>
-        <p className="text-xs text-neutral-500 dark:text-neutral-400 mb-3">
+        <p className="text-xs text-neutral-400 mb-3">
           How returning visitors are recognized. Stricter settings increase privacy but may raise unique visitor counts.
         </p>
         <div className="flex items-end gap-3">
           <div className="min-w-0">
-            <label className="text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1 block">
+            <label className="text-xs font-medium text-neutral-400 mb-1 block">
               Recognition
             </label>
             <Select
@@ -224,7 +224,7 @@ export default function ScriptSetupBlock({
           </div>
           {storage === 'local' && (
             <div>
-              <label className="text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1 block">
+              <label className="text-xs font-medium text-neutral-400 mb-1 block">
                 Reset after
               </label>
               <Select
@@ -242,14 +242,14 @@ export default function ScriptSetupBlock({
       {showFrameworkPicker && (
         <div className="mt-6">
           <div className="flex items-center justify-between mb-3">
-            <h4 className="text-sm font-semibold text-neutral-900 dark:text-white">
+            <h4 className="text-sm font-semibold text-white">
               Setup guide
             </h4>
             <Link
               href="/integrations"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-xs font-medium text-neutral-500 dark:text-neutral-400 hover:text-brand-orange transition-colors"
+              className="text-xs font-medium text-neutral-400 hover:text-brand-orange transition-colors"
             >
               All integrations →
             </Link>
diff --git a/components/sites/SiteList.tsx b/components/sites/SiteList.tsx
index 2168e16..a0d2d70 100644
--- a/components/sites/SiteList.tsx
+++ b/components/sites/SiteList.tsx
@@ -46,8 +46,8 @@ function SiteCard({ site, stats, statsLoading, onDelete, canDelete }: SiteCardPr
             />
           </div>
           <div>
-            <h3 className="font-semibold text-neutral-900 dark:text-white">{site.name}</h3>
-            <div className="flex items-center gap-1 text-sm text-neutral-500 dark:text-neutral-400">
+            <h3 className="font-semibold text-white">{site.name}</h3>
+            <div className="flex items-center gap-1 text-sm text-neutral-400">
               {site.domain}
               <a
                 href={`https://${site.domain}`}
@@ -84,13 +84,13 @@ function SiteCard({ site, stats, statsLoading, onDelete, canDelete }: SiteCardPr
       <div className="mb-6 grid grid-cols-2 gap-4 rounded-lg bg-neutral-50 p-3 dark:bg-neutral-800/50">
         <div>
           <p className="text-xs text-neutral-500">Visitors (24h)</p>
-          <p className="font-mono text-lg font-medium text-neutral-900 dark:text-white">
+          <p className="font-mono text-lg font-medium text-white">
             {statsLoading ? '--' : formatNumber(visitors24h)}
           </p>
         </div>
         <div>
           <p className="text-xs text-neutral-500">Pageviews</p>
-          <p className="font-mono text-lg font-medium text-neutral-900 dark:text-white">
+          <p className="font-mono text-lg font-medium text-white">
             {statsLoading ? '--' : formatNumber(pageviews)}
           </p>
         </div>
@@ -144,8 +144,8 @@ export default function SiteList({ sites, siteStats, loading, onDelete }: SiteLi
           className="mb-6"
           unoptimized
         />
-        <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">No sites yet</h3>
-        <p className="mt-2 text-sm text-neutral-500 dark:text-neutral-400 mb-4">Create your first site to get started.</p>
+        <h3 className="text-lg font-semibold text-white">No sites yet</h3>
+        <p className="mt-2 text-sm text-neutral-400 mb-4">Create your first site to get started.</p>
         <Link href="/sites/new">
           <Button variant="primary" className="text-sm">
             Add your first site
@@ -176,8 +176,8 @@ export default function SiteList({ sites, siteStats, loading, onDelete }: SiteLi
         <div className="mb-3 rounded-full bg-neutral-200 p-3 dark:bg-neutral-800">
           <BookOpenIcon className="h-6 w-6 text-neutral-500" />
         </div>
-        <h3 className="font-semibold text-neutral-900 dark:text-white">Need help setup?</h3>
-        <p className="mb-4 text-sm text-neutral-500 dark:text-neutral-400">Check our documentation for installation guides.</p>
+        <h3 className="font-semibold text-white">Need help setup?</h3>
+        <p className="mb-4 text-sm text-neutral-400">Check our documentation for installation guides.</p>
         <Link href="https://docs.ciphera.net" target="_blank" className="text-sm font-medium text-brand-orange hover:underline">
           Read Documentation &rarr;
         </Link>
diff --git a/components/sites/VerificationModal.tsx b/components/sites/VerificationModal.tsx
index 926b342..40f797e 100644
--- a/components/sites/VerificationModal.tsx
+++ b/components/sites/VerificationModal.tsx
@@ -105,7 +105,7 @@ export default function VerificationModal({ isOpen, onClose, site, onVerified }:
             >
               {/* Header */}
               <div className="flex items-center justify-between px-6 py-4 border-b border-neutral-100 dark:border-neutral-800">
-                <h3 className="font-semibold text-neutral-900 dark:text-white">
+                <h3 className="font-semibold text-white">
                   Verify Installation
                 </h3>
                 <button
@@ -148,10 +148,10 @@ export default function VerificationModal({ isOpen, onClose, site, onVerified }:
                       <div className="absolute inset-0 w-16 h-16 border-4 border-brand-orange border-t-transparent rounded-full animate-spin" />
                     </div>
                     <div className="text-center space-y-1">
-                      <h4 className="font-medium text-neutral-900 dark:text-white">
+                      <h4 className="font-medium text-white">
                         Checking connection...
                       </h4>
-                      <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                      <p className="text-sm text-neutral-400">
                         Waiting for signal from {site.domain}
                       </p>
                     </div>
@@ -164,10 +164,10 @@ export default function VerificationModal({ isOpen, onClose, site, onVerified }:
                       <CheckCircleIcon className="w-8 h-8" />
                     </div>
                     <div className="text-center space-y-1">
-                      <h4 className="text-xl font-bold text-neutral-900 dark:text-white">
+                      <h4 className="text-xl font-bold text-white">
                         You're all set!
                       </h4>
-                      <p className="text-neutral-500 dark:text-neutral-400">
+                      <p className="text-neutral-400">
                         We are successfully receiving data from your website.
                       </p>
                     </div>
@@ -189,7 +189,7 @@ export default function VerificationModal({ isOpen, onClose, site, onVerified }:
                     </div>
 
                     <div className="p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-xl border border-neutral-100 dark:border-neutral-800">
-                      <p className="text-sm font-medium text-neutral-900 dark:text-white mb-2">
+                      <p className="text-sm font-medium text-white mb-2">
                         Troubleshooting Checklist:
                       </p>
                       <ul className="text-sm text-neutral-600 dark:text-neutral-400 space-y-1 list-disc list-inside">
diff --git a/components/tools/UtmBuilder.tsx b/components/tools/UtmBuilder.tsx
index 8bced1b..bb13ea6 100644
--- a/components/tools/UtmBuilder.tsx
+++ b/components/tools/UtmBuilder.tsx
@@ -125,7 +125,7 @@ export default function UtmBuilder({ initialSiteId }: UtmBuilderProps) {
         {/* Site Selector */}
         {sites.length > 0 && (
           <div>
-            <label className="block text-sm font-medium mb-1 text-neutral-900 dark:text-white">Select Site</label>
+            <label className="block text-sm font-medium mb-1 text-white">Select Site</label>
             <Select
               value={selectedSiteId}
               onChange={handleSiteChange}
@@ -138,7 +138,7 @@ export default function UtmBuilder({ initialSiteId }: UtmBuilderProps) {
         )}
 
         <div>
-          <label className="block text-sm font-medium mb-1.5 text-neutral-900 dark:text-white">Website URL *</label>
+          <label className="block text-sm font-medium mb-1.5 text-white">Website URL *</label>
           {selectedSite ? (
             <div className="flex rounded-xl shadow-sm transition-all duration-200 focus-within:ring-4 focus-within:ring-brand-orange/10 focus-within:border-brand-orange hover:border-brand-orange/50 border border-neutral-200 dark:border-neutral-800">
               <span className="inline-flex items-center px-4 rounded-l-xl border-r border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-900 text-neutral-500 text-sm select-none">
@@ -146,7 +146,7 @@ export default function UtmBuilder({ initialSiteId }: UtmBuilderProps) {
               </span>
               <input
                 type="text"
-                className="flex-1 min-w-0 block w-full px-4 py-3 rounded-none rounded-r-xl bg-neutral-50/50 dark:bg-neutral-900/50 outline-none transition-all text-neutral-900 dark:text-white text-sm placeholder:text-neutral-400"
+                className="flex-1 min-w-0 block w-full px-4 py-3 rounded-none rounded-r-xl bg-neutral-50/50 dark:bg-neutral-900/50 outline-none transition-all text-white text-sm placeholder:text-neutral-400"
                 placeholder="/blog/post-1"
                 value={getCurrentPath()}
                 onChange={handlePathChange}
@@ -167,7 +167,7 @@ export default function UtmBuilder({ initialSiteId }: UtmBuilderProps) {
 
         <div className="grid grid-cols-2 gap-4">
           <div>
-            <label className="block text-sm font-medium mb-1.5 text-neutral-900 dark:text-white">Source *</label>
+            <label className="block text-sm font-medium mb-1.5 text-white">Source *</label>
             <Input
               name="source"
               placeholder="google, newsletter"
@@ -176,7 +176,7 @@ export default function UtmBuilder({ initialSiteId }: UtmBuilderProps) {
             />
           </div>
           <div>
-            <label className="block text-sm font-medium mb-1.5 text-neutral-900 dark:text-white">Medium *</label>
+            <label className="block text-sm font-medium mb-1.5 text-white">Medium *</label>
             <Input
               name="medium"
               placeholder="cpc, email"
@@ -186,7 +186,7 @@ export default function UtmBuilder({ initialSiteId }: UtmBuilderProps) {
           </div>
         </div>
         <div>
-          <label className="block text-sm font-medium mb-1.5 text-neutral-900 dark:text-white">Campaign Name *</label>
+          <label className="block text-sm font-medium mb-1.5 text-white">Campaign Name *</label>
           <Input
             name="campaign"
             placeholder="spring_sale"
diff --git a/lib/integration-guides.tsx b/lib/integration-guides.tsx
index b8bfa83..d72993d 100644
--- a/lib/integration-guides.tsx
+++ b/lib/integration-guides.tsx
@@ -2310,7 +2310,7 @@ export default defineConfig({
       </p>
 
       <details>
-        <summary className="cursor-pointer text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300">
+        <summary className="cursor-pointer text-sm text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300">
           Advanced: override domain or configure options
         </summary>
         <p className="mt-3 text-sm text-neutral-600 dark:text-neutral-400">
diff --git a/lib/utils/dateRanges.ts b/lib/utils/dateRanges.ts
new file mode 100644
index 0000000..a0ebad6
--- /dev/null
+++ b/lib/utils/dateRanges.ts
@@ -0,0 +1,20 @@
+import { getDateRange, formatDate } from '@ciphera-net/ui'
+
+/** Monday–today range for "This week" option */
+export function getThisWeekRange(): { start: string; end: string } {
+  const today = new Date()
+  const dayOfWeek = today.getDay()
+  const monday = new Date(today)
+  monday.setDate(today.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1))
+  return { start: formatDate(monday), end: formatDate(today) }
+}
+
+/** 1st of month–today range for "This month" option */
+export function getThisMonthRange(): { start: string; end: string } {
+  const today = new Date()
+  const firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1)
+  return { start: formatDate(firstOfMonth), end: formatDate(today) }
+}
+
+// Re-export for convenience
+export { getDateRange, formatDate }
diff --git a/package.json b/package.json
index 56c41a5..defbc53 100644
--- a/package.json
+++ b/package.json
@@ -20,8 +20,6 @@
     "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-slot": "^1.2.4",
     "@simplewebauthn/browser": "^13.2.2",
-    "@stripe/react-stripe-js": "^5.6.0",
-    "@stripe/stripe-js": "^8.7.0",
     "@tanstack/react-virtual": "^3.13.21",
     "@types/d3": "^7.4.3",
     "@visx/curve": "^3.12.0",
@@ -44,7 +42,6 @@
     "jspdf": "^4.0.0",
     "jspdf-autotable": "^5.0.7",
     "lucide-react": "^0.577.0",
-    "motion": "^12.35.2",
     "next": "^16.1.1",
     "radix-ui": "^1.4.3",
     "react": "^19.2.3",
-- 
2.49.1


From 6521b694f45d679c1c5f861f6df8bb5b90d9153c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 19:54:44 +0100
Subject: [PATCH 208/428] fix: replace motion/react imports with framer-motion
 + rounded content panel

- 4 files imported from 'motion/react' which was the removed 'motion' package.
  Replaced with 'framer-motion' (the package actually installed).
- Dashboard content area now has rounded corners, subtle border, and inset
  margin creating a "panel inside shell" visual separation from the sidebar.
---
 components/dashboard/DashboardShell.tsx       | 5 +++--
 components/marketing/mockups/funnel-chart.tsx | 2 +-
 components/ui/area-chart.tsx                  | 2 +-
 components/ui/bar-chart.tsx                   | 2 +-
 components/ui/funnel-chart.tsx                | 2 +-
 5 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 122a73f..d5772bb 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -31,14 +31,15 @@ export default function DashboardShell({
   const openMobile = useCallback(() => setMobileOpen(true), [])
 
   return (
-    <div className="flex h-screen overflow-hidden">
+    <div className="flex h-screen overflow-hidden bg-neutral-950">
       <Sidebar
         siteId={siteId}
         mobileOpen={mobileOpen}
         onMobileClose={closeMobile}
         onMobileOpen={openMobile}
       />
-      <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
+      {/* Content panel — rounded on all corners with slight inset to separate from sidebar */}
+      <div className="flex-1 flex flex-col min-w-0 overflow-hidden my-2 mr-2 rounded-2xl bg-neutral-900 border border-neutral-800/60">
         <ContentHeader onMobileMenuOpen={openMobile} />
         <main className="flex-1 overflow-y-auto pt-4">
           {children}
diff --git a/components/marketing/mockups/funnel-chart.tsx b/components/marketing/mockups/funnel-chart.tsx
index a234ad2..421663b 100644
--- a/components/marketing/mockups/funnel-chart.tsx
+++ b/components/marketing/mockups/funnel-chart.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { motion, useSpring, useTransform } from "motion/react";
+import { motion, useSpring, useTransform } from "framer-motion";
 import {
   type CSSProperties,
   type ReactNode,
diff --git a/components/ui/area-chart.tsx b/components/ui/area-chart.tsx
index 7fe4fd2..3104f12 100644
--- a/components/ui/area-chart.tsx
+++ b/components/ui/area-chart.tsx
@@ -12,7 +12,7 @@ import {
   motion,
   useMotionTemplate,
   useSpring,
-} from "motion/react";
+} from "framer-motion";
 import {
   Children,
   createContext,
diff --git a/components/ui/bar-chart.tsx b/components/ui/bar-chart.tsx
index 160952c..4f929e9 100644
--- a/components/ui/bar-chart.tsx
+++ b/components/ui/bar-chart.tsx
@@ -9,7 +9,7 @@ import {
   AnimatePresence,
   motion,
   useSpring,
-} from "motion/react";
+} from "framer-motion";
 import {
   Children,
   createContext,
diff --git a/components/ui/funnel-chart.tsx b/components/ui/funnel-chart.tsx
index 7e926ac..38e507e 100644
--- a/components/ui/funnel-chart.tsx
+++ b/components/ui/funnel-chart.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { motion, useSpring, useTransform } from "motion/react";
+import { motion, useSpring, useTransform } from "framer-motion";
 import {
   type CSSProperties,
   type ReactNode,
-- 
2.49.1


From ca2f1ce19d50cd49748870719cab90972dacf9c5 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 19:59:56 +0100
Subject: [PATCH 209/428] fix(dashboard): content panel as rounded card,
 sidebar border removed
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Content panel: bg-neutral-950, rounded-2xl, border, margin on top/right/bottom
- Sidebar: removed border-r — content panel's left border acts as separator
- Outer shell: bg-neutral-900 matches sidebar, creating "floating panel" effect
---
 components/dashboard/DashboardShell.tsx | 8 ++++----
 components/dashboard/Sidebar.tsx        | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index d5772bb..190b1d6 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -11,7 +11,7 @@ const Sidebar = dynamic(() => import('./Sidebar'), {
   // so page content never occupies the sidebar zone
   loading: () => (
     <div
-      className="hidden md:block shrink-0 border-r border-neutral-800/60 bg-neutral-900/90 backdrop-blur-xl overflow-hidden relative"
+      className="hidden md:block shrink-0 bg-neutral-900 overflow-hidden relative"
       style={{ width: 64 }}
     >
       <div className="absolute inset-0 bg-gradient-to-r from-transparent via-neutral-800/10 to-transparent animate-shimmer" />
@@ -31,15 +31,15 @@ export default function DashboardShell({
   const openMobile = useCallback(() => setMobileOpen(true), [])
 
   return (
-    <div className="flex h-screen overflow-hidden bg-neutral-950">
+    <div className="flex h-screen overflow-hidden bg-neutral-900">
       <Sidebar
         siteId={siteId}
         mobileOpen={mobileOpen}
         onMobileClose={closeMobile}
         onMobileOpen={openMobile}
       />
-      {/* Content panel — rounded on all corners with slight inset to separate from sidebar */}
-      <div className="flex-1 flex flex-col min-w-0 overflow-hidden my-2 mr-2 rounded-2xl bg-neutral-900 border border-neutral-800/60">
+      {/* Content panel — rounded corners, inset from edges. The left border doubles as the sidebar's right edge. */}
+      <div className="flex-1 flex flex-col min-w-0 overflow-hidden mt-2 mr-2 mb-2 rounded-2xl bg-neutral-950 border border-neutral-800/60">
         <ContentHeader onMobileMenuOpen={openMobile} />
         <main className="flex-1 overflow-y-auto pt-4">
           {children}
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 4fcbe2e..4f3b488 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -514,7 +514,7 @@ export default function Sidebar({
     <>
       {/* Desktop — ssr:false means this only renders on client, no hydration flash */}
       <aside
-        className="hidden md:flex flex-col shrink-0 border-r border-neutral-800/60 bg-neutral-900/90 backdrop-blur-xl overflow-hidden relative z-10"
+        className="hidden md:flex flex-col shrink-0 bg-neutral-900 overflow-hidden relative z-10"
         style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
         onTransitionEnd={(e) => {
           if (e.propertyName === 'width' && pickerOpenCallbackRef.current) {
-- 
2.49.1


From 3c17895d647b49ce6957fe85f083f7420f2de41f Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 20:57:20 +0100
Subject: [PATCH 210/428] feat(settings): unified settings modal with context
 switcher (Phase 1)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

New unified settings modal accessible via `,` keyboard shortcut.
Three-context switcher: Site (with site dropdown), Workspace, Account.
Horizontal tabs per context with animated transitions.

Phase 1 tabs implemented:
- Site → General (name, timezone, domain, tracking script with copy)
- Site → Goals (CRUD with inline create/edit)
- Workspace → General (org name, slug, danger zone)
- Workspace → Billing (plan card, usage, cancel/resume, portal)
- Account → Profile (wraps existing ProfileSettings)

Phase 2 tabs show "Coming soon" placeholder:
- Site: Visibility, Privacy, Bot & Spam, Reports, Integrations
- Workspace: Members, Notifications, Audit Log
- Account: Security, Devices

Old settings pages and profile modal remain functional.
---
 app/layout-content.tsx                        |   8 +-
 components/dashboard/Sidebar.tsx              |  12 +-
 .../settings/unified/UnifiedSettingsModal.tsx | 386 ++++++++++++++++++
 .../unified/tabs/AccountProfileTab.tsx        |  17 +
 .../settings/unified/tabs/SiteGeneralTab.tsx  | 137 +++++++
 .../settings/unified/tabs/SiteGoalsTab.tsx    | 170 ++++++++
 .../unified/tabs/WorkspaceBillingTab.tsx      | 166 ++++++++
 .../unified/tabs/WorkspaceGeneralTab.tsx      |  98 +++++
 lib/unified-settings-context.tsx              |  44 ++
 9 files changed, 1034 insertions(+), 4 deletions(-)
 create mode 100644 components/settings/unified/UnifiedSettingsModal.tsx
 create mode 100644 components/settings/unified/tabs/AccountProfileTab.tsx
 create mode 100644 components/settings/unified/tabs/SiteGeneralTab.tsx
 create mode 100644 components/settings/unified/tabs/SiteGoalsTab.tsx
 create mode 100644 components/settings/unified/tabs/WorkspaceBillingTab.tsx
 create mode 100644 components/settings/unified/tabs/WorkspaceGeneralTab.tsx
 create mode 100644 lib/unified-settings-context.tsx

diff --git a/app/layout-content.tsx b/app/layout-content.tsx
index 4e644a0..8e91ea6 100644
--- a/app/layout-content.tsx
+++ b/app/layout-content.tsx
@@ -16,7 +16,9 @@ import { setSessionAction } from '@/app/actions/auth'
 import { LoadingOverlay } from '@ciphera-net/ui'
 import { useRouter } from 'next/navigation'
 import { SettingsModalProvider, useSettingsModal } from '@/lib/settings-modal-context'
+import { UnifiedSettingsProvider } from '@/lib/unified-settings-context'
 import SettingsModalWrapper from '@/components/settings/SettingsModalWrapper'
+import UnifiedSettingsModal from '@/components/settings/unified/UnifiedSettingsModal'
 
 const ORG_SWITCH_KEY = 'pulse_switching_org'
 
@@ -109,6 +111,7 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
         {showOfflineBar && <OfflineBanner isOnline={isOnline} />}
         {children}
         <SettingsModalWrapper />
+        <UnifiedSettingsModal />
       </>
     )
   }
@@ -141,6 +144,7 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
           {children}
         </main>
         <SettingsModalWrapper />
+        <UnifiedSettingsModal />
       </div>
     )
   }
@@ -165,7 +169,9 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
 export default function LayoutContent({ children }: { children: React.ReactNode }) {
   return (
     <SettingsModalProvider>
-      <LayoutInner>{children}</LayoutInner>
+      <UnifiedSettingsProvider>
+        <LayoutInner>{children}</LayoutInner>
+      </UnifiedSettingsProvider>
     </SettingsModalProvider>
   )
 }
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 4f3b488..4362005 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -6,6 +6,7 @@ import { usePathname, useRouter } from 'next/navigation'
 import { listSites, type Site } from '@/lib/api/sites'
 import { useAuth } from '@/lib/auth/context'
 import { useSettingsModal } from '@/lib/settings-modal-context'
+import { useUnifiedSettings } from '@/lib/unified-settings-context'
 import { getUserOrganizations, switchContext, type OrganizationMember } from '@/lib/api/organization'
 import { setSessionAction } from '@/app/actions/auth'
 import { logger } from '@/lib/utils/logger'
@@ -443,6 +444,7 @@ export default function Sidebar({
   const pathname = usePathname()
   const router = useRouter()
   const { openSettings } = useSettingsModal()
+  const { openUnifiedSettings } = useUnifiedSettings()
   const [sites, setSites] = useState<Site[]>([])
   const [orgs, setOrgs] = useState<OrganizationMember[]>([])
   const [pendingHref, setPendingHref] = useState<string | null>(null)
@@ -478,15 +480,19 @@ export default function Sidebar({
 
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
+      const tag = (e.target as HTMLElement)?.tagName
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return
       if (e.key === '[' && !e.metaKey && !e.ctrlKey && !e.altKey) {
-        const tag = (e.target as HTMLElement)?.tagName
-        if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return
         e.preventDefault(); toggle()
       }
+      // `,` opens unified settings (same as GitHub/Linear)
+      if (e.key === ',' && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        e.preventDefault(); openUnifiedSettings()
+      }
     }
     document.addEventListener('keydown', handler)
     return () => document.removeEventListener('keydown', handler)
-  }, [collapsed])
+  }, [collapsed, openUnifiedSettings])
 
   const toggle = useCallback(() => {
     setCollapsed((prev) => { const next = !prev; localStorage.setItem(SIDEBAR_KEY, String(next)); return next })
diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
new file mode 100644
index 0000000..dffc77b
--- /dev/null
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -0,0 +1,386 @@
+'use client'
+
+import { useState, useCallback, useEffect } from 'react'
+import { AnimatePresence, motion } from 'framer-motion'
+import { X, GearSix, Buildings, User, CaretDown } from '@phosphor-icons/react'
+import { useUnifiedSettings } from '@/lib/unified-settings-context'
+import { useAuth } from '@/lib/auth/context'
+import { useSite } from '@/lib/swr/dashboard'
+import { listSites, type Site } from '@/lib/api/sites'
+
+// Tab content components
+import SiteGeneralTab from './tabs/SiteGeneralTab'
+import SiteGoalsTab from './tabs/SiteGoalsTab'
+import WorkspaceGeneralTab from './tabs/WorkspaceGeneralTab'
+import WorkspaceBillingTab from './tabs/WorkspaceBillingTab'
+import AccountProfileTab from './tabs/AccountProfileTab'
+
+// ─── Types ──────────────────────────────────────────────────────
+
+type SettingsContext = 'site' | 'workspace' | 'account'
+
+interface TabDef {
+  id: string
+  label: string
+}
+
+const SITE_TABS: TabDef[] = [
+  { id: 'general', label: 'General' },
+  { id: 'goals', label: 'Goals' },
+  { id: 'visibility', label: 'Visibility' },
+  { id: 'privacy', label: 'Privacy' },
+  { id: 'bot-spam', label: 'Bot & Spam' },
+  { id: 'reports', label: 'Reports' },
+  { id: 'integrations', label: 'Integrations' },
+]
+
+const WORKSPACE_TABS: TabDef[] = [
+  { id: 'general', label: 'General' },
+  { id: 'members', label: 'Members' },
+  { id: 'billing', label: 'Billing' },
+  { id: 'notifications', label: 'Notifications' },
+  { id: 'audit', label: 'Audit Log' },
+]
+
+const ACCOUNT_TABS: TabDef[] = [
+  { id: 'profile', label: 'Profile' },
+  { id: 'security', label: 'Security' },
+  { id: 'devices', label: 'Devices' },
+]
+
+// ─── Context Switcher ───────────────────────────────────────────
+
+function ContextSwitcher({
+  active,
+  onChange,
+  sites,
+  activeSiteId,
+  onSiteChange,
+}: {
+  active: SettingsContext
+  onChange: (ctx: SettingsContext) => void
+  sites: Site[]
+  activeSiteId: string | null
+  onSiteChange: (id: string) => void
+}) {
+  const [siteDropdownOpen, setSiteDropdownOpen] = useState(false)
+  const activeSite = sites.find(s => s.id === activeSiteId)
+
+  return (
+    <div className="flex items-center gap-1 p-1 bg-neutral-800/50 rounded-xl">
+      {/* Site button with dropdown */}
+      <div className="relative">
+        <button
+          onClick={() => {
+            onChange('site')
+            if (active === 'site') setSiteDropdownOpen(!siteDropdownOpen)
+          }}
+          className={`flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
+            active === 'site'
+              ? 'bg-neutral-700 text-white shadow-sm'
+              : 'text-neutral-400 hover:text-white'
+          }`}
+        >
+          <GearSix weight="bold" className="w-4 h-4" />
+          <span className="hidden sm:inline">
+            {activeSite ? activeSite.domain : 'Site'}
+          </span>
+          <CaretDown weight="bold" className="w-3 h-3" />
+        </button>
+
+        <AnimatePresence>
+          {siteDropdownOpen && active === 'site' && sites.length > 1 && (
+            <motion.div
+              initial={{ opacity: 0, y: -4 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -4 }}
+              transition={{ duration: 0.15 }}
+              className="absolute top-full left-0 mt-1 w-56 rounded-xl bg-neutral-800 border border-neutral-700 shadow-xl z-50 py-1 overflow-hidden"
+            >
+              {sites.map(site => (
+                <button
+                  key={site.id}
+                  onClick={() => {
+                    onSiteChange(site.id)
+                    setSiteDropdownOpen(false)
+                  }}
+                  className={`w-full text-left px-3 py-2 text-sm transition-colors ${
+                    site.id === activeSiteId
+                      ? 'bg-brand-orange/10 text-brand-orange'
+                      : 'text-neutral-300 hover:bg-neutral-700/50'
+                  }`}
+                >
+                  <span className="font-medium">{site.name}</span>
+                  <span className="ml-2 text-neutral-500 text-xs">{site.domain}</span>
+                </button>
+              ))}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
+      <button
+        onClick={() => { onChange('workspace'); setSiteDropdownOpen(false) }}
+        className={`flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
+          active === 'workspace'
+            ? 'bg-neutral-700 text-white shadow-sm'
+            : 'text-neutral-400 hover:text-white'
+        }`}
+      >
+        <Buildings weight="bold" className="w-4 h-4" />
+        <span className="hidden sm:inline">Workspace</span>
+      </button>
+
+      <button
+        onClick={() => { onChange('account'); setSiteDropdownOpen(false) }}
+        className={`flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
+          active === 'account'
+            ? 'bg-neutral-700 text-white shadow-sm'
+            : 'text-neutral-400 hover:text-white'
+        }`}
+      >
+        <User weight="bold" className="w-4 h-4" />
+        <span className="hidden sm:inline">Account</span>
+      </button>
+    </div>
+  )
+}
+
+// ─── Tab Bar ────────────────────────────────────────────────────
+
+function TabBar({
+  tabs,
+  activeTab,
+  onChange,
+}: {
+  tabs: TabDef[]
+  activeTab: string
+  onChange: (id: string) => void
+}) {
+  return (
+    <div className="flex gap-1 overflow-x-auto scrollbar-hide pb-px">
+      {tabs.map(tab => (
+        <button
+          key={tab.id}
+          onClick={() => onChange(tab.id)}
+          className={`relative px-3 py-2 text-sm font-medium whitespace-nowrap rounded-lg transition-all duration-200 ${
+            activeTab === tab.id
+              ? 'text-brand-orange'
+              : 'text-neutral-500 hover:text-neutral-300'
+          }`}
+        >
+          {tab.label}
+          {activeTab === tab.id && (
+            <motion.div
+              layoutId="settings-tab-indicator"
+              className="absolute bottom-0 left-2 right-2 h-0.5 bg-brand-orange rounded-full"
+              transition={{ type: 'spring', bounce: 0.2, duration: 0.4 }}
+            />
+          )}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+// ─── Tab Content ────────────────────────────────────────────────
+
+function ComingSoon({ label }: { label: string }) {
+  return (
+    <div className="flex flex-col items-center justify-center py-16 text-center">
+      <div className="rounded-full bg-neutral-800 p-4 mb-4">
+        <GearSix className="w-8 h-8 text-neutral-500" />
+      </div>
+      <h3 className="text-lg font-semibold text-white mb-1">{label}</h3>
+      <p className="text-sm text-neutral-400 max-w-sm">
+        This section is being migrated. For now, use the existing settings page.
+      </p>
+    </div>
+  )
+}
+
+function TabContent({
+  context,
+  activeTab,
+  siteId,
+}: {
+  context: SettingsContext
+  activeTab: string
+  siteId: string | null
+}) {
+  // Site tabs
+  if (context === 'site' && siteId) {
+    switch (activeTab) {
+      case 'general': return <SiteGeneralTab siteId={siteId} />
+      case 'goals': return <SiteGoalsTab siteId={siteId} />
+      case 'visibility': return <ComingSoon label="Visibility" />
+      case 'privacy': return <ComingSoon label="Data & Privacy" />
+      case 'bot-spam': return <ComingSoon label="Bot & Spam" />
+      case 'reports': return <ComingSoon label="Reports" />
+      case 'integrations': return <ComingSoon label="Integrations" />
+    }
+  }
+
+  // Workspace tabs
+  if (context === 'workspace') {
+    switch (activeTab) {
+      case 'general': return <WorkspaceGeneralTab />
+      case 'billing': return <WorkspaceBillingTab />
+      case 'members': return <ComingSoon label="Members" />
+      case 'notifications': return <ComingSoon label="Notifications" />
+      case 'audit': return <ComingSoon label="Audit Log" />
+    }
+  }
+
+  // Account tabs
+  if (context === 'account') {
+    switch (activeTab) {
+      case 'profile': return <AccountProfileTab />
+      case 'security': return <ComingSoon label="Security" />
+      case 'devices': return <ComingSoon label="Devices" />
+    }
+  }
+
+  return null
+}
+
+// ─── Main Modal ─────────────────────────────────────────────────
+
+export default function UnifiedSettingsModal() {
+  const { isOpen, closeUnifiedSettings: closeSettings, initialTab: initTab } = useUnifiedSettings()
+  const { user } = useAuth()
+
+  const [context, setContext] = useState<SettingsContext>('site')
+  const [siteTabs, setSiteTabs] = useState('general')
+  const [workspaceTabs, setWorkspaceTabs] = useState('general')
+  const [accountTabs, setAccountTabs] = useState('profile')
+
+  const [sites, setSites] = useState<Site[]>([])
+  const [activeSiteId, setActiveSiteId] = useState<string | null>(null)
+
+  // Apply initial tab when modal opens
+  useEffect(() => {
+    if (isOpen && initTab) {
+      if (initTab.context) setContext(initTab.context)
+      if (initTab.tab) {
+        if (initTab.context === 'site') setSiteTabs(initTab.tab)
+        else if (initTab.context === 'workspace') setWorkspaceTabs(initTab.tab)
+        else if (initTab.context === 'account') setAccountTabs(initTab.tab)
+      }
+    }
+  }, [isOpen, initTab])
+
+  // Load sites when modal opens
+  useEffect(() => {
+    if (isOpen && user?.org_id) {
+      listSites().then(data => {
+        const list = Array.isArray(data) ? data : []
+        setSites(list)
+        if (!activeSiteId && list.length > 0) {
+          setActiveSiteId(list[0].id)
+        }
+      }).catch(() => {})
+    }
+  }, [isOpen, user?.org_id])
+
+  // Try to pick up site from URL
+  useEffect(() => {
+    if (isOpen && typeof window !== 'undefined') {
+      const match = window.location.pathname.match(/\/sites\/([a-f0-9-]+)/)
+      if (match) setActiveSiteId(match[1])
+    }
+  }, [isOpen])
+
+  // Escape key closes
+  useEffect(() => {
+    if (!isOpen) return
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') closeSettings()
+    }
+    window.addEventListener('keydown', handleEsc)
+    return () => window.removeEventListener('keydown', handleEsc)
+  }, [isOpen, closeSettings])
+
+  const tabs = context === 'site' ? SITE_TABS : context === 'workspace' ? WORKSPACE_TABS : ACCOUNT_TABS
+  const activeTab = context === 'site' ? siteTabs : context === 'workspace' ? workspaceTabs : accountTabs
+  const setActiveTab = context === 'site' ? setSiteTabs : context === 'workspace' ? setWorkspaceTabs : setAccountTabs
+
+  const handleContextChange = useCallback((ctx: SettingsContext) => {
+    setContext(ctx)
+  }, [])
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          {/* Backdrop */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="fixed inset-0 z-[60] bg-black/60 backdrop-blur-sm"
+            onClick={closeSettings}
+          />
+
+          {/* Modal */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.97, y: 8 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.97, y: 8 }}
+            transition={{ type: 'spring', bounce: 0.15, duration: 0.35 }}
+            className="fixed inset-0 z-[61] flex items-center justify-center p-4 pointer-events-none"
+          >
+            <div
+              className="pointer-events-auto w-full max-w-3xl max-h-[90vh] bg-neutral-900 border border-neutral-800 rounded-2xl shadow-2xl flex flex-col overflow-hidden"
+              onClick={e => e.stopPropagation()}
+            >
+              {/* Header */}
+              <div className="shrink-0 px-6 pt-5 pb-4 border-b border-neutral-800/60">
+                <div className="flex items-center justify-between mb-4">
+                  <h2 className="text-lg font-semibold text-white">Settings</h2>
+                  <button
+                    onClick={closeSettings}
+                    className="p-1.5 rounded-lg text-neutral-500 hover:text-white hover:bg-neutral-800 transition-colors"
+                  >
+                    <X weight="bold" className="w-4 h-4" />
+                  </button>
+                </div>
+
+                {/* Context Switcher */}
+                <ContextSwitcher
+                  active={context}
+                  onChange={handleContextChange}
+                  sites={sites}
+                  activeSiteId={activeSiteId}
+                  onSiteChange={setActiveSiteId}
+                />
+
+                {/* Tabs */}
+                <div className="mt-4">
+                  <TabBar tabs={tabs} activeTab={activeTab} onChange={setActiveTab} />
+                </div>
+              </div>
+
+              {/* Content */}
+              <div className="flex-1 overflow-y-auto">
+                <AnimatePresence mode="wait">
+                  <motion.div
+                    key={`${context}-${activeTab}`}
+                    initial={{ opacity: 0, x: 8 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    exit={{ opacity: 0, x: -8 }}
+                    transition={{ duration: 0.15 }}
+                    className="p-6"
+                  >
+                    <TabContent context={context} activeTab={activeTab} siteId={activeSiteId} />
+                  </motion.div>
+                </AnimatePresence>
+              </div>
+            </div>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  )
+}
diff --git a/components/settings/unified/tabs/AccountProfileTab.tsx b/components/settings/unified/tabs/AccountProfileTab.tsx
new file mode 100644
index 0000000..cb81ee7
--- /dev/null
+++ b/components/settings/unified/tabs/AccountProfileTab.tsx
@@ -0,0 +1,17 @@
+'use client'
+
+import ProfileSettings from '@/components/settings/ProfileSettings'
+import TrustedDevicesCard from '@/components/settings/TrustedDevicesCard'
+
+export default function AccountProfileTab() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-base font-semibold text-white mb-1">Profile</h3>
+        <p className="text-sm text-neutral-400">Manage your personal account settings.</p>
+      </div>
+
+      <ProfileSettings activeTab="profile" borderless hideDangerZone />
+    </div>
+  )
+}
diff --git a/components/settings/unified/tabs/SiteGeneralTab.tsx b/components/settings/unified/tabs/SiteGeneralTab.tsx
new file mode 100644
index 0000000..b6c0e9e
--- /dev/null
+++ b/components/settings/unified/tabs/SiteGeneralTab.tsx
@@ -0,0 +1,137 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Input, Button, Select, toast, Spinner } from '@ciphera-net/ui'
+import { Copy, CheckCircle } from '@phosphor-icons/react'
+import { useSite } from '@/lib/swr/dashboard'
+import { updateSite } from '@/lib/api/sites'
+
+const TIMEZONES = [
+  { value: 'UTC', label: 'UTC' },
+  { value: 'Europe/London', label: 'Europe/London (GMT)' },
+  { value: 'Europe/Brussels', label: 'Europe/Brussels (CET)' },
+  { value: 'Europe/Berlin', label: 'Europe/Berlin (CET)' },
+  { value: 'Europe/Paris', label: 'Europe/Paris (CET)' },
+  { value: 'Europe/Amsterdam', label: 'Europe/Amsterdam (CET)' },
+  { value: 'America/New_York', label: 'America/New York (EST)' },
+  { value: 'America/Chicago', label: 'America/Chicago (CST)' },
+  { value: 'America/Denver', label: 'America/Denver (MST)' },
+  { value: 'America/Los_Angeles', label: 'America/Los Angeles (PST)' },
+  { value: 'Asia/Tokyo', label: 'Asia/Tokyo (JST)' },
+  { value: 'Asia/Shanghai', label: 'Asia/Shanghai (CST)' },
+  { value: 'Asia/Kolkata', label: 'Asia/Kolkata (IST)' },
+  { value: 'Australia/Sydney', label: 'Australia/Sydney (AEST)' },
+]
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8082'
+const APP_URL = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3003'
+
+export default function SiteGeneralTab({ siteId }: { siteId: string }) {
+  const { data: site, mutate } = useSite(siteId)
+  const [name, setName] = useState('')
+  const [timezone, setTimezone] = useState('UTC')
+  const [saving, setSaving] = useState(false)
+  const [copied, setCopied] = useState(false)
+
+  useEffect(() => {
+    if (site) {
+      setName(site.name || '')
+      setTimezone(site.timezone || 'UTC')
+    }
+  }, [site])
+
+  const handleSave = async () => {
+    if (!site) return
+    setSaving(true)
+    try {
+      await updateSite(siteId, { name, timezone })
+      await mutate()
+      toast.success('Site updated')
+    } catch {
+      toast.error('Failed to save')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const trackingScript = `<script defer data-domain="${site?.domain || ''}" data-api="${API_URL}" src="${APP_URL}/script.js"></script>`
+  const frustrationScript = `<script defer src="${APP_URL}/script.frustration.js"></script>`
+
+  const copyScript = () => {
+    navigator.clipboard.writeText(trackingScript + '\n' + frustrationScript)
+    setCopied(true)
+    toast.success('Copied to clipboard')
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  if (!site) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Spinner className="w-6 h-6 text-neutral-500" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-8">
+      {/* Site details */}
+      <div className="space-y-4">
+        <div>
+          <h3 className="text-base font-semibold text-white mb-1">General Configuration</h3>
+          <p className="text-sm text-neutral-400">Update your site details and tracking script.</p>
+        </div>
+
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-neutral-300 mb-1.5">Site Name</label>
+            <Input value={name} onChange={e => setName(e.target.value)} placeholder="My Website" />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-neutral-300 mb-1.5">Timezone</label>
+            <Select
+              value={timezone}
+              onChange={setTimezone}
+              variant="input"
+              options={TIMEZONES.map(tz => ({ value: tz.value, label: tz.label }))}
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-neutral-300 mb-1.5">Domain</label>
+            <Input value={site.domain} disabled className="opacity-60" />
+            <p className="text-xs text-neutral-500 mt-1">Domain cannot be changed after creation.</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Tracking Script */}
+      <div className="space-y-3">
+        <div>
+          <h3 className="text-base font-semibold text-white mb-1">Tracking Script</h3>
+          <p className="text-sm text-neutral-400">Add this to your website to start tracking visitors.</p>
+        </div>
+
+        <div className="relative rounded-xl bg-neutral-950 border border-neutral-800 p-4 overflow-x-auto">
+          <pre className="text-xs text-neutral-300 font-mono leading-relaxed whitespace-pre-wrap break-all pr-16">
+            {trackingScript}{'\n'}{frustrationScript}
+          </pre>
+          <button
+            onClick={copyScript}
+            className="absolute top-3 right-3 flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-lg bg-brand-orange/10 text-brand-orange hover:bg-brand-orange/20 transition-colors"
+          >
+            {copied ? <CheckCircle weight="bold" className="w-3.5 h-3.5" /> : <Copy weight="bold" className="w-3.5 h-3.5" />}
+            {copied ? 'Copied' : 'Copy'}
+          </button>
+        </div>
+      </div>
+
+      {/* Save */}
+      <div className="flex justify-end pt-2">
+        <Button onClick={handleSave} variant="primary" disabled={saving}>
+          {saving ? 'Saving...' : 'Save Changes'}
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/components/settings/unified/tabs/SiteGoalsTab.tsx b/components/settings/unified/tabs/SiteGoalsTab.tsx
new file mode 100644
index 0000000..4121b92
--- /dev/null
+++ b/components/settings/unified/tabs/SiteGoalsTab.tsx
@@ -0,0 +1,170 @@
+'use client'
+
+import { useState } from 'react'
+import { Input, Button, toast } from '@ciphera-net/ui'
+import { Plus, Pencil, Trash, X } from '@phosphor-icons/react'
+import { Spinner } from '@ciphera-net/ui'
+import { useGoals } from '@/lib/swr/dashboard'
+import { createGoal, updateGoal, deleteGoal } from '@/lib/api/goals'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
+
+export default function SiteGoalsTab({ siteId }: { siteId: string }) {
+  const { data: goals = [], mutate, isLoading } = useGoals(siteId)
+  const [editing, setEditing] = useState<string | null>(null)
+  const [creating, setCreating] = useState(false)
+  const [name, setName] = useState('')
+  const [eventName, setEventName] = useState('')
+  const [saving, setSaving] = useState(false)
+
+  const startCreate = () => {
+    setCreating(true)
+    setEditing(null)
+    setName('')
+    setEventName('')
+  }
+
+  const startEdit = (goal: { id: string; name: string; event_name: string }) => {
+    setEditing(goal.id)
+    setCreating(false)
+    setName(goal.name)
+    setEventName(goal.event_name)
+  }
+
+  const cancel = () => {
+    setCreating(false)
+    setEditing(null)
+    setName('')
+    setEventName('')
+  }
+
+  const handleSave = async () => {
+    if (!name.trim() || !eventName.trim()) {
+      toast.error('Name and event name are required')
+      return
+    }
+    if (!/^[a-zA-Z0-9_]+$/.test(eventName)) {
+      toast.error('Event name can only contain letters, numbers, and underscores')
+      return
+    }
+
+    setSaving(true)
+    try {
+      if (editing) {
+        await updateGoal(siteId, editing, { name, event_name: eventName })
+        toast.success('Goal updated')
+      } else {
+        await createGoal(siteId, { name, event_name: eventName })
+        toast.success('Goal created')
+      }
+      await mutate()
+      cancel()
+    } catch (err) {
+      toast.error(getAuthErrorMessage(err as Error) || 'Failed to save goal')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleDelete = async (goalId: string) => {
+    try {
+      await deleteGoal(siteId, goalId)
+      toast.success('Goal deleted')
+      await mutate()
+    } catch (err) {
+      toast.error(getAuthErrorMessage(err as Error) || 'Failed to delete goal')
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Spinner className="w-6 h-6 text-neutral-500" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-base font-semibold text-white mb-1">Goals</h3>
+          <p className="text-sm text-neutral-400">Track custom events as conversion goals.</p>
+        </div>
+        {!creating && !editing && (
+          <Button onClick={startCreate} variant="primary" className="text-sm gap-1.5">
+            <Plus weight="bold" className="w-3.5 h-3.5" /> Add Goal
+          </Button>
+        )}
+      </div>
+
+      {/* Create/Edit form */}
+      {(creating || editing) && (
+        <div className="rounded-xl border border-neutral-800 bg-neutral-800/30 p-4 space-y-3">
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="block text-xs font-medium text-neutral-400 mb-1">Display Name</label>
+              <Input
+                value={name}
+                onChange={e => setName(e.target.value)}
+                placeholder="e.g. Sign Up"
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-neutral-400 mb-1">Event Name</label>
+              <Input
+                value={eventName}
+                onChange={e => setEventName(e.target.value)}
+                placeholder="e.g. signup_click"
+                disabled={!!editing}
+              />
+            </div>
+          </div>
+          <div className="flex items-center gap-2 justify-end">
+            <Button onClick={cancel} variant="secondary" className="text-sm">Cancel</Button>
+            <Button onClick={handleSave} variant="primary" className="text-sm" disabled={saving}>
+              {saving ? 'Saving...' : editing ? 'Update' : 'Create'}
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* Goals list */}
+      {goals.length === 0 && !creating ? (
+        <div className="text-center py-10">
+          <p className="text-sm text-neutral-500 mb-3">No goals yet. Add a goal to track custom events.</p>
+          <Button onClick={startCreate} variant="primary" className="text-sm gap-1.5">
+            <Plus weight="bold" className="w-3.5 h-3.5" /> Add your first goal
+          </Button>
+        </div>
+      ) : (
+        <div className="space-y-1">
+          {goals.map(goal => (
+            <div
+              key={goal.id}
+              className="flex items-center justify-between px-4 py-3 rounded-xl hover:bg-neutral-800/40 transition-colors group"
+            >
+              <div>
+                <p className="text-sm font-medium text-white">{goal.name}</p>
+                <p className="text-xs text-neutral-500 font-mono">{goal.event_name}</p>
+              </div>
+              <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                <button
+                  onClick={() => startEdit(goal)}
+                  className="p-1.5 rounded-lg text-neutral-500 hover:text-white hover:bg-neutral-800 transition-colors"
+                >
+                  <Pencil weight="bold" className="w-3.5 h-3.5" />
+                </button>
+                <button
+                  onClick={() => handleDelete(goal.id)}
+                  className="p-1.5 rounded-lg text-neutral-500 hover:text-red-400 hover:bg-red-900/20 transition-colors"
+                >
+                  <Trash weight="bold" className="w-3.5 h-3.5" />
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/components/settings/unified/tabs/WorkspaceBillingTab.tsx b/components/settings/unified/tabs/WorkspaceBillingTab.tsx
new file mode 100644
index 0000000..480c281
--- /dev/null
+++ b/components/settings/unified/tabs/WorkspaceBillingTab.tsx
@@ -0,0 +1,166 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { Button, toast, Spinner } from '@ciphera-net/ui'
+import { CreditCard, ArrowSquareOut } from '@phosphor-icons/react'
+import { useSubscription } from '@/lib/swr/dashboard'
+import { createPortalSession, cancelSubscription, resumeSubscription } from '@/lib/api/billing'
+import { formatDateLong } from '@/lib/utils/formatDate'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
+
+export default function WorkspaceBillingTab() {
+  const { data: subscription, isLoading, mutate } = useSubscription()
+  const [cancelling, setCancelling] = useState(false)
+
+  const handleManageBilling = async () => {
+    try {
+      const { url } = await createPortalSession()
+      if (url) window.open(url, '_blank')
+    } catch (err) {
+      toast.error(getAuthErrorMessage(err as Error) || 'Failed to open billing portal')
+    }
+  }
+
+  const handleCancel = async () => {
+    if (!confirm('Are you sure you want to cancel your subscription?')) return
+    setCancelling(true)
+    try {
+      await cancelSubscription()
+      await mutate()
+      toast.success('Subscription cancelled')
+    } catch (err) {
+      toast.error(getAuthErrorMessage(err as Error) || 'Failed to cancel subscription')
+    } finally {
+      setCancelling(false)
+    }
+  }
+
+  const handleResume = async () => {
+    try {
+      await resumeSubscription()
+      await mutate()
+      toast.success('Subscription resumed')
+    } catch (err) {
+      toast.error(getAuthErrorMessage(err as Error) || 'Failed to resume subscription')
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Spinner className="w-6 h-6 text-neutral-500" />
+      </div>
+    )
+  }
+
+  if (!subscription) {
+    return (
+      <div className="text-center py-12">
+        <CreditCard className="w-10 h-10 text-neutral-500 mx-auto mb-3" />
+        <h3 className="text-base font-semibold text-white mb-1">No subscription</h3>
+        <p className="text-sm text-neutral-400 mb-4">You're on the free plan.</p>
+        <Link href="/pricing">
+          <Button variant="primary" className="text-sm">View Plans</Button>
+        </Link>
+      </div>
+    )
+  }
+
+  const planLabel = (() => {
+    const raw = subscription.plan_id?.startsWith('price_') ? 'Pro'
+      : subscription.plan_id === 'free' || !subscription.plan_id ? 'Free'
+      : subscription.plan_id
+    return raw === 'Free' || raw === 'Pro' ? raw : raw.charAt(0).toUpperCase() + raw.slice(1)
+  })()
+
+  const isActive = subscription.subscription_status === 'active' || subscription.subscription_status === 'trialing'
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-base font-semibold text-white mb-1">Billing & Subscription</h3>
+        <p className="text-sm text-neutral-400">Manage your plan, usage, and payment details.</p>
+      </div>
+
+      {/* Plan card */}
+      <div className="rounded-xl border border-neutral-800 bg-neutral-800/30 p-5">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-3">
+            <h4 className="text-lg font-bold text-white">{planLabel} Plan</h4>
+            {isActive && (
+              <span className="px-2 py-0.5 text-xs font-medium rounded-full bg-green-900/30 text-green-400 border border-green-900/50">
+                {subscription.subscription_status === 'trialing' ? 'Trial' : 'Active'}
+              </span>
+            )}
+            {subscription.cancel_at_period_end && (
+              <span className="px-2 py-0.5 text-xs font-medium rounded-full bg-yellow-900/30 text-yellow-400 border border-yellow-900/50">
+                Cancelling
+              </span>
+            )}
+          </div>
+          <Link href="/pricing">
+            <Button variant="primary" className="text-sm">Change Plan</Button>
+          </Link>
+        </div>
+
+        {/* Usage stats */}
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+          {typeof subscription.sites_count === 'number' && (
+            <div>
+              <p className="text-xs text-neutral-500 uppercase tracking-wider">Sites</p>
+              <p className="text-lg font-semibold text-white">{subscription.sites_count}</p>
+            </div>
+          )}
+          {subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number' && (
+            <div>
+              <p className="text-xs text-neutral-500 uppercase tracking-wider">Pageviews</p>
+              <p className="text-lg font-semibold text-white">{subscription.pageview_usage.toLocaleString()} / {subscription.pageview_limit.toLocaleString()}</p>
+            </div>
+          )}
+          {subscription.current_period_end && (
+            <div>
+              <p className="text-xs text-neutral-500 uppercase tracking-wider">
+                {subscription.cancel_at_period_end ? 'Ends' : 'Renews'}
+              </p>
+              <p className="text-lg font-semibold text-white">{formatDateLong(new Date(subscription.current_period_end))}</p>
+            </div>
+          )}
+          {subscription.pageview_limit > 0 && (
+            <div>
+              <p className="text-xs text-neutral-500 uppercase tracking-wider">Limit</p>
+              <p className="text-lg font-semibold text-white">{subscription.pageview_limit.toLocaleString()} / mo</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="flex flex-wrap gap-3">
+        {subscription.has_payment_method && (
+          <Button onClick={handleManageBilling} variant="secondary" className="text-sm gap-1.5">
+            <ArrowSquareOut weight="bold" className="w-3.5 h-3.5" />
+            Payment method & invoices
+          </Button>
+        )}
+
+        {isActive && !subscription.cancel_at_period_end && (
+          <Button
+            onClick={handleCancel}
+            variant="secondary"
+            className="text-sm text-neutral-400 hover:text-red-400"
+            disabled={cancelling}
+          >
+            {cancelling ? 'Cancelling...' : 'Cancel subscription'}
+          </Button>
+        )}
+
+        {subscription.cancel_at_period_end && (
+          <Button onClick={handleResume} variant="secondary" className="text-sm text-brand-orange">
+            Resume subscription
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/components/settings/unified/tabs/WorkspaceGeneralTab.tsx b/components/settings/unified/tabs/WorkspaceGeneralTab.tsx
new file mode 100644
index 0000000..531d5da
--- /dev/null
+++ b/components/settings/unified/tabs/WorkspaceGeneralTab.tsx
@@ -0,0 +1,98 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Input, Button, toast } from '@ciphera-net/ui'
+import { Spinner } from '@ciphera-net/ui'
+import { useAuth } from '@/lib/auth/context'
+import { getOrganization, updateOrganization } from '@/lib/api/organization'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
+
+export default function WorkspaceGeneralTab() {
+  const { user } = useAuth()
+  const [name, setName] = useState('')
+  const [slug, setSlug] = useState('')
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    if (!user?.org_id) return
+    setLoading(true)
+    getOrganization(user.org_id)
+      .then(org => {
+        setName(org.name || '')
+        setSlug(org.slug || '')
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false))
+  }, [user?.org_id])
+
+  const handleSave = async () => {
+    if (!user?.org_id) return
+    setSaving(true)
+    try {
+      await updateOrganization(user.org_id, name, slug)
+      toast.success('Workspace updated')
+    } catch (err) {
+      toast.error(getAuthErrorMessage(err as Error) || 'Failed to update workspace')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Spinner className="w-6 h-6 text-neutral-500" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-8">
+      <div className="space-y-4">
+        <div>
+          <h3 className="text-base font-semibold text-white mb-1">General Information</h3>
+          <p className="text-sm text-neutral-400">Basic details about your workspace.</p>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-neutral-300 mb-1.5">Organization Name</label>
+          <Input value={name} onChange={e => setName(e.target.value)} placeholder="Acme Corp" />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-neutral-300 mb-1.5">Organization Slug</label>
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-neutral-500">pulse.ciphera.net/</span>
+            <Input value={slug} onChange={e => setSlug(e.target.value)} placeholder="acme-corp" />
+          </div>
+          <p className="text-xs text-neutral-500 mt-1">Changing the slug will change your organization's URL.</p>
+        </div>
+      </div>
+
+      <div className="flex justify-end">
+        <Button onClick={handleSave} variant="primary" disabled={saving}>
+          {saving ? 'Saving...' : 'Save Changes'}
+        </Button>
+      </div>
+
+      {/* Danger Zone */}
+      <div className="space-y-3 pt-4 border-t border-neutral-800">
+        <h3 className="text-base font-semibold text-red-500">Danger Zone</h3>
+        <div className="flex items-center justify-between rounded-xl border border-red-900/30 bg-red-900/10 p-4">
+          <div>
+            <p className="text-sm font-medium text-white">Delete Organization</p>
+            <p className="text-xs text-neutral-400">Permanently delete this organization and all its data.</p>
+          </div>
+          <Button
+            variant="secondary"
+            className="text-red-400 border-red-900 hover:bg-red-900/20 text-sm"
+            onClick={() => toast.error('Use Organization Settings page for destructive actions')}
+          >
+            Delete
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/lib/unified-settings-context.tsx b/lib/unified-settings-context.tsx
new file mode 100644
index 0000000..5711314
--- /dev/null
+++ b/lib/unified-settings-context.tsx
@@ -0,0 +1,44 @@
+'use client'
+
+import { createContext, useContext, useState, useCallback } from 'react'
+
+type InitialTab = { context?: 'site' | 'workspace' | 'account'; tab?: string } | null
+
+interface UnifiedSettingsContextType {
+  isOpen: boolean
+  openUnifiedSettings: (initialTab?: InitialTab) => void
+  closeUnifiedSettings: () => void
+  initialTab: InitialTab
+}
+
+const UnifiedSettingsContext = createContext<UnifiedSettingsContextType>({
+  isOpen: false,
+  openUnifiedSettings: () => {},
+  closeUnifiedSettings: () => {},
+  initialTab: null,
+})
+
+export function UnifiedSettingsProvider({ children }: { children: React.ReactNode }) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [initialTab, setInitialTab] = useState<InitialTab>(null)
+
+  const openUnifiedSettings = useCallback((init?: InitialTab) => {
+    setInitialTab(init || null)
+    setIsOpen(true)
+  }, [])
+
+  const closeUnifiedSettings = useCallback(() => {
+    setIsOpen(false)
+    setInitialTab(null)
+  }, [])
+
+  return (
+    <UnifiedSettingsContext.Provider value={{ isOpen, openUnifiedSettings, closeUnifiedSettings, initialTab }}>
+      {children}
+    </UnifiedSettingsContext.Provider>
+  )
+}
+
+export function useUnifiedSettings() {
+  return useContext(UnifiedSettingsContext)
+}
-- 
2.49.1


From d050d32d24c9accb33ccffd7b9832d7fe8201f33 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 21:04:31 +0100
Subject: [PATCH 211/428] fix(settings): remove flicker and scrollbar flash on
 context switch

---
 .../settings/unified/UnifiedSettingsModal.tsx      | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index dffc77b..cee3b2c 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -158,7 +158,7 @@ function TabBar({
   onChange: (id: string) => void
 }) {
   return (
-    <div className="flex gap-1 overflow-x-auto scrollbar-hide pb-px">
+    <div className="flex gap-1 overflow-x-auto overflow-y-hidden scrollbar-hide pb-px">
       {tabs.map(tab => (
         <button
           key={tab.id}
@@ -362,15 +362,15 @@ export default function UnifiedSettingsModal() {
                 </div>
               </div>
 
-              {/* Content */}
-              <div className="flex-1 overflow-y-auto">
+              {/* Content — fixed min-height prevents size jumping between contexts */}
+              <div className="flex-1 overflow-y-auto overflow-x-hidden min-h-[400px]">
                 <AnimatePresence mode="wait">
                   <motion.div
                     key={`${context}-${activeTab}`}
-                    initial={{ opacity: 0, x: 8 }}
-                    animate={{ opacity: 1, x: 0 }}
-                    exit={{ opacity: 0, x: -8 }}
-                    transition={{ duration: 0.15 }}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    transition={{ duration: 0.12 }}
                     className="p-6"
                   >
                     <TabContent context={context} activeTab={activeTab} siteId={activeSiteId} />
-- 
2.49.1


From e55a3c4ce4dd9aed3b31389363bf3c6520f90a3d Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 21:09:24 +0100
Subject: [PATCH 212/428] fix(settings): fixed modal height prevents
 bottom-edge twitch on context switch

---
 components/settings/unified/UnifiedSettingsModal.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index cee3b2c..94e77a0 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -332,7 +332,7 @@ export default function UnifiedSettingsModal() {
             className="fixed inset-0 z-[61] flex items-center justify-center p-4 pointer-events-none"
           >
             <div
-              className="pointer-events-auto w-full max-w-3xl max-h-[90vh] bg-neutral-900 border border-neutral-800 rounded-2xl shadow-2xl flex flex-col overflow-hidden"
+              className="pointer-events-auto w-full max-w-3xl h-[85vh] bg-neutral-900 border border-neutral-800 rounded-2xl shadow-2xl flex flex-col overflow-hidden"
               onClick={e => e.stopPropagation()}
             >
               {/* Header */}
@@ -362,8 +362,8 @@ export default function UnifiedSettingsModal() {
                 </div>
               </div>
 
-              {/* Content — fixed min-height prevents size jumping between contexts */}
-              <div className="flex-1 overflow-y-auto overflow-x-hidden min-h-[400px]">
+              {/* Content — parent has fixed h-[85vh] so this fills remaining space without jumping */}
+              <div className="flex-1 overflow-y-auto overflow-x-hidden">
                 <AnimatePresence mode="wait">
                   <motion.div
                     key={`${context}-${activeTab}`}
-- 
2.49.1


From ea2c47b53fde1862bb7669a4f6b3cfa682698bee Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 23 Mar 2026 21:29:49 +0100
Subject: [PATCH 213/428] =?UTF-8?q?feat(settings):=20Phase=202=20=E2=80=94?=
 =?UTF-8?q?=20all=2015=20tabs=20implemented?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Site tabs:
- Visibility (public toggle, share link, password protection)
- Privacy (data collection toggles, geo level, retention info)
- Bot & Spam (filtering toggle, stats cards)
- Reports (scheduled reports + alert channels list with test/pause/delete)
- Integrations (GSC + BunnyCDN connect/disconnect cards)

Workspace tabs:
- Members (member list, invite form with role selector)
- Notifications (dynamic toggles from API categories)
- Audit Log (action log with timestamps)

Account tabs:
- Security (wraps existing ProfileSettings security tab)
- Devices (wraps existing TrustedDevicesCard + SecurityActivityCard)

No more "Coming soon" placeholders. All tabs are functional.
---
 .../settings/unified/UnifiedSettingsModal.tsx |  34 ++--
 .../unified/tabs/AccountDevicesTab.tsx        |  18 ++
 .../unified/tabs/AccountSecurityTab.tsx       |  16 ++
 .../settings/unified/tabs/SiteBotSpamTab.tsx  |  85 ++++++++++
 .../unified/tabs/SiteIntegrationsTab.tsx      | 130 +++++++++++++++
 .../settings/unified/tabs/SitePrivacyTab.tsx  | 111 +++++++++++++
 .../settings/unified/tabs/SiteReportsTab.tsx  | 157 ++++++++++++++++++
 .../unified/tabs/SiteVisibilityTab.tsx        | 131 +++++++++++++++
 .../unified/tabs/WorkspaceAuditTab.tsx        |  80 +++++++++
 .../unified/tabs/WorkspaceMembersTab.tsx      | 150 +++++++++++++++++
 .../tabs/WorkspaceNotificationsTab.tsx        |  68 ++++++++
 11 files changed, 969 insertions(+), 11 deletions(-)
 create mode 100644 components/settings/unified/tabs/AccountDevicesTab.tsx
 create mode 100644 components/settings/unified/tabs/AccountSecurityTab.tsx
 create mode 100644 components/settings/unified/tabs/SiteBotSpamTab.tsx
 create mode 100644 components/settings/unified/tabs/SiteIntegrationsTab.tsx
 create mode 100644 components/settings/unified/tabs/SitePrivacyTab.tsx
 create mode 100644 components/settings/unified/tabs/SiteReportsTab.tsx
 create mode 100644 components/settings/unified/tabs/SiteVisibilityTab.tsx
 create mode 100644 components/settings/unified/tabs/WorkspaceAuditTab.tsx
 create mode 100644 components/settings/unified/tabs/WorkspaceMembersTab.tsx
 create mode 100644 components/settings/unified/tabs/WorkspaceNotificationsTab.tsx

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index 94e77a0..3ced645 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -8,12 +8,24 @@ import { useAuth } from '@/lib/auth/context'
 import { useSite } from '@/lib/swr/dashboard'
 import { listSites, type Site } from '@/lib/api/sites'
 
-// Tab content components
+// Tab content components — Site
 import SiteGeneralTab from './tabs/SiteGeneralTab'
 import SiteGoalsTab from './tabs/SiteGoalsTab'
+import SiteVisibilityTab from './tabs/SiteVisibilityTab'
+import SitePrivacyTab from './tabs/SitePrivacyTab'
+import SiteBotSpamTab from './tabs/SiteBotSpamTab'
+import SiteReportsTab from './tabs/SiteReportsTab'
+import SiteIntegrationsTab from './tabs/SiteIntegrationsTab'
+// Tab content components — Workspace
 import WorkspaceGeneralTab from './tabs/WorkspaceGeneralTab'
 import WorkspaceBillingTab from './tabs/WorkspaceBillingTab'
+import WorkspaceMembersTab from './tabs/WorkspaceMembersTab'
+import WorkspaceNotificationsTab from './tabs/WorkspaceNotificationsTab'
+import WorkspaceAuditTab from './tabs/WorkspaceAuditTab'
+// Tab content components — Account
 import AccountProfileTab from './tabs/AccountProfileTab'
+import AccountSecurityTab from './tabs/AccountSecurityTab'
+import AccountDevicesTab from './tabs/AccountDevicesTab'
 
 // ─── Types ──────────────────────────────────────────────────────
 
@@ -213,11 +225,11 @@ function TabContent({
     switch (activeTab) {
       case 'general': return <SiteGeneralTab siteId={siteId} />
       case 'goals': return <SiteGoalsTab siteId={siteId} />
-      case 'visibility': return <ComingSoon label="Visibility" />
-      case 'privacy': return <ComingSoon label="Data & Privacy" />
-      case 'bot-spam': return <ComingSoon label="Bot & Spam" />
-      case 'reports': return <ComingSoon label="Reports" />
-      case 'integrations': return <ComingSoon label="Integrations" />
+      case 'visibility': return <SiteVisibilityTab siteId={siteId} />
+      case 'privacy': return <SitePrivacyTab siteId={siteId} />
+      case 'bot-spam': return <SiteBotSpamTab siteId={siteId} />
+      case 'reports': return <SiteReportsTab siteId={siteId} />
+      case 'integrations': return <SiteIntegrationsTab siteId={siteId} />
     }
   }
 
@@ -226,9 +238,9 @@ function TabContent({
     switch (activeTab) {
       case 'general': return <WorkspaceGeneralTab />
       case 'billing': return <WorkspaceBillingTab />
-      case 'members': return <ComingSoon label="Members" />
-      case 'notifications': return <ComingSoon label="Notifications" />
-      case 'audit': return <ComingSoon label="Audit Log" />
+      case 'members': return <WorkspaceMembersTab />
+      case 'notifications': return <WorkspaceNotificationsTab />
+      case 'audit': return <WorkspaceAuditTab />
     }
   }
 
@@ -236,8 +248,8 @@ function TabContent({
   if (context === 'account') {
     switch (activeTab) {
       case 'profile': return <AccountProfileTab />
-      case 'security': return <ComingSoon label="Security" />
-      case 'devices': return <ComingSoon label="Devices" />
+      case 'security': return <AccountSecurityTab />
+      case 'devices': return <AccountDevicesTab />
     }
   }
 
diff --git a/components/settings/unified/tabs/AccountDevicesTab.tsx b/components/settings/unified/tabs/AccountDevicesTab.tsx
new file mode 100644
index 0000000..695b8f6
--- /dev/null
+++ b/components/settings/unified/tabs/AccountDevicesTab.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import TrustedDevicesCard from '@/components/settings/TrustedDevicesCard'
+import SecurityActivityCard from '@/components/settings/SecurityActivityCard'
+
+export default function AccountDevicesTab() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-base font-semibold text-white mb-1">Devices & Activity</h3>
+        <p className="text-sm text-neutral-400">Manage trusted devices and review security activity.</p>
+      </div>
+
+      <TrustedDevicesCard />
+      <SecurityActivityCard />
+    </div>
+  )
+}
diff --git a/components/settings/unified/tabs/AccountSecurityTab.tsx b/components/settings/unified/tabs/AccountSecurityTab.tsx
new file mode 100644
index 0000000..c3ef2dd
--- /dev/null
+++ b/components/settings/unified/tabs/AccountSecurityTab.tsx
@@ -0,0 +1,16 @@
+'use client'
+
+import ProfileSettings from '@/components/settings/ProfileSettings'
+
+export default function AccountSecurityTab() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-base font-semibold text-white mb-1">Security</h3>
+        <p className="text-sm text-neutral-400">Manage your password and two-factor authentication.</p>
+      </div>
+
+      <ProfileSettings activeTab="security" borderless />
+    </div>
+  )
+}
diff --git a/components/settings/unified/tabs/SiteBotSpamTab.tsx b/components/settings/unified/tabs/SiteBotSpamTab.tsx
new file mode 100644
index 0000000..98a452d
--- /dev/null
+++ b/components/settings/unified/tabs/SiteBotSpamTab.tsx
@@ -0,0 +1,85 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Button, Toggle, toast, Spinner } from '@ciphera-net/ui'
+import { ShieldCheck } from '@phosphor-icons/react'
+import { useSite, useBotFilterStats } from '@/lib/swr/dashboard'
+import { updateSite } from '@/lib/api/sites'
+
+export default function SiteBotSpamTab({ siteId }: { siteId: string }) {
+  const { data: site, mutate } = useSite(siteId)
+  const { data: botStats } = useBotFilterStats(siteId)
+  const [filterBots, setFilterBots] = useState(false)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    if (site) setFilterBots(site.filter_bots ?? false)
+  }, [site])
+
+  const handleSave = async () => {
+    setSaving(true)
+    try {
+      await updateSite(siteId, { name: site?.name || '', filter_bots: filterBots })
+      await mutate()
+      toast.success('Bot filtering updated')
+    } catch {
+      toast.error('Failed to save')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (!site) return <div className="flex items-center justify-center py-12"><Spinner className="w-6 h-6 text-neutral-500" /></div>
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-base font-semibold text-white mb-1">Bot & Spam Filtering</h3>
+        <p className="text-sm text-neutral-400">Automatically filter bot traffic and referrer spam from your analytics.</p>
+      </div>
+
+      {/* Bot filtering toggle */}
+      <div className="flex items-center justify-between py-3 px-4 rounded-xl bg-neutral-800/30 border border-neutral-800">
+        <div className="flex items-center gap-3">
+          <ShieldCheck weight="bold" className="w-5 h-5 text-brand-orange" />
+          <div>
+            <p className="text-sm font-medium text-white">Enable bot filtering</p>
+            <p className="text-xs text-neutral-400">Filter known bots, crawlers, referrer spam, and suspicious traffic.</p>
+          </div>
+        </div>
+        <Toggle checked={filterBots} onChange={() => setFilterBots(p => !p)} />
+      </div>
+
+      {/* Stats */}
+      {botStats && (
+        <div className="grid grid-cols-3 gap-3">
+          <div className="rounded-xl border border-neutral-800 bg-neutral-800/30 p-4 text-center">
+            <p className="text-2xl font-bold text-white">{botStats.filtered_sessions ?? 0}</p>
+            <p className="text-xs text-neutral-400 mt-1">Sessions filtered</p>
+          </div>
+          <div className="rounded-xl border border-neutral-800 bg-neutral-800/30 p-4 text-center">
+            <p className="text-2xl font-bold text-white">{botStats.filtered_events ?? 0}</p>
+            <p className="text-xs text-neutral-400 mt-1">Events filtered</p>
+          </div>
+          <div className="rounded-xl border border-neutral-800 bg-neutral-800/30 p-4 text-center">
+            <p className="text-2xl font-bold text-white">{botStats.auto_blocked_this_month ?? 0}</p>
+            <p className="text-xs text-neutral-400 mt-1">Auto-blocked this month</p>
+          </div>
+        </div>
+      )}
+
+      <p className="text-sm text-neutral-400">
+        For detailed session review and manual blocking, use the full{' '}
+        <a href={`/sites/${siteId}/settings?tab=bot-spam`} className="text-brand-orange hover:underline">
+          site settings page
+        </a>.
+      </p>
+
+      <div className="flex justify-end pt-2">
+        <Button onClick={handleSave} variant="primary" disabled={saving}>
+          {saving ? 'Saving...' : 'Save Changes'}
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/components/settings/unified/tabs/SiteIntegrationsTab.tsx b/components/settings/unified/tabs/SiteIntegrationsTab.tsx
new file mode 100644
index 0000000..0165464
--- /dev/null
+++ b/components/settings/unified/tabs/SiteIntegrationsTab.tsx
@@ -0,0 +1,130 @@
+'use client'
+
+import { Button, toast, Spinner } from '@ciphera-net/ui'
+import { GoogleLogo, ArrowSquareOut, Plugs, Trash } from '@phosphor-icons/react'
+import { useGSCStatus, useBunnyStatus } from '@/lib/swr/dashboard'
+import { disconnectGSC, getGSCAuthURL } from '@/lib/api/gsc'
+import { disconnectBunny } from '@/lib/api/bunny'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
+
+function IntegrationCard({
+  icon,
+  name,
+  description,
+  connected,
+  detail,
+  onConnect,
+  onDisconnect,
+  connectLabel = 'Connect',
+}: {
+  icon: React.ReactNode
+  name: string
+  description: string
+  connected: boolean
+  detail?: string
+  onConnect: () => void
+  onDisconnect: () => void
+  connectLabel?: string
+}) {
+  return (
+    <div className="flex items-center justify-between py-4 px-4 rounded-xl border border-neutral-800 bg-neutral-800/20">
+      <div className="flex items-center gap-3">
+        <div className="p-2 rounded-lg bg-neutral-800">{icon}</div>
+        <div>
+          <div className="flex items-center gap-2">
+            <p className="text-sm font-medium text-white">{name}</p>
+            {connected && (
+              <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full bg-green-900/30 text-green-400 border border-green-900/50">
+                <span className="w-1.5 h-1.5 rounded-full bg-green-400" />
+                Connected
+              </span>
+            )}
+          </div>
+          <p className="text-xs text-neutral-400">{detail || description}</p>
+        </div>
+      </div>
+      {connected ? (
+        <Button onClick={onDisconnect} variant="secondary" className="text-sm text-red-400 border-red-900/50 hover:bg-red-900/20 gap-1.5">
+          <Trash weight="bold" className="w-3.5 h-3.5" /> Disconnect
+        </Button>
+      ) : (
+        <Button onClick={onConnect} variant="primary" className="text-sm gap-1.5">
+          <Plugs weight="bold" className="w-3.5 h-3.5" /> {connectLabel}
+        </Button>
+      )}
+    </div>
+  )
+}
+
+export default function SiteIntegrationsTab({ siteId }: { siteId: string }) {
+  const { data: gscStatus, mutate: mutateGSC } = useGSCStatus(siteId)
+  const { data: bunnyStatus, mutate: mutateBunny } = useBunnyStatus(siteId)
+
+  const handleConnectGSC = async () => {
+    try {
+      const data = await getGSCAuthURL(siteId)
+      window.open(data.auth_url, '_blank')
+    } catch (err) {
+      toast.error(getAuthErrorMessage(err as Error) || 'Failed to start Google authorization')
+    }
+  }
+
+  const handleDisconnectGSC = async () => {
+    if (!confirm('Disconnect Google Search Console? This will remove all synced data.')) return
+    try {
+      await disconnectGSC(siteId)
+      await mutateGSC()
+      toast.success('Google Search Console disconnected')
+    } catch (err) {
+      toast.error(getAuthErrorMessage(err as Error) || 'Failed to disconnect')
+    }
+  }
+
+  const handleConnectBunny = () => {
+    // Redirect to full settings page for BunnyCDN setup (requires API key input)
+    window.location.href = `/sites/${siteId}/settings?tab=integrations`
+  }
+
+  const handleDisconnectBunny = async () => {
+    if (!confirm('Disconnect BunnyCDN? This will remove all synced CDN data.')) return
+    try {
+      await disconnectBunny(siteId)
+      await mutateBunny()
+      toast.success('BunnyCDN disconnected')
+    } catch (err) {
+      toast.error(getAuthErrorMessage(err as Error) || 'Failed to disconnect')
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-base font-semibold text-white mb-1">Integrations</h3>
+        <p className="text-sm text-neutral-400">Connect third-party services to enrich your analytics.</p>
+      </div>
+
+      <div className="space-y-3">
+        <IntegrationCard
+          icon={<GoogleLogo weight="bold" className="w-5 h-5 text-white" />}
+          name="Google Search Console"
+          description="View search queries, clicks, impressions, and ranking data."
+          connected={gscStatus?.connected ?? false}
+          detail={gscStatus?.connected ? `Connected as ${gscStatus.google_email || 'unknown'}` : undefined}
+          onConnect={handleConnectGSC}
+          onDisconnect={handleDisconnectGSC}
+          connectLabel="Connect with Google"
+        />
+
+        <IntegrationCard
+          icon={<img src="https://ciphera.net/bunny-icon.svg" alt="BunnyCDN" className="w-5 h-5" onError={e => { (e.target as HTMLImageElement).style.display = 'none' }} />}
+          name="BunnyCDN"
+          description="Monitor bandwidth, cache hit rates, and CDN performance."
+          connected={bunnyStatus?.connected ?? false}
+          detail={bunnyStatus?.connected ? `Pull zone: ${bunnyStatus.pull_zone_name || 'connected'}` : undefined}
+          onConnect={handleConnectBunny}
+          onDisconnect={handleDisconnectBunny}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/components/settings/unified/tabs/SitePrivacyTab.tsx b/components/settings/unified/tabs/SitePrivacyTab.tsx
new file mode 100644
index 0000000..1f1e2b2
--- /dev/null
+++ b/components/settings/unified/tabs/SitePrivacyTab.tsx
@@ -0,0 +1,111 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Button, Select, Toggle, toast, Spinner } from '@ciphera-net/ui'
+import { useSite } from '@/lib/swr/dashboard'
+import { updateSite } from '@/lib/api/sites'
+
+const GEO_OPTIONS = [
+  { value: 'full', label: 'Full (country, region, city)' },
+  { value: 'country', label: 'Country only' },
+  { value: 'none', label: 'Disabled' },
+]
+
+export default function SitePrivacyTab({ siteId }: { siteId: string }) {
+  const { data: site, mutate } = useSite(siteId)
+  const [collectPagePaths, setCollectPagePaths] = useState(true)
+  const [collectReferrers, setCollectReferrers] = useState(true)
+  const [collectDeviceInfo, setCollectDeviceInfo] = useState(true)
+  const [collectScreenRes, setCollectScreenRes] = useState(true)
+  const [collectGeoData, setCollectGeoData] = useState('full')
+  const [hideUnknownLocations, setHideUnknownLocations] = useState(false)
+  const [dataRetention, setDataRetention] = useState(6)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    if (site) {
+      setCollectPagePaths(site.collect_page_paths ?? true)
+      setCollectReferrers(site.collect_referrers ?? true)
+      setCollectDeviceInfo(site.collect_device_info ?? true)
+      setCollectScreenRes(site.collect_screen_resolution ?? true)
+      setCollectGeoData(site.collect_geo_data ?? 'full')
+      setHideUnknownLocations(site.hide_unknown_locations ?? false)
+      setDataRetention(site.data_retention_months ?? 6)
+    }
+  }, [site])
+
+  const handleSave = async () => {
+    setSaving(true)
+    try {
+      await updateSite(siteId, {
+        name: site?.name || '',
+        collect_page_paths: collectPagePaths,
+        collect_referrers: collectReferrers,
+        collect_device_info: collectDeviceInfo,
+        collect_screen_resolution: collectScreenRes,
+        collect_geo_data: collectGeoData as 'full' | 'country' | 'none',
+        hide_unknown_locations: hideUnknownLocations,
+      })
+      await mutate()
+      toast.success('Privacy settings updated')
+    } catch {
+      toast.error('Failed to save')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (!site) return <div className="flex items-center justify-center py-12"><Spinner className="w-6 h-6 text-neutral-500" /></div>
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-base font-semibold text-white mb-1">Data & Privacy</h3>
+        <p className="text-sm text-neutral-400">Control what data is collected from your visitors.</p>
+      </div>
+
+      <div className="space-y-1">
+        {[
+          { label: 'Page paths', desc: 'Track which pages visitors view.', checked: collectPagePaths, onChange: setCollectPagePaths },
+          { label: 'Referrers', desc: 'Track where visitors come from.', checked: collectReferrers, onChange: setCollectReferrers },
+          { label: 'Device info', desc: 'Track browser, OS, and device type.', checked: collectDeviceInfo, onChange: setCollectDeviceInfo },
+          { label: 'Screen resolution', desc: 'Track visitor screen dimensions.', checked: collectScreenRes, onChange: setCollectScreenRes },
+          { label: 'Hide unknown locations', desc: 'Exclude "Unknown" from location stats.', checked: hideUnknownLocations, onChange: setHideUnknownLocations },
+        ].map(item => (
+          <div key={item.label} className="flex items-center justify-between py-3 px-4 rounded-xl hover:bg-neutral-800/20 transition-colors">
+            <div>
+              <p className="text-sm font-medium text-white">{item.label}</p>
+              <p className="text-xs text-neutral-400">{item.desc}</p>
+            </div>
+            <Toggle checked={item.checked} onChange={() => item.onChange((p: boolean) => !p)} />
+          </div>
+        ))}
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-neutral-300 mb-1.5">Geographic data</label>
+        <Select
+          value={collectGeoData}
+          onChange={setCollectGeoData}
+          variant="input"
+          options={GEO_OPTIONS}
+        />
+        <p className="text-xs text-neutral-500 mt-1">Controls location granularity. "Disabled" collects no geographic data at all.</p>
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-neutral-300 mb-1.5">Data retention</label>
+        <p className="text-sm text-neutral-400">
+          Currently retaining data for <span className="font-medium text-white">{dataRetention} months</span>.
+          Manage retention in the full <a href={`/sites/${siteId}/settings`} className="text-brand-orange hover:underline">site settings</a>.
+        </p>
+      </div>
+
+      <div className="flex justify-end pt-2">
+        <Button onClick={handleSave} variant="primary" disabled={saving}>
+          {saving ? 'Saving...' : 'Save Changes'}
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/components/settings/unified/tabs/SiteReportsTab.tsx b/components/settings/unified/tabs/SiteReportsTab.tsx
new file mode 100644
index 0000000..d8852eb
--- /dev/null
+++ b/components/settings/unified/tabs/SiteReportsTab.tsx
@@ -0,0 +1,157 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, toast, Spinner } from '@ciphera-net/ui'
+import { Plus, Pencil, Trash, EnvelopeSimple, WebhooksLogo, PaperPlaneTilt } from '@phosphor-icons/react'
+import { useReportSchedules, useAlertSchedules } from '@/lib/swr/dashboard'
+import { deleteReportSchedule, testReportSchedule, updateReportSchedule, type ReportSchedule } from '@/lib/api/report-schedules'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
+
+function ChannelIcon({ channel }: { channel: string }) {
+  switch (channel) {
+    case 'email': return <EnvelopeSimple weight="bold" className="w-4 h-4" />
+    case 'webhook': return <WebhooksLogo weight="bold" className="w-4 h-4" />
+    default: return <PaperPlaneTilt weight="bold" className="w-4 h-4" />
+  }
+}
+
+function ScheduleRow({ schedule, siteId, onMutate }: { schedule: ReportSchedule; siteId: string; onMutate: () => void }) {
+  const [testing, setTesting] = useState(false)
+
+  const handleTest = async () => {
+    setTesting(true)
+    try {
+      await testReportSchedule(siteId, schedule.id)
+      toast.success('Test report sent')
+    } catch (err) {
+      toast.error(getAuthErrorMessage(err as Error) || 'Failed to send test')
+    } finally {
+      setTesting(false)
+    }
+  }
+
+  const handleToggle = async () => {
+    try {
+      await updateReportSchedule(siteId, schedule.id, {
+        channel: schedule.channel,
+        channel_config: schedule.channel_config,
+        frequency: schedule.frequency,
+        report_type: schedule.report_type,
+        enabled: !schedule.enabled,
+        send_hour: schedule.send_hour,
+        send_day: schedule.send_day ?? undefined,
+        timezone: schedule.timezone,
+        purpose: schedule.purpose,
+      })
+      toast.success(schedule.enabled ? 'Report paused' : 'Report enabled')
+      onMutate()
+    } catch (err) {
+      toast.error(getAuthErrorMessage(err as Error) || 'Failed to update')
+    }
+  }
+
+  const handleDelete = async () => {
+    try {
+      await deleteReportSchedule(siteId, schedule.id)
+      toast.success('Report deleted')
+      onMutate()
+    } catch (err) {
+      toast.error(getAuthErrorMessage(err as Error) || 'Failed to delete')
+    }
+  }
+
+  return (
+    <div className="flex items-center justify-between px-4 py-3 rounded-xl hover:bg-neutral-800/40 transition-colors group">
+      <div className="flex items-center gap-3">
+        <div className={`p-1.5 rounded-lg ${schedule.enabled ? 'bg-brand-orange/10 text-brand-orange' : 'bg-neutral-800 text-neutral-500'}`}>
+          <ChannelIcon channel={schedule.channel} />
+        </div>
+        <div>
+          <p className="text-sm font-medium text-white">
+            {schedule.channel === 'email' && 'recipients' in schedule.channel_config
+              ? (schedule.channel_config as { recipients: string[] }).recipients?.[0]
+              : schedule.channel}
+            {!schedule.enabled && <span className="ml-2 text-xs text-neutral-500">(paused)</span>}
+          </p>
+          <p className="text-xs text-neutral-500">
+            {schedule.frequency} · {schedule.report_type} report
+          </p>
+        </div>
+      </div>
+      <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+        <button onClick={handleTest} disabled={testing} className="p-1.5 rounded-lg text-neutral-500 hover:text-white hover:bg-neutral-800 transition-colors">
+          <PaperPlaneTilt weight="bold" className="w-3.5 h-3.5" />
+        </button>
+        <button onClick={handleToggle} className="p-1.5 rounded-lg text-neutral-500 hover:text-white hover:bg-neutral-800 transition-colors">
+          {schedule.enabled ? 'Pause' : 'Enable'}
+        </button>
+        <button onClick={handleDelete} className="p-1.5 rounded-lg text-neutral-500 hover:text-red-400 hover:bg-red-900/20 transition-colors">
+          <Trash weight="bold" className="w-3.5 h-3.5" />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default function SiteReportsTab({ siteId }: { siteId: string }) {
+  const { data: reports = [], isLoading: reportsLoading, mutate: mutateReports } = useReportSchedules(siteId)
+  const { data: alerts = [], isLoading: alertsLoading, mutate: mutateAlerts } = useAlertSchedules(siteId)
+
+  const loading = reportsLoading || alertsLoading
+
+  if (loading) return <div className="flex items-center justify-center py-12"><Spinner className="w-6 h-6 text-neutral-500" /></div>
+
+  return (
+    <div className="space-y-8">
+      {/* Scheduled Reports */}
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <div>
+            <h3 className="text-base font-semibold text-white mb-1">Scheduled Reports</h3>
+            <p className="text-sm text-neutral-400">Automated analytics summaries via email or webhook.</p>
+          </div>
+          <a href={`/sites/${siteId}/settings?tab=notifications`}>
+            <Button variant="primary" className="text-sm gap-1.5">
+              <Plus weight="bold" className="w-3.5 h-3.5" /> Add Report
+            </Button>
+          </a>
+        </div>
+
+        {reports.length === 0 ? (
+          <p className="text-sm text-neutral-500 text-center py-6">No scheduled reports yet.</p>
+        ) : (
+          <div className="space-y-1">
+            {reports.map(r => (
+              <ScheduleRow key={r.id} schedule={r} siteId={siteId} onMutate={() => mutateReports()} />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Alert Channels */}
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <div>
+            <h3 className="text-base font-semibold text-white mb-1">Alert Channels</h3>
+            <p className="text-sm text-neutral-400">Get notified when uptime monitors go down.</p>
+          </div>
+          <a href={`/sites/${siteId}/settings?tab=notifications`}>
+            <Button variant="secondary" className="text-sm gap-1.5">
+              <Plus weight="bold" className="w-3.5 h-3.5" /> Add Channel
+            </Button>
+          </a>
+        </div>
+
+        {alerts.length === 0 ? (
+          <p className="text-sm text-neutral-500 text-center py-6">No alert channels configured.</p>
+        ) : (
+          <div className="space-y-1">
+            {alerts.map(a => (
+              <ScheduleRow key={a.id} schedule={a} siteId={siteId} onMutate={() => mutateAlerts()} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/components/settings/unified/tabs/SiteVisibilityTab.tsx b/components/settings/unified/tabs/SiteVisibilityTab.tsx
new file mode 100644
index 0000000..f6f3bd1
--- /dev/null
+++ b/components/settings/unified/tabs/SiteVisibilityTab.tsx
@@ -0,0 +1,131 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Button, Input, Toggle, toast, Spinner } from '@ciphera-net/ui'
+import { Copy, CheckCircle, Lock } from '@phosphor-icons/react'
+import { AnimatePresence, motion } from 'framer-motion'
+import { useSite } from '@/lib/swr/dashboard'
+import { updateSite } from '@/lib/api/sites'
+
+const APP_URL = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3003'
+
+export default function SiteVisibilityTab({ siteId }: { siteId: string }) {
+  const { data: site, mutate } = useSite(siteId)
+  const [isPublic, setIsPublic] = useState(false)
+  const [password, setPassword] = useState('')
+  const [passwordEnabled, setPasswordEnabled] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [linkCopied, setLinkCopied] = useState(false)
+
+  useEffect(() => {
+    if (site) {
+      setIsPublic(site.is_public ?? false)
+      setPasswordEnabled(site.has_password ?? false)
+    }
+  }, [site])
+
+  const handleSave = async () => {
+    setSaving(true)
+    try {
+      await updateSite(siteId, {
+        name: site?.name || '',
+        is_public: isPublic,
+        password: passwordEnabled ? password : undefined,
+        clear_password: !passwordEnabled,
+      })
+      setPassword('')
+      await mutate()
+      toast.success('Visibility updated')
+    } catch {
+      toast.error('Failed to save')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const copyLink = () => {
+    navigator.clipboard.writeText(`${APP_URL}/share/${siteId}`)
+    setLinkCopied(true)
+    toast.success('Link copied')
+    setTimeout(() => setLinkCopied(false), 2000)
+  }
+
+  if (!site) return <div className="flex items-center justify-center py-12"><Spinner className="w-6 h-6 text-neutral-500" /></div>
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-base font-semibold text-white mb-1">Visibility</h3>
+        <p className="text-sm text-neutral-400">Control who can see your analytics dashboard.</p>
+      </div>
+
+      {/* Public toggle */}
+      <div className="flex items-center justify-between py-3 px-4 rounded-xl bg-neutral-800/30 border border-neutral-800">
+        <div>
+          <p className="text-sm font-medium text-white">Public Dashboard</p>
+          <p className="text-xs text-neutral-400">Allow anyone with the link to view this dashboard.</p>
+        </div>
+        <Toggle checked={isPublic} onChange={() => setIsPublic(p => !p)} />
+      </div>
+
+      <AnimatePresence>
+        {isPublic && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: 'auto' }}
+            exit={{ opacity: 0, height: 0 }}
+            className="space-y-4 overflow-hidden"
+          >
+            {/* Share link */}
+            <div>
+              <label className="block text-sm font-medium text-neutral-300 mb-1.5">Public Link</label>
+              <div className="flex gap-2">
+                <Input value={`${APP_URL}/share/${siteId}`} readOnly className="font-mono text-xs" />
+                <Button onClick={copyLink} variant="secondary" className="shrink-0 text-sm gap-1.5">
+                  {linkCopied ? <CheckCircle weight="bold" className="w-3.5 h-3.5" /> : <Copy weight="bold" className="w-3.5 h-3.5" />}
+                  {linkCopied ? 'Copied' : 'Copy'}
+                </Button>
+              </div>
+            </div>
+
+            {/* Password protection */}
+            <div className="flex items-center justify-between py-3 px-4 rounded-xl bg-neutral-800/30 border border-neutral-800">
+              <div className="flex items-center gap-2">
+                <Lock weight="bold" className="w-4 h-4 text-neutral-500" />
+                <div>
+                  <p className="text-sm font-medium text-white">Password Protection</p>
+                  <p className="text-xs text-neutral-400">Require a password to view the public dashboard.</p>
+                </div>
+              </div>
+              <Toggle checked={passwordEnabled} onChange={() => setPasswordEnabled(p => !p)} />
+            </div>
+
+            <AnimatePresence>
+              {passwordEnabled && (
+                <motion.div
+                  initial={{ opacity: 0, height: 0 }}
+                  animate={{ opacity: 1, height: 'auto' }}
+                  exit={{ opacity: 0, height: 0 }}
+                  className="overflow-hidden"
+                >
+                  <Input
+                    type="password"
+                    value={password}
+                    onChange={e => setPassword(e.target.value)}
+                    placeholder={site.has_password ? 'Leave empty to keep current password' : 'Set a password'}
+                  />
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <div className="flex justify-end pt-2">
+        <Button onClick={handleSave} variant="primary" disabled={saving}>
+          {saving ? 'Saving...' : 'Save Changes'}
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/components/settings/unified/tabs/WorkspaceAuditTab.tsx b/components/settings/unified/tabs/WorkspaceAuditTab.tsx
new file mode 100644
index 0000000..6f29469
--- /dev/null
+++ b/components/settings/unified/tabs/WorkspaceAuditTab.tsx
@@ -0,0 +1,80 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Spinner } from '@ciphera-net/ui'
+import { useAuth } from '@/lib/auth/context'
+import { getAuditLog, type AuditLogEntry } from '@/lib/api/audit'
+import { formatDateTimeShort } from '@/lib/utils/formatDate'
+
+const ACTION_LABELS: Record<string, string> = {
+  site_created: 'Created site',
+  site_updated: 'Updated site',
+  site_deleted: 'Deleted site',
+  site_restored: 'Restored site',
+  goal_created: 'Created goal',
+  goal_updated: 'Updated goal',
+  goal_deleted: 'Deleted goal',
+  funnel_created: 'Created funnel',
+  funnel_updated: 'Updated funnel',
+  funnel_deleted: 'Deleted funnel',
+  gsc_connected: 'Connected Google Search Console',
+  gsc_disconnected: 'Disconnected Google Search Console',
+  bunny_connected: 'Connected BunnyCDN',
+  bunny_disconnected: 'Disconnected BunnyCDN',
+  member_invited: 'Invited member',
+  member_removed: 'Removed member',
+  member_role_changed: 'Changed member role',
+  org_updated: 'Updated organization',
+  plan_changed: 'Changed plan',
+  subscription_cancelled: 'Cancelled subscription',
+  subscription_resumed: 'Resumed subscription',
+}
+
+export default function WorkspaceAuditTab() {
+  const { user } = useAuth()
+  const [entries, setEntries] = useState<AuditLogEntry[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    if (!user?.org_id) return
+    getAuditLog({ limit: 50 })
+      .then(data => setEntries(data.entries))
+      .catch(() => {})
+      .finally(() => setLoading(false))
+  }, [user?.org_id])
+
+  if (loading) return <div className="flex items-center justify-center py-12"><Spinner className="w-6 h-6 text-neutral-500" /></div>
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-base font-semibold text-white mb-1">Audit Log</h3>
+        <p className="text-sm text-neutral-400">Track who made changes and when.</p>
+      </div>
+
+      {entries.length === 0 ? (
+        <p className="text-sm text-neutral-500 text-center py-8">No activity recorded yet.</p>
+      ) : (
+        <div className="space-y-0.5">
+          {entries.map(entry => (
+            <div key={entry.id} className="flex items-center justify-between px-4 py-3 rounded-xl hover:bg-neutral-800/20 transition-colors">
+              <div>
+                <p className="text-sm text-white">
+                  <span className="font-medium">{entry.actor_email || 'System'}</span>
+                  {' '}
+                  <span className="text-neutral-400">{ACTION_LABELS[entry.action] || entry.action}</span>
+                </p>
+                {entry.payload && Object.keys(entry.payload).length > 0 && (
+                  <p className="text-xs text-neutral-500 mt-0.5">{JSON.stringify(entry.payload)}</p>
+                )}
+              </div>
+              <p className="text-xs text-neutral-500 shrink-0 ml-4">
+                {formatDateTimeShort(new Date(entry.occurred_at))}
+              </p>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/components/settings/unified/tabs/WorkspaceMembersTab.tsx b/components/settings/unified/tabs/WorkspaceMembersTab.tsx
new file mode 100644
index 0000000..24e7729
--- /dev/null
+++ b/components/settings/unified/tabs/WorkspaceMembersTab.tsx
@@ -0,0 +1,150 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Button, Input, Select, toast, Spinner } from '@ciphera-net/ui'
+import { Plus, Trash, EnvelopeSimple, Crown, UserCircle } from '@phosphor-icons/react'
+import { useAuth } from '@/lib/auth/context'
+import { getOrganizationMembers, sendInvitation, type OrganizationMember } from '@/lib/api/organization'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
+
+const ROLE_OPTIONS = [
+  { value: 'admin', label: 'Admin' },
+  { value: 'member', label: 'Member' },
+]
+
+function RoleBadge({ role }: { role: string }) {
+  if (role === 'owner') return (
+    <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full bg-brand-orange/10 text-brand-orange">
+      <Crown weight="bold" className="w-3 h-3" /> Owner
+    </span>
+  )
+  if (role === 'admin') return (
+    <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full bg-blue-900/30 text-blue-400">
+      Admin
+    </span>
+  )
+  return (
+    <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full bg-neutral-800 text-neutral-400">
+      Member
+    </span>
+  )
+}
+
+export default function WorkspaceMembersTab() {
+  const { user } = useAuth()
+  const [members, setMembers] = useState<OrganizationMember[]>([])
+  const [loading, setLoading] = useState(true)
+  const [inviteEmail, setInviteEmail] = useState('')
+  const [inviteRole, setInviteRole] = useState('member')
+  const [inviting, setInviting] = useState(false)
+  const [showInvite, setShowInvite] = useState(false)
+
+  const canManage = user?.role === 'owner' || user?.role === 'admin'
+
+  const loadMembers = async () => {
+    if (!user?.org_id) return
+    try {
+      const data = await getOrganizationMembers(user.org_id)
+      setMembers(data)
+    } catch { }
+    finally { setLoading(false) }
+  }
+
+  useEffect(() => { loadMembers() }, [user?.org_id])
+
+  const handleInvite = async () => {
+    if (!user?.org_id || !inviteEmail.trim()) return
+    setInviting(true)
+    try {
+      await sendInvitation(user.org_id, inviteEmail.trim(), inviteRole)
+      toast.success(`Invitation sent to ${inviteEmail}`)
+      setInviteEmail('')
+      setShowInvite(false)
+      loadMembers()
+    } catch (err) {
+      toast.error(getAuthErrorMessage(err as Error) || 'Failed to invite member')
+    } finally {
+      setInviting(false)
+    }
+  }
+
+  const handleRemove = async (_memberId: string, email: string) => {
+    // Member removal requires the full org settings page (auth API endpoint)
+    toast.message(`To remove ${email}, use Organization Settings → Members.`, {
+      action: { label: 'Open', onClick: () => { window.location.href = '/org-settings?tab=members' } },
+    })
+  }
+
+  if (loading) return <div className="flex items-center justify-center py-12"><Spinner className="w-6 h-6 text-neutral-500" /></div>
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-base font-semibold text-white mb-1">Members</h3>
+          <p className="text-sm text-neutral-400">{members.length} member{members.length !== 1 ? 's' : ''} in your workspace.</p>
+        </div>
+        {canManage && !showInvite && (
+          <Button onClick={() => setShowInvite(true)} variant="primary" className="text-sm gap-1.5">
+            <Plus weight="bold" className="w-3.5 h-3.5" /> Invite
+          </Button>
+        )}
+      </div>
+
+      {/* Invite form */}
+      {showInvite && (
+        <div className="rounded-xl border border-neutral-800 bg-neutral-800/30 p-4 space-y-3">
+          <div className="flex gap-3">
+            <div className="flex-1">
+              <Input
+                value={inviteEmail}
+                onChange={e => setInviteEmail(e.target.value)}
+                placeholder="email@example.com"
+                type="email"
+              />
+            </div>
+            <Select
+              value={inviteRole}
+              onChange={setInviteRole}
+              variant="input"
+              className="w-32"
+              options={ROLE_OPTIONS}
+            />
+          </div>
+          <div className="flex gap-2 justify-end">
+            <Button onClick={() => setShowInvite(false)} variant="secondary" className="text-sm">Cancel</Button>
+            <Button onClick={handleInvite} variant="primary" className="text-sm gap-1.5" disabled={inviting}>
+              <EnvelopeSimple weight="bold" className="w-3.5 h-3.5" />
+              {inviting ? 'Sending...' : 'Send Invite'}
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* Members list */}
+      <div className="space-y-1">
+        {members.map(member => (
+          <div key={member.user_id} className="flex items-center justify-between px-4 py-3 rounded-xl hover:bg-neutral-800/40 transition-colors group">
+            <div className="flex items-center gap-3">
+              <UserCircle weight="fill" className="w-8 h-8 text-neutral-600" />
+              <div>
+                <p className="text-sm font-medium text-white">{member.user_email || member.user_id}</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <RoleBadge role={member.role} />
+              {canManage && member.role !== 'owner' && member.user_id !== user?.id && (
+                <button
+                  onClick={() => handleRemove(member.user_id, member.user_email || member.user_id)}
+                  className="p-1.5 rounded-lg text-neutral-500 hover:text-red-400 hover:bg-red-900/20 transition-colors opacity-0 group-hover:opacity-100"
+                >
+                  <Trash weight="bold" className="w-3.5 h-3.5" />
+                </button>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/components/settings/unified/tabs/WorkspaceNotificationsTab.tsx b/components/settings/unified/tabs/WorkspaceNotificationsTab.tsx
new file mode 100644
index 0000000..154820e
--- /dev/null
+++ b/components/settings/unified/tabs/WorkspaceNotificationsTab.tsx
@@ -0,0 +1,68 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { toast, Spinner } from '@ciphera-net/ui'
+import { useAuth } from '@/lib/auth/context'
+import { getNotificationSettings, updateNotificationSettings, type NotificationSettingsResponse } from '@/lib/api/notification-settings'
+
+export default function WorkspaceNotificationsTab() {
+  const { user } = useAuth()
+  const [data, setData] = useState<NotificationSettingsResponse | null>(null)
+  const [settings, setSettings] = useState<Record<string, boolean>>({})
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    if (!user?.org_id) return
+    getNotificationSettings()
+      .then(resp => {
+        setData(resp)
+        setSettings(resp.settings || {})
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false))
+  }, [user?.org_id])
+
+  const handleToggle = async (key: string) => {
+    const prev = { ...settings }
+    const updated = { ...settings, [key]: !settings[key] }
+    setSettings(updated)
+    try {
+      await updateNotificationSettings(updated)
+    } catch {
+      setSettings(prev)
+      toast.error('Failed to update notification preference')
+    }
+  }
+
+  if (loading) return <div className="flex items-center justify-center py-12"><Spinner className="w-6 h-6 text-neutral-500" /></div>
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-base font-semibold text-white mb-1">Notifications</h3>
+        <p className="text-sm text-neutral-400">Choose what notifications you receive.</p>
+      </div>
+
+      <div className="space-y-1">
+        {(data?.categories || []).map(cat => (
+          <div key={cat.id} className="flex items-center justify-between py-3 px-4 rounded-xl hover:bg-neutral-800/20 transition-colors">
+            <div>
+              <p className="text-sm font-medium text-white">{cat.label}</p>
+              <p className="text-xs text-neutral-400">{cat.description}</p>
+            </div>
+            <button
+              onClick={() => handleToggle(cat.id)}
+              className={`relative w-10 h-6 rounded-full transition-colors duration-200 ${settings[cat.id] ? 'bg-brand-orange' : 'bg-neutral-700'}`}
+            >
+              <span className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform duration-200 ${settings[cat.id] ? 'translate-x-4' : ''}`} />
+            </button>
+          </div>
+        ))}
+
+        {(!data?.categories || data.categories.length === 0) && (
+          <p className="text-sm text-neutral-500 text-center py-6">No notification preferences available.</p>
+        )}
+      </div>
+    </div>
+  )
+}
-- 
2.49.1


From e12a3661fafb13fe09266027dc1101a0f372866c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 16:52:59 +0100
Subject: [PATCH 214/428] fix(settings): lock site context to current URL,
 rename Workspace to Organization
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Site context is locked to the site from the current URL — no dropdown
  switcher. If not on a site page, defaults to Organization context.
- Renamed "Workspace" to "Organization" in all user-facing text.
- Removed unused CaretDown import and dropdown state.
---
 .../settings/unified/UnifiedSettingsModal.tsx | 103 +++++-------------
 .../unified/tabs/WorkspaceGeneralTab.tsx      |   6 +-
 .../unified/tabs/WorkspaceMembersTab.tsx      |   2 +-
 3 files changed, 34 insertions(+), 77 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index 3ced645..ccb7662 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useCallback, useEffect } from 'react'
 import { AnimatePresence, motion } from 'framer-motion'
-import { X, GearSix, Buildings, User, CaretDown } from '@phosphor-icons/react'
+import { X, GearSix, Buildings, User } from '@phosphor-icons/react'
 import { useUnifiedSettings } from '@/lib/unified-settings-context'
 import { useAuth } from '@/lib/auth/context'
 import { useSite } from '@/lib/swr/dashboard'
@@ -65,28 +65,18 @@ const ACCOUNT_TABS: TabDef[] = [
 function ContextSwitcher({
   active,
   onChange,
-  sites,
-  activeSiteId,
-  onSiteChange,
+  activeSiteDomain,
 }: {
   active: SettingsContext
   onChange: (ctx: SettingsContext) => void
-  sites: Site[]
-  activeSiteId: string | null
-  onSiteChange: (id: string) => void
+  activeSiteDomain: string | null
 }) {
-  const [siteDropdownOpen, setSiteDropdownOpen] = useState(false)
-  const activeSite = sites.find(s => s.id === activeSiteId)
-
   return (
     <div className="flex items-center gap-1 p-1 bg-neutral-800/50 rounded-xl">
-      {/* Site button with dropdown */}
-      <div className="relative">
+      {/* Site button — locked to current site, no dropdown */}
+      {activeSiteDomain && (
         <button
-          onClick={() => {
-            onChange('site')
-            if (active === 'site') setSiteDropdownOpen(!siteDropdownOpen)
-          }}
+          onClick={() => onChange('site')}
           className={`flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
             active === 'site'
               ? 'bg-neutral-700 text-white shadow-sm'
@@ -94,45 +84,12 @@ function ContextSwitcher({
           }`}
         >
           <GearSix weight="bold" className="w-4 h-4" />
-          <span className="hidden sm:inline">
-            {activeSite ? activeSite.domain : 'Site'}
-          </span>
-          <CaretDown weight="bold" className="w-3 h-3" />
+          <span className="hidden sm:inline">{activeSiteDomain}</span>
         </button>
-
-        <AnimatePresence>
-          {siteDropdownOpen && active === 'site' && sites.length > 1 && (
-            <motion.div
-              initial={{ opacity: 0, y: -4 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -4 }}
-              transition={{ duration: 0.15 }}
-              className="absolute top-full left-0 mt-1 w-56 rounded-xl bg-neutral-800 border border-neutral-700 shadow-xl z-50 py-1 overflow-hidden"
-            >
-              {sites.map(site => (
-                <button
-                  key={site.id}
-                  onClick={() => {
-                    onSiteChange(site.id)
-                    setSiteDropdownOpen(false)
-                  }}
-                  className={`w-full text-left px-3 py-2 text-sm transition-colors ${
-                    site.id === activeSiteId
-                      ? 'bg-brand-orange/10 text-brand-orange'
-                      : 'text-neutral-300 hover:bg-neutral-700/50'
-                  }`}
-                >
-                  <span className="font-medium">{site.name}</span>
-                  <span className="ml-2 text-neutral-500 text-xs">{site.domain}</span>
-                </button>
-              ))}
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </div>
+      )}
 
       <button
-        onClick={() => { onChange('workspace'); setSiteDropdownOpen(false) }}
+        onClick={() => onChange('workspace')}
         className={`flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
           active === 'workspace'
             ? 'bg-neutral-700 text-white shadow-sm'
@@ -140,11 +97,11 @@ function ContextSwitcher({
         }`}
       >
         <Buildings weight="bold" className="w-4 h-4" />
-        <span className="hidden sm:inline">Workspace</span>
+        <span className="hidden sm:inline">Organization</span>
       </button>
 
       <button
-        onClick={() => { onChange('account'); setSiteDropdownOpen(false) }}
+        onClick={() => onChange('account')}
         className={`flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
           active === 'account'
             ? 'bg-neutral-700 text-white shadow-sm'
@@ -282,26 +239,28 @@ export default function UnifiedSettingsModal() {
     }
   }, [isOpen, initTab])
 
-  // Load sites when modal opens
+  // Detect site from URL and load sites list when modal opens
   useEffect(() => {
-    if (isOpen && user?.org_id) {
-      listSites().then(data => {
-        const list = Array.isArray(data) ? data : []
-        setSites(list)
-        if (!activeSiteId && list.length > 0) {
-          setActiveSiteId(list[0].id)
-        }
-      }).catch(() => {})
-    }
-  }, [isOpen, user?.org_id])
+    if (!isOpen || !user?.org_id) return
 
-  // Try to pick up site from URL
-  useEffect(() => {
-    if (isOpen && typeof window !== 'undefined') {
+    // Pick up site ID from URL — this is the only site the user can configure
+    if (typeof window !== 'undefined') {
       const match = window.location.pathname.match(/\/sites\/([a-f0-9-]+)/)
-      if (match) setActiveSiteId(match[1])
+      if (match) {
+        setActiveSiteId(match[1])
+        setContext('site')
+      } else {
+        // Not on a site page — default to organization context
+        setActiveSiteId(null)
+        if (!initTab?.context) setContext('workspace')
+      }
     }
-  }, [isOpen])
+
+    // Load sites for domain display
+    listSites().then(data => {
+      setSites(Array.isArray(data) ? data : [])
+    }).catch(() => {})
+  }, [isOpen, user?.org_id])
 
   // Escape key closes
   useEffect(() => {
@@ -363,9 +322,7 @@ export default function UnifiedSettingsModal() {
                 <ContextSwitcher
                   active={context}
                   onChange={handleContextChange}
-                  sites={sites}
-                  activeSiteId={activeSiteId}
-                  onSiteChange={setActiveSiteId}
+                  activeSiteDomain={sites.find(s => s.id === activeSiteId)?.domain ?? null}
                 />
 
                 {/* Tabs */}
diff --git a/components/settings/unified/tabs/WorkspaceGeneralTab.tsx b/components/settings/unified/tabs/WorkspaceGeneralTab.tsx
index 531d5da..3d89ef1 100644
--- a/components/settings/unified/tabs/WorkspaceGeneralTab.tsx
+++ b/components/settings/unified/tabs/WorkspaceGeneralTab.tsx
@@ -31,9 +31,9 @@ export default function WorkspaceGeneralTab() {
     setSaving(true)
     try {
       await updateOrganization(user.org_id, name, slug)
-      toast.success('Workspace updated')
+      toast.success('Organization updated')
     } catch (err) {
-      toast.error(getAuthErrorMessage(err as Error) || 'Failed to update workspace')
+      toast.error(getAuthErrorMessage(err as Error) || 'Failed to update organization')
     } finally {
       setSaving(false)
     }
@@ -52,7 +52,7 @@ export default function WorkspaceGeneralTab() {
       <div className="space-y-4">
         <div>
           <h3 className="text-base font-semibold text-white mb-1">General Information</h3>
-          <p className="text-sm text-neutral-400">Basic details about your workspace.</p>
+          <p className="text-sm text-neutral-400">Basic details about your organization.</p>
         </div>
 
         <div>
diff --git a/components/settings/unified/tabs/WorkspaceMembersTab.tsx b/components/settings/unified/tabs/WorkspaceMembersTab.tsx
index 24e7729..d23a6ee 100644
--- a/components/settings/unified/tabs/WorkspaceMembersTab.tsx
+++ b/components/settings/unified/tabs/WorkspaceMembersTab.tsx
@@ -82,7 +82,7 @@ export default function WorkspaceMembersTab() {
       <div className="flex items-center justify-between">
         <div>
           <h3 className="text-base font-semibold text-white mb-1">Members</h3>
-          <p className="text-sm text-neutral-400">{members.length} member{members.length !== 1 ? 's' : ''} in your workspace.</p>
+          <p className="text-sm text-neutral-400">{members.length} member{members.length !== 1 ? 's' : ''} in your organization.</p>
         </div>
         {canManage && !showInvite && (
           <Button onClick={() => setShowInvite(true)} variant="primary" className="text-sm gap-1.5">
-- 
2.49.1


From c48023be9f64fc06242994c811c53c90edd8b48e Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 17:05:21 +0100
Subject: [PATCH 215/428] fix(settings): global comma shortcut works on all
 authenticated pages

---
 .../settings/unified/UnifiedSettingsModal.tsx | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index ccb7662..3df756d 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -216,7 +216,7 @@ function TabContent({
 // ─── Main Modal ─────────────────────────────────────────────────
 
 export default function UnifiedSettingsModal() {
-  const { isOpen, closeUnifiedSettings: closeSettings, initialTab: initTab } = useUnifiedSettings()
+  const { isOpen, openUnifiedSettings, closeUnifiedSettings: closeSettings, initialTab: initTab } = useUnifiedSettings()
   const { user } = useAuth()
 
   const [context, setContext] = useState<SettingsContext>('site')
@@ -262,15 +262,24 @@ export default function UnifiedSettingsModal() {
     }).catch(() => {})
   }, [isOpen, user?.org_id])
 
-  // Escape key closes
+  // Global keyboard shortcuts: `,` toggles settings, Escape closes
   useEffect(() => {
-    if (!isOpen) return
-    const handleEsc = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') closeSettings()
+    const handler = (e: KeyboardEvent) => {
+      const tag = (e.target as HTMLElement)?.tagName
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return
+
+      if (e.key === ',' && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        e.preventDefault()
+        if (isOpen) closeSettings()
+        else openUnifiedSettings()
+      }
+      if (e.key === 'Escape' && isOpen) {
+        closeSettings()
+      }
     }
-    window.addEventListener('keydown', handleEsc)
-    return () => window.removeEventListener('keydown', handleEsc)
-  }, [isOpen, closeSettings])
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [isOpen, openUnifiedSettings, closeSettings])
 
   const tabs = context === 'site' ? SITE_TABS : context === 'workspace' ? WORKSPACE_TABS : ACCOUNT_TABS
   const activeTab = context === 'site' ? siteTabs : context === 'workspace' ? workspaceTabs : accountTabs
-- 
2.49.1


From bb4861dbdcc0b6ff5f2c1505767ee73aba1d44b5 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 17:24:45 +0100
Subject: [PATCH 216/428] =?UTF-8?q?fix(settings):=20remove=20duplicate=20c?=
 =?UTF-8?q?omma=20listener=20from=20Sidebar=20=E2=80=94=20modal=20handles?=
 =?UTF-8?q?=20it=20globally?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/dashboard/Sidebar.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 4362005..1f9c111 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -6,7 +6,7 @@ import { usePathname, useRouter } from 'next/navigation'
 import { listSites, type Site } from '@/lib/api/sites'
 import { useAuth } from '@/lib/auth/context'
 import { useSettingsModal } from '@/lib/settings-modal-context'
-import { useUnifiedSettings } from '@/lib/unified-settings-context'
+// `,` shortcut handled globally by UnifiedSettingsModal
 import { getUserOrganizations, switchContext, type OrganizationMember } from '@/lib/api/organization'
 import { setSessionAction } from '@/app/actions/auth'
 import { logger } from '@/lib/utils/logger'
@@ -444,7 +444,6 @@ export default function Sidebar({
   const pathname = usePathname()
   const router = useRouter()
   const { openSettings } = useSettingsModal()
-  const { openUnifiedSettings } = useUnifiedSettings()
   const [sites, setSites] = useState<Site[]>([])
   const [orgs, setOrgs] = useState<OrganizationMember[]>([])
   const [pendingHref, setPendingHref] = useState<string | null>(null)
@@ -485,14 +484,11 @@ export default function Sidebar({
       if (e.key === '[' && !e.metaKey && !e.ctrlKey && !e.altKey) {
         e.preventDefault(); toggle()
       }
-      // `,` opens unified settings (same as GitHub/Linear)
-      if (e.key === ',' && !e.metaKey && !e.ctrlKey && !e.altKey) {
-        e.preventDefault(); openUnifiedSettings()
-      }
+      // `,` shortcut is handled globally by UnifiedSettingsModal — not here
     }
     document.addEventListener('keydown', handler)
     return () => document.removeEventListener('keydown', handler)
-  }, [collapsed, openUnifiedSettings])
+  }, [collapsed])
 
   const toggle = useCallback(() => {
     setCollapsed((prev) => { const next = !prev; localStorage.setItem(SIDEBAR_KEY, String(next)); return next })
-- 
2.49.1


From 5dfc3a5636de8336dacfe6ce8cc67e7a46c92968 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 19:58:57 +0100
Subject: [PATCH 217/428] ci: use self-hosted runner, add filter/date/client
 tests

---
 .github/workflows/test.yml             |   7 +-
 lib/__tests__/filters.test.ts          | 128 +++++++++++++++++++++
 lib/api/__tests__/client.test.ts       |  60 ++++++++++
 lib/utils/__tests__/formatDate.test.ts | 149 +++++++++++++++++++++++++
 4 files changed, 343 insertions(+), 1 deletion(-)
 create mode 100644 lib/__tests__/filters.test.ts
 create mode 100644 lib/api/__tests__/client.test.ts
 create mode 100644 lib/utils/__tests__/formatDate.test.ts

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index ab3c44a..9eeebb7 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -1,4 +1,5 @@
 # * Runs unit tests on push/PR to main and staging.
+# * Uses self-hosted runner for push events, GitHub-hosted for PRs (public repo security).
 name: Test
 
 on:
@@ -7,6 +8,10 @@ on:
   pull_request:
     branches: [main, staging]
 
+concurrency:
+  group: test-${{ github.ref }}
+  cancel-in-progress: true
+
 permissions:
   contents: read
   packages: read
@@ -14,7 +19,7 @@ permissions:
 jobs:
   test:
     name: unit-tests
-    runs-on: ubuntu-latest
+    runs-on: ${{ github.event_name == 'pull_request' && 'ubuntu-latest' || 'self-hosted' }}
     steps:
       - uses: actions/checkout@v4
 
diff --git a/lib/__tests__/filters.test.ts b/lib/__tests__/filters.test.ts
new file mode 100644
index 0000000..214ea6f
--- /dev/null
+++ b/lib/__tests__/filters.test.ts
@@ -0,0 +1,128 @@
+import { describe, it, expect } from 'vitest'
+import {
+  serializeFilters,
+  parseFiltersFromURL,
+  filterLabel,
+  DIMENSIONS,
+  OPERATORS,
+  type DimensionFilter,
+} from '../filters'
+
+describe('serializeFilters', () => {
+  it('returns empty string for empty array', () => {
+    expect(serializeFilters([])).toBe('')
+  })
+
+  it('serializes a single filter', () => {
+    const filters: DimensionFilter[] = [
+      { dimension: 'browser', operator: 'is', values: ['Chrome'] },
+    ]
+    expect(serializeFilters(filters)).toBe('browser|is|Chrome')
+  })
+
+  it('serializes multiple values with semicolons', () => {
+    const filters: DimensionFilter[] = [
+      { dimension: 'country', operator: 'is', values: ['US', 'GB', 'DE'] },
+    ]
+    expect(serializeFilters(filters)).toBe('country|is|US;GB;DE')
+  })
+
+  it('serializes multiple filters with commas', () => {
+    const filters: DimensionFilter[] = [
+      { dimension: 'browser', operator: 'is', values: ['Chrome'] },
+      { dimension: 'country', operator: 'is_not', values: ['CN'] },
+    ]
+    expect(serializeFilters(filters)).toBe('browser|is|Chrome,country|is_not|CN')
+  })
+})
+
+describe('parseFiltersFromURL', () => {
+  it('returns empty array for empty string', () => {
+    expect(parseFiltersFromURL('')).toEqual([])
+  })
+
+  it('parses a single filter', () => {
+    const result = parseFiltersFromURL('browser|is|Chrome')
+    expect(result).toEqual([
+      { dimension: 'browser', operator: 'is', values: ['Chrome'] },
+    ])
+  })
+
+  it('parses multiple values', () => {
+    const result = parseFiltersFromURL('country|is|US;GB;DE')
+    expect(result).toEqual([
+      { dimension: 'country', operator: 'is', values: ['US', 'GB', 'DE'] },
+    ])
+  })
+
+  it('parses multiple filters', () => {
+    const result = parseFiltersFromURL('browser|is|Chrome,country|is_not|CN')
+    expect(result).toHaveLength(2)
+    expect(result[0].dimension).toBe('browser')
+    expect(result[1].dimension).toBe('country')
+  })
+
+  it('drops filters with missing values', () => {
+    const result = parseFiltersFromURL('browser|is')
+    expect(result).toEqual([])
+  })
+
+  it('handles completely invalid input', () => {
+    const result = parseFiltersFromURL('|||')
+    expect(result).toEqual([])
+  })
+
+  it('drops malformed entries but keeps valid ones', () => {
+    const result = parseFiltersFromURL('browser|is|Chrome,bad|input,country|is|US')
+    expect(result).toHaveLength(2)
+    expect(result[0].dimension).toBe('browser')
+    expect(result[1].dimension).toBe('country')
+  })
+})
+
+describe('serialize/parse roundtrip', () => {
+  it('roundtrips a complex filter set', () => {
+    const filters: DimensionFilter[] = [
+      { dimension: 'page', operator: 'contains', values: ['/blog'] },
+      { dimension: 'country', operator: 'is', values: ['US', 'GB'] },
+      { dimension: 'browser', operator: 'is_not', values: ['IE'] },
+    ]
+    const serialized = serializeFilters(filters)
+    const parsed = parseFiltersFromURL(serialized)
+    expect(parsed).toEqual(filters)
+  })
+})
+
+describe('filterLabel', () => {
+  it('returns human-readable label for known dimension', () => {
+    const f: DimensionFilter = { dimension: 'browser', operator: 'is', values: ['Chrome'] }
+    expect(filterLabel(f)).toBe('Browser is Chrome')
+  })
+
+  it('shows count for multiple values', () => {
+    const f: DimensionFilter = { dimension: 'country', operator: 'is', values: ['US', 'GB', 'DE'] }
+    expect(filterLabel(f)).toBe('Country is US +2')
+  })
+
+  it('falls back to raw dimension name if unknown', () => {
+    const f: DimensionFilter = { dimension: 'custom_dim', operator: 'contains', values: ['foo'] }
+    expect(filterLabel(f)).toBe('custom_dim contains foo')
+  })
+
+  it('uses readable operator labels', () => {
+    const f: DimensionFilter = { dimension: 'page', operator: 'not_contains', values: ['/admin'] }
+    expect(filterLabel(f)).toBe('Page does not contain /admin')
+  })
+})
+
+describe('constants', () => {
+  it('DIMENSIONS includes expected entries', () => {
+    expect(DIMENSIONS).toContain('page')
+    expect(DIMENSIONS).toContain('browser')
+    expect(DIMENSIONS).toContain('utm_source')
+  })
+
+  it('OPERATORS includes all four types', () => {
+    expect(OPERATORS).toEqual(['is', 'is_not', 'contains', 'not_contains'])
+  })
+})
diff --git a/lib/api/__tests__/client.test.ts b/lib/api/__tests__/client.test.ts
new file mode 100644
index 0000000..de4a2f1
--- /dev/null
+++ b/lib/api/__tests__/client.test.ts
@@ -0,0 +1,60 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+vi.mock('@ciphera-net/ui', () => ({
+  authMessageFromStatus: (status: number) => `Error ${status}`,
+  AUTH_ERROR_MESSAGES: { NETWORK: 'Network error, please try again.' },
+}))
+
+const { getLoginUrl, getSignupUrl, ApiError } = await import('../client')
+
+describe('getLoginUrl', () => {
+  it('builds login URL with default redirect', () => {
+    const url = getLoginUrl()
+    expect(url).toContain('/login')
+    expect(url).toContain('client_id=pulse-app')
+    expect(url).toContain('response_type=code')
+    expect(url).toContain(encodeURIComponent('/auth/callback'))
+  })
+
+  it('builds login URL with custom redirect', () => {
+    const url = getLoginUrl('/custom/path')
+    expect(url).toContain(encodeURIComponent('/custom/path'))
+  })
+})
+
+describe('getSignupUrl', () => {
+  it('builds signup URL with default redirect', () => {
+    const url = getSignupUrl()
+    expect(url).toContain('/signup')
+    expect(url).toContain('client_id=pulse-app')
+    expect(url).toContain('response_type=code')
+  })
+
+  it('builds signup URL with custom redirect', () => {
+    const url = getSignupUrl('/onboarding')
+    expect(url).toContain(encodeURIComponent('/onboarding'))
+  })
+})
+
+describe('ApiError', () => {
+  it('creates error with message and status', () => {
+    const err = new ApiError('Not found', 404)
+    expect(err.message).toBe('Not found')
+    expect(err.status).toBe(404)
+    expect(err.data).toBeUndefined()
+    expect(err).toBeInstanceOf(Error)
+  })
+
+  it('creates error with data payload', () => {
+    const data = { retryAfter: 30 }
+    const err = new ApiError('Rate limited', 429, data)
+    expect(err.status).toBe(429)
+    expect(err.data).toEqual({ retryAfter: 30 })
+  })
+
+  it('is catchable as a standard Error', () => {
+    const fn = () => { throw new ApiError('fail', 500) }
+    expect(fn).toThrow(Error)
+    expect(fn).toThrow('fail')
+  })
+})
diff --git a/lib/utils/__tests__/formatDate.test.ts b/lib/utils/__tests__/formatDate.test.ts
new file mode 100644
index 0000000..392edaa
--- /dev/null
+++ b/lib/utils/__tests__/formatDate.test.ts
@@ -0,0 +1,149 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import {
+  formatDate,
+  formatDateShort,
+  formatDateTime,
+  formatTime,
+  formatMonth,
+  formatDateISO,
+  formatDateFull,
+  formatDateTimeFull,
+  formatDateLong,
+  formatRelativeTime,
+  formatDateTimeShort,
+} from '../formatDate'
+
+// Fixed date: Friday 14 March 2025, 14:30:00 UTC
+const date = new Date('2025-03-14T14:30:00Z')
+
+describe('formatDate', () => {
+  it('returns day-first format with short month', () => {
+    const result = formatDate(date)
+    expect(result).toContain('14')
+    expect(result).toContain('Mar')
+    expect(result).toContain('2025')
+  })
+})
+
+describe('formatDateShort', () => {
+  it('omits year when same as current year', () => {
+    const now = new Date()
+    const sameYear = new Date(`${now.getFullYear()}-06-15T10:00:00Z`)
+    const result = formatDateShort(sameYear)
+    expect(result).toContain('15')
+    expect(result).toContain('Jun')
+    expect(result).not.toContain(String(now.getFullYear()))
+  })
+
+  it('includes year when different from current year', () => {
+    const oldDate = new Date('2020-06-15T10:00:00Z')
+    const result = formatDateShort(oldDate)
+    expect(result).toContain('2020')
+  })
+})
+
+describe('formatDateTime', () => {
+  it('includes date and 24-hour time', () => {
+    const result = formatDateTime(date)
+    expect(result).toContain('14')
+    expect(result).toContain('Mar')
+    expect(result).toContain('2025')
+    // 24-hour format check: should contain 14:30 (UTC) or local equivalent
+    expect(result).toMatch(/\d{2}:\d{2}/)
+  })
+})
+
+describe('formatTime', () => {
+  it('returns HH:MM in 24-hour format', () => {
+    const result = formatTime(date)
+    expect(result).toMatch(/^\d{2}:\d{2}$/)
+  })
+})
+
+describe('formatMonth', () => {
+  it('returns full month name and year', () => {
+    const result = formatMonth(date)
+    expect(result).toContain('March')
+    expect(result).toContain('2025')
+  })
+})
+
+describe('formatDateISO', () => {
+  it('returns YYYY-MM-DD format', () => {
+    expect(formatDateISO(date)).toBe('2025-03-14')
+  })
+})
+
+describe('formatDateFull', () => {
+  it('includes weekday', () => {
+    const result = formatDateFull(date)
+    expect(result).toContain('Fri')
+    expect(result).toContain('14')
+    expect(result).toContain('Mar')
+    expect(result).toContain('2025')
+  })
+})
+
+describe('formatDateTimeFull', () => {
+  it('includes weekday and time', () => {
+    const result = formatDateTimeFull(date)
+    expect(result).toContain('Fri')
+    expect(result).toMatch(/\d{2}:\d{2}/)
+  })
+})
+
+describe('formatDateLong', () => {
+  it('uses full month name', () => {
+    const result = formatDateLong(date)
+    expect(result).toContain('March')
+    expect(result).toContain('2025')
+    expect(result).toContain('14')
+  })
+})
+
+describe('formatRelativeTime', () => {
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('returns "Just now" for times less than a minute ago', () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2025-03-14T14:30:30Z'))
+    expect(formatRelativeTime('2025-03-14T14:30:00Z')).toBe('Just now')
+  })
+
+  it('returns minutes ago', () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2025-03-14T14:35:00Z'))
+    expect(formatRelativeTime('2025-03-14T14:30:00Z')).toBe('5m ago')
+  })
+
+  it('returns hours ago', () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2025-03-14T16:30:00Z'))
+    expect(formatRelativeTime('2025-03-14T14:30:00Z')).toBe('2h ago')
+  })
+
+  it('returns days ago', () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2025-03-17T14:30:00Z'))
+    expect(formatRelativeTime('2025-03-14T14:30:00Z')).toBe('3d ago')
+  })
+
+  it('falls back to short date after 7 days', () => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2025-03-25T14:30:00Z'))
+    const result = formatRelativeTime('2025-03-14T14:30:00Z')
+    expect(result).toContain('14')
+    expect(result).toContain('Mar')
+  })
+})
+
+describe('formatDateTimeShort', () => {
+  it('includes date and time', () => {
+    const result = formatDateTimeShort(date)
+    expect(result).toContain('14')
+    expect(result).toContain('Mar')
+    expect(result).toMatch(/\d{2}:\d{2}/)
+  })
+})
-- 
2.49.1


From 5a03e1f9a5361b98b5ad16c65889e367d6a5322c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 21:17:21 +0100
Subject: [PATCH 218/428] fix: skeleton loading states match actual page
 layouts

- PageSpeed: show 4 gauge rings, screenshot, legend, metrics grid, trend chart
- Uptime: match real layout with status card, 90-day bar, 4-col detail grid
- Remove duplicate local skeletons in behavior components, use shared library
- Strip light-mode classes from dark-only app
---
 app/sites/[id]/pagespeed/page.tsx             | 74 +++++++++++-----
 .../behavior/FrustrationByPageTable.tsx       | 21 +----
 .../behavior/FrustrationSummaryCards.tsx      | 19 +----
 components/behavior/FrustrationTrend.tsx      | 17 +---
 components/skeletons.tsx                      | 85 ++++++++++++-------
 5 files changed, 114 insertions(+), 102 deletions(-)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index 4eb5f27..8e5de27 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -868,35 +868,67 @@ function AuditItem({ item }: { item: Record<string, any> }) {
 // * Skeleton loading state
 function PageSpeedSkeleton() {
   return (
-    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 space-y-6">
-      <div className="animate-pulse space-y-2 mb-8">
-        <div className="h-8 w-48 bg-neutral-200 dark:bg-neutral-700 rounded" />
-        <div className="h-4 w-72 bg-neutral-200 dark:bg-neutral-700 rounded" />
-      </div>
-      {/* Hero skeleton */}
-      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8 animate-pulse">
-        <div className="flex items-center gap-8">
-          <div className="w-40 h-40 rounded-full bg-neutral-200 dark:bg-neutral-700 flex-shrink-0" />
-          <div className="flex-1 space-y-3">
-            <div className="h-5 w-32 bg-neutral-200 dark:bg-neutral-700 rounded" />
-            <div className="h-5 w-36 bg-neutral-200 dark:bg-neutral-700 rounded" />
-            <div className="h-5 w-24 bg-neutral-200 dark:bg-neutral-700 rounded" />
+    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 space-y-6 animate-pulse">
+      {/* Header — title + subtitle + toggle buttons */}
+      <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div className="space-y-2">
+          <div className="h-8 w-36 bg-neutral-700 rounded" />
+          <div className="h-4 w-72 bg-neutral-700 rounded" />
+        </div>
+        <div className="flex items-center gap-3">
+          <div className="flex gap-1">
+            <div className="h-8 w-16 bg-neutral-700 rounded" />
+            <div className="h-8 w-20 bg-neutral-700 rounded" />
           </div>
-          <div className="w-48 h-36 bg-neutral-200 dark:bg-neutral-700 rounded-lg flex-shrink-0 hidden md:block" />
+          <div className="h-9 w-24 bg-neutral-700 rounded-lg" />
         </div>
       </div>
-      {/* Metrics skeleton */}
-      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 sm:p-8 animate-pulse">
-        <div className="h-3 w-16 bg-neutral-200 dark:bg-neutral-700 rounded mb-5" />
-        <div className="grid grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-6">
+
+      {/* Score overview — 4 gauge circles + screenshot */}
+      <div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-6 sm:p-8">
+        <div className="flex flex-col lg:flex-row items-center gap-8">
+          <div className="flex-1 flex items-center justify-center gap-6 sm:gap-8 flex-wrap">
+            {[...Array(4)].map((_, i) => (
+              <div key={i} className="flex flex-col items-center gap-2">
+                <div className="w-[90px] h-[90px] rounded-full border-[6px] border-neutral-700 bg-transparent" />
+                <div className="h-3 w-16 bg-neutral-700 rounded" />
+              </div>
+            ))}
+          </div>
+          <div className="w-48 h-44 bg-neutral-700 rounded-lg flex-shrink-0 hidden md:block" />
+        </div>
+        {/* Legend bar */}
+        <div className="flex items-center gap-4 mt-6 pt-4 border-t border-neutral-800">
+          <div className="h-3 w-32 bg-neutral-700 rounded" />
+          <div className="ml-auto flex items-center gap-3">
+            <div className="h-2 w-10 bg-neutral-700 rounded" />
+            <div className="h-2 w-10 bg-neutral-700 rounded" />
+            <div className="h-2 w-10 bg-neutral-700 rounded" />
+          </div>
+        </div>
+      </div>
+
+      {/* Metrics card — 6 metrics in 3-col grid */}
+      <div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-6 sm:p-8">
+        <div className="h-3 w-16 bg-neutral-700 rounded mb-5" />
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-6">
           {[...Array(6)].map((_, i) => (
-            <div key={i} className="space-y-2">
-              <div className="h-3 w-32 bg-neutral-200 dark:bg-neutral-700 rounded" />
-              <div className="h-7 w-20 bg-neutral-200 dark:bg-neutral-700 rounded" />
+            <div key={i} className="flex items-start gap-3">
+              <div className="mt-1.5 w-2.5 h-2.5 rounded-full bg-neutral-700 flex-shrink-0" />
+              <div className="space-y-2">
+                <div className="h-3 w-32 bg-neutral-700 rounded" />
+                <div className="h-7 w-20 bg-neutral-700 rounded" />
+              </div>
             </div>
           ))}
         </div>
       </div>
+
+      {/* Score trend chart placeholder */}
+      <div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-6 sm:p-8">
+        <div className="h-3 w-40 bg-neutral-700 rounded mb-5" />
+        <div className="h-48 w-full bg-neutral-800 rounded-lg" />
+      </div>
     </div>
   )
 }
diff --git a/components/behavior/FrustrationByPageTable.tsx b/components/behavior/FrustrationByPageTable.tsx
index 2331228..d419a2a 100644
--- a/components/behavior/FrustrationByPageTable.tsx
+++ b/components/behavior/FrustrationByPageTable.tsx
@@ -3,30 +3,13 @@
 import { formatNumber } from '@ciphera-net/ui'
 import { Files } from '@phosphor-icons/react'
 import type { FrustrationByPage } from '@/lib/api/stats'
+import { TableSkeleton } from '@/components/skeletons'
 
 interface FrustrationByPageTableProps {
   pages: FrustrationByPage[]
   loading: boolean
 }
 
-function SkeletonRows() {
-  return (
-    <div className="space-y-2">
-      {Array.from({ length: 5 }).map((_, i) => (
-        <div key={i} className="animate-pulse flex items-center justify-between h-9 px-2">
-          <div className="h-4 w-40 bg-neutral-200 dark:bg-neutral-700 rounded" />
-          <div className="flex gap-6">
-            <div className="h-4 w-10 bg-neutral-200 dark:bg-neutral-700 rounded" />
-            <div className="h-4 w-10 bg-neutral-200 dark:bg-neutral-700 rounded" />
-            <div className="h-4 w-10 bg-neutral-200 dark:bg-neutral-700 rounded" />
-            <div className="h-4 w-10 bg-neutral-200 dark:bg-neutral-700 rounded" />
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-}
-
 export default function FrustrationByPageTable({ pages, loading }: FrustrationByPageTableProps) {
   const hasData = pages.length > 0
   const maxTotal = Math.max(...pages.map(p => p.total), 1)
@@ -43,7 +26,7 @@ export default function FrustrationByPageTable({ pages, loading }: FrustrationBy
       </p>
 
       {loading ? (
-        <SkeletonRows />
+        <TableSkeleton rows={5} cols={5} />
       ) : hasData ? (
         <div className="overflow-x-auto -mx-6 px-6">
           {/* Header */}
diff --git a/components/behavior/FrustrationSummaryCards.tsx b/components/behavior/FrustrationSummaryCards.tsx
index 6f7cf48..185be21 100644
--- a/components/behavior/FrustrationSummaryCards.tsx
+++ b/components/behavior/FrustrationSummaryCards.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import type { FrustrationSummary } from '@/lib/api/stats'
+import { StatCardSkeleton } from '@/components/skeletons'
 
 interface FrustrationSummaryCardsProps {
   data: FrustrationSummary | null
@@ -39,25 +40,13 @@ function ChangeIndicator({ change }: { change: ReturnType<typeof pctChange> }) {
   )
 }
 
-function SkeletonCard() {
-  return (
-    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
-      <div className="animate-pulse space-y-3">
-        <div className="h-4 w-24 bg-neutral-200 dark:bg-neutral-700 rounded" />
-        <div className="h-8 w-16 bg-neutral-200 dark:bg-neutral-700 rounded" />
-        <div className="h-3 w-32 bg-neutral-200 dark:bg-neutral-700 rounded" />
-      </div>
-    </div>
-  )
-}
-
 export default function FrustrationSummaryCards({ data, loading }: FrustrationSummaryCardsProps) {
   if (loading || !data) {
     return (
       <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
-        <SkeletonCard />
-        <SkeletonCard />
-        <SkeletonCard />
+        <StatCardSkeleton />
+        <StatCardSkeleton />
+        <StatCardSkeleton />
       </div>
     )
   }
diff --git a/components/behavior/FrustrationTrend.tsx b/components/behavior/FrustrationTrend.tsx
index 18fb8f6..e364f15 100644
--- a/components/behavior/FrustrationTrend.tsx
+++ b/components/behavior/FrustrationTrend.tsx
@@ -8,26 +8,13 @@ import {
   type ChartConfig,
 } from '@/components/charts'
 import type { FrustrationSummary } from '@/lib/api/stats'
+import { WidgetSkeleton } from '@/components/skeletons'
 
 interface FrustrationTrendProps {
   summary: FrustrationSummary | null
   loading: boolean
 }
 
-function SkeletonCard() {
-  return (
-    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
-      <div className="animate-pulse space-y-3 mb-4">
-        <div className="h-5 w-36 bg-neutral-200 dark:bg-neutral-700 rounded" />
-        <div className="h-4 w-48 bg-neutral-200 dark:bg-neutral-700 rounded" />
-      </div>
-      <div className="flex-1 min-h-[270px] animate-pulse flex items-center justify-center">
-        <div className="w-[200px] h-[200px] rounded-full bg-neutral-200 dark:bg-neutral-700" />
-      </div>
-    </div>
-  )
-}
-
 const LABELS: Record<string, string> = {
   rage_clicks: 'Rage Clicks',
   dead_clicks: 'Dead Clicks',
@@ -70,7 +57,7 @@ function CustomTooltip({ active, payload }: { active?: boolean; payload?: Array<
 }
 
 export default function FrustrationTrend({ summary, loading }: FrustrationTrendProps) {
-  if (loading || !summary) return <SkeletonCard />
+  if (loading || !summary) return <WidgetSkeleton />
 
   const hasData = summary.rage_clicks > 0 || summary.dead_clicks > 0 ||
     summary.prev_rage_clicks > 0 || summary.prev_dead_clicks > 0
diff --git a/components/skeletons.tsx b/components/skeletons.tsx
index 52d6e92..76e740e 100644
--- a/components/skeletons.tsx
+++ b/components/skeletons.tsx
@@ -1,10 +1,10 @@
 /**
  * Reusable skeleton loading primitives and composites for Pulse.
  * All skeletons follow the design-system pattern:
- *   animate-pulse + bg-neutral-100 dark:bg-neutral-800 + rounded
+ *   animate-pulse + bg-neutral-800 + rounded
  */
 
-const SK = 'animate-pulse bg-neutral-100 dark:bg-neutral-800'
+const SK = 'animate-pulse bg-neutral-800'
 
 export { useMinimumLoading, useSkeletonFade } from './useMinimumLoading'
 
@@ -71,7 +71,7 @@ export function TableSkeleton({ rows = 7, cols = 5 }: { rows?: number; cols?: nu
 
 export function WidgetSkeleton() {
   return (
-    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
+    <div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
       <div className="flex items-center justify-between mb-4">
         <SkeletonLine className="h-6 w-32" />
         <div className="flex gap-1">
@@ -90,7 +90,7 @@ export function WidgetSkeleton() {
 
 export function StatCardSkeleton() {
   return (
-    <div className="p-4 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
+    <div className="p-4 rounded-xl border border-neutral-800 bg-white dark:bg-neutral-900">
       <SkeletonLine className="h-4 w-20 mb-2" />
       <SkeletonLine className="h-8 w-28" />
     </div>
@@ -101,7 +101,7 @@ export function StatCardSkeleton() {
 
 export function ChartSkeleton() {
   return (
-    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
+    <div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-6">
       <div className="flex items-center justify-between mb-6">
         <div className="flex gap-4">
           {Array.from({ length: 4 }).map((_, i) => (
@@ -157,7 +157,7 @@ export function DashboardSkeleton() {
 
       {/* Campaigns table */}
       <div className="mb-8">
-        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
+        <div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-6">
           <SkeletonLine className="h-6 w-32 mb-4" />
           <TableSkeleton rows={7} cols={5} />
         </div>
@@ -187,7 +187,7 @@ export function JourneysSkeleton() {
       {/* Sankey area */}
       <SkeletonCard className="h-[400px] mb-6" />
       {/* Top paths table */}
-      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
+      <div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-6">
         <SkeletonLine className="h-6 w-24 mb-4" />
         <TableSkeleton rows={5} cols={4} />
       </div>
@@ -200,28 +200,49 @@ export function JourneysSkeleton() {
 export function UptimeSkeleton() {
   return (
     <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
-      <div className="mb-8">
-        <SkeletonLine className="h-4 w-32 mb-2" />
-        <SkeletonLine className="h-8 w-24 mb-1" />
-        <SkeletonLine className="h-4 w-64" />
+      {/* Header */}
+      <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <SkeletonLine className="h-8 w-24 mb-2" />
+          <SkeletonLine className="h-4 w-64" />
+        </div>
+        <SkeletonLine className="h-9 w-36 rounded-lg" />
       </div>
-      {/* Overall status */}
-      <SkeletonCard className="h-20 mb-6" />
-      {/* Monitor cards */}
-      <div className="space-y-4">
-        {Array.from({ length: 3 }).map((_, i) => (
-          <div key={i} className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-5 space-y-4">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-3">
-                <SkeletonCircle className="w-3 h-3" />
-                <SkeletonLine className="h-5 w-32" />
-                <SkeletonLine className="h-4 w-48 hidden sm:block" />
-              </div>
-              <SkeletonLine className="h-4 w-28" />
-            </div>
-            <SkeletonLine className="h-8 w-full rounded-sm" />
+      {/* Overall status card */}
+      <div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-5 mb-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <SkeletonCircle className="w-3.5 h-3.5" />
+            <SkeletonLine className="h-5 w-32" />
+            <SkeletonLine className="h-4 w-20" />
           </div>
-        ))}
+          <div className="space-y-1 text-right">
+            <SkeletonLine className="h-4 w-24 ml-auto" />
+            <SkeletonLine className="h-3 w-32 ml-auto" />
+          </div>
+        </div>
+      </div>
+      {/* 90-day uptime bar */}
+      <div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-5 mb-6">
+        <SkeletonLine className="h-3 w-28 mb-3" />
+        <SkeletonLine className="h-6 w-full rounded-sm" />
+        <div className="flex justify-between mt-1.5">
+          <SkeletonLine className="h-3 w-16" />
+          <SkeletonLine className="h-3 w-10" />
+        </div>
+      </div>
+      {/* Monitor details + chart + checks */}
+      <div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-5">
+        {/* 4-col detail grid */}
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-5">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <div key={i} className="space-y-1">
+              <SkeletonLine className="h-3 w-20" />
+              <SkeletonLine className="h-4 w-16" />
+            </div>
+          ))}
+        </div>
+        <ChecksSkeleton />
       </div>
     </div>
   )
@@ -263,7 +284,7 @@ export function FunnelsListSkeleton() {
         </div>
         <div className="grid gap-4">
           {Array.from({ length: 3 }).map((_, i) => (
-            <div key={i} className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
+            <div key={i} className="bg-neutral-900 border border-neutral-800 rounded-2xl p-6">
               <SkeletonLine className="h-6 w-40 mb-2" />
               <SkeletonLine className="h-4 w-64 mb-4" />
               <div className="flex items-center gap-2">
@@ -308,7 +329,7 @@ export function NotificationsListSkeleton() {
   return (
     <div className="space-y-3">
       {Array.from({ length: 6 }).map((_, i) => (
-        <div key={i} className="flex items-start gap-3 p-4 rounded-xl border border-neutral-200 dark:border-neutral-800">
+        <div key={i} className="flex items-start gap-3 p-4 rounded-xl border border-neutral-800">
           <SkeletonCircle className="h-10 w-10 shrink-0" />
           <div className="flex-1 space-y-2">
             <SkeletonLine className="h-4 w-3/4" />
@@ -343,7 +364,7 @@ export function GoalsListSkeleton() {
   return (
     <div className="space-y-2">
       {Array.from({ length: 3 }).map((_, i) => (
-        <div key={i} className="flex items-center justify-between py-3 px-4 rounded-2xl border border-neutral-200 dark:border-neutral-800">
+        <div key={i} className="flex items-center justify-between py-3 px-4 rounded-2xl border border-neutral-800">
           <div className="flex items-center gap-2">
             <SkeletonLine className="h-4 w-24" />
             <SkeletonLine className="h-3 w-20" />
@@ -387,7 +408,7 @@ export function BehaviorSkeleton() {
       {/* Summary cards (3 cols) */}
       <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
         {Array.from({ length: 3 }).map((_, i) => (
-          <div key={i} className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 space-y-3">
+          <div key={i} className="bg-neutral-900 border border-neutral-800 rounded-2xl p-6 space-y-3">
             <SkeletonLine className="h-4 w-24" />
             <SkeletonLine className="h-8 w-16" />
             <SkeletonLine className="h-3 w-32" />
@@ -403,7 +424,7 @@ export function BehaviorSkeleton() {
 
       {/* By-page table */}
       <div className="mb-8">
-        <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
+        <div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-6">
           <SkeletonLine className="h-6 w-40 mb-2" />
           <SkeletonLine className="h-4 w-64 mb-4" />
           <TableSkeleton rows={5} cols={4} />
-- 
2.49.1


From 538df57d2b822438155586bc2211fa50eca4489f Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 21:41:45 +0100
Subject: [PATCH 219/428] fix: glassmorphism dropdowns + bump @ciphera-net/ui
 to 0.3.2

- NotificationCenter panel matches website header glass effect
- Bump @ciphera-net/ui for UserMenu & AppLauncher glassmorphism
---
 .../notifications/NotificationCenter.tsx      | 14 ++---
 package-lock.json                             | 60 ++-----------------
 package.json                                  |  2 +-
 3 files changed, 12 insertions(+), 64 deletions(-)

diff --git a/components/notifications/NotificationCenter.tsx b/components/notifications/NotificationCenter.tsx
index d5fe19d..c63a734 100644
--- a/components/notifications/NotificationCenter.tsx
+++ b/components/notifications/NotificationCenter.tsx
@@ -173,7 +173,7 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
         aria-controls={open ? 'notification-dropdown' : undefined}
         className={isSidebar
           ? 'relative flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 w-full overflow-hidden transition-colors'
-          : 'relative p-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white rounded-lg hover:bg-neutral-100/50 dark:hover:bg-neutral-800/50 transition-colors'
+          : 'relative p-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white rounded-lg hover:bg-neutral-100/50 dark:hover:bg-white/[0.06] transition-colors'
         }
         aria-label={unreadCount > 0 ? `Notifications, ${unreadCount} unread` : 'Notifications'}
       >
@@ -204,14 +204,14 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
             id="notification-dropdown"
             role="dialog"
             aria-label="Notifications"
-            className={`bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden z-[100] ${
+            className={`bg-white dark:bg-neutral-900/65 border border-neutral-200 dark:border-white/[0.08] rounded-xl shadow-xl dark:shadow-black/20 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:dark:bg-neutral-900/60 overflow-hidden z-[100] ${
               anchor === 'right'
                 ? `fixed w-96 ${fixedPos?.bottom !== undefined ? 'origin-bottom-left' : 'origin-top-left'}`
                 : 'fixed left-4 right-4 top-16 sm:absolute sm:left-auto sm:right-0 sm:top-full sm:mt-2 sm:w-96'
             }`}
             style={anchor === 'right' && fixedPos ? { left: fixedPos.left, top: fixedPos.top, bottom: fixedPos.bottom } : undefined}
           >
-            <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-700">
+            <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-white/[0.06]">
               <h3 className="font-semibold text-white">Notifications</h3>
               {unreadCount > 0 && (
                 <button
@@ -248,14 +248,14 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
                 </div>
               )}
               {!loading && !error && (notifications?.length ?? 0) > 0 && (
-                <ul className="divide-y divide-neutral-200 dark:divide-neutral-700">
+                <ul className="divide-y divide-neutral-200 dark:divide-white/[0.06]">
                   {(notifications ?? []).map((n) => (
                     <li key={n.id}>
                       {n.link_url ? (
                         <Link
                           href={n.link_url}
                           onClick={() => handleNotificationClick(n)}
-                          className={`block px-4 py-3 hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors ${!n.read ? 'bg-brand-orange/5 dark:bg-brand-orange/10' : ''}`}
+                          className={`block px-4 py-3 hover:bg-neutral-50 dark:hover:bg-white/[0.06] transition-colors ${!n.read ? 'bg-brand-orange/5 dark:bg-brand-orange/10' : ''}`}
                         >
                           <div className="flex gap-3">
                             {getTypeIcon(n.type)}
@@ -278,7 +278,7 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
                         <button
                           type="button"
                           onClick={() => handleNotificationClick(n)}
-                          className={`w-full text-left block px-4 py-3 hover:bg-neutral-50 dark:hover:bg-neutral-800/50 cursor-pointer ${!n.read ? 'bg-brand-orange/5 dark:bg-brand-orange/10' : ''}`}
+                          className={`w-full text-left block px-4 py-3 hover:bg-neutral-50 dark:hover:bg-white/[0.06] cursor-pointer ${!n.read ? 'bg-brand-orange/5 dark:bg-brand-orange/10' : ''}`}
                         >
                           <div className="flex gap-3">
                             {getTypeIcon(n.type)}
@@ -304,7 +304,7 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
               )}
             </div>
 
-            <div className="border-t border-neutral-200 dark:border-neutral-700 px-4 py-3 flex items-center justify-between gap-2">
+            <div className="border-t border-neutral-200 dark:border-white/[0.06] px-4 py-3 flex items-center justify-between gap-2">
               <Link
                 href="/notifications"
                 onClick={() => setOpen(false)}
diff --git a/package-lock.json b/package-lock.json
index d128ea3..a8a1e01 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "pulse-frontend",
       "version": "0.15.0-alpha",
       "dependencies": {
-        "@ciphera-net/ui": "^0.3.1",
+        "@ciphera-net/ui": "^0.3.2",
         "@ducanh2912/next-pwa": "^10.2.9",
         "@icons-pack/react-simple-icons": "^13.13.0",
         "@phosphor-icons/react": "^2.1.10",
@@ -16,8 +16,6 @@
         "@radix-ui/react-navigation-menu": "^1.2.14",
         "@radix-ui/react-slot": "^1.2.4",
         "@simplewebauthn/browser": "^13.2.2",
-        "@stripe/react-stripe-js": "^5.6.0",
-        "@stripe/stripe-js": "^8.7.0",
         "@tanstack/react-virtual": "^3.13.21",
         "@types/d3": "^7.4.3",
         "@visx/curve": "^3.12.0",
@@ -40,7 +38,6 @@
         "jspdf": "^4.0.0",
         "jspdf-autotable": "^5.0.7",
         "lucide-react": "^0.577.0",
-        "motion": "^12.35.2",
         "next": "^16.1.1",
         "radix-ui": "^1.4.3",
         "react": "^19.2.3",
@@ -1685,9 +1682,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.3.1",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.3.1/5696ea330397dfdedfb12cff5dc20ed073ede0d2",
-      "integrity": "sha512-NJgpcKERXbsMLABAdUsLq1V76O3lDFikAlf8xL4yfk19Jsg11llGEqtiW5CxmuyHWJXUiZjfT0M4sbwui0FAdA==",
+      "version": "0.3.2",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.3.2/f2271906ba6b3827dfc9598f6aed95bff20ae2a0",
+      "integrity": "sha512-bi8PANCpl27bCfIiHBmgyPFOKkTYgLHw/wOeUe9COAFHJj8MJGEj0rrXMa8L9Bf9IChw+MlITAojrklc1P8Kkw==",
       "dependencies": {
         "@phosphor-icons/react": "^2.1.10",
         "class-variance-authority": "^0.7.1",
@@ -5540,29 +5537,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@stripe/react-stripe-js": {
-      "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/@stripe/react-stripe-js/-/react-stripe-js-5.6.0.tgz",
-      "integrity": "sha512-tucu/vTGc+5NXbo2pUiaVjA4ENdRBET8qGS00BM4BAU8J4Pi3eY6BHollsP2+VSuzzlvXwMg0it3ZLhbCj2fPg==",
-      "license": "MIT",
-      "dependencies": {
-        "prop-types": "^15.7.2"
-      },
-      "peerDependencies": {
-        "@stripe/stripe-js": ">=8.0.0 <9.0.0",
-        "react": ">=16.8.0 <20.0.0",
-        "react-dom": ">=16.8.0 <20.0.0"
-      }
-    },
-    "node_modules/@stripe/stripe-js": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-8.7.0.tgz",
-      "integrity": "sha512-tNUerSstwNC1KuHgX4CASGO0Md3CB26IJzSXmVlSuFvhsBP4ZaEPpY4jxWOn9tfdDscuVT4Kqb8cZ2o9nLCgRQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12.16"
-      }
-    },
     "node_modules/@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
@@ -12219,32 +12193,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/motion": {
-      "version": "12.35.2",
-      "resolved": "https://registry.npmjs.org/motion/-/motion-12.35.2.tgz",
-      "integrity": "sha512-8zCi1DkNyU6a/tgEHn/GnnXZDcaMpDHbDOGORY1Rg/6lcNMSOuvwDB3i4hMSOvxqMWArc/vrGaw/Xek1OP69/A==",
-      "license": "MIT",
-      "dependencies": {
-        "framer-motion": "^12.35.2",
-        "tslib": "^2.4.0"
-      },
-      "peerDependencies": {
-        "@emotion/is-prop-valid": "*",
-        "react": "^18.0.0 || ^19.0.0",
-        "react-dom": "^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/is-prop-valid": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        },
-        "react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/motion-dom": {
       "version": "12.35.2",
       "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.35.2.tgz",
diff --git a/package.json b/package.json
index defbc53..54beb66 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.3.1",
+    "@ciphera-net/ui": "^0.3.2",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@icons-pack/react-simple-icons": "^13.13.0",
     "@phosphor-icons/react": "^2.1.10",
-- 
2.49.1


From d48479ee5bd3743bd224469daedc0b6a356a903b Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 21:45:26 +0100
Subject: [PATCH 220/428] fix: add open/close animation to NotificationCenter
 dropdown

Match AppLauncher & UserMenu Framer Motion treatment:
opacity + scale + y-offset with 0.15s transition
---
 .../notifications/NotificationCenter.tsx      | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/components/notifications/NotificationCenter.tsx b/components/notifications/NotificationCenter.tsx
index c63a734..749979c 100644
--- a/components/notifications/NotificationCenter.tsx
+++ b/components/notifications/NotificationCenter.tsx
@@ -6,6 +6,7 @@
 
 import { useEffect, useState, useRef, useCallback } from 'react'
 import { createPortal } from 'react-dom'
+import { motion, AnimatePresence } from 'framer-motion'
 import Link from 'next/link'
 import { listNotifications, markNotificationRead, markAllNotificationsRead, type Notification } from '@/lib/api/notifications'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
@@ -198,12 +199,18 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
       </button>
 
       {(() => {
-        const panel = open ? (
-          <div
+        const panel = (
+          <AnimatePresence>
+            {open && (
+          <motion.div
             ref={panelRef}
             id="notification-dropdown"
             role="dialog"
             aria-label="Notifications"
+            initial={{ opacity: 0, y: 10, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 10, scale: 0.95 }}
+            transition={{ duration: 0.15 }}
             className={`bg-white dark:bg-neutral-900/65 border border-neutral-200 dark:border-white/[0.08] rounded-xl shadow-xl dark:shadow-black/20 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:dark:bg-neutral-900/60 overflow-hidden z-[100] ${
               anchor === 'right'
                 ? `fixed w-96 ${fixedPos?.bottom !== undefined ? 'origin-bottom-left' : 'origin-top-left'}`
@@ -321,10 +328,12 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
                 Manage settings
               </Link>
             </div>
-          </div>
-        ) : null
+          </motion.div>
+            )}
+          </AnimatePresence>
+        )
 
-        return anchor === 'right' && panel && typeof document !== 'undefined'
+        return anchor === 'right' && typeof document !== 'undefined'
           ? createPortal(panel, document.body)
           : panel
       })()}
-- 
2.49.1


From f686063f0a961c2799c7e5bd7a2a65b1036ebf2c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 21:51:15 +0100
Subject: [PATCH 221/428] feat: glassmorphism sidebar matching website header
 treatment

- Sidebar body: bg-neutral-900/65 + backdrop-blur-3xl + saturate-150
- All borders changed to white/[0.08] and white/[0.06] dividers
- Hover states use white/[0.06] for glass consistency
- Site picker dropdown gets same glass treatment
- Search input uses bg-white/[0.04] + border-white/[0.08]
- Mobile sidebar matches desktop glass effect
---
 components/dashboard/Sidebar.tsx | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 1f9c111..39179d3 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -165,7 +165,7 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
             setOpen(!open)
           }
         }}
-        className="w-full flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-200 hover:bg-neutral-800 overflow-hidden"
+        className="w-full flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-200 hover:bg-white/[0.06] overflow-hidden"
       >
         <span className="w-7 h-7 rounded-md bg-brand-orange/10 flex items-center justify-center shrink-0 overflow-hidden">
           {faviconUrl && !faviconFailed ? (
@@ -194,7 +194,7 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
       </button>
 
       {open && (
-        <div className="absolute left-3 top-full mt-1 z-50 w-[240px] bg-neutral-900 border border-neutral-700 rounded-xl shadow-xl overflow-hidden animate-in fade-in zoom-in-95 duration-150">
+        <div className="absolute left-3 top-full mt-1 z-50 w-[240px] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-xl shadow-xl shadow-black/20 overflow-hidden animate-in fade-in zoom-in-95 duration-150">
           <div className="p-2">
             <input
               type="text"
@@ -208,7 +208,7 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
                   if (wasCollapsed.current) { onCollapse(); wasCollapsed.current = false }
                 }
               }}
-              className="w-full px-3 py-1.5 text-sm bg-neutral-800 border border-neutral-700 rounded-lg outline-none focus:ring-2 focus:ring-brand-orange/40 text-white placeholder:text-neutral-400"
+              className="w-full px-3 py-1.5 text-sm bg-white/[0.04] border border-white/[0.08] rounded-lg outline-none focus:ring-2 focus:ring-brand-orange/40 text-white placeholder:text-neutral-400"
               autoFocus
             />
           </div>
@@ -220,7 +220,7 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
                 className={`w-full flex items-center gap-2.5 px-4 py-2 text-sm text-left ${
                   site.id === siteId
                     ? 'bg-brand-orange/10 text-brand-orange font-medium'
-                    : 'text-neutral-300 hover:bg-neutral-800'
+                    : 'text-neutral-300 hover:bg-white/[0.06]'
                 }`}
               >
                 <img
@@ -236,8 +236,8 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
             ))}
             {filtered.length === 0 && <p className="px-4 py-3 text-sm text-neutral-400">No sites found</p>}
           </div>
-          <div className="border-t border-neutral-700 p-2">
-            <Link href="/sites/new" onClick={() => setOpen(false)} className="flex items-center gap-2 px-3 py-1.5 text-sm text-brand-orange hover:bg-neutral-800 rounded-lg">
+          <div className="border-t border-white/[0.06] p-2">
+            <Link href="/sites/new" onClick={() => setOpen(false)} className="flex items-center gap-2 px-3 py-1.5 text-sm text-brand-orange hover:bg-white/[0.06] rounded-lg">
               <PlusIcon className="w-4 h-4" />
               Add new site
             </Link>
@@ -270,7 +270,7 @@ function NavLink({
         className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 ${
           active
             ? 'bg-brand-orange/10 text-brand-orange'
-            : 'text-neutral-400 hover:text-white hover:bg-neutral-800 hover:translate-x-0.5'
+            : 'text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5'
         }`}
       >
         <span className="w-7 h-7 flex items-center justify-center shrink-0">
@@ -348,7 +348,7 @@ function SidebarContent({
         {NAV_GROUPS.map((group) => (
           <div key={group.label}>
             {c ? (
-              <div className="mx-3 my-2 border-t border-neutral-800/40" />
+              <div className="mx-3 my-2 border-t border-white/[0.04]" />
             ) : (
               <div className="h-5 flex items-center overflow-hidden">
                 <p className="px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap">
@@ -369,7 +369,7 @@ function SidebarContent({
       </nav>
 
       {/* Bottom — utility items */}
-      <div className="border-t border-neutral-800/60 px-2 py-3 shrink-0">
+      <div className="border-t border-white/[0.06] px-2 py-3 shrink-0">
         {/* Notifications, Profile — same layout as nav items */}
         <div className="space-y-0.5 mb-1">
           <div className="relative group/notif">
@@ -411,7 +411,7 @@ function SidebarContent({
             <div className="relative group/collapse">
               <button
                 onClick={onToggle}
-                className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800 w-full overflow-hidden"
+                className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-300 hover:bg-white/[0.06] w-full overflow-hidden"
               >
                 <span className="w-7 h-7 flex items-center justify-center shrink-0">
                   <CollapseLeftIcon className={`w-[18px] h-[18px] transition-transform duration-200 ${c ? 'rotate-180' : ''}`} />
@@ -516,7 +516,7 @@ export default function Sidebar({
     <>
       {/* Desktop — ssr:false means this only renders on client, no hydration flash */}
       <aside
-        className="hidden md:flex flex-col shrink-0 bg-neutral-900 overflow-hidden relative z-10"
+        className="hidden md:flex flex-col shrink-0 bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border-r border-white/[0.08] overflow-hidden relative z-10"
         style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
         onTransitionEnd={(e) => {
           if (e.propertyName === 'width' && pickerOpenCallbackRef.current) {
@@ -556,13 +556,13 @@ export default function Sidebar({
             onClick={handleMobileClose}
           />
           <aside
-            className={`fixed inset-y-0 left-0 z-50 w-72 bg-neutral-900 border-r border-neutral-800 shadow-xl md:hidden ${
+            className={`fixed inset-y-0 left-0 z-50 w-72 bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border-r border-white/[0.08] shadow-xl shadow-black/20 md:hidden ${
               mobileClosing
                 ? 'animate-out slide-out-to-left duration-200 fill-mode-forwards'
                 : 'animate-in slide-in-from-left duration-200'
             }`}
           >
-            <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-800">
+            <div className="flex items-center justify-between px-4 py-3 border-b border-white/[0.06]">
               <span className="text-sm font-semibold text-white">Navigation</span>
               <button onClick={handleMobileClose} className="p-1.5 text-neutral-400 hover:text-neutral-300">
                 <XIcon className="w-5 h-5" />
-- 
2.49.1


From def483cf6d611f73c3b8c97e9b7a027139937a98 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 21:54:44 +0100
Subject: [PATCH 222/428] =?UTF-8?q?fix:=20site=20picker=20dropdown=20opaci?=
 =?UTF-8?q?ty=20=E2=80=94=20more=20opaque=20over=20glass=20sidebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Glass-on-glass caused double transparency. Use bg-neutral-900/90
since this dropdown overlays the already-translucent sidebar.
---
 components/dashboard/Sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 39179d3..4a75b15 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -194,7 +194,7 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
       </button>
 
       {open && (
-        <div className="absolute left-3 top-full mt-1 z-50 w-[240px] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-xl shadow-xl shadow-black/20 overflow-hidden animate-in fade-in zoom-in-95 duration-150">
+        <div className="absolute left-3 top-full mt-1 z-50 w-[240px] bg-neutral-900/90 backdrop-blur-xl border border-white/[0.08] rounded-xl shadow-xl shadow-black/20 overflow-hidden animate-in fade-in zoom-in-95 duration-150">
           <div className="p-2">
             <input
               type="text"
-- 
2.49.1


From 71e98d72b43068401b6c6c69ecdf7e4af791b42f Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 21:59:25 +0100
Subject: [PATCH 223/428] fix: site picker dropdown matches AppLauncher
 glassmorphism exactly

---
 components/dashboard/Sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 4a75b15..39179d3 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -194,7 +194,7 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
       </button>
 
       {open && (
-        <div className="absolute left-3 top-full mt-1 z-50 w-[240px] bg-neutral-900/90 backdrop-blur-xl border border-white/[0.08] rounded-xl shadow-xl shadow-black/20 overflow-hidden animate-in fade-in zoom-in-95 duration-150">
+        <div className="absolute left-3 top-full mt-1 z-50 w-[240px] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-xl shadow-xl shadow-black/20 overflow-hidden animate-in fade-in zoom-in-95 duration-150">
           <div className="p-2">
             <input
               type="text"
-- 
2.49.1


From 441abbd5682b91336af37e74c13063e4729b8d41 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 22:04:16 +0100
Subject: [PATCH 224/428] fix: portal site picker to document.body to avoid
 glass-on-glass

Dropdown now uses createPortal + fixed positioning like AppLauncher,
UserMenu and NotificationCenter. Renders over page content instead
of over the glass sidebar, so /65 opacity looks correct.
---
 components/dashboard/Sidebar.tsx | 153 ++++++++++++++++++++-----------
 1 file changed, 97 insertions(+), 56 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 39179d3..8da7fed 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -1,6 +1,8 @@
 'use client'
 
 import { useState, useEffect, useRef, useCallback } from 'react'
+import { createPortal } from 'react-dom'
+import { motion, AnimatePresence } from 'framer-motion'
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
 import { listSites, type Site } from '@/lib/api/sites'
@@ -123,17 +125,35 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
   const [faviconFailed, setFaviconFailed] = useState(false)
   const [faviconLoaded, setFaviconLoaded] = useState(false)
   const ref = useRef<HTMLDivElement>(null)
+  const panelRef = useRef<HTMLDivElement>(null)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const [fixedPos, setFixedPos] = useState<{ left: number; top: number } | null>(null)
   const pathname = usePathname()
   const router = useRouter()
   const currentSite = sites.find((s) => s.id === siteId)
   const faviconUrl = currentSite?.domain ? `${FAVICON_SERVICE_URL}?domain=${currentSite.domain}&sz=64` : null
 
+  const updatePosition = useCallback(() => {
+    if (buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect()
+      let top = rect.bottom + 4
+      if (panelRef.current) {
+        const maxTop = window.innerHeight - panelRef.current.offsetHeight - 8
+        top = Math.min(top, Math.max(8, maxTop))
+      }
+      setFixedPos({ left: rect.left, top })
+    }
+  }, [])
+
   useEffect(() => {
     const handler = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
+      const target = e.target as Node
+      if (
+        ref.current && !ref.current.contains(target) &&
+        (!panelRef.current || !panelRef.current.contains(target))
+      ) {
         if (open) {
           setOpen(false); setSearch('')
-          // Re-collapse if we auto-expanded
           if (wasCollapsed.current) { onCollapse(); wasCollapsed.current = false }
         }
       }
@@ -142,20 +162,91 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
     return () => document.removeEventListener('mousedown', handler)
   }, [open, onCollapse, wasCollapsed])
 
+  useEffect(() => {
+    if (open) {
+      updatePosition()
+      requestAnimationFrame(() => updatePosition())
+    }
+  }, [open, updatePosition])
+
+  const closePicker = () => {
+    setOpen(false); setSearch('')
+    if (wasCollapsed.current) { onCollapse(); wasCollapsed.current = false }
+  }
+
   const switchSite = (id: string) => {
     router.push(`/sites/${id}${pathname.replace(/^\/sites\/[^/]+/, '')}`)
-    setOpen(false); setSearch('')
-    // Re-collapse if we auto-expanded
-    if (wasCollapsed.current) { onCollapse(); wasCollapsed.current = false }
+    closePicker()
   }
 
   const filtered = sites.filter(
     (s) => s.name.toLowerCase().includes(search.toLowerCase()) || s.domain.toLowerCase().includes(search.toLowerCase())
   )
 
+  const dropdown = (
+    <AnimatePresence>
+      {open && (
+        <motion.div
+          ref={panelRef}
+          initial={{ opacity: 0, y: 10, scale: 0.95 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          exit={{ opacity: 0, y: 10, scale: 0.95 }}
+          transition={{ duration: 0.15 }}
+          className="fixed z-50 w-[240px] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-xl shadow-xl shadow-black/20 overflow-hidden origin-top-left"
+          style={fixedPos ? { left: fixedPos.left, top: fixedPos.top } : undefined}
+        >
+          <div className="p-2">
+            <input
+              type="text"
+              placeholder="Search sites..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Escape') closePicker()
+              }}
+              className="w-full px-3 py-1.5 text-sm bg-white/[0.04] border border-white/[0.08] rounded-lg outline-none focus:ring-2 focus:ring-brand-orange/40 text-white placeholder:text-neutral-400"
+              autoFocus
+            />
+          </div>
+          <div className="max-h-64 overflow-y-auto">
+            {filtered.map((site) => (
+              <button
+                key={site.id}
+                onClick={() => switchSite(site.id)}
+                className={`w-full flex items-center gap-2.5 px-4 py-2 text-sm text-left ${
+                  site.id === siteId
+                    ? 'bg-brand-orange/10 text-brand-orange font-medium'
+                    : 'text-neutral-300 hover:bg-white/[0.06]'
+                }`}
+              >
+                <img
+                  src={`${FAVICON_SERVICE_URL}?domain=${site.domain}&sz=64`}
+                  alt=""
+                  className="w-5 h-5 rounded object-contain shrink-0"
+                />
+                <span className="flex flex-col min-w-0">
+                  <span className="truncate">{site.name}</span>
+                  <span className="text-xs text-neutral-400 truncate">{site.domain}</span>
+                </span>
+              </button>
+            ))}
+            {filtered.length === 0 && <p className="px-4 py-3 text-sm text-neutral-400">No sites found</p>}
+          </div>
+          <div className="border-t border-white/[0.06] p-2">
+            <Link href="/sites/new" onClick={() => closePicker()} className="flex items-center gap-2 px-3 py-1.5 text-sm text-brand-orange hover:bg-white/[0.06] rounded-lg">
+              <PlusIcon className="w-4 h-4" />
+              Add new site
+            </Link>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+
   return (
     <div className="relative mb-4 px-2" ref={ref}>
       <button
+        ref={buttonRef}
         onClick={() => {
           if (collapsed) {
             wasCollapsed.current = true
@@ -193,57 +284,7 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
         </Label>
       </button>
 
-      {open && (
-        <div className="absolute left-3 top-full mt-1 z-50 w-[240px] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-xl shadow-xl shadow-black/20 overflow-hidden animate-in fade-in zoom-in-95 duration-150">
-          <div className="p-2">
-            <input
-              type="text"
-              placeholder="Search sites..."
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === 'Escape') {
-                  setOpen(false)
-                  setSearch('')
-                  if (wasCollapsed.current) { onCollapse(); wasCollapsed.current = false }
-                }
-              }}
-              className="w-full px-3 py-1.5 text-sm bg-white/[0.04] border border-white/[0.08] rounded-lg outline-none focus:ring-2 focus:ring-brand-orange/40 text-white placeholder:text-neutral-400"
-              autoFocus
-            />
-          </div>
-          <div className="max-h-64 overflow-y-auto">
-            {filtered.map((site) => (
-              <button
-                key={site.id}
-                onClick={() => switchSite(site.id)}
-                className={`w-full flex items-center gap-2.5 px-4 py-2 text-sm text-left ${
-                  site.id === siteId
-                    ? 'bg-brand-orange/10 text-brand-orange font-medium'
-                    : 'text-neutral-300 hover:bg-white/[0.06]'
-                }`}
-              >
-                <img
-                  src={`${FAVICON_SERVICE_URL}?domain=${site.domain}&sz=64`}
-                  alt=""
-                  className="w-5 h-5 rounded object-contain shrink-0"
-                />
-                <span className="flex flex-col min-w-0">
-                  <span className="truncate">{site.name}</span>
-                  <span className="text-xs text-neutral-400 truncate">{site.domain}</span>
-                </span>
-              </button>
-            ))}
-            {filtered.length === 0 && <p className="px-4 py-3 text-sm text-neutral-400">No sites found</p>}
-          </div>
-          <div className="border-t border-white/[0.06] p-2">
-            <Link href="/sites/new" onClick={() => setOpen(false)} className="flex items-center gap-2 px-3 py-1.5 text-sm text-brand-orange hover:bg-white/[0.06] rounded-lg">
-              <PlusIcon className="w-4 h-4" />
-              Add new site
-            </Link>
-          </div>
-        </div>
-      )}
+      {typeof document !== 'undefined' ? createPortal(dropdown, document.body) : dropdown}
     </div>
   )
 }
-- 
2.49.1


From 441fd9afda04699aa4141910251962c910d78d5c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 22:05:09 +0100
Subject: [PATCH 225/428] fix: remove border-r from desktop sidebar

---
 components/dashboard/Sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 8da7fed..696b158 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -557,7 +557,7 @@ export default function Sidebar({
     <>
       {/* Desktop — ssr:false means this only renders on client, no hydration flash */}
       <aside
-        className="hidden md:flex flex-col shrink-0 bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border-r border-white/[0.08] overflow-hidden relative z-10"
+        className="hidden md:flex flex-col shrink-0 bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 overflow-hidden relative z-10"
         style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
         onTransitionEnd={(e) => {
           if (e.propertyName === 'width' && pickerOpenCallbackRef.current) {
-- 
2.49.1


From b607a9a76e80d5066ac72852f0056ac41502a04d Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 22:11:46 +0100
Subject: [PATCH 226/428] fix: site picker opens outside sidebar when collapsed

No longer expands sidebar first. When collapsed, dropdown appears
to the right of the button (like AppLauncher/UserMenu/Notifications).
When expanded, opens below the button.
---
 components/dashboard/Sidebar.tsx | 35 ++++++++++++++++----------------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 696b158..33b8b70 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -136,14 +136,25 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
   const updatePosition = useCallback(() => {
     if (buttonRef.current) {
       const rect = buttonRef.current.getBoundingClientRect()
-      let top = rect.bottom + 4
-      if (panelRef.current) {
-        const maxTop = window.innerHeight - panelRef.current.offsetHeight - 8
-        top = Math.min(top, Math.max(8, maxTop))
+      if (collapsed) {
+        // Collapsed: open to the right, like AppLauncher/UserMenu/Notifications
+        let top = rect.top
+        if (panelRef.current) {
+          const maxTop = window.innerHeight - panelRef.current.offsetHeight - 8
+          top = Math.min(top, Math.max(8, maxTop))
+        }
+        setFixedPos({ left: rect.right + 8, top })
+      } else {
+        // Expanded: open below the button
+        let top = rect.bottom + 4
+        if (panelRef.current) {
+          const maxTop = window.innerHeight - panelRef.current.offsetHeight - 8
+          top = Math.min(top, Math.max(8, maxTop))
+        }
+        setFixedPos({ left: rect.left, top })
       }
-      setFixedPos({ left: rect.left, top })
     }
-  }, [])
+  }, [collapsed])
 
   useEffect(() => {
     const handler = (e: MouseEvent) => {
@@ -154,7 +165,6 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
       ) {
         if (open) {
           setOpen(false); setSearch('')
-          if (wasCollapsed.current) { onCollapse(); wasCollapsed.current = false }
         }
       }
     }
@@ -171,7 +181,6 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
 
   const closePicker = () => {
     setOpen(false); setSearch('')
-    if (wasCollapsed.current) { onCollapse(); wasCollapsed.current = false }
   }
 
   const switchSite = (id: string) => {
@@ -247,15 +256,7 @@ function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollaps
     <div className="relative mb-4 px-2" ref={ref}>
       <button
         ref={buttonRef}
-        onClick={() => {
-          if (collapsed) {
-            wasCollapsed.current = true
-            pickerOpenCallback.current = () => setOpen(true)
-            onExpand()
-          } else {
-            setOpen(!open)
-          }
-        }}
+        onClick={() => setOpen(!open)}
         className="w-full flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-200 hover:bg-white/[0.06] overflow-hidden"
       >
         <span className="w-7 h-7 rounded-md bg-brand-orange/10 flex items-center justify-center shrink-0 overflow-hidden">
-- 
2.49.1


From 14e0c9b4dc91fcf06602bf3678883617b9a7c141 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 22:19:43 +0100
Subject: [PATCH 227/428] feat: subtle gradient behind sidebar for glass depth
 + fix scrollbar clip

- Shell bg changed to neutral-950 (darker, better contrast)
- Warm-to-cool gradient behind sidebar area (orange top, blue bottom)
- Gives the glassmorphic sidebar something to diffuse through
- overflow-clip + isolate on content panel for scrollbar corner clipping
---
 components/dashboard/DashboardShell.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 190b1d6..df950f0 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -11,7 +11,7 @@ const Sidebar = dynamic(() => import('./Sidebar'), {
   // so page content never occupies the sidebar zone
   loading: () => (
     <div
-      className="hidden md:block shrink-0 bg-neutral-900 overflow-hidden relative"
+      className="hidden md:block shrink-0 bg-neutral-950 overflow-hidden relative"
       style={{ width: 64 }}
     >
       <div className="absolute inset-0 bg-gradient-to-r from-transparent via-neutral-800/10 to-transparent animate-shimmer" />
@@ -31,7 +31,12 @@ export default function DashboardShell({
   const openMobile = useCallback(() => setMobileOpen(true), [])
 
   return (
-    <div className="flex h-screen overflow-hidden bg-neutral-900">
+    <div className="flex h-screen overflow-hidden bg-neutral-950 relative">
+      {/* Subtle gradient behind the sidebar to give glass something to diffuse */}
+      <div className="absolute inset-y-0 left-0 w-72 pointer-events-none" aria-hidden="true">
+        <div className="absolute inset-0 bg-gradient-to-b from-brand-orange/[0.06] via-transparent to-blue-500/[0.04]" />
+        <div className="absolute inset-0 bg-gradient-to-r from-brand-orange/[0.03] to-transparent" />
+      </div>
       <Sidebar
         siteId={siteId}
         mobileOpen={mobileOpen}
@@ -39,7 +44,7 @@ export default function DashboardShell({
         onMobileOpen={openMobile}
       />
       {/* Content panel — rounded corners, inset from edges. The left border doubles as the sidebar's right edge. */}
-      <div className="flex-1 flex flex-col min-w-0 overflow-hidden mt-2 mr-2 mb-2 rounded-2xl bg-neutral-950 border border-neutral-800/60">
+      <div className="flex-1 flex flex-col min-w-0 mt-2 mr-2 mb-2 rounded-2xl bg-neutral-950 border border-neutral-800/60 isolate overflow-clip">
         <ContentHeader onMobileMenuOpen={openMobile} />
         <main className="flex-1 overflow-y-auto pt-4">
           {children}
-- 
2.49.1


From 505454b7d636e927b5b5979f95ff114e8725b6bd Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 22:22:44 +0100
Subject: [PATCH 228/428] fix: remove gradient behind sidebar

---
 components/dashboard/DashboardShell.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index df950f0..b22200b 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -31,12 +31,7 @@ export default function DashboardShell({
   const openMobile = useCallback(() => setMobileOpen(true), [])
 
   return (
-    <div className="flex h-screen overflow-hidden bg-neutral-950 relative">
-      {/* Subtle gradient behind the sidebar to give glass something to diffuse */}
-      <div className="absolute inset-y-0 left-0 w-72 pointer-events-none" aria-hidden="true">
-        <div className="absolute inset-0 bg-gradient-to-b from-brand-orange/[0.06] via-transparent to-blue-500/[0.04]" />
-        <div className="absolute inset-0 bg-gradient-to-r from-brand-orange/[0.03] to-transparent" />
-      </div>
+    <div className="flex h-screen overflow-hidden bg-neutral-950">
       <Sidebar
         siteId={siteId}
         mobileOpen={mobileOpen}
-- 
2.49.1


From f3d72c9841d4862f643eb3719203988c90995cfb Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 22:28:18 +0100
Subject: [PATCH 229/428] fix: move glassmorphism to shell level, sidebar
 becomes transparent

Shell now has the glass treatment so sidebar and surrounding area
are one seamless surface. No more visible line between sidebar
and content panel. Desktop sidebar is transparent over the shell.
Mobile sidebar keeps its own glass since it overlays independently.
---
 components/dashboard/DashboardShell.tsx | 4 ++--
 components/dashboard/Sidebar.tsx        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index b22200b..58e620f 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -11,7 +11,7 @@ const Sidebar = dynamic(() => import('./Sidebar'), {
   // so page content never occupies the sidebar zone
   loading: () => (
     <div
-      className="hidden md:block shrink-0 bg-neutral-950 overflow-hidden relative"
+      className="hidden md:block shrink-0 bg-transparent overflow-hidden relative"
       style={{ width: 64 }}
     >
       <div className="absolute inset-0 bg-gradient-to-r from-transparent via-neutral-800/10 to-transparent animate-shimmer" />
@@ -31,7 +31,7 @@ export default function DashboardShell({
   const openMobile = useCallback(() => setMobileOpen(true), [])
 
   return (
-    <div className="flex h-screen overflow-hidden bg-neutral-950">
+    <div className="flex h-screen overflow-hidden bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60">
       <Sidebar
         siteId={siteId}
         mobileOpen={mobileOpen}
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 33b8b70..5149d97 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -558,7 +558,7 @@ export default function Sidebar({
     <>
       {/* Desktop — ssr:false means this only renders on client, no hydration flash */}
       <aside
-        className="hidden md:flex flex-col shrink-0 bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 overflow-hidden relative z-10"
+        className="hidden md:flex flex-col shrink-0 bg-transparent overflow-hidden relative z-10"
         style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
         onTransitionEnd={(e) => {
           if (e.propertyName === 'width' && pickerOpenCallbackRef.current) {
-- 
2.49.1


From b74742e15ecb77ca942141b0898f887b1aac9355 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 22:32:40 +0100
Subject: [PATCH 230/428] =?UTF-8?q?fix:=20thin=20subtle=20scrollbar=20?=
 =?UTF-8?q?=E2=80=94=206px,=20white/8%=20thumb,=20transparent=20track?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 styles/globals.css | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/styles/globals.css b/styles/globals.css
index 1937543..59c2bb5 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -69,6 +69,26 @@
     transform-style: preserve-3d;
   }
 
+  /* * Thin subtle scrollbar */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
+  }
+  *::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  *::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 3px;
+  }
+  *::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.15);
+  }
+
   /* * Scrollbar hide - for horizontal scroll navs */
   .scrollbar-hide {
     -ms-overflow-style: none;
-- 
2.49.1


From 102551b1ce6382e25d5add89e8bf0456d28edf8b Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 22:57:41 +0100
Subject: [PATCH 231/428] feat: content header with collapse toggle + realtime
 indicator

- New SidebarProvider context for shared collapse state
- ContentHeader visible on desktop: collapse icon left, "Live" right
- Collapse button removed from sidebar bottom (moved to header)
- Keyboard shortcut [ handled by context, not sidebar
- Realtime indicator polls every 5s, ticks every 1s for freshness
---
 components/dashboard/ContentHeader.tsx  | 64 +++++++++++++++++++----
 components/dashboard/DashboardShell.tsx | 32 ++++++------
 components/dashboard/Sidebar.tsx        | 63 ++---------------------
 lib/sidebar-context.tsx                 | 68 +++++++++++++++++++++++++
 4 files changed, 144 insertions(+), 83 deletions(-)
 create mode 100644 lib/sidebar-context.tsx

diff --git a/components/dashboard/ContentHeader.tsx b/components/dashboard/ContentHeader.tsx
index 417fc13..91732f4 100644
--- a/components/dashboard/ContentHeader.tsx
+++ b/components/dashboard/ContentHeader.tsx
@@ -1,21 +1,67 @@
 'use client'
 
-import { MenuIcon } from '@ciphera-net/ui'
+import { useState, useEffect, useRef } from 'react'
+import { MenuIcon, CollapseLeftIcon, formatUpdatedAgo } from '@ciphera-net/ui'
+import { useSidebar } from '@/lib/sidebar-context'
+import { useRealtime } from '@/lib/swr/dashboard'
 
 export default function ContentHeader({
+  siteId,
   onMobileMenuOpen,
 }: {
+  siteId: string
   onMobileMenuOpen: () => void
 }) {
+  const { collapsed, toggle } = useSidebar()
+  const { data: realtime } = useRealtime(siteId)
+  const lastUpdatedRef = useRef<number | null>(null)
+  const [, setTick] = useState(0)
+
+  // Track when realtime data last changed
+  useEffect(() => {
+    if (realtime) lastUpdatedRef.current = Date.now()
+  }, [realtime])
+
+  // Tick every second to keep "X seconds ago" fresh
+  useEffect(() => {
+    if (lastUpdatedRef.current == null) return
+    const timer = setInterval(() => setTick((t) => t + 1), 1000)
+    return () => clearInterval(timer)
+  }, [realtime])
+
   return (
-    <div className="shrink-0 flex items-center border-b border-neutral-800/60 bg-neutral-900/90 backdrop-blur-xl px-4 py-3.5 md:hidden">
-      <button
-        onClick={onMobileMenuOpen}
-        className="p-2 -ml-2 text-neutral-400 hover:text-white"
-        aria-label="Open navigation"
-      >
-        <MenuIcon className="w-5 h-5" />
-      </button>
+    <div className="shrink-0 flex items-center justify-between border-b border-neutral-800/60 px-3 py-2">
+      {/* Left — mobile hamburger or desktop collapse toggle */}
+      <div className="flex items-center">
+        {/* Mobile hamburger */}
+        <button
+          onClick={onMobileMenuOpen}
+          className="p-2 text-neutral-400 hover:text-white md:hidden"
+          aria-label="Open navigation"
+        >
+          <MenuIcon className="w-5 h-5" />
+        </button>
+
+        {/* Desktop collapse toggle */}
+        <button
+          onClick={toggle}
+          className="hidden md:flex items-center justify-center p-2 text-neutral-500 hover:text-white rounded-lg hover:bg-white/[0.06] transition-colors"
+          aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+        >
+          <CollapseLeftIcon className={`w-[18px] h-[18px] transition-transform duration-200 ${collapsed ? 'rotate-180' : ''}`} />
+        </button>
+      </div>
+
+      {/* Right — realtime indicator */}
+      {lastUpdatedRef.current != null && (
+        <div className="flex items-center gap-1.5 text-xs text-neutral-500">
+          <span className="relative flex h-1.5 w-1.5">
+            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75" />
+            <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-green-500" />
+          </span>
+          Live · {formatUpdatedAgo(lastUpdatedRef.current)}
+        </div>
+      )}
     </div>
   )
 }
diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 58e620f..78ebcc3 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -2,13 +2,12 @@
 
 import { useState, useCallback } from 'react'
 import dynamic from 'next/dynamic'
+import { SidebarProvider } from '@/lib/sidebar-context'
 import ContentHeader from './ContentHeader'
 
 // Load sidebar only on the client — prevents SSR flash
 const Sidebar = dynamic(() => import('./Sidebar'), {
   ssr: false,
-  // Placeholder reserves the sidebar's space in the server HTML
-  // so page content never occupies the sidebar zone
   loading: () => (
     <div
       className="hidden md:block shrink-0 bg-transparent overflow-hidden relative"
@@ -31,20 +30,21 @@ export default function DashboardShell({
   const openMobile = useCallback(() => setMobileOpen(true), [])
 
   return (
-    <div className="flex h-screen overflow-hidden bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60">
-      <Sidebar
-        siteId={siteId}
-        mobileOpen={mobileOpen}
-        onMobileClose={closeMobile}
-        onMobileOpen={openMobile}
-      />
-      {/* Content panel — rounded corners, inset from edges. The left border doubles as the sidebar's right edge. */}
-      <div className="flex-1 flex flex-col min-w-0 mt-2 mr-2 mb-2 rounded-2xl bg-neutral-950 border border-neutral-800/60 isolate overflow-clip">
-        <ContentHeader onMobileMenuOpen={openMobile} />
-        <main className="flex-1 overflow-y-auto pt-4">
-          {children}
-        </main>
+    <SidebarProvider>
+      <div className="flex h-screen overflow-hidden bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60">
+        <Sidebar
+          siteId={siteId}
+          mobileOpen={mobileOpen}
+          onMobileClose={closeMobile}
+          onMobileOpen={openMobile}
+        />
+        <div className="flex-1 flex flex-col min-w-0 mt-2 mr-2 mb-2 rounded-2xl bg-neutral-950 border border-neutral-800/60 isolate overflow-clip">
+          <ContentHeader siteId={siteId} onMobileMenuOpen={openMobile} />
+          <main className="flex-1 overflow-y-auto pt-4">
+            {children}
+          </main>
+        </div>
       </div>
-    </div>
+    </SidebarProvider>
   )
 }
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 5149d97..8a265f0 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -8,6 +8,7 @@ import { usePathname, useRouter } from 'next/navigation'
 import { listSites, type Site } from '@/lib/api/sites'
 import { useAuth } from '@/lib/auth/context'
 import { useSettingsModal } from '@/lib/settings-modal-context'
+import { useSidebar } from '@/lib/sidebar-context'
 // `,` shortcut handled globally by UnifiedSettingsModal
 import { getUserOrganizations, switchContext, type OrganizationMember } from '@/lib/api/organization'
 import { setSessionAction } from '@/app/actions/auth'
@@ -23,8 +24,6 @@ import {
   CloudUploadIcon,
   HeartbeatIcon,
   SettingsIcon,
-  CollapseLeftIcon,
-  CollapseRightIcon,
   ChevronUpDownIcon,
   PlusIcon,
   XIcon,
@@ -61,7 +60,6 @@ const CIPHERA_APPS: CipheraApp[] = [
   },
 ]
 
-const SIDEBAR_KEY = 'pulse_sidebar_collapsed'
 const EXPANDED = 256
 const COLLAPSED = 64
 
@@ -342,7 +340,6 @@ interface SidebarContentProps {
   onMobileClose: () => void
   onExpand: () => void
   onCollapse: () => void
-  onToggle: () => void
   wasCollapsed: React.MutableRefObject<boolean>
   pickerOpenCallbackRef: React.MutableRefObject<(() => void) | null>
   auth: ReturnType<typeof useAuth>
@@ -353,7 +350,7 @@ interface SidebarContentProps {
 
 function SidebarContent({
   isMobile, collapsed, siteId, sites, canEdit, pendingHref,
-  onNavigate, onMobileClose, onExpand, onCollapse, onToggle,
+  onNavigate, onMobileClose, onExpand, onCollapse,
   wasCollapsed, pickerOpenCallbackRef, auth, orgs, onSwitchOrganization, openSettings,
 }: SidebarContentProps) {
   const router = useRouter()
@@ -446,28 +443,6 @@ function SidebarContent({
             )}
           </div>
         </div>
-
-        {/* Settings + Collapse */}
-        <div className="space-y-0.5">
-          {!isMobile && (
-            <div className="relative group/collapse">
-              <button
-                onClick={onToggle}
-                className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-300 hover:bg-white/[0.06] w-full overflow-hidden"
-              >
-                <span className="w-7 h-7 flex items-center justify-center shrink-0">
-                  <CollapseLeftIcon className={`w-[18px] h-[18px] transition-transform duration-200 ${c ? 'rotate-180' : ''}`} />
-                </span>
-                <Label collapsed={c}>{c ? 'Expand' : 'Collapse'}</Label>
-              </button>
-              {c && (
-                <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/collapse:opacity-100 transition-opacity duration-150 delay-150 z-50">
-                  Expand (press [)
-                </span>
-              )}
-            </div>
-          )}
-        </div>
       </div>
     </div>
   )
@@ -492,10 +467,7 @@ export default function Sidebar({
   const [mobileClosing, setMobileClosing] = useState(false)
   const wasCollapsedRef = useRef(false)
   const pickerOpenCallbackRef = useRef<(() => void) | null>(null)
-  // Safe to read localStorage directly — this component is loaded with ssr:false
-  const [collapsed, setCollapsed] = useState(() => {
-    return localStorage.getItem(SIDEBAR_KEY) !== 'false'
-  })
+  const { collapsed, toggle, expand, collapse } = useSidebar()
 
   useEffect(() => { listSites().then(setSites).catch(() => {}) }, [])
   useEffect(() => {
@@ -519,31 +491,6 @@ export default function Sidebar({
   }
   useEffect(() => { setPendingHref(null); onMobileClose() }, [pathname, onMobileClose])
 
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => {
-      const tag = (e.target as HTMLElement)?.tagName
-      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return
-      if (e.key === '[' && !e.metaKey && !e.ctrlKey && !e.altKey) {
-        e.preventDefault(); toggle()
-      }
-      // `,` shortcut is handled globally by UnifiedSettingsModal — not here
-    }
-    document.addEventListener('keydown', handler)
-    return () => document.removeEventListener('keydown', handler)
-  }, [collapsed])
-
-  const toggle = useCallback(() => {
-    setCollapsed((prev) => { const next = !prev; localStorage.setItem(SIDEBAR_KEY, String(next)); return next })
-  }, [])
-
-  const expand = useCallback(() => {
-    setCollapsed(false); localStorage.setItem(SIDEBAR_KEY, 'false')
-  }, [])
-
-  const collapse = useCallback(() => {
-    setCollapsed(true); localStorage.setItem(SIDEBAR_KEY, 'true')
-  }, [])
-
   const handleMobileClose = useCallback(() => {
     setMobileClosing(true)
     setTimeout(() => {
@@ -578,7 +525,7 @@ export default function Sidebar({
           onMobileClose={onMobileClose}
           onExpand={expand}
           onCollapse={collapse}
-          onToggle={toggle}
+
           wasCollapsed={wasCollapsedRef}
           pickerOpenCallbackRef={pickerOpenCallbackRef}
           auth={auth}
@@ -621,7 +568,7 @@ export default function Sidebar({
               onMobileClose={handleMobileClose}
               onExpand={expand}
               onCollapse={collapse}
-              onToggle={toggle}
+    
               wasCollapsed={wasCollapsedRef}
               pickerOpenCallbackRef={pickerOpenCallbackRef}
               auth={auth}
diff --git a/lib/sidebar-context.tsx b/lib/sidebar-context.tsx
new file mode 100644
index 0000000..6691ac9
--- /dev/null
+++ b/lib/sidebar-context.tsx
@@ -0,0 +1,68 @@
+'use client'
+
+import { createContext, useContext, useState, useCallback, useEffect } from 'react'
+
+const SIDEBAR_KEY = 'pulse_sidebar_collapsed'
+
+interface SidebarState {
+  collapsed: boolean
+  toggle: () => void
+  expand: () => void
+  collapse: () => void
+}
+
+const SidebarContext = createContext<SidebarState>({
+  collapsed: true,
+  toggle: () => {},
+  expand: () => {},
+  collapse: () => {},
+})
+
+export function SidebarProvider({ children }: { children: React.ReactNode }) {
+  const [collapsed, setCollapsed] = useState(() => {
+    if (typeof window === 'undefined') return true
+    return localStorage.getItem(SIDEBAR_KEY) !== 'false'
+  })
+
+  const toggle = useCallback(() => {
+    setCollapsed((prev) => {
+      const next = !prev
+      localStorage.setItem(SIDEBAR_KEY, String(next))
+      return next
+    })
+  }, [])
+
+  const expand = useCallback(() => {
+    setCollapsed(false)
+    localStorage.setItem(SIDEBAR_KEY, 'false')
+  }, [])
+
+  const collapse = useCallback(() => {
+    setCollapsed(true)
+    localStorage.setItem(SIDEBAR_KEY, 'true')
+  }, [])
+
+  // Keyboard shortcut: [ to toggle
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      const tag = (e.target as HTMLElement)?.tagName
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return
+      if (e.key === '[' && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        e.preventDefault()
+        toggle()
+      }
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [toggle])
+
+  return (
+    <SidebarContext.Provider value={{ collapsed, toggle, expand, collapse }}>
+      {children}
+    </SidebarContext.Provider>
+  )
+}
+
+export function useSidebar() {
+  return useContext(SidebarContext)
+}
-- 
2.49.1


From 0f462314e2389cc68271b020c8bbee99d45ddd3e Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 23:02:52 +0100
Subject: [PATCH 232/428] fix: move collapse toggle + realtime to glass area
 above content panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

GlassTopBar in the margin strip — SidebarSimple icon (phosphor) on
left, "Live · Xs ago" on right. ContentHeader reverted to mobile-only.
---
 components/dashboard/ContentHeader.tsx  | 64 ++++---------------------
 components/dashboard/DashboardShell.tsx | 63 +++++++++++++++++++++---
 2 files changed, 65 insertions(+), 62 deletions(-)

diff --git a/components/dashboard/ContentHeader.tsx b/components/dashboard/ContentHeader.tsx
index 91732f4..417fc13 100644
--- a/components/dashboard/ContentHeader.tsx
+++ b/components/dashboard/ContentHeader.tsx
@@ -1,67 +1,21 @@
 'use client'
 
-import { useState, useEffect, useRef } from 'react'
-import { MenuIcon, CollapseLeftIcon, formatUpdatedAgo } from '@ciphera-net/ui'
-import { useSidebar } from '@/lib/sidebar-context'
-import { useRealtime } from '@/lib/swr/dashboard'
+import { MenuIcon } from '@ciphera-net/ui'
 
 export default function ContentHeader({
-  siteId,
   onMobileMenuOpen,
 }: {
-  siteId: string
   onMobileMenuOpen: () => void
 }) {
-  const { collapsed, toggle } = useSidebar()
-  const { data: realtime } = useRealtime(siteId)
-  const lastUpdatedRef = useRef<number | null>(null)
-  const [, setTick] = useState(0)
-
-  // Track when realtime data last changed
-  useEffect(() => {
-    if (realtime) lastUpdatedRef.current = Date.now()
-  }, [realtime])
-
-  // Tick every second to keep "X seconds ago" fresh
-  useEffect(() => {
-    if (lastUpdatedRef.current == null) return
-    const timer = setInterval(() => setTick((t) => t + 1), 1000)
-    return () => clearInterval(timer)
-  }, [realtime])
-
   return (
-    <div className="shrink-0 flex items-center justify-between border-b border-neutral-800/60 px-3 py-2">
-      {/* Left — mobile hamburger or desktop collapse toggle */}
-      <div className="flex items-center">
-        {/* Mobile hamburger */}
-        <button
-          onClick={onMobileMenuOpen}
-          className="p-2 text-neutral-400 hover:text-white md:hidden"
-          aria-label="Open navigation"
-        >
-          <MenuIcon className="w-5 h-5" />
-        </button>
-
-        {/* Desktop collapse toggle */}
-        <button
-          onClick={toggle}
-          className="hidden md:flex items-center justify-center p-2 text-neutral-500 hover:text-white rounded-lg hover:bg-white/[0.06] transition-colors"
-          aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-        >
-          <CollapseLeftIcon className={`w-[18px] h-[18px] transition-transform duration-200 ${collapsed ? 'rotate-180' : ''}`} />
-        </button>
-      </div>
-
-      {/* Right — realtime indicator */}
-      {lastUpdatedRef.current != null && (
-        <div className="flex items-center gap-1.5 text-xs text-neutral-500">
-          <span className="relative flex h-1.5 w-1.5">
-            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75" />
-            <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-green-500" />
-          </span>
-          Live · {formatUpdatedAgo(lastUpdatedRef.current)}
-        </div>
-      )}
+    <div className="shrink-0 flex items-center border-b border-neutral-800/60 bg-neutral-900/90 backdrop-blur-xl px-4 py-3.5 md:hidden">
+      <button
+        onClick={onMobileMenuOpen}
+        className="p-2 -ml-2 text-neutral-400 hover:text-white"
+        aria-label="Open navigation"
+      >
+        <MenuIcon className="w-5 h-5" />
+      </button>
     </div>
   )
 }
diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 78ebcc3..0b5de5c 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -1,8 +1,11 @@
 'use client'
 
-import { useState, useCallback } from 'react'
+import { useState, useCallback, useEffect, useRef } from 'react'
 import dynamic from 'next/dynamic'
-import { SidebarProvider } from '@/lib/sidebar-context'
+import { formatUpdatedAgo } from '@ciphera-net/ui'
+import { SidebarSimple } from '@phosphor-icons/react'
+import { SidebarProvider, useSidebar } from '@/lib/sidebar-context'
+import { useRealtime } from '@/lib/swr/dashboard'
 import ContentHeader from './ContentHeader'
 
 // Load sidebar only on the client — prevents SSR flash
@@ -18,6 +21,47 @@ const Sidebar = dynamic(() => import('./Sidebar'), {
   ),
 })
 
+function GlassTopBar({ siteId }: { siteId: string }) {
+  const { collapsed, toggle } = useSidebar()
+  const { data: realtime } = useRealtime(siteId)
+  const lastUpdatedRef = useRef<number | null>(null)
+  const [, setTick] = useState(0)
+
+  useEffect(() => {
+    if (realtime) lastUpdatedRef.current = Date.now()
+  }, [realtime])
+
+  useEffect(() => {
+    if (lastUpdatedRef.current == null) return
+    const timer = setInterval(() => setTick((t) => t + 1), 1000)
+    return () => clearInterval(timer)
+  }, [realtime])
+
+  return (
+    <div className="hidden md:flex items-center justify-between h-10 shrink-0 px-3">
+      {/* Collapse toggle */}
+      <button
+        onClick={toggle}
+        className="flex items-center justify-center p-1.5 text-neutral-500 hover:text-white rounded-lg hover:bg-white/[0.06] transition-colors"
+        aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+      >
+        <SidebarSimple className="w-4 h-4" weight={collapsed ? 'regular' : 'fill'} />
+      </button>
+
+      {/* Realtime indicator */}
+      {lastUpdatedRef.current != null && (
+        <div className="flex items-center gap-1.5 text-xs text-neutral-500">
+          <span className="relative flex h-1.5 w-1.5">
+            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75" />
+            <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-green-500" />
+          </span>
+          Live · {formatUpdatedAgo(lastUpdatedRef.current)}
+        </div>
+      )}
+    </div>
+  )
+}
+
 export default function DashboardShell({
   siteId,
   children,
@@ -38,11 +82,16 @@ export default function DashboardShell({
           onMobileClose={closeMobile}
           onMobileOpen={openMobile}
         />
-        <div className="flex-1 flex flex-col min-w-0 mt-2 mr-2 mb-2 rounded-2xl bg-neutral-950 border border-neutral-800/60 isolate overflow-clip">
-          <ContentHeader siteId={siteId} onMobileMenuOpen={openMobile} />
-          <main className="flex-1 overflow-y-auto pt-4">
-            {children}
-          </main>
+        <div className="flex-1 flex flex-col min-w-0">
+          {/* Glass top bar — collapse toggle + realtime, in the margin above the content panel */}
+          <GlassTopBar siteId={siteId} />
+          {/* Content panel */}
+          <div className="flex-1 flex flex-col min-w-0 mr-2 mb-2 rounded-2xl bg-neutral-950 border border-neutral-800/60 isolate overflow-clip">
+            <ContentHeader onMobileMenuOpen={openMobile} />
+            <main className="flex-1 overflow-y-auto pt-4">
+              {children}
+            </main>
+          </div>
         </div>
       </div>
     </SidebarProvider>
-- 
2.49.1


From bb55782dba3d4d706ce1c58aa8882ba9dd5d3b59 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 23:06:44 +0100
Subject: [PATCH 233/428] =?UTF-8?q?fix:=20restore=20scrolling=20=E2=80=94?=
 =?UTF-8?q?=20overflow-clip=20was=20blocking=20overflow-y-auto?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/dashboard/DashboardShell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 0b5de5c..1df8dd4 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -86,7 +86,7 @@ export default function DashboardShell({
           {/* Glass top bar — collapse toggle + realtime, in the margin above the content panel */}
           <GlassTopBar siteId={siteId} />
           {/* Content panel */}
-          <div className="flex-1 flex flex-col min-w-0 mr-2 mb-2 rounded-2xl bg-neutral-950 border border-neutral-800/60 isolate overflow-clip">
+          <div className="flex-1 flex flex-col min-w-0 mr-2 mb-2 rounded-2xl bg-neutral-950 border border-neutral-800/60 overflow-hidden">
             <ContentHeader onMobileMenuOpen={openMobile} />
             <main className="flex-1 overflow-y-auto pt-4">
               {children}
-- 
2.49.1


From d6627413b8440dc59e2ba06794e9c8abbf3cf8a7 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 23:16:36 +0100
Subject: [PATCH 234/428] =?UTF-8?q?feat:=20full-width=20content=20?=
 =?UTF-8?q?=E2=80=94=20remove=20max-w-6xl=20from=20all=20site=20pages=20an?=
 =?UTF-8?q?d=20skeletons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/sites/[id]/behavior/page.tsx           |  2 +-
 app/sites/[id]/cdn/page.tsx                |  6 +++---
 app/sites/[id]/funnels/[funnelId]/page.tsx | 10 +++++-----
 app/sites/[id]/funnels/page.tsx            |  2 +-
 app/sites/[id]/journeys/page.tsx           |  2 +-
 app/sites/[id]/page.tsx                    |  4 ++--
 app/sites/[id]/pagespeed/page.tsx          |  6 +++---
 app/sites/[id]/search/page.tsx             |  6 +++---
 app/sites/[id]/settings/page.tsx           |  6 +++---
 app/sites/[id]/uptime/page.tsx             |  4 ++--
 components/skeletons.tsx                   | 12 ++++++------
 11 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/app/sites/[id]/behavior/page.tsx b/app/sites/[id]/behavior/page.tsx
index 050b635..11130fa 100644
--- a/app/sites/[id]/behavior/page.tsx
+++ b/app/sites/[id]/behavior/page.tsx
@@ -56,7 +56,7 @@ export default function BehaviorPage() {
   if (showSkeleton) return <BehaviorSkeleton />
 
   return (
-    <div className={`w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+    <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
diff --git a/app/sites/[id]/cdn/page.tsx b/app/sites/[id]/cdn/page.tsx
index b8872d0..259b615 100644
--- a/app/sites/[id]/cdn/page.tsx
+++ b/app/sites/[id]/cdn/page.tsx
@@ -135,7 +135,7 @@ export default function CDNPage() {
 
   if (showSkeleton) {
     return (
-      <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
         <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
           <div>
             <SkeletonLine className="h-8 w-48 mb-2" />
@@ -172,7 +172,7 @@ export default function CDNPage() {
 
   if (bunnyStatus && !bunnyStatus.connected) {
     return (
-      <div className={`w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+      <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
         <div className="flex flex-col items-center justify-center py-24 text-center">
           <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-5 mb-6">
             <CloudArrowUp size={40} className="text-neutral-400 dark:text-neutral-500" />
@@ -208,7 +208,7 @@ export default function CDNPage() {
   const totalBandwidth = countries.reduce((sum, row) => sum + row.bandwidth, 0)
 
   return (
-    <div className={`w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+    <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
diff --git a/app/sites/[id]/funnels/[funnelId]/page.tsx b/app/sites/[id]/funnels/[funnelId]/page.tsx
index 0ce4fe1..2393948 100644
--- a/app/sites/[id]/funnels/[funnelId]/page.tsx
+++ b/app/sites/[id]/funnels/[funnelId]/page.tsx
@@ -84,7 +84,7 @@ export default function FunnelReportPage() {
 
   if (loadError === 'not_found' || (!funnel && !stats && !loadError)) {
     return (
-      <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
         <p className="text-neutral-600 dark:text-neutral-400">Funnel not found</p>
       </div>
     )
@@ -92,7 +92,7 @@ export default function FunnelReportPage() {
 
   if (loadError === 'forbidden') {
     return (
-      <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
         <p className="text-neutral-600 dark:text-neutral-400">Access denied</p>
         <Link href={`/sites/${siteId}/funnels`}>
           <Button variant="primary" className="mt-4">
@@ -105,7 +105,7 @@ export default function FunnelReportPage() {
 
   if (loadError === 'error') {
     return (
-      <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
         <p className="text-neutral-600 dark:text-neutral-400 mb-4">Unable to load funnel</p>
         <Button type="button" onClick={() => loadData()} variant="primary">
           Try again
@@ -116,7 +116,7 @@ export default function FunnelReportPage() {
 
   if (!funnel || !stats) {
     return (
-      <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
         <p className="text-neutral-600 dark:text-neutral-400">Funnel not found</p>
       </div>
     )
@@ -143,7 +143,7 @@ export default function FunnelReportPage() {
   }) : []
 
   return (
-    <div className={`w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+    <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       <div className="mb-8">
         <div className="flex items-center justify-between mb-6">
           <div className="flex items-center gap-4">
diff --git a/app/sites/[id]/funnels/page.tsx b/app/sites/[id]/funnels/page.tsx
index 5638bf0..42a26da 100644
--- a/app/sites/[id]/funnels/page.tsx
+++ b/app/sites/[id]/funnels/page.tsx
@@ -36,7 +36,7 @@ export default function FunnelsPage() {
   }
 
   return (
-    <div className={`w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+    <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       <div className="mb-8">
         <div className="flex items-center justify-between mb-6">
           <div>
diff --git a/app/sites/[id]/journeys/page.tsx b/app/sites/[id]/journeys/page.tsx
index 94fab56..783cb66 100644
--- a/app/sites/[id]/journeys/page.tsx
+++ b/app/sites/[id]/journeys/page.tsx
@@ -73,7 +73,7 @@ export default function JourneysPage() {
   const totalSessions = transitionsData?.total_sessions ?? 0
 
   return (
-    <div className={`w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+    <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx
index 892f135..8850c89 100644
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -417,14 +417,14 @@ export default function SiteDashboardPage() {
 
   if (!site) {
     return (
-      <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
         <p className="text-neutral-600 dark:text-neutral-400">Site not found</p>
       </div>
     )
   }
 
   return (
-    <div className={`w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+    <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       <div className="mb-6">
         <div className="flex items-center justify-between mb-3">
           <div className="flex items-center gap-4">
diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index 8e5de27..1215eb4 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -235,7 +235,7 @@ export default function PageSpeedPage() {
   // * Disabled state — show empty state with enable toggle
   if (!enabled) {
     return (
-      <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
         {/* Header */}
         <div className="mb-8">
           <h1 className="text-2xl font-bold text-white mb-1">
@@ -357,7 +357,7 @@ export default function PageSpeedPage() {
 
   // * Enabled state — show full PageSpeed dashboard
   return (
-    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
+    <div className="w-full mx-auto px-4 sm:px-6 pb-8">
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
@@ -868,7 +868,7 @@ function AuditItem({ item }: { item: Record<string, any> }) {
 // * Skeleton loading state
 function PageSpeedSkeleton() {
   return (
-    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 space-y-6 animate-pulse">
+    <div className="w-full mx-auto px-4 sm:px-6 pb-8 space-y-6 animate-pulse">
       {/* Header — title + subtitle + toggle buttons */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div className="space-y-2">
diff --git a/app/sites/[id]/search/page.tsx b/app/sites/[id]/search/page.tsx
index 81f9bbb..0e79382 100644
--- a/app/sites/[id]/search/page.tsx
+++ b/app/sites/[id]/search/page.tsx
@@ -125,7 +125,7 @@ export default function SearchConsolePage() {
 
   if (showSkeleton) {
     return (
-      <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
         <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
           <div>
             <SkeletonLine className="h-8 w-48 mb-2" />
@@ -161,7 +161,7 @@ export default function SearchConsolePage() {
 
   if (gscStatus && !gscStatus.connected) {
     return (
-      <div className={`w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+      <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
         <div className="flex flex-col items-center justify-center py-24 text-center">
           <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-5 mb-6">
             <MagnifyingGlass size={40} className="text-neutral-400 dark:text-neutral-500" />
@@ -198,7 +198,7 @@ export default function SearchConsolePage() {
   const pagesTotal = topPages?.total ?? 0
 
   return (
-    <div className={`w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+    <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index a907e2b..4f95d8d 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -704,7 +704,7 @@ export default function SiteSettingsPage() {
 
   if (showSkeleton) {
     return (
-      <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
         <div className="space-y-8">
           <div>
             <div className="h-8 w-40 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800 mb-2" />
@@ -727,14 +727,14 @@ export default function SiteSettingsPage() {
 
   if (!site) {
     return (
-      <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
         <p className="text-neutral-600 dark:text-neutral-400">Site not found</p>
       </div>
     )
   }
 
   return (
-    <div className={`w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+    <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
 
       <div className="space-y-8">
         <div>
diff --git a/app/sites/[id]/uptime/page.tsx b/app/sites/[id]/uptime/page.tsx
index 8eebd0e..063c684 100644
--- a/app/sites/[id]/uptime/page.tsx
+++ b/app/sites/[id]/uptime/page.tsx
@@ -403,7 +403,7 @@ export default function UptimePage() {
   // * Disabled state — show empty state with enable toggle
   if (!uptimeEnabled) {
     return (
-      <div className={`w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+      <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
         {/* Header */}
         <div className="mb-8">
           <h1 className="text-2xl font-bold text-white mb-1">
@@ -442,7 +442,7 @@ export default function UptimePage() {
 
   // * Enabled state — show uptime dashboard
   return (
-    <div className={`w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+    <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
diff --git a/components/skeletons.tsx b/components/skeletons.tsx
index 76e740e..ce59cb1 100644
--- a/components/skeletons.tsx
+++ b/components/skeletons.tsx
@@ -122,7 +122,7 @@ export function ChartSkeleton() {
 
 export function DashboardSkeleton() {
   return (
-    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
+    <div className="w-full mx-auto px-4 sm:px-6 pb-8">
       {/* Header */}
       <div className="mb-8">
         <div className="flex items-center justify-between mb-4">
@@ -170,7 +170,7 @@ export function DashboardSkeleton() {
 
 export function JourneysSkeleton() {
   return (
-    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
+    <div className="w-full mx-auto px-4 sm:px-6 pb-8">
       {/* Header */}
       <div className="mb-8 flex items-center justify-between">
         <div>
@@ -199,7 +199,7 @@ export function JourneysSkeleton() {
 
 export function UptimeSkeleton() {
   return (
-    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
+    <div className="w-full mx-auto px-4 sm:px-6 pb-8">
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
@@ -273,7 +273,7 @@ export function ChecksSkeleton() {
 
 export function FunnelsListSkeleton() {
   return (
-    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
+    <div className="w-full mx-auto px-4 sm:px-6 pb-8">
       <div className="mb-8">
         <div className="flex items-center gap-4 mb-6">
           <SkeletonLine className="h-10 w-10 rounded-xl" />
@@ -307,7 +307,7 @@ export function FunnelsListSkeleton() {
 
 export function FunnelDetailSkeleton() {
   return (
-    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
+    <div className="w-full mx-auto px-4 sm:px-6 pb-8">
       <div className="mb-8">
         <SkeletonLine className="h-4 w-32 mb-2" />
         <SkeletonLine className="h-8 w-48 mb-1" />
@@ -395,7 +395,7 @@ export function PricingCardsSkeleton() {
 
 export function BehaviorSkeleton() {
   return (
-    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
+    <div className="w-full mx-auto px-4 sm:px-6 pb-8">
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
-- 
2.49.1


From de10fb5daf202a08446d57a92ca1ad4a11e37650 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 23:21:57 +0100
Subject: [PATCH 235/428] =?UTF-8?q?fix:=20use=20max-w-7xl=20(1280px)=20ins?=
 =?UTF-8?q?tead=20of=20full-width=20=E2=80=94=20better=20readability?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/sites/[id]/behavior/page.tsx           |  2 +-
 app/sites/[id]/cdn/page.tsx                |  6 +++---
 app/sites/[id]/funnels/[funnelId]/page.tsx | 10 +++++-----
 app/sites/[id]/funnels/page.tsx            |  2 +-
 app/sites/[id]/journeys/page.tsx           |  2 +-
 app/sites/[id]/page.tsx                    |  4 ++--
 app/sites/[id]/pagespeed/page.tsx          |  6 +++---
 app/sites/[id]/search/page.tsx             |  6 +++---
 app/sites/[id]/settings/page.tsx           |  6 +++---
 app/sites/[id]/uptime/page.tsx             |  4 ++--
 components/skeletons.tsx                   | 12 ++++++------
 11 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/app/sites/[id]/behavior/page.tsx b/app/sites/[id]/behavior/page.tsx
index 11130fa..8b5e2b4 100644
--- a/app/sites/[id]/behavior/page.tsx
+++ b/app/sites/[id]/behavior/page.tsx
@@ -56,7 +56,7 @@ export default function BehaviorPage() {
   if (showSkeleton) return <BehaviorSkeleton />
 
   return (
-    <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+    <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
diff --git a/app/sites/[id]/cdn/page.tsx b/app/sites/[id]/cdn/page.tsx
index 259b615..c8b8f96 100644
--- a/app/sites/[id]/cdn/page.tsx
+++ b/app/sites/[id]/cdn/page.tsx
@@ -135,7 +135,7 @@ export default function CDNPage() {
 
   if (showSkeleton) {
     return (
-      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
         <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
           <div>
             <SkeletonLine className="h-8 w-48 mb-2" />
@@ -172,7 +172,7 @@ export default function CDNPage() {
 
   if (bunnyStatus && !bunnyStatus.connected) {
     return (
-      <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+      <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
         <div className="flex flex-col items-center justify-center py-24 text-center">
           <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-5 mb-6">
             <CloudArrowUp size={40} className="text-neutral-400 dark:text-neutral-500" />
@@ -208,7 +208,7 @@ export default function CDNPage() {
   const totalBandwidth = countries.reduce((sum, row) => sum + row.bandwidth, 0)
 
   return (
-    <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+    <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
diff --git a/app/sites/[id]/funnels/[funnelId]/page.tsx b/app/sites/[id]/funnels/[funnelId]/page.tsx
index 2393948..7c43443 100644
--- a/app/sites/[id]/funnels/[funnelId]/page.tsx
+++ b/app/sites/[id]/funnels/[funnelId]/page.tsx
@@ -84,7 +84,7 @@ export default function FunnelReportPage() {
 
   if (loadError === 'not_found' || (!funnel && !stats && !loadError)) {
     return (
-      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
         <p className="text-neutral-600 dark:text-neutral-400">Funnel not found</p>
       </div>
     )
@@ -92,7 +92,7 @@ export default function FunnelReportPage() {
 
   if (loadError === 'forbidden') {
     return (
-      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
         <p className="text-neutral-600 dark:text-neutral-400">Access denied</p>
         <Link href={`/sites/${siteId}/funnels`}>
           <Button variant="primary" className="mt-4">
@@ -105,7 +105,7 @@ export default function FunnelReportPage() {
 
   if (loadError === 'error') {
     return (
-      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
         <p className="text-neutral-600 dark:text-neutral-400 mb-4">Unable to load funnel</p>
         <Button type="button" onClick={() => loadData()} variant="primary">
           Try again
@@ -116,7 +116,7 @@ export default function FunnelReportPage() {
 
   if (!funnel || !stats) {
     return (
-      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
         <p className="text-neutral-600 dark:text-neutral-400">Funnel not found</p>
       </div>
     )
@@ -143,7 +143,7 @@ export default function FunnelReportPage() {
   }) : []
 
   return (
-    <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+    <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       <div className="mb-8">
         <div className="flex items-center justify-between mb-6">
           <div className="flex items-center gap-4">
diff --git a/app/sites/[id]/funnels/page.tsx b/app/sites/[id]/funnels/page.tsx
index 42a26da..a22d62c 100644
--- a/app/sites/[id]/funnels/page.tsx
+++ b/app/sites/[id]/funnels/page.tsx
@@ -36,7 +36,7 @@ export default function FunnelsPage() {
   }
 
   return (
-    <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+    <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       <div className="mb-8">
         <div className="flex items-center justify-between mb-6">
           <div>
diff --git a/app/sites/[id]/journeys/page.tsx b/app/sites/[id]/journeys/page.tsx
index 783cb66..5508b77 100644
--- a/app/sites/[id]/journeys/page.tsx
+++ b/app/sites/[id]/journeys/page.tsx
@@ -73,7 +73,7 @@ export default function JourneysPage() {
   const totalSessions = transitionsData?.total_sessions ?? 0
 
   return (
-    <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+    <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx
index 8850c89..47a8208 100644
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -417,14 +417,14 @@ export default function SiteDashboardPage() {
 
   if (!site) {
     return (
-      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
         <p className="text-neutral-600 dark:text-neutral-400">Site not found</p>
       </div>
     )
   }
 
   return (
-    <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+    <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       <div className="mb-6">
         <div className="flex items-center justify-between mb-3">
           <div className="flex items-center gap-4">
diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index 1215eb4..a8cd19d 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -235,7 +235,7 @@ export default function PageSpeedPage() {
   // * Disabled state — show empty state with enable toggle
   if (!enabled) {
     return (
-      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
         {/* Header */}
         <div className="mb-8">
           <h1 className="text-2xl font-bold text-white mb-1">
@@ -357,7 +357,7 @@ export default function PageSpeedPage() {
 
   // * Enabled state — show full PageSpeed dashboard
   return (
-    <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+    <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
@@ -868,7 +868,7 @@ function AuditItem({ item }: { item: Record<string, any> }) {
 // * Skeleton loading state
 function PageSpeedSkeleton() {
   return (
-    <div className="w-full mx-auto px-4 sm:px-6 pb-8 space-y-6 animate-pulse">
+    <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 space-y-6 animate-pulse">
       {/* Header — title + subtitle + toggle buttons */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div className="space-y-2">
diff --git a/app/sites/[id]/search/page.tsx b/app/sites/[id]/search/page.tsx
index 0e79382..32a99e9 100644
--- a/app/sites/[id]/search/page.tsx
+++ b/app/sites/[id]/search/page.tsx
@@ -125,7 +125,7 @@ export default function SearchConsolePage() {
 
   if (showSkeleton) {
     return (
-      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
         <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
           <div>
             <SkeletonLine className="h-8 w-48 mb-2" />
@@ -161,7 +161,7 @@ export default function SearchConsolePage() {
 
   if (gscStatus && !gscStatus.connected) {
     return (
-      <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+      <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
         <div className="flex flex-col items-center justify-center py-24 text-center">
           <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-5 mb-6">
             <MagnifyingGlass size={40} className="text-neutral-400 dark:text-neutral-500" />
@@ -198,7 +198,7 @@ export default function SearchConsolePage() {
   const pagesTotal = topPages?.total ?? 0
 
   return (
-    <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+    <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index 4f95d8d..fe3bfec 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -704,7 +704,7 @@ export default function SiteSettingsPage() {
 
   if (showSkeleton) {
     return (
-      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
         <div className="space-y-8">
           <div>
             <div className="h-8 w-40 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800 mb-2" />
@@ -727,14 +727,14 @@ export default function SiteSettingsPage() {
 
   if (!site) {
     return (
-      <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
         <p className="text-neutral-600 dark:text-neutral-400">Site not found</p>
       </div>
     )
   }
 
   return (
-    <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+    <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
 
       <div className="space-y-8">
         <div>
diff --git a/app/sites/[id]/uptime/page.tsx b/app/sites/[id]/uptime/page.tsx
index 063c684..ead4317 100644
--- a/app/sites/[id]/uptime/page.tsx
+++ b/app/sites/[id]/uptime/page.tsx
@@ -403,7 +403,7 @@ export default function UptimePage() {
   // * Disabled state — show empty state with enable toggle
   if (!uptimeEnabled) {
     return (
-      <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+      <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
         {/* Header */}
         <div className="mb-8">
           <h1 className="text-2xl font-bold text-white mb-1">
@@ -442,7 +442,7 @@ export default function UptimePage() {
 
   // * Enabled state — show uptime dashboard
   return (
-    <div className={`w-full mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+    <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
diff --git a/components/skeletons.tsx b/components/skeletons.tsx
index ce59cb1..e5c4faa 100644
--- a/components/skeletons.tsx
+++ b/components/skeletons.tsx
@@ -122,7 +122,7 @@ export function ChartSkeleton() {
 
 export function DashboardSkeleton() {
   return (
-    <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+    <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
       {/* Header */}
       <div className="mb-8">
         <div className="flex items-center justify-between mb-4">
@@ -170,7 +170,7 @@ export function DashboardSkeleton() {
 
 export function JourneysSkeleton() {
   return (
-    <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+    <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
       {/* Header */}
       <div className="mb-8 flex items-center justify-between">
         <div>
@@ -199,7 +199,7 @@ export function JourneysSkeleton() {
 
 export function UptimeSkeleton() {
   return (
-    <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+    <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
@@ -273,7 +273,7 @@ export function ChecksSkeleton() {
 
 export function FunnelsListSkeleton() {
   return (
-    <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+    <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
       <div className="mb-8">
         <div className="flex items-center gap-4 mb-6">
           <SkeletonLine className="h-10 w-10 rounded-xl" />
@@ -307,7 +307,7 @@ export function FunnelsListSkeleton() {
 
 export function FunnelDetailSkeleton() {
   return (
-    <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+    <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
       <div className="mb-8">
         <SkeletonLine className="h-4 w-32 mb-2" />
         <SkeletonLine className="h-8 w-48 mb-1" />
@@ -395,7 +395,7 @@ export function PricingCardsSkeleton() {
 
 export function BehaviorSkeleton() {
   return (
-    <div className="w-full mx-auto px-4 sm:px-6 pb-8">
+    <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
-- 
2.49.1


From 5eabc52133eec75a8452d1d46551ab0f67cd4dc7 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 23:29:37 +0100
Subject: [PATCH 236/428] fix: sidebar collapse icon bigger (18px) and brighter
 (neutral-400)

---
 components/dashboard/DashboardShell.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 1df8dd4..f3834bb 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -42,10 +42,10 @@ function GlassTopBar({ siteId }: { siteId: string }) {
       {/* Collapse toggle */}
       <button
         onClick={toggle}
-        className="flex items-center justify-center p-1.5 text-neutral-500 hover:text-white rounded-lg hover:bg-white/[0.06] transition-colors"
+        className="flex items-center justify-center p-1.5 text-neutral-400 hover:text-white rounded-lg hover:bg-white/[0.06] transition-colors"
         aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
       >
-        <SidebarSimple className="w-4 h-4" weight={collapsed ? 'regular' : 'fill'} />
+        <SidebarSimple className="w-[18px] h-[18px]" weight={collapsed ? 'regular' : 'fill'} />
       </button>
 
       {/* Realtime indicator */}
-- 
2.49.1


From 4702bb91b9e2257e25c32e2fd640eaaae9217a26 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 23:38:13 +0100
Subject: [PATCH 237/428] =?UTF-8?q?fix:=20top=20bar=20spans=20full=20width?=
 =?UTF-8?q?=20=E2=80=94=20collapse=20icon=20aligns=20above=20sidebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/dashboard/DashboardShell.tsx | 27 +++++++++++++------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index f3834bb..6c1baa0 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -39,7 +39,7 @@ function GlassTopBar({ siteId }: { siteId: string }) {
 
   return (
     <div className="hidden md:flex items-center justify-between h-10 shrink-0 px-3">
-      {/* Collapse toggle */}
+      {/* Collapse toggle — aligned above sidebar */}
       <button
         onClick={toggle}
         className="flex items-center justify-center p-1.5 text-neutral-400 hover:text-white rounded-lg hover:bg-white/[0.06] transition-colors"
@@ -48,9 +48,9 @@ function GlassTopBar({ siteId }: { siteId: string }) {
         <SidebarSimple className="w-[18px] h-[18px]" weight={collapsed ? 'regular' : 'fill'} />
       </button>
 
-      {/* Realtime indicator */}
+      {/* Realtime indicator — aligned above content right edge */}
       {lastUpdatedRef.current != null && (
-        <div className="flex items-center gap-1.5 text-xs text-neutral-500">
+        <div className="flex items-center gap-1.5 text-xs text-neutral-500 mr-2">
           <span className="relative flex h-1.5 w-1.5">
             <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75" />
             <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-green-500" />
@@ -75,16 +75,17 @@ export default function DashboardShell({
 
   return (
     <SidebarProvider>
-      <div className="flex h-screen overflow-hidden bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60">
-        <Sidebar
-          siteId={siteId}
-          mobileOpen={mobileOpen}
-          onMobileClose={closeMobile}
-          onMobileOpen={openMobile}
-        />
-        <div className="flex-1 flex flex-col min-w-0">
-          {/* Glass top bar — collapse toggle + realtime, in the margin above the content panel */}
-          <GlassTopBar siteId={siteId} />
+      <div className="flex flex-col h-screen overflow-hidden bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60">
+        {/* Full-width top bar in glass area */}
+        <GlassTopBar siteId={siteId} />
+        {/* Sidebar + content side by side */}
+        <div className="flex flex-1 min-h-0">
+          <Sidebar
+            siteId={siteId}
+            mobileOpen={mobileOpen}
+            onMobileClose={closeMobile}
+            onMobileOpen={openMobile}
+          />
           {/* Content panel */}
           <div className="flex-1 flex flex-col min-w-0 mr-2 mb-2 rounded-2xl bg-neutral-950 border border-neutral-800/60 overflow-hidden">
             <ContentHeader onMobileMenuOpen={openMobile} />
-- 
2.49.1


From 4e5dd6e3f3ef7e54f94db024b8b3d49d6df2b89e Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 23:40:16 +0100
Subject: [PATCH 238/428] fix: collapse icon uses negative margin to align with
 sidebar icons

---
 components/dashboard/DashboardShell.tsx | 31 ++++++++++++-------------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 6c1baa0..93b2bab 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -38,19 +38,19 @@ function GlassTopBar({ siteId }: { siteId: string }) {
   }, [realtime])
 
   return (
-    <div className="hidden md:flex items-center justify-between h-10 shrink-0 px-3">
-      {/* Collapse toggle — aligned above sidebar */}
+    <div className="hidden md:flex items-center justify-between h-10 shrink-0 pr-3">
+      {/* Collapse toggle — negative margin to align with sidebar icons */}
       <button
         onClick={toggle}
-        className="flex items-center justify-center p-1.5 text-neutral-400 hover:text-white rounded-lg hover:bg-white/[0.06] transition-colors"
+        className="flex items-center justify-center w-10 h-10 -ml-[52px] text-neutral-400 hover:text-white rounded-lg hover:bg-white/[0.06] transition-colors"
         aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
       >
         <SidebarSimple className="w-[18px] h-[18px]" weight={collapsed ? 'regular' : 'fill'} />
       </button>
 
-      {/* Realtime indicator — aligned above content right edge */}
+      {/* Realtime indicator */}
       {lastUpdatedRef.current != null && (
-        <div className="flex items-center gap-1.5 text-xs text-neutral-500 mr-2">
+        <div className="flex items-center gap-1.5 text-xs text-neutral-500">
           <span className="relative flex h-1.5 w-1.5">
             <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75" />
             <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-green-500" />
@@ -75,17 +75,16 @@ export default function DashboardShell({
 
   return (
     <SidebarProvider>
-      <div className="flex flex-col h-screen overflow-hidden bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60">
-        {/* Full-width top bar in glass area */}
-        <GlassTopBar siteId={siteId} />
-        {/* Sidebar + content side by side */}
-        <div className="flex flex-1 min-h-0">
-          <Sidebar
-            siteId={siteId}
-            mobileOpen={mobileOpen}
-            onMobileClose={closeMobile}
-            onMobileOpen={openMobile}
-          />
+      <div className="flex h-screen overflow-hidden bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60">
+        <Sidebar
+          siteId={siteId}
+          mobileOpen={mobileOpen}
+          onMobileClose={closeMobile}
+          onMobileOpen={openMobile}
+        />
+        <div className="flex-1 flex flex-col min-w-0">
+          {/* Glass top bar — above content only, collapse icon reaches back into sidebar column */}
+          <GlassTopBar siteId={siteId} />
           {/* Content panel */}
           <div className="flex-1 flex flex-col min-w-0 mr-2 mb-2 rounded-2xl bg-neutral-950 border border-neutral-800/60 overflow-hidden">
             <ContentHeader onMobileMenuOpen={openMobile} />
-- 
2.49.1


From 132afa749c3e5577921cd69efe5638037b55016b Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 23:44:49 +0100
Subject: [PATCH 239/428] fix: collapse toggle as first sidebar item, realtime
 stays in glass bar

Collapse icon at top of sidebar (aligned with all icons). Glass top
bar now only shows realtime indicator on the right.
---
 components/dashboard/DashboardShell.tsx | 11 +----------
 components/dashboard/Sidebar.tsx        | 23 +++++++++++++++++++----
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 93b2bab..714baca 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -38,16 +38,7 @@ function GlassTopBar({ siteId }: { siteId: string }) {
   }, [realtime])
 
   return (
-    <div className="hidden md:flex items-center justify-between h-10 shrink-0 pr-3">
-      {/* Collapse toggle — negative margin to align with sidebar icons */}
-      <button
-        onClick={toggle}
-        className="flex items-center justify-center w-10 h-10 -ml-[52px] text-neutral-400 hover:text-white rounded-lg hover:bg-white/[0.06] transition-colors"
-        aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-      >
-        <SidebarSimple className="w-[18px] h-[18px]" weight={collapsed ? 'regular' : 'fill'} />
-      </button>
-
+    <div className="hidden md:flex items-center justify-end h-10 shrink-0 px-3">
       {/* Realtime indicator */}
       {lastUpdatedRef.current != null && (
         <div className="flex items-center gap-1.5 text-xs text-neutral-500">
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 8a265f0..99c49dd 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -9,6 +9,7 @@ import { listSites, type Site } from '@/lib/api/sites'
 import { useAuth } from '@/lib/auth/context'
 import { useSettingsModal } from '@/lib/settings-modal-context'
 import { useSidebar } from '@/lib/sidebar-context'
+import { SidebarSimple } from '@phosphor-icons/react'
 // `,` shortcut handled globally by UnifiedSettingsModal
 import { getUserOrganizations, switchContext, type OrganizationMember } from '@/lib/api/organization'
 import { setSessionAction } from '@/app/actions/auth'
@@ -340,6 +341,7 @@ interface SidebarContentProps {
   onMobileClose: () => void
   onExpand: () => void
   onCollapse: () => void
+  onToggle: () => void
   wasCollapsed: React.MutableRefObject<boolean>
   pickerOpenCallbackRef: React.MutableRefObject<(() => void) | null>
   auth: ReturnType<typeof useAuth>
@@ -350,7 +352,7 @@ interface SidebarContentProps {
 
 function SidebarContent({
   isMobile, collapsed, siteId, sites, canEdit, pendingHref,
-  onNavigate, onMobileClose, onExpand, onCollapse,
+  onNavigate, onMobileClose, onExpand, onCollapse, onToggle,
   wasCollapsed, pickerOpenCallbackRef, auth, orgs, onSwitchOrganization, openSettings,
 }: SidebarContentProps) {
   const router = useRouter()
@@ -359,7 +361,20 @@ function SidebarContent({
 
   return (
     <div className="flex flex-col h-full overflow-hidden">
-      {/* App Switcher — top of sidebar (scope-level switch) */}
+      {/* Collapse toggle — first item, aligned with all other sidebar icons */}
+      {!isMobile && (
+        <div className="flex items-center gap-2.5 px-[14px] pt-3 pb-0 shrink-0 overflow-hidden">
+          <button
+            onClick={onToggle}
+            className="w-9 h-9 flex items-center justify-center shrink-0 text-neutral-400 hover:text-white rounded-lg hover:bg-white/[0.06] transition-colors"
+            aria-label={c ? 'Expand sidebar' : 'Collapse sidebar'}
+          >
+            <SidebarSimple className="w-[18px] h-[18px]" weight={c ? 'regular' : 'fill'} />
+          </button>
+        </div>
+      )}
+
+      {/* App Switcher — scope-level switch */}
       <div className="flex items-center gap-2.5 px-[14px] pt-3 pb-1 shrink-0 overflow-hidden">
         <span className="w-9 h-9 flex items-center justify-center shrink-0">
           <AppLauncher apps={CIPHERA_APPS} currentAppId="pulse" anchor="right" />
@@ -525,7 +540,7 @@ export default function Sidebar({
           onMobileClose={onMobileClose}
           onExpand={expand}
           onCollapse={collapse}
-
+          onToggle={toggle}
           wasCollapsed={wasCollapsedRef}
           pickerOpenCallbackRef={pickerOpenCallbackRef}
           auth={auth}
@@ -568,7 +583,7 @@ export default function Sidebar({
               onMobileClose={handleMobileClose}
               onExpand={expand}
               onCollapse={collapse}
-    
+              onToggle={toggle}
               wasCollapsed={wasCollapsedRef}
               pickerOpenCallbackRef={pickerOpenCallbackRef}
               auth={auth}
-- 
2.49.1


From 9aacd63d1d2c7199faa701788381aed5dafb9e00 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 23:53:44 +0100
Subject: [PATCH 240/428] fix: collapse toggle back in glass top bar, removed
 from sidebar

---
 components/dashboard/DashboardShell.tsx | 11 ++++++++++-
 components/dashboard/Sidebar.tsx        | 15 +--------------
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 714baca..8432d82 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -38,7 +38,16 @@ function GlassTopBar({ siteId }: { siteId: string }) {
   }, [realtime])
 
   return (
-    <div className="hidden md:flex items-center justify-end h-10 shrink-0 px-3">
+    <div className="hidden md:flex items-center justify-between h-10 shrink-0 px-3">
+      {/* Collapse toggle */}
+      <button
+        onClick={toggle}
+        className="flex items-center justify-center p-1.5 text-neutral-400 hover:text-white rounded-lg hover:bg-white/[0.06] transition-colors"
+        aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+      >
+        <SidebarSimple className="w-[18px] h-[18px]" weight={collapsed ? 'regular' : 'fill'} />
+      </button>
+
       {/* Realtime indicator */}
       {lastUpdatedRef.current != null && (
         <div className="flex items-center gap-1.5 text-xs text-neutral-500">
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 99c49dd..fe7e5ac 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -361,20 +361,7 @@ function SidebarContent({
 
   return (
     <div className="flex flex-col h-full overflow-hidden">
-      {/* Collapse toggle — first item, aligned with all other sidebar icons */}
-      {!isMobile && (
-        <div className="flex items-center gap-2.5 px-[14px] pt-3 pb-0 shrink-0 overflow-hidden">
-          <button
-            onClick={onToggle}
-            className="w-9 h-9 flex items-center justify-center shrink-0 text-neutral-400 hover:text-white rounded-lg hover:bg-white/[0.06] transition-colors"
-            aria-label={c ? 'Expand sidebar' : 'Collapse sidebar'}
-          >
-            <SidebarSimple className="w-[18px] h-[18px]" weight={c ? 'regular' : 'fill'} />
-          </button>
-        </div>
-      )}
-
-      {/* App Switcher — scope-level switch */}
+      {/* App Switcher — top of sidebar (scope-level switch) */}
       <div className="flex items-center gap-2.5 px-[14px] pt-3 pb-1 shrink-0 overflow-hidden">
         <span className="w-9 h-9 flex items-center justify-center shrink-0">
           <AppLauncher apps={CIPHERA_APPS} currentAppId="pulse" anchor="right" />
-- 
2.49.1


From 540c0b51ca7e5703a7e12c49ea847377b4cb4189 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Tue, 24 Mar 2026 23:56:30 +0100
Subject: [PATCH 241/428] fix: remove duplicate realtime indicator from under
 chart

---
 components/dashboard/Chart.tsx | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index 5a41b30..9eceb86 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -543,16 +543,6 @@ export default function Chart({
                 </>
               )}
             </div>
-            {/* Live indicator right */}
-            {lastUpdatedAt != null && (
-              <div className="flex items-center gap-1.5 text-[11px] text-neutral-400 dark:text-neutral-500">
-                <span className="relative flex h-1.5 w-1.5">
-                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75" />
-                  <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-green-500" />
-                </span>
-                Live · {formatUpdatedAgo(lastUpdatedAt)}
-              </div>
-            )}
           </div>
         )}
       </Card>
-- 
2.49.1


From 953d828cd96cd4072d6094a8a1e16d57c9534ea3 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 16:39:53 +0100
Subject: [PATCH 242/428] fix: align collapse toggle with sidebar AppLauncher
 row (Dokploy-style)

---
 components/dashboard/DashboardShell.tsx | 6 +++---
 components/dashboard/Sidebar.tsx        | 1 -
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 8432d82..6d091bb 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -38,11 +38,11 @@ function GlassTopBar({ siteId }: { siteId: string }) {
   }, [realtime])
 
   return (
-    <div className="hidden md:flex items-center justify-between h-10 shrink-0 px-3">
-      {/* Collapse toggle */}
+    <div className="hidden md:flex items-center justify-between shrink-0 px-3 pt-3 pb-1">
+      {/* Collapse toggle — mirrors sidebar AppLauncher row sizing for pixel alignment */}
       <button
         onClick={toggle}
-        className="flex items-center justify-center p-1.5 text-neutral-400 hover:text-white rounded-lg hover:bg-white/[0.06] transition-colors"
+        className="w-9 h-9 flex items-center justify-center text-neutral-400 hover:text-white rounded-lg hover:bg-white/[0.06] transition-colors"
         aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
       >
         <SidebarSimple className="w-[18px] h-[18px]" weight={collapsed ? 'regular' : 'fill'} />
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index fe7e5ac..f31d5b8 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -9,7 +9,6 @@ import { listSites, type Site } from '@/lib/api/sites'
 import { useAuth } from '@/lib/auth/context'
 import { useSettingsModal } from '@/lib/settings-modal-context'
 import { useSidebar } from '@/lib/sidebar-context'
-import { SidebarSimple } from '@phosphor-icons/react'
 // `,` shortcut handled globally by UnifiedSettingsModal
 import { getUserOrganizations, switchContext, type OrganizationMember } from '@/lib/api/organization'
 import { setSessionAction } from '@/app/actions/auth'
-- 
2.49.1


From e39c10d50fabdede073d9bfb0b413fddf8dfcc1e Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 16:44:42 +0100
Subject: [PATCH 243/428] =?UTF-8?q?fix:=20reduce=20top=20bar=20padding=20?=
 =?UTF-8?q?=E2=80=94=20pt-1.5=20instead=20of=20pt-3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/dashboard/DashboardShell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 6d091bb..17160e8 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -38,7 +38,7 @@ function GlassTopBar({ siteId }: { siteId: string }) {
   }, [realtime])
 
   return (
-    <div className="hidden md:flex items-center justify-between shrink-0 px-3 pt-3 pb-1">
+    <div className="hidden md:flex items-center justify-between shrink-0 px-3 pt-1.5 pb-1">
       {/* Collapse toggle — mirrors sidebar AppLauncher row sizing for pixel alignment */}
       <button
         onClick={toggle}
-- 
2.49.1


From 24858030bae5066555aca608377daf8fabf6ab5d Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 16:47:42 +0100
Subject: [PATCH 244/428] =?UTF-8?q?fix:=20align=20AppLauncher=20with=20col?=
 =?UTF-8?q?lapse=20toggle=20=E2=80=94=20pt-1.5=20on=20both=20sides?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/dashboard/Sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index f31d5b8..91f0a62 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -361,7 +361,7 @@ function SidebarContent({
   return (
     <div className="flex flex-col h-full overflow-hidden">
       {/* App Switcher — top of sidebar (scope-level switch) */}
-      <div className="flex items-center gap-2.5 px-[14px] pt-3 pb-1 shrink-0 overflow-hidden">
+      <div className="flex items-center gap-2.5 px-[14px] pt-1.5 pb-1 shrink-0 overflow-hidden">
         <span className="w-9 h-9 flex items-center justify-center shrink-0">
           <AppLauncher apps={CIPHERA_APPS} currentAppId="pulse" anchor="right" />
         </span>
-- 
2.49.1


From 1aeb9cf2751b494625eb5b9f835195aac30933e0 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 17:06:21 +0100
Subject: [PATCH 245/428] feat: page title in top bar next to collapse toggle

---
 components/dashboard/DashboardShell.tsx | 41 ++++++++++++++++++++-----
 1 file changed, 33 insertions(+), 8 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 17160e8..5f301fb 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -2,12 +2,32 @@
 
 import { useState, useCallback, useEffect, useRef } from 'react'
 import dynamic from 'next/dynamic'
+import { usePathname } from 'next/navigation'
 import { formatUpdatedAgo } from '@ciphera-net/ui'
 import { SidebarSimple } from '@phosphor-icons/react'
 import { SidebarProvider, useSidebar } from '@/lib/sidebar-context'
 import { useRealtime } from '@/lib/swr/dashboard'
 import ContentHeader from './ContentHeader'
 
+const PAGE_TITLES: Record<string, string> = {
+  '': 'Dashboard',
+  journeys: 'Journeys',
+  funnels: 'Funnels',
+  behavior: 'Behavior',
+  search: 'Search',
+  cdn: 'CDN',
+  uptime: 'Uptime',
+  pagespeed: 'PageSpeed',
+  settings: 'Site Settings',
+}
+
+function usePageTitle() {
+  const pathname = usePathname()
+  // pathname is /sites/:id or /sites/:id/section/...
+  const segment = pathname.replace(/^\/sites\/[^/]+\/?/, '').split('/')[0]
+  return PAGE_TITLES[segment] ?? segment.charAt(0).toUpperCase() + segment.slice(1) || 'Dashboard'
+}
+
 // Load sidebar only on the client — prevents SSR flash
 const Sidebar = dynamic(() => import('./Sidebar'), {
   ssr: false,
@@ -37,16 +57,21 @@ function GlassTopBar({ siteId }: { siteId: string }) {
     return () => clearInterval(timer)
   }, [realtime])
 
+  const pageTitle = usePageTitle()
+
   return (
     <div className="hidden md:flex items-center justify-between shrink-0 px-3 pt-1.5 pb-1">
-      {/* Collapse toggle — mirrors sidebar AppLauncher row sizing for pixel alignment */}
-      <button
-        onClick={toggle}
-        className="w-9 h-9 flex items-center justify-center text-neutral-400 hover:text-white rounded-lg hover:bg-white/[0.06] transition-colors"
-        aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-      >
-        <SidebarSimple className="w-[18px] h-[18px]" weight={collapsed ? 'regular' : 'fill'} />
-      </button>
+      {/* Left: collapse toggle + page title */}
+      <div className="flex items-center gap-1.5">
+        <button
+          onClick={toggle}
+          className="w-9 h-9 flex items-center justify-center text-neutral-400 hover:text-white rounded-lg hover:bg-white/[0.06] transition-colors"
+          aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+        >
+          <SidebarSimple className="w-[18px] h-[18px]" weight={collapsed ? 'regular' : 'fill'} />
+        </button>
+        <span className="text-sm text-neutral-400 font-medium">{pageTitle}</span>
+      </div>
 
       {/* Realtime indicator */}
       {lastUpdatedRef.current != null && (
-- 
2.49.1


From b78f5d4b96d24df6c5757a9e267aff1be2064278 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 17:07:55 +0100
Subject: [PATCH 246/428] fix: add parens around nullish coalescing mixed with
 logical OR

---
 components/dashboard/DashboardShell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 5f301fb..20b36db 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -25,7 +25,7 @@ function usePageTitle() {
   const pathname = usePathname()
   // pathname is /sites/:id or /sites/:id/section/...
   const segment = pathname.replace(/^\/sites\/[^/]+\/?/, '').split('/')[0]
-  return PAGE_TITLES[segment] ?? segment.charAt(0).toUpperCase() + segment.slice(1) || 'Dashboard'
+  return PAGE_TITLES[segment] ?? (segment ? segment.charAt(0).toUpperCase() + segment.slice(1) : 'Dashboard')
 }
 
 // Load sidebar only on the client — prevents SSR flash
-- 
2.49.1


From 48b404eb3733c4792d8c2c23b50c8f457fe0e2b4 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 17:11:48 +0100
Subject: [PATCH 247/428] =?UTF-8?q?fix:=20remove=20duplicate=20h1=20from?=
 =?UTF-8?q?=20uptime=20page=20=E2=80=94=20title=20now=20in=20top=20bar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/sites/[id]/uptime/page.tsx | 26 ++++++++------------------
 1 file changed, 8 insertions(+), 18 deletions(-)

diff --git a/app/sites/[id]/uptime/page.tsx b/app/sites/[id]/uptime/page.tsx
index ead4317..1b7c709 100644
--- a/app/sites/[id]/uptime/page.tsx
+++ b/app/sites/[id]/uptime/page.tsx
@@ -404,15 +404,10 @@ export default function UptimePage() {
   if (!uptimeEnabled) {
     return (
       <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
-        {/* Header */}
-        <div className="mb-8">
-          <h1 className="text-2xl font-bold text-white mb-1">
-            Uptime
-          </h1>
-          <p className="text-sm text-neutral-400">
-            Monitor your site&apos;s availability and response time
-          </p>
-        </div>
+        {/* Description */}
+        <p className="text-sm text-neutral-400 mb-8">
+          Monitor your site&apos;s availability and response time
+        </p>
 
         {/* Empty state */}
         <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-12 text-center">
@@ -443,16 +438,11 @@ export default function UptimePage() {
   // * Enabled state — show uptime dashboard
   return (
     <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
-      {/* Header */}
+      {/* Description + action */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-        <div>
-          <h1 className="text-2xl font-bold text-white mb-1">
-            Uptime
-          </h1>
-          <p className="text-sm text-neutral-400">
-            Monitor your site&apos;s availability and response time
-          </p>
-        </div>
+        <p className="text-sm text-neutral-400">
+          Monitor your site&apos;s availability and response time
+        </p>
         {canEdit && (
           <Button
             variant="secondary"
-- 
2.49.1


From 294629edfecd8473be8cb1d32d912db7620d3a33 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 17:17:12 +0100
Subject: [PATCH 248/428] =?UTF-8?q?fix:=20downsize=20all=20page=20h1=20hea?=
 =?UTF-8?q?ders=20=E2=80=94=20top=20bar=20now=20has=20primary=20title?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/sites/[id]/behavior/page.tsx           |  2 +-
 app/sites/[id]/cdn/page.tsx                |  2 +-
 app/sites/[id]/funnels/[funnelId]/page.tsx |  2 +-
 app/sites/[id]/funnels/page.tsx            |  2 +-
 app/sites/[id]/journeys/page.tsx           |  2 +-
 app/sites/[id]/page.tsx                    |  2 +-
 app/sites/[id]/pagespeed/page.tsx          |  4 ++--
 app/sites/[id]/search/page.tsx             |  2 +-
 app/sites/[id]/settings/page.tsx           |  2 +-
 app/sites/[id]/uptime/page.tsx             | 26 +++++++++++++++-------
 10 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/app/sites/[id]/behavior/page.tsx b/app/sites/[id]/behavior/page.tsx
index 8b5e2b4..84aeffd 100644
--- a/app/sites/[id]/behavior/page.tsx
+++ b/app/sites/[id]/behavior/page.tsx
@@ -60,7 +60,7 @@ export default function BehaviorPage() {
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-bold text-white mb-1">
+          <h1 className="text-lg font-semibold text-neutral-200 mb-1">
             Behavior
           </h1>
           <p className="text-sm text-neutral-400">
diff --git a/app/sites/[id]/cdn/page.tsx b/app/sites/[id]/cdn/page.tsx
index c8b8f96..594c431 100644
--- a/app/sites/[id]/cdn/page.tsx
+++ b/app/sites/[id]/cdn/page.tsx
@@ -212,7 +212,7 @@ export default function CDNPage() {
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-bold text-white mb-1">
+          <h1 className="text-lg font-semibold text-neutral-200 mb-1">
             CDN Analytics
           </h1>
           <p className="text-sm text-neutral-400">
diff --git a/app/sites/[id]/funnels/[funnelId]/page.tsx b/app/sites/[id]/funnels/[funnelId]/page.tsx
index 7c43443..289eabe 100644
--- a/app/sites/[id]/funnels/[funnelId]/page.tsx
+++ b/app/sites/[id]/funnels/[funnelId]/page.tsx
@@ -154,7 +154,7 @@ export default function FunnelReportPage() {
               <ChevronLeftIcon className="w-5 h-5" />
             </Link>
             <div>
-              <h1 className="text-2xl font-bold text-white">
+              <h1 className="text-lg font-semibold text-neutral-200">
                 {funnel.name}
               </h1>
               {funnel.description && (
diff --git a/app/sites/[id]/funnels/page.tsx b/app/sites/[id]/funnels/page.tsx
index a22d62c..bac90c8 100644
--- a/app/sites/[id]/funnels/page.tsx
+++ b/app/sites/[id]/funnels/page.tsx
@@ -40,7 +40,7 @@ export default function FunnelsPage() {
       <div className="mb-8">
         <div className="flex items-center justify-between mb-6">
           <div>
-            <h1 className="text-2xl font-bold text-white">
+            <h1 className="text-lg font-semibold text-neutral-200">
               Funnels
             </h1>
             <p className="text-neutral-600 dark:text-neutral-400">
diff --git a/app/sites/[id]/journeys/page.tsx b/app/sites/[id]/journeys/page.tsx
index 5508b77..3846e56 100644
--- a/app/sites/[id]/journeys/page.tsx
+++ b/app/sites/[id]/journeys/page.tsx
@@ -77,7 +77,7 @@ export default function JourneysPage() {
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-bold text-white mb-1">
+          <h1 className="text-lg font-semibold text-neutral-200 mb-1">
             Journeys
           </h1>
           <p className="text-sm text-neutral-400">
diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx
index 47a8208..1d34768 100644
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -429,7 +429,7 @@ export default function SiteDashboardPage() {
         <div className="flex items-center justify-between mb-3">
           <div className="flex items-center gap-4">
             <div>
-              <h1 className="text-2xl font-bold text-white mb-1">
+              <h1 className="text-lg font-semibold text-neutral-200 mb-1">
                 {site.name}
               </h1>
               <p className="text-neutral-600 dark:text-neutral-400">
diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index a8cd19d..8980d2e 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -238,7 +238,7 @@ export default function PageSpeedPage() {
       <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
         {/* Header */}
         <div className="mb-8">
-          <h1 className="text-2xl font-bold text-white mb-1">
+          <h1 className="text-lg font-semibold text-neutral-200 mb-1">
             PageSpeed
           </h1>
           <p className="text-sm text-neutral-400">
@@ -361,7 +361,7 @@ export default function PageSpeedPage() {
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-bold text-white mb-1">
+          <h1 className="text-lg font-semibold text-neutral-200 mb-1">
             PageSpeed
           </h1>
           <p className="text-sm text-neutral-400">
diff --git a/app/sites/[id]/search/page.tsx b/app/sites/[id]/search/page.tsx
index 32a99e9..bc2a444 100644
--- a/app/sites/[id]/search/page.tsx
+++ b/app/sites/[id]/search/page.tsx
@@ -202,7 +202,7 @@ export default function SearchConsolePage() {
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-bold text-white mb-1">
+          <h1 className="text-lg font-semibold text-neutral-200 mb-1">
             Search Console
           </h1>
           <p className="text-sm text-neutral-400">
diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index fe3bfec..6182b99 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -738,7 +738,7 @@ export default function SiteSettingsPage() {
 
       <div className="space-y-8">
         <div>
-          <h1 className="text-2xl font-bold text-white">Site Settings</h1>
+          <h1 className="text-lg font-semibold text-neutral-200">Site Settings</h1>
           <p className="mt-2 text-neutral-600 dark:text-neutral-400">
             Manage settings for <span className="font-medium text-white">{site.domain}</span>
           </p>
diff --git a/app/sites/[id]/uptime/page.tsx b/app/sites/[id]/uptime/page.tsx
index 1b7c709..487b05e 100644
--- a/app/sites/[id]/uptime/page.tsx
+++ b/app/sites/[id]/uptime/page.tsx
@@ -404,10 +404,15 @@ export default function UptimePage() {
   if (!uptimeEnabled) {
     return (
       <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
-        {/* Description */}
-        <p className="text-sm text-neutral-400 mb-8">
-          Monitor your site&apos;s availability and response time
-        </p>
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-lg font-semibold text-neutral-200 mb-1">
+            Uptime
+          </h1>
+          <p className="text-sm text-neutral-400">
+            Monitor your site&apos;s availability and response time
+          </p>
+        </div>
 
         {/* Empty state */}
         <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-12 text-center">
@@ -438,11 +443,16 @@ export default function UptimePage() {
   // * Enabled state — show uptime dashboard
   return (
     <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
-      {/* Description + action */}
+      {/* Header + action */}
       <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-        <p className="text-sm text-neutral-400">
-          Monitor your site&apos;s availability and response time
-        </p>
+        <div>
+          <h1 className="text-lg font-semibold text-neutral-200 mb-1">
+            Uptime
+          </h1>
+          <p className="text-sm text-neutral-400">
+            Monitor your site&apos;s availability and response time
+          </p>
+        </div>
         {canEdit && (
           <Button
             variant="secondary"
-- 
2.49.1


From 45a8adff0fa963bfc7c9a1b8b57ac5d30aec4856 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 17:38:47 +0100
Subject: [PATCH 249/428] feat(settings): add danger zone to unified site
 general tab

---
 .../settings/unified/tabs/SiteGeneralTab.tsx  | 75 ++++++++++++++++++-
 1 file changed, 73 insertions(+), 2 deletions(-)

diff --git a/components/settings/unified/tabs/SiteGeneralTab.tsx b/components/settings/unified/tabs/SiteGeneralTab.tsx
index b6c0e9e..d88c245 100644
--- a/components/settings/unified/tabs/SiteGeneralTab.tsx
+++ b/components/settings/unified/tabs/SiteGeneralTab.tsx
@@ -1,10 +1,14 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { Input, Button, Select, toast, Spinner } from '@ciphera-net/ui'
+import { useRouter } from 'next/navigation'
+import { Input, Button, Select, toast, Spinner, getAuthErrorMessage } from '@ciphera-net/ui'
 import { Copy, CheckCircle } from '@phosphor-icons/react'
 import { useSite } from '@/lib/swr/dashboard'
-import { updateSite } from '@/lib/api/sites'
+import { updateSite, resetSiteData } from '@/lib/api/sites'
+import { useAuth } from '@/lib/auth/context'
+import { useUnifiedSettings } from '@/lib/unified-settings-context'
+import DeleteSiteModal from '@/components/sites/DeleteSiteModal'
 
 const TIMEZONES = [
   { value: 'UTC', label: 'UTC' },
@@ -27,11 +31,17 @@ const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8082'
 const APP_URL = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3003'
 
 export default function SiteGeneralTab({ siteId }: { siteId: string }) {
+  const router = useRouter()
+  const { user } = useAuth()
+  const { closeUnifiedSettings: closeSettings } = useUnifiedSettings()
   const { data: site, mutate } = useSite(siteId)
   const [name, setName] = useState('')
   const [timezone, setTimezone] = useState('UTC')
   const [saving, setSaving] = useState(false)
   const [copied, setCopied] = useState(false)
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
+
+  const canEdit = user?.role === 'owner' || user?.role === 'admin'
 
   useEffect(() => {
     if (site) {
@@ -54,6 +64,16 @@ export default function SiteGeneralTab({ siteId }: { siteId: string }) {
     }
   }
 
+  const handleResetData = async () => {
+    if (!confirm('Are you sure you want to delete ALL data for this site? This action cannot be undone.')) return
+    try {
+      await resetSiteData(siteId)
+      toast.success('All site data has been reset')
+    } catch (error: unknown) {
+      toast.error(getAuthErrorMessage(error) || 'Failed to reset site data')
+    }
+  }
+
   const trackingScript = `<script defer data-domain="${site?.domain || ''}" data-api="${API_URL}" src="${APP_URL}/script.js"></script>`
   const frustrationScript = `<script defer src="${APP_URL}/script.frustration.js"></script>`
 
@@ -132,6 +152,57 @@ export default function SiteGeneralTab({ siteId }: { siteId: string }) {
           {saving ? 'Saving...' : 'Save Changes'}
         </Button>
       </div>
+
+      {/* Danger Zone */}
+      {canEdit && (
+        <div className="space-y-4 pt-4 border-t border-neutral-800">
+          <div>
+            <h3 className="text-lg font-semibold text-red-600 dark:text-red-500 mb-1">Danger Zone</h3>
+            <p className="text-sm text-neutral-400">Irreversible actions for your site.</p>
+          </div>
+
+          <div className="p-4 border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-900/10 rounded-2xl">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="font-medium text-red-900 dark:text-red-300">Reset Data</p>
+                <p className="text-sm text-neutral-500 dark:text-neutral-400">Delete all stats and events. This cannot be undone.</p>
+              </div>
+              <button
+                type="button"
+                onClick={handleResetData}
+                className="px-4 py-2 bg-white dark:bg-neutral-900 border border-red-200 dark:border-red-900 text-red-600 dark:text-red-400 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 text-sm font-medium"
+              >
+                Reset Data
+              </button>
+            </div>
+          </div>
+
+          <div className="p-4 border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-900/10 rounded-2xl">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="font-medium text-red-900 dark:text-red-300">Delete Site</p>
+                <p className="text-sm text-neutral-500 dark:text-neutral-400">Schedule this site for deletion with a 7-day grace period.</p>
+              </div>
+              <button
+                type="button"
+                onClick={() => setShowDeleteModal(true)}
+                className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-medium"
+              >
+                Delete Site...
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <DeleteSiteModal
+        open={showDeleteModal}
+        onClose={() => setShowDeleteModal(false)}
+        onDeleted={() => { router.push('/'); closeSettings(); }}
+        siteName={site?.name || ''}
+        siteDomain={site?.domain || ''}
+        siteId={siteId}
+      />
     </div>
   )
 }
-- 
2.49.1


From 4e6837a9ee30a047dac9b5e6a20ea6cd977be17a Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 17:42:34 +0100
Subject: [PATCH 250/428] feat(settings): add framework picker and verification
 to unified general tab

---
 .../settings/unified/tabs/SiteGeneralTab.tsx  | 80 ++++++++++++-------
 1 file changed, 51 insertions(+), 29 deletions(-)

diff --git a/components/settings/unified/tabs/SiteGeneralTab.tsx b/components/settings/unified/tabs/SiteGeneralTab.tsx
index d88c245..eb91777 100644
--- a/components/settings/unified/tabs/SiteGeneralTab.tsx
+++ b/components/settings/unified/tabs/SiteGeneralTab.tsx
@@ -2,13 +2,14 @@
 
 import { useState, useEffect } from 'react'
 import { useRouter } from 'next/navigation'
-import { Input, Button, Select, toast, Spinner, getAuthErrorMessage } from '@ciphera-net/ui'
-import { Copy, CheckCircle } from '@phosphor-icons/react'
+import { Input, Button, Select, toast, Spinner, getAuthErrorMessage, CheckIcon, ZapIcon } from '@ciphera-net/ui'
 import { useSite } from '@/lib/swr/dashboard'
 import { updateSite, resetSiteData } from '@/lib/api/sites'
 import { useAuth } from '@/lib/auth/context'
 import { useUnifiedSettings } from '@/lib/unified-settings-context'
 import DeleteSiteModal from '@/components/sites/DeleteSiteModal'
+import ScriptSetupBlock from '@/components/sites/ScriptSetupBlock'
+import VerificationModal from '@/components/sites/VerificationModal'
 
 const TIMEZONES = [
   { value: 'UTC', label: 'UTC' },
@@ -27,9 +28,6 @@ const TIMEZONES = [
   { value: 'Australia/Sydney', label: 'Australia/Sydney (AEST)' },
 ]
 
-const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8082'
-const APP_URL = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3003'
-
 export default function SiteGeneralTab({ siteId }: { siteId: string }) {
   const router = useRouter()
   const { user } = useAuth()
@@ -38,8 +36,8 @@ export default function SiteGeneralTab({ siteId }: { siteId: string }) {
   const [name, setName] = useState('')
   const [timezone, setTimezone] = useState('UTC')
   const [saving, setSaving] = useState(false)
-  const [copied, setCopied] = useState(false)
   const [showDeleteModal, setShowDeleteModal] = useState(false)
+  const [showVerificationModal, setShowVerificationModal] = useState(false)
 
   const canEdit = user?.role === 'owner' || user?.role === 'admin'
 
@@ -74,16 +72,6 @@ export default function SiteGeneralTab({ siteId }: { siteId: string }) {
     }
   }
 
-  const trackingScript = `<script defer data-domain="${site?.domain || ''}" data-api="${API_URL}" src="${APP_URL}/script.js"></script>`
-  const frustrationScript = `<script defer src="${APP_URL}/script.frustration.js"></script>`
-
-  const copyScript = () => {
-    navigator.clipboard.writeText(trackingScript + '\n' + frustrationScript)
-    setCopied(true)
-    toast.success('Copied to clipboard')
-    setTimeout(() => setCopied(false), 2000)
-  }
-
   if (!site) {
     return (
       <div className="flex items-center justify-center py-12">
@@ -129,21 +117,48 @@ export default function SiteGeneralTab({ siteId }: { siteId: string }) {
       <div className="space-y-3">
         <div>
           <h3 className="text-base font-semibold text-white mb-1">Tracking Script</h3>
-          <p className="text-sm text-neutral-400">Add this to your website to start tracking visitors.</p>
+          <p className="text-sm text-neutral-400">Add this to your website to start tracking visitors. Choose your framework for setup instructions.</p>
         </div>
 
-        <div className="relative rounded-xl bg-neutral-950 border border-neutral-800 p-4 overflow-x-auto">
-          <pre className="text-xs text-neutral-300 font-mono leading-relaxed whitespace-pre-wrap break-all pr-16">
-            {trackingScript}{'\n'}{frustrationScript}
-          </pre>
-          <button
-            onClick={copyScript}
-            className="absolute top-3 right-3 flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-lg bg-brand-orange/10 text-brand-orange hover:bg-brand-orange/20 transition-colors"
-          >
-            {copied ? <CheckCircle weight="bold" className="w-3.5 h-3.5" /> : <Copy weight="bold" className="w-3.5 h-3.5" />}
-            {copied ? 'Copied' : 'Copy'}
-          </button>
-        </div>
+        <ScriptSetupBlock
+          site={{ domain: site.domain, name: site.name, script_features: site.script_features }}
+          showFrameworkPicker
+          className="mb-4"
+          onFeaturesChange={async (features) => {
+            try {
+              await updateSite(siteId, { name: site.name, timezone: site.timezone, script_features: features })
+              await mutate()
+            } catch {
+              toast.error('Failed to update script features')
+            }
+          }}
+        />
+
+        {/* Verify Installation */}
+        <button
+          type="button"
+          onClick={() => setShowVerificationModal(true)}
+          className={`inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-xl border transition-colors ${
+            site.is_verified
+              ? 'bg-green-50 dark:bg-green-900/10 border-green-200 dark:border-green-900/30 text-green-700 dark:text-green-400'
+              : 'bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-700'
+          }`}
+        >
+          {site.is_verified ? (
+            <>
+              <CheckIcon className="w-4 h-4" />
+              Verified
+            </>
+          ) : (
+            <>
+              <ZapIcon className="w-4 h-4" />
+              Verify Installation
+            </>
+          )}
+        </button>
+        <p className="text-xs text-neutral-500">
+          {site.is_verified ? 'Your site is sending data correctly.' : 'Check if your site is sending data correctly.'}
+        </p>
       </div>
 
       {/* Save */}
@@ -203,6 +218,13 @@ export default function SiteGeneralTab({ siteId }: { siteId: string }) {
         siteDomain={site?.domain || ''}
         siteId={siteId}
       />
+
+      <VerificationModal
+        isOpen={showVerificationModal}
+        onClose={() => setShowVerificationModal(false)}
+        site={site}
+        onVerified={() => mutate()}
+      />
     </div>
   )
 }
-- 
2.49.1


From d0d7a9710226ebc54458371a22a875fbafd9fbb3 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 17:46:06 +0100
Subject: [PATCH 251/428] feat(settings): add retention, excluded paths,
 pagespeed to unified privacy tab

---
 .../settings/unified/tabs/SitePrivacyTab.tsx  | 135 +++++++++++++++++-
 1 file changed, 128 insertions(+), 7 deletions(-)

diff --git a/components/settings/unified/tabs/SitePrivacyTab.tsx b/components/settings/unified/tabs/SitePrivacyTab.tsx
index 1f1e2b2..1834578 100644
--- a/components/settings/unified/tabs/SitePrivacyTab.tsx
+++ b/components/settings/unified/tabs/SitePrivacyTab.tsx
@@ -2,8 +2,13 @@
 
 import { useState, useEffect } from 'react'
 import { Button, Select, Toggle, toast, Spinner } from '@ciphera-net/ui'
-import { useSite } from '@/lib/swr/dashboard'
+import { useSite, useSubscription, usePageSpeedConfig } from '@/lib/swr/dashboard'
 import { updateSite } from '@/lib/api/sites'
+import { updatePageSpeedConfig } from '@/lib/api/pagespeed'
+import { getRetentionOptionsForPlan, formatRetentionMonths } from '@/lib/plans'
+import { generatePrivacySnippet } from '@/lib/utils/privacySnippet'
+import { Copy, CheckCircle } from '@phosphor-icons/react'
+import Link from 'next/link'
 
 const GEO_OPTIONS = [
   { value: 'full', label: 'Full (country, region, city)' },
@@ -13,6 +18,8 @@ const GEO_OPTIONS = [
 
 export default function SitePrivacyTab({ siteId }: { siteId: string }) {
   const { data: site, mutate } = useSite(siteId)
+  const { data: subscription, error: subscriptionError, mutate: mutateSubscription } = useSubscription()
+  const { data: psiConfig, mutate: mutatePSIConfig } = usePageSpeedConfig(siteId)
   const [collectPagePaths, setCollectPagePaths] = useState(true)
   const [collectReferrers, setCollectReferrers] = useState(true)
   const [collectDeviceInfo, setCollectDeviceInfo] = useState(true)
@@ -20,6 +27,8 @@ export default function SitePrivacyTab({ siteId }: { siteId: string }) {
   const [collectGeoData, setCollectGeoData] = useState('full')
   const [hideUnknownLocations, setHideUnknownLocations] = useState(false)
   const [dataRetention, setDataRetention] = useState(6)
+  const [excludedPaths, setExcludedPaths] = useState('')
+  const [snippetCopied, setSnippetCopied] = useState(false)
   const [saving, setSaving] = useState(false)
 
   useEffect(() => {
@@ -31,6 +40,7 @@ export default function SitePrivacyTab({ siteId }: { siteId: string }) {
       setCollectGeoData(site.collect_geo_data ?? 'full')
       setHideUnknownLocations(site.hide_unknown_locations ?? false)
       setDataRetention(site.data_retention_months ?? 6)
+      setExcludedPaths((site.excluded_paths || []).join('\n'))
     }
   }, [site])
 
@@ -45,6 +55,8 @@ export default function SitePrivacyTab({ siteId }: { siteId: string }) {
         collect_screen_resolution: collectScreenRes,
         collect_geo_data: collectGeoData as 'full' | 'country' | 'none',
         hide_unknown_locations: hideUnknownLocations,
+        data_retention_months: dataRetention,
+        excluded_paths: excludedPaths.split('\n').map(p => p.trim()).filter(Boolean),
       })
       await mutate()
       toast.success('Privacy settings updated')
@@ -93,12 +105,121 @@ export default function SitePrivacyTab({ siteId }: { siteId: string }) {
         <p className="text-xs text-neutral-500 mt-1">Controls location granularity. "Disabled" collects no geographic data at all.</p>
       </div>
 
-      <div>
-        <label className="block text-sm font-medium text-neutral-300 mb-1.5">Data retention</label>
-        <p className="text-sm text-neutral-400">
-          Currently retaining data for <span className="font-medium text-white">{dataRetention} months</span>.
-          Manage retention in the full <a href={`/sites/${siteId}/settings`} className="text-brand-orange hover:underline">site settings</a>.
-        </p>
+      {/* Data Retention */}
+      <div className="space-y-3 pt-6 border-t border-neutral-800">
+        <h4 className="text-sm font-medium text-neutral-300">Data Retention</h4>
+
+        {subscriptionError && (
+          <div className="p-3 rounded-xl border border-amber-800 bg-amber-900/20 flex items-center justify-between">
+            <p className="text-xs text-amber-200">Plan limits could not be loaded.</p>
+            <button onClick={() => mutateSubscription()} className="text-xs font-medium text-amber-400 hover:text-amber-300">Retry</button>
+          </div>
+        )}
+
+        <div className="p-4 bg-neutral-900/50 rounded-xl border border-neutral-800">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="font-medium text-white text-sm">Keep raw event data for</p>
+              <p className="text-xs text-neutral-400 mt-0.5">Events older than this are automatically deleted. Aggregated daily stats are kept permanently.</p>
+            </div>
+            <Select
+              value={String(dataRetention)}
+              onChange={(v) => setDataRetention(Number(v))}
+              options={getRetentionOptionsForPlan(subscription?.plan_id).map(o => ({ value: String(o.value), label: o.label }))}
+              variant="input"
+              className="min-w-[160px]"
+            />
+          </div>
+          {subscription && (
+            <p className="text-xs text-neutral-500 mt-2">
+              Your {subscription.plan_id?.includes('pro') ? 'Pro' : 'Free'} plan supports up to {formatRetentionMonths(Math.max(...getRetentionOptionsForPlan(subscription.plan_id).map(o => o.value)))} of data retention.
+            </p>
+          )}
+          {(!subscription || subscription.plan_id?.includes('free')) && (
+            <p className="text-xs text-neutral-500 mt-2">
+              <Link href="/pricing" className="text-brand-orange hover:underline">Upgrade</Link> for longer retention.
+            </p>
+          )}
+        </div>
+      </div>
+
+      {/* Path Filtering */}
+      <div className="space-y-3 pt-6 border-t border-neutral-800">
+        <h4 className="text-sm font-medium text-neutral-300">Path Filtering</h4>
+        <div>
+          <label className="block text-sm font-medium text-neutral-300 mb-1.5">Excluded Paths</label>
+          <textarea
+            value={excludedPaths}
+            onChange={e => setExcludedPaths(e.target.value)}
+            rows={4}
+            placeholder={"/admin/*\n/staging/*"}
+            className="w-full px-4 py-3 border border-neutral-800 rounded-lg bg-neutral-900/50 text-white font-mono text-sm focus:border-brand-orange focus:ring-4 focus:ring-brand-orange/10 outline-none transition-all"
+          />
+          <p className="text-xs text-neutral-500 mt-1">Enter paths to exclude from tracking (one per line). Supports wildcards (e.g., /admin/*).</p>
+        </div>
+      </div>
+
+      {/* PageSpeed Monitoring */}
+      <div className="space-y-3 pt-6 border-t border-neutral-800">
+        <h4 className="text-sm font-medium text-neutral-300">PageSpeed Monitoring</h4>
+        <div className="p-4 bg-neutral-900/50 rounded-xl border border-neutral-800">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="font-medium text-white text-sm">Check frequency</p>
+              <p className="text-xs text-neutral-400 mt-0.5">How often PageSpeed Insights runs automated checks.</p>
+            </div>
+            {psiConfig?.enabled ? (
+              <Select
+                value={psiConfig.check_frequency || 'weekly'}
+                onChange={async (v) => {
+                  try {
+                    await updatePageSpeedConfig(siteId, { check_frequency: v })
+                    mutatePSIConfig()
+                    toast.success('Check frequency updated')
+                  } catch {
+                    toast.error('Failed to update')
+                  }
+                }}
+                options={[
+                  { value: 'daily', label: 'Daily' },
+                  { value: 'weekly', label: 'Weekly' },
+                  { value: 'monthly', label: 'Monthly' },
+                ]}
+                variant="input"
+                className="min-w-[140px]"
+              />
+            ) : (
+              <span className="text-sm text-neutral-400">Not enabled</span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Privacy Policy */}
+      <div className="space-y-3 pt-6 border-t border-neutral-800">
+        <h4 className="text-sm font-medium text-neutral-300">For your privacy policy</h4>
+        <p className="text-xs text-neutral-400">Copy the text below into your Privacy Policy. It updates automatically based on your saved settings.</p>
+        <p className="text-xs text-amber-600">This is provided for convenience and is not legal advice. Consult a lawyer for compliance requirements.</p>
+        <div className="relative">
+          <textarea
+            readOnly
+            rows={6}
+            value={generatePrivacySnippet(site)}
+            className="w-full px-4 py-3 pr-12 border border-neutral-800 rounded-xl bg-neutral-900/50 text-neutral-300 text-xs font-mono"
+          />
+          <button
+            type="button"
+            onClick={() => {
+              navigator.clipboard.writeText(generatePrivacySnippet(site))
+              setSnippetCopied(true)
+              toast.success('Privacy snippet copied')
+              setTimeout(() => setSnippetCopied(false), 2000)
+            }}
+            className="absolute top-3 right-3 p-2 rounded-lg bg-neutral-700 hover:bg-neutral-600 text-neutral-300 transition-colors"
+          >
+            {snippetCopied ? <CheckCircle weight="bold" className="w-4 h-4" /> : <Copy weight="bold" className="w-4 h-4" />}
+          </button>
+        </div>
       </div>
 
       <div className="flex justify-end pt-2">
-- 
2.49.1


From b3ccb584314d28829b69213a55de4d6e01437550 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 17:48:39 +0100
Subject: [PATCH 252/428] feat(settings): add session review to unified bot &
 spam tab

---
 .../settings/unified/tabs/SiteBotSpamTab.tsx  | 150 ++++++++++++++++--
 1 file changed, 141 insertions(+), 9 deletions(-)

diff --git a/components/settings/unified/tabs/SiteBotSpamTab.tsx b/components/settings/unified/tabs/SiteBotSpamTab.tsx
index 98a452d..7055e73 100644
--- a/components/settings/unified/tabs/SiteBotSpamTab.tsx
+++ b/components/settings/unified/tabs/SiteBotSpamTab.tsx
@@ -1,17 +1,26 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { Button, Toggle, toast, Spinner } from '@ciphera-net/ui'
+import { Button, Toggle, toast, Spinner, getDateRange } from '@ciphera-net/ui'
 import { ShieldCheck } from '@phosphor-icons/react'
-import { useSite, useBotFilterStats } from '@/lib/swr/dashboard'
+import { useSite, useBotFilterStats, useSessions } from '@/lib/swr/dashboard'
 import { updateSite } from '@/lib/api/sites'
+import { botFilterSessions, botUnfilterSessions } from '@/lib/api/bot-filter'
 
 export default function SiteBotSpamTab({ siteId }: { siteId: string }) {
   const { data: site, mutate } = useSite(siteId)
-  const { data: botStats } = useBotFilterStats(siteId)
+  const { data: botStats, mutate: mutateBotStats } = useBotFilterStats(siteId)
   const [filterBots, setFilterBots] = useState(false)
   const [saving, setSaving] = useState(false)
 
+  const [botView, setBotView] = useState<'review' | 'blocked'>('review')
+  const [suspiciousOnly, setSuspiciousOnly] = useState(true)
+  const [selectedSessions, setSelectedSessions] = useState<Set<string>>(new Set())
+  const [botDateRange] = useState(() => getDateRange(7))
+
+  const { data: sessionsData, mutate: mutateSessions } = useSessions(siteId, botDateRange.start, botDateRange.end, botView === 'review' ? suspiciousOnly : false)
+  const sessions = sessionsData?.sessions
+
   useEffect(() => {
     if (site) setFilterBots(site.filter_bots ?? false)
   }, [site])
@@ -29,6 +38,30 @@ export default function SiteBotSpamTab({ siteId }: { siteId: string }) {
     }
   }
 
+  const handleBotFilter = async (sessionIds: string[]) => {
+    try {
+      await botFilterSessions(siteId, sessionIds)
+      toast.success(`${sessionIds.length} session(s) flagged as bot`)
+      setSelectedSessions(new Set())
+      mutateSessions()
+      mutateBotStats()
+    } catch {
+      toast.error('Failed to flag sessions')
+    }
+  }
+
+  const handleBotUnfilter = async (sessionIds: string[]) => {
+    try {
+      await botUnfilterSessions(siteId, sessionIds)
+      toast.success(`${sessionIds.length} session(s) unblocked`)
+      setSelectedSessions(new Set())
+      mutateSessions()
+      mutateBotStats()
+    } catch {
+      toast.error('Failed to unblock sessions')
+    }
+  }
+
   if (!site) return <div className="flex items-center justify-center py-12"><Spinner className="w-6 h-6 text-neutral-500" /></div>
 
   return (
@@ -68,12 +101,111 @@ export default function SiteBotSpamTab({ siteId }: { siteId: string }) {
         </div>
       )}
 
-      <p className="text-sm text-neutral-400">
-        For detailed session review and manual blocking, use the full{' '}
-        <a href={`/sites/${siteId}/settings?tab=bot-spam`} className="text-brand-orange hover:underline">
-          site settings page
-        </a>.
-      </p>
+      {/* Session Review */}
+      <div className="space-y-3 pt-6 border-t border-neutral-800">
+        <div className="flex items-center justify-between">
+          <h4 className="text-sm font-medium text-neutral-300">Session Review</h4>
+          {/* Review/Blocked toggle */}
+          <div className="flex items-center rounded-lg border border-neutral-700 overflow-hidden text-sm">
+            <button
+              onClick={() => { setBotView('review'); setSelectedSessions(new Set()) }}
+              className={`px-3 py-1.5 text-xs font-medium transition-colors ${botView === 'review' ? 'bg-neutral-700 text-white' : 'text-neutral-400 hover:text-white'}`}
+            >
+              Review
+            </button>
+            <button
+              onClick={() => { setBotView('blocked'); setSelectedSessions(new Set()) }}
+              className={`px-3 py-1.5 text-xs font-medium transition-colors ${botView === 'blocked' ? 'bg-neutral-700 text-white' : 'text-neutral-400 hover:text-white'}`}
+            >
+              Blocked
+            </button>
+          </div>
+        </div>
+
+        {/* Suspicious only filter (review mode only) */}
+        {botView === 'review' && (
+          <label className="flex items-center gap-2 text-sm text-neutral-400">
+            <input
+              type="checkbox"
+              checked={suspiciousOnly}
+              onChange={e => setSuspiciousOnly(e.target.checked)}
+              className="w-4 h-4 rounded"
+              style={{ accentColor: '#FD5E0F' }}
+            />
+            Suspicious only
+          </label>
+        )}
+
+        {/* Bulk actions bar */}
+        {selectedSessions.size > 0 && (
+          <div className="flex items-center gap-3 p-2 bg-brand-orange/10 border border-brand-orange/20 rounded-lg text-sm">
+            <span className="text-neutral-300">{selectedSessions.size} selected</span>
+            {botView === 'review' ? (
+              <button onClick={() => handleBotFilter(Array.from(selectedSessions))} className="text-red-400 hover:text-red-300 font-medium">Flag as bot</button>
+            ) : (
+              <button onClick={() => handleBotUnfilter(Array.from(selectedSessions))} className="text-green-400 hover:text-green-300 font-medium">Unblock</button>
+            )}
+            <button onClick={() => setSelectedSessions(new Set())} className="text-neutral-500 hover:text-neutral-300 ml-auto">Clear</button>
+          </div>
+        )}
+
+        {/* Session cards */}
+        <div className="space-y-2 max-h-96 overflow-y-auto">
+          {(sessions || [])
+            .filter(s => botView === 'blocked' ? s.bot_filtered : !s.bot_filtered)
+            .map(session => (
+              <div key={session.session_id} className="flex items-center gap-3 p-3 rounded-xl border border-neutral-800 hover:border-neutral-700 transition-colors">
+                <input
+                  type="checkbox"
+                  checked={selectedSessions.has(session.session_id)}
+                  onChange={e => {
+                    const next = new Set(selectedSessions)
+                    e.target.checked ? next.add(session.session_id) : next.delete(session.session_id)
+                    setSelectedSessions(next)
+                  }}
+                  className="w-4 h-4 shrink-0 cursor-pointer"
+                  style={{ accentColor: '#FD5E0F' }}
+                />
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium text-white truncate">{session.first_page || '/'}</span>
+                    {session.suspicion_score != null && (
+                      <span className={`px-1.5 py-0.5 rounded text-[10px] font-medium ${
+                        session.suspicion_score >= 5 ? 'bg-red-900/30 text-red-400' :
+                        session.suspicion_score >= 3 ? 'bg-yellow-900/30 text-yellow-400' :
+                        'bg-neutral-800 text-neutral-400'
+                      }`}>
+                        {session.suspicion_score >= 5 ? 'High risk' : session.suspicion_score >= 3 ? 'Suspicious' : 'Low risk'}
+                      </span>
+                    )}
+                  </div>
+                  <div className="flex flex-wrap gap-x-3 gap-y-0.5 text-xs text-neutral-500 mt-0.5">
+                    <span>{session.pageviews} page(s)</span>
+                    <span>{session.duration ? `${Math.round(session.duration)}s` : 'No duration'}</span>
+                    <span>{[session.city, session.country].filter(Boolean).join(', ') || 'Unknown location'}</span>
+                    <span>{session.browser || 'Unknown browser'}</span>
+                    <span>{session.referrer || 'Direct'}</span>
+                  </div>
+                </div>
+                <button
+                  onClick={() => botView === 'review' ? handleBotFilter([session.session_id]) : handleBotUnfilter([session.session_id])}
+                  className={`shrink-0 px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors ${
+                    botView === 'review'
+                      ? 'text-red-400 border-red-500/20 hover:bg-red-900/20'
+                      : 'text-green-400 border-green-500/20 hover:bg-green-900/20'
+                  }`}
+                >
+                  {botView === 'review' ? 'Flag as bot' : 'Unblock'}
+                </button>
+              </div>
+            ))}
+          {(!sessions || sessions.filter(s => botView === 'blocked' ? s.bot_filtered : !s.bot_filtered).length === 0) && (
+            <p className="text-sm text-neutral-500 text-center py-4">
+              {botView === 'blocked' ? 'No blocked sessions' : 'No suspicious sessions found'}
+            </p>
+          )}
+        </div>
+      </div>
 
       <div className="flex justify-end pt-2">
         <Button onClick={handleSave} variant="primary" disabled={saving}>
-- 
2.49.1


From f844751142c1b29182ab86c441c91d1f55b37b52 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 17:52:56 +0100
Subject: [PATCH 253/428] feat(settings): add report/alert create & edit modals
 to unified tab

---
 .../settings/unified/tabs/SiteReportsTab.tsx  | 602 +++++++++++++++++-
 1 file changed, 571 insertions(+), 31 deletions(-)

diff --git a/components/settings/unified/tabs/SiteReportsTab.tsx b/components/settings/unified/tabs/SiteReportsTab.tsx
index d8852eb..ad567ab 100644
--- a/components/settings/unified/tabs/SiteReportsTab.tsx
+++ b/components/settings/unified/tabs/SiteReportsTab.tsx
@@ -1,21 +1,84 @@
 'use client'
 
 import { useState } from 'react'
-import { Button, toast, Spinner } from '@ciphera-net/ui'
+import { Button, toast, Spinner, Modal, Select } from '@ciphera-net/ui'
 import { Plus, Pencil, Trash, EnvelopeSimple, WebhooksLogo, PaperPlaneTilt } from '@phosphor-icons/react'
+import { SiDiscord } from '@icons-pack/react-simple-icons'
 import { useReportSchedules, useAlertSchedules } from '@/lib/swr/dashboard'
-import { deleteReportSchedule, testReportSchedule, updateReportSchedule, type ReportSchedule } from '@/lib/api/report-schedules'
+import { useSite } from '@/lib/swr/dashboard'
+import {
+  createReportSchedule,
+  updateReportSchedule,
+  deleteReportSchedule,
+  testReportSchedule,
+  type ReportSchedule,
+  type CreateReportScheduleRequest,
+  type EmailConfig,
+  type WebhookConfig,
+} from '@/lib/api/report-schedules'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
+import { formatDateTime } from '@/lib/utils/formatDate'
 
-function ChannelIcon({ channel }: { channel: string }) {
-  switch (channel) {
-    case 'email': return <EnvelopeSimple weight="bold" className="w-4 h-4" />
-    case 'webhook': return <WebhooksLogo weight="bold" className="w-4 h-4" />
-    default: return <PaperPlaneTilt weight="bold" className="w-4 h-4" />
-  }
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+const TIMEZONES = [
+  'UTC', 'America/New_York', 'America/Los_Angeles', 'America/Chicago',
+  'America/Toronto', 'Europe/London', 'Europe/Paris', 'Europe/Berlin',
+  'Europe/Amsterdam', 'Asia/Tokyo', 'Asia/Singapore', 'Asia/Dubai',
+  'Australia/Sydney', 'Pacific/Auckland',
+]
+
+const WEEKDAY_NAMES = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
+
+const formatHour = (hour: number) => {
+  if (hour === 0) return '12:00 AM'
+  if (hour === 12) return '12:00 PM'
+  return hour < 12 ? `${hour}:00 AM` : `${hour - 12}:00 PM`
 }
 
-function ScheduleRow({ schedule, siteId, onMutate }: { schedule: ReportSchedule; siteId: string; onMutate: () => void }) {
+const ordinalSuffix = (n: number) => {
+  const s = ['th', 'st', 'nd', 'rd']
+  const v = n % 100
+  return n + (s[(v - 20) % 10] || s[v] || s[0])
+}
+
+// ── Icons ────────────────────────────────────────────────────────────────────
+
+function SlackIcon({ size = 16 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" style={{ fill: 'none' }}>
+      <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313z" style={{ fill: '#E01E5A' }}/>
+      <path d="M8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312z" style={{ fill: '#36C5F0' }}/>
+      <path d="M18.958 8.834a2.528 2.528 0 0 1 2.52-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.52V8.834zm-1.271 0a2.528 2.528 0 0 1-2.521 2.521 2.528 2.528 0 0 1-2.521-2.521V2.522A2.528 2.528 0 0 1 15.166 0a2.528 2.528 0 0 1 2.521 2.522v6.312z" style={{ fill: '#2EB67D' }}/>
+      <path d="M15.166 18.958a2.528 2.528 0 0 1 2.521 2.52A2.528 2.528 0 0 1 15.166 24a2.528 2.528 0 0 1-2.521-2.522v-2.52h2.521zm0-1.271a2.528 2.528 0 0 1-2.521-2.521 2.528 2.528 0 0 1 2.521-2.521h6.312A2.528 2.528 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.521h-6.312z" style={{ fill: '#ECB22E' }}/>
+    </svg>
+  )
+}
+
+const CHANNEL_ICONS: Record<string, React.ReactNode> = {
+  email: <EnvelopeSimple weight="bold" className="w-4 h-4" />,
+  slack: <SlackIcon size={16} />,
+  discord: <SiDiscord size={16} color="#5865F2" />,
+  webhook: <WebhooksLogo weight="bold" className="w-4 h-4" />,
+}
+
+function ChannelIcon({ channel }: { channel: string }) {
+  return <>{CHANNEL_ICONS[channel] ?? <PaperPlaneTilt weight="bold" className="w-4 h-4" />}</>
+}
+
+// ── Schedule Row ─────────────────────────────────────────────────────────────
+
+function ScheduleRow({
+  schedule,
+  siteId,
+  onMutate,
+  onEdit,
+}: {
+  schedule: ReportSchedule
+  siteId: string
+  onMutate: () => void
+  onEdit: (schedule: ReportSchedule) => void
+}) {
   const [testing, setTesting] = useState(false)
 
   const handleTest = async () => {
@@ -62,30 +125,39 @@ function ScheduleRow({ schedule, siteId, onMutate }: { schedule: ReportSchedule;
 
   return (
     <div className="flex items-center justify-between px-4 py-3 rounded-xl hover:bg-neutral-800/40 transition-colors group">
-      <div className="flex items-center gap-3">
-        <div className={`p-1.5 rounded-lg ${schedule.enabled ? 'bg-brand-orange/10 text-brand-orange' : 'bg-neutral-800 text-neutral-500'}`}>
+      <div className="flex items-center gap-3 min-w-0">
+        <div className={`p-1.5 rounded-lg flex-shrink-0 ${schedule.enabled ? 'bg-brand-orange/10 text-brand-orange' : 'bg-neutral-800 text-neutral-500'}`}>
           <ChannelIcon channel={schedule.channel} />
         </div>
-        <div>
-          <p className="text-sm font-medium text-white">
+        <div className="min-w-0">
+          <p className="text-sm font-medium text-white truncate">
             {schedule.channel === 'email' && 'recipients' in schedule.channel_config
-              ? (schedule.channel_config as { recipients: string[] }).recipients?.[0]
+              ? (schedule.channel_config as EmailConfig).recipients?.[0]
               : schedule.channel}
             {!schedule.enabled && <span className="ml-2 text-xs text-neutral-500">(paused)</span>}
           </p>
           <p className="text-xs text-neutral-500">
             {schedule.frequency} · {schedule.report_type} report
+            {schedule.last_sent_at && (
+              <span className="ml-1">· sent {formatDateTime(new Date(schedule.last_sent_at))}</span>
+            )}
           </p>
+          {schedule.last_error && (
+            <p className="text-xs text-red-400 truncate mt-0.5">{schedule.last_error}</p>
+          )}
         </div>
       </div>
-      <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-        <button onClick={handleTest} disabled={testing} className="p-1.5 rounded-lg text-neutral-500 hover:text-white hover:bg-neutral-800 transition-colors">
+      <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0">
+        <button onClick={() => onEdit(schedule)} className="p-1.5 rounded-lg text-neutral-500 hover:text-white hover:bg-neutral-800 transition-colors" title="Edit">
+          <Pencil weight="bold" className="w-3.5 h-3.5" />
+        </button>
+        <button onClick={handleTest} disabled={testing} className="p-1.5 rounded-lg text-neutral-500 hover:text-white hover:bg-neutral-800 transition-colors" title="Send test">
           <PaperPlaneTilt weight="bold" className="w-3.5 h-3.5" />
         </button>
         <button onClick={handleToggle} className="p-1.5 rounded-lg text-neutral-500 hover:text-white hover:bg-neutral-800 transition-colors">
           {schedule.enabled ? 'Pause' : 'Enable'}
         </button>
-        <button onClick={handleDelete} className="p-1.5 rounded-lg text-neutral-500 hover:text-red-400 hover:bg-red-900/20 transition-colors">
+        <button onClick={handleDelete} className="p-1.5 rounded-lg text-neutral-500 hover:text-red-400 hover:bg-red-900/20 transition-colors" title="Delete">
           <Trash weight="bold" className="w-3.5 h-3.5" />
         </button>
       </div>
@@ -93,12 +165,460 @@ function ScheduleRow({ schedule, siteId, onMutate }: { schedule: ReportSchedule;
   )
 }
 
+// ── Channel Grid Picker ──────────────────────────────────────────────────────
+
+const CHANNELS = ['email', 'slack', 'discord', 'webhook'] as const
+
+function ChannelPicker({ value, onChange }: { value: string; onChange: (v: string) => void }) {
+  return (
+    <div className="grid grid-cols-4 gap-2">
+      {CHANNELS.map((ch) => (
+        <button
+          key={ch}
+          type="button"
+          onClick={() => onChange(ch)}
+          className={`flex flex-col items-center gap-1.5 p-3 rounded-lg border transition-colors ${
+            value === ch
+              ? 'border-brand-orange bg-brand-orange/10 text-white'
+              : 'border-neutral-800 text-neutral-400 hover:border-neutral-700 hover:text-white'
+          }`}
+        >
+          {CHANNEL_ICONS[ch]}
+          <span className="text-xs capitalize">{ch}</span>
+        </button>
+      ))}
+    </div>
+  )
+}
+
+// ── Shared form label ────────────────────────────────────────────────────────
+
+function FormLabel({ children, htmlFor }: { children: React.ReactNode; htmlFor?: string }) {
+  return <label htmlFor={htmlFor} className="block text-sm font-medium text-neutral-300 mb-1.5">{children}</label>
+}
+
+function FormInput({ id, type = 'text', value, onChange, placeholder }: { id?: string; type?: string; value: string; onChange: (v: string) => void; placeholder?: string }) {
+  return (
+    <input
+      id={id}
+      type={type}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      className="w-full h-10 px-4 bg-transparent border border-neutral-800 rounded-lg text-sm text-white placeholder:text-neutral-600 focus:outline-none focus:border-brand-orange focus:ring-2 focus:ring-ring/20 transition-colors"
+    />
+  )
+}
+
+// ── Report Schedule Modal ────────────────────────────────────────────────────
+
+function ReportScheduleModal({
+  isOpen,
+  onClose,
+  siteId,
+  siteTimezone,
+  editing,
+  onSaved,
+}: {
+  isOpen: boolean
+  onClose: () => void
+  siteId: string
+  siteTimezone: string
+  editing: ReportSchedule | null
+  onSaved: () => void
+}) {
+  const [saving, setSaving] = useState(false)
+  const [form, setForm] = useState(() => formFromSchedule(editing, siteTimezone))
+
+  // Reset form when editing target changes
+  function formFromSchedule(schedule: ReportSchedule | null, fallbackTz: string) {
+    if (schedule) {
+      return {
+        channel: schedule.channel,
+        recipients: schedule.channel === 'email' && 'recipients' in schedule.channel_config
+          ? (schedule.channel_config as EmailConfig).recipients.join(', ')
+          : '',
+        webhookUrl: schedule.channel !== 'email' && 'url' in schedule.channel_config
+          ? (schedule.channel_config as WebhookConfig).url
+          : '',
+        frequency: schedule.frequency,
+        reportType: schedule.report_type,
+        timezone: schedule.timezone || fallbackTz,
+        sendHour: schedule.send_hour,
+        sendDay: schedule.send_day ?? 1,
+      }
+    }
+    return {
+      channel: 'email',
+      recipients: '',
+      webhookUrl: '',
+      frequency: 'weekly',
+      reportType: 'summary',
+      timezone: fallbackTz,
+      sendHour: 9,
+      sendDay: 1,
+    }
+  }
+
+  // Re-init when modal opens with different editing target
+  const [prevEditing, setPrevEditing] = useState<ReportSchedule | null>(editing)
+  if (editing !== prevEditing) {
+    setPrevEditing(editing)
+    setForm(formFromSchedule(editing, siteTimezone))
+  }
+
+  const updateField = <K extends keyof typeof form>(key: K, value: (typeof form)[K]) =>
+    setForm((f) => ({ ...f, [key]: value }))
+
+  const handleSubmit = async () => {
+    // Validation
+    if (form.channel === 'email') {
+      const emails = form.recipients.split(',').map((r) => r.trim()).filter(Boolean)
+      if (emails.length === 0) { toast.error('Enter at least one email address'); return }
+    } else {
+      if (!form.webhookUrl.trim()) { toast.error('Enter a webhook URL'); return }
+    }
+
+    setSaving(true)
+    try {
+      const channelConfig: EmailConfig | WebhookConfig =
+        form.channel === 'email'
+          ? { recipients: form.recipients.split(',').map((r) => r.trim()).filter(Boolean) }
+          : { url: form.webhookUrl.trim() }
+
+      const payload: CreateReportScheduleRequest = {
+        channel: form.channel,
+        channel_config: channelConfig,
+        frequency: form.frequency,
+        report_type: form.reportType,
+        timezone: form.timezone,
+        send_hour: form.sendHour,
+        send_day: form.frequency === 'weekly' || form.frequency === 'monthly' ? form.sendDay : undefined,
+        purpose: 'report',
+      }
+
+      if (editing) {
+        await updateReportSchedule(siteId, editing.id, payload)
+        toast.success('Report schedule updated')
+      } else {
+        await createReportSchedule(siteId, payload)
+        toast.success('Report schedule created')
+      }
+      onSaved()
+      onClose()
+    } catch (err) {
+      toast.error(getAuthErrorMessage(err as Error) || 'Failed to save schedule')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const webhookPlaceholder =
+    form.channel === 'slack' ? 'https://hooks.slack.com/services/...'
+    : form.channel === 'discord' ? 'https://discord.com/api/webhooks/...'
+    : 'https://example.com/webhook'
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={editing ? 'Edit Report Schedule' : 'New Report Schedule'}>
+      <div className="space-y-5">
+        {/* Channel */}
+        <div>
+          <FormLabel>Channel</FormLabel>
+          <ChannelPicker value={form.channel} onChange={(v) => updateField('channel', v)} />
+        </div>
+
+        {/* Recipients / URL */}
+        {form.channel === 'email' ? (
+          <div>
+            <FormLabel htmlFor="report-recipients">Recipients</FormLabel>
+            <FormInput
+              id="report-recipients"
+              value={form.recipients}
+              onChange={(v) => updateField('recipients', v)}
+              placeholder="email@example.com, another@example.com"
+            />
+            <p className="text-xs text-neutral-500 mt-1">Comma-separated email addresses</p>
+          </div>
+        ) : (
+          <div>
+            <FormLabel htmlFor="report-webhook">Webhook URL</FormLabel>
+            <FormInput
+              id="report-webhook"
+              type="url"
+              value={form.webhookUrl}
+              onChange={(v) => updateField('webhookUrl', v)}
+              placeholder={webhookPlaceholder}
+            />
+          </div>
+        )}
+
+        {/* Frequency */}
+        <div>
+          <FormLabel>Frequency</FormLabel>
+          <Select
+            value={form.frequency}
+            onChange={(v) => updateField('frequency', v)}
+            variant="input"
+            fullWidth
+            options={[
+              { value: 'daily', label: 'Daily' },
+              { value: 'weekly', label: 'Weekly' },
+              { value: 'monthly', label: 'Monthly' },
+            ]}
+          />
+        </div>
+
+        {/* Day of week (weekly) */}
+        {form.frequency === 'weekly' && (
+          <div>
+            <FormLabel>Day of Week</FormLabel>
+            <Select
+              value={String(form.sendDay)}
+              onChange={(v) => updateField('sendDay', Number(v))}
+              variant="input"
+              fullWidth
+              options={WEEKDAY_NAMES.map((name, i) => ({ value: String(i + 1), label: name }))}
+            />
+          </div>
+        )}
+
+        {/* Day of month (monthly) */}
+        {form.frequency === 'monthly' && (
+          <div>
+            <FormLabel>Day of Month</FormLabel>
+            <Select
+              value={String(form.sendDay)}
+              onChange={(v) => updateField('sendDay', Number(v))}
+              variant="input"
+              fullWidth
+              options={Array.from({ length: 28 }, (_, i) => ({
+                value: String(i + 1),
+                label: ordinalSuffix(i + 1),
+              }))}
+            />
+          </div>
+        )}
+
+        {/* Time */}
+        <div>
+          <FormLabel>Time</FormLabel>
+          <Select
+            value={String(form.sendHour)}
+            onChange={(v) => updateField('sendHour', Number(v))}
+            variant="input"
+            fullWidth
+            options={Array.from({ length: 24 }, (_, i) => ({
+              value: String(i),
+              label: formatHour(i),
+            }))}
+          />
+        </div>
+
+        {/* Timezone */}
+        <div>
+          <FormLabel>Timezone</FormLabel>
+          <Select
+            value={form.timezone}
+            onChange={(v) => updateField('timezone', v)}
+            variant="input"
+            fullWidth
+            options={TIMEZONES.map((tz) => ({ value: tz, label: tz.replace(/_/g, ' ') }))}
+          />
+        </div>
+
+        {/* Report Type */}
+        <div>
+          <FormLabel>Report Type</FormLabel>
+          <Select
+            value={form.reportType}
+            onChange={(v) => updateField('reportType', v)}
+            variant="input"
+            fullWidth
+            options={[
+              { value: 'summary', label: 'Summary' },
+              { value: 'pages', label: 'Pages' },
+              { value: 'sources', label: 'Sources' },
+              { value: 'goals', label: 'Goals' },
+            ]}
+          />
+        </div>
+
+        {/* Actions */}
+        <div className="flex justify-end gap-2 pt-2">
+          <Button variant="secondary" onClick={onClose}>Cancel</Button>
+          <Button variant="primary" onClick={handleSubmit} disabled={saving}>
+            {saving ? <Spinner className="w-4 h-4" /> : editing ? 'Save Changes' : 'Create Schedule'}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+// ── Alert Channel Modal ──────────────────────────────────────────────────────
+
+function AlertChannelModal({
+  isOpen,
+  onClose,
+  siteId,
+  siteTimezone,
+  editing,
+  onSaved,
+}: {
+  isOpen: boolean
+  onClose: () => void
+  siteId: string
+  siteTimezone: string
+  editing: ReportSchedule | null
+  onSaved: () => void
+}) {
+  const [saving, setSaving] = useState(false)
+  const [form, setForm] = useState(() => formFromAlert(editing))
+
+  function formFromAlert(schedule: ReportSchedule | null) {
+    if (schedule) {
+      return {
+        channel: schedule.channel,
+        recipients: schedule.channel === 'email' && 'recipients' in schedule.channel_config
+          ? (schedule.channel_config as EmailConfig).recipients.join(', ')
+          : '',
+        webhookUrl: schedule.channel !== 'email' && 'url' in schedule.channel_config
+          ? (schedule.channel_config as WebhookConfig).url
+          : '',
+      }
+    }
+    return { channel: 'email', recipients: '', webhookUrl: '' }
+  }
+
+  const [prevEditing, setPrevEditing] = useState<ReportSchedule | null>(editing)
+  if (editing !== prevEditing) {
+    setPrevEditing(editing)
+    setForm(formFromAlert(editing))
+  }
+
+  const updateField = <K extends keyof typeof form>(key: K, value: (typeof form)[K]) =>
+    setForm((f) => ({ ...f, [key]: value }))
+
+  const handleSubmit = async () => {
+    if (form.channel === 'email') {
+      const emails = form.recipients.split(',').map((r) => r.trim()).filter(Boolean)
+      if (emails.length === 0) { toast.error('Enter at least one email address'); return }
+    } else {
+      if (!form.webhookUrl.trim()) { toast.error('Enter a webhook URL'); return }
+    }
+
+    setSaving(true)
+    try {
+      const channelConfig: EmailConfig | WebhookConfig =
+        form.channel === 'email'
+          ? { recipients: form.recipients.split(',').map((r) => r.trim()).filter(Boolean) }
+          : { url: form.webhookUrl.trim() }
+
+      const payload: CreateReportScheduleRequest = {
+        channel: form.channel,
+        channel_config: channelConfig,
+        frequency: 'daily', // Alerts don't have a user-chosen frequency
+        timezone: siteTimezone,
+        purpose: 'alert',
+      }
+
+      if (editing) {
+        await updateReportSchedule(siteId, editing.id, payload)
+        toast.success('Alert channel updated')
+      } else {
+        await createReportSchedule(siteId, payload)
+        toast.success('Alert channel created')
+      }
+      onSaved()
+      onClose()
+    } catch (err) {
+      toast.error(getAuthErrorMessage(err as Error) || 'Failed to save alert channel')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const webhookPlaceholder =
+    form.channel === 'slack' ? 'https://hooks.slack.com/services/...'
+    : form.channel === 'discord' ? 'https://discord.com/api/webhooks/...'
+    : 'https://example.com/webhook'
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={editing ? 'Edit Alert Channel' : 'New Alert Channel'}>
+      <div className="space-y-5">
+        {/* Channel */}
+        <div>
+          <FormLabel>Channel</FormLabel>
+          <ChannelPicker value={form.channel} onChange={(v) => updateField('channel', v)} />
+        </div>
+
+        {/* Recipients / URL */}
+        {form.channel === 'email' ? (
+          <div>
+            <FormLabel htmlFor="alert-recipients">Recipients</FormLabel>
+            <FormInput
+              id="alert-recipients"
+              value={form.recipients}
+              onChange={(v) => updateField('recipients', v)}
+              placeholder="email@example.com, another@example.com"
+            />
+            <p className="text-xs text-neutral-500 mt-1">Comma-separated email addresses</p>
+          </div>
+        ) : (
+          <div>
+            <FormLabel htmlFor="alert-webhook">Webhook URL</FormLabel>
+            <FormInput
+              id="alert-webhook"
+              type="url"
+              value={form.webhookUrl}
+              onChange={(v) => updateField('webhookUrl', v)}
+              placeholder={webhookPlaceholder}
+            />
+          </div>
+        )}
+
+        {/* Info box */}
+        <div className="rounded-lg border border-neutral-800 bg-neutral-800/30 p-3">
+          <p className="text-xs text-neutral-400">
+            Alerts are sent automatically when your site goes down or recovers.
+          </p>
+        </div>
+
+        {/* Actions */}
+        <div className="flex justify-end gap-2 pt-2">
+          <Button variant="secondary" onClick={onClose}>Cancel</Button>
+          <Button variant="primary" onClick={handleSubmit} disabled={saving}>
+            {saving ? <Spinner className="w-4 h-4" /> : editing ? 'Save Changes' : 'Add Channel'}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+// ── Main Tab ─────────────────────────────────────────────────────────────────
+
 export default function SiteReportsTab({ siteId }: { siteId: string }) {
+  const { data: site } = useSite(siteId)
   const { data: reports = [], isLoading: reportsLoading, mutate: mutateReports } = useReportSchedules(siteId)
   const { data: alerts = [], isLoading: alertsLoading, mutate: mutateAlerts } = useAlertSchedules(siteId)
 
+  // Report modal state
+  const [reportModalOpen, setReportModalOpen] = useState(false)
+  const [editingSchedule, setEditingSchedule] = useState<ReportSchedule | null>(null)
+
+  // Alert modal state
+  const [alertModalOpen, setAlertModalOpen] = useState(false)
+  const [editingAlert, setEditingAlert] = useState<ReportSchedule | null>(null)
+
+  const siteTimezone = site?.timezone || 'UTC'
   const loading = reportsLoading || alertsLoading
 
+  const openNewReport = () => { setEditingSchedule(null); setReportModalOpen(true) }
+  const openEditReport = (schedule: ReportSchedule) => { setEditingSchedule(schedule); setReportModalOpen(true) }
+  const openNewAlert = () => { setEditingAlert(null); setAlertModalOpen(true) }
+  const openEditAlert = (schedule: ReportSchedule) => { setEditingAlert(schedule); setAlertModalOpen(true) }
+
   if (loading) return <div className="flex items-center justify-center py-12"><Spinner className="w-6 h-6 text-neutral-500" /></div>
 
   return (
@@ -110,19 +630,17 @@ export default function SiteReportsTab({ siteId }: { siteId: string }) {
             <h3 className="text-base font-semibold text-white mb-1">Scheduled Reports</h3>
             <p className="text-sm text-neutral-400">Automated analytics summaries via email or webhook.</p>
           </div>
-          <a href={`/sites/${siteId}/settings?tab=notifications`}>
-            <Button variant="primary" className="text-sm gap-1.5">
-              <Plus weight="bold" className="w-3.5 h-3.5" /> Add Report
-            </Button>
-          </a>
+          <Button variant="primary" className="text-sm gap-1.5" onClick={openNewReport}>
+            <Plus weight="bold" className="w-3.5 h-3.5" /> Add Report
+          </Button>
         </div>
 
         {reports.length === 0 ? (
           <p className="text-sm text-neutral-500 text-center py-6">No scheduled reports yet.</p>
         ) : (
           <div className="space-y-1">
-            {reports.map(r => (
-              <ScheduleRow key={r.id} schedule={r} siteId={siteId} onMutate={() => mutateReports()} />
+            {reports.map((r) => (
+              <ScheduleRow key={r.id} schedule={r} siteId={siteId} onMutate={() => mutateReports()} onEdit={openEditReport} />
             ))}
           </div>
         )}
@@ -135,23 +653,45 @@ export default function SiteReportsTab({ siteId }: { siteId: string }) {
             <h3 className="text-base font-semibold text-white mb-1">Alert Channels</h3>
             <p className="text-sm text-neutral-400">Get notified when uptime monitors go down.</p>
           </div>
-          <a href={`/sites/${siteId}/settings?tab=notifications`}>
-            <Button variant="secondary" className="text-sm gap-1.5">
-              <Plus weight="bold" className="w-3.5 h-3.5" /> Add Channel
-            </Button>
-          </a>
+          <Button variant="secondary" className="text-sm gap-1.5" onClick={openNewAlert}>
+            <Plus weight="bold" className="w-3.5 h-3.5" /> Add Channel
+          </Button>
         </div>
 
         {alerts.length === 0 ? (
           <p className="text-sm text-neutral-500 text-center py-6">No alert channels configured.</p>
         ) : (
           <div className="space-y-1">
-            {alerts.map(a => (
-              <ScheduleRow key={a.id} schedule={a} siteId={siteId} onMutate={() => mutateAlerts()} />
+            {alerts.map((a) => (
+              <ScheduleRow key={a.id} schedule={a} siteId={siteId} onMutate={() => mutateAlerts()} onEdit={openEditAlert} />
             ))}
           </div>
         )}
       </div>
+
+      {/* Report Schedule Modal */}
+      {reportModalOpen && (
+        <ReportScheduleModal
+          isOpen={reportModalOpen}
+          onClose={() => setReportModalOpen(false)}
+          siteId={siteId}
+          siteTimezone={siteTimezone}
+          editing={editingSchedule}
+          onSaved={() => mutateReports()}
+        />
+      )}
+
+      {/* Alert Channel Modal */}
+      {alertModalOpen && (
+        <AlertChannelModal
+          isOpen={alertModalOpen}
+          onClose={() => setAlertModalOpen(false)}
+          siteId={siteId}
+          siteTimezone={siteTimezone}
+          editing={editingAlert}
+          onSaved={() => mutateAlerts()}
+        />
+      )}
     </div>
   )
 }
-- 
2.49.1


From 7dc6e0daf5f84154a4b81cdc53518b75ef343d62 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 18:02:39 +0100
Subject: [PATCH 254/428] fix(settings): add remove password button to unified
 visibility tab

---
 components/settings/unified/tabs/SiteVisibilityTab.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/components/settings/unified/tabs/SiteVisibilityTab.tsx b/components/settings/unified/tabs/SiteVisibilityTab.tsx
index f6f3bd1..33d80e0 100644
--- a/components/settings/unified/tabs/SiteVisibilityTab.tsx
+++ b/components/settings/unified/tabs/SiteVisibilityTab.tsx
@@ -114,6 +114,15 @@ export default function SiteVisibilityTab({ siteId }: { siteId: string }) {
                     onChange={e => setPassword(e.target.value)}
                     placeholder={site.has_password ? 'Leave empty to keep current password' : 'Set a password'}
                   />
+                  {site.has_password && (
+                    <button
+                      type="button"
+                      onClick={() => { setPasswordEnabled(false); setPassword('') }}
+                      className="mt-2 text-xs font-medium text-red-400 hover:text-red-300 transition-colors"
+                    >
+                      Remove password protection
+                    </button>
+                  )}
                 </motion.div>
               )}
             </AnimatePresence>
-- 
2.49.1


From ce992e331fca94f1b45533ece6339588f0ffe6b3 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 18:02:47 +0100
Subject: [PATCH 255/428] fix(settings): show delete account in unified profile
 tab

---
 components/settings/unified/tabs/AccountProfileTab.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/settings/unified/tabs/AccountProfileTab.tsx b/components/settings/unified/tabs/AccountProfileTab.tsx
index cb81ee7..5eecee1 100644
--- a/components/settings/unified/tabs/AccountProfileTab.tsx
+++ b/components/settings/unified/tabs/AccountProfileTab.tsx
@@ -11,7 +11,7 @@ export default function AccountProfileTab() {
         <p className="text-sm text-neutral-400">Manage your personal account settings.</p>
       </div>
 
-      <ProfileSettings activeTab="profile" borderless hideDangerZone />
+      <ProfileSettings activeTab="profile" borderless />
     </div>
   )
 }
-- 
2.49.1


From b164160d6ad957fdfa55dc877d015a9f035b5209 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 18:04:07 +0100
Subject: [PATCH 256/428] feat(settings): add bunny setup flow and GSC details
 to unified integrations tab

---
 .../unified/tabs/SiteIntegrationsTab.tsx      | 248 ++++++++++++++++--
 1 file changed, 219 insertions(+), 29 deletions(-)

diff --git a/components/settings/unified/tabs/SiteIntegrationsTab.tsx b/components/settings/unified/tabs/SiteIntegrationsTab.tsx
index 0165464..ab01cd6 100644
--- a/components/settings/unified/tabs/SiteIntegrationsTab.tsx
+++ b/components/settings/unified/tabs/SiteIntegrationsTab.tsx
@@ -1,11 +1,13 @@
 'use client'
 
+import { useState } from 'react'
 import { Button, toast, Spinner } from '@ciphera-net/ui'
-import { GoogleLogo, ArrowSquareOut, Plugs, Trash } from '@phosphor-icons/react'
+import { GoogleLogo, ArrowSquareOut, Plugs, Trash, ShieldCheck, CaretDown } from '@phosphor-icons/react'
 import { useGSCStatus, useBunnyStatus } from '@/lib/swr/dashboard'
 import { disconnectGSC, getGSCAuthURL } from '@/lib/api/gsc'
-import { disconnectBunny } from '@/lib/api/bunny'
+import { disconnectBunny, getBunnyPullZones, connectBunny, type BunnyPullZone } from '@/lib/api/bunny'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
+import { formatDateTime } from '@/lib/utils/formatDate'
 
 function IntegrationCard({
   icon,
@@ -16,6 +18,7 @@ function IntegrationCard({
   onConnect,
   onDisconnect,
   connectLabel = 'Connect',
+  children,
 }: {
   icon: React.ReactNode
   name: string
@@ -25,40 +28,211 @@ function IntegrationCard({
   onConnect: () => void
   onDisconnect: () => void
   connectLabel?: string
+  children?: React.ReactNode
 }) {
   return (
-    <div className="flex items-center justify-between py-4 px-4 rounded-xl border border-neutral-800 bg-neutral-800/20">
-      <div className="flex items-center gap-3">
-        <div className="p-2 rounded-lg bg-neutral-800">{icon}</div>
-        <div>
-          <div className="flex items-center gap-2">
-            <p className="text-sm font-medium text-white">{name}</p>
-            {connected && (
-              <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full bg-green-900/30 text-green-400 border border-green-900/50">
-                <span className="w-1.5 h-1.5 rounded-full bg-green-400" />
-                Connected
-              </span>
-            )}
+    <div className="rounded-xl border border-neutral-800 bg-neutral-800/20">
+      <div className="flex items-center justify-between py-4 px-4">
+        <div className="flex items-center gap-3">
+          <div className="p-2 rounded-lg bg-neutral-800">{icon}</div>
+          <div>
+            <div className="flex items-center gap-2">
+              <p className="text-sm font-medium text-white">{name}</p>
+              {connected && (
+                <span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full bg-green-900/30 text-green-400 border border-green-900/50">
+                  <span className="w-1.5 h-1.5 rounded-full bg-green-400" />
+                  Connected
+                </span>
+              )}
+            </div>
+            <p className="text-xs text-neutral-400">{detail || description}</p>
           </div>
-          <p className="text-xs text-neutral-400">{detail || description}</p>
         </div>
+        {connected ? (
+          <Button onClick={onDisconnect} variant="secondary" className="text-sm text-red-400 border-red-900/50 hover:bg-red-900/20 gap-1.5">
+            <Trash weight="bold" className="w-3.5 h-3.5" /> Disconnect
+          </Button>
+        ) : (
+          <Button onClick={onConnect} variant="primary" className="text-sm gap-1.5">
+            <Plugs weight="bold" className="w-3.5 h-3.5" /> {connectLabel}
+          </Button>
+        )}
       </div>
-      {connected ? (
-        <Button onClick={onDisconnect} variant="secondary" className="text-sm text-red-400 border-red-900/50 hover:bg-red-900/20 gap-1.5">
-          <Trash weight="bold" className="w-3.5 h-3.5" /> Disconnect
-        </Button>
-      ) : (
-        <Button onClick={onConnect} variant="primary" className="text-sm gap-1.5">
-          <Plugs weight="bold" className="w-3.5 h-3.5" /> {connectLabel}
-        </Button>
+      {children}
+    </div>
+  )
+}
+
+function SecurityNote({ text }: { text: string }) {
+  return (
+    <div className="flex items-start gap-2 px-4 py-3 mx-4 mb-4 rounded-lg bg-neutral-800/40 border border-neutral-700/50">
+      <ShieldCheck weight="bold" className="w-4 h-4 text-neutral-400 mt-0.5 shrink-0" />
+      <p className="text-xs text-neutral-400 leading-relaxed">{text}</p>
+    </div>
+  )
+}
+
+function StatusDot({ status }: { status?: string }) {
+  const color =
+    status === 'active' ? 'bg-green-400' :
+    status === 'syncing' ? 'bg-yellow-400 animate-pulse' :
+    status === 'error' ? 'bg-red-400' :
+    'bg-neutral-500'
+
+  const label =
+    status === 'active' ? 'Connected' :
+    status === 'syncing' ? 'Syncing' :
+    status === 'error' ? 'Error' :
+    'Unknown'
+
+  return (
+    <span className="inline-flex items-center gap-1.5">
+      <span className={`w-2 h-2 rounded-full ${color}`} />
+      <span className="text-sm text-white">{label}</span>
+    </span>
+  )
+}
+
+function GSCDetails({ gscStatus }: { gscStatus: { connected: boolean; google_email?: string; gsc_property?: string; status?: string; last_synced_at?: string | null; error_message?: string | null } }) {
+  if (!gscStatus.connected) return null
+
+  const rows = [
+    { label: 'Status', value: <StatusDot status={gscStatus.status} /> },
+    { label: 'Google Account', value: gscStatus.google_email || 'Unknown' },
+    { label: 'GSC Property', value: gscStatus.gsc_property || 'Unknown' },
+    { label: 'Last Synced', value: gscStatus.last_synced_at ? formatDateTime(new Date(gscStatus.last_synced_at)) : 'Never' },
+  ]
+
+  return (
+    <div className="px-4 pb-4 space-y-3">
+      <div className="grid grid-cols-2 gap-x-6 gap-y-2 px-4 py-3 rounded-lg bg-neutral-800/40 border border-neutral-700/50">
+        {rows.map(row => (
+          <div key={row.label} className="flex flex-col gap-0.5">
+            <span className="text-xs text-neutral-500">{row.label}</span>
+            <span className="text-sm text-white">{row.value}</span>
+          </div>
+        ))}
+      </div>
+      {gscStatus.error_message && (
+        <div className="px-4 py-3 rounded-lg bg-red-900/20 border border-red-900/50">
+          <p className="text-xs text-red-400">{gscStatus.error_message}</p>
+        </div>
       )}
     </div>
   )
 }
 
+function BunnySetupForm({ siteId, onConnected }: { siteId: string; onConnected: () => void }) {
+  const [apiKey, setApiKey] = useState('')
+  const [pullZones, setPullZones] = useState<BunnyPullZone[]>([])
+  const [selectedZone, setSelectedZone] = useState<BunnyPullZone | null>(null)
+  const [loadingZones, setLoadingZones] = useState(false)
+  const [connecting, setConnecting] = useState(false)
+  const [zonesLoaded, setZonesLoaded] = useState(false)
+
+  const handleLoadZones = async () => {
+    if (!apiKey.trim()) {
+      toast.error('Please enter your BunnyCDN API key')
+      return
+    }
+    setLoadingZones(true)
+    try {
+      const data = await getBunnyPullZones(siteId, apiKey.trim())
+      setPullZones(data.pull_zones || [])
+      setSelectedZone(null)
+      setZonesLoaded(true)
+      if (!data.pull_zones?.length) {
+        toast.error('No pull zones found for this API key')
+      }
+    } catch (err) {
+      toast.error(getAuthErrorMessage(err as Error) || 'Failed to load pull zones')
+    } finally {
+      setLoadingZones(false)
+    }
+  }
+
+  const handleConnect = async () => {
+    if (!selectedZone) {
+      toast.error('Please select a pull zone')
+      return
+    }
+    setConnecting(true)
+    try {
+      await connectBunny(siteId, apiKey.trim(), selectedZone.id, selectedZone.name)
+      toast.success('BunnyCDN connected successfully')
+      onConnected()
+    } catch (err) {
+      toast.error(getAuthErrorMessage(err as Error) || 'Failed to connect BunnyCDN')
+    } finally {
+      setConnecting(false)
+    }
+  }
+
+  return (
+    <div className="px-4 pb-4 space-y-3">
+      <div className="space-y-3 px-4 py-3 rounded-lg bg-neutral-800/40 border border-neutral-700/50">
+        <div className="space-y-1.5">
+          <label className="text-xs font-medium text-neutral-400">API Key</label>
+          <div className="flex gap-2">
+            <input
+              type="password"
+              value={apiKey}
+              onChange={e => setApiKey(e.target.value)}
+              placeholder="Enter your BunnyCDN API key"
+              className="flex-1 px-3 py-2 text-sm bg-neutral-900 border border-neutral-700 rounded-lg text-white placeholder:text-neutral-500 focus:outline-none focus:border-neutral-500"
+            />
+            <Button
+              onClick={handleLoadZones}
+              variant="secondary"
+              className="text-sm shrink-0"
+              disabled={loadingZones || !apiKey.trim()}
+            >
+              {loadingZones ? <Spinner className="w-4 h-4" /> : 'Load Zones'}
+            </Button>
+          </div>
+        </div>
+
+        {zonesLoaded && pullZones.length > 0 && (
+          <div className="space-y-1.5">
+            <label className="text-xs font-medium text-neutral-400">Pull Zone</label>
+            <div className="relative">
+              <select
+                value={selectedZone?.id ?? ''}
+                onChange={e => {
+                  const zone = pullZones.find(z => z.id === Number(e.target.value))
+                  setSelectedZone(zone || null)
+                }}
+                className="w-full px-3 py-2 text-sm bg-neutral-900 border border-neutral-700 rounded-lg text-white appearance-none focus:outline-none focus:border-neutral-500"
+              >
+                <option value="">Select a pull zone</option>
+                {pullZones.map(zone => (
+                  <option key={zone.id} value={zone.id}>{zone.name}</option>
+                ))}
+              </select>
+              <CaretDown weight="bold" className="absolute right-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-neutral-400 pointer-events-none" />
+            </div>
+          </div>
+        )}
+
+        {zonesLoaded && pullZones.length > 0 && (
+          <Button
+            onClick={handleConnect}
+            variant="primary"
+            className="text-sm w-full"
+            disabled={connecting || !selectedZone}
+          >
+            {connecting ? <Spinner className="w-4 h-4" /> : 'Connect BunnyCDN'}
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}
+
 export default function SiteIntegrationsTab({ siteId }: { siteId: string }) {
   const { data: gscStatus, mutate: mutateGSC } = useGSCStatus(siteId)
   const { data: bunnyStatus, mutate: mutateBunny } = useBunnyStatus(siteId)
+  const [showBunnySetup, setShowBunnySetup] = useState(false)
 
   const handleConnectGSC = async () => {
     try {
@@ -81,8 +255,7 @@ export default function SiteIntegrationsTab({ siteId }: { siteId: string }) {
   }
 
   const handleConnectBunny = () => {
-    // Redirect to full settings page for BunnyCDN setup (requires API key input)
-    window.location.href = `/sites/${siteId}/settings?tab=integrations`
+    setShowBunnySetup(true)
   }
 
   const handleDisconnectBunny = async () => {
@@ -90,12 +263,15 @@ export default function SiteIntegrationsTab({ siteId }: { siteId: string }) {
     try {
       await disconnectBunny(siteId)
       await mutateBunny()
+      setShowBunnySetup(false)
       toast.success('BunnyCDN disconnected')
     } catch (err) {
       toast.error(getAuthErrorMessage(err as Error) || 'Failed to disconnect')
     }
   }
 
+  const bunnyConnected = bunnyStatus?.connected ?? false
+
   return (
     <div className="space-y-6">
       <div>
@@ -113,17 +289,31 @@ export default function SiteIntegrationsTab({ siteId }: { siteId: string }) {
           onConnect={handleConnectGSC}
           onDisconnect={handleDisconnectGSC}
           connectLabel="Connect with Google"
-        />
+        >
+          {gscStatus?.connected && <GSCDetails gscStatus={gscStatus} />}
+          <SecurityNote text="Pulse only requests read-only access. Your tokens are encrypted at rest." />
+        </IntegrationCard>
 
         <IntegrationCard
           icon={<img src="https://ciphera.net/bunny-icon.svg" alt="BunnyCDN" className="w-5 h-5" onError={e => { (e.target as HTMLImageElement).style.display = 'none' }} />}
           name="BunnyCDN"
           description="Monitor bandwidth, cache hit rates, and CDN performance."
-          connected={bunnyStatus?.connected ?? false}
-          detail={bunnyStatus?.connected ? `Pull zone: ${bunnyStatus.pull_zone_name || 'connected'}` : undefined}
+          connected={bunnyConnected}
+          detail={bunnyConnected ? `Pull zone: ${bunnyStatus?.pull_zone_name || 'connected'}` : undefined}
           onConnect={handleConnectBunny}
           onDisconnect={handleDisconnectBunny}
-        />
+        >
+          {!bunnyConnected && showBunnySetup && (
+            <BunnySetupForm
+              siteId={siteId}
+              onConnected={() => {
+                mutateBunny()
+                setShowBunnySetup(false)
+              }}
+            />
+          )}
+          <SecurityNote text="Your API key is encrypted at rest and only used to fetch read-only statistics." />
+        </IntegrationCard>
       </div>
     </div>
   )
-- 
2.49.1


From 851c607b7ae8e0f30321c97608e6ff1cfac128e5 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 18:07:16 +0100
Subject: [PATCH 257/428] feat(settings): add invoice list to unified billing
 tab

---
 .../unified/tabs/WorkspaceBillingTab.tsx      | 38 +++++++++++++++++--
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/components/settings/unified/tabs/WorkspaceBillingTab.tsx b/components/settings/unified/tabs/WorkspaceBillingTab.tsx
index 480c281..8fe0e78 100644
--- a/components/settings/unified/tabs/WorkspaceBillingTab.tsx
+++ b/components/settings/unified/tabs/WorkspaceBillingTab.tsx
@@ -1,17 +1,26 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import Link from 'next/link'
 import { Button, toast, Spinner } from '@ciphera-net/ui'
 import { CreditCard, ArrowSquareOut } from '@phosphor-icons/react'
 import { useSubscription } from '@/lib/swr/dashboard'
-import { createPortalSession, cancelSubscription, resumeSubscription } from '@/lib/api/billing'
-import { formatDateLong } from '@/lib/utils/formatDate'
+import { createPortalSession, cancelSubscription, resumeSubscription, getOrders, type Order } from '@/lib/api/billing'
+import { formatDateLong, formatDate } from '@/lib/utils/formatDate'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
 
 export default function WorkspaceBillingTab() {
   const { data: subscription, isLoading, mutate } = useSubscription()
   const [cancelling, setCancelling] = useState(false)
+  const [orders, setOrders] = useState<Order[]>([])
+
+  useEffect(() => {
+    getOrders().then(setOrders).catch(() => {})
+  }, [])
+
+  const formatAmount = (amount: number, currency: string) => {
+    return new Intl.NumberFormat('en-GB', { style: 'currency', currency: currency || 'USD' }).format(amount / 100)
+  }
 
   const handleManageBilling = async () => {
     try {
@@ -161,6 +170,29 @@ export default function WorkspaceBillingTab() {
           </Button>
         )}
       </div>
+
+      {/* Recent Invoices */}
+      {orders.length > 0 && (
+        <div className="space-y-2 pt-4 border-t border-neutral-800">
+          <h4 className="text-sm font-medium text-neutral-300">Recent Invoices</h4>
+          <div className="space-y-1">
+            {orders.map(order => (
+              <div key={order.id} className="flex items-center justify-between p-3 rounded-lg border border-neutral-800 text-sm">
+                <div className="flex items-center gap-3">
+                  <span className="text-neutral-300">{formatDate(new Date(order.created_at))}</span>
+                  <span className="text-white font-medium">{formatAmount(order.total_amount, order.currency)}</span>
+                  {order.invoice_number && (
+                    <span className="text-neutral-500 text-xs">{order.invoice_number}</span>
+                  )}
+                </div>
+                <span className={`text-xs px-2 py-0.5 rounded-full ${order.paid ? 'bg-green-900/30 text-green-400' : 'bg-neutral-800 text-neutral-400'}`}>
+                  {order.paid ? 'Paid' : order.status}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   )
 }
-- 
2.49.1


From b64c4c036f97ef71fac21b293e018d388bf36970 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 18:07:21 +0100
Subject: [PATCH 258/428] feat(settings): add working delete org to unified
 workspace general tab

---
 .../unified/tabs/WorkspaceGeneralTab.tsx      | 80 ++++++++++++++++---
 1 file changed, 68 insertions(+), 12 deletions(-)

diff --git a/components/settings/unified/tabs/WorkspaceGeneralTab.tsx b/components/settings/unified/tabs/WorkspaceGeneralTab.tsx
index 3d89ef1..bdbbcd4 100644
--- a/components/settings/unified/tabs/WorkspaceGeneralTab.tsx
+++ b/components/settings/unified/tabs/WorkspaceGeneralTab.tsx
@@ -1,18 +1,25 @@
 'use client'
 
 import { useState, useEffect } from 'react'
+import { useRouter } from 'next/navigation'
 import { Input, Button, toast } from '@ciphera-net/ui'
 import { Spinner } from '@ciphera-net/ui'
 import { useAuth } from '@/lib/auth/context'
-import { getOrganization, updateOrganization } from '@/lib/api/organization'
+import { getOrganization, updateOrganization, deleteOrganization } from '@/lib/api/organization'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
+import { useUnifiedSettings } from '@/lib/unified-settings-context'
 
 export default function WorkspaceGeneralTab() {
   const { user } = useAuth()
+  const router = useRouter()
+  const { closeUnifiedSettings } = useUnifiedSettings()
   const [name, setName] = useState('')
   const [slug, setSlug] = useState('')
   const [loading, setLoading] = useState(true)
   const [saving, setSaving] = useState(false)
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+  const [deleteText, setDeleteText] = useState('')
+  const [deleting, setDeleting] = useState(false)
 
   useEffect(() => {
     if (!user?.org_id) return
@@ -39,6 +46,20 @@ export default function WorkspaceGeneralTab() {
     }
   }
 
+  const handleDelete = async () => {
+    if (!user?.org_id || deleteText !== 'DELETE') return
+    setDeleting(true)
+    try {
+      await deleteOrganization(user.org_id)
+      localStorage.clear()
+      closeUnifiedSettings()
+      router.push('/')
+    } catch (err) {
+      toast.error(getAuthErrorMessage(err as Error) || 'Failed to delete organization')
+      setDeleting(false)
+    }
+  }
+
   if (loading) {
     return (
       <div className="flex items-center justify-center py-12">
@@ -79,18 +100,53 @@ export default function WorkspaceGeneralTab() {
       {/* Danger Zone */}
       <div className="space-y-3 pt-4 border-t border-neutral-800">
         <h3 className="text-base font-semibold text-red-500">Danger Zone</h3>
-        <div className="flex items-center justify-between rounded-xl border border-red-900/30 bg-red-900/10 p-4">
-          <div>
-            <p className="text-sm font-medium text-white">Delete Organization</p>
-            <p className="text-xs text-neutral-400">Permanently delete this organization and all its data.</p>
+        <div className="rounded-xl border border-red-900/30 bg-red-900/10 p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-white">Delete Organization</p>
+              <p className="text-xs text-neutral-400">Permanently delete this organization and all its data.</p>
+            </div>
+            <Button
+              variant="secondary"
+              className="text-red-400 border-red-900 hover:bg-red-900/20 text-sm"
+              onClick={() => setShowDeleteConfirm(prev => !prev)}
+            >
+              Delete
+            </Button>
           </div>
-          <Button
-            variant="secondary"
-            className="text-red-400 border-red-900 hover:bg-red-900/20 text-sm"
-            onClick={() => toast.error('Use Organization Settings page for destructive actions')}
-          >
-            Delete
-          </Button>
+          {showDeleteConfirm && (
+            <div className="mt-4 p-4 border border-red-900/50 bg-red-900/10 rounded-xl space-y-3">
+              <p className="text-sm text-red-300">This will permanently delete:</p>
+              <ul className="text-xs text-neutral-400 list-disc list-inside space-y-1">
+                <li>All sites and their analytics data</li>
+                <li>All team members and pending invitations</li>
+                <li>Active subscription will be cancelled</li>
+                <li>All notifications and settings</li>
+              </ul>
+              <div>
+                <label className="block text-xs text-neutral-400 mb-1">Type DELETE to confirm</label>
+                <input
+                  type="text"
+                  value={deleteText}
+                  onChange={e => setDeleteText(e.target.value)}
+                  className="w-full px-3 py-2 border border-neutral-700 rounded-lg bg-neutral-900 text-white text-sm"
+                  placeholder="DELETE"
+                />
+              </div>
+              <div className="flex gap-2">
+                <button
+                  onClick={handleDelete}
+                  disabled={deleteText !== 'DELETE' || deleting}
+                  className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-medium disabled:opacity-50"
+                >
+                  {deleting ? 'Deleting...' : 'Delete Organization'}
+                </button>
+                <button onClick={() => { setShowDeleteConfirm(false); setDeleteText('') }} className="px-4 py-2 text-neutral-400 hover:text-white text-sm">
+                  Cancel
+                </button>
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </div>
-- 
2.49.1


From 8bef4b7c9fd5925ce5298d03841750e2636a51ce Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 18:08:22 +0100
Subject: [PATCH 259/428] feat(settings): add member removal and pending
 invitations to unified members tab

---
 .../unified/tabs/WorkspaceMembersTab.tsx      | 68 ++++++++++++++++---
 lib/api/organization.ts                       |  7 ++
 2 files changed, 67 insertions(+), 8 deletions(-)

diff --git a/components/settings/unified/tabs/WorkspaceMembersTab.tsx b/components/settings/unified/tabs/WorkspaceMembersTab.tsx
index d23a6ee..f030476 100644
--- a/components/settings/unified/tabs/WorkspaceMembersTab.tsx
+++ b/components/settings/unified/tabs/WorkspaceMembersTab.tsx
@@ -4,7 +4,7 @@ import { useState, useEffect } from 'react'
 import { Button, Input, Select, toast, Spinner } from '@ciphera-net/ui'
 import { Plus, Trash, EnvelopeSimple, Crown, UserCircle } from '@phosphor-icons/react'
 import { useAuth } from '@/lib/auth/context'
-import { getOrganizationMembers, sendInvitation, type OrganizationMember } from '@/lib/api/organization'
+import { getOrganizationMembers, removeOrganizationMember, sendInvitation, getInvitations, revokeInvitation, type OrganizationMember, type OrganizationInvitation } from '@/lib/api/organization'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
 
 const ROLE_OPTIONS = [
@@ -33,6 +33,7 @@ function RoleBadge({ role }: { role: string }) {
 export default function WorkspaceMembersTab() {
   const { user } = useAuth()
   const [members, setMembers] = useState<OrganizationMember[]>([])
+  const [invitations, setInvitations] = useState<OrganizationInvitation[]>([])
   const [loading, setLoading] = useState(true)
   const [inviteEmail, setInviteEmail] = useState('')
   const [inviteRole, setInviteRole] = useState('member')
@@ -44,8 +45,12 @@ export default function WorkspaceMembersTab() {
   const loadMembers = async () => {
     if (!user?.org_id) return
     try {
-      const data = await getOrganizationMembers(user.org_id)
-      setMembers(data)
+      const [membersData, invitationsData] = await Promise.all([
+        getOrganizationMembers(user.org_id),
+        getInvitations(user.org_id).catch(() => [] as OrganizationInvitation[]),
+      ])
+      setMembers(membersData)
+      setInvitations(invitationsData)
     } catch { }
     finally { setLoading(false) }
   }
@@ -68,11 +73,28 @@ export default function WorkspaceMembersTab() {
     }
   }
 
-  const handleRemove = async (_memberId: string, email: string) => {
-    // Member removal requires the full org settings page (auth API endpoint)
-    toast.message(`To remove ${email}, use Organization Settings → Members.`, {
-      action: { label: 'Open', onClick: () => { window.location.href = '/org-settings?tab=members' } },
-    })
+  const handleRemove = async (memberId: string, email: string) => {
+    if (!user?.org_id) return
+    if (!confirm(`Remove ${email} from the organization?`)) return
+    try {
+      await removeOrganizationMember(user.org_id, memberId)
+      toast.success(`${email} has been removed`)
+      loadMembers()
+    } catch (err) {
+      toast.error(getAuthErrorMessage(err as Error) || 'Failed to remove member')
+    }
+  }
+
+  const handleRevokeInvitation = async (inviteId: string) => {
+    if (!user?.org_id) return
+    if (!confirm('Revoke this invitation?')) return
+    try {
+      await revokeInvitation(user.org_id, inviteId)
+      toast.success('Invitation revoked')
+      loadMembers()
+    } catch (err) {
+      toast.error(getAuthErrorMessage(err as Error) || 'Failed to revoke invitation')
+    }
   }
 
   if (loading) return <div className="flex items-center justify-center py-12"><Spinner className="w-6 h-6 text-neutral-500" /></div>
@@ -145,6 +167,36 @@ export default function WorkspaceMembersTab() {
           </div>
         ))}
       </div>
+
+      {/* Pending Invitations */}
+      {invitations.length > 0 && (
+        <div className="space-y-2 pt-4 border-t border-neutral-800">
+          <h4 className="text-sm font-medium text-neutral-300">Pending Invitations</h4>
+          {invitations.map(inv => (
+            <div key={inv.id} className="flex items-center justify-between p-3 rounded-xl border border-neutral-800">
+              <div className="flex items-center gap-3">
+                <span className="relative flex h-2 w-2">
+                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75" />
+                  <span className="relative inline-flex rounded-full h-2 w-2 bg-amber-400" />
+                </span>
+                <div>
+                  <span className="text-sm text-white">{inv.email}</span>
+                  <span className="ml-2 text-xs px-2 py-0.5 rounded-full bg-neutral-800 text-neutral-400">{inv.role}</span>
+                  <span className="ml-2 text-xs text-neutral-500">expires {new Date(inv.expires_at).toLocaleDateString('en-GB')}</span>
+                </div>
+              </div>
+              {canManage && (
+                <button
+                  onClick={() => handleRevokeInvitation(inv.id)}
+                  className="text-xs text-red-400 hover:text-red-300 font-medium"
+                >
+                  Revoke
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   )
 }
diff --git a/lib/api/organization.ts b/lib/api/organization.ts
index b48ab07..932b722 100644
--- a/lib/api/organization.ts
+++ b/lib/api/organization.ts
@@ -79,6 +79,13 @@ export async function getOrganizationMembers(organizationId: string): Promise<Or
   return data.members || []
 }
 
+// Remove a member from the organization
+export async function removeOrganizationMember(organizationId: string, userId: string): Promise<void> {
+  await authFetch(`/auth/organizations/${organizationId}/members/${userId}`, {
+    method: 'DELETE',
+  })
+}
+
 // Send an invitation
 export async function sendInvitation(
   organizationId: string, 
-- 
2.49.1


From 0cb13e08fdd0fad61bb01ed4f5c7a0c7628d2450 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 18:10:42 +0100
Subject: [PATCH 260/428] refactor(settings): wire all settings entry points to
 unified modal

---
 app/layout-content.tsx           | 12 ++++--------
 components/dashboard/Sidebar.tsx |  8 ++++----
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/app/layout-content.tsx b/app/layout-content.tsx
index 8e91ea6..df84659 100644
--- a/app/layout-content.tsx
+++ b/app/layout-content.tsx
@@ -15,9 +15,8 @@ import { getUserOrganizations, switchContext, type OrganizationMember } from '@/
 import { setSessionAction } from '@/app/actions/auth'
 import { LoadingOverlay } from '@ciphera-net/ui'
 import { useRouter } from 'next/navigation'
-import { SettingsModalProvider, useSettingsModal } from '@/lib/settings-modal-context'
-import { UnifiedSettingsProvider } from '@/lib/unified-settings-context'
-import SettingsModalWrapper from '@/components/settings/SettingsModalWrapper'
+import { SettingsModalProvider } from '@/lib/settings-modal-context'
+import { UnifiedSettingsProvider, useUnifiedSettings } from '@/lib/unified-settings-context'
 import UnifiedSettingsModal from '@/components/settings/unified/UnifiedSettingsModal'
 
 const ORG_SWITCH_KEY = 'pulse_switching_org'
@@ -54,7 +53,7 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
   const router = useRouter()
   const pathname = usePathname()
   const isOnline = useOnlineStatus()
-  const { openSettings } = useSettingsModal()
+  const { openUnifiedSettings } = useUnifiedSettings()
   const [orgs, setOrgs] = useState<OrganizationMember[]>([])
   const [isSwitchingOrg, setIsSwitchingOrg] = useState(() => {
     if (typeof window === 'undefined') return false
@@ -110,7 +109,6 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
       <>
         {showOfflineBar && <OfflineBanner isOnline={isOnline} />}
         {children}
-        <SettingsModalWrapper />
         <UnifiedSettingsModal />
       </>
     )
@@ -138,12 +136,11 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
           rightSideActions={<NotificationCenter />}
           apps={CIPHERA_APPS}
           currentAppId="pulse"
-          onOpenSettings={openSettings}
+          onOpenSettings={() => openUnifiedSettings({ context: 'account', tab: 'profile' })}
         />
         <main className="flex-1 pb-8">
           {children}
         </main>
-        <SettingsModalWrapper />
         <UnifiedSettingsModal />
       </div>
     )
@@ -161,7 +158,6 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
         appName="Pulse"
         isAuthenticated={false}
       />
-      <SettingsModalWrapper />
     </div>
   )
 }
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 91f0a62..0f5b7d9 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -7,7 +7,7 @@ import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
 import { listSites, type Site } from '@/lib/api/sites'
 import { useAuth } from '@/lib/auth/context'
-import { useSettingsModal } from '@/lib/settings-modal-context'
+import { useUnifiedSettings } from '@/lib/unified-settings-context'
 import { useSidebar } from '@/lib/sidebar-context'
 // `,` shortcut handled globally by UnifiedSettingsModal
 import { getUserOrganizations, switchContext, type OrganizationMember } from '@/lib/api/organization'
@@ -461,7 +461,7 @@ export default function Sidebar({
   const canEdit = user?.role === 'owner' || user?.role === 'admin'
   const pathname = usePathname()
   const router = useRouter()
-  const { openSettings } = useSettingsModal()
+  const { openUnifiedSettings } = useUnifiedSettings()
   const [sites, setSites] = useState<Site[]>([])
   const [orgs, setOrgs] = useState<OrganizationMember[]>([])
   const [pendingHref, setPendingHref] = useState<string | null>(null)
@@ -532,7 +532,7 @@ export default function Sidebar({
           auth={auth}
           orgs={orgs}
           onSwitchOrganization={handleSwitchOrganization}
-          openSettings={openSettings}
+          openSettings={() => openUnifiedSettings({ context: 'account', tab: 'profile' })}
         />
       </aside>
 
@@ -575,7 +575,7 @@ export default function Sidebar({
               auth={auth}
               orgs={orgs}
               onSwitchOrganization={handleSwitchOrganization}
-              openSettings={openSettings}
+              openSettings={() => openUnifiedSettings({ context: 'account', tab: 'profile' })}
             />
           </aside>
         </>
-- 
2.49.1


From 1fef7b175c32940c6f34da06c9dc353ea70efc0c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 18:11:01 +0100
Subject: [PATCH 261/428] feat(settings): add filtering and pagination to
 unified audit tab

---
 .../unified/tabs/WorkspaceAuditTab.tsx        | 84 ++++++++++++++++++-
 1 file changed, 81 insertions(+), 3 deletions(-)

diff --git a/components/settings/unified/tabs/WorkspaceAuditTab.tsx b/components/settings/unified/tabs/WorkspaceAuditTab.tsx
index 6f29469..208d59f 100644
--- a/components/settings/unified/tabs/WorkspaceAuditTab.tsx
+++ b/components/settings/unified/tabs/WorkspaceAuditTab.tsx
@@ -30,18 +30,35 @@ const ACTION_LABELS: Record<string, string> = {
   subscription_resumed: 'Resumed subscription',
 }
 
+const PAGE_SIZE = 20
+
 export default function WorkspaceAuditTab() {
   const { user } = useAuth()
   const [entries, setEntries] = useState<AuditLogEntry[]>([])
   const [loading, setLoading] = useState(true)
+  const [page, setPage] = useState(1)
+  const [total, setTotal] = useState(0)
+  const [actionFilter, setActionFilter] = useState('')
+  const [startDate, setStartDate] = useState('')
+  const [endDate, setEndDate] = useState('')
 
   useEffect(() => {
     if (!user?.org_id) return
-    getAuditLog({ limit: 50 })
-      .then(data => setEntries(data.entries))
+    setLoading(true)
+    getAuditLog({
+      limit: PAGE_SIZE,
+      offset: (page - 1) * PAGE_SIZE,
+      ...(actionFilter && { action: actionFilter }),
+      ...(startDate && { start_date: startDate }),
+      ...(endDate && { end_date: endDate }),
+    })
+      .then(data => {
+        setEntries(data.entries)
+        setTotal(data.total)
+      })
       .catch(() => {})
       .finally(() => setLoading(false))
-  }, [user?.org_id])
+  }, [user?.org_id, page, actionFilter, startDate, endDate])
 
   if (loading) return <div className="flex items-center justify-center py-12"><Spinner className="w-6 h-6 text-neutral-500" /></div>
 
@@ -52,6 +69,45 @@ export default function WorkspaceAuditTab() {
         <p className="text-sm text-neutral-400">Track who made changes and when.</p>
       </div>
 
+      <div className="flex flex-wrap gap-2 items-end">
+        <div>
+          <label className="block text-xs text-neutral-500 mb-1">Action</label>
+          <input
+            type="text"
+            value={actionFilter}
+            onChange={e => { setActionFilter(e.target.value); setPage(1) }}
+            placeholder="e.g. site_created"
+            className="px-3 py-1.5 border border-neutral-700 rounded-lg bg-neutral-900 text-white text-sm w-40"
+          />
+        </div>
+        <div>
+          <label className="block text-xs text-neutral-500 mb-1">From</label>
+          <input
+            type="date"
+            value={startDate}
+            onChange={e => { setStartDate(e.target.value); setPage(1) }}
+            className="px-3 py-1.5 border border-neutral-700 rounded-lg bg-neutral-900 text-white text-sm"
+          />
+        </div>
+        <div>
+          <label className="block text-xs text-neutral-500 mb-1">To</label>
+          <input
+            type="date"
+            value={endDate}
+            onChange={e => { setEndDate(e.target.value); setPage(1) }}
+            className="px-3 py-1.5 border border-neutral-700 rounded-lg bg-neutral-900 text-white text-sm"
+          />
+        </div>
+        {(actionFilter || startDate || endDate) && (
+          <button
+            onClick={() => { setActionFilter(''); setStartDate(''); setEndDate(''); setPage(1) }}
+            className="text-xs text-neutral-400 hover:text-white px-3 py-1.5"
+          >
+            Clear
+          </button>
+        )}
+      </div>
+
       {entries.length === 0 ? (
         <p className="text-sm text-neutral-500 text-center py-8">No activity recorded yet.</p>
       ) : (
@@ -75,6 +131,28 @@ export default function WorkspaceAuditTab() {
           ))}
         </div>
       )}
+
+      <div className="flex items-center justify-between pt-3 border-t border-neutral-800">
+        <span className="text-xs text-neutral-500">
+          {total > 0 ? `${(page - 1) * PAGE_SIZE + 1}–${Math.min(page * PAGE_SIZE, total)} of ${total}` : 'No entries'}
+        </span>
+        <div className="flex gap-2">
+          <button
+            onClick={() => setPage(p => Math.max(1, p - 1))}
+            disabled={page <= 1}
+            className="px-3 py-1 text-xs text-neutral-400 hover:text-white disabled:opacity-30"
+          >
+            Previous
+          </button>
+          <button
+            onClick={() => setPage(p => p + 1)}
+            disabled={page * PAGE_SIZE >= total}
+            className="px-3 py-1 text-xs text-neutral-400 hover:text-white disabled:opacity-30"
+          >
+            Next
+          </button>
+        </div>
+      </div>
     </div>
   )
 }
-- 
2.49.1


From 0f5a3388a0f4389609cefcb59f0a41e4ba87580b Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 18:16:05 +0100
Subject: [PATCH 262/428] fix: use correct PageSpeedConfig field name
 (frequency, not check_frequency)

---
 components/settings/unified/tabs/SitePrivacyTab.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/settings/unified/tabs/SitePrivacyTab.tsx b/components/settings/unified/tabs/SitePrivacyTab.tsx
index 1834578..001e214 100644
--- a/components/settings/unified/tabs/SitePrivacyTab.tsx
+++ b/components/settings/unified/tabs/SitePrivacyTab.tsx
@@ -170,10 +170,10 @@ export default function SitePrivacyTab({ siteId }: { siteId: string }) {
             </div>
             {psiConfig?.enabled ? (
               <Select
-                value={psiConfig.check_frequency || 'weekly'}
+                value={psiConfig.frequency || 'weekly'}
                 onChange={async (v) => {
                   try {
-                    await updatePageSpeedConfig(siteId, { check_frequency: v })
+                    await updatePageSpeedConfig(siteId, { enabled: psiConfig.enabled, frequency: v })
                     mutatePSIConfig()
                     toast.success('Check frequency updated')
                   } catch {
-- 
2.49.1


From 688d268fbf82d22ade4668bd34c93b4e221e2406 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 18:21:50 +0100
Subject: [PATCH 263/428] fix: proper Google/Bunny logos and BunnyCDN status
 grid in unified integrations

---
 .../unified/tabs/SiteIntegrationsTab.tsx      | 59 ++++++++++++++++++-
 1 file changed, 56 insertions(+), 3 deletions(-)

diff --git a/components/settings/unified/tabs/SiteIntegrationsTab.tsx b/components/settings/unified/tabs/SiteIntegrationsTab.tsx
index ab01cd6..fbbef09 100644
--- a/components/settings/unified/tabs/SiteIntegrationsTab.tsx
+++ b/components/settings/unified/tabs/SiteIntegrationsTab.tsx
@@ -2,13 +2,39 @@
 
 import { useState } from 'react'
 import { Button, toast, Spinner } from '@ciphera-net/ui'
-import { GoogleLogo, ArrowSquareOut, Plugs, Trash, ShieldCheck, CaretDown } from '@phosphor-icons/react'
+import { Plugs, Trash, ShieldCheck, CaretDown } from '@phosphor-icons/react'
 import { useGSCStatus, useBunnyStatus } from '@/lib/swr/dashboard'
 import { disconnectGSC, getGSCAuthURL } from '@/lib/api/gsc'
 import { disconnectBunny, getBunnyPullZones, connectBunny, type BunnyPullZone } from '@/lib/api/bunny'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { formatDateTime } from '@/lib/utils/formatDate'
 
+function GoogleIcon() {
+  return (
+    <svg className="w-5 h-5" viewBox="0 0 24 24">
+      <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4" />
+      <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+      <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
+      <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+    </svg>
+  )
+}
+
+function BunnyIcon() {
+  return (
+    <svg className="w-5 h-5" viewBox="0 0 24 24">
+      <defs>
+        <linearGradient id="bunny-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stopColor="#FF6B00" />
+          <stop offset="100%" stopColor="#FF9E00" />
+        </linearGradient>
+      </defs>
+      <circle cx="12" cy="12" r="11" fill="url(#bunny-grad)" />
+      <path d="M8.5 7c-.8-2-2.5-3-2.5-3s.5 2.5 1 3.5C5.5 8.5 5 10.5 5 12c0 3.9 3.1 7 7 7s7-3.1 7-7c0-1.5-.5-3.5-2-4.5.5-1 1-3.5 1-3.5s-1.7 1-2.5 3C14.5 6.5 13.3 6 12 6s-2.5.5-3.5 1z" fill="white" fillOpacity="0.9" />
+    </svg>
+  )
+}
+
 function IntegrationCard({
   icon,
   name,
@@ -281,7 +307,7 @@ export default function SiteIntegrationsTab({ siteId }: { siteId: string }) {
 
       <div className="space-y-3">
         <IntegrationCard
-          icon={<GoogleLogo weight="bold" className="w-5 h-5 text-white" />}
+          icon={<GoogleIcon />}
           name="Google Search Console"
           description="View search queries, clicks, impressions, and ranking data."
           connected={gscStatus?.connected ?? false}
@@ -295,7 +321,7 @@ export default function SiteIntegrationsTab({ siteId }: { siteId: string }) {
         </IntegrationCard>
 
         <IntegrationCard
-          icon={<img src="https://ciphera.net/bunny-icon.svg" alt="BunnyCDN" className="w-5 h-5" onError={e => { (e.target as HTMLImageElement).style.display = 'none' }} />}
+          icon={<BunnyIcon />}
           name="BunnyCDN"
           description="Monitor bandwidth, cache hit rates, and CDN performance."
           connected={bunnyConnected}
@@ -303,6 +329,33 @@ export default function SiteIntegrationsTab({ siteId }: { siteId: string }) {
           onConnect={handleConnectBunny}
           onDisconnect={handleDisconnectBunny}
         >
+          {bunnyConnected && (
+            <div className="px-4 pb-4 space-y-3">
+              <div className="grid grid-cols-2 gap-x-6 gap-y-2 px-4 py-3 rounded-lg bg-neutral-800/40 border border-neutral-700/50">
+                <div className="flex flex-col gap-0.5">
+                  <span className="text-xs text-neutral-500">Pull Zone</span>
+                  <span className="text-sm text-white">{bunnyStatus?.pull_zone_name || 'Unknown'}</span>
+                </div>
+                <div className="flex flex-col gap-0.5">
+                  <span className="text-xs text-neutral-500">Last Synced</span>
+                  <span className="text-sm text-white">{bunnyStatus?.last_synced_at ? formatDateTime(new Date(bunnyStatus.last_synced_at)) : 'Never'}</span>
+                </div>
+                <div className="flex flex-col gap-0.5">
+                  <span className="text-xs text-neutral-500">Connected Since</span>
+                  <span className="text-sm text-white">{bunnyStatus?.created_at ? formatDateTime(new Date(bunnyStatus.created_at)) : 'Unknown'}</span>
+                </div>
+                <div className="flex flex-col gap-0.5">
+                  <span className="text-xs text-neutral-500">Status</span>
+                  <StatusDot status={bunnyStatus?.status} />
+                </div>
+              </div>
+              {bunnyStatus?.error_message && (
+                <div className="px-4 py-3 rounded-lg bg-red-900/20 border border-red-900/50">
+                  <p className="text-xs text-red-400">{bunnyStatus.error_message}</p>
+                </div>
+              )}
+            </div>
+          )}
           {!bunnyConnected && showBunnySetup && (
             <BunnySetupForm
               siteId={siteId}
-- 
2.49.1


From 1ad68943c8bb6f466b474bf691329cbcf230f7a7 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 18:23:58 +0100
Subject: [PATCH 264/428] fix: reset tabs to default when switching settings
 context

---
 components/settings/unified/UnifiedSettingsModal.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index 3df756d..4f133ec 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -287,6 +287,10 @@ export default function UnifiedSettingsModal() {
 
   const handleContextChange = useCallback((ctx: SettingsContext) => {
     setContext(ctx)
+    // Reset tabs to defaults when switching context
+    if (ctx === 'site') setSiteTabs('general')
+    else if (ctx === 'workspace') setWorkspaceTabs('general')
+    else if (ctx === 'account') setAccountTabs('profile')
   }, [])
 
   return (
-- 
2.49.1


From 9a3fab3535f89614f29f259c2774963d1ea9043c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 20:09:11 +0100
Subject: [PATCH 265/428] feat(settings): unsaved changes guard with inline
 confirmation bar

---
 .../settings/unified/UnifiedSettingsModal.tsx | 135 +++++++++++++++---
 .../settings/unified/tabs/SiteBotSpamTab.tsx  |  18 ++-
 .../settings/unified/tabs/SiteGeneralTab.tsx  |  15 +-
 .../settings/unified/tabs/SitePrivacyTab.tsx  |  24 +++-
 .../unified/tabs/SiteVisibilityTab.tsx        |  16 ++-
 5 files changed, 176 insertions(+), 32 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index 4f133ec..09f462d 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -1,8 +1,8 @@
 'use client'
 
-import { useState, useCallback, useEffect } from 'react'
+import { useState, useCallback, useEffect, useRef } from 'react'
 import { AnimatePresence, motion } from 'framer-motion'
-import { X, GearSix, Buildings, User } from '@phosphor-icons/react'
+import { X, GearSix, Buildings, User, Warning } from '@phosphor-icons/react'
 import { useUnifiedSettings } from '@/lib/unified-settings-context'
 import { useAuth } from '@/lib/auth/context'
 import { useSite } from '@/lib/swr/dashboard'
@@ -172,19 +172,21 @@ function TabContent({
   context,
   activeTab,
   siteId,
+  onDirtyChange,
 }: {
   context: SettingsContext
   activeTab: string
   siteId: string | null
+  onDirtyChange: (dirty: boolean) => void
 }) {
   // Site tabs
   if (context === 'site' && siteId) {
     switch (activeTab) {
-      case 'general': return <SiteGeneralTab siteId={siteId} />
+      case 'general': return <SiteGeneralTab siteId={siteId} onDirtyChange={onDirtyChange} />
       case 'goals': return <SiteGoalsTab siteId={siteId} />
-      case 'visibility': return <SiteVisibilityTab siteId={siteId} />
-      case 'privacy': return <SitePrivacyTab siteId={siteId} />
-      case 'bot-spam': return <SiteBotSpamTab siteId={siteId} />
+      case 'visibility': return <SiteVisibilityTab siteId={siteId} onDirtyChange={onDirtyChange} />
+      case 'privacy': return <SitePrivacyTab siteId={siteId} onDirtyChange={onDirtyChange} />
+      case 'bot-spam': return <SiteBotSpamTab siteId={siteId} onDirtyChange={onDirtyChange} />
       case 'reports': return <SiteReportsTab siteId={siteId} />
       case 'integrations': return <SiteIntegrationsTab siteId={siteId} />
     }
@@ -227,6 +229,39 @@ export default function UnifiedSettingsModal() {
   const [sites, setSites] = useState<Site[]>([])
   const [activeSiteId, setActiveSiteId] = useState<string | null>(null)
 
+  // ─── Dirty state & pending navigation ────────────────────────
+  const isDirtyRef = useRef(false)
+  const [showDirtyBar, setShowDirtyBar] = useState(false)
+  const pendingActionRef = useRef<(() => void) | null>(null)
+
+  const handleDirtyChange = useCallback((dirty: boolean) => {
+    isDirtyRef.current = dirty
+    // Hide the bar if user saves (dirty becomes false) while bar is showing
+    if (!dirty) setShowDirtyBar(false)
+  }, [])
+
+  /** Try to execute an action — if dirty, show confirmation bar instead */
+  const guardedAction = useCallback((action: () => void) => {
+    if (isDirtyRef.current) {
+      pendingActionRef.current = action
+      setShowDirtyBar(true)
+    } else {
+      action()
+    }
+  }, [])
+
+  const handleDiscardAndContinue = useCallback(() => {
+    isDirtyRef.current = false
+    setShowDirtyBar(false)
+    pendingActionRef.current?.()
+    pendingActionRef.current = null
+  }, [])
+
+  const handleStayHere = useCallback(() => {
+    setShowDirtyBar(false)
+    pendingActionRef.current = null
+  }, [])
+
   // Apply initial tab when modal opens
   useEffect(() => {
     if (isOpen && initTab) {
@@ -239,24 +274,30 @@ export default function UnifiedSettingsModal() {
     }
   }, [isOpen, initTab])
 
+  // Reset dirty state when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      isDirtyRef.current = false
+      setShowDirtyBar(false)
+      pendingActionRef.current = null
+    }
+  }, [isOpen])
+
   // Detect site from URL and load sites list when modal opens
   useEffect(() => {
     if (!isOpen || !user?.org_id) return
 
-    // Pick up site ID from URL — this is the only site the user can configure
     if (typeof window !== 'undefined') {
       const match = window.location.pathname.match(/\/sites\/([a-f0-9-]+)/)
       if (match) {
         setActiveSiteId(match[1])
         setContext('site')
       } else {
-        // Not on a site page — default to organization context
         setActiveSiteId(null)
         if (!initTab?.context) setContext('workspace')
       }
     }
 
-    // Load sites for domain display
     listSites().then(data => {
       setSites(Array.isArray(data) ? data : [])
     }).catch(() => {})
@@ -270,28 +311,42 @@ export default function UnifiedSettingsModal() {
 
       if (e.key === ',' && !e.metaKey && !e.ctrlKey && !e.altKey) {
         e.preventDefault()
-        if (isOpen) closeSettings()
+        if (isOpen) guardedAction(closeSettings)
         else openUnifiedSettings()
       }
       if (e.key === 'Escape' && isOpen) {
-        closeSettings()
+        if (showDirtyBar) handleStayHere()
+        else guardedAction(closeSettings)
       }
     }
     window.addEventListener('keydown', handler)
     return () => window.removeEventListener('keydown', handler)
-  }, [isOpen, openUnifiedSettings, closeSettings])
+  }, [isOpen, openUnifiedSettings, closeSettings, guardedAction, showDirtyBar, handleStayHere])
 
   const tabs = context === 'site' ? SITE_TABS : context === 'workspace' ? WORKSPACE_TABS : ACCOUNT_TABS
   const activeTab = context === 'site' ? siteTabs : context === 'workspace' ? workspaceTabs : accountTabs
   const setActiveTab = context === 'site' ? setSiteTabs : context === 'workspace' ? setWorkspaceTabs : setAccountTabs
 
   const handleContextChange = useCallback((ctx: SettingsContext) => {
-    setContext(ctx)
-    // Reset tabs to defaults when switching context
-    if (ctx === 'site') setSiteTabs('general')
-    else if (ctx === 'workspace') setWorkspaceTabs('general')
-    else if (ctx === 'account') setAccountTabs('profile')
-  }, [])
+    guardedAction(() => {
+      setContext(ctx)
+      if (ctx === 'site') setSiteTabs('general')
+      else if (ctx === 'workspace') setWorkspaceTabs('general')
+      else if (ctx === 'account') setAccountTabs('profile')
+    })
+  }, [guardedAction])
+
+  const handleTabChange = useCallback((tabId: string) => {
+    guardedAction(() => setActiveTab(tabId))
+  }, [guardedAction, setActiveTab])
+
+  const handleClose = useCallback(() => {
+    guardedAction(closeSettings)
+  }, [guardedAction, closeSettings])
+
+  const handleBackdropClick = useCallback(() => {
+    guardedAction(closeSettings)
+  }, [guardedAction, closeSettings])
 
   return (
     <AnimatePresence>
@@ -304,7 +359,7 @@ export default function UnifiedSettingsModal() {
             exit={{ opacity: 0 }}
             transition={{ duration: 0.2 }}
             className="fixed inset-0 z-[60] bg-black/60 backdrop-blur-sm"
-            onClick={closeSettings}
+            onClick={handleBackdropClick}
           />
 
           {/* Modal */}
@@ -324,7 +379,7 @@ export default function UnifiedSettingsModal() {
                 <div className="flex items-center justify-between mb-4">
                   <h2 className="text-lg font-semibold text-white">Settings</h2>
                   <button
-                    onClick={closeSettings}
+                    onClick={handleClose}
                     className="p-1.5 rounded-lg text-neutral-500 hover:text-white hover:bg-neutral-800 transition-colors"
                   >
                     <X weight="bold" className="w-4 h-4" />
@@ -340,11 +395,45 @@ export default function UnifiedSettingsModal() {
 
                 {/* Tabs */}
                 <div className="mt-4">
-                  <TabBar tabs={tabs} activeTab={activeTab} onChange={setActiveTab} />
+                  <TabBar tabs={tabs} activeTab={activeTab} onChange={handleTabChange} />
                 </div>
               </div>
 
-              {/* Content — parent has fixed h-[85vh] so this fills remaining space without jumping */}
+              {/* Unsaved changes bar */}
+              <AnimatePresence>
+                {showDirtyBar && (
+                  <motion.div
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: 'auto', opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    transition={{ duration: 0.15 }}
+                    className="shrink-0 overflow-hidden"
+                  >
+                    <div className="flex items-center justify-between gap-3 px-6 py-2.5 bg-amber-900/20 border-b border-amber-800/40">
+                      <div className="flex items-center gap-2 text-sm text-amber-200">
+                        <Warning weight="bold" className="w-4 h-4 text-amber-400 shrink-0" />
+                        You have unsaved changes.
+                      </div>
+                      <div className="flex items-center gap-2 shrink-0">
+                        <button
+                          onClick={handleDiscardAndContinue}
+                          className="px-3 py-1 text-xs font-medium text-amber-300 hover:text-white bg-amber-800/30 hover:bg-amber-800/50 rounded-lg transition-colors"
+                        >
+                          Discard & continue
+                        </button>
+                        <button
+                          onClick={handleStayHere}
+                          className="px-3 py-1 text-xs font-medium text-neutral-400 hover:text-white transition-colors"
+                        >
+                          Stay here
+                        </button>
+                      </div>
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+
+              {/* Content */}
               <div className="flex-1 overflow-y-auto overflow-x-hidden">
                 <AnimatePresence mode="wait">
                   <motion.div
@@ -355,7 +444,7 @@ export default function UnifiedSettingsModal() {
                     transition={{ duration: 0.12 }}
                     className="p-6"
                   >
-                    <TabContent context={context} activeTab={activeTab} siteId={activeSiteId} />
+                    <TabContent context={context} activeTab={activeTab} siteId={activeSiteId} onDirtyChange={handleDirtyChange} />
                   </motion.div>
                 </AnimatePresence>
               </div>
diff --git a/components/settings/unified/tabs/SiteBotSpamTab.tsx b/components/settings/unified/tabs/SiteBotSpamTab.tsx
index 7055e73..bfd736a 100644
--- a/components/settings/unified/tabs/SiteBotSpamTab.tsx
+++ b/components/settings/unified/tabs/SiteBotSpamTab.tsx
@@ -1,17 +1,18 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { Button, Toggle, toast, Spinner, getDateRange } from '@ciphera-net/ui'
 import { ShieldCheck } from '@phosphor-icons/react'
 import { useSite, useBotFilterStats, useSessions } from '@/lib/swr/dashboard'
 import { updateSite } from '@/lib/api/sites'
 import { botFilterSessions, botUnfilterSessions } from '@/lib/api/bot-filter'
 
-export default function SiteBotSpamTab({ siteId }: { siteId: string }) {
+export default function SiteBotSpamTab({ siteId, onDirtyChange }: { siteId: string; onDirtyChange?: (dirty: boolean) => void }) {
   const { data: site, mutate } = useSite(siteId)
   const { data: botStats, mutate: mutateBotStats } = useBotFilterStats(siteId)
   const [filterBots, setFilterBots] = useState(false)
   const [saving, setSaving] = useState(false)
+  const initialFilterRef = useRef<boolean | null>(null)
 
   const [botView, setBotView] = useState<'review' | 'blocked'>('review')
   const [suspiciousOnly, setSuspiciousOnly] = useState(true)
@@ -22,14 +23,25 @@ export default function SiteBotSpamTab({ siteId }: { siteId: string }) {
   const sessions = sessionsData?.sessions
 
   useEffect(() => {
-    if (site) setFilterBots(site.filter_bots ?? false)
+    if (site) {
+      setFilterBots(site.filter_bots ?? false)
+      initialFilterRef.current = site.filter_bots ?? false
+    }
   }, [site])
 
+  // Track dirty state
+  useEffect(() => {
+    if (initialFilterRef.current === null) return
+    onDirtyChange?.(filterBots !== initialFilterRef.current)
+  }, [filterBots, onDirtyChange])
+
   const handleSave = async () => {
     setSaving(true)
     try {
       await updateSite(siteId, { name: site?.name || '', filter_bots: filterBots })
       await mutate()
+      initialFilterRef.current = filterBots
+      onDirtyChange?.(false)
       toast.success('Bot filtering updated')
     } catch {
       toast.error('Failed to save')
diff --git a/components/settings/unified/tabs/SiteGeneralTab.tsx b/components/settings/unified/tabs/SiteGeneralTab.tsx
index eb91777..4ada9ca 100644
--- a/components/settings/unified/tabs/SiteGeneralTab.tsx
+++ b/components/settings/unified/tabs/SiteGeneralTab.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { useRouter } from 'next/navigation'
 import { Input, Button, Select, toast, Spinner, getAuthErrorMessage, CheckIcon, ZapIcon } from '@ciphera-net/ui'
 import { useSite } from '@/lib/swr/dashboard'
@@ -28,7 +28,7 @@ const TIMEZONES = [
   { value: 'Australia/Sydney', label: 'Australia/Sydney (AEST)' },
 ]
 
-export default function SiteGeneralTab({ siteId }: { siteId: string }) {
+export default function SiteGeneralTab({ siteId, onDirtyChange }: { siteId: string; onDirtyChange?: (dirty: boolean) => void }) {
   const router = useRouter()
   const { user } = useAuth()
   const { closeUnifiedSettings: closeSettings } = useUnifiedSettings()
@@ -40,20 +40,31 @@ export default function SiteGeneralTab({ siteId }: { siteId: string }) {
   const [showVerificationModal, setShowVerificationModal] = useState(false)
 
   const canEdit = user?.role === 'owner' || user?.role === 'admin'
+  const initialRef = useRef('')
 
   useEffect(() => {
     if (site) {
       setName(site.name || '')
       setTimezone(site.timezone || 'UTC')
+      initialRef.current = JSON.stringify({ name: site.name || '', timezone: site.timezone || 'UTC' })
     }
   }, [site])
 
+  // Track dirty state
+  useEffect(() => {
+    if (!initialRef.current) return
+    const current = JSON.stringify({ name, timezone })
+    onDirtyChange?.(current !== initialRef.current)
+  }, [name, timezone, onDirtyChange])
+
   const handleSave = async () => {
     if (!site) return
     setSaving(true)
     try {
       await updateSite(siteId, { name, timezone })
       await mutate()
+      initialRef.current = JSON.stringify({ name, timezone })
+      onDirtyChange?.(false)
       toast.success('Site updated')
     } catch {
       toast.error('Failed to save')
diff --git a/components/settings/unified/tabs/SitePrivacyTab.tsx b/components/settings/unified/tabs/SitePrivacyTab.tsx
index 001e214..3fc8446 100644
--- a/components/settings/unified/tabs/SitePrivacyTab.tsx
+++ b/components/settings/unified/tabs/SitePrivacyTab.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { Button, Select, Toggle, toast, Spinner } from '@ciphera-net/ui'
 import { useSite, useSubscription, usePageSpeedConfig } from '@/lib/swr/dashboard'
 import { updateSite } from '@/lib/api/sites'
@@ -16,7 +16,7 @@ const GEO_OPTIONS = [
   { value: 'none', label: 'Disabled' },
 ]
 
-export default function SitePrivacyTab({ siteId }: { siteId: string }) {
+export default function SitePrivacyTab({ siteId, onDirtyChange }: { siteId: string; onDirtyChange?: (dirty: boolean) => void }) {
   const { data: site, mutate } = useSite(siteId)
   const { data: subscription, error: subscriptionError, mutate: mutateSubscription } = useSubscription()
   const { data: psiConfig, mutate: mutatePSIConfig } = usePageSpeedConfig(siteId)
@@ -30,6 +30,7 @@ export default function SitePrivacyTab({ siteId }: { siteId: string }) {
   const [excludedPaths, setExcludedPaths] = useState('')
   const [snippetCopied, setSnippetCopied] = useState(false)
   const [saving, setSaving] = useState(false)
+  const initialRef = useRef('')
 
   useEffect(() => {
     if (site) {
@@ -41,9 +42,26 @@ export default function SitePrivacyTab({ siteId }: { siteId: string }) {
       setHideUnknownLocations(site.hide_unknown_locations ?? false)
       setDataRetention(site.data_retention_months ?? 6)
       setExcludedPaths((site.excluded_paths || []).join('\n'))
+      initialRef.current = JSON.stringify({
+        collectPagePaths: site.collect_page_paths ?? true,
+        collectReferrers: site.collect_referrers ?? true,
+        collectDeviceInfo: site.collect_device_info ?? true,
+        collectScreenRes: site.collect_screen_resolution ?? true,
+        collectGeoData: site.collect_geo_data ?? 'full',
+        hideUnknownLocations: site.hide_unknown_locations ?? false,
+        dataRetention: site.data_retention_months ?? 6,
+        excludedPaths: (site.excluded_paths || []).join('\n'),
+      })
     }
   }, [site])
 
+  // Track dirty state
+  useEffect(() => {
+    if (!initialRef.current) return
+    const current = JSON.stringify({ collectPagePaths, collectReferrers, collectDeviceInfo, collectScreenRes, collectGeoData, hideUnknownLocations, dataRetention, excludedPaths })
+    onDirtyChange?.(current !== initialRef.current)
+  }, [collectPagePaths, collectReferrers, collectDeviceInfo, collectScreenRes, collectGeoData, hideUnknownLocations, dataRetention, excludedPaths, onDirtyChange])
+
   const handleSave = async () => {
     setSaving(true)
     try {
@@ -59,6 +77,8 @@ export default function SitePrivacyTab({ siteId }: { siteId: string }) {
         excluded_paths: excludedPaths.split('\n').map(p => p.trim()).filter(Boolean),
       })
       await mutate()
+      initialRef.current = JSON.stringify({ collectPagePaths, collectReferrers, collectDeviceInfo, collectScreenRes, collectGeoData, hideUnknownLocations, dataRetention, excludedPaths })
+      onDirtyChange?.(false)
       toast.success('Privacy settings updated')
     } catch {
       toast.error('Failed to save')
diff --git a/components/settings/unified/tabs/SiteVisibilityTab.tsx b/components/settings/unified/tabs/SiteVisibilityTab.tsx
index 33d80e0..87ab2b9 100644
--- a/components/settings/unified/tabs/SiteVisibilityTab.tsx
+++ b/components/settings/unified/tabs/SiteVisibilityTab.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { Button, Input, Toggle, toast, Spinner } from '@ciphera-net/ui'
 import { Copy, CheckCircle, Lock } from '@phosphor-icons/react'
 import { AnimatePresence, motion } from 'framer-motion'
@@ -9,21 +9,31 @@ import { updateSite } from '@/lib/api/sites'
 
 const APP_URL = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3003'
 
-export default function SiteVisibilityTab({ siteId }: { siteId: string }) {
+export default function SiteVisibilityTab({ siteId, onDirtyChange }: { siteId: string; onDirtyChange?: (dirty: boolean) => void }) {
   const { data: site, mutate } = useSite(siteId)
   const [isPublic, setIsPublic] = useState(false)
   const [password, setPassword] = useState('')
   const [passwordEnabled, setPasswordEnabled] = useState(false)
   const [saving, setSaving] = useState(false)
   const [linkCopied, setLinkCopied] = useState(false)
+  const initialRef = useRef('')
 
   useEffect(() => {
     if (site) {
       setIsPublic(site.is_public ?? false)
       setPasswordEnabled(site.has_password ?? false)
+      initialRef.current = JSON.stringify({ isPublic: site.is_public ?? false, passwordEnabled: site.has_password ?? false })
     }
   }, [site])
 
+  // Track dirty state
+  useEffect(() => {
+    if (!initialRef.current) return
+    const current = JSON.stringify({ isPublic, passwordEnabled })
+    const dirty = current !== initialRef.current || password.length > 0
+    onDirtyChange?.(dirty)
+  }, [isPublic, passwordEnabled, password, onDirtyChange])
+
   const handleSave = async () => {
     setSaving(true)
     try {
@@ -35,6 +45,8 @@ export default function SiteVisibilityTab({ siteId }: { siteId: string }) {
       })
       setPassword('')
       await mutate()
+      initialRef.current = JSON.stringify({ isPublic, passwordEnabled })
+      onDirtyChange?.(false)
       toast.success('Visibility updated')
     } catch {
       toast.error('Failed to save')
-- 
2.49.1


From 9dceca765c47cfd0a16199930c54367702e249b2 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 20:18:26 +0100
Subject: [PATCH 266/428] feat(settings): sticky save bar appears only when
 dirty, replaces static button

---
 .../settings/unified/tabs/SiteBotSpamTab.tsx  | 19 +++++++++++------
 .../settings/unified/tabs/SiteGeneralTab.tsx  | 21 ++++++++++++-------
 .../settings/unified/tabs/SitePrivacyTab.tsx  | 20 ++++++++++++------
 .../unified/tabs/SiteVisibilityTab.tsx        | 17 ++++++++++-----
 4 files changed, 53 insertions(+), 24 deletions(-)

diff --git a/components/settings/unified/tabs/SiteBotSpamTab.tsx b/components/settings/unified/tabs/SiteBotSpamTab.tsx
index bfd736a..173faf3 100644
--- a/components/settings/unified/tabs/SiteBotSpamTab.tsx
+++ b/components/settings/unified/tabs/SiteBotSpamTab.tsx
@@ -12,6 +12,7 @@ export default function SiteBotSpamTab({ siteId, onDirtyChange }: { siteId: stri
   const { data: botStats, mutate: mutateBotStats } = useBotFilterStats(siteId)
   const [filterBots, setFilterBots] = useState(false)
   const [saving, setSaving] = useState(false)
+  const [isDirty, setIsDirty] = useState(false)
   const initialFilterRef = useRef<boolean | null>(null)
 
   const [botView, setBotView] = useState<'review' | 'blocked'>('review')
@@ -32,7 +33,9 @@ export default function SiteBotSpamTab({ siteId, onDirtyChange }: { siteId: stri
   // Track dirty state
   useEffect(() => {
     if (initialFilterRef.current === null) return
-    onDirtyChange?.(filterBots !== initialFilterRef.current)
+    const dirty = filterBots !== initialFilterRef.current
+    setIsDirty(dirty)
+    onDirtyChange?.(dirty)
   }, [filterBots, onDirtyChange])
 
   const handleSave = async () => {
@@ -219,11 +222,15 @@ export default function SiteBotSpamTab({ siteId, onDirtyChange }: { siteId: stri
         </div>
       </div>
 
-      <div className="flex justify-end pt-2">
-        <Button onClick={handleSave} variant="primary" disabled={saving}>
-          {saving ? 'Saving...' : 'Save Changes'}
-        </Button>
-      </div>
+      {/* Sticky save bar */}
+      {isDirty && (
+        <div className="sticky bottom-0 -mx-6 -mb-6 px-6 py-3 bg-neutral-900/95 backdrop-blur-sm border-t border-neutral-800 flex items-center justify-between">
+          <span className="text-xs text-neutral-400">Unsaved changes</span>
+          <Button onClick={handleSave} variant="primary" disabled={saving} className="text-sm">
+            {saving ? 'Saving...' : 'Save Changes'}
+          </Button>
+        </div>
+      )}
     </div>
   )
 }
diff --git a/components/settings/unified/tabs/SiteGeneralTab.tsx b/components/settings/unified/tabs/SiteGeneralTab.tsx
index 4ada9ca..9b40fab 100644
--- a/components/settings/unified/tabs/SiteGeneralTab.tsx
+++ b/components/settings/unified/tabs/SiteGeneralTab.tsx
@@ -41,12 +41,14 @@ export default function SiteGeneralTab({ siteId, onDirtyChange }: { siteId: stri
 
   const canEdit = user?.role === 'owner' || user?.role === 'admin'
   const initialRef = useRef('')
+  const [isDirty, setIsDirty] = useState(false)
 
   useEffect(() => {
     if (site) {
       setName(site.name || '')
       setTimezone(site.timezone || 'UTC')
       initialRef.current = JSON.stringify({ name: site.name || '', timezone: site.timezone || 'UTC' })
+      setIsDirty(false)
     }
   }, [site])
 
@@ -54,7 +56,9 @@ export default function SiteGeneralTab({ siteId, onDirtyChange }: { siteId: stri
   useEffect(() => {
     if (!initialRef.current) return
     const current = JSON.stringify({ name, timezone })
-    onDirtyChange?.(current !== initialRef.current)
+    const dirty = current !== initialRef.current
+    setIsDirty(dirty)
+    onDirtyChange?.(dirty)
   }, [name, timezone, onDirtyChange])
 
   const handleSave = async () => {
@@ -172,12 +176,15 @@ export default function SiteGeneralTab({ siteId, onDirtyChange }: { siteId: stri
         </p>
       </div>
 
-      {/* Save */}
-      <div className="flex justify-end pt-2">
-        <Button onClick={handleSave} variant="primary" disabled={saving}>
-          {saving ? 'Saving...' : 'Save Changes'}
-        </Button>
-      </div>
+      {/* Sticky save bar */}
+      {isDirty && (
+        <div className="sticky bottom-0 -mx-6 -mb-6 px-6 py-3 bg-neutral-900/95 backdrop-blur-sm border-t border-neutral-800 flex items-center justify-between">
+          <span className="text-xs text-neutral-400">Unsaved changes</span>
+          <Button onClick={handleSave} variant="primary" disabled={saving} className="text-sm">
+            {saving ? 'Saving...' : 'Save Changes'}
+          </Button>
+        </div>
+      )}
 
       {/* Danger Zone */}
       {canEdit && (
diff --git a/components/settings/unified/tabs/SitePrivacyTab.tsx b/components/settings/unified/tabs/SitePrivacyTab.tsx
index 3fc8446..a6a9e51 100644
--- a/components/settings/unified/tabs/SitePrivacyTab.tsx
+++ b/components/settings/unified/tabs/SitePrivacyTab.tsx
@@ -30,6 +30,7 @@ export default function SitePrivacyTab({ siteId, onDirtyChange }: { siteId: stri
   const [excludedPaths, setExcludedPaths] = useState('')
   const [snippetCopied, setSnippetCopied] = useState(false)
   const [saving, setSaving] = useState(false)
+  const [isDirty, setIsDirty] = useState(false)
   const initialRef = useRef('')
 
   useEffect(() => {
@@ -52,6 +53,7 @@ export default function SitePrivacyTab({ siteId, onDirtyChange }: { siteId: stri
         dataRetention: site.data_retention_months ?? 6,
         excludedPaths: (site.excluded_paths || []).join('\n'),
       })
+      setIsDirty(false)
     }
   }, [site])
 
@@ -59,7 +61,9 @@ export default function SitePrivacyTab({ siteId, onDirtyChange }: { siteId: stri
   useEffect(() => {
     if (!initialRef.current) return
     const current = JSON.stringify({ collectPagePaths, collectReferrers, collectDeviceInfo, collectScreenRes, collectGeoData, hideUnknownLocations, dataRetention, excludedPaths })
-    onDirtyChange?.(current !== initialRef.current)
+    const dirty = current !== initialRef.current
+    setIsDirty(dirty)
+    onDirtyChange?.(dirty)
   }, [collectPagePaths, collectReferrers, collectDeviceInfo, collectScreenRes, collectGeoData, hideUnknownLocations, dataRetention, excludedPaths, onDirtyChange])
 
   const handleSave = async () => {
@@ -242,11 +246,15 @@ export default function SitePrivacyTab({ siteId, onDirtyChange }: { siteId: stri
         </div>
       </div>
 
-      <div className="flex justify-end pt-2">
-        <Button onClick={handleSave} variant="primary" disabled={saving}>
-          {saving ? 'Saving...' : 'Save Changes'}
-        </Button>
-      </div>
+      {/* Sticky save bar — only visible when dirty */}
+      {isDirty && (
+        <div className="sticky bottom-0 -mx-6 -mb-6 px-6 py-3 bg-neutral-900/95 backdrop-blur-sm border-t border-neutral-800 flex items-center justify-between">
+          <span className="text-xs text-neutral-400">Unsaved changes</span>
+          <Button onClick={handleSave} variant="primary" disabled={saving} className="text-sm">
+            {saving ? 'Saving...' : 'Save Changes'}
+          </Button>
+        </div>
+      )}
     </div>
   )
 }
diff --git a/components/settings/unified/tabs/SiteVisibilityTab.tsx b/components/settings/unified/tabs/SiteVisibilityTab.tsx
index 87ab2b9..2c28efc 100644
--- a/components/settings/unified/tabs/SiteVisibilityTab.tsx
+++ b/components/settings/unified/tabs/SiteVisibilityTab.tsx
@@ -16,6 +16,7 @@ export default function SiteVisibilityTab({ siteId, onDirtyChange }: { siteId: s
   const [passwordEnabled, setPasswordEnabled] = useState(false)
   const [saving, setSaving] = useState(false)
   const [linkCopied, setLinkCopied] = useState(false)
+  const [isDirty, setIsDirty] = useState(false)
   const initialRef = useRef('')
 
   useEffect(() => {
@@ -23,6 +24,7 @@ export default function SiteVisibilityTab({ siteId, onDirtyChange }: { siteId: s
       setIsPublic(site.is_public ?? false)
       setPasswordEnabled(site.has_password ?? false)
       initialRef.current = JSON.stringify({ isPublic: site.is_public ?? false, passwordEnabled: site.has_password ?? false })
+      setIsDirty(false)
     }
   }, [site])
 
@@ -31,6 +33,7 @@ export default function SiteVisibilityTab({ siteId, onDirtyChange }: { siteId: s
     if (!initialRef.current) return
     const current = JSON.stringify({ isPublic, passwordEnabled })
     const dirty = current !== initialRef.current || password.length > 0
+    setIsDirty(dirty)
     onDirtyChange?.(dirty)
   }, [isPublic, passwordEnabled, password, onDirtyChange])
 
@@ -142,11 +145,15 @@ export default function SiteVisibilityTab({ siteId, onDirtyChange }: { siteId: s
         )}
       </AnimatePresence>
 
-      <div className="flex justify-end pt-2">
-        <Button onClick={handleSave} variant="primary" disabled={saving}>
-          {saving ? 'Saving...' : 'Save Changes'}
-        </Button>
-      </div>
+      {/* Sticky save bar */}
+      {isDirty && (
+        <div className="sticky bottom-0 -mx-6 -mb-6 px-6 py-3 bg-neutral-900/95 backdrop-blur-sm border-t border-neutral-800 flex items-center justify-between">
+          <span className="text-xs text-neutral-400">Unsaved changes</span>
+          <Button onClick={handleSave} variant="primary" disabled={saving} className="text-sm">
+            {saving ? 'Saving...' : 'Save Changes'}
+          </Button>
+        </div>
+      )}
     </div>
   )
 }
-- 
2.49.1


From 93401cc1a15cbc6e1d79c1459510d2111f33105f Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 20:27:47 +0100
Subject: [PATCH 267/428] =?UTF-8?q?fix:=20dirty=20tracking=20=E2=80=94=20p?=
 =?UTF-8?q?revent=20SWR=20revalidation=20from=20resetting=20form=20state?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../settings/unified/tabs/SiteBotSpamTab.tsx  |  9 ++-
 .../settings/unified/tabs/SiteGeneralTab.tsx  | 13 ++--
 .../settings/unified/tabs/SitePrivacyTab.tsx  | 76 ++++++++++---------
 .../unified/tabs/SiteVisibilityTab.tsx        | 13 ++--
 4 files changed, 59 insertions(+), 52 deletions(-)

diff --git a/components/settings/unified/tabs/SiteBotSpamTab.tsx b/components/settings/unified/tabs/SiteBotSpamTab.tsx
index 173faf3..27ef6c9 100644
--- a/components/settings/unified/tabs/SiteBotSpamTab.tsx
+++ b/components/settings/unified/tabs/SiteBotSpamTab.tsx
@@ -23,11 +23,12 @@ export default function SiteBotSpamTab({ siteId, onDirtyChange }: { siteId: stri
   const { data: sessionsData, mutate: mutateSessions } = useSessions(siteId, botDateRange.start, botDateRange.end, botView === 'review' ? suspiciousOnly : false)
   const sessions = sessionsData?.sessions
 
+  const hasInitialized = useRef(false)
   useEffect(() => {
-    if (site) {
-      setFilterBots(site.filter_bots ?? false)
-      initialFilterRef.current = site.filter_bots ?? false
-    }
+    if (!site || hasInitialized.current) return
+    setFilterBots(site.filter_bots ?? false)
+    initialFilterRef.current = site.filter_bots ?? false
+    hasInitialized.current = true
   }, [site])
 
   // Track dirty state
diff --git a/components/settings/unified/tabs/SiteGeneralTab.tsx b/components/settings/unified/tabs/SiteGeneralTab.tsx
index 9b40fab..b80c5e3 100644
--- a/components/settings/unified/tabs/SiteGeneralTab.tsx
+++ b/components/settings/unified/tabs/SiteGeneralTab.tsx
@@ -41,15 +41,16 @@ export default function SiteGeneralTab({ siteId, onDirtyChange }: { siteId: stri
 
   const canEdit = user?.role === 'owner' || user?.role === 'admin'
   const initialRef = useRef('')
+  const hasInitialized = useRef(false)
   const [isDirty, setIsDirty] = useState(false)
 
   useEffect(() => {
-    if (site) {
-      setName(site.name || '')
-      setTimezone(site.timezone || 'UTC')
-      initialRef.current = JSON.stringify({ name: site.name || '', timezone: site.timezone || 'UTC' })
-      setIsDirty(false)
-    }
+    if (!site || hasInitialized.current) return
+    setName(site.name || '')
+    setTimezone(site.timezone || 'UTC')
+    initialRef.current = JSON.stringify({ name: site.name || '', timezone: site.timezone || 'UTC' })
+    hasInitialized.current = true
+    setIsDirty(false)
   }, [site])
 
   // Track dirty state
diff --git a/components/settings/unified/tabs/SitePrivacyTab.tsx b/components/settings/unified/tabs/SitePrivacyTab.tsx
index a6a9e51..ffc77de 100644
--- a/components/settings/unified/tabs/SitePrivacyTab.tsx
+++ b/components/settings/unified/tabs/SitePrivacyTab.tsx
@@ -16,6 +16,18 @@ const GEO_OPTIONS = [
   { value: 'none', label: 'Disabled' },
 ]
 
+function PrivacyToggle({ label, desc, checked, onToggle }: { label: string; desc: string; checked: boolean; onToggle: () => void }) {
+  return (
+    <div className="flex items-center justify-between py-3 px-4 rounded-xl hover:bg-neutral-800/20 transition-colors">
+      <div>
+        <p className="text-sm font-medium text-white">{label}</p>
+        <p className="text-xs text-neutral-400">{desc}</p>
+      </div>
+      <Toggle checked={checked} onChange={onToggle} />
+    </div>
+  )
+}
+
 export default function SitePrivacyTab({ siteId, onDirtyChange }: { siteId: string; onDirtyChange?: (dirty: boolean) => void }) {
   const { data: site, mutate } = useSite(siteId)
   const { data: subscription, error: subscriptionError, mutate: mutateSubscription } = useSubscription()
@@ -33,28 +45,30 @@ export default function SitePrivacyTab({ siteId, onDirtyChange }: { siteId: stri
   const [isDirty, setIsDirty] = useState(false)
   const initialRef = useRef('')
 
+  // Sync form state from site data — only on first load, not on SWR revalidation
+  const hasInitialized = useRef(false)
   useEffect(() => {
-    if (site) {
-      setCollectPagePaths(site.collect_page_paths ?? true)
-      setCollectReferrers(site.collect_referrers ?? true)
-      setCollectDeviceInfo(site.collect_device_info ?? true)
-      setCollectScreenRes(site.collect_screen_resolution ?? true)
-      setCollectGeoData(site.collect_geo_data ?? 'full')
-      setHideUnknownLocations(site.hide_unknown_locations ?? false)
-      setDataRetention(site.data_retention_months ?? 6)
-      setExcludedPaths((site.excluded_paths || []).join('\n'))
-      initialRef.current = JSON.stringify({
-        collectPagePaths: site.collect_page_paths ?? true,
-        collectReferrers: site.collect_referrers ?? true,
-        collectDeviceInfo: site.collect_device_info ?? true,
-        collectScreenRes: site.collect_screen_resolution ?? true,
-        collectGeoData: site.collect_geo_data ?? 'full',
-        hideUnknownLocations: site.hide_unknown_locations ?? false,
-        dataRetention: site.data_retention_months ?? 6,
-        excludedPaths: (site.excluded_paths || []).join('\n'),
-      })
-      setIsDirty(false)
-    }
+    if (!site || hasInitialized.current) return
+    setCollectPagePaths(site.collect_page_paths ?? true)
+    setCollectReferrers(site.collect_referrers ?? true)
+    setCollectDeviceInfo(site.collect_device_info ?? true)
+    setCollectScreenRes(site.collect_screen_resolution ?? true)
+    setCollectGeoData(site.collect_geo_data ?? 'full')
+    setHideUnknownLocations(site.hide_unknown_locations ?? false)
+    setDataRetention(site.data_retention_months ?? 6)
+    setExcludedPaths((site.excluded_paths || []).join('\n'))
+    initialRef.current = JSON.stringify({
+      collectPagePaths: site.collect_page_paths ?? true,
+      collectReferrers: site.collect_referrers ?? true,
+      collectDeviceInfo: site.collect_device_info ?? true,
+      collectScreenRes: site.collect_screen_resolution ?? true,
+      collectGeoData: site.collect_geo_data ?? 'full',
+      hideUnknownLocations: site.hide_unknown_locations ?? false,
+      dataRetention: site.data_retention_months ?? 6,
+      excludedPaths: (site.excluded_paths || []).join('\n'),
+    })
+    hasInitialized.current = true
+    setIsDirty(false)
   }, [site])
 
   // Track dirty state
@@ -101,21 +115,11 @@ export default function SitePrivacyTab({ siteId, onDirtyChange }: { siteId: stri
       </div>
 
       <div className="space-y-1">
-        {[
-          { label: 'Page paths', desc: 'Track which pages visitors view.', checked: collectPagePaths, onChange: setCollectPagePaths },
-          { label: 'Referrers', desc: 'Track where visitors come from.', checked: collectReferrers, onChange: setCollectReferrers },
-          { label: 'Device info', desc: 'Track browser, OS, and device type.', checked: collectDeviceInfo, onChange: setCollectDeviceInfo },
-          { label: 'Screen resolution', desc: 'Track visitor screen dimensions.', checked: collectScreenRes, onChange: setCollectScreenRes },
-          { label: 'Hide unknown locations', desc: 'Exclude "Unknown" from location stats.', checked: hideUnknownLocations, onChange: setHideUnknownLocations },
-        ].map(item => (
-          <div key={item.label} className="flex items-center justify-between py-3 px-4 rounded-xl hover:bg-neutral-800/20 transition-colors">
-            <div>
-              <p className="text-sm font-medium text-white">{item.label}</p>
-              <p className="text-xs text-neutral-400">{item.desc}</p>
-            </div>
-            <Toggle checked={item.checked} onChange={() => item.onChange((p: boolean) => !p)} />
-          </div>
-        ))}
+        <PrivacyToggle label="Page paths" desc="Track which pages visitors view." checked={collectPagePaths} onToggle={() => setCollectPagePaths(v => !v)} />
+        <PrivacyToggle label="Referrers" desc="Track where visitors come from." checked={collectReferrers} onToggle={() => setCollectReferrers(v => !v)} />
+        <PrivacyToggle label="Device info" desc="Track browser, OS, and device type." checked={collectDeviceInfo} onToggle={() => setCollectDeviceInfo(v => !v)} />
+        <PrivacyToggle label="Screen resolution" desc="Track visitor screen dimensions." checked={collectScreenRes} onToggle={() => setCollectScreenRes(v => !v)} />
+        <PrivacyToggle label="Hide unknown locations" desc='Exclude "Unknown" from location stats.' checked={hideUnknownLocations} onToggle={() => setHideUnknownLocations(v => !v)} />
       </div>
 
       <div>
diff --git a/components/settings/unified/tabs/SiteVisibilityTab.tsx b/components/settings/unified/tabs/SiteVisibilityTab.tsx
index 2c28efc..22c5d9f 100644
--- a/components/settings/unified/tabs/SiteVisibilityTab.tsx
+++ b/components/settings/unified/tabs/SiteVisibilityTab.tsx
@@ -18,14 +18,15 @@ export default function SiteVisibilityTab({ siteId, onDirtyChange }: { siteId: s
   const [linkCopied, setLinkCopied] = useState(false)
   const [isDirty, setIsDirty] = useState(false)
   const initialRef = useRef('')
+  const hasInitialized = useRef(false)
 
   useEffect(() => {
-    if (site) {
-      setIsPublic(site.is_public ?? false)
-      setPasswordEnabled(site.has_password ?? false)
-      initialRef.current = JSON.stringify({ isPublic: site.is_public ?? false, passwordEnabled: site.has_password ?? false })
-      setIsDirty(false)
-    }
+    if (!site || hasInitialized.current) return
+    setIsPublic(site.is_public ?? false)
+    setPasswordEnabled(site.has_password ?? false)
+    initialRef.current = JSON.stringify({ isPublic: site.is_public ?? false, passwordEnabled: site.has_password ?? false })
+    hasInitialized.current = true
+    setIsDirty(false)
   }, [site])
 
   // Track dirty state
-- 
2.49.1


From eb3c3b2738002a6e389d6c4982f968d77f66b942 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 20:33:46 +0100
Subject: [PATCH 268/428] debug: add console.logs to privacy tab dirty tracking

---
 components/settings/unified/tabs/SitePrivacyTab.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/settings/unified/tabs/SitePrivacyTab.tsx b/components/settings/unified/tabs/SitePrivacyTab.tsx
index ffc77de..d7309e2 100644
--- a/components/settings/unified/tabs/SitePrivacyTab.tsx
+++ b/components/settings/unified/tabs/SitePrivacyTab.tsx
@@ -73,9 +73,13 @@ export default function SitePrivacyTab({ siteId, onDirtyChange }: { siteId: stri
 
   // Track dirty state
   useEffect(() => {
-    if (!initialRef.current) return
+    if (!initialRef.current) {
+      console.log('[Privacy] dirty check skipped — no initialRef')
+      return
+    }
     const current = JSON.stringify({ collectPagePaths, collectReferrers, collectDeviceInfo, collectScreenRes, collectGeoData, hideUnknownLocations, dataRetention, excludedPaths })
     const dirty = current !== initialRef.current
+    console.log('[Privacy] dirty check:', { dirty, collectPagePaths, initial: initialRef.current.substring(0, 50) })
     setIsDirty(dirty)
     onDirtyChange?.(dirty)
   }, [collectPagePaths, collectReferrers, collectDeviceInfo, collectScreenRes, collectGeoData, hideUnknownLocations, dataRetention, excludedPaths, onDirtyChange])
@@ -115,7 +119,7 @@ export default function SitePrivacyTab({ siteId, onDirtyChange }: { siteId: stri
       </div>
 
       <div className="space-y-1">
-        <PrivacyToggle label="Page paths" desc="Track which pages visitors view." checked={collectPagePaths} onToggle={() => setCollectPagePaths(v => !v)} />
+        <PrivacyToggle label="Page paths" desc="Track which pages visitors view." checked={collectPagePaths} onToggle={() => { console.log('[Privacy] toggling page paths from', collectPagePaths, 'to', !collectPagePaths); setCollectPagePaths(v => !v) }} />
         <PrivacyToggle label="Referrers" desc="Track where visitors come from." checked={collectReferrers} onToggle={() => setCollectReferrers(v => !v)} />
         <PrivacyToggle label="Device info" desc="Track browser, OS, and device type." checked={collectDeviceInfo} onToggle={() => setCollectDeviceInfo(v => !v)} />
         <PrivacyToggle label="Screen resolution" desc="Track visitor screen dimensions." checked={collectScreenRes} onToggle={() => setCollectScreenRes(v => !v)} />
-- 
2.49.1


From 0de8f927a4d981af50ed03bb8aae156f58a3f1b4 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 20:37:32 +0100
Subject: [PATCH 269/428] chore: remove debug console.logs from privacy tab

---
 components/settings/unified/tabs/SitePrivacyTab.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/components/settings/unified/tabs/SitePrivacyTab.tsx b/components/settings/unified/tabs/SitePrivacyTab.tsx
index d7309e2..ffc77de 100644
--- a/components/settings/unified/tabs/SitePrivacyTab.tsx
+++ b/components/settings/unified/tabs/SitePrivacyTab.tsx
@@ -73,13 +73,9 @@ export default function SitePrivacyTab({ siteId, onDirtyChange }: { siteId: stri
 
   // Track dirty state
   useEffect(() => {
-    if (!initialRef.current) {
-      console.log('[Privacy] dirty check skipped — no initialRef')
-      return
-    }
+    if (!initialRef.current) return
     const current = JSON.stringify({ collectPagePaths, collectReferrers, collectDeviceInfo, collectScreenRes, collectGeoData, hideUnknownLocations, dataRetention, excludedPaths })
     const dirty = current !== initialRef.current
-    console.log('[Privacy] dirty check:', { dirty, collectPagePaths, initial: initialRef.current.substring(0, 50) })
     setIsDirty(dirty)
     onDirtyChange?.(dirty)
   }, [collectPagePaths, collectReferrers, collectDeviceInfo, collectScreenRes, collectGeoData, hideUnknownLocations, dataRetention, excludedPaths, onDirtyChange])
@@ -119,7 +115,7 @@ export default function SitePrivacyTab({ siteId, onDirtyChange }: { siteId: stri
       </div>
 
       <div className="space-y-1">
-        <PrivacyToggle label="Page paths" desc="Track which pages visitors view." checked={collectPagePaths} onToggle={() => { console.log('[Privacy] toggling page paths from', collectPagePaths, 'to', !collectPagePaths); setCollectPagePaths(v => !v) }} />
+        <PrivacyToggle label="Page paths" desc="Track which pages visitors view." checked={collectPagePaths} onToggle={() => setCollectPagePaths(v => !v)} />
         <PrivacyToggle label="Referrers" desc="Track where visitors come from." checked={collectReferrers} onToggle={() => setCollectReferrers(v => !v)} />
         <PrivacyToggle label="Device info" desc="Track browser, OS, and device type." checked={collectDeviceInfo} onToggle={() => setCollectDeviceInfo(v => !v)} />
         <PrivacyToggle label="Screen resolution" desc="Track visitor screen dimensions." checked={collectScreenRes} onToggle={() => setCollectScreenRes(v => !v)} />
-- 
2.49.1


From 7181d68d85b2cfcf08f4c67f150a94ece8715e5f Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 20:42:02 +0100
Subject: [PATCH 270/428] fix: replace amber unsaved changes bar with simple
 confirm() dialog

---
 .../settings/unified/UnifiedSettingsModal.tsx | 73 +++----------------
 1 file changed, 10 insertions(+), 63 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index 09f462d..c57b10a 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useCallback, useEffect, useRef } from 'react'
 import { AnimatePresence, motion } from 'framer-motion'
-import { X, GearSix, Buildings, User, Warning } from '@phosphor-icons/react'
+import { X, GearSix, Buildings, User } from '@phosphor-icons/react'
 import { useUnifiedSettings } from '@/lib/unified-settings-context'
 import { useAuth } from '@/lib/auth/context'
 import { useSite } from '@/lib/swr/dashboard'
@@ -229,39 +229,25 @@ export default function UnifiedSettingsModal() {
   const [sites, setSites] = useState<Site[]>([])
   const [activeSiteId, setActiveSiteId] = useState<string | null>(null)
 
-  // ─── Dirty state & pending navigation ────────────────────────
+  // ─── Dirty state ──────────────────────────────────────────────
   const isDirtyRef = useRef(false)
-  const [showDirtyBar, setShowDirtyBar] = useState(false)
-  const pendingActionRef = useRef<(() => void) | null>(null)
 
   const handleDirtyChange = useCallback((dirty: boolean) => {
     isDirtyRef.current = dirty
-    // Hide the bar if user saves (dirty becomes false) while bar is showing
-    if (!dirty) setShowDirtyBar(false)
   }, [])
 
-  /** Try to execute an action — if dirty, show confirmation bar instead */
+  /** Run action if clean, or confirm discard if dirty */
   const guardedAction = useCallback((action: () => void) => {
     if (isDirtyRef.current) {
-      pendingActionRef.current = action
-      setShowDirtyBar(true)
+      if (confirm('You have unsaved changes. Discard and continue?')) {
+        isDirtyRef.current = false
+        action()
+      }
     } else {
       action()
     }
   }, [])
 
-  const handleDiscardAndContinue = useCallback(() => {
-    isDirtyRef.current = false
-    setShowDirtyBar(false)
-    pendingActionRef.current?.()
-    pendingActionRef.current = null
-  }, [])
-
-  const handleStayHere = useCallback(() => {
-    setShowDirtyBar(false)
-    pendingActionRef.current = null
-  }, [])
-
   // Apply initial tab when modal opens
   useEffect(() => {
     if (isOpen && initTab) {
@@ -276,11 +262,7 @@ export default function UnifiedSettingsModal() {
 
   // Reset dirty state when modal opens
   useEffect(() => {
-    if (isOpen) {
-      isDirtyRef.current = false
-      setShowDirtyBar(false)
-      pendingActionRef.current = null
-    }
+    if (isOpen) isDirtyRef.current = false
   }, [isOpen])
 
   // Detect site from URL and load sites list when modal opens
@@ -315,13 +297,12 @@ export default function UnifiedSettingsModal() {
         else openUnifiedSettings()
       }
       if (e.key === 'Escape' && isOpen) {
-        if (showDirtyBar) handleStayHere()
-        else guardedAction(closeSettings)
+        guardedAction(closeSettings)
       }
     }
     window.addEventListener('keydown', handler)
     return () => window.removeEventListener('keydown', handler)
-  }, [isOpen, openUnifiedSettings, closeSettings, guardedAction, showDirtyBar, handleStayHere])
+  }, [isOpen, openUnifiedSettings, closeSettings, guardedAction])
 
   const tabs = context === 'site' ? SITE_TABS : context === 'workspace' ? WORKSPACE_TABS : ACCOUNT_TABS
   const activeTab = context === 'site' ? siteTabs : context === 'workspace' ? workspaceTabs : accountTabs
@@ -399,40 +380,6 @@ export default function UnifiedSettingsModal() {
                 </div>
               </div>
 
-              {/* Unsaved changes bar */}
-              <AnimatePresence>
-                {showDirtyBar && (
-                  <motion.div
-                    initial={{ height: 0, opacity: 0 }}
-                    animate={{ height: 'auto', opacity: 1 }}
-                    exit={{ height: 0, opacity: 0 }}
-                    transition={{ duration: 0.15 }}
-                    className="shrink-0 overflow-hidden"
-                  >
-                    <div className="flex items-center justify-between gap-3 px-6 py-2.5 bg-amber-900/20 border-b border-amber-800/40">
-                      <div className="flex items-center gap-2 text-sm text-amber-200">
-                        <Warning weight="bold" className="w-4 h-4 text-amber-400 shrink-0" />
-                        You have unsaved changes.
-                      </div>
-                      <div className="flex items-center gap-2 shrink-0">
-                        <button
-                          onClick={handleDiscardAndContinue}
-                          className="px-3 py-1 text-xs font-medium text-amber-300 hover:text-white bg-amber-800/30 hover:bg-amber-800/50 rounded-lg transition-colors"
-                        >
-                          Discard & continue
-                        </button>
-                        <button
-                          onClick={handleStayHere}
-                          className="px-3 py-1 text-xs font-medium text-neutral-400 hover:text-white transition-colors"
-                        >
-                          Stay here
-                        </button>
-                      </div>
-                    </div>
-                  </motion.div>
-                )}
-              </AnimatePresence>
-
               {/* Content */}
               <div className="flex-1 overflow-y-auto overflow-x-hidden">
                 <AnimatePresence mode="wait">
-- 
2.49.1


From 81fafcf711e011d495a683a5ad1a50afcaf7a07b Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 20:51:39 +0100
Subject: [PATCH 271/428] fix: discard button in sticky save bar instead of
 browser confirm

---
 .../settings/unified/UnifiedSettingsModal.tsx | 48 ++++++++++++++-----
 .../settings/unified/tabs/SiteBotSpamTab.tsx  | 17 +++++--
 .../settings/unified/tabs/SiteGeneralTab.tsx  | 17 +++++--
 .../settings/unified/tabs/SitePrivacyTab.tsx  | 17 +++++--
 .../unified/tabs/SiteVisibilityTab.tsx        | 17 +++++--
 5 files changed, 84 insertions(+), 32 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index c57b10a..e042a12 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -173,20 +173,25 @@ function TabContent({
   activeTab,
   siteId,
   onDirtyChange,
+  hasPendingAction,
+  onDiscard,
 }: {
   context: SettingsContext
   activeTab: string
   siteId: string | null
   onDirtyChange: (dirty: boolean) => void
+  hasPendingAction: boolean
+  onDiscard: () => void
 }) {
+  const dirtyProps = { onDirtyChange, hasPendingAction, onDiscard }
   // Site tabs
   if (context === 'site' && siteId) {
     switch (activeTab) {
-      case 'general': return <SiteGeneralTab siteId={siteId} onDirtyChange={onDirtyChange} />
+      case 'general': return <SiteGeneralTab siteId={siteId} {...dirtyProps} />
       case 'goals': return <SiteGoalsTab siteId={siteId} />
-      case 'visibility': return <SiteVisibilityTab siteId={siteId} onDirtyChange={onDirtyChange} />
-      case 'privacy': return <SitePrivacyTab siteId={siteId} onDirtyChange={onDirtyChange} />
-      case 'bot-spam': return <SiteBotSpamTab siteId={siteId} onDirtyChange={onDirtyChange} />
+      case 'visibility': return <SiteVisibilityTab siteId={siteId} {...dirtyProps} />
+      case 'privacy': return <SitePrivacyTab siteId={siteId} {...dirtyProps} />
+      case 'bot-spam': return <SiteBotSpamTab siteId={siteId} {...dirtyProps} />
       case 'reports': return <SiteReportsTab siteId={siteId} />
       case 'integrations': return <SiteIntegrationsTab siteId={siteId} />
     }
@@ -229,25 +234,40 @@ export default function UnifiedSettingsModal() {
   const [sites, setSites] = useState<Site[]>([])
   const [activeSiteId, setActiveSiteId] = useState<string | null>(null)
 
-  // ─── Dirty state ──────────────────────────────────────────────
+  // ─── Dirty state & pending navigation ────────────────────────
   const isDirtyRef = useRef(false)
+  const pendingActionRef = useRef<(() => void) | null>(null)
+  const [hasPendingAction, setHasPendingAction] = useState(false)
 
   const handleDirtyChange = useCallback((dirty: boolean) => {
     isDirtyRef.current = dirty
+    // If user saved and there was a pending action, execute it
+    if (!dirty && pendingActionRef.current) {
+      const action = pendingActionRef.current
+      pendingActionRef.current = null
+      setHasPendingAction(false)
+      action()
+    }
   }, [])
 
-  /** Run action if clean, or confirm discard if dirty */
+  /** Run action if clean, or store as pending if dirty */
   const guardedAction = useCallback((action: () => void) => {
     if (isDirtyRef.current) {
-      if (confirm('You have unsaved changes. Discard and continue?')) {
-        isDirtyRef.current = false
-        action()
-      }
+      pendingActionRef.current = action
+      setHasPendingAction(true)
     } else {
       action()
     }
   }, [])
 
+  const handleDiscard = useCallback(() => {
+    isDirtyRef.current = false
+    setHasPendingAction(false)
+    const action = pendingActionRef.current
+    pendingActionRef.current = null
+    action?.()
+  }, [])
+
   // Apply initial tab when modal opens
   useEffect(() => {
     if (isOpen && initTab) {
@@ -262,7 +282,11 @@ export default function UnifiedSettingsModal() {
 
   // Reset dirty state when modal opens
   useEffect(() => {
-    if (isOpen) isDirtyRef.current = false
+    if (isOpen) {
+      isDirtyRef.current = false
+      pendingActionRef.current = null
+      setHasPendingAction(false)
+    }
   }, [isOpen])
 
   // Detect site from URL and load sites list when modal opens
@@ -391,7 +415,7 @@ export default function UnifiedSettingsModal() {
                     transition={{ duration: 0.12 }}
                     className="p-6"
                   >
-                    <TabContent context={context} activeTab={activeTab} siteId={activeSiteId} onDirtyChange={handleDirtyChange} />
+                    <TabContent context={context} activeTab={activeTab} siteId={activeSiteId} onDirtyChange={handleDirtyChange} hasPendingAction={hasPendingAction} onDiscard={handleDiscard} />
                   </motion.div>
                 </AnimatePresence>
               </div>
diff --git a/components/settings/unified/tabs/SiteBotSpamTab.tsx b/components/settings/unified/tabs/SiteBotSpamTab.tsx
index 27ef6c9..3d7eda4 100644
--- a/components/settings/unified/tabs/SiteBotSpamTab.tsx
+++ b/components/settings/unified/tabs/SiteBotSpamTab.tsx
@@ -7,7 +7,7 @@ import { useSite, useBotFilterStats, useSessions } from '@/lib/swr/dashboard'
 import { updateSite } from '@/lib/api/sites'
 import { botFilterSessions, botUnfilterSessions } from '@/lib/api/bot-filter'
 
-export default function SiteBotSpamTab({ siteId, onDirtyChange }: { siteId: string; onDirtyChange?: (dirty: boolean) => void }) {
+export default function SiteBotSpamTab({ siteId, onDirtyChange, hasPendingAction, onDiscard }: { siteId: string; onDirtyChange?: (dirty: boolean) => void; hasPendingAction?: boolean; onDiscard?: () => void }) {
   const { data: site, mutate } = useSite(siteId)
   const { data: botStats, mutate: mutateBotStats } = useBotFilterStats(siteId)
   const [filterBots, setFilterBots] = useState(false)
@@ -226,10 +226,17 @@ export default function SiteBotSpamTab({ siteId, onDirtyChange }: { siteId: stri
       {/* Sticky save bar */}
       {isDirty && (
         <div className="sticky bottom-0 -mx-6 -mb-6 px-6 py-3 bg-neutral-900/95 backdrop-blur-sm border-t border-neutral-800 flex items-center justify-between">
-          <span className="text-xs text-neutral-400">Unsaved changes</span>
-          <Button onClick={handleSave} variant="primary" disabled={saving} className="text-sm">
-            {saving ? 'Saving...' : 'Save Changes'}
-          </Button>
+          <span className="text-xs text-neutral-400">{hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}</span>
+          <div className="flex items-center gap-2">
+            {hasPendingAction && (
+              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-neutral-400 hover:text-white transition-colors">
+                Discard
+              </button>
+            )}
+            <Button onClick={handleSave} variant="primary" disabled={saving} className="text-sm">
+              {saving ? 'Saving...' : 'Save Changes'}
+            </Button>
+          </div>
         </div>
       )}
     </div>
diff --git a/components/settings/unified/tabs/SiteGeneralTab.tsx b/components/settings/unified/tabs/SiteGeneralTab.tsx
index b80c5e3..6634483 100644
--- a/components/settings/unified/tabs/SiteGeneralTab.tsx
+++ b/components/settings/unified/tabs/SiteGeneralTab.tsx
@@ -28,7 +28,7 @@ const TIMEZONES = [
   { value: 'Australia/Sydney', label: 'Australia/Sydney (AEST)' },
 ]
 
-export default function SiteGeneralTab({ siteId, onDirtyChange }: { siteId: string; onDirtyChange?: (dirty: boolean) => void }) {
+export default function SiteGeneralTab({ siteId, onDirtyChange, hasPendingAction, onDiscard }: { siteId: string; onDirtyChange?: (dirty: boolean) => void; hasPendingAction?: boolean; onDiscard?: () => void }) {
   const router = useRouter()
   const { user } = useAuth()
   const { closeUnifiedSettings: closeSettings } = useUnifiedSettings()
@@ -180,10 +180,17 @@ export default function SiteGeneralTab({ siteId, onDirtyChange }: { siteId: stri
       {/* Sticky save bar */}
       {isDirty && (
         <div className="sticky bottom-0 -mx-6 -mb-6 px-6 py-3 bg-neutral-900/95 backdrop-blur-sm border-t border-neutral-800 flex items-center justify-between">
-          <span className="text-xs text-neutral-400">Unsaved changes</span>
-          <Button onClick={handleSave} variant="primary" disabled={saving} className="text-sm">
-            {saving ? 'Saving...' : 'Save Changes'}
-          </Button>
+          <span className="text-xs text-neutral-400">{hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}</span>
+          <div className="flex items-center gap-2">
+            {hasPendingAction && (
+              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-neutral-400 hover:text-white transition-colors">
+                Discard
+              </button>
+            )}
+            <Button onClick={handleSave} variant="primary" disabled={saving} className="text-sm">
+              {saving ? 'Saving...' : 'Save Changes'}
+            </Button>
+          </div>
         </div>
       )}
 
diff --git a/components/settings/unified/tabs/SitePrivacyTab.tsx b/components/settings/unified/tabs/SitePrivacyTab.tsx
index ffc77de..1708748 100644
--- a/components/settings/unified/tabs/SitePrivacyTab.tsx
+++ b/components/settings/unified/tabs/SitePrivacyTab.tsx
@@ -28,7 +28,7 @@ function PrivacyToggle({ label, desc, checked, onToggle }: { label: string; desc
   )
 }
 
-export default function SitePrivacyTab({ siteId, onDirtyChange }: { siteId: string; onDirtyChange?: (dirty: boolean) => void }) {
+export default function SitePrivacyTab({ siteId, onDirtyChange, hasPendingAction, onDiscard }: { siteId: string; onDirtyChange?: (dirty: boolean) => void; hasPendingAction?: boolean; onDiscard?: () => void }) {
   const { data: site, mutate } = useSite(siteId)
   const { data: subscription, error: subscriptionError, mutate: mutateSubscription } = useSubscription()
   const { data: psiConfig, mutate: mutatePSIConfig } = usePageSpeedConfig(siteId)
@@ -253,10 +253,17 @@ export default function SitePrivacyTab({ siteId, onDirtyChange }: { siteId: stri
       {/* Sticky save bar — only visible when dirty */}
       {isDirty && (
         <div className="sticky bottom-0 -mx-6 -mb-6 px-6 py-3 bg-neutral-900/95 backdrop-blur-sm border-t border-neutral-800 flex items-center justify-between">
-          <span className="text-xs text-neutral-400">Unsaved changes</span>
-          <Button onClick={handleSave} variant="primary" disabled={saving} className="text-sm">
-            {saving ? 'Saving...' : 'Save Changes'}
-          </Button>
+          <span className="text-xs text-neutral-400">{hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}</span>
+          <div className="flex items-center gap-2">
+            {hasPendingAction && (
+              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-neutral-400 hover:text-white transition-colors">
+                Discard
+              </button>
+            )}
+            <Button onClick={handleSave} variant="primary" disabled={saving} className="text-sm">
+              {saving ? 'Saving...' : 'Save Changes'}
+            </Button>
+          </div>
         </div>
       )}
     </div>
diff --git a/components/settings/unified/tabs/SiteVisibilityTab.tsx b/components/settings/unified/tabs/SiteVisibilityTab.tsx
index 22c5d9f..441a064 100644
--- a/components/settings/unified/tabs/SiteVisibilityTab.tsx
+++ b/components/settings/unified/tabs/SiteVisibilityTab.tsx
@@ -9,7 +9,7 @@ import { updateSite } from '@/lib/api/sites'
 
 const APP_URL = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3003'
 
-export default function SiteVisibilityTab({ siteId, onDirtyChange }: { siteId: string; onDirtyChange?: (dirty: boolean) => void }) {
+export default function SiteVisibilityTab({ siteId, onDirtyChange, hasPendingAction, onDiscard }: { siteId: string; onDirtyChange?: (dirty: boolean) => void; hasPendingAction?: boolean; onDiscard?: () => void }) {
   const { data: site, mutate } = useSite(siteId)
   const [isPublic, setIsPublic] = useState(false)
   const [password, setPassword] = useState('')
@@ -149,10 +149,17 @@ export default function SiteVisibilityTab({ siteId, onDirtyChange }: { siteId: s
       {/* Sticky save bar */}
       {isDirty && (
         <div className="sticky bottom-0 -mx-6 -mb-6 px-6 py-3 bg-neutral-900/95 backdrop-blur-sm border-t border-neutral-800 flex items-center justify-between">
-          <span className="text-xs text-neutral-400">Unsaved changes</span>
-          <Button onClick={handleSave} variant="primary" disabled={saving} className="text-sm">
-            {saving ? 'Saving...' : 'Save Changes'}
-          </Button>
+          <span className="text-xs text-neutral-400">{hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}</span>
+          <div className="flex items-center gap-2">
+            {hasPendingAction && (
+              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-neutral-400 hover:text-white transition-colors">
+                Discard
+              </button>
+            )}
+            <Button onClick={handleSave} variant="primary" disabled={saving} className="text-sm">
+              {saving ? 'Saving...' : 'Save Changes'}
+            </Button>
+          </div>
         </div>
       )}
     </div>
-- 
2.49.1


From 1c21bf5ff684e0c5c4a6418dc50613e997fc01e4 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 21:02:00 +0100
Subject: [PATCH 272/428] fix: amber warning style on sticky bar when
 navigating with unsaved changes

---
 components/settings/unified/tabs/SiteBotSpamTab.tsx  | 12 +++++++++---
 components/settings/unified/tabs/SiteGeneralTab.tsx  | 12 +++++++++---
 components/settings/unified/tabs/SitePrivacyTab.tsx  | 12 +++++++++---
 .../settings/unified/tabs/SiteVisibilityTab.tsx      | 12 +++++++++---
 4 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/components/settings/unified/tabs/SiteBotSpamTab.tsx b/components/settings/unified/tabs/SiteBotSpamTab.tsx
index 3d7eda4..b92954a 100644
--- a/components/settings/unified/tabs/SiteBotSpamTab.tsx
+++ b/components/settings/unified/tabs/SiteBotSpamTab.tsx
@@ -225,11 +225,17 @@ export default function SiteBotSpamTab({ siteId, onDirtyChange, hasPendingAction
 
       {/* Sticky save bar */}
       {isDirty && (
-        <div className="sticky bottom-0 -mx-6 -mb-6 px-6 py-3 bg-neutral-900/95 backdrop-blur-sm border-t border-neutral-800 flex items-center justify-between">
-          <span className="text-xs text-neutral-400">{hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}</span>
+        <div className={`sticky bottom-0 -mx-6 -mb-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
+          hasPendingAction
+            ? 'bg-amber-950/90 border-amber-800/60'
+            : 'bg-neutral-950/90 border-neutral-800'
+        }`}>
+          <span className={`text-xs font-medium ${hasPendingAction ? 'text-amber-200' : 'text-neutral-400'}`}>
+            {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
+          </span>
           <div className="flex items-center gap-2">
             {hasPendingAction && (
-              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-neutral-400 hover:text-white transition-colors">
+              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-amber-300 hover:text-white bg-amber-800/30 hover:bg-amber-800/50 rounded-lg transition-colors">
                 Discard
               </button>
             )}
diff --git a/components/settings/unified/tabs/SiteGeneralTab.tsx b/components/settings/unified/tabs/SiteGeneralTab.tsx
index 6634483..2752960 100644
--- a/components/settings/unified/tabs/SiteGeneralTab.tsx
+++ b/components/settings/unified/tabs/SiteGeneralTab.tsx
@@ -179,11 +179,17 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, hasPendingAction
 
       {/* Sticky save bar */}
       {isDirty && (
-        <div className="sticky bottom-0 -mx-6 -mb-6 px-6 py-3 bg-neutral-900/95 backdrop-blur-sm border-t border-neutral-800 flex items-center justify-between">
-          <span className="text-xs text-neutral-400">{hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}</span>
+        <div className={`sticky bottom-0 -mx-6 -mb-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
+          hasPendingAction
+            ? 'bg-amber-950/90 border-amber-800/60'
+            : 'bg-neutral-950/90 border-neutral-800'
+        }`}>
+          <span className={`text-xs font-medium ${hasPendingAction ? 'text-amber-200' : 'text-neutral-400'}`}>
+            {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
+          </span>
           <div className="flex items-center gap-2">
             {hasPendingAction && (
-              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-neutral-400 hover:text-white transition-colors">
+              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-amber-300 hover:text-white bg-amber-800/30 hover:bg-amber-800/50 rounded-lg transition-colors">
                 Discard
               </button>
             )}
diff --git a/components/settings/unified/tabs/SitePrivacyTab.tsx b/components/settings/unified/tabs/SitePrivacyTab.tsx
index 1708748..1b6b46f 100644
--- a/components/settings/unified/tabs/SitePrivacyTab.tsx
+++ b/components/settings/unified/tabs/SitePrivacyTab.tsx
@@ -252,11 +252,17 @@ export default function SitePrivacyTab({ siteId, onDirtyChange, hasPendingAction
 
       {/* Sticky save bar — only visible when dirty */}
       {isDirty && (
-        <div className="sticky bottom-0 -mx-6 -mb-6 px-6 py-3 bg-neutral-900/95 backdrop-blur-sm border-t border-neutral-800 flex items-center justify-between">
-          <span className="text-xs text-neutral-400">{hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}</span>
+        <div className={`sticky bottom-0 -mx-6 -mb-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
+          hasPendingAction
+            ? 'bg-amber-950/90 border-amber-800/60'
+            : 'bg-neutral-950/90 border-neutral-800'
+        }`}>
+          <span className={`text-xs font-medium ${hasPendingAction ? 'text-amber-200' : 'text-neutral-400'}`}>
+            {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
+          </span>
           <div className="flex items-center gap-2">
             {hasPendingAction && (
-              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-neutral-400 hover:text-white transition-colors">
+              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-amber-300 hover:text-white bg-amber-800/30 hover:bg-amber-800/50 rounded-lg transition-colors">
                 Discard
               </button>
             )}
diff --git a/components/settings/unified/tabs/SiteVisibilityTab.tsx b/components/settings/unified/tabs/SiteVisibilityTab.tsx
index 441a064..30790f6 100644
--- a/components/settings/unified/tabs/SiteVisibilityTab.tsx
+++ b/components/settings/unified/tabs/SiteVisibilityTab.tsx
@@ -148,11 +148,17 @@ export default function SiteVisibilityTab({ siteId, onDirtyChange, hasPendingAct
 
       {/* Sticky save bar */}
       {isDirty && (
-        <div className="sticky bottom-0 -mx-6 -mb-6 px-6 py-3 bg-neutral-900/95 backdrop-blur-sm border-t border-neutral-800 flex items-center justify-between">
-          <span className="text-xs text-neutral-400">{hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}</span>
+        <div className={`sticky bottom-0 -mx-6 -mb-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
+          hasPendingAction
+            ? 'bg-amber-950/90 border-amber-800/60'
+            : 'bg-neutral-950/90 border-neutral-800'
+        }`}>
+          <span className={`text-xs font-medium ${hasPendingAction ? 'text-amber-200' : 'text-neutral-400'}`}>
+            {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
+          </span>
           <div className="flex items-center gap-2">
             {hasPendingAction && (
-              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-neutral-400 hover:text-white transition-colors">
+              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-amber-300 hover:text-white bg-amber-800/30 hover:bg-amber-800/50 rounded-lg transition-colors">
                 Discard
               </button>
             )}
-- 
2.49.1


From 43005fb9ee85b4d3bcac77630b089d6a7072e661 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 21:05:52 +0100
Subject: [PATCH 273/428] fix: red warning bar instead of amber when navigating
 with unsaved changes

---
 components/settings/unified/tabs/SiteBotSpamTab.tsx    | 6 +++---
 components/settings/unified/tabs/SiteGeneralTab.tsx    | 6 +++---
 components/settings/unified/tabs/SitePrivacyTab.tsx    | 6 +++---
 components/settings/unified/tabs/SiteVisibilityTab.tsx | 6 +++---
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/components/settings/unified/tabs/SiteBotSpamTab.tsx b/components/settings/unified/tabs/SiteBotSpamTab.tsx
index b92954a..99186e3 100644
--- a/components/settings/unified/tabs/SiteBotSpamTab.tsx
+++ b/components/settings/unified/tabs/SiteBotSpamTab.tsx
@@ -227,15 +227,15 @@ export default function SiteBotSpamTab({ siteId, onDirtyChange, hasPendingAction
       {isDirty && (
         <div className={`sticky bottom-0 -mx-6 -mb-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
           hasPendingAction
-            ? 'bg-amber-950/90 border-amber-800/60'
+            ? 'bg-red-950/90 border-red-800/60'
             : 'bg-neutral-950/90 border-neutral-800'
         }`}>
-          <span className={`text-xs font-medium ${hasPendingAction ? 'text-amber-200' : 'text-neutral-400'}`}>
+          <span className={`text-xs font-medium ${hasPendingAction ? 'text-red-200' : 'text-neutral-400'}`}>
             {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
           </span>
           <div className="flex items-center gap-2">
             {hasPendingAction && (
-              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-amber-300 hover:text-white bg-amber-800/30 hover:bg-amber-800/50 rounded-lg transition-colors">
+              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-red-300 hover:text-white bg-red-800/30 hover:bg-red-800/50 rounded-lg transition-colors">
                 Discard
               </button>
             )}
diff --git a/components/settings/unified/tabs/SiteGeneralTab.tsx b/components/settings/unified/tabs/SiteGeneralTab.tsx
index 2752960..6631e1a 100644
--- a/components/settings/unified/tabs/SiteGeneralTab.tsx
+++ b/components/settings/unified/tabs/SiteGeneralTab.tsx
@@ -181,15 +181,15 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, hasPendingAction
       {isDirty && (
         <div className={`sticky bottom-0 -mx-6 -mb-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
           hasPendingAction
-            ? 'bg-amber-950/90 border-amber-800/60'
+            ? 'bg-red-950/90 border-red-800/60'
             : 'bg-neutral-950/90 border-neutral-800'
         }`}>
-          <span className={`text-xs font-medium ${hasPendingAction ? 'text-amber-200' : 'text-neutral-400'}`}>
+          <span className={`text-xs font-medium ${hasPendingAction ? 'text-red-200' : 'text-neutral-400'}`}>
             {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
           </span>
           <div className="flex items-center gap-2">
             {hasPendingAction && (
-              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-amber-300 hover:text-white bg-amber-800/30 hover:bg-amber-800/50 rounded-lg transition-colors">
+              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-red-300 hover:text-white bg-red-800/30 hover:bg-red-800/50 rounded-lg transition-colors">
                 Discard
               </button>
             )}
diff --git a/components/settings/unified/tabs/SitePrivacyTab.tsx b/components/settings/unified/tabs/SitePrivacyTab.tsx
index 1b6b46f..90b7097 100644
--- a/components/settings/unified/tabs/SitePrivacyTab.tsx
+++ b/components/settings/unified/tabs/SitePrivacyTab.tsx
@@ -254,15 +254,15 @@ export default function SitePrivacyTab({ siteId, onDirtyChange, hasPendingAction
       {isDirty && (
         <div className={`sticky bottom-0 -mx-6 -mb-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
           hasPendingAction
-            ? 'bg-amber-950/90 border-amber-800/60'
+            ? 'bg-red-950/90 border-red-800/60'
             : 'bg-neutral-950/90 border-neutral-800'
         }`}>
-          <span className={`text-xs font-medium ${hasPendingAction ? 'text-amber-200' : 'text-neutral-400'}`}>
+          <span className={`text-xs font-medium ${hasPendingAction ? 'text-red-200' : 'text-neutral-400'}`}>
             {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
           </span>
           <div className="flex items-center gap-2">
             {hasPendingAction && (
-              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-amber-300 hover:text-white bg-amber-800/30 hover:bg-amber-800/50 rounded-lg transition-colors">
+              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-red-300 hover:text-white bg-red-800/30 hover:bg-red-800/50 rounded-lg transition-colors">
                 Discard
               </button>
             )}
diff --git a/components/settings/unified/tabs/SiteVisibilityTab.tsx b/components/settings/unified/tabs/SiteVisibilityTab.tsx
index 30790f6..ec6a977 100644
--- a/components/settings/unified/tabs/SiteVisibilityTab.tsx
+++ b/components/settings/unified/tabs/SiteVisibilityTab.tsx
@@ -150,15 +150,15 @@ export default function SiteVisibilityTab({ siteId, onDirtyChange, hasPendingAct
       {isDirty && (
         <div className={`sticky bottom-0 -mx-6 -mb-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
           hasPendingAction
-            ? 'bg-amber-950/90 border-amber-800/60'
+            ? 'bg-red-950/90 border-red-800/60'
             : 'bg-neutral-950/90 border-neutral-800'
         }`}>
-          <span className={`text-xs font-medium ${hasPendingAction ? 'text-amber-200' : 'text-neutral-400'}`}>
+          <span className={`text-xs font-medium ${hasPendingAction ? 'text-red-200' : 'text-neutral-400'}`}>
             {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
           </span>
           <div className="flex items-center gap-2">
             {hasPendingAction && (
-              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-amber-300 hover:text-white bg-amber-800/30 hover:bg-amber-800/50 rounded-lg transition-colors">
+              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-red-300 hover:text-white bg-red-800/30 hover:bg-red-800/50 rounded-lg transition-colors">
                 Discard
               </button>
             )}
-- 
2.49.1


From 8ec9edb126c760bdf78c96aeb49d46d459f14d51 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 21:09:37 +0100
Subject: [PATCH 274/428] fix: rose warning bar + proper Discard button sizing

---
 components/settings/unified/tabs/SiteBotSpamTab.tsx    | 8 ++++----
 components/settings/unified/tabs/SiteGeneralTab.tsx    | 8 ++++----
 components/settings/unified/tabs/SitePrivacyTab.tsx    | 8 ++++----
 components/settings/unified/tabs/SiteVisibilityTab.tsx | 8 ++++----
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/components/settings/unified/tabs/SiteBotSpamTab.tsx b/components/settings/unified/tabs/SiteBotSpamTab.tsx
index 99186e3..e8eaa8b 100644
--- a/components/settings/unified/tabs/SiteBotSpamTab.tsx
+++ b/components/settings/unified/tabs/SiteBotSpamTab.tsx
@@ -227,17 +227,17 @@ export default function SiteBotSpamTab({ siteId, onDirtyChange, hasPendingAction
       {isDirty && (
         <div className={`sticky bottom-0 -mx-6 -mb-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
           hasPendingAction
-            ? 'bg-red-950/90 border-red-800/60'
+            ? 'bg-rose-950/95 border-rose-800/50'
             : 'bg-neutral-950/90 border-neutral-800'
         }`}>
-          <span className={`text-xs font-medium ${hasPendingAction ? 'text-red-200' : 'text-neutral-400'}`}>
+          <span className={`text-sm font-medium ${hasPendingAction ? 'text-rose-100' : 'text-neutral-400'}`}>
             {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
           </span>
           <div className="flex items-center gap-2">
             {hasPendingAction && (
-              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-red-300 hover:text-white bg-red-800/30 hover:bg-red-800/50 rounded-lg transition-colors">
+              <Button onClick={onDiscard} variant="secondary" className="text-sm border-rose-700/50 text-rose-200 hover:bg-rose-900/40">
                 Discard
-              </button>
+              </Button>
             )}
             <Button onClick={handleSave} variant="primary" disabled={saving} className="text-sm">
               {saving ? 'Saving...' : 'Save Changes'}
diff --git a/components/settings/unified/tabs/SiteGeneralTab.tsx b/components/settings/unified/tabs/SiteGeneralTab.tsx
index 6631e1a..16bfc71 100644
--- a/components/settings/unified/tabs/SiteGeneralTab.tsx
+++ b/components/settings/unified/tabs/SiteGeneralTab.tsx
@@ -181,17 +181,17 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, hasPendingAction
       {isDirty && (
         <div className={`sticky bottom-0 -mx-6 -mb-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
           hasPendingAction
-            ? 'bg-red-950/90 border-red-800/60'
+            ? 'bg-rose-950/95 border-rose-800/50'
             : 'bg-neutral-950/90 border-neutral-800'
         }`}>
-          <span className={`text-xs font-medium ${hasPendingAction ? 'text-red-200' : 'text-neutral-400'}`}>
+          <span className={`text-sm font-medium ${hasPendingAction ? 'text-rose-100' : 'text-neutral-400'}`}>
             {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
           </span>
           <div className="flex items-center gap-2">
             {hasPendingAction && (
-              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-red-300 hover:text-white bg-red-800/30 hover:bg-red-800/50 rounded-lg transition-colors">
+              <Button onClick={onDiscard} variant="secondary" className="text-sm border-rose-700/50 text-rose-200 hover:bg-rose-900/40">
                 Discard
-              </button>
+              </Button>
             )}
             <Button onClick={handleSave} variant="primary" disabled={saving} className="text-sm">
               {saving ? 'Saving...' : 'Save Changes'}
diff --git a/components/settings/unified/tabs/SitePrivacyTab.tsx b/components/settings/unified/tabs/SitePrivacyTab.tsx
index 90b7097..092c578 100644
--- a/components/settings/unified/tabs/SitePrivacyTab.tsx
+++ b/components/settings/unified/tabs/SitePrivacyTab.tsx
@@ -254,17 +254,17 @@ export default function SitePrivacyTab({ siteId, onDirtyChange, hasPendingAction
       {isDirty && (
         <div className={`sticky bottom-0 -mx-6 -mb-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
           hasPendingAction
-            ? 'bg-red-950/90 border-red-800/60'
+            ? 'bg-rose-950/95 border-rose-800/50'
             : 'bg-neutral-950/90 border-neutral-800'
         }`}>
-          <span className={`text-xs font-medium ${hasPendingAction ? 'text-red-200' : 'text-neutral-400'}`}>
+          <span className={`text-sm font-medium ${hasPendingAction ? 'text-rose-100' : 'text-neutral-400'}`}>
             {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
           </span>
           <div className="flex items-center gap-2">
             {hasPendingAction && (
-              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-red-300 hover:text-white bg-red-800/30 hover:bg-red-800/50 rounded-lg transition-colors">
+              <Button onClick={onDiscard} variant="secondary" className="text-sm border-rose-700/50 text-rose-200 hover:bg-rose-900/40">
                 Discard
-              </button>
+              </Button>
             )}
             <Button onClick={handleSave} variant="primary" disabled={saving} className="text-sm">
               {saving ? 'Saving...' : 'Save Changes'}
diff --git a/components/settings/unified/tabs/SiteVisibilityTab.tsx b/components/settings/unified/tabs/SiteVisibilityTab.tsx
index ec6a977..1b83b9e 100644
--- a/components/settings/unified/tabs/SiteVisibilityTab.tsx
+++ b/components/settings/unified/tabs/SiteVisibilityTab.tsx
@@ -150,17 +150,17 @@ export default function SiteVisibilityTab({ siteId, onDirtyChange, hasPendingAct
       {isDirty && (
         <div className={`sticky bottom-0 -mx-6 -mb-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
           hasPendingAction
-            ? 'bg-red-950/90 border-red-800/60'
+            ? 'bg-rose-950/95 border-rose-800/50'
             : 'bg-neutral-950/90 border-neutral-800'
         }`}>
-          <span className={`text-xs font-medium ${hasPendingAction ? 'text-red-200' : 'text-neutral-400'}`}>
+          <span className={`text-sm font-medium ${hasPendingAction ? 'text-rose-100' : 'text-neutral-400'}`}>
             {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
           </span>
           <div className="flex items-center gap-2">
             {hasPendingAction && (
-              <button onClick={onDiscard} className="px-3 py-1.5 text-xs font-medium text-red-300 hover:text-white bg-red-800/30 hover:bg-red-800/50 rounded-lg transition-colors">
+              <Button onClick={onDiscard} variant="secondary" className="text-sm border-rose-700/50 text-rose-200 hover:bg-rose-900/40">
                 Discard
-              </button>
+              </Button>
             )}
             <Button onClick={handleSave} variant="primary" disabled={saving} className="text-sm">
               {saving ? 'Saving...' : 'Save Changes'}
-- 
2.49.1


From 570dda7bd2d317c6651a7707e7ffc2c3d15a32d7 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 21:12:45 +0100
Subject: [PATCH 275/428] =?UTF-8?q?fix:=20remove=20-mb-6=20from=20sticky?=
 =?UTF-8?q?=20bar=20=E2=80=94=20prevents=20jump=20at=20scroll=20bottom?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/settings/unified/tabs/SiteBotSpamTab.tsx    | 2 +-
 components/settings/unified/tabs/SiteGeneralTab.tsx    | 2 +-
 components/settings/unified/tabs/SitePrivacyTab.tsx    | 2 +-
 components/settings/unified/tabs/SiteVisibilityTab.tsx | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/settings/unified/tabs/SiteBotSpamTab.tsx b/components/settings/unified/tabs/SiteBotSpamTab.tsx
index e8eaa8b..cf8a618 100644
--- a/components/settings/unified/tabs/SiteBotSpamTab.tsx
+++ b/components/settings/unified/tabs/SiteBotSpamTab.tsx
@@ -225,7 +225,7 @@ export default function SiteBotSpamTab({ siteId, onDirtyChange, hasPendingAction
 
       {/* Sticky save bar */}
       {isDirty && (
-        <div className={`sticky bottom-0 -mx-6 -mb-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
+        <div className={`sticky bottom-0 -mx-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
           hasPendingAction
             ? 'bg-rose-950/95 border-rose-800/50'
             : 'bg-neutral-950/90 border-neutral-800'
diff --git a/components/settings/unified/tabs/SiteGeneralTab.tsx b/components/settings/unified/tabs/SiteGeneralTab.tsx
index 16bfc71..2d6faa9 100644
--- a/components/settings/unified/tabs/SiteGeneralTab.tsx
+++ b/components/settings/unified/tabs/SiteGeneralTab.tsx
@@ -179,7 +179,7 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, hasPendingAction
 
       {/* Sticky save bar */}
       {isDirty && (
-        <div className={`sticky bottom-0 -mx-6 -mb-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
+        <div className={`sticky bottom-0 -mx-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
           hasPendingAction
             ? 'bg-rose-950/95 border-rose-800/50'
             : 'bg-neutral-950/90 border-neutral-800'
diff --git a/components/settings/unified/tabs/SitePrivacyTab.tsx b/components/settings/unified/tabs/SitePrivacyTab.tsx
index 092c578..fea2a52 100644
--- a/components/settings/unified/tabs/SitePrivacyTab.tsx
+++ b/components/settings/unified/tabs/SitePrivacyTab.tsx
@@ -252,7 +252,7 @@ export default function SitePrivacyTab({ siteId, onDirtyChange, hasPendingAction
 
       {/* Sticky save bar — only visible when dirty */}
       {isDirty && (
-        <div className={`sticky bottom-0 -mx-6 -mb-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
+        <div className={`sticky bottom-0 -mx-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
           hasPendingAction
             ? 'bg-rose-950/95 border-rose-800/50'
             : 'bg-neutral-950/90 border-neutral-800'
diff --git a/components/settings/unified/tabs/SiteVisibilityTab.tsx b/components/settings/unified/tabs/SiteVisibilityTab.tsx
index 1b83b9e..e63c3b7 100644
--- a/components/settings/unified/tabs/SiteVisibilityTab.tsx
+++ b/components/settings/unified/tabs/SiteVisibilityTab.tsx
@@ -148,7 +148,7 @@ export default function SiteVisibilityTab({ siteId, onDirtyChange, hasPendingAct
 
       {/* Sticky save bar */}
       {isDirty && (
-        <div className={`sticky bottom-0 -mx-6 -mb-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
+        <div className={`sticky bottom-0 -mx-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
           hasPendingAction
             ? 'bg-rose-950/95 border-rose-800/50'
             : 'bg-neutral-950/90 border-neutral-800'
-- 
2.49.1


From 549ac273a14b9e95f4690f8d64a54b8ed64af241 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 21:23:42 +0100
Subject: [PATCH 276/428] refactor(settings): move save bar to modal level,
 remove from tabs

---
 .../settings/unified/tabs/SiteBotSpamTab.tsx  | 42 ++++---------------
 .../settings/unified/tabs/SiteGeneralTab.tsx  | 42 ++++---------------
 .../unified/tabs/SiteVisibilityTab.tsx        | 41 ++++--------------
 3 files changed, 25 insertions(+), 100 deletions(-)

diff --git a/components/settings/unified/tabs/SiteBotSpamTab.tsx b/components/settings/unified/tabs/SiteBotSpamTab.tsx
index cf8a618..464ba9a 100644
--- a/components/settings/unified/tabs/SiteBotSpamTab.tsx
+++ b/components/settings/unified/tabs/SiteBotSpamTab.tsx
@@ -1,18 +1,16 @@
 'use client'
 
-import { useState, useEffect, useRef } from 'react'
-import { Button, Toggle, toast, Spinner, getDateRange } from '@ciphera-net/ui'
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { Toggle, toast, Spinner, getDateRange } from '@ciphera-net/ui'
 import { ShieldCheck } from '@phosphor-icons/react'
 import { useSite, useBotFilterStats, useSessions } from '@/lib/swr/dashboard'
 import { updateSite } from '@/lib/api/sites'
 import { botFilterSessions, botUnfilterSessions } from '@/lib/api/bot-filter'
 
-export default function SiteBotSpamTab({ siteId, onDirtyChange, hasPendingAction, onDiscard }: { siteId: string; onDirtyChange?: (dirty: boolean) => void; hasPendingAction?: boolean; onDiscard?: () => void }) {
+export default function SiteBotSpamTab({ siteId, onDirtyChange, onRegisterSave }: { siteId: string; onDirtyChange?: (dirty: boolean) => void; onRegisterSave?: (fn: () => Promise<void>) => void }) {
   const { data: site, mutate } = useSite(siteId)
   const { data: botStats, mutate: mutateBotStats } = useBotFilterStats(siteId)
   const [filterBots, setFilterBots] = useState(false)
-  const [saving, setSaving] = useState(false)
-  const [isDirty, setIsDirty] = useState(false)
   const initialFilterRef = useRef<boolean | null>(null)
 
   const [botView, setBotView] = useState<'review' | 'blocked'>('review')
@@ -35,12 +33,10 @@ export default function SiteBotSpamTab({ siteId, onDirtyChange, hasPendingAction
   useEffect(() => {
     if (initialFilterRef.current === null) return
     const dirty = filterBots !== initialFilterRef.current
-    setIsDirty(dirty)
     onDirtyChange?.(dirty)
   }, [filterBots, onDirtyChange])
 
-  const handleSave = async () => {
-    setSaving(true)
+  const handleSave = useCallback(async () => {
     try {
       await updateSite(siteId, { name: site?.name || '', filter_bots: filterBots })
       await mutate()
@@ -49,10 +45,12 @@ export default function SiteBotSpamTab({ siteId, onDirtyChange, hasPendingAction
       toast.success('Bot filtering updated')
     } catch {
       toast.error('Failed to save')
-    } finally {
-      setSaving(false)
     }
-  }
+  }, [siteId, site?.name, filterBots, mutate, onDirtyChange])
+
+  useEffect(() => {
+    onRegisterSave?.(handleSave)
+  }, [handleSave, onRegisterSave])
 
   const handleBotFilter = async (sessionIds: string[]) => {
     try {
@@ -223,28 +221,6 @@ export default function SiteBotSpamTab({ siteId, onDirtyChange, hasPendingAction
         </div>
       </div>
 
-      {/* Sticky save bar */}
-      {isDirty && (
-        <div className={`sticky bottom-0 -mx-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
-          hasPendingAction
-            ? 'bg-rose-950/95 border-rose-800/50'
-            : 'bg-neutral-950/90 border-neutral-800'
-        }`}>
-          <span className={`text-sm font-medium ${hasPendingAction ? 'text-rose-100' : 'text-neutral-400'}`}>
-            {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
-          </span>
-          <div className="flex items-center gap-2">
-            {hasPendingAction && (
-              <Button onClick={onDiscard} variant="secondary" className="text-sm border-rose-700/50 text-rose-200 hover:bg-rose-900/40">
-                Discard
-              </Button>
-            )}
-            <Button onClick={handleSave} variant="primary" disabled={saving} className="text-sm">
-              {saving ? 'Saving...' : 'Save Changes'}
-            </Button>
-          </div>
-        </div>
-      )}
     </div>
   )
 }
diff --git a/components/settings/unified/tabs/SiteGeneralTab.tsx b/components/settings/unified/tabs/SiteGeneralTab.tsx
index 2d6faa9..086f227 100644
--- a/components/settings/unified/tabs/SiteGeneralTab.tsx
+++ b/components/settings/unified/tabs/SiteGeneralTab.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect, useRef } from 'react'
+import { useState, useEffect, useRef, useCallback } from 'react'
 import { useRouter } from 'next/navigation'
 import { Input, Button, Select, toast, Spinner, getAuthErrorMessage, CheckIcon, ZapIcon } from '@ciphera-net/ui'
 import { useSite } from '@/lib/swr/dashboard'
@@ -28,21 +28,19 @@ const TIMEZONES = [
   { value: 'Australia/Sydney', label: 'Australia/Sydney (AEST)' },
 ]
 
-export default function SiteGeneralTab({ siteId, onDirtyChange, hasPendingAction, onDiscard }: { siteId: string; onDirtyChange?: (dirty: boolean) => void; hasPendingAction?: boolean; onDiscard?: () => void }) {
+export default function SiteGeneralTab({ siteId, onDirtyChange, onRegisterSave }: { siteId: string; onDirtyChange?: (dirty: boolean) => void; onRegisterSave?: (fn: () => Promise<void>) => void }) {
   const router = useRouter()
   const { user } = useAuth()
   const { closeUnifiedSettings: closeSettings } = useUnifiedSettings()
   const { data: site, mutate } = useSite(siteId)
   const [name, setName] = useState('')
   const [timezone, setTimezone] = useState('UTC')
-  const [saving, setSaving] = useState(false)
   const [showDeleteModal, setShowDeleteModal] = useState(false)
   const [showVerificationModal, setShowVerificationModal] = useState(false)
 
   const canEdit = user?.role === 'owner' || user?.role === 'admin'
   const initialRef = useRef('')
   const hasInitialized = useRef(false)
-  const [isDirty, setIsDirty] = useState(false)
 
   useEffect(() => {
     if (!site || hasInitialized.current) return
@@ -50,7 +48,6 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, hasPendingAction
     setTimezone(site.timezone || 'UTC')
     initialRef.current = JSON.stringify({ name: site.name || '', timezone: site.timezone || 'UTC' })
     hasInitialized.current = true
-    setIsDirty(false)
   }, [site])
 
   // Track dirty state
@@ -58,13 +55,11 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, hasPendingAction
     if (!initialRef.current) return
     const current = JSON.stringify({ name, timezone })
     const dirty = current !== initialRef.current
-    setIsDirty(dirty)
     onDirtyChange?.(dirty)
   }, [name, timezone, onDirtyChange])
 
-  const handleSave = async () => {
+  const handleSave = useCallback(async () => {
     if (!site) return
-    setSaving(true)
     try {
       await updateSite(siteId, { name, timezone })
       await mutate()
@@ -73,10 +68,12 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, hasPendingAction
       toast.success('Site updated')
     } catch {
       toast.error('Failed to save')
-    } finally {
-      setSaving(false)
     }
-  }
+  }, [site, siteId, name, timezone, mutate, onDirtyChange])
+
+  useEffect(() => {
+    onRegisterSave?.(handleSave)
+  }, [handleSave, onRegisterSave])
 
   const handleResetData = async () => {
     if (!confirm('Are you sure you want to delete ALL data for this site? This action cannot be undone.')) return
@@ -177,29 +174,6 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, hasPendingAction
         </p>
       </div>
 
-      {/* Sticky save bar */}
-      {isDirty && (
-        <div className={`sticky bottom-0 -mx-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
-          hasPendingAction
-            ? 'bg-rose-950/95 border-rose-800/50'
-            : 'bg-neutral-950/90 border-neutral-800'
-        }`}>
-          <span className={`text-sm font-medium ${hasPendingAction ? 'text-rose-100' : 'text-neutral-400'}`}>
-            {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
-          </span>
-          <div className="flex items-center gap-2">
-            {hasPendingAction && (
-              <Button onClick={onDiscard} variant="secondary" className="text-sm border-rose-700/50 text-rose-200 hover:bg-rose-900/40">
-                Discard
-              </Button>
-            )}
-            <Button onClick={handleSave} variant="primary" disabled={saving} className="text-sm">
-              {saving ? 'Saving...' : 'Save Changes'}
-            </Button>
-          </div>
-        </div>
-      )}
-
       {/* Danger Zone */}
       {canEdit && (
         <div className="space-y-4 pt-4 border-t border-neutral-800">
diff --git a/components/settings/unified/tabs/SiteVisibilityTab.tsx b/components/settings/unified/tabs/SiteVisibilityTab.tsx
index e63c3b7..b88d712 100644
--- a/components/settings/unified/tabs/SiteVisibilityTab.tsx
+++ b/components/settings/unified/tabs/SiteVisibilityTab.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect, useRef } from 'react'
+import { useState, useEffect, useRef, useCallback } from 'react'
 import { Button, Input, Toggle, toast, Spinner } from '@ciphera-net/ui'
 import { Copy, CheckCircle, Lock } from '@phosphor-icons/react'
 import { AnimatePresence, motion } from 'framer-motion'
@@ -9,14 +9,12 @@ import { updateSite } from '@/lib/api/sites'
 
 const APP_URL = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3003'
 
-export default function SiteVisibilityTab({ siteId, onDirtyChange, hasPendingAction, onDiscard }: { siteId: string; onDirtyChange?: (dirty: boolean) => void; hasPendingAction?: boolean; onDiscard?: () => void }) {
+export default function SiteVisibilityTab({ siteId, onDirtyChange, onRegisterSave }: { siteId: string; onDirtyChange?: (dirty: boolean) => void; onRegisterSave?: (fn: () => Promise<void>) => void }) {
   const { data: site, mutate } = useSite(siteId)
   const [isPublic, setIsPublic] = useState(false)
   const [password, setPassword] = useState('')
   const [passwordEnabled, setPasswordEnabled] = useState(false)
-  const [saving, setSaving] = useState(false)
   const [linkCopied, setLinkCopied] = useState(false)
-  const [isDirty, setIsDirty] = useState(false)
   const initialRef = useRef('')
   const hasInitialized = useRef(false)
 
@@ -26,7 +24,6 @@ export default function SiteVisibilityTab({ siteId, onDirtyChange, hasPendingAct
     setPasswordEnabled(site.has_password ?? false)
     initialRef.current = JSON.stringify({ isPublic: site.is_public ?? false, passwordEnabled: site.has_password ?? false })
     hasInitialized.current = true
-    setIsDirty(false)
   }, [site])
 
   // Track dirty state
@@ -34,12 +31,10 @@ export default function SiteVisibilityTab({ siteId, onDirtyChange, hasPendingAct
     if (!initialRef.current) return
     const current = JSON.stringify({ isPublic, passwordEnabled })
     const dirty = current !== initialRef.current || password.length > 0
-    setIsDirty(dirty)
     onDirtyChange?.(dirty)
   }, [isPublic, passwordEnabled, password, onDirtyChange])
 
-  const handleSave = async () => {
-    setSaving(true)
+  const handleSave = useCallback(async () => {
     try {
       await updateSite(siteId, {
         name: site?.name || '',
@@ -54,10 +49,12 @@ export default function SiteVisibilityTab({ siteId, onDirtyChange, hasPendingAct
       toast.success('Visibility updated')
     } catch {
       toast.error('Failed to save')
-    } finally {
-      setSaving(false)
     }
-  }
+  }, [siteId, site?.name, isPublic, passwordEnabled, password, mutate, onDirtyChange])
+
+  useEffect(() => {
+    onRegisterSave?.(handleSave)
+  }, [handleSave, onRegisterSave])
 
   const copyLink = () => {
     navigator.clipboard.writeText(`${APP_URL}/share/${siteId}`)
@@ -146,28 +143,6 @@ export default function SiteVisibilityTab({ siteId, onDirtyChange, hasPendingAct
         )}
       </AnimatePresence>
 
-      {/* Sticky save bar */}
-      {isDirty && (
-        <div className={`sticky bottom-0 -mx-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
-          hasPendingAction
-            ? 'bg-rose-950/95 border-rose-800/50'
-            : 'bg-neutral-950/90 border-neutral-800'
-        }`}>
-          <span className={`text-sm font-medium ${hasPendingAction ? 'text-rose-100' : 'text-neutral-400'}`}>
-            {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
-          </span>
-          <div className="flex items-center gap-2">
-            {hasPendingAction && (
-              <Button onClick={onDiscard} variant="secondary" className="text-sm border-rose-700/50 text-rose-200 hover:bg-rose-900/40">
-                Discard
-              </Button>
-            )}
-            <Button onClick={handleSave} variant="primary" disabled={saving} className="text-sm">
-              {saving ? 'Saving...' : 'Save Changes'}
-            </Button>
-          </div>
-        </div>
-      )}
     </div>
   )
 }
-- 
2.49.1


From 5d21a81fad39ac1407d5287146bd6711127cb659 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 21:24:06 +0100
Subject: [PATCH 277/428] =?UTF-8?q?refactor(settings):=20move=20save=20bar?=
 =?UTF-8?q?=20to=20modal=20level=20=E2=80=94=20always=20flush=20with=20mod?=
 =?UTF-8?q?al=20bottom?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../settings/unified/UnifiedSettingsModal.tsx | 62 +++++++++++++++++--
 .../settings/unified/tabs/SitePrivacyTab.tsx  | 47 ++++----------
 2 files changed, 67 insertions(+), 42 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index e042a12..cf088fe 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -3,6 +3,7 @@
 import { useState, useCallback, useEffect, useRef } from 'react'
 import { AnimatePresence, motion } from 'framer-motion'
 import { X, GearSix, Buildings, User } from '@phosphor-icons/react'
+import { Button } from '@ciphera-net/ui'
 import { useUnifiedSettings } from '@/lib/unified-settings-context'
 import { useAuth } from '@/lib/auth/context'
 import { useSite } from '@/lib/swr/dashboard'
@@ -173,17 +174,15 @@ function TabContent({
   activeTab,
   siteId,
   onDirtyChange,
-  hasPendingAction,
-  onDiscard,
+  onRegisterSave,
 }: {
   context: SettingsContext
   activeTab: string
   siteId: string | null
   onDirtyChange: (dirty: boolean) => void
-  hasPendingAction: boolean
-  onDiscard: () => void
+  onRegisterSave: (fn: () => Promise<void>) => void
 }) {
-  const dirtyProps = { onDirtyChange, hasPendingAction, onDiscard }
+  const dirtyProps = { onDirtyChange, onRegisterSave }
   // Site tabs
   if (context === 'site' && siteId) {
     switch (activeTab) {
@@ -236,11 +235,15 @@ export default function UnifiedSettingsModal() {
 
   // ─── Dirty state & pending navigation ────────────────────────
   const isDirtyRef = useRef(false)
+  const [isDirtyVisible, setIsDirtyVisible] = useState(false)
   const pendingActionRef = useRef<(() => void) | null>(null)
   const [hasPendingAction, setHasPendingAction] = useState(false)
+  const saveHandlerRef = useRef<(() => Promise<void>) | null>(null)
+  const [saving, setSaving] = useState(false)
 
   const handleDirtyChange = useCallback((dirty: boolean) => {
     isDirtyRef.current = dirty
+    setIsDirtyVisible(dirty)
     // If user saved and there was a pending action, execute it
     if (!dirty && pendingActionRef.current) {
       const action = pendingActionRef.current
@@ -250,6 +253,20 @@ export default function UnifiedSettingsModal() {
     }
   }, [])
 
+  const handleRegisterSave = useCallback((fn: () => Promise<void>) => {
+    saveHandlerRef.current = fn
+  }, [])
+
+  const handleSaveFromBar = useCallback(async () => {
+    if (!saveHandlerRef.current) return
+    setSaving(true)
+    try {
+      await saveHandlerRef.current()
+    } finally {
+      setSaving(false)
+    }
+  }, [])
+
   /** Run action if clean, or store as pending if dirty */
   const guardedAction = useCallback((action: () => void) => {
     if (isDirtyRef.current) {
@@ -415,10 +432,43 @@ export default function UnifiedSettingsModal() {
                     transition={{ duration: 0.12 }}
                     className="p-6"
                   >
-                    <TabContent context={context} activeTab={activeTab} siteId={activeSiteId} onDirtyChange={handleDirtyChange} hasPendingAction={hasPendingAction} onDiscard={handleDiscard} />
+                    <TabContent context={context} activeTab={activeTab} siteId={activeSiteId} onDirtyChange={handleDirtyChange} onRegisterSave={handleRegisterSave} />
                   </motion.div>
                 </AnimatePresence>
               </div>
+
+              {/* Save bar — fixed at modal bottom, outside scroll */}
+              <AnimatePresence>
+                {isDirtyVisible && (
+                  <motion.div
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: 'auto', opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    transition={{ duration: 0.15 }}
+                    className="shrink-0 overflow-hidden"
+                  >
+                    <div className={`px-6 py-3 border-t flex items-center justify-between ${
+                      hasPendingAction
+                        ? 'bg-rose-950 border-rose-800/50'
+                        : 'bg-neutral-950 border-neutral-800'
+                    }`}>
+                      <span className={`text-sm font-medium ${hasPendingAction ? 'text-rose-100' : 'text-neutral-400'}`}>
+                        {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
+                      </span>
+                      <div className="flex items-center gap-2">
+                        {hasPendingAction && (
+                          <Button onClick={handleDiscard} variant="secondary" className="text-sm border-rose-700/50 text-rose-200 hover:bg-rose-900/40">
+                            Discard
+                          </Button>
+                        )}
+                        <Button onClick={handleSaveFromBar} variant="primary" disabled={saving} className="text-sm">
+                          {saving ? 'Saving...' : 'Save Changes'}
+                        </Button>
+                      </div>
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
             </div>
           </motion.div>
         </>
diff --git a/components/settings/unified/tabs/SitePrivacyTab.tsx b/components/settings/unified/tabs/SitePrivacyTab.tsx
index fea2a52..a6532bd 100644
--- a/components/settings/unified/tabs/SitePrivacyTab.tsx
+++ b/components/settings/unified/tabs/SitePrivacyTab.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import { useState, useEffect, useRef } from 'react'
-import { Button, Select, Toggle, toast, Spinner } from '@ciphera-net/ui'
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { Select, Toggle, toast, Spinner } from '@ciphera-net/ui'
 import { useSite, useSubscription, usePageSpeedConfig } from '@/lib/swr/dashboard'
 import { updateSite } from '@/lib/api/sites'
 import { updatePageSpeedConfig } from '@/lib/api/pagespeed'
@@ -28,7 +28,7 @@ function PrivacyToggle({ label, desc, checked, onToggle }: { label: string; desc
   )
 }
 
-export default function SitePrivacyTab({ siteId, onDirtyChange, hasPendingAction, onDiscard }: { siteId: string; onDirtyChange?: (dirty: boolean) => void; hasPendingAction?: boolean; onDiscard?: () => void }) {
+export default function SitePrivacyTab({ siteId, onDirtyChange, onRegisterSave }: { siteId: string; onDirtyChange?: (dirty: boolean) => void; onRegisterSave?: (fn: () => Promise<void>) => void }) {
   const { data: site, mutate } = useSite(siteId)
   const { data: subscription, error: subscriptionError, mutate: mutateSubscription } = useSubscription()
   const { data: psiConfig, mutate: mutatePSIConfig } = usePageSpeedConfig(siteId)
@@ -41,8 +41,6 @@ export default function SitePrivacyTab({ siteId, onDirtyChange, hasPendingAction
   const [dataRetention, setDataRetention] = useState(6)
   const [excludedPaths, setExcludedPaths] = useState('')
   const [snippetCopied, setSnippetCopied] = useState(false)
-  const [saving, setSaving] = useState(false)
-  const [isDirty, setIsDirty] = useState(false)
   const initialRef = useRef('')
 
   // Sync form state from site data — only on first load, not on SWR revalidation
@@ -68,20 +66,16 @@ export default function SitePrivacyTab({ siteId, onDirtyChange, hasPendingAction
       excludedPaths: (site.excluded_paths || []).join('\n'),
     })
     hasInitialized.current = true
-    setIsDirty(false)
   }, [site])
 
   // Track dirty state
   useEffect(() => {
     if (!initialRef.current) return
     const current = JSON.stringify({ collectPagePaths, collectReferrers, collectDeviceInfo, collectScreenRes, collectGeoData, hideUnknownLocations, dataRetention, excludedPaths })
-    const dirty = current !== initialRef.current
-    setIsDirty(dirty)
-    onDirtyChange?.(dirty)
+    onDirtyChange?.(current !== initialRef.current)
   }, [collectPagePaths, collectReferrers, collectDeviceInfo, collectScreenRes, collectGeoData, hideUnknownLocations, dataRetention, excludedPaths, onDirtyChange])
 
-  const handleSave = async () => {
-    setSaving(true)
+  const handleSave = useCallback(async () => {
     try {
       await updateSite(siteId, {
         name: site?.name || '',
@@ -100,10 +94,13 @@ export default function SitePrivacyTab({ siteId, onDirtyChange, hasPendingAction
       toast.success('Privacy settings updated')
     } catch {
       toast.error('Failed to save')
-    } finally {
-      setSaving(false)
     }
-  }
+  }, [siteId, site?.name, collectPagePaths, collectReferrers, collectDeviceInfo, collectScreenRes, collectGeoData, hideUnknownLocations, dataRetention, excludedPaths, mutate, onDirtyChange])
+
+  // Register save handler with modal
+  useEffect(() => {
+    onRegisterSave?.(handleSave)
+  }, [handleSave, onRegisterSave])
 
   if (!site) return <div className="flex items-center justify-center py-12"><Spinner className="w-6 h-6 text-neutral-500" /></div>
 
@@ -250,28 +247,6 @@ export default function SitePrivacyTab({ siteId, onDirtyChange, hasPendingAction
         </div>
       </div>
 
-      {/* Sticky save bar — only visible when dirty */}
-      {isDirty && (
-        <div className={`sticky bottom-0 -mx-6 px-6 py-3 backdrop-blur-md border-t flex items-center justify-between transition-colors ${
-          hasPendingAction
-            ? 'bg-rose-950/95 border-rose-800/50'
-            : 'bg-neutral-950/90 border-neutral-800'
-        }`}>
-          <span className={`text-sm font-medium ${hasPendingAction ? 'text-rose-100' : 'text-neutral-400'}`}>
-            {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
-          </span>
-          <div className="flex items-center gap-2">
-            {hasPendingAction && (
-              <Button onClick={onDiscard} variant="secondary" className="text-sm border-rose-700/50 text-rose-200 hover:bg-rose-900/40">
-                Discard
-              </Button>
-            )}
-            <Button onClick={handleSave} variant="primary" disabled={saving} className="text-sm">
-              {saving ? 'Saving...' : 'Save Changes'}
-            </Button>
-          </div>
-        </div>
-      )}
     </div>
   )
 }
-- 
2.49.1


From 3f884fca762c2f26a6b505890a35481e5c28d39e Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 21:26:48 +0100
Subject: [PATCH 278/428] feat(settings): wire WorkspaceGeneralTab into dirty
 tracking + modal save bar

---
 .../settings/unified/UnifiedSettingsModal.tsx |  2 +-
 .../unified/tabs/WorkspaceGeneralTab.tsx      | 36 +++++++++++--------
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index cf088fe..ec4f9cc 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -199,7 +199,7 @@ function TabContent({
   // Workspace tabs
   if (context === 'workspace') {
     switch (activeTab) {
-      case 'general': return <WorkspaceGeneralTab />
+      case 'general': return <WorkspaceGeneralTab {...dirtyProps} />
       case 'billing': return <WorkspaceBillingTab />
       case 'members': return <WorkspaceMembersTab />
       case 'notifications': return <WorkspaceNotificationsTab />
diff --git a/components/settings/unified/tabs/WorkspaceGeneralTab.tsx b/components/settings/unified/tabs/WorkspaceGeneralTab.tsx
index bdbbcd4..bb1bc5c 100644
--- a/components/settings/unified/tabs/WorkspaceGeneralTab.tsx
+++ b/components/settings/unified/tabs/WorkspaceGeneralTab.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef, useCallback } from 'react'
 import { useRouter } from 'next/navigation'
 import { Input, Button, toast } from '@ciphera-net/ui'
 import { Spinner } from '@ciphera-net/ui'
@@ -9,17 +9,18 @@ import { getOrganization, updateOrganization, deleteOrganization } from '@/lib/a
 import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { useUnifiedSettings } from '@/lib/unified-settings-context'
 
-export default function WorkspaceGeneralTab() {
+export default function WorkspaceGeneralTab({ onDirtyChange, onRegisterSave }: { onDirtyChange?: (dirty: boolean) => void; onRegisterSave?: (fn: () => Promise<void>) => void }) {
   const { user } = useAuth()
   const router = useRouter()
   const { closeUnifiedSettings } = useUnifiedSettings()
   const [name, setName] = useState('')
   const [slug, setSlug] = useState('')
   const [loading, setLoading] = useState(true)
-  const [saving, setSaving] = useState(false)
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
   const [deleteText, setDeleteText] = useState('')
   const [deleting, setDeleting] = useState(false)
+  const initialRef = useRef('')
+  const hasInitialized = useRef(false)
 
   useEffect(() => {
     if (!user?.org_id) return
@@ -28,23 +29,36 @@ export default function WorkspaceGeneralTab() {
       .then(org => {
         setName(org.name || '')
         setSlug(org.slug || '')
+        if (!hasInitialized.current) {
+          initialRef.current = JSON.stringify({ name: org.name || '', slug: org.slug || '' })
+          hasInitialized.current = true
+        }
       })
       .catch(() => {})
       .finally(() => setLoading(false))
   }, [user?.org_id])
 
-  const handleSave = async () => {
+  // Track dirty state
+  useEffect(() => {
+    if (!initialRef.current) return
+    onDirtyChange?.(JSON.stringify({ name, slug }) !== initialRef.current)
+  }, [name, slug, onDirtyChange])
+
+  const handleSave = useCallback(async () => {
     if (!user?.org_id) return
-    setSaving(true)
     try {
       await updateOrganization(user.org_id, name, slug)
+      initialRef.current = JSON.stringify({ name, slug })
+      onDirtyChange?.(false)
       toast.success('Organization updated')
     } catch (err) {
       toast.error(getAuthErrorMessage(err as Error) || 'Failed to update organization')
-    } finally {
-      setSaving(false)
     }
-  }
+  }, [user?.org_id, name, slug, onDirtyChange])
+
+  useEffect(() => {
+    onRegisterSave?.(handleSave)
+  }, [handleSave, onRegisterSave])
 
   const handleDelete = async () => {
     if (!user?.org_id || deleteText !== 'DELETE') return
@@ -91,12 +105,6 @@ export default function WorkspaceGeneralTab() {
         </div>
       </div>
 
-      <div className="flex justify-end">
-        <Button onClick={handleSave} variant="primary" disabled={saving}>
-          {saving ? 'Saving...' : 'Save Changes'}
-        </Button>
-      </div>
-
       {/* Danger Zone */}
       <div className="space-y-3 pt-4 border-t border-neutral-800">
         <h3 className="text-base font-semibold text-red-500">Danger Zone</h3>
-- 
2.49.1


From c53152fc68bb78f3084d264f9a626e6e326b7b09 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 21:37:31 +0100
Subject: [PATCH 279/428] fix: reset save bar visibility and handler on discard

---
 components/settings/unified/UnifiedSettingsModal.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index ec4f9cc..8b57088 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -279,7 +279,9 @@ export default function UnifiedSettingsModal() {
 
   const handleDiscard = useCallback(() => {
     isDirtyRef.current = false
+    setIsDirtyVisible(false)
     setHasPendingAction(false)
+    saveHandlerRef.current = null
     const action = pendingActionRef.current
     pendingActionRef.current = null
     action?.()
-- 
2.49.1


From 6c0061733bd5aee2d3916e2030ad1ff28477c678 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 21:39:55 +0100
Subject: [PATCH 280/428] fix: neutral save bar background, red text only when
 pending navigation

---
 components/settings/unified/UnifiedSettingsModal.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index 8b57088..f482c70 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -449,17 +449,13 @@ export default function UnifiedSettingsModal() {
                     transition={{ duration: 0.15 }}
                     className="shrink-0 overflow-hidden"
                   >
-                    <div className={`px-6 py-3 border-t flex items-center justify-between ${
-                      hasPendingAction
-                        ? 'bg-rose-950 border-rose-800/50'
-                        : 'bg-neutral-950 border-neutral-800'
-                    }`}>
-                      <span className={`text-sm font-medium ${hasPendingAction ? 'text-rose-100' : 'text-neutral-400'}`}>
+                    <div className="px-6 py-3 border-t border-neutral-800 bg-neutral-950 flex items-center justify-between">
+                      <span className={`text-sm font-medium ${hasPendingAction ? 'text-red-400' : 'text-neutral-400'}`}>
                         {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
                       </span>
                       <div className="flex items-center gap-2">
                         {hasPendingAction && (
-                          <Button onClick={handleDiscard} variant="secondary" className="text-sm border-rose-700/50 text-rose-200 hover:bg-rose-900/40">
+                          <Button onClick={handleDiscard} variant="secondary" className="text-sm">
                             Discard
                           </Button>
                         )}
-- 
2.49.1


From f794696e9003a8ad8a63f9999f6434515dd9f60b Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 21:55:14 +0100
Subject: [PATCH 281/428] fix: script features save with Save Changes instead
 of instantly

---
 .../settings/unified/tabs/SiteGeneralTab.tsx  | 28 ++++++++-----------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/components/settings/unified/tabs/SiteGeneralTab.tsx b/components/settings/unified/tabs/SiteGeneralTab.tsx
index 086f227..6087289 100644
--- a/components/settings/unified/tabs/SiteGeneralTab.tsx
+++ b/components/settings/unified/tabs/SiteGeneralTab.tsx
@@ -35,6 +35,7 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, onRegisterSave }
   const { data: site, mutate } = useSite(siteId)
   const [name, setName] = useState('')
   const [timezone, setTimezone] = useState('UTC')
+  const [scriptFeatures, setScriptFeatures] = useState<Record<string, unknown>>({})
   const [showDeleteModal, setShowDeleteModal] = useState(false)
   const [showVerificationModal, setShowVerificationModal] = useState(false)
 
@@ -46,30 +47,30 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, onRegisterSave }
     if (!site || hasInitialized.current) return
     setName(site.name || '')
     setTimezone(site.timezone || 'UTC')
-    initialRef.current = JSON.stringify({ name: site.name || '', timezone: site.timezone || 'UTC' })
+    setScriptFeatures(site.script_features || {})
+    initialRef.current = JSON.stringify({ name: site.name || '', timezone: site.timezone || 'UTC', scriptFeatures: JSON.stringify(site.script_features || {}) })
     hasInitialized.current = true
   }, [site])
 
   // Track dirty state
   useEffect(() => {
     if (!initialRef.current) return
-    const current = JSON.stringify({ name, timezone })
-    const dirty = current !== initialRef.current
-    onDirtyChange?.(dirty)
-  }, [name, timezone, onDirtyChange])
+    const current = JSON.stringify({ name, timezone, scriptFeatures: JSON.stringify(scriptFeatures) })
+    onDirtyChange?.(current !== initialRef.current)
+  }, [name, timezone, scriptFeatures, onDirtyChange])
 
   const handleSave = useCallback(async () => {
     if (!site) return
     try {
-      await updateSite(siteId, { name, timezone })
+      await updateSite(siteId, { name, timezone, script_features: scriptFeatures })
       await mutate()
-      initialRef.current = JSON.stringify({ name, timezone })
+      initialRef.current = JSON.stringify({ name, timezone, scriptFeatures: JSON.stringify(scriptFeatures) })
       onDirtyChange?.(false)
       toast.success('Site updated')
     } catch {
       toast.error('Failed to save')
     }
-  }, [site, siteId, name, timezone, mutate, onDirtyChange])
+  }, [site, siteId, name, timezone, scriptFeatures, mutate, onDirtyChange])
 
   useEffect(() => {
     onRegisterSave?.(handleSave)
@@ -134,17 +135,10 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, onRegisterSave }
         </div>
 
         <ScriptSetupBlock
-          site={{ domain: site.domain, name: site.name, script_features: site.script_features }}
+          site={{ domain: site.domain, name: site.name, script_features: scriptFeatures }}
           showFrameworkPicker
           className="mb-4"
-          onFeaturesChange={async (features) => {
-            try {
-              await updateSite(siteId, { name: site.name, timezone: site.timezone, script_features: features })
-              await mutate()
-            } catch {
-              toast.error('Failed to update script features')
-            }
-          }}
+          onFeaturesChange={(features) => setScriptFeatures(features)}
         />
 
         {/* Verify Installation */}
-- 
2.49.1


From cbf2125f0a24b47b817e20a5e223625895eabd83 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 21:59:36 +0100
Subject: [PATCH 282/428] fix: batch PageSpeed frequency and notification
 toggles into save flow

---
 .../settings/unified/UnifiedSettingsModal.tsx |  2 +-
 .../settings/unified/tabs/SitePrivacyTab.tsx  | 61 +++++++++++--------
 .../tabs/WorkspaceNotificationsTab.tsx        | 52 ++++++++++------
 3 files changed, 71 insertions(+), 44 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index f482c70..89029e8 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -202,7 +202,7 @@ function TabContent({
       case 'general': return <WorkspaceGeneralTab {...dirtyProps} />
       case 'billing': return <WorkspaceBillingTab />
       case 'members': return <WorkspaceMembersTab />
-      case 'notifications': return <WorkspaceNotificationsTab />
+      case 'notifications': return <WorkspaceNotificationsTab {...dirtyProps} />
       case 'audit': return <WorkspaceAuditTab />
     }
   }
diff --git a/components/settings/unified/tabs/SitePrivacyTab.tsx b/components/settings/unified/tabs/SitePrivacyTab.tsx
index a6532bd..003d79e 100644
--- a/components/settings/unified/tabs/SitePrivacyTab.tsx
+++ b/components/settings/unified/tabs/SitePrivacyTab.tsx
@@ -40,6 +40,7 @@ export default function SitePrivacyTab({ siteId, onDirtyChange, onRegisterSave }
   const [hideUnknownLocations, setHideUnknownLocations] = useState(false)
   const [dataRetention, setDataRetention] = useState(6)
   const [excludedPaths, setExcludedPaths] = useState('')
+  const [psiFrequency, setPsiFrequency] = useState('weekly')
   const [snippetCopied, setSnippetCopied] = useState(false)
   const initialRef = useRef('')
 
@@ -55,25 +56,40 @@ export default function SitePrivacyTab({ siteId, onDirtyChange, onRegisterSave }
     setHideUnknownLocations(site.hide_unknown_locations ?? false)
     setDataRetention(site.data_retention_months ?? 6)
     setExcludedPaths((site.excluded_paths || []).join('\n'))
-    initialRef.current = JSON.stringify({
-      collectPagePaths: site.collect_page_paths ?? true,
-      collectReferrers: site.collect_referrers ?? true,
-      collectDeviceInfo: site.collect_device_info ?? true,
-      collectScreenRes: site.collect_screen_resolution ?? true,
-      collectGeoData: site.collect_geo_data ?? 'full',
-      hideUnknownLocations: site.hide_unknown_locations ?? false,
-      dataRetention: site.data_retention_months ?? 6,
-      excludedPaths: (site.excluded_paths || []).join('\n'),
-    })
     hasInitialized.current = true
   }, [site])
 
+  // Sync PSI frequency separately (comes from a different SWR hook)
+  const psiInitialized = useRef(false)
+  useEffect(() => {
+    if (!psiConfig || psiInitialized.current) return
+    setPsiFrequency(psiConfig.frequency || 'weekly')
+    psiInitialized.current = true
+  }, [psiConfig])
+
+  // Build initial snapshot once both site + psi are loaded
+  useEffect(() => {
+    if (!hasInitialized.current || !initialRef.current && site) {
+      initialRef.current = JSON.stringify({
+        collectPagePaths: site?.collect_page_paths ?? true,
+        collectReferrers: site?.collect_referrers ?? true,
+        collectDeviceInfo: site?.collect_device_info ?? true,
+        collectScreenRes: site?.collect_screen_resolution ?? true,
+        collectGeoData: site?.collect_geo_data ?? 'full',
+        hideUnknownLocations: site?.hide_unknown_locations ?? false,
+        dataRetention: site?.data_retention_months ?? 6,
+        excludedPaths: (site?.excluded_paths || []).join('\n'),
+        psiFrequency: psiConfig?.frequency || 'weekly',
+      })
+    }
+  }, [site, psiConfig])
+
   // Track dirty state
   useEffect(() => {
     if (!initialRef.current) return
-    const current = JSON.stringify({ collectPagePaths, collectReferrers, collectDeviceInfo, collectScreenRes, collectGeoData, hideUnknownLocations, dataRetention, excludedPaths })
+    const current = JSON.stringify({ collectPagePaths, collectReferrers, collectDeviceInfo, collectScreenRes, collectGeoData, hideUnknownLocations, dataRetention, excludedPaths, psiFrequency })
     onDirtyChange?.(current !== initialRef.current)
-  }, [collectPagePaths, collectReferrers, collectDeviceInfo, collectScreenRes, collectGeoData, hideUnknownLocations, dataRetention, excludedPaths, onDirtyChange])
+  }, [collectPagePaths, collectReferrers, collectDeviceInfo, collectScreenRes, collectGeoData, hideUnknownLocations, dataRetention, excludedPaths, psiFrequency, onDirtyChange])
 
   const handleSave = useCallback(async () => {
     try {
@@ -88,14 +104,19 @@ export default function SitePrivacyTab({ siteId, onDirtyChange, onRegisterSave }
         data_retention_months: dataRetention,
         excluded_paths: excludedPaths.split('\n').map(p => p.trim()).filter(Boolean),
       })
+      // Save PSI frequency separately if it changed
+      if (psiConfig?.enabled && psiFrequency !== (psiConfig.frequency || 'weekly')) {
+        await updatePageSpeedConfig(siteId, { enabled: psiConfig.enabled, frequency: psiFrequency })
+        mutatePSIConfig()
+      }
       await mutate()
-      initialRef.current = JSON.stringify({ collectPagePaths, collectReferrers, collectDeviceInfo, collectScreenRes, collectGeoData, hideUnknownLocations, dataRetention, excludedPaths })
+      initialRef.current = JSON.stringify({ collectPagePaths, collectReferrers, collectDeviceInfo, collectScreenRes, collectGeoData, hideUnknownLocations, dataRetention, excludedPaths, psiFrequency })
       onDirtyChange?.(false)
       toast.success('Privacy settings updated')
     } catch {
       toast.error('Failed to save')
     }
-  }, [siteId, site?.name, collectPagePaths, collectReferrers, collectDeviceInfo, collectScreenRes, collectGeoData, hideUnknownLocations, dataRetention, excludedPaths, mutate, onDirtyChange])
+  }, [siteId, site?.name, collectPagePaths, collectReferrers, collectDeviceInfo, collectScreenRes, collectGeoData, hideUnknownLocations, dataRetention, excludedPaths, psiFrequency, psiConfig, mutatePSIConfig, mutate, onDirtyChange])
 
   // Register save handler with modal
   useEffect(() => {
@@ -195,16 +216,8 @@ export default function SitePrivacyTab({ siteId, onDirtyChange, onRegisterSave }
             </div>
             {psiConfig?.enabled ? (
               <Select
-                value={psiConfig.frequency || 'weekly'}
-                onChange={async (v) => {
-                  try {
-                    await updatePageSpeedConfig(siteId, { enabled: psiConfig.enabled, frequency: v })
-                    mutatePSIConfig()
-                    toast.success('Check frequency updated')
-                  } catch {
-                    toast.error('Failed to update')
-                  }
-                }}
+                value={psiFrequency}
+                onChange={(v) => setPsiFrequency(v)}
                 options={[
                   { value: 'daily', label: 'Daily' },
                   { value: 'weekly', label: 'Weekly' },
diff --git a/components/settings/unified/tabs/WorkspaceNotificationsTab.tsx b/components/settings/unified/tabs/WorkspaceNotificationsTab.tsx
index 154820e..7032999 100644
--- a/components/settings/unified/tabs/WorkspaceNotificationsTab.tsx
+++ b/components/settings/unified/tabs/WorkspaceNotificationsTab.tsx
@@ -1,15 +1,17 @@
 'use client'
 
-import { useState, useEffect } from 'react'
-import { toast, Spinner } from '@ciphera-net/ui'
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { Toggle, toast, Spinner } from '@ciphera-net/ui'
 import { useAuth } from '@/lib/auth/context'
 import { getNotificationSettings, updateNotificationSettings, type NotificationSettingsResponse } from '@/lib/api/notification-settings'
 
-export default function WorkspaceNotificationsTab() {
+export default function WorkspaceNotificationsTab({ onDirtyChange, onRegisterSave }: { onDirtyChange?: (dirty: boolean) => void; onRegisterSave?: (fn: () => Promise<void>) => void }) {
   const { user } = useAuth()
   const [data, setData] = useState<NotificationSettingsResponse | null>(null)
   const [settings, setSettings] = useState<Record<string, boolean>>({})
   const [loading, setLoading] = useState(true)
+  const initialRef = useRef('')
+  const hasInitialized = useRef(false)
 
   useEffect(() => {
     if (!user?.org_id) return
@@ -17,23 +19,40 @@ export default function WorkspaceNotificationsTab() {
       .then(resp => {
         setData(resp)
         setSettings(resp.settings || {})
+        if (!hasInitialized.current) {
+          initialRef.current = JSON.stringify(resp.settings || {})
+          hasInitialized.current = true
+        }
       })
       .catch(() => {})
       .finally(() => setLoading(false))
   }, [user?.org_id])
 
-  const handleToggle = async (key: string) => {
-    const prev = { ...settings }
-    const updated = { ...settings, [key]: !settings[key] }
-    setSettings(updated)
-    try {
-      await updateNotificationSettings(updated)
-    } catch {
-      setSettings(prev)
-      toast.error('Failed to update notification preference')
-    }
+  // Track dirty state
+  useEffect(() => {
+    if (!initialRef.current) return
+    onDirtyChange?.(JSON.stringify(settings) !== initialRef.current)
+  }, [settings, onDirtyChange])
+
+  const handleToggle = (key: string) => {
+    setSettings(prev => ({ ...prev, [key]: !prev[key] }))
   }
 
+  const handleSave = useCallback(async () => {
+    try {
+      await updateNotificationSettings(settings)
+      initialRef.current = JSON.stringify(settings)
+      onDirtyChange?.(false)
+      toast.success('Notification preferences updated')
+    } catch {
+      toast.error('Failed to update notification preferences')
+    }
+  }, [settings, onDirtyChange])
+
+  useEffect(() => {
+    onRegisterSave?.(handleSave)
+  }, [handleSave, onRegisterSave])
+
   if (loading) return <div className="flex items-center justify-center py-12"><Spinner className="w-6 h-6 text-neutral-500" /></div>
 
   return (
@@ -50,12 +69,7 @@ export default function WorkspaceNotificationsTab() {
               <p className="text-sm font-medium text-white">{cat.label}</p>
               <p className="text-xs text-neutral-400">{cat.description}</p>
             </div>
-            <button
-              onClick={() => handleToggle(cat.id)}
-              className={`relative w-10 h-6 rounded-full transition-colors duration-200 ${settings[cat.id] ? 'bg-brand-orange' : 'bg-neutral-700'}`}
-            >
-              <span className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform duration-200 ${settings[cat.id] ? 'translate-x-4' : ''}`} />
-            </button>
+            <Toggle checked={settings[cat.id] ?? false} onChange={() => handleToggle(cat.id)} />
           </div>
         ))}
 
-- 
2.49.1


From 712169187b4c457b3823add2b42ed89b92b8ff02 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 22:02:19 +0100
Subject: [PATCH 283/428] =?UTF-8?q?refactor(settings):=20native=20profile?=
 =?UTF-8?q?=20form=20replacing=20SharedProfileSettings=20=E2=80=94=20consi?=
 =?UTF-8?q?stent=20save=20bar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../settings/unified/UnifiedSettingsModal.tsx |   2 +-
 .../unified/tabs/AccountProfileTab.tsx        | 134 +++++++++++++++++-
 2 files changed, 130 insertions(+), 6 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index 89029e8..b529e14 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -210,7 +210,7 @@ function TabContent({
   // Account tabs
   if (context === 'account') {
     switch (activeTab) {
-      case 'profile': return <AccountProfileTab />
+      case 'profile': return <AccountProfileTab {...dirtyProps} />
       case 'security': return <AccountSecurityTab />
       case 'devices': return <AccountDevicesTab />
     }
diff --git a/components/settings/unified/tabs/AccountProfileTab.tsx b/components/settings/unified/tabs/AccountProfileTab.tsx
index 5eecee1..b7ff11d 100644
--- a/components/settings/unified/tabs/AccountProfileTab.tsx
+++ b/components/settings/unified/tabs/AccountProfileTab.tsx
@@ -1,17 +1,141 @@
 'use client'
 
-import ProfileSettings from '@/components/settings/ProfileSettings'
-import TrustedDevicesCard from '@/components/settings/TrustedDevicesCard'
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { Input, Button, toast, Spinner } from '@ciphera-net/ui'
+import { useAuth } from '@/lib/auth/context'
+import { updateDisplayName } from '@/lib/api/user'
+import { deleteAccount } from '@/lib/api/user'
+import { getAuthErrorMessage } from '@ciphera-net/ui'
+
+export default function AccountProfileTab({ onDirtyChange, onRegisterSave }: { onDirtyChange?: (dirty: boolean) => void; onRegisterSave?: (fn: () => Promise<void>) => void }) {
+  const { user, refresh, logout } = useAuth()
+  const [displayName, setDisplayName] = useState('')
+  const initialRef = useRef('')
+  const hasInitialized = useRef(false)
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+  const [deleteText, setDeleteText] = useState('')
+  const [deleting, setDeleting] = useState(false)
+
+  useEffect(() => {
+    if (!user || hasInitialized.current) return
+    setDisplayName(user.display_name || '')
+    initialRef.current = user.display_name || ''
+    hasInitialized.current = true
+  }, [user])
+
+  // Track dirty state
+  useEffect(() => {
+    if (!hasInitialized.current) return
+    onDirtyChange?.(displayName !== initialRef.current)
+  }, [displayName, onDirtyChange])
+
+  const handleSave = useCallback(async () => {
+    try {
+      await updateDisplayName(displayName.trim())
+      await refresh()
+      initialRef.current = displayName.trim()
+      onDirtyChange?.(false)
+      toast.success('Profile updated')
+    } catch (err) {
+      toast.error(getAuthErrorMessage(err as Error) || 'Failed to update profile')
+    }
+  }, [displayName, refresh, onDirtyChange])
+
+  useEffect(() => {
+    onRegisterSave?.(handleSave)
+  }, [handleSave, onRegisterSave])
+
+  const handleDelete = async () => {
+    if (deleteText !== 'DELETE') return
+    setDeleting(true)
+    try {
+      await deleteAccount()
+      logout()
+    } catch (err) {
+      toast.error(getAuthErrorMessage(err as Error) || 'Failed to delete account')
+      setDeleting(false)
+    }
+  }
+
+  if (!user) return <div className="flex items-center justify-center py-12"><Spinner className="w-6 h-6 text-neutral-500" /></div>
 
-export default function AccountProfileTab() {
   return (
-    <div className="space-y-6">
+    <div className="space-y-8">
       <div>
         <h3 className="text-base font-semibold text-white mb-1">Profile</h3>
         <p className="text-sm text-neutral-400">Manage your personal account settings.</p>
       </div>
 
-      <ProfileSettings activeTab="profile" borderless />
+      {/* Display Name */}
+      <div className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-neutral-300 mb-1.5">Display Name</label>
+          <Input
+            value={displayName}
+            onChange={e => setDisplayName(e.target.value)}
+            placeholder="Your name"
+          />
+        </div>
+
+        {/* Email — read-only display */}
+        <div>
+          <label className="block text-sm font-medium text-neutral-300 mb-1.5">Email Address</label>
+          <Input value={user.email} disabled className="opacity-60" />
+          <p className="text-xs text-neutral-500 mt-1">Email changes require password verification. Use <a href="https://auth.ciphera.net/settings" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">Ciphera Auth</a> to change your email.</p>
+        </div>
+      </div>
+
+      {/* Danger Zone */}
+      <div className="space-y-3 pt-4 border-t border-neutral-800">
+        <h3 className="text-base font-semibold text-red-500">Danger Zone</h3>
+        <div className="rounded-xl border border-red-900/30 bg-red-900/10 p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-white">Delete Account</p>
+              <p className="text-xs text-neutral-400">Permanently delete your account and all associated data.</p>
+            </div>
+            <Button
+              variant="secondary"
+              className="text-red-400 border-red-900 hover:bg-red-900/20 text-sm"
+              onClick={() => setShowDeleteConfirm(prev => !prev)}
+            >
+              Delete
+            </Button>
+          </div>
+          {showDeleteConfirm && (
+            <div className="mt-4 p-4 border border-red-900/50 bg-red-900/10 rounded-xl space-y-3">
+              <p className="text-sm text-red-300">This will permanently delete:</p>
+              <ul className="text-xs text-neutral-400 list-disc list-inside space-y-1">
+                <li>Your account and all personal data</li>
+                <li>All sessions and trusted devices</li>
+                <li>You will be removed from all organizations</li>
+              </ul>
+              <div>
+                <label className="block text-xs text-neutral-400 mb-1">Type DELETE to confirm</label>
+                <input
+                  type="text"
+                  value={deleteText}
+                  onChange={e => setDeleteText(e.target.value)}
+                  className="w-full px-3 py-2 border border-neutral-700 rounded-lg bg-neutral-900 text-white text-sm"
+                  placeholder="DELETE"
+                />
+              </div>
+              <div className="flex gap-2">
+                <button
+                  onClick={handleDelete}
+                  disabled={deleteText !== 'DELETE' || deleting}
+                  className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-medium disabled:opacity-50"
+                >
+                  {deleting ? 'Deleting...' : 'Delete Account'}
+                </button>
+                <button onClick={() => { setShowDeleteConfirm(false); setDeleteText('') }} className="px-4 py-2 text-neutral-400 hover:text-white text-sm">
+                  Cancel
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
     </div>
   )
 }
-- 
2.49.1


From 1c916bb598bc8b330f4761b612e1ba037e77b376 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 22:05:01 +0100
Subject: [PATCH 284/428] =?UTF-8?q?fix:=20deleteAccount=20requires=20passw?=
 =?UTF-8?q?ord=20=E2=80=94=20add=20password=20input=20to=20delete=20flow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../unified/tabs/AccountProfileTab.tsx        | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/components/settings/unified/tabs/AccountProfileTab.tsx b/components/settings/unified/tabs/AccountProfileTab.tsx
index b7ff11d..306d1c0 100644
--- a/components/settings/unified/tabs/AccountProfileTab.tsx
+++ b/components/settings/unified/tabs/AccountProfileTab.tsx
@@ -14,6 +14,7 @@ export default function AccountProfileTab({ onDirtyChange, onRegisterSave }: { o
   const hasInitialized = useRef(false)
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
   const [deleteText, setDeleteText] = useState('')
+  const [deletePassword, setDeletePassword] = useState('')
   const [deleting, setDeleting] = useState(false)
 
   useEffect(() => {
@@ -46,10 +47,10 @@ export default function AccountProfileTab({ onDirtyChange, onRegisterSave }: { o
   }, [handleSave, onRegisterSave])
 
   const handleDelete = async () => {
-    if (deleteText !== 'DELETE') return
+    if (deleteText !== 'DELETE' || !deletePassword) return
     setDeleting(true)
     try {
-      await deleteAccount()
+      await deleteAccount(deletePassword)
       logout()
     } catch (err) {
       toast.error(getAuthErrorMessage(err as Error) || 'Failed to delete account')
@@ -110,6 +111,16 @@ export default function AccountProfileTab({ onDirtyChange, onRegisterSave }: { o
                 <li>All sessions and trusted devices</li>
                 <li>You will be removed from all organizations</li>
               </ul>
+              <div>
+                <label className="block text-xs text-neutral-400 mb-1">Your password</label>
+                <input
+                  type="password"
+                  value={deletePassword}
+                  onChange={e => setDeletePassword(e.target.value)}
+                  className="w-full px-3 py-2 border border-neutral-700 rounded-lg bg-neutral-900 text-white text-sm"
+                  placeholder="Enter your password"
+                />
+              </div>
               <div>
                 <label className="block text-xs text-neutral-400 mb-1">Type DELETE to confirm</label>
                 <input
@@ -123,12 +134,12 @@ export default function AccountProfileTab({ onDirtyChange, onRegisterSave }: { o
               <div className="flex gap-2">
                 <button
                   onClick={handleDelete}
-                  disabled={deleteText !== 'DELETE' || deleting}
+                  disabled={deleteText !== 'DELETE' || !deletePassword || deleting}
                   className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-medium disabled:opacity-50"
                 >
                   {deleting ? 'Deleting...' : 'Delete Account'}
                 </button>
-                <button onClick={() => { setShowDeleteConfirm(false); setDeleteText('') }} className="px-4 py-2 text-neutral-400 hover:text-white text-sm">
+                <button onClick={() => { setShowDeleteConfirm(false); setDeleteText(''); setDeletePassword('') }} className="px-4 py-2 text-neutral-400 hover:text-white text-sm">
                   Cancel
                 </button>
               </div>
-- 
2.49.1


From db12ad04cff61f39e08ef02c666cb526e255ea19 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 22:19:37 +0100
Subject: [PATCH 285/428] feat(settings): create shared DangerZone component

---
 components/settings/unified/DangerZone.tsx | 60 ++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 components/settings/unified/DangerZone.tsx

diff --git a/components/settings/unified/DangerZone.tsx b/components/settings/unified/DangerZone.tsx
new file mode 100644
index 0000000..91f1dcb
--- /dev/null
+++ b/components/settings/unified/DangerZone.tsx
@@ -0,0 +1,60 @@
+'use client'
+
+import { Button } from '@ciphera-net/ui'
+
+interface DangerZoneItem {
+  title: string
+  description: string
+  buttonLabel: string
+  /** 'outline' = bordered button (Reset Data style), 'solid' = red filled button (Delete style) */
+  variant: 'outline' | 'solid'
+  onClick: () => void
+  disabled?: boolean
+}
+
+interface DangerZoneProps {
+  items: DangerZoneItem[]
+  children?: React.ReactNode
+}
+
+export function DangerZone({ items, children }: DangerZoneProps) {
+  return (
+    <div className="space-y-4 pt-6 border-t border-neutral-800">
+      <div>
+        <h3 className="text-base font-semibold text-red-500 mb-1">Danger Zone</h3>
+        <p className="text-xs text-neutral-500">Irreversible actions.</p>
+      </div>
+
+      {items.map((item) => (
+        <div key={item.title} className="rounded-xl border border-red-900/30 bg-red-900/10 p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-white">{item.title}</p>
+              <p className="text-xs text-neutral-400">{item.description}</p>
+            </div>
+            {item.variant === 'outline' ? (
+              <Button
+                variant="secondary"
+                className="text-sm text-red-400 border-red-900 hover:bg-red-900/20"
+                onClick={item.onClick}
+                disabled={item.disabled}
+              >
+                {item.buttonLabel}
+              </Button>
+            ) : (
+              <button
+                className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-medium disabled:opacity-50"
+                onClick={item.onClick}
+                disabled={item.disabled}
+              >
+                {item.buttonLabel}
+              </button>
+            )}
+          </div>
+        </div>
+      ))}
+
+      {children}
+    </div>
+  )
+}
-- 
2.49.1


From 1cbc8064e2b048dd88a2b205db3e7554e783ba6e Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 22:20:42 +0100
Subject: [PATCH 286/428] fix(settings): normalize SiteGeneralTab +
 SiteGoalsTab to design standards

---
 .../settings/unified/tabs/SiteGeneralTab.tsx  | 59 +++++++------------
 .../settings/unified/tabs/SiteGoalsTab.tsx    |  4 +-
 2 files changed, 22 insertions(+), 41 deletions(-)

diff --git a/components/settings/unified/tabs/SiteGeneralTab.tsx b/components/settings/unified/tabs/SiteGeneralTab.tsx
index 6087289..11b05cb 100644
--- a/components/settings/unified/tabs/SiteGeneralTab.tsx
+++ b/components/settings/unified/tabs/SiteGeneralTab.tsx
@@ -7,6 +7,7 @@ import { useSite } from '@/lib/swr/dashboard'
 import { updateSite, resetSiteData } from '@/lib/api/sites'
 import { useAuth } from '@/lib/auth/context'
 import { useUnifiedSettings } from '@/lib/unified-settings-context'
+import { DangerZone } from '@/components/settings/unified/DangerZone'
 import DeleteSiteModal from '@/components/sites/DeleteSiteModal'
 import ScriptSetupBlock from '@/components/sites/ScriptSetupBlock'
 import VerificationModal from '@/components/sites/VerificationModal'
@@ -95,7 +96,7 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, onRegisterSave }
   }
 
   return (
-    <div className="space-y-8">
+    <div className="space-y-6">
       {/* Site details */}
       <div className="space-y-4">
         <div>
@@ -170,44 +171,24 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, onRegisterSave }
 
       {/* Danger Zone */}
       {canEdit && (
-        <div className="space-y-4 pt-4 border-t border-neutral-800">
-          <div>
-            <h3 className="text-lg font-semibold text-red-600 dark:text-red-500 mb-1">Danger Zone</h3>
-            <p className="text-sm text-neutral-400">Irreversible actions for your site.</p>
-          </div>
-
-          <div className="p-4 border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-900/10 rounded-2xl">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="font-medium text-red-900 dark:text-red-300">Reset Data</p>
-                <p className="text-sm text-neutral-500 dark:text-neutral-400">Delete all stats and events. This cannot be undone.</p>
-              </div>
-              <button
-                type="button"
-                onClick={handleResetData}
-                className="px-4 py-2 bg-white dark:bg-neutral-900 border border-red-200 dark:border-red-900 text-red-600 dark:text-red-400 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 text-sm font-medium"
-              >
-                Reset Data
-              </button>
-            </div>
-          </div>
-
-          <div className="p-4 border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-900/10 rounded-2xl">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="font-medium text-red-900 dark:text-red-300">Delete Site</p>
-                <p className="text-sm text-neutral-500 dark:text-neutral-400">Schedule this site for deletion with a 7-day grace period.</p>
-              </div>
-              <button
-                type="button"
-                onClick={() => setShowDeleteModal(true)}
-                className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-medium"
-              >
-                Delete Site...
-              </button>
-            </div>
-          </div>
-        </div>
+        <DangerZone
+          items={[
+            {
+              title: 'Reset Data',
+              description: 'Delete all stats and events. This cannot be undone.',
+              buttonLabel: 'Reset Data',
+              variant: 'outline',
+              onClick: handleResetData,
+            },
+            {
+              title: 'Delete Site',
+              description: 'Schedule this site for deletion with a 7-day grace period.',
+              buttonLabel: 'Delete Site...',
+              variant: 'solid',
+              onClick: () => setShowDeleteModal(true),
+            },
+          ]}
+        />
       )}
 
       <DeleteSiteModal
diff --git a/components/settings/unified/tabs/SiteGoalsTab.tsx b/components/settings/unified/tabs/SiteGoalsTab.tsx
index 4121b92..ef9dbac 100644
--- a/components/settings/unified/tabs/SiteGoalsTab.tsx
+++ b/components/settings/unified/tabs/SiteGoalsTab.tsx
@@ -130,7 +130,7 @@ export default function SiteGoalsTab({ siteId }: { siteId: string }) {
 
       {/* Goals list */}
       {goals.length === 0 && !creating ? (
-        <div className="text-center py-10">
+        <div className="text-center py-8">
           <p className="text-sm text-neutral-500 mb-3">No goals yet. Add a goal to track custom events.</p>
           <Button onClick={startCreate} variant="primary" className="text-sm gap-1.5">
             <Plus weight="bold" className="w-3.5 h-3.5" /> Add your first goal
@@ -147,7 +147,7 @@ export default function SiteGoalsTab({ siteId }: { siteId: string }) {
                 <p className="text-sm font-medium text-white">{goal.name}</p>
                 <p className="text-xs text-neutral-500 font-mono">{goal.event_name}</p>
               </div>
-              <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+              <div className="flex items-center gap-1">
                 <button
                   onClick={() => startEdit(goal)}
                   className="p-1.5 rounded-lg text-neutral-500 hover:text-white hover:bg-neutral-800 transition-colors"
-- 
2.49.1


From 4d9c3aeabd31a9e8a594a3d78df87971b364f9e0 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 22:21:41 +0100
Subject: [PATCH 287/428] fix(settings): normalize Visibility, Privacy, BotSpam
 tabs to design standards

---
 .../settings/unified/tabs/SiteBotSpamTab.tsx  | 27 +++++++++----------
 .../settings/unified/tabs/SitePrivacyTab.tsx  | 18 ++++++-------
 .../unified/tabs/SiteVisibilityTab.tsx        |  4 +--
 3 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/components/settings/unified/tabs/SiteBotSpamTab.tsx b/components/settings/unified/tabs/SiteBotSpamTab.tsx
index 464ba9a..9f5574f 100644
--- a/components/settings/unified/tabs/SiteBotSpamTab.tsx
+++ b/components/settings/unified/tabs/SiteBotSpamTab.tsx
@@ -91,7 +91,7 @@ export default function SiteBotSpamTab({ siteId, onDirtyChange, onRegisterSave }
           <ShieldCheck weight="bold" className="w-5 h-5 text-brand-orange" />
           <div>
             <p className="text-sm font-medium text-white">Enable bot filtering</p>
-            <p className="text-xs text-neutral-400">Filter known bots, crawlers, referrer spam, and suspicious traffic.</p>
+            <p className="text-xs text-neutral-500">Filter known bots, crawlers, referrer spam, and suspicious traffic.</p>
           </div>
         </div>
         <Toggle checked={filterBots} onChange={() => setFilterBots(p => !p)} />
@@ -102,15 +102,15 @@ export default function SiteBotSpamTab({ siteId, onDirtyChange, onRegisterSave }
         <div className="grid grid-cols-3 gap-3">
           <div className="rounded-xl border border-neutral-800 bg-neutral-800/30 p-4 text-center">
             <p className="text-2xl font-bold text-white">{botStats.filtered_sessions ?? 0}</p>
-            <p className="text-xs text-neutral-400 mt-1">Sessions filtered</p>
+            <p className="text-xs text-neutral-500 mt-1">Sessions filtered</p>
           </div>
           <div className="rounded-xl border border-neutral-800 bg-neutral-800/30 p-4 text-center">
             <p className="text-2xl font-bold text-white">{botStats.filtered_events ?? 0}</p>
-            <p className="text-xs text-neutral-400 mt-1">Events filtered</p>
+            <p className="text-xs text-neutral-500 mt-1">Events filtered</p>
           </div>
           <div className="rounded-xl border border-neutral-800 bg-neutral-800/30 p-4 text-center">
             <p className="text-2xl font-bold text-white">{botStats.auto_blocked_this_month ?? 0}</p>
-            <p className="text-xs text-neutral-400 mt-1">Auto-blocked this month</p>
+            <p className="text-xs text-neutral-500 mt-1">Auto-blocked this month</p>
           </div>
         </div>
       )}
@@ -138,16 +138,13 @@ export default function SiteBotSpamTab({ siteId, onDirtyChange, onRegisterSave }
 
         {/* Suspicious only filter (review mode only) */}
         {botView === 'review' && (
-          <label className="flex items-center gap-2 text-sm text-neutral-400">
-            <input
-              type="checkbox"
-              checked={suspiciousOnly}
-              onChange={e => setSuspiciousOnly(e.target.checked)}
-              className="w-4 h-4 rounded"
-              style={{ accentColor: '#FD5E0F' }}
-            />
-            Suspicious only
-          </label>
+          <div className="flex items-center justify-between py-3 px-4 rounded-xl bg-neutral-800/30 border border-neutral-800">
+            <div>
+              <p className="text-sm font-medium text-white">Suspicious only</p>
+              <p className="text-xs text-neutral-500">Show only sessions flagged as suspicious.</p>
+            </div>
+            <Toggle checked={suspiciousOnly} onChange={() => setSuspiciousOnly(v => !v)} />
+          </div>
         )}
 
         {/* Bulk actions bar */}
@@ -168,7 +165,7 @@ export default function SiteBotSpamTab({ siteId, onDirtyChange, onRegisterSave }
           {(sessions || [])
             .filter(s => botView === 'blocked' ? s.bot_filtered : !s.bot_filtered)
             .map(session => (
-              <div key={session.session_id} className="flex items-center gap-3 p-3 rounded-xl border border-neutral-800 hover:border-neutral-700 transition-colors">
+              <div key={session.session_id} className="flex items-center gap-3 p-3 rounded-xl border border-neutral-800 hover:bg-neutral-800/40 hover:border-neutral-700 transition-colors">
                 <input
                   type="checkbox"
                   checked={selectedSessions.has(session.session_id)}
diff --git a/components/settings/unified/tabs/SitePrivacyTab.tsx b/components/settings/unified/tabs/SitePrivacyTab.tsx
index 003d79e..3c5c050 100644
--- a/components/settings/unified/tabs/SitePrivacyTab.tsx
+++ b/components/settings/unified/tabs/SitePrivacyTab.tsx
@@ -21,7 +21,7 @@ function PrivacyToggle({ label, desc, checked, onToggle }: { label: string; desc
     <div className="flex items-center justify-between py-3 px-4 rounded-xl hover:bg-neutral-800/20 transition-colors">
       <div>
         <p className="text-sm font-medium text-white">{label}</p>
-        <p className="text-xs text-neutral-400">{desc}</p>
+        <p className="text-xs text-neutral-500">{desc}</p>
       </div>
       <Toggle checked={checked} onChange={onToggle} />
     </div>
@@ -162,11 +162,11 @@ export default function SitePrivacyTab({ siteId, onDirtyChange, onRegisterSave }
           </div>
         )}
 
-        <div className="p-4 bg-neutral-900/50 rounded-xl border border-neutral-800">
+        <div className="p-4 bg-neutral-800/30 rounded-xl border border-neutral-800">
           <div className="flex items-center justify-between">
             <div>
               <p className="font-medium text-white text-sm">Keep raw event data for</p>
-              <p className="text-xs text-neutral-400 mt-0.5">Events older than this are automatically deleted. Aggregated daily stats are kept permanently.</p>
+              <p className="text-xs text-neutral-500 mt-0.5">Events older than this are automatically deleted. Aggregated daily stats are kept permanently.</p>
             </div>
             <Select
               value={String(dataRetention)}
@@ -199,7 +199,7 @@ export default function SitePrivacyTab({ siteId, onDirtyChange, onRegisterSave }
             onChange={e => setExcludedPaths(e.target.value)}
             rows={4}
             placeholder={"/admin/*\n/staging/*"}
-            className="w-full px-4 py-3 border border-neutral-800 rounded-lg bg-neutral-900/50 text-white font-mono text-sm focus:border-brand-orange focus:ring-4 focus:ring-brand-orange/10 outline-none transition-all"
+            className="w-full px-4 py-3 border border-neutral-800 rounded-lg bg-neutral-800/30 text-white font-mono text-sm focus:border-brand-orange focus:ring-4 focus:ring-brand-orange/10 outline-none transition-all"
           />
           <p className="text-xs text-neutral-500 mt-1">Enter paths to exclude from tracking (one per line). Supports wildcards (e.g., /admin/*).</p>
         </div>
@@ -208,11 +208,11 @@ export default function SitePrivacyTab({ siteId, onDirtyChange, onRegisterSave }
       {/* PageSpeed Monitoring */}
       <div className="space-y-3 pt-6 border-t border-neutral-800">
         <h4 className="text-sm font-medium text-neutral-300">PageSpeed Monitoring</h4>
-        <div className="p-4 bg-neutral-900/50 rounded-xl border border-neutral-800">
+        <div className="p-4 bg-neutral-800/30 rounded-xl border border-neutral-800">
           <div className="flex items-center justify-between">
             <div>
               <p className="font-medium text-white text-sm">Check frequency</p>
-              <p className="text-xs text-neutral-400 mt-0.5">How often PageSpeed Insights runs automated checks.</p>
+              <p className="text-xs text-neutral-500 mt-0.5">How often PageSpeed Insights runs automated checks.</p>
             </div>
             {psiConfig?.enabled ? (
               <Select
@@ -236,14 +236,14 @@ export default function SitePrivacyTab({ siteId, onDirtyChange, onRegisterSave }
       {/* Privacy Policy */}
       <div className="space-y-3 pt-6 border-t border-neutral-800">
         <h4 className="text-sm font-medium text-neutral-300">For your privacy policy</h4>
-        <p className="text-xs text-neutral-400">Copy the text below into your Privacy Policy. It updates automatically based on your saved settings.</p>
-        <p className="text-xs text-amber-600">This is provided for convenience and is not legal advice. Consult a lawyer for compliance requirements.</p>
+        <p className="text-xs text-neutral-500">Copy the text below into your Privacy Policy. It updates automatically based on your saved settings.</p>
+        <p className="text-xs text-amber-600 dark:text-amber-500">This is provided for convenience and is not legal advice. Consult a lawyer for compliance requirements.</p>
         <div className="relative">
           <textarea
             readOnly
             rows={6}
             value={generatePrivacySnippet(site)}
-            className="w-full px-4 py-3 pr-12 border border-neutral-800 rounded-xl bg-neutral-900/50 text-neutral-300 text-xs font-mono"
+            className="w-full px-4 py-3 pr-12 border border-neutral-800 rounded-xl bg-neutral-800/30 text-neutral-300 text-xs font-mono"
           />
           <button
             type="button"
diff --git a/components/settings/unified/tabs/SiteVisibilityTab.tsx b/components/settings/unified/tabs/SiteVisibilityTab.tsx
index b88d712..6b48acd 100644
--- a/components/settings/unified/tabs/SiteVisibilityTab.tsx
+++ b/components/settings/unified/tabs/SiteVisibilityTab.tsx
@@ -76,7 +76,7 @@ export default function SiteVisibilityTab({ siteId, onDirtyChange, onRegisterSav
       <div className="flex items-center justify-between py-3 px-4 rounded-xl bg-neutral-800/30 border border-neutral-800">
         <div>
           <p className="text-sm font-medium text-white">Public Dashboard</p>
-          <p className="text-xs text-neutral-400">Allow anyone with the link to view this dashboard.</p>
+          <p className="text-xs text-neutral-500">Allow anyone with the link to view this dashboard.</p>
         </div>
         <Toggle checked={isPublic} onChange={() => setIsPublic(p => !p)} />
       </div>
@@ -107,7 +107,7 @@ export default function SiteVisibilityTab({ siteId, onDirtyChange, onRegisterSav
                 <Lock weight="bold" className="w-4 h-4 text-neutral-500" />
                 <div>
                   <p className="text-sm font-medium text-white">Password Protection</p>
-                  <p className="text-xs text-neutral-400">Require a password to view the public dashboard.</p>
+                  <p className="text-xs text-neutral-500">Require a password to view the public dashboard.</p>
                 </div>
               </div>
               <Toggle checked={passwordEnabled} onChange={() => setPasswordEnabled(p => !p)} />
-- 
2.49.1


From a3b746deeb1514f73fb6baac71abfd42fe1f5f45 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 22:22:21 +0100
Subject: [PATCH 288/428] fix(settings): normalize Reports + Integrations tabs
 to design standards

---
 .../unified/tabs/SiteIntegrationsTab.tsx      | 43 +++++++++----------
 .../settings/unified/tabs/SiteReportsTab.tsx  | 14 +++---
 2 files changed, 27 insertions(+), 30 deletions(-)

diff --git a/components/settings/unified/tabs/SiteIntegrationsTab.tsx b/components/settings/unified/tabs/SiteIntegrationsTab.tsx
index fbbef09..09e4472 100644
--- a/components/settings/unified/tabs/SiteIntegrationsTab.tsx
+++ b/components/settings/unified/tabs/SiteIntegrationsTab.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import { useState } from 'react'
-import { Button, toast, Spinner } from '@ciphera-net/ui'
-import { Plugs, Trash, ShieldCheck, CaretDown } from '@phosphor-icons/react'
+import { Button, Input, Select, toast, Spinner } from '@ciphera-net/ui'
+import { Plugs, Trash, ShieldCheck } from '@phosphor-icons/react'
 import { useGSCStatus, useBunnyStatus } from '@/lib/swr/dashboard'
 import { disconnectGSC, getGSCAuthURL } from '@/lib/api/gsc'
 import { disconnectBunny, getBunnyPullZones, connectBunny, type BunnyPullZone } from '@/lib/api/bunny'
@@ -57,7 +57,7 @@ function IntegrationCard({
   children?: React.ReactNode
 }) {
   return (
-    <div className="rounded-xl border border-neutral-800 bg-neutral-800/20">
+    <div className="rounded-xl border border-neutral-800 bg-neutral-800/30">
       <div className="flex items-center justify-between py-4 px-4">
         <div className="flex items-center gap-3">
           <div className="p-2 rounded-lg bg-neutral-800">{icon}</div>
@@ -131,7 +131,7 @@ function GSCDetails({ gscStatus }: { gscStatus: { connected: boolean; google_ema
 
   return (
     <div className="px-4 pb-4 space-y-3">
-      <div className="grid grid-cols-2 gap-x-6 gap-y-2 px-4 py-3 rounded-lg bg-neutral-800/40 border border-neutral-700/50">
+      <div className="grid grid-cols-2 gap-x-6 gap-y-3 px-4 py-3 rounded-lg bg-neutral-800/40 border border-neutral-700/50">
         {rows.map(row => (
           <div key={row.label} className="flex flex-col gap-0.5">
             <span className="text-xs text-neutral-500">{row.label}</span>
@@ -200,12 +200,12 @@ function BunnySetupForm({ siteId, onConnected }: { siteId: string; onConnected:
         <div className="space-y-1.5">
           <label className="text-xs font-medium text-neutral-400">API Key</label>
           <div className="flex gap-2">
-            <input
+            <Input
               type="password"
               value={apiKey}
               onChange={e => setApiKey(e.target.value)}
               placeholder="Enter your BunnyCDN API key"
-              className="flex-1 px-3 py-2 text-sm bg-neutral-900 border border-neutral-700 rounded-lg text-white placeholder:text-neutral-500 focus:outline-none focus:border-neutral-500"
+              className="flex-1"
             />
             <Button
               onClick={handleLoadZones}
@@ -221,22 +221,19 @@ function BunnySetupForm({ siteId, onConnected }: { siteId: string; onConnected:
         {zonesLoaded && pullZones.length > 0 && (
           <div className="space-y-1.5">
             <label className="text-xs font-medium text-neutral-400">Pull Zone</label>
-            <div className="relative">
-              <select
-                value={selectedZone?.id ?? ''}
-                onChange={e => {
-                  const zone = pullZones.find(z => z.id === Number(e.target.value))
-                  setSelectedZone(zone || null)
-                }}
-                className="w-full px-3 py-2 text-sm bg-neutral-900 border border-neutral-700 rounded-lg text-white appearance-none focus:outline-none focus:border-neutral-500"
-              >
-                <option value="">Select a pull zone</option>
-                {pullZones.map(zone => (
-                  <option key={zone.id} value={zone.id}>{zone.name}</option>
-                ))}
-              </select>
-              <CaretDown weight="bold" className="absolute right-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-neutral-400 pointer-events-none" />
-            </div>
+            <Select
+              value={String(selectedZone?.id ?? '')}
+              onChange={(v) => {
+                const zone = pullZones.find(z => z.id === Number(v))
+                setSelectedZone(zone || null)
+              }}
+              variant="input"
+              fullWidth
+              options={[
+                { value: '', label: 'Select a pull zone' },
+                ...pullZones.map(zone => ({ value: String(zone.id), label: zone.name })),
+              ]}
+            />
           </div>
         )}
 
@@ -331,7 +328,7 @@ export default function SiteIntegrationsTab({ siteId }: { siteId: string }) {
         >
           {bunnyConnected && (
             <div className="px-4 pb-4 space-y-3">
-              <div className="grid grid-cols-2 gap-x-6 gap-y-2 px-4 py-3 rounded-lg bg-neutral-800/40 border border-neutral-700/50">
+              <div className="grid grid-cols-2 gap-x-6 gap-y-3 px-4 py-3 rounded-lg bg-neutral-800/40 border border-neutral-700/50">
                 <div className="flex flex-col gap-0.5">
                   <span className="text-xs text-neutral-500">Pull Zone</span>
                   <span className="text-sm text-white">{bunnyStatus?.pull_zone_name || 'Unknown'}</span>
diff --git a/components/settings/unified/tabs/SiteReportsTab.tsx b/components/settings/unified/tabs/SiteReportsTab.tsx
index ad567ab..b0e1295 100644
--- a/components/settings/unified/tabs/SiteReportsTab.tsx
+++ b/components/settings/unified/tabs/SiteReportsTab.tsx
@@ -147,7 +147,7 @@ function ScheduleRow({
           )}
         </div>
       </div>
-      <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0">
+      <div className="flex items-center gap-1 flex-shrink-0">
         <button onClick={() => onEdit(schedule)} className="p-1.5 rounded-lg text-neutral-500 hover:text-white hover:bg-neutral-800 transition-colors" title="Edit">
           <Pencil weight="bold" className="w-3.5 h-3.5" />
         </button>
@@ -205,7 +205,7 @@ function FormInput({ id, type = 'text', value, onChange, placeholder }: { id?: s
       value={value}
       onChange={(e) => onChange(e.target.value)}
       placeholder={placeholder}
-      className="w-full h-10 px-4 bg-transparent border border-neutral-800 rounded-lg text-sm text-white placeholder:text-neutral-600 focus:outline-none focus:border-brand-orange focus:ring-2 focus:ring-ring/20 transition-colors"
+      className="w-full h-10 px-4 bg-transparent border border-neutral-800 rounded-lg text-sm text-white placeholder:text-neutral-600 focus:outline-none focus:border-brand-orange focus:ring-4 focus:ring-brand-orange/10 transition-colors"
     />
   )
 }
@@ -622,7 +622,7 @@ export default function SiteReportsTab({ siteId }: { siteId: string }) {
   if (loading) return <div className="flex items-center justify-center py-12"><Spinner className="w-6 h-6 text-neutral-500" /></div>
 
   return (
-    <div className="space-y-8">
+    <div className="space-y-6">
       {/* Scheduled Reports */}
       <div className="space-y-3">
         <div className="flex items-center justify-between">
@@ -636,7 +636,7 @@ export default function SiteReportsTab({ siteId }: { siteId: string }) {
         </div>
 
         {reports.length === 0 ? (
-          <p className="text-sm text-neutral-500 text-center py-6">No scheduled reports yet.</p>
+          <p className="text-sm text-neutral-500 text-center py-8">No scheduled reports yet.</p>
         ) : (
           <div className="space-y-1">
             {reports.map((r) => (
@@ -647,19 +647,19 @@ export default function SiteReportsTab({ siteId }: { siteId: string }) {
       </div>
 
       {/* Alert Channels */}
-      <div className="space-y-3">
+      <div className="pt-6 border-t border-neutral-800 space-y-3">
         <div className="flex items-center justify-between">
           <div>
             <h3 className="text-base font-semibold text-white mb-1">Alert Channels</h3>
             <p className="text-sm text-neutral-400">Get notified when uptime monitors go down.</p>
           </div>
-          <Button variant="secondary" className="text-sm gap-1.5" onClick={openNewAlert}>
+          <Button variant="primary" className="text-sm gap-1.5" onClick={openNewAlert}>
             <Plus weight="bold" className="w-3.5 h-3.5" /> Add Channel
           </Button>
         </div>
 
         {alerts.length === 0 ? (
-          <p className="text-sm text-neutral-500 text-center py-6">No alert channels configured.</p>
+          <p className="text-sm text-neutral-500 text-center py-8">No alert channels configured.</p>
         ) : (
           <div className="space-y-1">
             {alerts.map((a) => (
-- 
2.49.1


From 9893b283cf2a01f5b4687243996143c3477e5d9f Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 22:24:02 +0100
Subject: [PATCH 289/428] fix(settings): normalize Account tabs to design
 standards

---
 .../unified/tabs/AccountProfileTab.tsx        | 113 ++++++++----------
 1 file changed, 53 insertions(+), 60 deletions(-)

diff --git a/components/settings/unified/tabs/AccountProfileTab.tsx b/components/settings/unified/tabs/AccountProfileTab.tsx
index 306d1c0..89d09a3 100644
--- a/components/settings/unified/tabs/AccountProfileTab.tsx
+++ b/components/settings/unified/tabs/AccountProfileTab.tsx
@@ -1,11 +1,12 @@
 'use client'
 
 import { useState, useEffect, useRef, useCallback } from 'react'
-import { Input, Button, toast, Spinner } from '@ciphera-net/ui'
+import { Input, toast, Spinner } from '@ciphera-net/ui'
 import { useAuth } from '@/lib/auth/context'
 import { updateDisplayName } from '@/lib/api/user'
 import { deleteAccount } from '@/lib/api/user'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
+import { DangerZone } from '@/components/settings/unified/DangerZone'
 
 export default function AccountProfileTab({ onDirtyChange, onRegisterSave }: { onDirtyChange?: (dirty: boolean) => void; onRegisterSave?: (fn: () => Promise<void>) => void }) {
   const { user, refresh, logout } = useAuth()
@@ -61,7 +62,7 @@ export default function AccountProfileTab({ onDirtyChange, onRegisterSave }: { o
   if (!user) return <div className="flex items-center justify-center py-12"><Spinner className="w-6 h-6 text-neutral-500" /></div>
 
   return (
-    <div className="space-y-8">
+    <div className="space-y-6">
       <div>
         <h3 className="text-base font-semibold text-white mb-1">Profile</h3>
         <p className="text-sm text-neutral-400">Manage your personal account settings.</p>
@@ -87,66 +88,58 @@ export default function AccountProfileTab({ onDirtyChange, onRegisterSave }: { o
       </div>
 
       {/* Danger Zone */}
-      <div className="space-y-3 pt-4 border-t border-neutral-800">
-        <h3 className="text-base font-semibold text-red-500">Danger Zone</h3>
-        <div className="rounded-xl border border-red-900/30 bg-red-900/10 p-4">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium text-white">Delete Account</p>
-              <p className="text-xs text-neutral-400">Permanently delete your account and all associated data.</p>
-            </div>
-            <Button
-              variant="secondary"
-              className="text-red-400 border-red-900 hover:bg-red-900/20 text-sm"
-              onClick={() => setShowDeleteConfirm(prev => !prev)}
-            >
-              Delete
-            </Button>
+      <DangerZone
+        items={[
+          {
+            title: 'Delete Account',
+            description: 'Permanently delete your account and all associated data.',
+            buttonLabel: 'Delete',
+            variant: 'solid',
+            onClick: () => setShowDeleteConfirm(prev => !prev),
+          },
+        ]}
+      />
+
+      {showDeleteConfirm && (
+        <div className="p-4 border border-red-900/50 bg-red-900/10 rounded-xl space-y-3">
+          <p className="text-sm text-red-300">This will permanently delete:</p>
+          <ul className="text-xs text-neutral-400 list-disc list-inside space-y-1">
+            <li>Your account and all personal data</li>
+            <li>All sessions and trusted devices</li>
+            <li>You will be removed from all organizations</li>
+          </ul>
+          <div>
+            <label className="block text-xs text-neutral-400 mb-1">Your password</label>
+            <Input
+              type="password"
+              value={deletePassword}
+              onChange={e => setDeletePassword(e.target.value)}
+              placeholder="Enter your password"
+            />
+          </div>
+          <div>
+            <label className="block text-xs text-neutral-400 mb-1">Type DELETE to confirm</label>
+            <Input
+              type="text"
+              value={deleteText}
+              onChange={e => setDeleteText(e.target.value)}
+              placeholder="DELETE"
+            />
+          </div>
+          <div className="flex gap-2">
+            <button
+              onClick={handleDelete}
+              disabled={deleteText !== 'DELETE' || !deletePassword || deleting}
+              className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-medium disabled:opacity-50"
+            >
+              {deleting ? 'Deleting...' : 'Delete Account'}
+            </button>
+            <button onClick={() => { setShowDeleteConfirm(false); setDeleteText(''); setDeletePassword('') }} className="px-4 py-2 text-neutral-400 hover:text-white text-sm">
+              Cancel
+            </button>
           </div>
-          {showDeleteConfirm && (
-            <div className="mt-4 p-4 border border-red-900/50 bg-red-900/10 rounded-xl space-y-3">
-              <p className="text-sm text-red-300">This will permanently delete:</p>
-              <ul className="text-xs text-neutral-400 list-disc list-inside space-y-1">
-                <li>Your account and all personal data</li>
-                <li>All sessions and trusted devices</li>
-                <li>You will be removed from all organizations</li>
-              </ul>
-              <div>
-                <label className="block text-xs text-neutral-400 mb-1">Your password</label>
-                <input
-                  type="password"
-                  value={deletePassword}
-                  onChange={e => setDeletePassword(e.target.value)}
-                  className="w-full px-3 py-2 border border-neutral-700 rounded-lg bg-neutral-900 text-white text-sm"
-                  placeholder="Enter your password"
-                />
-              </div>
-              <div>
-                <label className="block text-xs text-neutral-400 mb-1">Type DELETE to confirm</label>
-                <input
-                  type="text"
-                  value={deleteText}
-                  onChange={e => setDeleteText(e.target.value)}
-                  className="w-full px-3 py-2 border border-neutral-700 rounded-lg bg-neutral-900 text-white text-sm"
-                  placeholder="DELETE"
-                />
-              </div>
-              <div className="flex gap-2">
-                <button
-                  onClick={handleDelete}
-                  disabled={deleteText !== 'DELETE' || !deletePassword || deleting}
-                  className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-medium disabled:opacity-50"
-                >
-                  {deleting ? 'Deleting...' : 'Delete Account'}
-                </button>
-                <button onClick={() => { setShowDeleteConfirm(false); setDeleteText(''); setDeletePassword('') }} className="px-4 py-2 text-neutral-400 hover:text-white text-sm">
-                  Cancel
-                </button>
-              </div>
-            </div>
-          )}
         </div>
-      </div>
+      )}
     </div>
   )
 }
-- 
2.49.1


From e7b894309726906d7e43a13d5479ba68b82dee81 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 22:24:11 +0100
Subject: [PATCH 290/428] fix(settings): normalize all Workspace tabs to design
 standards

---
 .../unified/tabs/WorkspaceAuditTab.tsx        | 40 ++++-----
 .../unified/tabs/WorkspaceBillingTab.tsx      |  4 +-
 .../unified/tabs/WorkspaceGeneralTab.tsx      | 89 +++++++++----------
 .../unified/tabs/WorkspaceMembersTab.tsx      |  5 +-
 .../tabs/WorkspaceNotificationsTab.tsx        |  2 +-
 5 files changed, 67 insertions(+), 73 deletions(-)

diff --git a/components/settings/unified/tabs/WorkspaceAuditTab.tsx b/components/settings/unified/tabs/WorkspaceAuditTab.tsx
index 208d59f..1f156a9 100644
--- a/components/settings/unified/tabs/WorkspaceAuditTab.tsx
+++ b/components/settings/unified/tabs/WorkspaceAuditTab.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { Spinner } from '@ciphera-net/ui'
+import { Spinner, Input, Button } from '@ciphera-net/ui'
 import { useAuth } from '@/lib/auth/context'
 import { getAuditLog, type AuditLogEntry } from '@/lib/api/audit'
 import { formatDateTimeShort } from '@/lib/utils/formatDate'
@@ -72,48 +72,46 @@ export default function WorkspaceAuditTab() {
       <div className="flex flex-wrap gap-2 items-end">
         <div>
           <label className="block text-xs text-neutral-500 mb-1">Action</label>
-          <input
-            type="text"
+          <Input
             value={actionFilter}
             onChange={e => { setActionFilter(e.target.value); setPage(1) }}
             placeholder="e.g. site_created"
-            className="px-3 py-1.5 border border-neutral-700 rounded-lg bg-neutral-900 text-white text-sm w-40"
+            className="w-40"
           />
         </div>
         <div>
           <label className="block text-xs text-neutral-500 mb-1">From</label>
-          <input
+          <Input
             type="date"
             value={startDate}
             onChange={e => { setStartDate(e.target.value); setPage(1) }}
-            className="px-3 py-1.5 border border-neutral-700 rounded-lg bg-neutral-900 text-white text-sm"
           />
         </div>
         <div>
           <label className="block text-xs text-neutral-500 mb-1">To</label>
-          <input
+          <Input
             type="date"
             value={endDate}
             onChange={e => { setEndDate(e.target.value); setPage(1) }}
-            className="px-3 py-1.5 border border-neutral-700 rounded-lg bg-neutral-900 text-white text-sm"
           />
         </div>
         {(actionFilter || startDate || endDate) && (
-          <button
+          <Button
+            variant="secondary"
+            className="text-sm"
             onClick={() => { setActionFilter(''); setStartDate(''); setEndDate(''); setPage(1) }}
-            className="text-xs text-neutral-400 hover:text-white px-3 py-1.5"
           >
             Clear
-          </button>
+          </Button>
         )}
       </div>
 
       {entries.length === 0 ? (
         <p className="text-sm text-neutral-500 text-center py-8">No activity recorded yet.</p>
       ) : (
-        <div className="space-y-0.5">
+        <div className="space-y-1">
           {entries.map(entry => (
-            <div key={entry.id} className="flex items-center justify-between px-4 py-3 rounded-xl hover:bg-neutral-800/20 transition-colors">
+            <div key={entry.id} className="flex items-center justify-between px-4 py-3 rounded-xl hover:bg-neutral-800/40 transition-colors">
               <div>
                 <p className="text-sm text-white">
                   <span className="font-medium">{entry.actor_email || 'System'}</span>
@@ -132,25 +130,27 @@ export default function WorkspaceAuditTab() {
         </div>
       )}
 
-      <div className="flex items-center justify-between pt-3 border-t border-neutral-800">
+      <div className="flex items-center justify-between pt-6 border-t border-neutral-800">
         <span className="text-xs text-neutral-500">
           {total > 0 ? `${(page - 1) * PAGE_SIZE + 1}–${Math.min(page * PAGE_SIZE, total)} of ${total}` : 'No entries'}
         </span>
         <div className="flex gap-2">
-          <button
+          <Button
+            variant="secondary"
+            className="text-sm"
             onClick={() => setPage(p => Math.max(1, p - 1))}
             disabled={page <= 1}
-            className="px-3 py-1 text-xs text-neutral-400 hover:text-white disabled:opacity-30"
           >
             Previous
-          </button>
-          <button
+          </Button>
+          <Button
+            variant="secondary"
+            className="text-sm"
             onClick={() => setPage(p => p + 1)}
             disabled={page * PAGE_SIZE >= total}
-            className="px-3 py-1 text-xs text-neutral-400 hover:text-white disabled:opacity-30"
           >
             Next
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/components/settings/unified/tabs/WorkspaceBillingTab.tsx b/components/settings/unified/tabs/WorkspaceBillingTab.tsx
index 8fe0e78..e61c7cc 100644
--- a/components/settings/unified/tabs/WorkspaceBillingTab.tsx
+++ b/components/settings/unified/tabs/WorkspaceBillingTab.tsx
@@ -93,7 +93,7 @@ export default function WorkspaceBillingTab() {
       </div>
 
       {/* Plan card */}
-      <div className="rounded-xl border border-neutral-800 bg-neutral-800/30 p-5">
+      <div className="rounded-xl border border-neutral-800 bg-neutral-800/30 p-4">
         <div className="flex items-center justify-between mb-4">
           <div className="flex items-center gap-3">
             <h4 className="text-lg font-bold text-white">{planLabel} Plan</h4>
@@ -173,7 +173,7 @@ export default function WorkspaceBillingTab() {
 
       {/* Recent Invoices */}
       {orders.length > 0 && (
-        <div className="space-y-2 pt-4 border-t border-neutral-800">
+        <div className="space-y-2 pt-6 border-t border-neutral-800">
           <h4 className="text-sm font-medium text-neutral-300">Recent Invoices</h4>
           <div className="space-y-1">
             {orders.map(order => (
diff --git a/components/settings/unified/tabs/WorkspaceGeneralTab.tsx b/components/settings/unified/tabs/WorkspaceGeneralTab.tsx
index bb1bc5c..242099e 100644
--- a/components/settings/unified/tabs/WorkspaceGeneralTab.tsx
+++ b/components/settings/unified/tabs/WorkspaceGeneralTab.tsx
@@ -8,6 +8,7 @@ import { useAuth } from '@/lib/auth/context'
 import { getOrganization, updateOrganization, deleteOrganization } from '@/lib/api/organization'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { useUnifiedSettings } from '@/lib/unified-settings-context'
+import { DangerZone } from '@/components/settings/unified/DangerZone'
 
 export default function WorkspaceGeneralTab({ onDirtyChange, onRegisterSave }: { onDirtyChange?: (dirty: boolean) => void; onRegisterSave?: (fn: () => Promise<void>) => void }) {
   const { user } = useAuth()
@@ -83,7 +84,7 @@ export default function WorkspaceGeneralTab({ onDirtyChange, onRegisterSave }: {
   }
 
   return (
-    <div className="space-y-8">
+    <div className="space-y-6">
       <div className="space-y-4">
         <div>
           <h3 className="text-base font-semibold text-white mb-1">General Information</h3>
@@ -106,57 +107,47 @@ export default function WorkspaceGeneralTab({ onDirtyChange, onRegisterSave }: {
       </div>
 
       {/* Danger Zone */}
-      <div className="space-y-3 pt-4 border-t border-neutral-800">
-        <h3 className="text-base font-semibold text-red-500">Danger Zone</h3>
-        <div className="rounded-xl border border-red-900/30 bg-red-900/10 p-4">
-          <div className="flex items-center justify-between">
+      <DangerZone
+        items={[{
+          title: 'Delete Organization',
+          description: 'Permanently delete this organization and all its data.',
+          buttonLabel: 'Delete',
+          variant: 'solid',
+          onClick: () => setShowDeleteConfirm(prev => !prev),
+        }]}
+      >
+        {showDeleteConfirm && (
+          <div className="p-4 border border-red-900/50 bg-red-900/10 rounded-xl space-y-3">
+            <p className="text-sm text-red-300">This will permanently delete:</p>
+            <ul className="text-xs text-neutral-400 list-disc list-inside space-y-1">
+              <li>All sites and their analytics data</li>
+              <li>All team members and pending invitations</li>
+              <li>Active subscription will be cancelled</li>
+              <li>All notifications and settings</li>
+            </ul>
             <div>
-              <p className="text-sm font-medium text-white">Delete Organization</p>
-              <p className="text-xs text-neutral-400">Permanently delete this organization and all its data.</p>
+              <label className="block text-xs text-neutral-400 mb-1">Type DELETE to confirm</label>
+              <Input
+                value={deleteText}
+                onChange={e => setDeleteText(e.target.value)}
+                placeholder="DELETE"
+              />
+            </div>
+            <div className="flex gap-2">
+              <button
+                onClick={handleDelete}
+                disabled={deleteText !== 'DELETE' || deleting}
+                className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-medium disabled:opacity-50"
+              >
+                {deleting ? 'Deleting...' : 'Delete Organization'}
+              </button>
+              <button onClick={() => { setShowDeleteConfirm(false); setDeleteText('') }} className="px-4 py-2 text-neutral-400 hover:text-white text-sm">
+                Cancel
+              </button>
             </div>
-            <Button
-              variant="secondary"
-              className="text-red-400 border-red-900 hover:bg-red-900/20 text-sm"
-              onClick={() => setShowDeleteConfirm(prev => !prev)}
-            >
-              Delete
-            </Button>
           </div>
-          {showDeleteConfirm && (
-            <div className="mt-4 p-4 border border-red-900/50 bg-red-900/10 rounded-xl space-y-3">
-              <p className="text-sm text-red-300">This will permanently delete:</p>
-              <ul className="text-xs text-neutral-400 list-disc list-inside space-y-1">
-                <li>All sites and their analytics data</li>
-                <li>All team members and pending invitations</li>
-                <li>Active subscription will be cancelled</li>
-                <li>All notifications and settings</li>
-              </ul>
-              <div>
-                <label className="block text-xs text-neutral-400 mb-1">Type DELETE to confirm</label>
-                <input
-                  type="text"
-                  value={deleteText}
-                  onChange={e => setDeleteText(e.target.value)}
-                  className="w-full px-3 py-2 border border-neutral-700 rounded-lg bg-neutral-900 text-white text-sm"
-                  placeholder="DELETE"
-                />
-              </div>
-              <div className="flex gap-2">
-                <button
-                  onClick={handleDelete}
-                  disabled={deleteText !== 'DELETE' || deleting}
-                  className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-medium disabled:opacity-50"
-                >
-                  {deleting ? 'Deleting...' : 'Delete Organization'}
-                </button>
-                <button onClick={() => { setShowDeleteConfirm(false); setDeleteText('') }} className="px-4 py-2 text-neutral-400 hover:text-white text-sm">
-                  Cancel
-                </button>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
+        )}
+      </DangerZone>
     </div>
   )
 }
diff --git a/components/settings/unified/tabs/WorkspaceMembersTab.tsx b/components/settings/unified/tabs/WorkspaceMembersTab.tsx
index f030476..c95492c 100644
--- a/components/settings/unified/tabs/WorkspaceMembersTab.tsx
+++ b/components/settings/unified/tabs/WorkspaceMembersTab.tsx
@@ -166,11 +166,14 @@ export default function WorkspaceMembersTab() {
             </div>
           </div>
         ))}
+        {members.length === 0 && (
+          <p className="text-sm text-neutral-500 text-center py-8">No members found.</p>
+        )}
       </div>
 
       {/* Pending Invitations */}
       {invitations.length > 0 && (
-        <div className="space-y-2 pt-4 border-t border-neutral-800">
+        <div className="space-y-2 pt-6 border-t border-neutral-800">
           <h4 className="text-sm font-medium text-neutral-300">Pending Invitations</h4>
           {invitations.map(inv => (
             <div key={inv.id} className="flex items-center justify-between p-3 rounded-xl border border-neutral-800">
diff --git a/components/settings/unified/tabs/WorkspaceNotificationsTab.tsx b/components/settings/unified/tabs/WorkspaceNotificationsTab.tsx
index 7032999..c024a0d 100644
--- a/components/settings/unified/tabs/WorkspaceNotificationsTab.tsx
+++ b/components/settings/unified/tabs/WorkspaceNotificationsTab.tsx
@@ -74,7 +74,7 @@ export default function WorkspaceNotificationsTab({ onDirtyChange, onRegisterSav
         ))}
 
         {(!data?.categories || data.categories.length === 0) && (
-          <p className="text-sm text-neutral-500 text-center py-6">No notification preferences available.</p>
+          <p className="text-sm text-neutral-500 text-center py-8">No notification preferences available.</p>
         )}
       </div>
     </div>
-- 
2.49.1


From 1da71aa1a20782b55859ec4ae07d9e1ce75d4568 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 22:44:23 +0100
Subject: [PATCH 291/428] fix(settings): wrap all settings items in card blocks
 for visual consistency

---
 .../unified/tabs/AccountProfileTab.tsx        |  6 ++---
 .../settings/unified/tabs/SiteGeneralTab.tsx  |  8 +++---
 .../settings/unified/tabs/SitePrivacyTab.tsx  | 27 +++++++++++--------
 .../unified/tabs/SiteVisibilityTab.tsx        |  2 +-
 .../unified/tabs/WorkspaceGeneralTab.tsx      |  6 ++---
 .../unified/tabs/WorkspaceMembersTab.tsx      |  4 +--
 .../tabs/WorkspaceNotificationsTab.tsx        |  4 +--
 7 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/components/settings/unified/tabs/AccountProfileTab.tsx b/components/settings/unified/tabs/AccountProfileTab.tsx
index 89d09a3..e0c78f5 100644
--- a/components/settings/unified/tabs/AccountProfileTab.tsx
+++ b/components/settings/unified/tabs/AccountProfileTab.tsx
@@ -69,8 +69,8 @@ export default function AccountProfileTab({ onDirtyChange, onRegisterSave }: { o
       </div>
 
       {/* Display Name */}
-      <div className="space-y-4">
-        <div>
+      <div className="space-y-3">
+        <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
           <label className="block text-sm font-medium text-neutral-300 mb-1.5">Display Name</label>
           <Input
             value={displayName}
@@ -80,7 +80,7 @@ export default function AccountProfileTab({ onDirtyChange, onRegisterSave }: { o
         </div>
 
         {/* Email — read-only display */}
-        <div>
+        <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
           <label className="block text-sm font-medium text-neutral-300 mb-1.5">Email Address</label>
           <Input value={user.email} disabled className="opacity-60" />
           <p className="text-xs text-neutral-500 mt-1">Email changes require password verification. Use <a href="https://auth.ciphera.net/settings" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">Ciphera Auth</a> to change your email.</p>
diff --git a/components/settings/unified/tabs/SiteGeneralTab.tsx b/components/settings/unified/tabs/SiteGeneralTab.tsx
index 11b05cb..ae52308 100644
--- a/components/settings/unified/tabs/SiteGeneralTab.tsx
+++ b/components/settings/unified/tabs/SiteGeneralTab.tsx
@@ -104,13 +104,13 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, onRegisterSave }
           <p className="text-sm text-neutral-400">Update your site details and tracking script.</p>
         </div>
 
-        <div className="space-y-4">
-          <div>
+        <div className="space-y-3">
+          <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
             <label className="block text-sm font-medium text-neutral-300 mb-1.5">Site Name</label>
             <Input value={name} onChange={e => setName(e.target.value)} placeholder="My Website" />
           </div>
 
-          <div>
+          <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
             <label className="block text-sm font-medium text-neutral-300 mb-1.5">Timezone</label>
             <Select
               value={timezone}
@@ -120,7 +120,7 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, onRegisterSave }
             />
           </div>
 
-          <div>
+          <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
             <label className="block text-sm font-medium text-neutral-300 mb-1.5">Domain</label>
             <Input value={site.domain} disabled className="opacity-60" />
             <p className="text-xs text-neutral-500 mt-1">Domain cannot be changed after creation.</p>
diff --git a/components/settings/unified/tabs/SitePrivacyTab.tsx b/components/settings/unified/tabs/SitePrivacyTab.tsx
index 3c5c050..7008efe 100644
--- a/components/settings/unified/tabs/SitePrivacyTab.tsx
+++ b/components/settings/unified/tabs/SitePrivacyTab.tsx
@@ -18,7 +18,7 @@ const GEO_OPTIONS = [
 
 function PrivacyToggle({ label, desc, checked, onToggle }: { label: string; desc: string; checked: boolean; onToggle: () => void }) {
   return (
-    <div className="flex items-center justify-between py-3 px-4 rounded-xl hover:bg-neutral-800/20 transition-colors">
+    <div className="flex items-center justify-between p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
       <div>
         <p className="text-sm font-medium text-white">{label}</p>
         <p className="text-xs text-neutral-500">{desc}</p>
@@ -132,7 +132,7 @@ export default function SitePrivacyTab({ siteId, onDirtyChange, onRegisterSave }
         <p className="text-sm text-neutral-400">Control what data is collected from your visitors.</p>
       </div>
 
-      <div className="space-y-1">
+      <div className="space-y-3">
         <PrivacyToggle label="Page paths" desc="Track which pages visitors view." checked={collectPagePaths} onToggle={() => setCollectPagePaths(v => !v)} />
         <PrivacyToggle label="Referrers" desc="Track where visitors come from." checked={collectReferrers} onToggle={() => setCollectReferrers(v => !v)} />
         <PrivacyToggle label="Device info" desc="Track browser, OS, and device type." checked={collectDeviceInfo} onToggle={() => setCollectDeviceInfo(v => !v)} />
@@ -140,15 +140,20 @@ export default function SitePrivacyTab({ siteId, onDirtyChange, onRegisterSave }
         <PrivacyToggle label="Hide unknown locations" desc='Exclude "Unknown" from location stats.' checked={hideUnknownLocations} onToggle={() => setHideUnknownLocations(v => !v)} />
       </div>
 
-      <div>
-        <label className="block text-sm font-medium text-neutral-300 mb-1.5">Geographic data</label>
-        <Select
-          value={collectGeoData}
-          onChange={setCollectGeoData}
-          variant="input"
-          options={GEO_OPTIONS}
-        />
-        <p className="text-xs text-neutral-500 mt-1">Controls location granularity. "Disabled" collects no geographic data at all.</p>
+      <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-sm font-medium text-white">Geographic data</p>
+            <p className="text-xs text-neutral-500 mt-0.5">Controls location granularity. &quot;Disabled&quot; collects no geographic data at all.</p>
+          </div>
+          <Select
+            value={collectGeoData}
+            onChange={setCollectGeoData}
+            variant="input"
+            options={GEO_OPTIONS}
+            className="min-w-[200px]"
+          />
+        </div>
       </div>
 
       {/* Data Retention */}
diff --git a/components/settings/unified/tabs/SiteVisibilityTab.tsx b/components/settings/unified/tabs/SiteVisibilityTab.tsx
index 6b48acd..e5af9e0 100644
--- a/components/settings/unified/tabs/SiteVisibilityTab.tsx
+++ b/components/settings/unified/tabs/SiteVisibilityTab.tsx
@@ -90,7 +90,7 @@ export default function SiteVisibilityTab({ siteId, onDirtyChange, onRegisterSav
             className="space-y-4 overflow-hidden"
           >
             {/* Share link */}
-            <div>
+            <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
               <label className="block text-sm font-medium text-neutral-300 mb-1.5">Public Link</label>
               <div className="flex gap-2">
                 <Input value={`${APP_URL}/share/${siteId}`} readOnly className="font-mono text-xs" />
diff --git a/components/settings/unified/tabs/WorkspaceGeneralTab.tsx b/components/settings/unified/tabs/WorkspaceGeneralTab.tsx
index 242099e..d361689 100644
--- a/components/settings/unified/tabs/WorkspaceGeneralTab.tsx
+++ b/components/settings/unified/tabs/WorkspaceGeneralTab.tsx
@@ -91,18 +91,18 @@ export default function WorkspaceGeneralTab({ onDirtyChange, onRegisterSave }: {
           <p className="text-sm text-neutral-400">Basic details about your organization.</p>
         </div>
 
-        <div>
+        <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
           <label className="block text-sm font-medium text-neutral-300 mb-1.5">Organization Name</label>
           <Input value={name} onChange={e => setName(e.target.value)} placeholder="Acme Corp" />
         </div>
 
-        <div>
+        <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
           <label className="block text-sm font-medium text-neutral-300 mb-1.5">Organization Slug</label>
           <div className="flex items-center gap-2">
             <span className="text-sm text-neutral-500">pulse.ciphera.net/</span>
             <Input value={slug} onChange={e => setSlug(e.target.value)} placeholder="acme-corp" />
           </div>
-          <p className="text-xs text-neutral-500 mt-1">Changing the slug will change your organization's URL.</p>
+          <p className="text-xs text-neutral-500 mt-1">Changing the slug will change your organization&apos;s URL.</p>
         </div>
       </div>
 
diff --git a/components/settings/unified/tabs/WorkspaceMembersTab.tsx b/components/settings/unified/tabs/WorkspaceMembersTab.tsx
index c95492c..d70f692 100644
--- a/components/settings/unified/tabs/WorkspaceMembersTab.tsx
+++ b/components/settings/unified/tabs/WorkspaceMembersTab.tsx
@@ -144,9 +144,9 @@ export default function WorkspaceMembersTab() {
       )}
 
       {/* Members list */}
-      <div className="space-y-1">
+      <div className="rounded-xl border border-neutral-800 bg-neutral-800/30 divide-y divide-neutral-800">
         {members.map(member => (
-          <div key={member.user_id} className="flex items-center justify-between px-4 py-3 rounded-xl hover:bg-neutral-800/40 transition-colors group">
+          <div key={member.user_id} className="flex items-center justify-between px-4 py-3 group">
             <div className="flex items-center gap-3">
               <UserCircle weight="fill" className="w-8 h-8 text-neutral-600" />
               <div>
diff --git a/components/settings/unified/tabs/WorkspaceNotificationsTab.tsx b/components/settings/unified/tabs/WorkspaceNotificationsTab.tsx
index c024a0d..c36f0d6 100644
--- a/components/settings/unified/tabs/WorkspaceNotificationsTab.tsx
+++ b/components/settings/unified/tabs/WorkspaceNotificationsTab.tsx
@@ -62,9 +62,9 @@ export default function WorkspaceNotificationsTab({ onDirtyChange, onRegisterSav
         <p className="text-sm text-neutral-400">Choose what notifications you receive.</p>
       </div>
 
-      <div className="space-y-1">
+      <div className="space-y-3">
         {(data?.categories || []).map(cat => (
-          <div key={cat.id} className="flex items-center justify-between py-3 px-4 rounded-xl hover:bg-neutral-800/20 transition-colors">
+          <div key={cat.id} className="flex items-center justify-between p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
             <div>
               <p className="text-sm font-medium text-white">{cat.label}</p>
               <p className="text-xs text-neutral-400">{cat.description}</p>
-- 
2.49.1


From 095b68d7697b6d7f9cec988347d417677227985f Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 22:46:35 +0100
Subject: [PATCH 292/428] fix: site name + domain side by side in general tab

---
 .../settings/unified/tabs/SiteGeneralTab.tsx  | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/components/settings/unified/tabs/SiteGeneralTab.tsx b/components/settings/unified/tabs/SiteGeneralTab.tsx
index ae52308..9d5e82b 100644
--- a/components/settings/unified/tabs/SiteGeneralTab.tsx
+++ b/components/settings/unified/tabs/SiteGeneralTab.tsx
@@ -105,9 +105,16 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, onRegisterSave }
         </div>
 
         <div className="space-y-3">
-          <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
-            <label className="block text-sm font-medium text-neutral-300 mb-1.5">Site Name</label>
-            <Input value={name} onChange={e => setName(e.target.value)} placeholder="My Website" />
+          <div className="grid grid-cols-2 gap-3">
+            <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
+              <label className="block text-sm font-medium text-neutral-300 mb-1.5">Site Name</label>
+              <Input value={name} onChange={e => setName(e.target.value)} placeholder="My Website" />
+            </div>
+            <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
+              <label className="block text-sm font-medium text-neutral-300 mb-1.5">Domain</label>
+              <Input value={site.domain} disabled className="opacity-60" />
+              <p className="text-xs text-neutral-500 mt-1">Cannot be changed.</p>
+            </div>
           </div>
 
           <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
@@ -119,12 +126,6 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, onRegisterSave }
               options={TIMEZONES.map(tz => ({ value: tz.value, label: tz.label }))}
             />
           </div>
-
-          <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
-            <label className="block text-sm font-medium text-neutral-300 mb-1.5">Domain</label>
-            <Input value={site.domain} disabled className="opacity-60" />
-            <p className="text-xs text-neutral-500 mt-1">Domain cannot be changed after creation.</p>
-          </div>
         </div>
       </div>
 
-- 
2.49.1


From d819b4bd177eaa62333e87f33a5d1e97d0bdee89 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 22:49:25 +0100
Subject: [PATCH 293/428] fix: remove card wrapping from bare inputs + fix
 privacy false-dirty on load

---
 .../unified/tabs/AccountProfileTab.tsx        |  7 ++--
 .../settings/unified/tabs/SiteGeneralTab.tsx  | 10 ++---
 .../settings/unified/tabs/SitePrivacyTab.tsx  | 41 ++++++++++---------
 .../unified/tabs/WorkspaceGeneralTab.tsx      |  4 +-
 4 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/components/settings/unified/tabs/AccountProfileTab.tsx b/components/settings/unified/tabs/AccountProfileTab.tsx
index e0c78f5..3e1f777 100644
--- a/components/settings/unified/tabs/AccountProfileTab.tsx
+++ b/components/settings/unified/tabs/AccountProfileTab.tsx
@@ -69,8 +69,8 @@ export default function AccountProfileTab({ onDirtyChange, onRegisterSave }: { o
       </div>
 
       {/* Display Name */}
-      <div className="space-y-3">
-        <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
+      <div className="space-y-4">
+        <div>
           <label className="block text-sm font-medium text-neutral-300 mb-1.5">Display Name</label>
           <Input
             value={displayName}
@@ -79,8 +79,7 @@ export default function AccountProfileTab({ onDirtyChange, onRegisterSave }: { o
           />
         </div>
 
-        {/* Email — read-only display */}
-        <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
+        <div>
           <label className="block text-sm font-medium text-neutral-300 mb-1.5">Email Address</label>
           <Input value={user.email} disabled className="opacity-60" />
           <p className="text-xs text-neutral-500 mt-1">Email changes require password verification. Use <a href="https://auth.ciphera.net/settings" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">Ciphera Auth</a> to change your email.</p>
diff --git a/components/settings/unified/tabs/SiteGeneralTab.tsx b/components/settings/unified/tabs/SiteGeneralTab.tsx
index 9d5e82b..4ef0459 100644
--- a/components/settings/unified/tabs/SiteGeneralTab.tsx
+++ b/components/settings/unified/tabs/SiteGeneralTab.tsx
@@ -104,20 +104,20 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, onRegisterSave }
           <p className="text-sm text-neutral-400">Update your site details and tracking script.</p>
         </div>
 
-        <div className="space-y-3">
-          <div className="grid grid-cols-2 gap-3">
-            <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
+        <div className="space-y-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div>
               <label className="block text-sm font-medium text-neutral-300 mb-1.5">Site Name</label>
               <Input value={name} onChange={e => setName(e.target.value)} placeholder="My Website" />
             </div>
-            <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
+            <div>
               <label className="block text-sm font-medium text-neutral-300 mb-1.5">Domain</label>
               <Input value={site.domain} disabled className="opacity-60" />
               <p className="text-xs text-neutral-500 mt-1">Cannot be changed.</p>
             </div>
           </div>
 
-          <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
+          <div>
             <label className="block text-sm font-medium text-neutral-300 mb-1.5">Timezone</label>
             <Select
               value={timezone}
diff --git a/components/settings/unified/tabs/SitePrivacyTab.tsx b/components/settings/unified/tabs/SitePrivacyTab.tsx
index 7008efe..3ce021a 100644
--- a/components/settings/unified/tabs/SitePrivacyTab.tsx
+++ b/components/settings/unified/tabs/SitePrivacyTab.tsx
@@ -44,7 +44,7 @@ export default function SitePrivacyTab({ siteId, onDirtyChange, onRegisterSave }
   const [snippetCopied, setSnippetCopied] = useState(false)
   const initialRef = useRef('')
 
-  // Sync form state from site data — only on first load, not on SWR revalidation
+  // Sync form state — only on first load, skip dirty tracking until ready
   const hasInitialized = useRef(false)
   useEffect(() => {
     if (!site || hasInitialized.current) return
@@ -56,34 +56,35 @@ export default function SitePrivacyTab({ siteId, onDirtyChange, onRegisterSave }
     setHideUnknownLocations(site.hide_unknown_locations ?? false)
     setDataRetention(site.data_retention_months ?? 6)
     setExcludedPaths((site.excluded_paths || []).join('\n'))
+    initialRef.current = JSON.stringify({
+      collectPagePaths: site.collect_page_paths ?? true,
+      collectReferrers: site.collect_referrers ?? true,
+      collectDeviceInfo: site.collect_device_info ?? true,
+      collectScreenRes: site.collect_screen_resolution ?? true,
+      collectGeoData: site.collect_geo_data ?? 'full',
+      hideUnknownLocations: site.hide_unknown_locations ?? false,
+      dataRetention: site.data_retention_months ?? 6,
+      excludedPaths: (site.excluded_paths || []).join('\n'),
+      psiFrequency: 'weekly',
+    })
     hasInitialized.current = true
   }, [site])
 
-  // Sync PSI frequency separately (comes from a different SWR hook)
+  // Sync PSI frequency separately — update both state AND snapshot when it first loads
   const psiInitialized = useRef(false)
   useEffect(() => {
     if (!psiConfig || psiInitialized.current) return
-    setPsiFrequency(psiConfig.frequency || 'weekly')
+    const freq = psiConfig.frequency || 'weekly'
+    setPsiFrequency(freq)
+    // Update the snapshot to include the real PSI frequency so it doesn't show as dirty
+    if (initialRef.current) {
+      const snap = JSON.parse(initialRef.current)
+      snap.psiFrequency = freq
+      initialRef.current = JSON.stringify(snap)
+    }
     psiInitialized.current = true
   }, [psiConfig])
 
-  // Build initial snapshot once both site + psi are loaded
-  useEffect(() => {
-    if (!hasInitialized.current || !initialRef.current && site) {
-      initialRef.current = JSON.stringify({
-        collectPagePaths: site?.collect_page_paths ?? true,
-        collectReferrers: site?.collect_referrers ?? true,
-        collectDeviceInfo: site?.collect_device_info ?? true,
-        collectScreenRes: site?.collect_screen_resolution ?? true,
-        collectGeoData: site?.collect_geo_data ?? 'full',
-        hideUnknownLocations: site?.hide_unknown_locations ?? false,
-        dataRetention: site?.data_retention_months ?? 6,
-        excludedPaths: (site?.excluded_paths || []).join('\n'),
-        psiFrequency: psiConfig?.frequency || 'weekly',
-      })
-    }
-  }, [site, psiConfig])
-
   // Track dirty state
   useEffect(() => {
     if (!initialRef.current) return
diff --git a/components/settings/unified/tabs/WorkspaceGeneralTab.tsx b/components/settings/unified/tabs/WorkspaceGeneralTab.tsx
index d361689..bc5930a 100644
--- a/components/settings/unified/tabs/WorkspaceGeneralTab.tsx
+++ b/components/settings/unified/tabs/WorkspaceGeneralTab.tsx
@@ -91,12 +91,12 @@ export default function WorkspaceGeneralTab({ onDirtyChange, onRegisterSave }: {
           <p className="text-sm text-neutral-400">Basic details about your organization.</p>
         </div>
 
-        <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
+        <div>
           <label className="block text-sm font-medium text-neutral-300 mb-1.5">Organization Name</label>
           <Input value={name} onChange={e => setName(e.target.value)} placeholder="Acme Corp" />
         </div>
 
-        <div className="p-4 rounded-xl border border-neutral-800 bg-neutral-800/30">
+        <div>
           <label className="block text-sm font-medium text-neutral-300 mb-1.5">Organization Slug</label>
           <div className="flex items-center gap-2">
             <span className="text-sm text-neutral-500">pulse.ciphera.net/</span>
-- 
2.49.1


From 1121a72d63f4688027a4a7215951be54532ffc5a Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 22:54:01 +0100
Subject: [PATCH 294/428] debug: log script_features at save time

---
 components/settings/unified/tabs/SiteGeneralTab.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/settings/unified/tabs/SiteGeneralTab.tsx b/components/settings/unified/tabs/SiteGeneralTab.tsx
index 4ef0459..e45e860 100644
--- a/components/settings/unified/tabs/SiteGeneralTab.tsx
+++ b/components/settings/unified/tabs/SiteGeneralTab.tsx
@@ -63,6 +63,7 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, onRegisterSave }
   const handleSave = useCallback(async () => {
     if (!site) return
     try {
+      console.log('[General] saving script_features:', scriptFeatures)
       await updateSite(siteId, { name, timezone, script_features: scriptFeatures })
       await mutate()
       initialRef.current = JSON.stringify({ name, timezone, scriptFeatures: JSON.stringify(scriptFeatures) })
-- 
2.49.1


From 8d894ff92a3bb7186bfffa6994a0e8af58c78163 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 22:55:55 +0100
Subject: [PATCH 295/428] fix: real BunnyCDN SVG logo + remove duplicate
 Connected status from grids

---
 .../unified/tabs/SiteIntegrationsTab.tsx      | 29 +++++++++++--------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/components/settings/unified/tabs/SiteIntegrationsTab.tsx b/components/settings/unified/tabs/SiteIntegrationsTab.tsx
index 09e4472..1bff020 100644
--- a/components/settings/unified/tabs/SiteIntegrationsTab.tsx
+++ b/components/settings/unified/tabs/SiteIntegrationsTab.tsx
@@ -22,15 +22,25 @@ function GoogleIcon() {
 
 function BunnyIcon() {
   return (
-    <svg className="w-5 h-5" viewBox="0 0 24 24">
+    <svg className="w-5 h-5" viewBox="0 0 23 26" fill="none">
+      <path fillRule="evenodd" clipRule="evenodd" d="M9.94 7.77l5.106.883c-3.83-.663-4.065-3.85-9.218-6.653-.562 1.859.603 5.21 4.112 5.77z" fill="url(#b1)"/>
+      <path fillRule="evenodd" clipRule="evenodd" d="M5.828 2c5.153 2.803 5.388 5.99 9.218 6.653 1.922.332.186 3.612-1.864 3.266 3.684 1.252 7.044-2.085 5.122-3.132L5.828 2z" fill="url(#b2)"/>
+      <path fillRule="evenodd" clipRule="evenodd" d="M13.186 11.92c-.241-.041-.486-.131-.731-.284-1.542-.959-3.093-1.269-4.496-1.118 2.93.359 5.716 4.196 5.37 7.036.06.97-.281 1.958-1.021 2.699l-1.69 1.69c1.303.858 3.284-.037 3.889-1.281l3.41-7.014c.836-.198 6.176-1.583 3.767-3.024l-3.37-1.833c1.907 1.05-1.449 4.378-5.125 3.129z" fill="url(#b3)"/>
+      <path fillRule="evenodd" clipRule="evenodd" d="M7.953 10.518c-4.585.499-7.589 5.94-3.506 9.873l3.42 3.42c-2.243-2.243-2.458-5.525-1.073-7.806.149-.255.333-.495.551-.713 1.37-1.37 3.59-1.37 4.96 0 .629.628.969 1.436 1.02 2.26.346-2.84-2.439-6.675-5.367-7.035h-.005z" fill="url(#b4)"/>
+      <path fillRule="evenodd" clipRule="evenodd" d="M7.868 23.812l1.925 1.925c.643-.511 1.028-2.01.031-3.006l-2.48-2.48c-1.151-1.151-1.334-2.903-.55-4.246-1.385 2.281-1.17 5.563 1.074 7.807z" fill="url(#b5)"/>
+      <path fillRule="evenodd" clipRule="evenodd" d="M12.504 4.54l5.739 3.122L12.925.6c-.728.829-1.08 2.472-.421 3.94z" fill="url(#b6)"/>
+      <circle cx="9.825" cy="17.772" r="1.306" fill="url(#b7)"/>
+      <circle cx="1.507" cy="11.458" r="1.306" fill="url(#b8)"/>
       <defs>
-        <linearGradient id="bunny-grad" x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0%" stopColor="#FF6B00" />
-          <stop offset="100%" stopColor="#FF9E00" />
-        </linearGradient>
+        <linearGradient id="b1" x1="5.69" y1="8.5" x2="15.04" y2="8.5" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset=".69" stopColor="#FF7300"/><stop offset="1" stopColor="#F52900"/></linearGradient>
+        <linearGradient id="b2" x1="5.83" y1="12.65" x2="18.87" y2="12.65" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset=".69" stopColor="#FF7300"/><stop offset="1" stopColor="#F52900"/></linearGradient>
+        <linearGradient id="b3" x1="7.95" y1="22.04" x2="22.3" y2="22.04" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset="1" stopColor="#FF6200"/></linearGradient>
+        <linearGradient id="b4" x1="2.51" y1="22.59" x2="13.35" y2="22.59" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset=".69" stopColor="#FF7300"/><stop offset="1" stopColor="#F52900"/></linearGradient>
+        <linearGradient id="b5" x1="11.35" y1="20.74" x2="7.98" y2="17.71" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset=".69" stopColor="#FF7300"/><stop offset="1" stopColor="#F52900"/></linearGradient>
+        <linearGradient id="b6" x1="12.16" y1="7.48" x2="18.24" y2="7.48" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset="1" stopColor="#FF6200"/></linearGradient>
+        <linearGradient id="b7" x1="8.52" y1="19.08" x2="11.13" y2="19.08" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset="1" stopColor="#FF6200"/></linearGradient>
+        <linearGradient id="b8" x1=".2" y1="12.76" x2="2.81" y2="12.76" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset="1" stopColor="#FF6200"/></linearGradient>
       </defs>
-      <circle cx="12" cy="12" r="11" fill="url(#bunny-grad)" />
-      <path d="M8.5 7c-.8-2-2.5-3-2.5-3s.5 2.5 1 3.5C5.5 8.5 5 10.5 5 12c0 3.9 3.1 7 7 7s7-3.1 7-7c0-1.5-.5-3.5-2-4.5.5-1 1-3.5 1-3.5s-1.7 1-2.5 3C14.5 6.5 13.3 6 12 6s-2.5.5-3.5 1z" fill="white" fillOpacity="0.9" />
     </svg>
   )
 }
@@ -123,7 +133,6 @@ function GSCDetails({ gscStatus }: { gscStatus: { connected: boolean; google_ema
   if (!gscStatus.connected) return null
 
   const rows = [
-    { label: 'Status', value: <StatusDot status={gscStatus.status} /> },
     { label: 'Google Account', value: gscStatus.google_email || 'Unknown' },
     { label: 'GSC Property', value: gscStatus.gsc_property || 'Unknown' },
     { label: 'Last Synced', value: gscStatus.last_synced_at ? formatDateTime(new Date(gscStatus.last_synced_at)) : 'Never' },
@@ -341,10 +350,6 @@ export default function SiteIntegrationsTab({ siteId }: { siteId: string }) {
                   <span className="text-xs text-neutral-500">Connected Since</span>
                   <span className="text-sm text-white">{bunnyStatus?.created_at ? formatDateTime(new Date(bunnyStatus.created_at)) : 'Unknown'}</span>
                 </div>
-                <div className="flex flex-col gap-0.5">
-                  <span className="text-xs text-neutral-500">Status</span>
-                  <StatusDot status={bunnyStatus?.status} />
-                </div>
               </div>
               {bunnyStatus?.error_message && (
                 <div className="px-4 py-3 rounded-lg bg-red-900/20 border border-red-900/50">
-- 
2.49.1


From 8fb2f603bd422be8cada92e59176b57323533883 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 22:57:10 +0100
Subject: [PATCH 296/428] debug: log site.script_features on init

---
 components/settings/unified/tabs/SiteGeneralTab.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/settings/unified/tabs/SiteGeneralTab.tsx b/components/settings/unified/tabs/SiteGeneralTab.tsx
index e45e860..fa095dd 100644
--- a/components/settings/unified/tabs/SiteGeneralTab.tsx
+++ b/components/settings/unified/tabs/SiteGeneralTab.tsx
@@ -46,6 +46,7 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, onRegisterSave }
 
   useEffect(() => {
     if (!site || hasInitialized.current) return
+    console.log('[General] init from site.script_features:', site.script_features)
     setName(site.name || '')
     setTimezone(site.timezone || 'UTC')
     setScriptFeatures(site.script_features || {})
-- 
2.49.1


From 98ba751c2c8c4750bd7b2d5cb3e7e632bd4e70ec Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 22:58:44 +0100
Subject: [PATCH 297/428] fix: remove duplicate detail text from integration
 card titles

---
 components/settings/unified/tabs/SiteIntegrationsTab.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/settings/unified/tabs/SiteIntegrationsTab.tsx b/components/settings/unified/tabs/SiteIntegrationsTab.tsx
index 1bff020..3afddba 100644
--- a/components/settings/unified/tabs/SiteIntegrationsTab.tsx
+++ b/components/settings/unified/tabs/SiteIntegrationsTab.tsx
@@ -317,7 +317,7 @@ export default function SiteIntegrationsTab({ siteId }: { siteId: string }) {
           name="Google Search Console"
           description="View search queries, clicks, impressions, and ranking data."
           connected={gscStatus?.connected ?? false}
-          detail={gscStatus?.connected ? `Connected as ${gscStatus.google_email || 'unknown'}` : undefined}
+          detail={undefined}
           onConnect={handleConnectGSC}
           onDisconnect={handleDisconnectGSC}
           connectLabel="Connect with Google"
@@ -331,7 +331,7 @@ export default function SiteIntegrationsTab({ siteId }: { siteId: string }) {
           name="BunnyCDN"
           description="Monitor bandwidth, cache hit rates, and CDN performance."
           connected={bunnyConnected}
-          detail={bunnyConnected ? `Pull zone: ${bunnyStatus?.pull_zone_name || 'connected'}` : undefined}
+          detail={undefined}
           onConnect={handleConnectBunny}
           onDisconnect={handleDisconnectBunny}
         >
-- 
2.49.1


From c299b10d19da610ab5aa0dc49ad9e4cd8cf00fde Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 23:00:18 +0100
Subject: [PATCH 298/428] fix: use LinkBreak icon instead of Trash for
 disconnect button

---
 components/settings/unified/tabs/SiteIntegrationsTab.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/settings/unified/tabs/SiteIntegrationsTab.tsx b/components/settings/unified/tabs/SiteIntegrationsTab.tsx
index 3afddba..178f399 100644
--- a/components/settings/unified/tabs/SiteIntegrationsTab.tsx
+++ b/components/settings/unified/tabs/SiteIntegrationsTab.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from 'react'
 import { Button, Input, Select, toast, Spinner } from '@ciphera-net/ui'
-import { Plugs, Trash, ShieldCheck } from '@phosphor-icons/react'
+import { Plugs, LinkBreak, ShieldCheck } from '@phosphor-icons/react'
 import { useGSCStatus, useBunnyStatus } from '@/lib/swr/dashboard'
 import { disconnectGSC, getGSCAuthURL } from '@/lib/api/gsc'
 import { disconnectBunny, getBunnyPullZones, connectBunny, type BunnyPullZone } from '@/lib/api/bunny'
@@ -86,7 +86,7 @@ function IntegrationCard({
         </div>
         {connected ? (
           <Button onClick={onDisconnect} variant="secondary" className="text-sm text-red-400 border-red-900/50 hover:bg-red-900/20 gap-1.5">
-            <Trash weight="bold" className="w-3.5 h-3.5" /> Disconnect
+            <LinkBreak weight="bold" className="w-3.5 h-3.5" /> Disconnect
           </Button>
         ) : (
           <Button onClick={onConnect} variant="primary" className="text-sm gap-1.5">
-- 
2.49.1


From 4af5daa298682d41812a3918fb9c19c9b84411b5 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 23:01:58 +0100
Subject: [PATCH 299/428] =?UTF-8?q?fix:=20wait=20for=20integration=20statu?=
 =?UTF-8?q?s=20to=20load=20before=20rendering=20cards=20=E2=80=94=20preven?=
 =?UTF-8?q?ts=20flash?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../settings/unified/tabs/SiteIntegrationsTab.tsx    | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/components/settings/unified/tabs/SiteIntegrationsTab.tsx b/components/settings/unified/tabs/SiteIntegrationsTab.tsx
index 178f399..4f56c93 100644
--- a/components/settings/unified/tabs/SiteIntegrationsTab.tsx
+++ b/components/settings/unified/tabs/SiteIntegrationsTab.tsx
@@ -262,10 +262,18 @@ function BunnySetupForm({ siteId, onConnected }: { siteId: string; onConnected:
 }
 
 export default function SiteIntegrationsTab({ siteId }: { siteId: string }) {
-  const { data: gscStatus, mutate: mutateGSC } = useGSCStatus(siteId)
-  const { data: bunnyStatus, mutate: mutateBunny } = useBunnyStatus(siteId)
+  const { data: gscStatus, isLoading: gscLoading, mutate: mutateGSC } = useGSCStatus(siteId)
+  const { data: bunnyStatus, isLoading: bunnyLoading, mutate: mutateBunny } = useBunnyStatus(siteId)
   const [showBunnySetup, setShowBunnySetup] = useState(false)
 
+  if (gscLoading || bunnyLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Spinner className="w-6 h-6 text-neutral-500" />
+      </div>
+    )
+  }
+
   const handleConnectGSC = async () => {
     try {
       const data = await getGSCAuthURL(siteId)
-- 
2.49.1


From 477a3b45687af5126a1afbcf28a617fd16561219 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 23:03:53 +0100
Subject: [PATCH 300/428] fix: don't render ScriptSetupBlock until state
 initialized from site data

---
 components/settings/unified/tabs/SiteGeneralTab.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/components/settings/unified/tabs/SiteGeneralTab.tsx b/components/settings/unified/tabs/SiteGeneralTab.tsx
index fa095dd..0a0ddbb 100644
--- a/components/settings/unified/tabs/SiteGeneralTab.tsx
+++ b/components/settings/unified/tabs/SiteGeneralTab.tsx
@@ -46,7 +46,6 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, onRegisterSave }
 
   useEffect(() => {
     if (!site || hasInitialized.current) return
-    console.log('[General] init from site.script_features:', site.script_features)
     setName(site.name || '')
     setTimezone(site.timezone || 'UTC')
     setScriptFeatures(site.script_features || {})
@@ -64,7 +63,6 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, onRegisterSave }
   const handleSave = useCallback(async () => {
     if (!site) return
     try {
-      console.log('[General] saving script_features:', scriptFeatures)
       await updateSite(siteId, { name, timezone, script_features: scriptFeatures })
       await mutate()
       initialRef.current = JSON.stringify({ name, timezone, scriptFeatures: JSON.stringify(scriptFeatures) })
@@ -89,7 +87,7 @@ export default function SiteGeneralTab({ siteId, onDirtyChange, onRegisterSave }
     }
   }
 
-  if (!site) {
+  if (!site || !hasInitialized.current) {
     return (
       <div className="flex items-center justify-center py-12">
         <Spinner className="w-6 h-6 text-neutral-500" />
-- 
2.49.1


From 09181affbb080df20eb5d893d5691eea848125fc Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 23:11:51 +0100
Subject: [PATCH 301/428] fix: danger zone red background on pending save bar,
 normal text color

---
 components/settings/unified/UnifiedSettingsModal.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index b529e14..42ba088 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -449,8 +449,12 @@ export default function UnifiedSettingsModal() {
                     transition={{ duration: 0.15 }}
                     className="shrink-0 overflow-hidden"
                   >
-                    <div className="px-6 py-3 border-t border-neutral-800 bg-neutral-950 flex items-center justify-between">
-                      <span className={`text-sm font-medium ${hasPendingAction ? 'text-red-400' : 'text-neutral-400'}`}>
+                    <div className={`px-6 py-3 border-t flex items-center justify-between ${
+                      hasPendingAction
+                        ? 'bg-red-900/10 border-red-900/30'
+                        : 'bg-neutral-950 border-neutral-800'
+                    }`}>
+                      <span className="text-sm font-medium text-neutral-400">
                         {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
                       </span>
                       <div className="flex items-center gap-2">
-- 
2.49.1


From d13372c86463c3ae91e569035cf1e530d9717633 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 23:15:27 +0100
Subject: [PATCH 302/428] feat(settings): glassmorphism modal matching
 ciphera-website header dropdowns

---
 components/settings/unified/UnifiedSettingsModal.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index 42ba088..183c1e4 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -395,11 +395,11 @@ export default function UnifiedSettingsModal() {
             className="fixed inset-0 z-[61] flex items-center justify-center p-4 pointer-events-none"
           >
             <div
-              className="pointer-events-auto w-full max-w-3xl h-[85vh] bg-neutral-900 border border-neutral-800 rounded-2xl shadow-2xl flex flex-col overflow-hidden"
+              className="pointer-events-auto w-full max-w-3xl h-[85vh] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-2xl shadow-xl shadow-black/20 flex flex-col overflow-hidden"
               onClick={e => e.stopPropagation()}
             >
               {/* Header */}
-              <div className="shrink-0 px-6 pt-5 pb-4 border-b border-neutral-800/60">
+              <div className="shrink-0 px-6 pt-5 pb-4 border-b border-white/[0.06]">
                 <div className="flex items-center justify-between mb-4">
                   <h2 className="text-lg font-semibold text-white">Settings</h2>
                   <button
@@ -452,7 +452,7 @@ export default function UnifiedSettingsModal() {
                     <div className={`px-6 py-3 border-t flex items-center justify-between ${
                       hasPendingAction
                         ? 'bg-red-900/10 border-red-900/30'
-                        : 'bg-neutral-950 border-neutral-800'
+                        : 'bg-neutral-950/80 border-white/[0.06]'
                     }`}>
                       <span className="text-sm font-medium text-neutral-400">
                         {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
-- 
2.49.1


From 603e910d406e24b1041780d4a21897077f0b2d00 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 23:19:27 +0100
Subject: [PATCH 303/428] fix: instant backdrop render prevents chart flash
 through glass modal

---
 components/settings/unified/UnifiedSettingsModal.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index 183c1e4..577fa29 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -376,12 +376,8 @@ export default function UnifiedSettingsModal() {
     <AnimatePresence>
       {isOpen && (
         <>
-          {/* Backdrop */}
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.2 }}
+          {/* Backdrop — no opacity animation to prevent chart flash through glass */}
+          <div
             className="fixed inset-0 z-[60] bg-black/60 backdrop-blur-sm"
             onClick={handleBackdropClick}
           />
-- 
2.49.1


From 941dcd73cea7a9bb86ea7cc7c1d886bbb7d217b3 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 23:22:51 +0100
Subject: [PATCH 304/428] =?UTF-8?q?fix:=20solid=20modal=20background=20?=
 =?UTF-8?q?=E2=80=94=20backdrop-filter=20causes=20flash=20on=20animated=20?=
 =?UTF-8?q?elements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/settings/unified/UnifiedSettingsModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index 577fa29..9946871 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -391,7 +391,7 @@ export default function UnifiedSettingsModal() {
             className="fixed inset-0 z-[61] flex items-center justify-center p-4 pointer-events-none"
           >
             <div
-              className="pointer-events-auto w-full max-w-3xl h-[85vh] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-2xl shadow-xl shadow-black/20 flex flex-col overflow-hidden"
+              className="pointer-events-auto w-full max-w-3xl h-[85vh] bg-neutral-900 border border-white/[0.08] rounded-2xl shadow-xl shadow-black/20 flex flex-col overflow-hidden"
               onClick={e => e.stopPropagation()}
             >
               {/* Header */}
-- 
2.49.1


From df286ab0e475f01c7dffd8be86e82428c5119720 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 23:29:15 +0100
Subject: [PATCH 305/428] fix: restore glass + remove opacity animation to
 prevent backdrop-filter flash

---
 components/settings/unified/UnifiedSettingsModal.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index 9946871..c03df70 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -384,14 +384,14 @@ export default function UnifiedSettingsModal() {
 
           {/* Modal */}
           <motion.div
-            initial={{ opacity: 0, scale: 0.97, y: 8 }}
-            animate={{ opacity: 1, scale: 1, y: 0 }}
-            exit={{ opacity: 0, scale: 0.97, y: 8 }}
+            initial={{ scale: 0.97, y: 8 }}
+            animate={{ scale: 1, y: 0 }}
+            exit={{ scale: 0.97, y: 8 }}
             transition={{ type: 'spring', bounce: 0.15, duration: 0.35 }}
             className="fixed inset-0 z-[61] flex items-center justify-center p-4 pointer-events-none"
           >
             <div
-              className="pointer-events-auto w-full max-w-3xl h-[85vh] bg-neutral-900 border border-white/[0.08] rounded-2xl shadow-xl shadow-black/20 flex flex-col overflow-hidden"
+              className="pointer-events-auto w-full max-w-3xl h-[85vh] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-2xl shadow-xl shadow-black/20 flex flex-col overflow-hidden"
               onClick={e => e.stopPropagation()}
             >
               {/* Header */}
-- 
2.49.1


From d97eb77569e7a7e4c16a204d2b1737c2dad14d10 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 23:35:18 +0100
Subject: [PATCH 306/428] =?UTF-8?q?fix:=20smooth=20close=20animation=20?=
 =?UTF-8?q?=E2=80=94=20opacity=20fade=20on=20exit=20only,=20instant=20on?=
 =?UTF-8?q?=20open?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/settings/unified/UnifiedSettingsModal.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index c03df70..0983523 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -376,8 +376,12 @@ export default function UnifiedSettingsModal() {
     <AnimatePresence>
       {isOpen && (
         <>
-          {/* Backdrop — no opacity animation to prevent chart flash through glass */}
-          <div
+          {/* Backdrop — instant appear, animated close */}
+          <motion.div
+            initial={{ opacity: 1 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.15 }}
             className="fixed inset-0 z-[60] bg-black/60 backdrop-blur-sm"
             onClick={handleBackdropClick}
           />
@@ -385,8 +389,8 @@ export default function UnifiedSettingsModal() {
           {/* Modal */}
           <motion.div
             initial={{ scale: 0.97, y: 8 }}
-            animate={{ scale: 1, y: 0 }}
-            exit={{ scale: 0.97, y: 8 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.97, y: 8 }}
             transition={{ type: 'spring', bounce: 0.15, duration: 0.35 }}
             className="fixed inset-0 z-[61] flex items-center justify-center p-4 pointer-events-none"
           >
-- 
2.49.1


From b18199aa48590531c3fd4fe2555918c52684a80d Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 23:40:36 +0100
Subject: [PATCH 307/428] =?UTF-8?q?fix:=20remove=20backdrop-blur=20from=20?=
 =?UTF-8?q?overlay=20=E2=80=94=20single=20blur=20layer=20on=20modal=20only?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/settings/unified/UnifiedSettingsModal.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index 0983523..ee66f6d 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -376,13 +376,13 @@ export default function UnifiedSettingsModal() {
     <AnimatePresence>
       {isOpen && (
         <>
-          {/* Backdrop — instant appear, animated close */}
+          {/* Backdrop — solid scrim, no blur (modal handles its own glass) */}
           <motion.div
             initial={{ opacity: 1 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
             transition={{ duration: 0.15 }}
-            className="fixed inset-0 z-[60] bg-black/60 backdrop-blur-sm"
+            className="fixed inset-0 z-[60] bg-black/50"
             onClick={handleBackdropClick}
           />
 
-- 
2.49.1


From 67334f1fd6a1ac5a4e0add83b7f9f5f753174069 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 23:48:57 +0100
Subject: [PATCH 308/428] =?UTF-8?q?fix:=20always-mounted=20modal=20?=
 =?UTF-8?q?=E2=80=94=20GPU=20keeps=20backdrop-filter=20composited,=20no=20?=
 =?UTF-8?q?blur=20delay?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../settings/unified/UnifiedSettingsModal.tsx | 198 +++++++++---------
 1 file changed, 97 insertions(+), 101 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index ee66f6d..891a78f 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -373,108 +373,104 @@ export default function UnifiedSettingsModal() {
   }, [guardedAction, closeSettings])
 
   return (
-    <AnimatePresence>
-      {isOpen && (
-        <>
-          {/* Backdrop — solid scrim, no blur (modal handles its own glass) */}
-          <motion.div
-            initial={{ opacity: 1 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.15 }}
-            className="fixed inset-0 z-[60] bg-black/50"
-            onClick={handleBackdropClick}
-          />
+    <>
+      {/* Backdrop — always mounted, visibility toggled via CSS */}
+      <div
+        className={`fixed inset-0 z-[60] bg-black/50 transition-opacity duration-150 ${
+          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        }`}
+        onClick={handleBackdropClick}
+      />
 
-          {/* Modal */}
-          <motion.div
-            initial={{ scale: 0.97, y: 8 }}
-            animate={{ opacity: 1, scale: 1, y: 0 }}
-            exit={{ opacity: 0, scale: 0.97, y: 8 }}
-            transition={{ type: 'spring', bounce: 0.15, duration: 0.35 }}
-            className="fixed inset-0 z-[61] flex items-center justify-center p-4 pointer-events-none"
-          >
-            <div
-              className="pointer-events-auto w-full max-w-3xl h-[85vh] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-2xl shadow-xl shadow-black/20 flex flex-col overflow-hidden"
-              onClick={e => e.stopPropagation()}
-            >
-              {/* Header */}
-              <div className="shrink-0 px-6 pt-5 pb-4 border-b border-white/[0.06]">
-                <div className="flex items-center justify-between mb-4">
-                  <h2 className="text-lg font-semibold text-white">Settings</h2>
-                  <button
-                    onClick={handleClose}
-                    className="p-1.5 rounded-lg text-neutral-500 hover:text-white hover:bg-neutral-800 transition-colors"
-                  >
-                    <X weight="bold" className="w-4 h-4" />
-                  </button>
-                </div>
-
-                {/* Context Switcher */}
-                <ContextSwitcher
-                  active={context}
-                  onChange={handleContextChange}
-                  activeSiteDomain={sites.find(s => s.id === activeSiteId)?.domain ?? null}
-                />
-
-                {/* Tabs */}
-                <div className="mt-4">
-                  <TabBar tabs={tabs} activeTab={activeTab} onChange={handleTabChange} />
-                </div>
-              </div>
-
-              {/* Content */}
-              <div className="flex-1 overflow-y-auto overflow-x-hidden">
-                <AnimatePresence mode="wait">
-                  <motion.div
-                    key={`${context}-${activeTab}`}
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    exit={{ opacity: 0 }}
-                    transition={{ duration: 0.12 }}
-                    className="p-6"
-                  >
-                    <TabContent context={context} activeTab={activeTab} siteId={activeSiteId} onDirtyChange={handleDirtyChange} onRegisterSave={handleRegisterSave} />
-                  </motion.div>
-                </AnimatePresence>
-              </div>
-
-              {/* Save bar — fixed at modal bottom, outside scroll */}
-              <AnimatePresence>
-                {isDirtyVisible && (
-                  <motion.div
-                    initial={{ height: 0, opacity: 0 }}
-                    animate={{ height: 'auto', opacity: 1 }}
-                    exit={{ height: 0, opacity: 0 }}
-                    transition={{ duration: 0.15 }}
-                    className="shrink-0 overflow-hidden"
-                  >
-                    <div className={`px-6 py-3 border-t flex items-center justify-between ${
-                      hasPendingAction
-                        ? 'bg-red-900/10 border-red-900/30'
-                        : 'bg-neutral-950/80 border-white/[0.06]'
-                    }`}>
-                      <span className="text-sm font-medium text-neutral-400">
-                        {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
-                      </span>
-                      <div className="flex items-center gap-2">
-                        {hasPendingAction && (
-                          <Button onClick={handleDiscard} variant="secondary" className="text-sm">
-                            Discard
-                          </Button>
-                        )}
-                        <Button onClick={handleSaveFromBar} variant="primary" disabled={saving} className="text-sm">
-                          {saving ? 'Saving...' : 'Save Changes'}
-                        </Button>
-                      </div>
-                    </div>
-                  </motion.div>
-                )}
-              </AnimatePresence>
+      {/* Modal — always mounted, blur always composited by GPU */}
+      <div
+        className={`fixed inset-0 z-[61] flex items-center justify-center p-4 transition-all duration-200 ease-out ${
+          isOpen
+            ? 'opacity-100 scale-100 translate-y-0 pointer-events-auto'
+            : 'opacity-0 scale-[0.97] translate-y-2 pointer-events-none'
+        }`}
+      >
+        <div
+          className="w-full max-w-3xl h-[85vh] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-2xl shadow-xl shadow-black/20 flex flex-col overflow-hidden"
+          onClick={e => e.stopPropagation()}
+        >
+          {/* Header */}
+          <div className="shrink-0 px-6 pt-5 pb-4 border-b border-white/[0.06]">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-lg font-semibold text-white">Settings</h2>
+              <button
+                onClick={handleClose}
+                className="p-1.5 rounded-lg text-neutral-500 hover:text-white hover:bg-neutral-800 transition-colors"
+              >
+                <X weight="bold" className="w-4 h-4" />
+              </button>
             </div>
-          </motion.div>
-        </>
-      )}
-    </AnimatePresence>
+
+            {/* Context Switcher */}
+            <ContextSwitcher
+              active={context}
+              onChange={handleContextChange}
+              activeSiteDomain={sites.find(s => s.id === activeSiteId)?.domain ?? null}
+            />
+
+            {/* Tabs */}
+            <div className="mt-4">
+              <TabBar tabs={tabs} activeTab={activeTab} onChange={handleTabChange} />
+            </div>
+          </div>
+
+          {/* Content — only render tab content when open to avoid unnecessary SWR calls */}
+          <div className="flex-1 overflow-y-auto overflow-x-hidden">
+            {isOpen && (
+              <AnimatePresence mode="wait">
+                <motion.div
+                  key={`${context}-${activeTab}`}
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  transition={{ duration: 0.12 }}
+                  className="p-6"
+                >
+                  <TabContent context={context} activeTab={activeTab} siteId={activeSiteId} onDirtyChange={handleDirtyChange} onRegisterSave={handleRegisterSave} />
+                </motion.div>
+              </AnimatePresence>
+            )}
+          </div>
+
+          {/* Save bar */}
+          <AnimatePresence>
+            {isDirtyVisible && (
+              <motion.div
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: 'auto', opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={{ duration: 0.15 }}
+                className="shrink-0 overflow-hidden"
+              >
+                <div className={`px-6 py-3 border-t flex items-center justify-between ${
+                  hasPendingAction
+                    ? 'bg-red-900/10 border-red-900/30'
+                    : 'bg-neutral-950/80 border-white/[0.06]'
+                }`}>
+                  <span className="text-sm font-medium text-neutral-400">
+                    {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
+                  </span>
+                  <div className="flex items-center gap-2">
+                    {hasPendingAction && (
+                      <Button onClick={handleDiscard} variant="secondary" className="text-sm">
+                        Discard
+                      </Button>
+                    )}
+                    <Button onClick={handleSaveFromBar} variant="primary" disabled={saving} className="text-sm">
+                      {saving ? 'Saving...' : 'Save Changes'}
+                    </Button>
+                  </div>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      </div>
+    </>
   )
 }
-- 
2.49.1


From bd8fae626c07a2fa64bf598b55d5d5ed528dab94 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 23:53:15 +0100
Subject: [PATCH 309/428] =?UTF-8?q?fix:=20use=20visibility=20instead=20of?=
 =?UTF-8?q?=20opacity=20=E2=80=94=20zero=20intermediate=20frames,=20no=20b?=
 =?UTF-8?q?lur=20flash?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../settings/unified/UnifiedSettingsModal.tsx      | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index 891a78f..35dea24 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -374,20 +374,20 @@ export default function UnifiedSettingsModal() {
 
   return (
     <>
-      {/* Backdrop — always mounted, visibility toggled via CSS */}
+      {/* Backdrop — binary visibility, no opacity transition */}
       <div
-        className={`fixed inset-0 z-[60] bg-black/50 transition-opacity duration-150 ${
-          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        className={`fixed inset-0 z-[60] bg-black/50 ${
+          isOpen ? 'visible' : 'invisible'
         }`}
         onClick={handleBackdropClick}
       />
 
-      {/* Modal — always mounted, blur always composited by GPU */}
+      {/* Modal — always mounted, no opacity animation (prevents backdrop-filter flash) */}
       <div
-        className={`fixed inset-0 z-[61] flex items-center justify-center p-4 transition-all duration-200 ease-out ${
+        className={`fixed inset-0 z-[61] flex items-center justify-center p-4 transition-transform duration-200 ease-out ${
           isOpen
-            ? 'opacity-100 scale-100 translate-y-0 pointer-events-auto'
-            : 'opacity-0 scale-[0.97] translate-y-2 pointer-events-none'
+            ? 'visible scale-100 translate-y-0 pointer-events-auto'
+            : 'invisible scale-[0.97] translate-y-2 pointer-events-none'
         }`}
       >
         <div
-- 
2.49.1


From b1254bcad096ec5957f7668872f76b844067fba0 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 25 Mar 2026 23:57:26 +0100
Subject: [PATCH 310/428] =?UTF-8?q?fix:=20instant=20open/close=20=E2=80=94?=
 =?UTF-8?q?=20no=20animation=20prevents=20glass=20seep=20on=20close?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/settings/unified/UnifiedSettingsModal.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index 35dea24..82e20da 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -382,12 +382,10 @@ export default function UnifiedSettingsModal() {
         onClick={handleBackdropClick}
       />
 
-      {/* Modal — always mounted, no opacity animation (prevents backdrop-filter flash) */}
+      {/* Modal — always mounted, instant show/hide (glass + animation = flash) */}
       <div
-        className={`fixed inset-0 z-[61] flex items-center justify-center p-4 transition-transform duration-200 ease-out ${
-          isOpen
-            ? 'visible scale-100 translate-y-0 pointer-events-auto'
-            : 'invisible scale-[0.97] translate-y-2 pointer-events-none'
+        className={`fixed inset-0 z-[61] flex items-center justify-center p-4 ${
+          isOpen ? 'visible pointer-events-auto' : 'invisible pointer-events-none'
         }`}
       >
         <div
-- 
2.49.1


From 2be0841a54d9a0ea669c10d05a9136f9abc698b7 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 00:01:22 +0100
Subject: [PATCH 311/428] =?UTF-8?q?fix:=20hide=20all=20modal=20content=20w?=
 =?UTF-8?q?hen=20closed=20=E2=80=94=20empty=20glass=20box=20keeps=20GPU=20?=
 =?UTF-8?q?blur=20warm?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../settings/unified/UnifiedSettingsModal.tsx | 151 +++++++++---------
 1 file changed, 77 insertions(+), 74 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index 82e20da..88e9d23 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -392,81 +392,84 @@ export default function UnifiedSettingsModal() {
           className="w-full max-w-3xl h-[85vh] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-2xl shadow-xl shadow-black/20 flex flex-col overflow-hidden"
           onClick={e => e.stopPropagation()}
         >
-          {/* Header */}
-          <div className="shrink-0 px-6 pt-5 pb-4 border-b border-white/[0.06]">
-            <div className="flex items-center justify-between mb-4">
-              <h2 className="text-lg font-semibold text-white">Settings</h2>
-              <button
-                onClick={handleClose}
-                className="p-1.5 rounded-lg text-neutral-500 hover:text-white hover:bg-neutral-800 transition-colors"
-              >
-                <X weight="bold" className="w-4 h-4" />
-              </button>
-            </div>
-
-            {/* Context Switcher */}
-            <ContextSwitcher
-              active={context}
-              onChange={handleContextChange}
-              activeSiteDomain={sites.find(s => s.id === activeSiteId)?.domain ?? null}
-            />
-
-            {/* Tabs */}
-            <div className="mt-4">
-              <TabBar tabs={tabs} activeTab={activeTab} onChange={handleTabChange} />
-            </div>
-          </div>
-
-          {/* Content — only render tab content when open to avoid unnecessary SWR calls */}
-          <div className="flex-1 overflow-y-auto overflow-x-hidden">
-            {isOpen && (
-              <AnimatePresence mode="wait">
-                <motion.div
-                  key={`${context}-${activeTab}`}
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  transition={{ duration: 0.12 }}
-                  className="p-6"
-                >
-                  <TabContent context={context} activeTab={activeTab} siteId={activeSiteId} onDirtyChange={handleDirtyChange} onRegisterSave={handleRegisterSave} />
-                </motion.div>
-              </AnimatePresence>
-            )}
-          </div>
-
-          {/* Save bar */}
-          <AnimatePresence>
-            {isDirtyVisible && (
-              <motion.div
-                initial={{ height: 0, opacity: 0 }}
-                animate={{ height: 'auto', opacity: 1 }}
-                exit={{ height: 0, opacity: 0 }}
-                transition={{ duration: 0.15 }}
-                className="shrink-0 overflow-hidden"
-              >
-                <div className={`px-6 py-3 border-t flex items-center justify-between ${
-                  hasPendingAction
-                    ? 'bg-red-900/10 border-red-900/30'
-                    : 'bg-neutral-950/80 border-white/[0.06]'
-                }`}>
-                  <span className="text-sm font-medium text-neutral-400">
-                    {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
-                  </span>
-                  <div className="flex items-center gap-2">
-                    {hasPendingAction && (
-                      <Button onClick={handleDiscard} variant="secondary" className="text-sm">
-                        Discard
-                      </Button>
-                    )}
-                    <Button onClick={handleSaveFromBar} variant="primary" disabled={saving} className="text-sm">
-                      {saving ? 'Saving...' : 'Save Changes'}
-                    </Button>
-                  </div>
+          {/* All content gated by isOpen — empty glass box when closed (GPU keeps blur warm) */}
+          {isOpen && (
+            <>
+              {/* Header */}
+              <div className="shrink-0 px-6 pt-5 pb-4 border-b border-white/[0.06]">
+                <div className="flex items-center justify-between mb-4">
+                  <h2 className="text-lg font-semibold text-white">Settings</h2>
+                  <button
+                    onClick={handleClose}
+                    className="p-1.5 rounded-lg text-neutral-500 hover:text-white hover:bg-neutral-800 transition-colors"
+                  >
+                    <X weight="bold" className="w-4 h-4" />
+                  </button>
                 </div>
-              </motion.div>
-            )}
-          </AnimatePresence>
+
+                {/* Context Switcher */}
+                <ContextSwitcher
+                  active={context}
+                  onChange={handleContextChange}
+                  activeSiteDomain={sites.find(s => s.id === activeSiteId)?.domain ?? null}
+                />
+
+                {/* Tabs */}
+                <div className="mt-4">
+                  <TabBar tabs={tabs} activeTab={activeTab} onChange={handleTabChange} />
+                </div>
+              </div>
+
+              {/* Content */}
+              <div className="flex-1 overflow-y-auto overflow-x-hidden">
+                <AnimatePresence mode="wait">
+                  <motion.div
+                    key={`${context}-${activeTab}`}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    transition={{ duration: 0.12 }}
+                    className="p-6"
+                  >
+                    <TabContent context={context} activeTab={activeTab} siteId={activeSiteId} onDirtyChange={handleDirtyChange} onRegisterSave={handleRegisterSave} />
+                  </motion.div>
+                </AnimatePresence>
+              </div>
+
+              {/* Save bar */}
+              <AnimatePresence>
+                {isDirtyVisible && (
+                  <motion.div
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: 'auto', opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    transition={{ duration: 0.15 }}
+                    className="shrink-0 overflow-hidden"
+                  >
+                    <div className={`px-6 py-3 border-t flex items-center justify-between ${
+                      hasPendingAction
+                        ? 'bg-red-900/10 border-red-900/30'
+                        : 'bg-neutral-950/80 border-white/[0.06]'
+                    }`}>
+                      <span className="text-sm font-medium text-neutral-400">
+                        {hasPendingAction ? 'Save or discard to continue' : 'Unsaved changes'}
+                      </span>
+                      <div className="flex items-center gap-2">
+                        {hasPendingAction && (
+                          <Button onClick={handleDiscard} variant="secondary" className="text-sm">
+                            Discard
+                          </Button>
+                        )}
+                        <Button onClick={handleSaveFromBar} variant="primary" disabled={saving} className="text-sm">
+                          {saving ? 'Saving...' : 'Save Changes'}
+                        </Button>
+                      </div>
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </>
+          )}
         </div>
       </div>
     </>
-- 
2.49.1


From 3e603c77a9f7c94aef0947b2d961ccb45ce0327f Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 00:04:50 +0100
Subject: [PATCH 312/428] =?UTF-8?q?feat:=20fade=20+=20scale=20animation=20?=
 =?UTF-8?q?on=20outer=20wrapper=20=E2=80=94=20glass=20panel=20untouched?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../settings/unified/UnifiedSettingsModal.tsx      | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index 88e9d23..3bfb955 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -374,18 +374,20 @@ export default function UnifiedSettingsModal() {
 
   return (
     <>
-      {/* Backdrop — binary visibility, no opacity transition */}
+      {/* Backdrop */}
       <div
-        className={`fixed inset-0 z-[60] bg-black/50 ${
-          isOpen ? 'visible' : 'invisible'
+        className={`fixed inset-0 z-[60] bg-black/50 transition-opacity duration-200 ${
+          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
         }`}
         onClick={handleBackdropClick}
       />
 
-      {/* Modal — always mounted, instant show/hide (glass + animation = flash) */}
+      {/* Modal outer wrapper — fades in/out, glass panel inside stays always-opaque */}
       <div
-        className={`fixed inset-0 z-[61] flex items-center justify-center p-4 ${
-          isOpen ? 'visible pointer-events-auto' : 'invisible pointer-events-none'
+        className={`fixed inset-0 z-[61] flex items-center justify-center p-4 transition-all duration-200 ease-out ${
+          isOpen
+            ? 'opacity-100 scale-100 pointer-events-auto'
+            : 'opacity-0 scale-[0.97] pointer-events-none'
         }`}
       >
         <div
-- 
2.49.1


From dc867e84f427bd0292815d73d2e3953c1fd382a8 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 00:10:40 +0100
Subject: [PATCH 313/428] =?UTF-8?q?fix:=20glass=20instant,=20content=20fad?=
 =?UTF-8?q?es=20in=20=E2=80=94=20backdrop=20and=20blur=20separate=20from?=
 =?UTF-8?q?=20animation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../settings/unified/UnifiedSettingsModal.tsx    | 16 +++++++---------
 styles/globals.css                               |  9 +++++++++
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index 3bfb955..6a865a0 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -374,7 +374,7 @@ export default function UnifiedSettingsModal() {
 
   return (
     <>
-      {/* Backdrop */}
+      {/* Backdrop — fades in/out */}
       <div
         className={`fixed inset-0 z-[60] bg-black/50 transition-opacity duration-200 ${
           isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
@@ -382,21 +382,19 @@ export default function UnifiedSettingsModal() {
         onClick={handleBackdropClick}
       />
 
-      {/* Modal outer wrapper — fades in/out, glass panel inside stays always-opaque */}
+      {/* Glass panel — always mounted, instant show/hide, blur always composited */}
       <div
-        className={`fixed inset-0 z-[61] flex items-center justify-center p-4 transition-all duration-200 ease-out ${
-          isOpen
-            ? 'opacity-100 scale-100 pointer-events-auto'
-            : 'opacity-0 scale-[0.97] pointer-events-none'
+        className={`fixed inset-0 z-[61] flex items-center justify-center p-4 ${
+          isOpen ? 'visible pointer-events-auto' : 'invisible pointer-events-none'
         }`}
       >
         <div
           className="w-full max-w-3xl h-[85vh] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-2xl shadow-xl shadow-black/20 flex flex-col overflow-hidden"
           onClick={e => e.stopPropagation()}
         >
-          {/* All content gated by isOpen — empty glass box when closed (GPU keeps blur warm) */}
+          {/* Content fades in/out independently — glass stays solid */}
           {isOpen && (
-            <>
+            <div className="flex flex-col h-full animate-fade-in">
               {/* Header */}
               <div className="shrink-0 px-6 pt-5 pb-4 border-b border-white/[0.06]">
                 <div className="flex items-center justify-between mb-4">
@@ -470,7 +468,7 @@ export default function UnifiedSettingsModal() {
                   </motion.div>
                 )}
               </AnimatePresence>
-            </>
+            </div>
           )}
         </div>
       </div>
diff --git a/styles/globals.css b/styles/globals.css
index 59c2bb5..ceeec13 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -107,4 +107,13 @@
   .animate-float {
     animation: float 6s ease-in-out infinite;
   }
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  .animate-fade-in {
+    animation: fadeIn 150ms ease-out;
+  }
 }
-- 
2.49.1


From 14695a52ddb01874f86aff806cb6da818546877c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 00:17:58 +0100
Subject: [PATCH 314/428] =?UTF-8?q?feat:=20dropdown-style=20animation=20on?=
 =?UTF-8?q?=20content=20=E2=80=94=20glass=20stays=20during=20exit=20via=20?=
 =?UTF-8?q?onExitComplete?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../settings/unified/UnifiedSettingsModal.tsx | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index 6a865a0..baf9bea 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -240,6 +240,7 @@ export default function UnifiedSettingsModal() {
   const [hasPendingAction, setHasPendingAction] = useState(false)
   const saveHandlerRef = useRef<(() => Promise<void>) | null>(null)
   const [saving, setSaving] = useState(false)
+  const [showGlass, setShowGlass] = useState(false)
 
   const handleDirtyChange = useCallback((dirty: boolean) => {
     isDirtyRef.current = dirty
@@ -305,6 +306,7 @@ export default function UnifiedSettingsModal() {
       isDirtyRef.current = false
       pendingActionRef.current = null
       setHasPendingAction(false)
+      setShowGlass(true)
     }
   }, [isOpen])
 
@@ -382,19 +384,26 @@ export default function UnifiedSettingsModal() {
         onClick={handleBackdropClick}
       />
 
-      {/* Glass panel — always mounted, instant show/hide, blur always composited */}
+      {/* Glass panel — always mounted, blur always composited */}
       <div
         className={`fixed inset-0 z-[61] flex items-center justify-center p-4 ${
-          isOpen ? 'visible pointer-events-auto' : 'invisible pointer-events-none'
+          isOpen || showGlass ? 'visible pointer-events-auto' : 'invisible pointer-events-none'
         }`}
       >
         <div
           className="w-full max-w-3xl h-[85vh] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-2xl shadow-xl shadow-black/20 flex flex-col overflow-hidden"
           onClick={e => e.stopPropagation()}
         >
-          {/* Content fades in/out independently — glass stays solid */}
-          {isOpen && (
-            <div className="flex flex-col h-full animate-fade-in">
+          {/* Content animates in/out — glass panel stays visible during exit */}
+          <AnimatePresence onExitComplete={() => setShowGlass(false)}>
+            {isOpen && (
+            <motion.div
+              className="flex flex-col h-full"
+              initial={{ opacity: 0, y: 10, scale: 0.95 }}
+              animate={{ opacity: 1, y: 0, scale: 1 }}
+              exit={{ opacity: 0, y: 10, scale: 0.95 }}
+              transition={{ duration: 0.15 }}
+            >
               {/* Header */}
               <div className="shrink-0 px-6 pt-5 pb-4 border-b border-white/[0.06]">
                 <div className="flex items-center justify-between mb-4">
@@ -468,8 +477,9 @@ export default function UnifiedSettingsModal() {
                   </motion.div>
                 )}
               </AnimatePresence>
-            </div>
-          )}
+            </motion.div>
+            )}
+          </AnimatePresence>
         </div>
       </div>
     </>
-- 
2.49.1


From ae54e0f10a8a41bf50180c60ff0e9e128eb60980 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 00:23:47 +0100
Subject: [PATCH 315/428] =?UTF-8?q?fix:=20glass=20panel=20fades=20out=20on?=
 =?UTF-8?q?=20close,=20snaps=20in=20on=20open=20=E2=80=94=20no=20blur=20fl?=
 =?UTF-8?q?ash?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/settings/unified/UnifiedSettingsModal.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index baf9bea..c95dc62 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -384,10 +384,14 @@ export default function UnifiedSettingsModal() {
         onClick={handleBackdropClick}
       />
 
-      {/* Glass panel — always mounted, blur always composited */}
+      {/* Glass panel — instant appear, fades out with content */}
       <div
         className={`fixed inset-0 z-[61] flex items-center justify-center p-4 ${
-          isOpen || showGlass ? 'visible pointer-events-auto' : 'invisible pointer-events-none'
+          isOpen
+            ? 'opacity-100 pointer-events-auto'
+            : showGlass
+              ? 'opacity-0 pointer-events-none transition-opacity duration-150'
+              : 'opacity-0 pointer-events-none invisible'
         }`}
       >
         <div
-- 
2.49.1


From f6e43976d86a1cbd4f6090128f7c2ddf9933ca5d Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 00:27:26 +0100
Subject: [PATCH 316/428] =?UTF-8?q?feat:=20whole=20modal=20fades=20in/out?=
 =?UTF-8?q?=20together=20=E2=80=94=20glass=20+=20content=20as=20one=20unit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../settings/unified/UnifiedSettingsModal.tsx      | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index c95dc62..d1e39ea 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -384,28 +384,28 @@ export default function UnifiedSettingsModal() {
         onClick={handleBackdropClick}
       />
 
-      {/* Glass panel — instant appear, fades out with content */}
+      {/* Glass panel — always mounted, fades out on close */}
       <div
         className={`fixed inset-0 z-[61] flex items-center justify-center p-4 ${
           isOpen
-            ? 'opacity-100 pointer-events-auto'
+            ? 'opacity-100 pointer-events-auto transition-opacity duration-150'
             : showGlass
               ? 'opacity-0 pointer-events-none transition-opacity duration-150'
               : 'opacity-0 pointer-events-none invisible'
         }`}
       >
         <div
-          className="w-full max-w-3xl h-[85vh] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-2xl shadow-xl shadow-black/20 flex flex-col overflow-hidden"
+          className="relative w-full max-w-3xl h-[85vh] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-2xl shadow-xl shadow-black/20 flex flex-col overflow-hidden"
           onClick={e => e.stopPropagation()}
         >
-          {/* Content animates in/out — glass panel stays visible during exit */}
+          {/* Content animates in/out */}
           <AnimatePresence onExitComplete={() => setShowGlass(false)}>
             {isOpen && (
             <motion.div
               className="flex flex-col h-full"
-              initial={{ opacity: 0, y: 10, scale: 0.95 }}
-              animate={{ opacity: 1, y: 0, scale: 1 }}
-              exit={{ opacity: 0, y: 10, scale: 0.95 }}
+              initial={{ opacity: 0, scale: 0.98 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.98 }}
               transition={{ duration: 0.15 }}
             >
               {/* Header */}
-- 
2.49.1


From 61a106eed64ef4eb09ae288edbe138a77b76aa1b Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 10:47:51 +0100
Subject: [PATCH 317/428] refactor: replace all legacy settings links with
 unified modal openers

---
 app/notifications/page.tsx                    | 10 +++---
 app/page.tsx                                  |  6 ++--
 app/sites/[id]/cdn/page.tsx                   | 12 ++++---
 app/sites/[id]/search/page.tsx                | 11 +++---
 components/dashboard/Sidebar.tsx              | 34 ++++++++++++++++++-
 components/dashboard/SiteNav.tsx              |  4 ---
 .../notifications/NotificationCenter.tsx      | 14 +++++---
 7 files changed, 65 insertions(+), 26 deletions(-)

diff --git a/app/notifications/page.tsx b/app/notifications/page.tsx
index eb31ee3..417fc0c 100644
--- a/app/notifications/page.tsx
+++ b/app/notifications/page.tsx
@@ -16,6 +16,7 @@ import {
 import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { formatTimeAgo, getTypeIcon } from '@/lib/utils/notifications'
 import { Button, ArrowLeftIcon } from '@ciphera-net/ui'
+import { useUnifiedSettings } from '@/lib/unified-settings-context'
 import { NotificationsListSkeleton, useMinimumLoading, useSkeletonFade } from '@/components/skeletons'
 import { toast } from '@ciphera-net/ui'
 
@@ -23,6 +24,7 @@ const PAGE_SIZE = 50
 
 export default function NotificationsPage() {
   const { user } = useAuth()
+  const { openUnifiedSettings } = useUnifiedSettings()
   const [notifications, setNotifications] = useState<Notification[]>([])
   const [unreadCount, setUnreadCount] = useState(0)
   const [loading, setLoading] = useState(true)
@@ -125,9 +127,9 @@ export default function NotificationsPage() {
         <h1 className="text-2xl font-bold text-white mb-2">Notifications</h1>
         <p className="text-sm text-neutral-400 mb-6">
           Manage which notifications you receive in{' '}
-          <Link href="/org-settings?tab=notifications" className="text-brand-orange hover:underline">
+          <button onClick={() => openUnifiedSettings({ context: 'workspace', tab: 'notifications' })} className="text-brand-orange hover:underline cursor-pointer">
             Organization Settings → Notifications
-          </Link>
+          </button>
         </p>
 
         {showSkeleton ? (
@@ -141,9 +143,9 @@ export default function NotificationsPage() {
             <p>No notifications yet</p>
             <p className="text-sm mt-2">
               Manage which notifications you receive in{' '}
-              <Link href="/org-settings?tab=notifications" className="text-brand-orange hover:underline">
+              <button onClick={() => openUnifiedSettings({ context: 'workspace', tab: 'notifications' })} className="text-brand-orange hover:underline cursor-pointer">
                 Organization Settings → Notifications
-              </Link>
+              </button>
             </p>
           </div>
         ) : (
diff --git a/app/page.tsx b/app/page.tsx
index fda9c5f..22c4b7c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -24,11 +24,13 @@ import { toast } from '@ciphera-net/ui'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { getSitesLimitForPlan } from '@/lib/plans'
 import { formatDate } from '@/lib/utils/formatDate'
+import { useUnifiedSettings } from '@/lib/unified-settings-context'
 
 type SiteStatsMap = Record<string, { stats: Stats }>
 
 export default function HomePage() {
   const { user, loading: authLoading } = useAuth()
+  const { openUnifiedSettings } = useUnifiedSettings()
   const [sites, setSites] = useState<Site[]>([])
   const [sitesLoading, setSitesLoading] = useState(true)
   const [siteStats, setSiteStats] = useState<SiteStatsMap>({})
@@ -355,9 +357,9 @@ export default function HomePage() {
               )}
               <div className="mt-2 flex gap-2">
                 {subscription.has_payment_method ? (
-                  <Link href="/org-settings?tab=billing" className="text-sm font-medium text-brand-orange hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:rounded">
+                  <button onClick={() => openUnifiedSettings({ context: 'workspace', tab: 'billing' })} className="text-sm font-medium text-brand-orange hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:rounded cursor-pointer">
                     Manage billing
-                  </Link>
+                  </button>
                 ) : (
                   <Link href="/pricing" className="text-sm font-medium text-brand-orange hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:rounded">
                     Upgrade
diff --git a/app/sites/[id]/cdn/page.tsx b/app/sites/[id]/cdn/page.tsx
index 594c431..25e2e68 100644
--- a/app/sites/[id]/cdn/page.tsx
+++ b/app/sites/[id]/cdn/page.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react'
 import dynamic from 'next/dynamic'
 import { useParams } from 'next/navigation'
-import Link from 'next/link'
+import { useUnifiedSettings } from '@/lib/unified-settings-context'
 import * as Flags from 'country-flag-icons/react/3x2'
 
 const DottedMap = dynamic(() => import('@/components/dashboard/DottedMap'), { ssr: false })
@@ -115,6 +115,8 @@ export default function CDNPage() {
   const [period, setPeriod] = useState('7')
   const [dateRange, setDateRange] = useState(() => getDateRange(7))
 
+  const { openUnifiedSettings } = useUnifiedSettings()
+
   // Data fetching
   const { data: bunnyStatus } = useBunnyStatus(siteId)
   const { data: dashboard } = useDashboard(siteId, dateRange.start, dateRange.end)
@@ -183,13 +185,13 @@ export default function CDNPage() {
           <p className="text-sm text-neutral-400 max-w-md mb-6">
             Monitor your CDN performance including bandwidth usage, cache hit rates, request volumes, and geographic distribution.
           </p>
-          <Link
-            href={`/sites/${siteId}/settings?tab=integrations`}
-            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-brand-orange hover:bg-brand-orange/90 text-white text-sm font-medium transition-colors"
+          <button
+            onClick={() => openUnifiedSettings({ context: 'site', tab: 'integrations' })}
+            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-brand-orange hover:bg-brand-orange/90 text-white text-sm font-medium transition-colors cursor-pointer"
           >
             Connect in Settings
             <ArrowSquareOut size={16} weight="bold" />
-          </Link>
+          </button>
         </div>
       </div>
     )
diff --git a/app/sites/[id]/search/page.tsx b/app/sites/[id]/search/page.tsx
index bc2a444..4f1dd5f 100644
--- a/app/sites/[id]/search/page.tsx
+++ b/app/sites/[id]/search/page.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react'
 import { useParams } from 'next/navigation'
-import Link from 'next/link'
+import { useUnifiedSettings } from '@/lib/unified-settings-context'
 import { Select, DatePicker } from '@ciphera-net/ui'
 import { getDateRange, formatDate, getThisWeekRange, getThisMonthRange } from '@/lib/utils/dateRanges'
 import { CaretDown, CaretUp, MagnifyingGlass, ArrowSquareOut } from '@phosphor-icons/react'
@@ -36,6 +36,7 @@ const PAGE_SIZE = 50
 export default function SearchConsolePage() {
   const params = useParams()
   const siteId = params.id as string
+  const { openUnifiedSettings } = useUnifiedSettings()
 
   // Date range
   const [period, setPeriod] = useState('28')
@@ -172,13 +173,13 @@ export default function SearchConsolePage() {
           <p className="text-sm text-neutral-400 max-w-md mb-6">
             See how your site performs in Google Search. View top queries, pages, click-through rates, and average position data.
           </p>
-          <Link
-            href={`/sites/${siteId}/settings?tab=integrations`}
-            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-brand-orange hover:bg-brand-orange/90 text-white text-sm font-medium transition-colors"
+          <button
+            onClick={() => openUnifiedSettings({ context: 'site', tab: 'integrations' })}
+            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-brand-orange hover:bg-brand-orange/90 text-white text-sm font-medium transition-colors cursor-pointer"
           >
             Connect in Settings
             <ArrowSquareOut size={16} weight="bold" />
-          </Link>
+          </button>
         </div>
       </div>
     )
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 0f5b7d9..e365f53 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -327,6 +327,38 @@ function NavLink({
   )
 }
 
+// ─── Settings Button (opens unified modal instead of navigating) ─────
+
+function SettingsButton({
+  item, collapsed, onClick,
+}: {
+  item: NavItem; collapsed: boolean; onClick?: () => void
+}) {
+  const { openUnifiedSettings } = useUnifiedSettings()
+
+  return (
+    <div className="relative group/nav">
+      <button
+        onClick={() => {
+          openUnifiedSettings({ context: 'site', tab: 'general' })
+          onClick?.()
+        }}
+        className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5 w-full cursor-pointer"
+      >
+        <span className="w-7 h-7 flex items-center justify-center shrink-0">
+          <item.icon className="w-[18px] h-[18px]" weight="regular" />
+        </span>
+        <Label collapsed={collapsed}>{item.label}</Label>
+      </button>
+      {collapsed && (
+        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/nav:opacity-100 transition-opacity duration-150 delay-150 z-50">
+          {item.label}
+        </span>
+      )}
+    </div>
+  )
+}
+
 // ─── Sidebar Content ────────────────────────────────────────
 
 interface SidebarContentProps {
@@ -401,7 +433,7 @@ function SidebarContent({
                 <NavLink key={item.label} item={item} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={onNavigate} />
               ))}
               {group.label === 'Infrastructure' && canEdit && (
-                <NavLink item={SETTINGS_ITEM} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={onNavigate} />
+                <SettingsButton item={SETTINGS_ITEM} collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
               )}
             </div>
           </div>
diff --git a/components/dashboard/SiteNav.tsx b/components/dashboard/SiteNav.tsx
index e8eb496..0ee505f 100644
--- a/components/dashboard/SiteNav.tsx
+++ b/components/dashboard/SiteNav.tsx
@@ -4,7 +4,6 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { motion } from 'framer-motion'
 import { useTabListKeyboard } from '@/lib/hooks/useTabListKeyboard'
-import { useAuth } from '@/lib/auth/context'
 
 interface SiteNavProps {
   siteId: string
@@ -13,8 +12,6 @@ interface SiteNavProps {
 export default function SiteNav({ siteId }: SiteNavProps) {
   const pathname = usePathname()
   const handleTabKeyDown = useTabListKeyboard()
-  const { user } = useAuth()
-  const canEdit = user?.role === 'owner' || user?.role === 'admin'
 
   const tabs = [
     { label: 'Dashboard', href: `/sites/${siteId}` },
@@ -24,7 +21,6 @@ export default function SiteNav({ siteId }: SiteNavProps) {
     { label: 'Search', href: `/sites/${siteId}/search` },
     { label: 'CDN', href: `/sites/${siteId}/cdn` },
     { label: 'Uptime', href: `/sites/${siteId}/uptime` },
-    ...(canEdit ? [{ label: 'Settings', href: `/sites/${siteId}/settings` }] : []),
   ]
 
   const isActive = (href: string) => {
diff --git a/components/notifications/NotificationCenter.tsx b/components/notifications/NotificationCenter.tsx
index 749979c..cf7f00c 100644
--- a/components/notifications/NotificationCenter.tsx
+++ b/components/notifications/NotificationCenter.tsx
@@ -12,6 +12,7 @@ import { listNotifications, markNotificationRead, markAllNotificationsRead, type
 import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { formatTimeAgo, getTypeIcon } from '@/lib/utils/notifications'
 import { SettingsIcon } from '@ciphera-net/ui'
+import { useUnifiedSettings } from '@/lib/unified-settings-context'
 import { SkeletonLine, SkeletonCircle } from '@/components/skeletons'
 
 // * Bell icon (simple SVG, no extra deps)
@@ -58,6 +59,7 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
   const panelRef = useRef<HTMLDivElement>(null)
   const buttonRef = useRef<HTMLButtonElement>(null)
   const [fixedPos, setFixedPos] = useState<{ left: number; top?: number; bottom?: number } | null>(null)
+  const { openUnifiedSettings } = useUnifiedSettings()
 
   const updatePosition = useCallback(() => {
     if (anchor === 'right' && buttonRef.current) {
@@ -319,14 +321,16 @@ export default function NotificationCenter({ anchor = 'bottom', variant = 'defau
               >
                 View all
               </Link>
-              <Link
-                href="/org-settings?tab=notifications"
-                onClick={() => setOpen(false)}
-                className="flex items-center gap-2 text-sm text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors"
+              <button
+                onClick={() => {
+                  setOpen(false)
+                  openUnifiedSettings({ context: 'workspace', tab: 'notifications' })
+                }}
+                className="flex items-center gap-2 text-sm text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors cursor-pointer"
               >
                 <SettingsIcon className="w-4 h-4" aria-hidden="true" />
                 Manage settings
-              </Link>
+              </button>
             </div>
           </motion.div>
             )}
-- 
2.49.1


From cc3047edba9b8a05e6813a818345ea3d3ea49b97 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 10:50:36 +0100
Subject: [PATCH 318/428] refactor: replace legacy settings pages with redirect
 handlers + delete unused files
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- /sites/:id/settings → redirect handler for GSC OAuth callback + deep links
- /org-settings → redirect handler for tab deep links
- Deleted: OrganizationSettings.tsx, SettingsModalWrapper.tsx, settings-modal-context.tsx
---
 app/org-settings/page.tsx                    |   56 +-
 app/sites/[id]/settings/page.tsx             | 2681 +-----------------
 components/settings/OrganizationSettings.tsx | 1577 ----------
 components/settings/SettingsModalWrapper.tsx |  124 -
 lib/settings-modal-context.tsx               |   31 -
 5 files changed, 91 insertions(+), 4378 deletions(-)
 delete mode 100644 components/settings/OrganizationSettings.tsx
 delete mode 100644 components/settings/SettingsModalWrapper.tsx
 delete mode 100644 lib/settings-modal-context.tsx

diff --git a/app/org-settings/page.tsx b/app/org-settings/page.tsx
index 2d7fdab..75633ae 100644
--- a/app/org-settings/page.tsx
+++ b/app/org-settings/page.tsx
@@ -1,30 +1,38 @@
-import { Suspense } from 'react'
-import OrganizationSettings from '@/components/settings/OrganizationSettings'
-import { SettingsFormSkeleton } from '@/components/skeletons'
+'use client'
 
-export const metadata = {
-  title: 'Organization Settings - Pulse',
-  description: 'Manage your organization settings',
-}
+import { useEffect } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useUnifiedSettings } from '@/lib/unified-settings-context'
+import { Spinner } from '@ciphera-net/ui'
+
+/**
+ * Legacy org settings page — now a redirect handler.
+ * Redirects to home and opens unified settings modal at the correct workspace tab.
+ */
+export default function OrgSettingsRedirect() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const { openUnifiedSettings } = useUnifiedSettings()
+
+  useEffect(() => {
+    const tab = searchParams.get('tab')
+
+    const tabMap: Record<string, string> = {
+      general: 'general',
+      members: 'members',
+      billing: 'billing',
+      notifications: 'notifications',
+      audit: 'audit',
+    }
+
+    const mappedTab = tab ? tabMap[tab] || 'general' : 'general'
+    router.replace('/')
+    setTimeout(() => openUnifiedSettings({ context: 'workspace', tab: mappedTab }), 100)
+  }, [searchParams, router, openUnifiedSettings])
 
-export default function OrgSettingsPage() {
   return (
-    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
-      <div>
-        <Suspense fallback={
-          <div className="space-y-8">
-            <div>
-              <div className="h-8 w-56 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800 mb-2" />
-              <div className="h-4 w-80 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800" />
-            </div>
-            <div className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-6 md:p-8">
-              <SettingsFormSkeleton />
-            </div>
-          </div>
-        }>
-          <OrganizationSettings />
-        </Suspense>
-      </div>
+    <div className="flex items-center justify-center py-24">
+      <Spinner className="w-6 h-6 text-neutral-500" />
     </div>
   )
 }
diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index 6182b99..530a37b 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -1,2640 +1,77 @@
 'use client'
 
-import { useEffect, useState, useRef } from 'react'
+import { useEffect } from 'react'
 import { useParams, useRouter, useSearchParams } from 'next/navigation'
-import { updateSite, resetSiteData, type Site, type GeoDataLevel } from '@/lib/api/sites'
-import { createGoal, updateGoal, deleteGoal, type Goal } from '@/lib/api/goals'
-import { createReportSchedule, updateReportSchedule, deleteReportSchedule, testReportSchedule, listAlertSchedules, type ReportSchedule, type CreateReportScheduleRequest, type EmailConfig, type WebhookConfig } from '@/lib/api/report-schedules'
-import { botFilterSessions, botUnfilterSessions } from '@/lib/api/bot-filter'
-import { getGSCAuthURL, disconnectGSC } from '@/lib/api/gsc'
-import { getBunnyPullZones, connectBunny, disconnectBunny } from '@/lib/api/bunny'
-import type { BunnyPullZone } from '@/lib/api/bunny'
-import { toast, getDateRange } from '@ciphera-net/ui'
-import { getAuthErrorMessage } from '@ciphera-net/ui'
-import { formatDateTime } from '@/lib/utils/formatDate'
-import { SettingsFormSkeleton, GoalsListSkeleton, useMinimumLoading, useSkeletonFade } from '@/components/skeletons'
-import VerificationModal from '@/components/sites/VerificationModal'
-import DeleteSiteModal from '@/components/sites/DeleteSiteModal'
-import ScriptSetupBlock from '@/components/sites/ScriptSetupBlock'
-import { PasswordInput } from '@ciphera-net/ui'
-import { Select, Modal, Button } from '@ciphera-net/ui'
-import { APP_URL } from '@/lib/api/client'
-import { generatePrivacySnippet } from '@/lib/utils/privacySnippet'
-import { useUnsavedChanges } from '@/lib/hooks/useUnsavedChanges'
-import { useSite, useGoals, useReportSchedules, useAlertSchedules, useSubscription, useGSCStatus, useBunnyStatus, useSessions, useBotFilterStats, usePageSpeedConfig } from '@/lib/swr/dashboard'
-import { updatePageSpeedConfig } from '@/lib/api/pagespeed'
-import { getRetentionOptionsForPlan, formatRetentionMonths } from '@/lib/plans'
-import { motion, AnimatePresence } from 'framer-motion'
-import { useAuth } from '@/lib/auth/context'
-import {
-  SettingsIcon,
-  GlobeIcon,
-  CheckIcon,
-  AlertTriangleIcon,
-  ZapIcon,
-} from '@ciphera-net/ui'
-import { PaperPlaneTilt, Envelope, WebhooksLogo, SpinnerGap, Trash, PencilSimple, Play, Plugs, ShieldCheck, Bug, BellSimple } from '@phosphor-icons/react'
-import { SiDiscord } from '@icons-pack/react-simple-icons'
-
-function SlackIcon({ size = 16 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 24 24" style={{ fill: 'none' }}>
-      <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313z" style={{ fill: '#E01E5A' }}/>
-      <path d="M8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312z" style={{ fill: '#36C5F0' }}/>
-      <path d="M18.958 8.834a2.528 2.528 0 0 1 2.52-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.52V8.834zm-1.271 0a2.528 2.528 0 0 1-2.521 2.521 2.528 2.528 0 0 1-2.521-2.521V2.522A2.528 2.528 0 0 1 15.166 0a2.528 2.528 0 0 1 2.521 2.522v6.312z" style={{ fill: '#2EB67D' }}/>
-      <path d="M15.166 18.958a2.528 2.528 0 0 1 2.521 2.52A2.528 2.528 0 0 1 15.166 24a2.528 2.528 0 0 1-2.521-2.522v-2.52h2.521zm0-1.271a2.528 2.528 0 0 1-2.521-2.521 2.528 2.528 0 0 1 2.521-2.521h6.312A2.528 2.528 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.521h-6.312z" style={{ fill: '#ECB22E' }}/>
-    </svg>
-  )
-}
-
-const CHANNEL_ICONS: Record<string, React.ReactNode> = {
-  email: <Envelope className="w-4 h-4" />,
-  slack: <SlackIcon size={16} />,
-  discord: <SiDiscord size={16} color="#5865F2" />,
-  webhook: <WebhooksLogo className="w-4 h-4" />,
-}
-
-const CHANNEL_ICONS_LG: Record<string, React.ReactNode> = {
-  email: <Envelope className="w-5 h-5 text-neutral-400" />,
-  slack: <SlackIcon size={18} />,
-  discord: <SiDiscord size={18} color="#5865F2" />,
-  webhook: <WebhooksLogo className="w-5 h-5 text-neutral-400" />,
-}
-
-const TIMEZONES = [
-  'UTC',
-  'America/New_York',
-  'America/Los_Angeles',
-  'America/Chicago',
-  'America/Toronto',
-  'Europe/London',
-  'Europe/Paris',
-  'Europe/Berlin',
-  'Europe/Amsterdam',
-  'Asia/Tokyo',
-  'Asia/Singapore',
-  'Asia/Dubai',
-  'Australia/Sydney',
-  'Pacific/Auckland',
-]
-
-export default function SiteSettingsPage() {
-  const { user } = useAuth()
-  const canEdit = user?.role === 'owner' || user?.role === 'admin'
+import { toast } from '@ciphera-net/ui'
+import { useUnifiedSettings } from '@/lib/unified-settings-context'
+import { useGSCStatus } from '@/lib/swr/dashboard'
+import { Spinner } from '@ciphera-net/ui'
 
+/**
+ * Legacy settings page — now a redirect handler.
+ *
+ * The unified settings modal has replaced the full-page settings.
+ * This page only exists to handle:
+ * 1. GSC OAuth callbacks (?gsc=connected|denied|error|no_property)
+ * 2. Deep links with ?tab= params
+ * 3. Direct navigation — redirects to site dashboard and opens modal
+ */
+export default function SettingsRedirect() {
   const params = useParams()
   const router = useRouter()
-  const siteId = params.id as string
-
-  const { data: site, isLoading: siteLoading, mutate: mutateSite } = useSite(siteId)
-  const [saving, setSaving] = useState(false)
-  const [showDeleteModal, setShowDeleteModal] = useState(false)
-  const [activeTab, setActiveTab] = useState<'general' | 'visibility' | 'data' | 'bot' | 'goals' | 'notifications' | 'integrations'>('general')
   const searchParams = useSearchParams()
+  const siteId = params.id as string
+  const { openUnifiedSettings } = useUnifiedSettings()
+  const { mutate: mutateGSCStatus } = useGSCStatus(siteId)
 
-  const [formData, setFormData] = useState({
-    name: '',
-    timezone: 'UTC',
-    is_public: false,
-    password: '',
-    excluded_paths: '',
-    // Data collection settings
-    collect_page_paths: true,
-    collect_referrers: true,
-    collect_device_info: true,
-    collect_geo_data: 'full' as GeoDataLevel,
-    collect_screen_resolution: true,
-    // Bot and noise filtering
-    filter_bots: true,
-    // Hide unknown locations
-    hide_unknown_locations: false,
-    // Data retention (6 = free-tier max; safe default)
-    data_retention_months: 6
-  })
-  const { data: subscription, error: subscriptionError, mutate: mutateSubscription } = useSubscription()
-  const [linkCopied, setLinkCopied] = useState(false)
-  const [snippetCopied, setSnippetCopied] = useState(false)
-  const [showVerificationModal, setShowVerificationModal] = useState(false)
-  const [isPasswordEnabled, setIsPasswordEnabled] = useState(false)
-  const { data: goals = [], isLoading: goalsLoading, mutate: mutateGoals } = useGoals(siteId)
-  const [goalModalOpen, setGoalModalOpen] = useState(false)
-  const [editingGoal, setEditingGoal] = useState<Goal | null>(null)
-  const [goalForm, setGoalForm] = useState({ name: '', event_name: '' })
-  const [goalSaving, setGoalSaving] = useState(false)
-  const initialFormRef = useRef<string>('')
-
-  // Report schedules
-  const { data: reportSchedules = [], isLoading: reportLoading, mutate: mutateReportSchedules } = useReportSchedules(siteId)
-  // Alert schedules (uptime alerts)
-  const { data: alertSchedules = [], isLoading: alertLoading, mutate: mutateAlertSchedules } = useAlertSchedules(siteId)
-  const { data: gscStatus, mutate: mutateGSCStatus } = useGSCStatus(siteId)
-  const [gscConnecting, setGscConnecting] = useState(false)
-  const [gscDisconnecting, setGscDisconnecting] = useState(false)
-  const { data: bunnyStatus, mutate: mutateBunnyStatus } = useBunnyStatus(siteId)
-  const { data: psiConfig, mutate: mutatePSIConfig } = usePageSpeedConfig(siteId)
-  const [bunnyApiKey, setBunnyApiKey] = useState('')
-  const [bunnyPullZones, setBunnyPullZones] = useState<BunnyPullZone[]>([])
-  const [bunnySelectedZone, setBunnySelectedZone] = useState<BunnyPullZone | null>(null)
-  const [bunnyLoadingZones, setBunnyLoadingZones] = useState(false)
-  const [bunnyConnecting, setBunnyConnecting] = useState(false)
-  const [bunnyDisconnecting, setBunnyDisconnecting] = useState(false)
-  const [reportModalOpen, setReportModalOpen] = useState(false)
-  const [editingSchedule, setEditingSchedule] = useState<ReportSchedule | null>(null)
-  const [reportSaving, setReportSaving] = useState(false)
-  const [reportTesting, setReportTesting] = useState<string | null>(null)
-  const [reportForm, setReportForm] = useState({
-    channel: 'email' as string,
-    recipients: '',
-    webhookUrl: '',
-    frequency: 'weekly' as string,
-    reportType: 'summary' as string,
-    timezone: '',
-    sendHour: 9,
-    sendDay: 1,
-  })
-
-  // Alert channel state
-  const [alertModalOpen, setAlertModalOpen] = useState(false)
-  const [editingAlert, setEditingAlert] = useState<ReportSchedule | null>(null)
-  const [alertSaving, setAlertSaving] = useState(false)
-  const [alertTesting, setAlertTesting] = useState<string | null>(null)
-  const [alertForm, setAlertForm] = useState({
-    channel: 'email' as string,
-    recipients: '',
-    webhookUrl: '',
-  })
-
-  // Bot & Spam tab state
-  const [botDateRange, setBotDateRange] = useState(() => getDateRange(7))
-  const [suspiciousOnly, setSuspiciousOnly] = useState(true)
-  const [selectedSessions, setSelectedSessions] = useState<Set<string>>(new Set())
-  const [botView, setBotView] = useState<'review' | 'blocked'>('review')
-  const { data: sessions, mutate: mutateSessions } = useSessions(siteId, botDateRange.start, botDateRange.end, botView === 'review' ? suspiciousOnly : false)
-  const { data: botStats, mutate: mutateBotStats } = useBotFilterStats(siteId)
-
-  const handleBotFilter = async (sessionIds: string[]) => {
-    try {
-      await botFilterSessions(siteId, sessionIds)
-      toast.success(`${sessionIds.length} session(s) flagged as bot`)
-      setSelectedSessions(new Set())
-      mutateSessions()
-      mutateBotStats()
-    } catch {
-      toast.error('Failed to flag sessions')
-    }
-  }
-
-  const handleBotUnfilter = async (sessionIds: string[]) => {
-    try {
-      await botUnfilterSessions(siteId, sessionIds)
-      toast.success(`${sessionIds.length} session(s) unblocked`)
-      setSelectedSessions(new Set())
-      mutateSessions()
-      mutateBotStats()
-    } catch {
-      toast.error('Failed to unblock sessions')
-    }
-  }
-
-  useEffect(() => {
-    if (!site) return
-    setFormData({
-      name: site.name,
-      timezone: site.timezone || 'UTC',
-      is_public: site.is_public || false,
-      password: '',
-      excluded_paths: (site.excluded_paths || []).join('\n'),
-      collect_page_paths: site.collect_page_paths ?? true,
-      collect_referrers: site.collect_referrers ?? true,
-      collect_device_info: site.collect_device_info ?? true,
-      collect_geo_data: site.collect_geo_data || 'full',
-      collect_screen_resolution: site.collect_screen_resolution ?? true,
-      filter_bots: site.filter_bots ?? true,
-      hide_unknown_locations: site.hide_unknown_locations ?? false,
-      data_retention_months: site.data_retention_months ?? 6
-    })
-    initialFormRef.current = JSON.stringify({
-      name: site.name,
-      timezone: site.timezone || 'UTC',
-      is_public: site.is_public || false,
-      excluded_paths: (site.excluded_paths || []).join('\n'),
-      collect_page_paths: site.collect_page_paths ?? true,
-      collect_referrers: site.collect_referrers ?? true,
-      collect_device_info: site.collect_device_info ?? true,
-      collect_geo_data: site.collect_geo_data || 'full',
-      collect_screen_resolution: site.collect_screen_resolution ?? true,
-      filter_bots: site.filter_bots ?? true,
-      hide_unknown_locations: site.hide_unknown_locations ?? false,
-      data_retention_months: site.data_retention_months ?? 6
-    })
-    setIsPasswordEnabled(!!site.has_password)
-  }, [site])
-
-  // * Snap data_retention_months to nearest valid option when subscription loads
-  useEffect(() => {
-    if (!subscription) return
-    const opts = getRetentionOptionsForPlan(subscription.plan_id)
-    const values = opts.map(o => o.value)
-    const maxVal = Math.max(...values)
-    setFormData(prev => {
-      if (values.includes(prev.data_retention_months)) return prev
-      const bestFit = values.filter(v => v <= prev.data_retention_months).pop() ?? maxVal
-      return { ...prev, data_retention_months: Math.min(bestFit, maxVal) }
-    })
-  }, [subscription])
-
-  const resetReportForm = () => {
-    setReportForm({
-      channel: 'email',
-      recipients: '',
-      webhookUrl: '',
-      frequency: 'weekly',
-      reportType: 'summary',
-      timezone: site?.timezone || '',
-      sendHour: 9,
-      sendDay: 1,
-    })
-  }
-
-  const openEditSchedule = (schedule: ReportSchedule) => {
-    setEditingSchedule(schedule)
-    const isEmail = schedule.channel === 'email'
-    setReportForm({
-      channel: schedule.channel,
-      recipients: isEmail ? (schedule.channel_config as EmailConfig).recipients.join(', ') : '',
-      webhookUrl: !isEmail ? (schedule.channel_config as WebhookConfig).url : '',
-      frequency: schedule.frequency,
-      reportType: schedule.report_type,
-      timezone: schedule.timezone || site?.timezone || '',
-      sendHour: schedule.send_hour ?? 9,
-      sendDay: schedule.send_day ?? (schedule.frequency === 'monthly' ? 1 : 0),
-    })
-    setReportModalOpen(true)
-  }
-
-  const handleReportSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-
-    let channelConfig: EmailConfig | WebhookConfig
-    if (reportForm.channel === 'email') {
-      const recipients = reportForm.recipients.split(',').map(r => r.trim()).filter(r => r.length > 0)
-      if (recipients.length === 0) {
-        toast.error('At least one recipient email is required')
-        return
-      }
-      channelConfig = { recipients }
-    } else {
-      if (!reportForm.webhookUrl.trim()) {
-        toast.error('Webhook URL is required')
-        return
-      }
-      channelConfig = { url: reportForm.webhookUrl.trim() }
-    }
-
-    const payload: CreateReportScheduleRequest = {
-      channel: reportForm.channel,
-      channel_config: channelConfig,
-      frequency: reportForm.frequency,
-      timezone: reportForm.timezone || undefined,
-      report_type: reportForm.reportType,
-      send_hour: reportForm.sendHour,
-      ...(reportForm.frequency !== 'daily' ? { send_day: reportForm.sendDay } : {}),
-    }
-
-    setReportSaving(true)
-    try {
-      if (editingSchedule) {
-        await updateReportSchedule(siteId, editingSchedule.id, payload)
-        toast.success('Report schedule updated')
-      } else {
-        await createReportSchedule(siteId, payload)
-        toast.success('Report schedule created')
-      }
-      setReportModalOpen(false)
-      mutateReportSchedules()
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to save report schedule')
-    } finally {
-      setReportSaving(false)
-    }
-  }
-
-  const handleReportDelete = async (schedule: ReportSchedule) => {
-    if (!confirm('Delete this report schedule?')) return
-    try {
-      await deleteReportSchedule(siteId, schedule.id)
-      toast.success('Report schedule deleted')
-      mutateReportSchedules()
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to delete report schedule')
-    }
-  }
-
-  const handleReportToggle = async (schedule: ReportSchedule) => {
-    try {
-      await updateReportSchedule(siteId, schedule.id, { enabled: !schedule.enabled })
-      toast.success(schedule.enabled ? 'Report paused' : 'Report enabled')
-      mutateReportSchedules()
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to update report schedule')
-    }
-  }
-
-  const handleReportTest = async (schedule: ReportSchedule) => {
-    setReportTesting(schedule.id)
-    try {
-      await testReportSchedule(siteId, schedule.id)
-      toast.success('Test report sent successfully')
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to send test report')
-    } finally {
-      setReportTesting(null)
-    }
-  }
-
-  // Alert channel handlers
-  const resetAlertForm = () => {
-    setAlertForm({
-      channel: 'email',
-      recipients: '',
-      webhookUrl: '',
-    })
-  }
-
-  const openEditAlert = (schedule: ReportSchedule) => {
-    setEditingAlert(schedule)
-    const isEmail = schedule.channel === 'email'
-    setAlertForm({
-      channel: schedule.channel,
-      recipients: isEmail ? (schedule.channel_config as EmailConfig).recipients.join(', ') : '',
-      webhookUrl: !isEmail ? (schedule.channel_config as WebhookConfig).url : '',
-    })
-    setAlertModalOpen(true)
-  }
-
-  const handleAlertSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-
-    let channelConfig: EmailConfig | WebhookConfig
-    if (alertForm.channel === 'email') {
-      const recipients = alertForm.recipients.split(',').map(r => r.trim()).filter(r => r.length > 0)
-      if (recipients.length === 0) {
-        toast.error('At least one recipient email is required')
-        return
-      }
-      channelConfig = { recipients }
-    } else {
-      if (!alertForm.webhookUrl.trim()) {
-        toast.error('Webhook URL is required')
-        return
-      }
-      channelConfig = { url: alertForm.webhookUrl.trim() }
-    }
-
-    const payload: CreateReportScheduleRequest = {
-      channel: alertForm.channel,
-      channel_config: channelConfig,
-      frequency: 'daily',
-      purpose: 'alert',
-    }
-
-    setAlertSaving(true)
-    try {
-      if (editingAlert) {
-        await updateReportSchedule(siteId, editingAlert.id, { ...payload, purpose: 'alert' })
-        toast.success('Alert channel updated')
-      } else {
-        await createReportSchedule(siteId, payload)
-        toast.success('Alert channel created')
-      }
-      setAlertModalOpen(false)
-      mutateAlertSchedules()
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to save alert channel')
-    } finally {
-      setAlertSaving(false)
-    }
-  }
-
-  const handleAlertDelete = async (schedule: ReportSchedule) => {
-    if (!confirm('Delete this alert channel?')) return
-    try {
-      await deleteReportSchedule(siteId, schedule.id)
-      toast.success('Alert channel deleted')
-      mutateAlertSchedules()
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to delete alert channel')
-    }
-  }
-
-  const handleAlertToggle = async (schedule: ReportSchedule) => {
-    try {
-      await updateReportSchedule(siteId, schedule.id, { enabled: !schedule.enabled })
-      toast.success(schedule.enabled ? 'Alert paused' : 'Alert enabled')
-      mutateAlertSchedules()
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to update alert channel')
-    }
-  }
-
-  const handleAlertTest = async (schedule: ReportSchedule) => {
-    setAlertTesting(schedule.id)
-    try {
-      await testReportSchedule(siteId, schedule.id)
-      toast.success('Test alert sent successfully')
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to send test alert')
-    } finally {
-      setAlertTesting(null)
-    }
-  }
-
-  const getChannelLabel = (channel: string) => {
-    switch (channel) {
-      case 'email': return 'Email'
-      case 'slack': return 'Slack'
-      case 'discord': return 'Discord'
-      case 'webhook': return 'Webhook'
-      default: return channel
-    }
-  }
-
-  const getFrequencyLabel = (frequency: string) => {
-    switch (frequency) {
-      case 'daily': return 'Daily'
-      case 'weekly': return 'Weekly'
-      case 'monthly': return 'Monthly'
-      default: return frequency
-    }
-  }
-
-  const WEEKDAY_NAMES = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
-
-  const formatHour = (hour: number) => {
-    if (hour === 0) return '12:00 AM'
-    if (hour === 12) return '12:00 PM'
-    return hour < 12 ? `${hour}:00 AM` : `${hour - 12}:00 PM`
-  }
-
-  const getScheduleDescription = (schedule: ReportSchedule) => {
-    const hour = formatHour(schedule.send_hour ?? 9)
-    const tz = schedule.timezone || 'UTC'
-    switch (schedule.frequency) {
-      case 'daily':
-        return `Every day at ${hour} (${tz})`
-      case 'weekly': {
-        const day = WEEKDAY_NAMES[schedule.send_day ?? 0] || 'Monday'
-        return `Every ${day} at ${hour} (${tz})`
-      }
-      case 'monthly': {
-        const d = schedule.send_day ?? 1
-        const suffix = d === 1 ? 'st' : d === 2 ? 'nd' : d === 3 ? 'rd' : 'th'
-        return `${d}${suffix} of each month at ${hour} (${tz})`
-      }
-      default:
-        return schedule.frequency
-    }
-  }
-
-  const getReportTypeLabel = (type: string) => {
-    switch (type) {
-      case 'summary': return 'Summary'
-      case 'pages': return 'Pages'
-      case 'sources': return 'Sources'
-      case 'goals': return 'Goals'
-      default: return type
-    }
-  }
-
-  const openAddGoal = () => {
-    setEditingGoal(null)
-    setGoalForm({ name: '', event_name: '' })
-    setGoalModalOpen(true)
-  }
-
-  const openEditGoal = (goal: Goal) => {
-    setEditingGoal(goal)
-    setGoalForm({ name: goal.name, event_name: goal.event_name })
-    setGoalModalOpen(true)
-  }
-
-  const handleGoalSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!goalForm.name.trim() || !goalForm.event_name.trim()) {
-      toast.error('Name and event name are required')
-      return
-    }
-    const eventName = goalForm.event_name.trim().toLowerCase().replace(/\s+/g, '_')
-    if (eventName.length > 64) {
-      toast.error('Event name must be 64 characters or less')
-      return
-    }
-    if (!/^[a-zA-Z0-9_]+$/.test(eventName)) {
-      toast.error('Event name can only contain letters, numbers, and underscores')
-      return
-    }
-    const duplicateEventName = editingGoal
-      ? goals.some((g) => g.id !== editingGoal.id && g.event_name === eventName)
-      : goals.some((g) => g.event_name === eventName)
-    if (duplicateEventName) {
-      toast.error('A goal with this event name already exists')
-      return
-    }
-    setGoalSaving(true)
-    try {
-      if (editingGoal) {
-        await updateGoal(siteId, editingGoal.id, { name: goalForm.name.trim(), event_name: eventName })
-        toast.success('Goal updated')
-      } else {
-        await createGoal(siteId, { name: goalForm.name.trim(), event_name: eventName })
-        toast.success('Goal created')
-      }
-      setGoalModalOpen(false)
-      mutateGoals()
-    } catch (err) {
-      toast.error(getAuthErrorMessage(err as Error) || 'Failed to save goal')
-    } finally {
-      setGoalSaving(false)
-    }
-  }
-
-  const handleDeleteGoal = async (goal: Goal) => {
-    if (!confirm(`Delete goal "${goal.name}"?`)) return
-    try {
-      await deleteGoal(siteId, goal.id)
-      toast.success('Goal deleted')
-      mutateGoals()
-    } catch (err) {
-      toast.error(getAuthErrorMessage(err as Error) || 'Failed to delete goal')
-    }
-  }
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setSaving(true)
-
-    try {
-      const excludedPathsArray = formData.excluded_paths
-        .split('\n')
-        .map(p => p.trim())
-        .filter(p => p.length > 0)
-
-      await updateSite(siteId, {
-        name: formData.name,
-        timezone: formData.timezone,
-        is_public: formData.is_public,
-        password: isPasswordEnabled ? (formData.password || undefined) : undefined,
-        clear_password: !isPasswordEnabled,
-        excluded_paths: excludedPathsArray,
-        // Data collection settings
-        collect_page_paths: formData.collect_page_paths,
-        collect_referrers: formData.collect_referrers,
-        collect_device_info: formData.collect_device_info,
-        collect_geo_data: formData.collect_geo_data,
-        collect_screen_resolution: formData.collect_screen_resolution,
-        // Bot and noise filtering
-        filter_bots: formData.filter_bots,
-        // Hide unknown locations
-        hide_unknown_locations: formData.hide_unknown_locations,
-        // Data retention
-        data_retention_months: formData.data_retention_months
-      })
-      toast.success('Site updated successfully')
-      initialFormRef.current = JSON.stringify({
-        name: formData.name,
-        timezone: formData.timezone,
-        is_public: formData.is_public,
-        excluded_paths: formData.excluded_paths,
-        collect_page_paths: formData.collect_page_paths,
-        collect_referrers: formData.collect_referrers,
-        collect_device_info: formData.collect_device_info,
-        collect_geo_data: formData.collect_geo_data,
-        collect_screen_resolution: formData.collect_screen_resolution,
-        filter_bots: formData.filter_bots,
-        hide_unknown_locations: formData.hide_unknown_locations,
-        data_retention_months: formData.data_retention_months
-      })
-      mutateSite()
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to save site settings')
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  const handleResetData = async () => {
-    if (!confirm('Are you sure you want to delete ALL data for this site? This action cannot be undone.')) {
-      return
-    }
-
-    try {
-      await resetSiteData(siteId)
-      toast.success('All site data has been reset')
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || 'Failed to reset site data')
-    }
-  }
-
-  const handleDeleteSite = () => {
-    setShowDeleteModal(true)
-  }
-
-  const copyLink = () => {
-    const link = `${APP_URL}/share/${siteId}`
-    navigator.clipboard.writeText(link)
-    setLinkCopied(true)
-    toast.success('Link copied to clipboard')
-    setTimeout(() => setLinkCopied(false), 2000)
-  }
-
-  const copySnippet = () => {
-    if (!site) return
-    navigator.clipboard.writeText(generatePrivacySnippet(site))
-    setSnippetCopied(true)
-    toast.success('Privacy snippet copied to clipboard')
-    setTimeout(() => setSnippetCopied(false), 2000)
-  }
-
-  const isFormDirty = initialFormRef.current !== '' && JSON.stringify({
-    name: formData.name,
-    timezone: formData.timezone,
-    is_public: formData.is_public,
-    excluded_paths: formData.excluded_paths,
-    collect_page_paths: formData.collect_page_paths,
-    collect_referrers: formData.collect_referrers,
-    collect_device_info: formData.collect_device_info,
-    collect_geo_data: formData.collect_geo_data,
-    collect_screen_resolution: formData.collect_screen_resolution,
-    filter_bots: formData.filter_bots,
-    hide_unknown_locations: formData.hide_unknown_locations,
-    data_retention_months: formData.data_retention_months
-  }) !== initialFormRef.current
-
-  useUnsavedChanges(isFormDirty)
-
-  useEffect(() => {
-    if (site?.domain) document.title = `Settings · ${site.domain} | Pulse`
-  }, [site?.domain])
-
-  // Handle GSC OAuth callback query params
   useEffect(() => {
     const gsc = searchParams.get('gsc')
-    if (!gsc) return
-    switch (gsc) {
-      case 'connected':
-        toast.success('Google Search Console connected successfully')
-        mutateGSCStatus()
-        break
-      case 'denied':
-        toast.error('Google authorization was denied')
-        break
-      case 'no_property':
-        toast.error('No matching Search Console property found for this site')
-        break
-      case 'error':
-        toast.error('Failed to connect Google Search Console')
-        break
+    const tab = searchParams.get('tab')
+
+    // Handle GSC OAuth callback
+    if (gsc) {
+      switch (gsc) {
+        case 'connected':
+          toast.success('Google Search Console connected successfully')
+          mutateGSCStatus()
+          break
+        case 'denied':
+          toast.error('Google authorization was denied')
+          break
+        case 'no_property':
+          toast.error('No matching Search Console property found for this site')
+          break
+        case 'token_error':
+        case 'error':
+          toast.error('Failed to connect Google Search Console')
+          break
+      }
+      // Redirect to site page and open integrations tab
+      router.replace(`/sites/${siteId}`)
+      setTimeout(() => openUnifiedSettings({ context: 'site', tab: 'integrations' }), 100)
+      return
     }
-    setActiveTab('integrations')
-    window.history.replaceState({}, '', window.location.pathname)
-  }, [searchParams, mutateGSCStatus])
 
-  const showSkeleton = useMinimumLoading(siteLoading && !site)
-  const fadeClass = useSkeletonFade(showSkeleton)
+    // Handle deep links with ?tab= param
+    const tabMap: Record<string, string> = {
+      general: 'general',
+      visibility: 'visibility',
+      data: 'privacy',
+      privacy: 'privacy',
+      bot: 'bot-spam',
+      goals: 'goals',
+      notifications: 'reports',
+      integrations: 'integrations',
+    }
 
-  if (showSkeleton) {
-    return (
-      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
-        <div className="space-y-8">
-          <div>
-            <div className="h-8 w-40 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800 mb-2" />
-            <div className="h-4 w-64 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800" />
-          </div>
-          <div className="flex flex-col md:flex-row gap-8">
-            <nav className="w-full md:w-64 flex-shrink-0 space-y-1">
-              {Array.from({ length: 6 }).map((_, i) => (
-                <div key={i} className="h-12 animate-pulse rounded-xl bg-neutral-100 dark:bg-neutral-800" />
-              ))}
-            </nav>
-            <div className="flex-1 bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-6 md:p-8">
-              <SettingsFormSkeleton />
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  if (!site) {
-    return (
-      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
-        <p className="text-neutral-600 dark:text-neutral-400">Site not found</p>
-      </div>
-    )
-  }
+    const mappedTab = tab ? tabMap[tab] || 'general' : 'general'
+    router.replace(`/sites/${siteId}`)
+    setTimeout(() => openUnifiedSettings({ context: 'site', tab: mappedTab }), 100)
+  }, [siteId, searchParams, router, openUnifiedSettings, mutateGSCStatus])
 
   return (
-    <div className={`w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
-
-      <div className="space-y-8">
-        <div>
-          <h1 className="text-lg font-semibold text-neutral-200">Site Settings</h1>
-          <p className="mt-2 text-neutral-600 dark:text-neutral-400">
-            Manage settings for <span className="font-medium text-white">{site.domain}</span>
-          </p>
-        </div>
-
-        <div className="flex flex-col md:flex-row gap-8">
-        {/* Sidebar Navigation */}
-        <nav className="w-full md:w-64 flex-shrink-0 space-y-1" role="tablist" aria-label="Site settings sections">
-          <button
-            onClick={() => setActiveTab('general')}
-            role="tab"
-            aria-selected={activeTab === 'general'}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
-              activeTab === 'general'
-                ? 'bg-brand-orange/10 text-brand-orange'
-                : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-            }`}
-          >
-            <SettingsIcon className="w-5 h-5" />
-            General
-          </button>
-          <button
-            onClick={() => setActiveTab('visibility')}
-            role="tab"
-            aria-selected={activeTab === 'visibility'}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
-              activeTab === 'visibility'
-                ? 'bg-brand-orange/10 text-brand-orange'
-                : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-            }`}
-          >
-            <GlobeIcon className="w-5 h-5" />
-            Visibility
-          </button>
-          <button
-            onClick={() => setActiveTab('data')}
-            role="tab"
-            aria-selected={activeTab === 'data'}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
-              activeTab === 'data'
-                ? 'bg-brand-orange/10 text-brand-orange'
-                : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-            }`}
-          >
-            <ShieldCheck className="w-5 h-5" />
-            Data & Privacy
-          </button>
-          <button
-            onClick={() => setActiveTab('bot')}
-            role="tab"
-            aria-selected={activeTab === 'bot'}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
-              activeTab === 'bot'
-                ? 'bg-brand-orange/10 text-brand-orange'
-                : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-            }`}
-          >
-            <Bug className="w-5 h-5" />
-            Bot & Spam
-          </button>
-          <button
-            onClick={() => setActiveTab('goals')}
-            role="tab"
-            aria-selected={activeTab === 'goals'}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
-              activeTab === 'goals'
-                ? 'bg-brand-orange/10 text-brand-orange'
-                : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-            }`}
-          >
-            <ZapIcon className="w-5 h-5" />
-            Goals & Events
-          </button>
-          <button
-            onClick={() => setActiveTab('notifications')}
-            role="tab"
-            aria-selected={activeTab === 'notifications'}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
-              activeTab === 'notifications'
-                ? 'bg-brand-orange/10 text-brand-orange'
-                : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-            }`}
-          >
-            <BellSimple className="w-5 h-5" />
-            Notifications
-          </button>
-          <button
-            onClick={() => setActiveTab('integrations')}
-            role="tab"
-            aria-selected={activeTab === 'integrations'}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
-              activeTab === 'integrations'
-                ? 'bg-brand-orange/10 text-brand-orange'
-                : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-            }`}
-          >
-            <Plugs className="w-5 h-5" />
-            Integrations
-          </button>
-        </nav>
-
-        {/* Content Area */}
-        <div className="flex-1 relative">
-          {!canEdit && (
-            <div className="mb-6 p-4 bg-amber-50 dark:bg-amber-900/10 text-amber-800 dark:text-amber-200 rounded-xl border border-amber-200 dark:border-amber-800 flex items-center gap-3">
-              <AlertTriangleIcon className="w-5 h-5" />
-              <p className="text-sm font-medium">You have read-only access to this site. Contact an admin to make changes.</p>
-            </div>
-          )}
-
-          <motion.div
-            key={activeTab}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.2 }}
-            className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-6 md:p-8 shadow-sm"
-          >
-            {activeTab === 'general' && (
-              <div className="space-y-12">
-                <form onSubmit={handleSubmit} className="space-y-6">
-                  <div>
-                    <h2 className="text-2xl font-bold text-white mb-1">General Configuration</h2>
-                    <p className="text-sm text-neutral-400">Update your site details and tracking script.</p>
-                  </div>
-
-                  <div className="space-y-4">
-                    <div className="space-y-1.5">
-                      <label htmlFor="name" className="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
-                        Site Name
-                      </label>
-                      <input
-                        type="text"
-                        id="name"
-                        required
-                        maxLength={100}
-                        value={formData.name}
-                        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                        className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-neutral-50/50 dark:bg-neutral-900/50 focus:bg-white dark:focus:bg-neutral-900 
-                        focus:border-brand-orange focus:ring-4 focus:ring-brand-orange/10 outline-none transition-all duration-200 dark:text-white"
-                      />
-                      {formData.name.length > 80 && (
-                        <span className={`text-xs tabular-nums ${formData.name.length > 90 ? 'text-amber-500' : 'text-neutral-400'}`}>{formData.name.length}/100</span>
-                      )}
-                    </div>
-
-                    <div className="space-y-1.5">
-                      <label htmlFor="timezone" className="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
-                        Timezone
-                      </label>
-                      <Select
-                        id="timezone"
-                        value={formData.timezone}
-                        onChange={(v) => setFormData({ ...formData, timezone: v })}
-                        options={TIMEZONES.map((tz) => ({ value: tz, label: tz }))}
-                        variant="input"
-                        fullWidth
-                        align="left"
-                      />
-                    </div>
-
-                    <div className="space-y-1.5">
-                      <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
-                        Domain
-                      </label>
-                      <input
-                        type="text"
-                        value={site.domain}
-                        disabled
-                        className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-neutral-100 dark:bg-neutral-800/50 text-neutral-400 cursor-not-allowed"
-                      />
-                      <p className="text-xs text-neutral-400">
-                        Domain cannot be changed after creation
-                      </p>
-                    </div>
-                  </div>
-
-                  <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800">
-                    <h3 className="text-lg font-semibold text-white mb-2">Tracking Script</h3>
-                    <p className="text-sm text-neutral-400 mb-4">
-                      Add this script to your website to start tracking visitors. Choose your framework for setup instructions.
-                    </p>
-                    <ScriptSetupBlock
-                      site={{ domain: site.domain, name: site.name, script_features: site.script_features }}
-                      showFrameworkPicker
-                      className="mb-4"
-                      onFeaturesChange={async (features) => {
-                        try {
-                          await updateSite(siteId, { name: site.name, script_features: features })
-                          mutateSite()
-                        } catch { /* silent — not critical */ }
-                      }}
-                    />
-
-                    <div className="flex items-center gap-4 mt-4">
-                      <button
-                        type="button"
-                        onClick={() => setShowVerificationModal(true)}
-                        className={`flex items-center gap-2 px-4 py-2 border rounded-xl transition-all text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ${
-                          site.is_verified
-                            ? 'bg-green-50 dark:bg-green-900/10 border-green-200 dark:border-green-900/30 text-green-700 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900/20 focus-visible:ring-green-500'
-                            : 'bg-white dark:bg-neutral-800 border-neutral-200 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-700 focus-visible:ring-brand-orange'
-                        }`}
-                      >
-                        {site.is_verified ? <CheckIcon className="w-4 h-4" /> : <ZapIcon className="w-4 h-4" />}
-                        {site.is_verified ? 'Verified' : 'Verify Installation'}
-                      </button>
-                      <p className="text-xs text-neutral-400">
-                        {site.is_verified ? 'Your site is sending data correctly.' : 'Check if your site is sending data correctly.'}
-                      </p>
-                    </div>
-                  </div>
-
-                    <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
-                    {canEdit && (
-                      <Button type="submit" disabled={saving} isLoading={saving}>
-                        Save Changes
-                      </Button>
-                    )}
-                    </div>
-                  </form>
-
-                  {canEdit && (
-                  <div className="space-y-6">
-                    <div>
-                      <h2 className="text-2xl font-bold text-red-600 dark:text-red-500 mb-1">Danger Zone</h2>
-                    <p className="text-sm text-neutral-400">Irreversible actions for your site.</p>
-                    </div>
-
-                  <div className="space-y-4">
-                    <div className="p-4 border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-900/10 rounded-2xl flex items-center justify-between">
-                      <div>
-                        <h3 className="font-medium text-red-900 dark:text-red-200">Reset Data</h3>
-                        <p className="text-sm text-red-700 dark:text-red-300 mt-1">Delete all stats and events. This cannot be undone.</p>
-                      </div>
-                      <button
-                        onClick={handleResetData}
-                        className="px-4 py-2 bg-white dark:bg-neutral-900 border border-red-200 dark:border-red-900 text-red-600 dark:text-red-400 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2"
-                      >
-                        Reset Data
-                      </button>
-                    </div>
-
-                    <div className="p-4 border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-900/10 rounded-2xl flex items-center justify-between">
-                      <div>
-                        <h3 className="font-medium text-red-900 dark:text-red-200">Delete Site</h3>
-                        <p className="text-sm text-red-700 dark:text-red-300 mt-1">Schedule this site for deletion with a 7-day grace period.</p>
-                      </div>
-                      <button
-                        onClick={handleDeleteSite}
-                        className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2"
-                      >
-                        Delete Site...
-                      </button>
-                    </div>
-                  </div>
-                </div>
-                )}
-              </div>
-            )}
-
-            {activeTab === 'visibility' && (
-              <div className="space-y-12">
-                <form onSubmit={handleSubmit} className="space-y-6">
-                  <div>
-                    <h2 className="text-2xl font-bold text-white mb-1">Visibility Settings</h2>
-                    <p className="text-sm text-neutral-400">Manage who can view your dashboard.</p>
-                  </div>
-
-                  <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-3">
-                        <div className="p-2 bg-white dark:bg-neutral-800 rounded-lg text-neutral-400">
-                          <GlobeIcon className="w-6 h-6" />
-                        </div>
-                        <div>
-                          <h3 className="font-medium text-white">Public Dashboard</h3>
-                          <p className="text-sm text-neutral-400">
-                            Allow anyone with the link to view this dashboard
-                          </p>
-                        </div>
-                      </div>
-                      
-                      <label className="relative inline-flex items-center cursor-pointer">
-                        <input
-                          type="checkbox"
-                          checked={formData.is_public}
-                          onChange={(e) => setFormData({ ...formData, is_public: e.target.checked })}
-                          className="sr-only peer"
-                        />
-                        <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
-                      </label>
-                    </div>
-
-                    <AnimatePresence>
-                      {formData.is_public && (
-                        <motion.div
-                          initial={{ opacity: 0, height: 0 }}
-                          animate={{ opacity: 1, height: 'auto' }}
-                          exit={{ opacity: 0, height: 0 }}
-                          className="mt-6 pt-6 border-t border-neutral-200 dark:border-neutral-800 overflow-hidden space-y-6"
-                        >
-                          <div>
-                            <label className="block text-sm font-medium mb-2 text-white">
-                              Public Link
-                            </label>
-                            <div className="flex gap-2">
-                              <input
-                                type="text"
-                                readOnly
-                                value={`${APP_URL}/share/${siteId}`}
-                                className="flex-1 px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-neutral-600 dark:text-neutral-400 font-mono text-sm"
-                              />
-                              <button
-                                type="button"
-                                onClick={copyLink}
-                                className="px-4 py-2 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 text-white rounded-xl font-medium hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
-                              >
-                                {linkCopied ? 'Copied!' : 'Copy Link'}
-                              </button>
-                            </div>
-                            <p className="mt-2 text-xs text-neutral-400">
-                              Share this link with others to view the dashboard.
-                            </p>
-                          </div>
-
-                          <div>
-                            <div className="flex items-center justify-between">
-                              <div className="flex items-center gap-3">
-                                <div>
-                                  <h3 className="text-sm font-medium text-white">Password Protection</h3>
-                                  <p className="text-xs text-neutral-500 mt-0.5">Restrict access to this dashboard.</p>
-                                </div>
-                                {isPasswordEnabled && site?.has_password && !formData.password && (
-                                  <span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900/30 text-green-400 border border-green-500/20">
-                                    <span className="w-1.5 h-1.5 rounded-full bg-green-400" />
-                                    Password set
-                                  </span>
-                                )}
-                              </div>
-                              <label className="relative inline-flex items-center cursor-pointer">
-                                <input
-                                  type="checkbox"
-                                  checked={isPasswordEnabled}
-                                  onChange={(e) => {
-                                    setIsPasswordEnabled(e.target.checked);
-                                    if (!e.target.checked) setFormData({...formData, password: ''});
-                                  }}
-                                  className="sr-only peer"
-                                />
-                                <div className="w-11 h-6 bg-neutral-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-600 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-orange"></div>
-                              </label>
-                            </div>
-
-                            <AnimatePresence>
-                              {isPasswordEnabled && (
-                                <motion.div
-                                  initial={{ opacity: 0, height: 0 }}
-                                  animate={{ opacity: 1, height: 'auto' }}
-                                  exit={{ opacity: 0, height: 0 }}
-                                  className="overflow-hidden"
-                                >
-                                  <div className="mt-4 space-y-3">
-                                    <PasswordInput
-                                      id="password"
-                                      value={formData.password}
-                                      onChange={(e) => setFormData({ ...formData, password: e.target.value })}
-                                      placeholder="Enter new password"
-                                    />
-                                    {site?.has_password && (
-                                      <p className="text-xs text-neutral-500">
-                                        Current password will remain unchanged unless you enter a new one.
-                                      </p>
-                                    )}
-                                    {site?.has_password && (
-                                      <button
-                                        type="button"
-                                        onClick={() => {
-                                          setIsPasswordEnabled(false)
-                                          setFormData({ ...formData, password: '' })
-                                        }}
-                                        className="text-xs font-medium text-red-400 hover:text-red-300 transition-colors"
-                                      >
-                                        Remove password protection
-                                      </button>
-                                    )}
-                                    {!site?.has_password && (
-                                      <p className="text-xs text-neutral-500">
-                                        Visitors will need to enter this password to view the dashboard.
-                                      </p>
-                                    )}
-                                  </div>
-                                </motion.div>
-                              )}
-                            </AnimatePresence>
-                          </div>
-                        </motion.div>
-                      )}
-                    </AnimatePresence>
-                  </div>
-
-                  <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
-                    {canEdit && (
-                      <Button type="submit" disabled={saving} isLoading={saving}>
-                        Save Changes
-                      </Button>
-                    )}
-                  </div>
-                </form>
-              </div>
-            )}
-
-            {activeTab === 'data' && (
-              <div className="space-y-12">
-                <form onSubmit={handleSubmit} className="space-y-6">
-                  <div>
-                    <h2 className="text-2xl font-bold text-white mb-1">Data & Privacy</h2>
-                    <p className="text-sm text-neutral-400">Control what visitor data is collected. Less data = more privacy.</p>
-                  </div>
-
-                  {/* Data Collection Controls */}
-                  <div className="space-y-4">
-                    <h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">Data Collection</h3>
-
-                    {/* Page Paths Toggle */}
-                    <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
-                      <div className="flex items-center justify-between">
-                        <div>
-                          <h4 className="font-medium text-white">Page Paths</h4>
-                          <p className="text-sm text-neutral-400 mt-0.5">
-                            Track which pages visitors view
-                          </p>
-                        </div>
-                        <label className="relative inline-flex items-center cursor-pointer">
-                          <input
-                            type="checkbox"
-                            checked={formData.collect_page_paths}
-                            onChange={(e) => setFormData({ ...formData, collect_page_paths: e.target.checked })}
-                            className="sr-only peer"
-                          />
-                          <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
-                        </label>
-                      </div>
-                    </div>
-
-                    {/* Referrers Toggle */}
-                    <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
-                      <div className="flex items-center justify-between">
-                        <div>
-                          <h4 className="font-medium text-white">Referrers</h4>
-                          <p className="text-sm text-neutral-400 mt-0.5">
-                            Track where visitors come from
-                          </p>
-                        </div>
-                        <label className="relative inline-flex items-center cursor-pointer">
-                          <input
-                            type="checkbox"
-                            checked={formData.collect_referrers}
-                            onChange={(e) => setFormData({ ...formData, collect_referrers: e.target.checked })}
-                            className="sr-only peer"
-                          />
-                          <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
-                        </label>
-                      </div>
-                    </div>
-
-                    {/* Device Info Toggle */}
-                    <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
-                      <div className="flex items-center justify-between">
-                        <div>
-                          <h4 className="font-medium text-white">Device Info</h4>
-                          <p className="text-sm text-neutral-400 mt-0.5">
-                            Track browser, OS, and device type
-                          </p>
-                        </div>
-                        <label className="relative inline-flex items-center cursor-pointer">
-                          <input
-                            type="checkbox"
-                            checked={formData.collect_device_info}
-                            onChange={(e) => setFormData({ ...formData, collect_device_info: e.target.checked })}
-                            className="sr-only peer"
-                          />
-                          <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
-                        </label>
-                      </div>
-                    </div>
-
-                    {/* Geographic Data Dropdown */}
-                    <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
-                      <div className="flex items-center justify-between">
-                        <div>
-                          <h4 className="font-medium text-white">Geographic Data</h4>
-                          <p className="text-sm text-neutral-400 mt-0.5">
-                            Control location tracking granularity
-                          </p>
-                        </div>
-                        <Select
-                          value={formData.collect_geo_data}
-                          onChange={(v) => setFormData({ ...formData, collect_geo_data: v as GeoDataLevel })}
-                          options={[
-                            { value: 'full', label: 'Full (country, region, city)' },
-                            { value: 'country', label: 'Country only' },
-                            { value: 'none', label: 'None' },
-                          ]}
-                          variant="input"
-                          align="right"
-                          className="min-w-[200px]"
-                        />
-                      </div>
-                    </div>
-
-                    {/* Screen Resolution Toggle */}
-                    <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
-                      <div className="flex items-center justify-between">
-                        <div>
-                          <h4 className="font-medium text-white">Screen Resolution</h4>
-                          <p className="text-sm text-neutral-400 mt-0.5">
-                            Track visitor screen sizes
-                          </p>
-                        </div>
-                        <label className="relative inline-flex items-center cursor-pointer">
-                          <input
-                            type="checkbox"
-                            checked={formData.collect_screen_resolution}
-                            onChange={(e) => setFormData({ ...formData, collect_screen_resolution: e.target.checked })}
-                            className="sr-only peer"
-                          />
-                          <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
-                        </label>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Filtering */}
-                  <div className="space-y-4 pt-6 border-t border-neutral-100 dark:border-neutral-800">
-                    <h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">Filtering</h3>
-                    <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
-                      <div className="flex items-center justify-between">
-                        <div>
-                          <h4 className="font-medium text-white">Hide unknown locations</h4>
-                          <p className="text-sm text-neutral-400 mt-0.5">
-                            Exclude entries where geographic data could not be resolved from location stats
-                          </p>
-                        </div>
-                        <label className="relative inline-flex items-center cursor-pointer">
-                          <input
-                            type="checkbox"
-                            checked={formData.hide_unknown_locations}
-                            onChange={(e) => setFormData({ ...formData, hide_unknown_locations: e.target.checked })}
-                            className="sr-only peer"
-                          />
-                          <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
-                        </label>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Data Retention */}
-                  <div className="space-y-4 pt-6 border-t border-neutral-100 dark:border-neutral-800">
-                    <h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">Data Retention</h3>
-                    {!!subscriptionError && (
-                      <div className="p-3 rounded-xl border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/20 flex items-center justify-between gap-3">
-                        <p className="text-sm text-amber-800 dark:text-amber-200">
-                          Plan limits could not be loaded. Options shown may be limited.
-                        </p>
-                        <button
-                          type="button"
-                          onClick={() => mutateSubscription()}
-                          className="shrink-0 text-sm font-medium text-amber-800 dark:text-amber-200 hover:underline"
-                        >
-                          Retry
-                        </button>
-                      </div>
-                    )}
-                    <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
-                      <div className="flex items-center justify-between">
-                        <div>
-                          <h4 className="font-medium text-white">Keep raw event data for</h4>
-                          <p className="text-sm text-neutral-400 mt-0.5">
-                            Events older than this are automatically deleted. Aggregated daily stats are kept permanently.
-                          </p>
-                        </div>
-                        <Select
-                          value={String(formData.data_retention_months)}
-                          onChange={(v) => setFormData({ ...formData, data_retention_months: Number(v) })}
-                          options={getRetentionOptionsForPlan(subscription?.plan_id).map(opt => ({
-                            value: String(opt.value),
-                            label: opt.label,
-                          }))}
-                          variant="input"
-                          align="right"
-                          className="min-w-[160px]"
-                        />
-                      </div>
-                      {subscription?.plan_id && subscription.plan_id !== 'free' && (
-                        <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-3">
-                          Your {subscription.plan_id} plan supports up to {formatRetentionMonths(
-                            getRetentionOptionsForPlan(subscription.plan_id).at(-1)?.value ?? 6
-                          )} of data retention.
-                        </p>
-                      )}
-                      {(!subscription?.plan_id || subscription.plan_id === 'free') && (
-                        <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-3">
-                          Free plan supports up to 6 months. <a href="/pricing" className="text-brand-orange hover:underline">Upgrade</a> for longer retention.
-                        </p>
-                      )}
-                    </div>
-                  </div>
-
-                  {/* PageSpeed Monitoring */}
-                  <div className="space-y-4 pt-6 border-t border-neutral-100 dark:border-neutral-800">
-                    <h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">PageSpeed Monitoring</h3>
-                    <div className="p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-100 dark:border-neutral-800">
-                      <div className="flex items-center justify-between">
-                        <div>
-                          <h4 className="font-medium text-white">Check frequency</h4>
-                          <p className="text-sm text-neutral-400 mt-0.5">
-                            How often PageSpeed Insights runs automated checks on your site.
-                          </p>
-                        </div>
-                        {psiConfig?.enabled ? (
-                          <Select
-                            value={psiConfig.frequency}
-                            onChange={async (v) => {
-                              try {
-                                await updatePageSpeedConfig(siteId, { enabled: true, frequency: v })
-                                mutatePSIConfig()
-                                toast.success(`PageSpeed frequency updated to ${v}`)
-                              } catch {
-                                toast.error('Failed to update frequency')
-                              }
-                            }}
-                            options={[
-                              { value: 'daily', label: 'Daily' },
-                              { value: 'weekly', label: 'Weekly' },
-                              { value: 'monthly', label: 'Monthly' },
-                            ]}
-                            variant="input"
-                            align="right"
-                            className="min-w-[130px]"
-                          />
-                        ) : (
-                          <span className="text-sm text-neutral-400 dark:text-neutral-500">
-                            Not enabled
-                          </span>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Excluded Paths */}
-                  <div className="space-y-4 pt-6 border-t border-neutral-100 dark:border-neutral-800">
-                    <h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">Path Filtering</h3>
-                    <div className="space-y-1.5">
-                      <label htmlFor="excludedPaths" className="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
-                        Excluded Paths
-                      </label>
-                      <div className="relative">
-                        <textarea
-                          id="excludedPaths"
-                          rows={4}
-                          value={formData.excluded_paths}
-                          onChange={(e) => setFormData({ ...formData, excluded_paths: e.target.value })}
-                          placeholder="/admin/*&#10;/staging/*"
-                          className="w-full px-4 py-3 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-neutral-50/50 dark:bg-neutral-900/50 focus:bg-white dark:focus:bg-neutral-900
-                          focus:border-brand-orange focus:ring-4 focus:ring-brand-orange/10 outline-none transition-all duration-200 dark:text-white font-mono text-sm"
-                        />
-                      </div>
-                      <p className="text-sm text-neutral-400 mt-2">
-                        Enter paths to exclude from tracking (one per line). Supports wildcards (e.g., /admin/*).
-                      </p>
-                    </div>
-                  </div>
-
-                  {/* For your privacy policy */}
-                  <div className="space-y-4 pt-6 border-t border-neutral-100 dark:border-neutral-800">
-                    <h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
-                      For your privacy policy
-                    </h3>
-                    <p className="text-sm text-neutral-400">
-                      Copy the text below into your site&apos;s Privacy Policy to describe your use of Pulse.
-                      It updates automatically based on your saved settings above.
-                    </p>
-                    <p className="text-xs text-amber-600 dark:text-amber-500">
-                      This is provided for convenience and is not legal advice. You are responsible for ensuring
-                      your privacy policy is accurate and complies with applicable laws.
-                    </p>
-                    <div className="relative">
-                      <textarea
-                        readOnly
-                        rows={6}
-                        value={site ? generatePrivacySnippet(site) : ''}
-                        className="w-full px-4 py-3 pr-12 border border-neutral-200 dark:border-neutral-800 rounded-xl
-                          bg-neutral-50 dark:bg-neutral-900/50 font-sans text-sm text-neutral-700 dark:text-neutral-300
-                          focus:outline-none resize-y"
-                      />
-                      <button
-                        type="button"
-                        onClick={copySnippet}
-                        className="absolute top-3 right-3 p-2 rounded-lg bg-neutral-200 dark:bg-neutral-700
-                          hover:bg-neutral-300 dark:hover:bg-neutral-600 text-neutral-600 dark:text-neutral-300
-                          transition-colors"
-                        title="Copy snippet"
-                      >
-                        {snippetCopied ? (
-                          <CheckIcon className="w-4 h-4 text-green-600" />
-                        ) : (
-                          <svg className="w-4 h-4 text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-                          </svg>
-                        )}
-                      </button>
-                    </div>
-                  </div>
-
-                  <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
-                    {canEdit && (
-                      <Button type="submit" disabled={saving} isLoading={saving}>
-                        Save Changes
-                      </Button>
-                    )}
-                  </div>
-                </form>
-              </div>
-            )}
-
-            {activeTab === 'bot' && (
-              <div className="flex-1 space-y-6">
-                <div>
-                  <h2 className="text-2xl font-bold text-white mb-1">Bot & Spam</h2>
-                  <p className="text-neutral-400 text-sm">Manage automated and manual bot filtering.</p>
-                </div>
-
-                {/* Automated Filtering Section */}
-                <div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-5">
-                  <h3 className="font-semibold text-white mb-3">Automated Filtering</h3>
-                  <div className="flex items-center justify-between py-3">
-                    <div>
-                      <p className="font-medium text-white">Filter bots and referrer spam</p>
-                      <p className="text-sm text-neutral-400 mt-0.5">Automatically block known bots, crawlers, and spam referrers</p>
-                    </div>
-                    <label className="relative inline-flex items-center cursor-pointer">
-                      <input
-                        type="checkbox"
-                        checked={formData.filter_bots}
-                        onChange={(e) => setFormData({ ...formData, filter_bots: e.target.checked })}
-                        className="sr-only peer"
-                      />
-                      <div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
-                    </label>
-                  </div>
-                  {botStats && (
-                    <div className="mt-3 pt-3 border-t border-neutral-800 flex gap-6 text-sm">
-                      <div>
-                        <span className="text-neutral-400">Auto-blocked this month:</span>
-                        <span className="ml-2 font-medium text-white">{botStats.auto_blocked_this_month.toLocaleString()}</span>
-                      </div>
-                      <div>
-                        <span className="text-neutral-400">Manually flagged:</span>
-                        <span className="ml-2 font-medium text-white">{botStats.filtered_sessions} sessions ({botStats.filtered_events} events)</span>
-                      </div>
-                    </div>
-                  )}
-                </div>
-
-                {/* Session Review Section */}
-                <div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-5">
-                  <div className="flex items-center justify-between mb-4">
-                    <h3 className="font-semibold text-white">Session Review</h3>
-                    <div className="flex items-center gap-3">
-                      {/* Review / Blocked toggle */}
-                      <div className="flex items-center rounded-lg border border-neutral-700 overflow-hidden text-sm">
-                        <button
-                          onClick={() => { setBotView('review'); setSelectedSessions(new Set()) }}
-                          className={`px-3 py-1.5 transition-colors ${botView === 'review' ? 'bg-neutral-800 text-white' : 'text-neutral-400 hover:text-white'}`}
-                        >
-                          Review
-                        </button>
-                        <button
-                          onClick={() => { setBotView('blocked'); setSelectedSessions(new Set()) }}
-                          className={`px-3 py-1.5 transition-colors ${botView === 'blocked' ? 'bg-neutral-800 text-white' : 'text-neutral-400 hover:text-white'}`}
-                        >
-                          Blocked
-                        </button>
-                      </div>
-                      {botView === 'review' && (
-                        <label className="flex items-center gap-2 text-sm text-neutral-400 cursor-pointer">
-                          <input
-                            type="checkbox"
-                            checked={suspiciousOnly}
-                            onChange={(e) => setSuspiciousOnly(e.target.checked)}
-                            className="w-4 h-4 cursor-pointer"
-                            style={{ accentColor: '#FD5E0F' }}
-                          />
-                          Suspicious only
-                        </label>
-                      )}
-                    </div>
-                  </div>
-
-                  {/* Bulk actions */}
-                  {selectedSessions.size > 0 && (
-                    <div className="mb-3 flex items-center gap-3 p-2 bg-brand-orange/10 border border-brand-orange/20 rounded-lg">
-                      <span className="text-sm text-brand-orange font-medium">{selectedSessions.size} selected</span>
-                      {botView === 'review' ? (
-                        <button onClick={() => handleBotFilter(Array.from(selectedSessions))} className="text-sm font-medium text-red-400 hover:text-red-300">
-                          Flag as bot
-                        </button>
-                      ) : (
-                        <button onClick={() => handleBotUnfilter(Array.from(selectedSessions))} className="text-sm font-medium text-green-400 hover:text-green-300">
-                          Unblock
-                        </button>
-                      )}
-                      <button onClick={() => setSelectedSessions(new Set())} className="text-sm text-neutral-400 hover:text-white ml-auto">
-                        Clear
-                      </button>
-                    </div>
-                  )}
-
-                  {/* Session cards */}
-                  <div className="space-y-2">
-                    {(sessions?.sessions || [])
-                      .filter(s => botView === 'blocked' ? s.bot_filtered : !s.bot_filtered)
-                      .map((session) => (
-                      <div key={session.session_id} className="flex items-center gap-3 p-3 rounded-xl border border-neutral-800 hover:border-neutral-700 transition-colors">
-                        <input
-                          type="checkbox"
-                          checked={selectedSessions.has(session.session_id)}
-                          onChange={(e) => {
-                            const next = new Set(selectedSessions)
-                            if (e.target.checked) next.add(session.session_id)
-                            else next.delete(session.session_id)
-                            setSelectedSessions(next)
-                          }}
-                          className="w-4 h-4 shrink-0 cursor-pointer"
-                          style={{ accentColor: '#FD5E0F' }}
-                        />
-
-                        <div className="flex-1 min-w-0">
-                          <div className="flex items-center gap-2 mb-1">
-                            <span className="text-sm font-medium text-white truncate">{session.first_page}</span>
-                            <span className={`shrink-0 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
-                              session.suspicion_score >= 5 ? 'bg-red-900/30 text-red-400' :
-                              session.suspicion_score >= 3 ? 'bg-yellow-900/30 text-yellow-400' :
-                              'bg-neutral-800 text-neutral-400'
-                            }`}>
-                              {session.suspicion_score >= 5 ? 'High risk' : session.suspicion_score >= 3 ? 'Suspicious' : 'Low risk'}
-                            </span>
-                          </div>
-                          <div className="flex items-center gap-3 text-xs text-neutral-500">
-                            <span>{session.pageviews} page{session.pageviews !== 1 ? 's' : ''}</span>
-                            <span>{session.duration != null ? `${Math.round(session.duration)}s` : 'No duration'}</span>
-                            <span>{[session.city, session.country].filter(Boolean).join(', ') || 'Unknown location'}</span>
-                            <span>{session.browser || 'Unknown browser'}</span>
-                            <span>{session.referrer || 'Direct'}</span>
-                          </div>
-                        </div>
-
-                        {botView === 'review' ? (
-                          <button
-                            onClick={() => handleBotFilter([session.session_id])}
-                            className="shrink-0 px-3 py-1.5 text-xs font-medium text-red-400 hover:text-white hover:bg-red-500/20 rounded-lg border border-red-500/20 transition-colors"
-                          >
-                            Flag as bot
-                          </button>
-                        ) : (
-                          <button
-                            onClick={() => handleBotUnfilter([session.session_id])}
-                            className="shrink-0 px-3 py-1.5 text-xs font-medium text-green-400 hover:text-white hover:bg-green-500/20 rounded-lg border border-green-500/20 transition-colors"
-                          >
-                            Unblock
-                          </button>
-                        )}
-                      </div>
-                    ))}
-                    {(sessions?.sessions || []).filter(s => botView === 'blocked' ? s.bot_filtered : !s.bot_filtered).length === 0 && (
-                      <div className="py-12 text-center text-neutral-500 text-sm">
-                        {botView === 'blocked' ? 'No blocked sessions' : 'No suspicious sessions found'}
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {activeTab === 'goals' && (
-              <div className="space-y-6">
-                <div>
-                  <h2 className="text-2xl font-bold text-white mb-1">Goals & Events</h2>
-                  <p className="text-sm text-neutral-400">
-                    Define goals to label custom events (e.g. signup, purchase). Track with <code className="px-1.5 py-0.5 rounded bg-neutral-200 dark:bg-neutral-700 text-xs">pulse.track(&apos;event_name&apos;)</code> in your snippet.
-                  </p>
-                </div>
-                {goalsLoading ? (
-                  <GoalsListSkeleton />
-                ) : (
-                  <>
-                    {canEdit && (
-                      <Button onClick={openAddGoal} variant="primary">
-                        Add goal
-                      </Button>
-                    )}
-                    <div className="space-y-2">
-                      {goals.length === 0 ? (
-                        <div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-400 text-sm">
-                          No goals yet. Add a goal to give custom events a display name in the dashboard.
-                        </div>
-                      ) : (
-                        goals.map((goal) => (
-                          <div
-                            key={goal.id}
-                            className="flex items-center justify-between py-3 px-4 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/50"
-                          >
-                            <div>
-                              <span className="font-medium text-white">{goal.name}</span>
-                              <span className="text-neutral-400 text-sm ml-2">({goal.event_name})</span>
-                            </div>
-                            {canEdit && (
-                              <div className="flex items-center gap-2">
-                                <button
-                                  type="button"
-                                  onClick={() => openEditGoal(goal)}
-                                  className="text-sm text-brand-orange hover:underline"
-                                >
-                                  Edit
-                                </button>
-                                <button
-                                  type="button"
-                                  onClick={() => handleDeleteGoal(goal)}
-                                  className="text-sm text-red-600 dark:text-red-400 hover:underline"
-                                >
-                                  Delete
-                                </button>
-                              </div>
-                            )}
-                          </div>
-                        ))
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            )}
-
-            {activeTab === 'notifications' && (
-              <div className="space-y-8">
-                <div>
-                  <h2 className="text-2xl font-bold text-white mb-1">Notifications</h2>
-                  <p className="text-sm text-neutral-400">Configure how you receive reports and alerts.</p>
-                </div>
-
-                {/* Reports subsection */}
-                <div className="space-y-4">
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <h3 className="text-base font-medium text-white">Reports</h3>
-                      <p className="text-sm text-neutral-400 mt-0.5">Automatically deliver analytics reports via email or webhooks.</p>
-                    </div>
-                    {canEdit && (
-                      <Button onClick={() => { setEditingSchedule(null); resetReportForm(); setReportModalOpen(true) }}>
-                        Add Report
-                      </Button>
-                    )}
-                  </div>
-
-                  {reportLoading ? (
-                    <div className="space-y-2">
-                      {Array.from({ length: 3 }).map((_, i) => (
-                        <div key={i} className="h-20 animate-pulse rounded-xl bg-neutral-100 dark:bg-neutral-800" />
-                      ))}
-                    </div>
-                  ) : reportSchedules.length === 0 ? (
-                    <div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-400 text-sm">
-                      No scheduled reports yet. Add a report to automatically receive analytics summaries.
-                    </div>
-                  ) : (
-                    <div className="space-y-3">
-                      {reportSchedules.map((schedule) => (
-                        <div
-                          key={schedule.id}
-                          className={`rounded-xl border p-4 transition-colors ${
-                            schedule.enabled
-                              ? 'border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900/50'
-                              : 'border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/30 opacity-60'
-                          }`}
-                        >
-                          <div className="flex items-start justify-between gap-4">
-                            <div className="flex items-start gap-3 min-w-0">
-                              <div className="p-2 bg-neutral-800 rounded-lg mt-0.5">
-                                {CHANNEL_ICONS_LG[schedule.channel] || <WebhooksLogo className="w-5 h-5 text-neutral-400" />}
-                              </div>
-                              <div className="min-w-0">
-                                <div className="flex items-center gap-2 flex-wrap">
-                                  <span className="font-medium text-white">
-                                    {getChannelLabel(schedule.channel)}
-                                  </span>
-                                  <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-brand-orange/10 text-brand-orange">
-                                    {getFrequencyLabel(schedule.frequency)}
-                                  </span>
-                                  <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400">
-                                    {getReportTypeLabel(schedule.report_type)}
-                                  </span>
-                                </div>
-                                <p className="text-sm text-neutral-400 mt-1 truncate">
-                                  {schedule.channel === 'email'
-                                    ? (schedule.channel_config as EmailConfig).recipients.join(', ')
-                                    : (schedule.channel_config as WebhookConfig).url}
-                                </p>
-                                <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-1">
-                                  {getScheduleDescription(schedule)}
-                                </p>
-                                <div className="flex items-center gap-3 mt-1 text-xs text-neutral-400 dark:text-neutral-500">
-                                  <span>
-                                    Last sent: {schedule.last_sent_at
-                                      ? formatDateTime(new Date(schedule.last_sent_at))
-                                      : 'Never'}
-                                  </span>
-                                </div>
-                                {schedule.last_error && (
-                                  <p className="text-xs text-red-500 dark:text-red-400 mt-1">
-                                    Error: {schedule.last_error}
-                                  </p>
-                                )}
-                              </div>
-                            </div>
-
-                            {canEdit && (
-                              <div className="flex items-center gap-2 flex-shrink-0">
-                                <button
-                                  type="button"
-                                  onClick={() => handleReportTest(schedule)}
-                                  disabled={reportTesting === schedule.id}
-                                  className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors disabled:opacity-50"
-                                  title="Send test report"
-                                >
-                                  {reportTesting === schedule.id ? (
-                                    <SpinnerGap className="w-4 h-4 animate-spin" />
-                                  ) : (
-                                    <Play className="w-4 h-4" />
-                                  )}
-                                </button>
-                                <button
-                                  type="button"
-                                  onClick={() => openEditSchedule(schedule)}
-                                  className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
-                                  title="Edit schedule"
-                                >
-                                  <PencilSimple className="w-4 h-4" />
-                                </button>
-                                <label className="relative inline-flex items-center cursor-pointer">
-                                  <input
-                                    type="checkbox"
-                                    checked={schedule.enabled}
-                                    onChange={() => handleReportToggle(schedule)}
-                                    className="sr-only peer"
-                                  />
-                                  <div className="w-9 h-5 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
-                                </label>
-                                <button
-                                  type="button"
-                                  onClick={() => handleReportDelete(schedule)}
-                                  className="p-2 text-neutral-500 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
-                                  title="Delete schedule"
-                                >
-                                  <Trash className="w-4 h-4" />
-                                </button>
-                              </div>
-                            )}
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  )}
-                </div>
-
-                {/* Divider */}
-                <div className="border-t border-neutral-200 dark:border-neutral-800" />
-
-                {/* Alerts subsection */}
-                <div className="space-y-4">
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <h3 className="text-base font-medium text-white">Alerts</h3>
-                      <p className="text-sm text-neutral-400 mt-0.5">Get notified when your site goes down or recovers.</p>
-                    </div>
-                    {canEdit && (
-                      <Button onClick={() => { setEditingAlert(null); resetAlertForm(); setAlertModalOpen(true) }}>
-                        Add Alert Channel
-                      </Button>
-                    )}
-                  </div>
-
-                  {alertLoading ? (
-                    <div className="space-y-2">
-                      {Array.from({ length: 2 }).map((_, i) => (
-                        <div key={i} className="h-20 animate-pulse rounded-xl bg-neutral-100 dark:bg-neutral-800" />
-                      ))}
-                    </div>
-                  ) : alertSchedules.length === 0 ? (
-                    <div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-400 text-sm">
-                      No alert channels configured. Add a channel to receive uptime alerts when your site goes down or recovers.
-                    </div>
-                  ) : (
-                    <div className="space-y-3">
-                      {alertSchedules.map((schedule) => (
-                        <div
-                          key={schedule.id}
-                          className={`rounded-xl border p-4 transition-colors ${
-                            schedule.enabled
-                              ? 'border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900/50'
-                              : 'border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/30 opacity-60'
-                          }`}
-                        >
-                          <div className="flex items-start justify-between gap-4">
-                            <div className="flex items-start gap-3 min-w-0">
-                              <div className="p-2 bg-neutral-800 rounded-lg mt-0.5">
-                                {CHANNEL_ICONS_LG[schedule.channel] || <WebhooksLogo className="w-5 h-5 text-neutral-400" />}
-                              </div>
-                              <div className="min-w-0">
-                                <div className="flex items-center gap-2 flex-wrap">
-                                  <span className="font-medium text-white">
-                                    {getChannelLabel(schedule.channel)}
-                                  </span>
-                                  <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-500">
-                                    Uptime Alert
-                                  </span>
-                                </div>
-                                <p className="text-sm text-neutral-400 mt-1 truncate">
-                                  {schedule.channel === 'email'
-                                    ? (schedule.channel_config as EmailConfig).recipients.join(', ')
-                                    : (schedule.channel_config as WebhookConfig).url}
-                                </p>
-                                <div className="flex items-center gap-3 mt-1 text-xs text-neutral-400 dark:text-neutral-500">
-                                  <span>
-                                    Last sent: {schedule.last_sent_at
-                                      ? formatDateTime(new Date(schedule.last_sent_at))
-                                      : 'Never'}
-                                  </span>
-                                </div>
-                                {schedule.last_error && (
-                                  <p className="text-xs text-red-500 dark:text-red-400 mt-1">
-                                    Error: {schedule.last_error}
-                                  </p>
-                                )}
-                              </div>
-                            </div>
-
-                            {canEdit && (
-                              <div className="flex items-center gap-2 flex-shrink-0">
-                                <button
-                                  type="button"
-                                  onClick={() => handleAlertTest(schedule)}
-                                  disabled={alertTesting === schedule.id}
-                                  className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors disabled:opacity-50"
-                                  title="Send test alert"
-                                >
-                                  {alertTesting === schedule.id ? (
-                                    <SpinnerGap className="w-4 h-4 animate-spin" />
-                                  ) : (
-                                    <Play className="w-4 h-4" />
-                                  )}
-                                </button>
-                                <button
-                                  type="button"
-                                  onClick={() => openEditAlert(schedule)}
-                                  className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
-                                  title="Edit alert channel"
-                                >
-                                  <PencilSimple className="w-4 h-4" />
-                                </button>
-                                <label className="relative inline-flex items-center cursor-pointer">
-                                  <input
-                                    type="checkbox"
-                                    checked={schedule.enabled}
-                                    onChange={() => handleAlertToggle(schedule)}
-                                    className="sr-only peer"
-                                  />
-                                  <div className="w-9 h-5 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
-                                </label>
-                                <button
-                                  type="button"
-                                  onClick={() => handleAlertDelete(schedule)}
-                                  className="p-2 text-neutral-500 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
-                                  title="Delete alert channel"
-                                >
-                                  <Trash className="w-4 h-4" />
-                                </button>
-                              </div>
-                            )}
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-
-            {activeTab === 'integrations' && (
-              <div className="space-y-6">
-                <div>
-                  <h2 className="text-2xl font-bold text-white mb-1">Integrations</h2>
-                  <p className="text-sm text-neutral-400">Connect external services to enrich your analytics data.</p>
-                </div>
-
-                {/* Google Search Console */}
-                <div className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 p-6">
-                  {!gscStatus?.connected ? (
-                    <div className="space-y-4">
-                      <div className="flex items-start gap-4">
-                        <div className="p-2.5 bg-white dark:bg-neutral-800 rounded-lg border border-neutral-200 dark:border-neutral-700 flex-shrink-0">
-                          <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none">
-                            <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1Z" fill="#4285F4"/>
-                            <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23Z" fill="#34A853"/>
-                            <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62Z" fill="#FBBC05"/>
-                            <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53Z" fill="#EA4335"/>
-                          </svg>
-                        </div>
-                        <div>
-                          <h3 className="text-lg font-semibold text-white">Google Search Console</h3>
-                          <p className="text-sm text-neutral-600 dark:text-neutral-400 mt-1">
-                            See which search queries bring visitors to your site, with impressions, clicks, CTR, and ranking position.
-                          </p>
-                        </div>
-                      </div>
-                      <div className="flex items-start gap-2 p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
-                        <svg className="w-4 h-4 text-neutral-400 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
-                          <path strokeLinecap="round" strokeLinejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
-                        </svg>
-                        <p className="text-xs text-neutral-400">
-                          Pulse only requests read-only access. Your tokens are encrypted at rest and all data can be fully removed at any time.
-                        </p>
-                      </div>
-                      {canEdit && (
-                        <button
-                          onClick={async () => {
-                            setGscConnecting(true)
-                            try {
-                              const { auth_url } = await getGSCAuthURL(siteId)
-                              window.location.href = auth_url
-                            } catch (error: unknown) {
-                              toast.error(getAuthErrorMessage(error) || 'Failed to start Google authorization')
-                              setGscConnecting(false)
-                            }
-                          }}
-                          disabled={gscConnecting}
-                          className="inline-flex items-center gap-2 px-4 py-2.5 bg-brand-orange text-white text-sm font-medium rounded-xl hover:bg-brand-orange/90 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 disabled:opacity-50"
-                        >
-                          {gscConnecting && <SpinnerGap className="w-4 h-4 animate-spin" />}
-                          Connect Google Search Console
-                        </button>
-                      )}
-                    </div>
-                  ) : (
-                    <div className="space-y-4">
-                      <div className="flex items-start justify-between gap-4">
-                        <div className="flex items-start gap-4">
-                          <div className="p-2.5 bg-white dark:bg-neutral-800 rounded-lg border border-neutral-200 dark:border-neutral-700 flex-shrink-0">
-                            <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none">
-                              <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1Z" fill="#4285F4"/>
-                              <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23Z" fill="#34A853"/>
-                              <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62Z" fill="#FBBC05"/>
-                              <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53Z" fill="#EA4335"/>
-                            </svg>
-                          </div>
-                          <div>
-                            <h3 className="text-lg font-semibold text-white">Google Search Console</h3>
-                            <div className="flex items-center gap-2 mt-1.5">
-                              <span className={`inline-flex items-center gap-1.5 text-xs font-medium ${
-                                gscStatus.status === 'active'
-                                  ? 'text-green-600 dark:text-green-400'
-                                  : gscStatus.status === 'syncing'
-                                  ? 'text-amber-600 dark:text-amber-400'
-                                  : 'text-red-600 dark:text-red-400'
-                              }`}>
-                                <span className={`w-2 h-2 rounded-full ${
-                                  gscStatus.status === 'active'
-                                    ? 'bg-green-500'
-                                    : gscStatus.status === 'syncing'
-                                    ? 'bg-amber-500 animate-pulse'
-                                    : 'bg-red-500'
-                                }`} />
-                                {gscStatus.status === 'active' ? 'Connected' : gscStatus.status === 'syncing' ? 'Syncing...' : 'Error'}
-                              </span>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-
-                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                        {gscStatus.google_email && (
-                          <div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
-                            <p className="text-xs text-neutral-400">Google Account</p>
-                            <p className="text-sm font-medium text-white mt-0.5 truncate">{gscStatus.google_email}</p>
-                          </div>
-                        )}
-                        {gscStatus.gsc_property && (
-                          <div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
-                            <p className="text-xs text-neutral-400">Property</p>
-                            <p className="text-sm font-medium text-white mt-0.5 truncate">{gscStatus.gsc_property}</p>
-                          </div>
-                        )}
-                        {gscStatus.last_synced_at && (
-                          <div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
-                            <p className="text-xs text-neutral-400">Last Synced</p>
-                            <p className="text-sm font-medium text-white mt-0.5">
-                              {new Date(gscStatus.last_synced_at).toLocaleString('en-GB')}
-                            </p>
-                          </div>
-                        )}
-                        {gscStatus.created_at && (
-                          <div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
-                            <p className="text-xs text-neutral-400">Connected Since</p>
-                            <p className="text-sm font-medium text-white mt-0.5">
-                              {new Date(gscStatus.created_at).toLocaleString('en-GB')}
-                            </p>
-                          </div>
-                        )}
-                      </div>
-
-                      {gscStatus.status === 'error' && gscStatus.error_message && (
-                        <div className="p-3 bg-red-50 dark:bg-red-900/10 rounded-lg border border-red-200 dark:border-red-900/30">
-                          <p className="text-sm text-red-700 dark:text-red-300">{gscStatus.error_message}</p>
-                        </div>
-                      )}
-
-                      {canEdit && (
-                        <div className="pt-2 border-t border-neutral-200 dark:border-neutral-700">
-                          <button
-                            onClick={async () => {
-                              if (!confirm('Disconnect Google Search Console? All search data will be removed from Pulse.')) return
-                              setGscDisconnecting(true)
-                              try {
-                                await disconnectGSC(siteId)
-                                mutateGSCStatus()
-                                toast.success('Google Search Console disconnected')
-                              } catch (error: unknown) {
-                                toast.error(getAuthErrorMessage(error) || 'Failed to disconnect')
-                              } finally {
-                                setGscDisconnecting(false)
-                              }
-                            }}
-                            disabled={gscDisconnecting}
-                            className="inline-flex items-center gap-2 text-sm font-medium text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 transition-colors disabled:opacity-50"
-                          >
-                            {gscDisconnecting && <SpinnerGap className="w-4 h-4 animate-spin" />}
-                            Disconnect
-                          </button>
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </div>
-
-                {/* BunnyCDN */}
-                <div className="rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 p-6">
-                  {!bunnyStatus?.connected ? (
-                    <div className="space-y-4">
-                      <div className="flex items-start gap-4">
-                        <div className="p-2.5 bg-white dark:bg-neutral-800 rounded-lg border border-neutral-200 dark:border-neutral-700 flex-shrink-0">
-                          <svg className="w-6 h-6" viewBox="0 0 23 26" fill="none">
-                            <path fillRule="evenodd" clipRule="evenodd" d="M9.94 7.77l5.106.883c-3.83-.663-4.065-3.85-9.218-6.653-.562 1.859.603 5.21 4.112 5.77z" fill="url(#b1)"/>
-                            <path fillRule="evenodd" clipRule="evenodd" d="M5.828 2c5.153 2.803 5.388 5.99 9.218 6.653 1.922.332.186 3.612-1.864 3.266 3.684 1.252 7.044-2.085 5.122-3.132L5.828 2z" fill="url(#b2)"/>
-                            <path fillRule="evenodd" clipRule="evenodd" d="M13.186 11.92c-.241-.041-.486-.131-.731-.284-1.542-.959-3.093-1.269-4.496-1.118 2.93.359 5.716 4.196 5.37 7.036.06.97-.281 1.958-1.021 2.699l-1.69 1.69c1.303.858 3.284-.037 3.889-1.281l3.41-7.014c.836-.198 6.176-1.583 3.767-3.024l-3.37-1.833c1.907 1.05-1.449 4.378-5.125 3.129z" fill="url(#b3)"/>
-                            <path fillRule="evenodd" clipRule="evenodd" d="M7.953 10.518c-4.585.499-7.589 5.94-3.506 9.873l3.42 3.42c-2.243-2.243-2.458-5.525-1.073-7.806.149-.255.333-.495.551-.713 1.37-1.37 3.59-1.37 4.96 0 .629.628.969 1.436 1.02 2.26.346-2.84-2.439-6.675-5.367-7.035h-.005z" fill="url(#b4)"/>
-                            <path fillRule="evenodd" clipRule="evenodd" d="M7.868 23.812l1.925 1.925c.643-.511 1.028-2.01.031-3.006l-2.48-2.48c-1.151-1.151-1.334-2.903-.55-4.246-1.385 2.281-1.17 5.563 1.074 7.807z" fill="url(#b5)"/>
-                            <path fillRule="evenodd" clipRule="evenodd" d="M12.504 4.54l5.739 3.122L12.925.6c-.728.829-1.08 2.472-.421 3.94z" fill="url(#b6)"/>
-                            <circle cx="9.825" cy="17.772" r="1.306" fill="url(#b7)"/>
-                            <circle cx="1.507" cy="11.458" r="1.306" fill="url(#b8)"/>
-                            <defs>
-                              <linearGradient id="b1" x1="5.69" y1="8.5" x2="15.04" y2="8.5" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset=".69" stopColor="#FF7300"/><stop offset="1" stopColor="#F52900"/></linearGradient>
-                              <linearGradient id="b2" x1="5.83" y1="12.65" x2="18.87" y2="12.65" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset=".69" stopColor="#FF7300"/><stop offset="1" stopColor="#F52900"/></linearGradient>
-                              <linearGradient id="b3" x1="7.95" y1="22.04" x2="22.3" y2="22.04" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset="1" stopColor="#FF6200"/></linearGradient>
-                              <linearGradient id="b4" x1="2.51" y1="22.59" x2="13.35" y2="22.59" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset=".69" stopColor="#FF7300"/><stop offset="1" stopColor="#F52900"/></linearGradient>
-                              <linearGradient id="b5" x1="11.35" y1="20.74" x2="7.98" y2="17.71" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset=".69" stopColor="#FF7300"/><stop offset="1" stopColor="#F52900"/></linearGradient>
-                              <linearGradient id="b6" x1="12.16" y1="7.48" x2="18.24" y2="7.48" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset="1" stopColor="#FF6200"/></linearGradient>
-                              <linearGradient id="b7" x1="8.52" y1="19.08" x2="11.13" y2="19.08" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset="1" stopColor="#FF6200"/></linearGradient>
-                              <linearGradient id="b8" x1=".2" y1="12.76" x2="2.81" y2="12.76" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset="1" stopColor="#FF6200"/></linearGradient>
-                            </defs>
-                          </svg>
-                        </div>
-                        <div>
-                          <h3 className="text-lg font-semibold text-white">BunnyCDN</h3>
-                          <p className="text-sm text-neutral-600 dark:text-neutral-400 mt-1">
-                            Monitor CDN performance with bandwidth usage, cache hit rates, response times, and geographic distribution.
-                          </p>
-                        </div>
-                      </div>
-                      <div className="flex items-start gap-2 p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
-                        <svg className="w-4 h-4 text-neutral-400 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
-                          <path strokeLinecap="round" strokeLinejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
-                        </svg>
-                        <p className="text-xs text-neutral-400">
-                          Your API key is encrypted at rest and only used to fetch read-only statistics. You can disconnect at any time.
-                        </p>
-                      </div>
-                      {canEdit && (
-                        <div className="space-y-3">
-                          <div className="flex gap-2">
-                            <input
-                              type="password"
-                              value={bunnyApiKey}
-                              onChange={(e) => {
-                                setBunnyApiKey(e.target.value)
-                                setBunnyPullZones([])
-                                setBunnySelectedZone(null)
-                              }}
-                              placeholder="BunnyCDN API key"
-                              className="flex-1 px-4 py-2.5 border border-neutral-200 dark:border-neutral-800 rounded-xl bg-white dark:bg-neutral-900 text-white text-sm placeholder:text-neutral-400"
-                            />
-                            <button
-                              onClick={async () => {
-                                if (!bunnyApiKey.trim()) {
-                                  toast.error('Please enter your BunnyCDN API key')
-                                  return
-                                }
-                                setBunnyLoadingZones(true)
-                                setBunnyPullZones([])
-                                setBunnySelectedZone(null)
-                                try {
-                                  const { pull_zones, message } = await getBunnyPullZones(siteId, bunnyApiKey)
-                                  if (pull_zones.length === 0) {
-                                    toast.error(message || 'No pull zones match this site\'s domain')
-                                  } else {
-                                    setBunnyPullZones(pull_zones)
-                                    setBunnySelectedZone(pull_zones[0])
-                                  }
-                                } catch (error: unknown) {
-                                  toast.error(getAuthErrorMessage(error) || 'Failed to load pull zones')
-                                } finally {
-                                  setBunnyLoadingZones(false)
-                                }
-                              }}
-                              disabled={bunnyLoadingZones || !bunnyApiKey.trim()}
-                              className="inline-flex items-center gap-2 px-4 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 text-sm font-medium rounded-xl hover:bg-neutral-800 dark:hover:bg-neutral-100 transition-colors disabled:opacity-50"
-                            >
-                              {bunnyLoadingZones && <SpinnerGap className="w-4 h-4 animate-spin" />}
-                              Load Zones
-                            </button>
-                          </div>
-
-                          {bunnyPullZones.length > 0 && (
-                            <div className="space-y-3">
-                              <div>
-                                <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Pull Zone</label>
-                                <select
-                                  value={bunnySelectedZone?.id ?? ''}
-                                  onChange={(e) => {
-                                    const zone = bunnyPullZones.find(z => z.id === Number(e.target.value))
-                                    setBunnySelectedZone(zone || null)
-                                  }}
-                                  className="w-full px-4 py-2.5 border border-neutral-200 dark:border-neutral-800 rounded-xl bg-white dark:bg-neutral-900 text-white text-sm"
-                                >
-                                  {bunnyPullZones.map((zone) => (
-                                    <option key={zone.id} value={zone.id}>{zone.name}</option>
-                                  ))}
-                                </select>
-                              </div>
-                              <button
-                                onClick={async () => {
-                                  if (!bunnySelectedZone) return
-                                  setBunnyConnecting(true)
-                                  try {
-                                    await connectBunny(siteId, bunnyApiKey, bunnySelectedZone.id, bunnySelectedZone.name)
-                                    mutateBunnyStatus()
-                                    setBunnyApiKey('')
-                                    setBunnyPullZones([])
-                                    setBunnySelectedZone(null)
-                                    toast.success('BunnyCDN connected successfully')
-                                  } catch (error: unknown) {
-                                    toast.error(getAuthErrorMessage(error) || 'Failed to connect BunnyCDN')
-                                  } finally {
-                                    setBunnyConnecting(false)
-                                  }
-                                }}
-                                disabled={bunnyConnecting || !bunnySelectedZone}
-                                className="inline-flex items-center gap-2 px-4 py-2.5 bg-brand-orange text-white text-sm font-medium rounded-xl hover:bg-brand-orange/90 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 disabled:opacity-50"
-                              >
-                                {bunnyConnecting && <SpinnerGap className="w-4 h-4 animate-spin" />}
-                                Connect BunnyCDN
-                              </button>
-                            </div>
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  ) : (
-                    <div className="space-y-4">
-                      <div className="flex items-start justify-between gap-4">
-                        <div className="flex items-start gap-4">
-                          <div className="p-2.5 bg-white dark:bg-neutral-800 rounded-lg border border-neutral-200 dark:border-neutral-700 flex-shrink-0">
-                            <svg className="w-6 h-6" viewBox="0 0 23 26" fill="none">
-                              <path fillRule="evenodd" clipRule="evenodd" d="M9.94 7.77l5.106.883c-3.83-.663-4.065-3.85-9.218-6.653-.562 1.859.603 5.21 4.112 5.77z" fill="url(#b1c)"/>
-                              <path fillRule="evenodd" clipRule="evenodd" d="M5.828 2c5.153 2.803 5.388 5.99 9.218 6.653 1.922.332.186 3.612-1.864 3.266 3.684 1.252 7.044-2.085 5.122-3.132L5.828 2z" fill="url(#b2c)"/>
-                              <path fillRule="evenodd" clipRule="evenodd" d="M13.186 11.92c-.241-.041-.486-.131-.731-.284-1.542-.959-3.093-1.269-4.496-1.118 2.93.359 5.716 4.196 5.37 7.036.06.97-.281 1.958-1.021 2.699l-1.69 1.69c1.303.858 3.284-.037 3.889-1.281l3.41-7.014c.836-.198 6.176-1.583 3.767-3.024l-3.37-1.833c1.907 1.05-1.449 4.378-5.125 3.129z" fill="url(#b3c)"/>
-                              <path fillRule="evenodd" clipRule="evenodd" d="M7.953 10.518c-4.585.499-7.589 5.94-3.506 9.873l3.42 3.42c-2.243-2.243-2.458-5.525-1.073-7.806.149-.255.333-.495.551-.713 1.37-1.37 3.59-1.37 4.96 0 .629.628.969 1.436 1.02 2.26.346-2.84-2.439-6.675-5.367-7.035h-.005z" fill="url(#b4c)"/>
-                              <path fillRule="evenodd" clipRule="evenodd" d="M7.868 23.812l1.925 1.925c.643-.511 1.028-2.01.031-3.006l-2.48-2.48c-1.151-1.151-1.334-2.903-.55-4.246-1.385 2.281-1.17 5.563 1.074 7.807z" fill="url(#b5c)"/>
-                              <path fillRule="evenodd" clipRule="evenodd" d="M12.504 4.54l5.739 3.122L12.925.6c-.728.829-1.08 2.472-.421 3.94z" fill="url(#b6c)"/>
-                              <circle cx="9.825" cy="17.772" r="1.306" fill="url(#b7c)"/>
-                              <circle cx="1.507" cy="11.458" r="1.306" fill="url(#b8c)"/>
-                              <defs>
-                                <linearGradient id="b1c" x1="5.69" y1="8.5" x2="15.04" y2="8.5" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset=".69" stopColor="#FF7300"/><stop offset="1" stopColor="#F52900"/></linearGradient>
-                                <linearGradient id="b2c" x1="5.83" y1="12.65" x2="18.87" y2="12.65" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset=".69" stopColor="#FF7300"/><stop offset="1" stopColor="#F52900"/></linearGradient>
-                                <linearGradient id="b3c" x1="7.95" y1="22.04" x2="22.3" y2="22.04" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset="1" stopColor="#FF6200"/></linearGradient>
-                                <linearGradient id="b4c" x1="2.51" y1="22.59" x2="13.35" y2="22.59" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset=".69" stopColor="#FF7300"/><stop offset="1" stopColor="#F52900"/></linearGradient>
-                                <linearGradient id="b5c" x1="11.35" y1="20.74" x2="7.98" y2="17.71" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset=".69" stopColor="#FF7300"/><stop offset="1" stopColor="#F52900"/></linearGradient>
-                                <linearGradient id="b6c" x1="12.16" y1="7.48" x2="18.24" y2="7.48" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset="1" stopColor="#FF6200"/></linearGradient>
-                                <linearGradient id="b7c" x1="8.52" y1="19.08" x2="11.13" y2="19.08" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset="1" stopColor="#FF6200"/></linearGradient>
-                                <linearGradient id="b8c" x1=".2" y1="12.76" x2="2.81" y2="12.76" gradientUnits="userSpaceOnUse"><stop stopColor="#FFA600"/><stop offset=".34" stopColor="#FF9F00"/><stop offset="1" stopColor="#FF6200"/></linearGradient>
-                              </defs>
-                            </svg>
-                          </div>
-                          <div>
-                            <h3 className="text-lg font-semibold text-white">BunnyCDN</h3>
-                            <div className="flex items-center gap-2 mt-1.5">
-                              <span className={`inline-flex items-center gap-1.5 text-xs font-medium ${
-                                bunnyStatus.status === 'active'
-                                  ? 'text-green-600 dark:text-green-400'
-                                  : bunnyStatus.status === 'syncing'
-                                  ? 'text-amber-600 dark:text-amber-400'
-                                  : 'text-red-600 dark:text-red-400'
-                              }`}>
-                                <span className={`w-2 h-2 rounded-full ${
-                                  bunnyStatus.status === 'active'
-                                    ? 'bg-green-500'
-                                    : bunnyStatus.status === 'syncing'
-                                    ? 'bg-amber-500 animate-pulse'
-                                    : 'bg-red-500'
-                                }`} />
-                                {bunnyStatus.status === 'active' ? 'Connected' : bunnyStatus.status === 'syncing' ? 'Syncing...' : 'Error'}
-                              </span>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-
-                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                        {bunnyStatus.pull_zone_name && (
-                          <div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
-                            <p className="text-xs text-neutral-400">Pull Zone</p>
-                            <p className="text-sm font-medium text-white mt-0.5 truncate">{bunnyStatus.pull_zone_name}</p>
-                          </div>
-                        )}
-                        {bunnyStatus.last_synced_at && (
-                          <div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
-                            <p className="text-xs text-neutral-400">Last Synced</p>
-                            <p className="text-sm font-medium text-white mt-0.5">
-                              {new Date(bunnyStatus.last_synced_at).toLocaleString('en-GB')}
-                            </p>
-                          </div>
-                        )}
-                        {bunnyStatus.created_at && (
-                          <div className="p-3 bg-white dark:bg-neutral-800/50 rounded-lg border border-neutral-200 dark:border-neutral-700">
-                            <p className="text-xs text-neutral-400">Connected Since</p>
-                            <p className="text-sm font-medium text-white mt-0.5">
-                              {new Date(bunnyStatus.created_at).toLocaleString('en-GB')}
-                            </p>
-                          </div>
-                        )}
-                      </div>
-
-                      {bunnyStatus.status === 'error' && bunnyStatus.error_message && (
-                        <div className="p-3 bg-red-50 dark:bg-red-900/10 rounded-lg border border-red-200 dark:border-red-900/30">
-                          <p className="text-sm text-red-700 dark:text-red-300">{bunnyStatus.error_message}</p>
-                        </div>
-                      )}
-
-                      {canEdit && (
-                        <div className="pt-2 border-t border-neutral-200 dark:border-neutral-700">
-                          <button
-                            onClick={async () => {
-                              if (!confirm('Disconnect BunnyCDN? All CDN analytics data will be removed from Pulse.')) return
-                              setBunnyDisconnecting(true)
-                              try {
-                                await disconnectBunny(siteId)
-                                mutateBunnyStatus()
-                                toast.success('BunnyCDN disconnected')
-                              } catch (error: unknown) {
-                                toast.error(getAuthErrorMessage(error) || 'Failed to disconnect')
-                              } finally {
-                                setBunnyDisconnecting(false)
-                              }
-                            }}
-                            disabled={bunnyDisconnecting}
-                            className="inline-flex items-center gap-2 text-sm font-medium text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 transition-colors disabled:opacity-50"
-                          >
-                            {bunnyDisconnecting && <SpinnerGap className="w-4 h-4 animate-spin" />}
-                            Disconnect
-                          </button>
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-          </motion.div>
-        </div>
-      </div>
-    </div>
-
-      <Modal
-        isOpen={goalModalOpen}
-        onClose={() => setGoalModalOpen(false)}
-        title={editingGoal ? 'Edit goal' : 'Add goal'}
-      >
-        <form onSubmit={handleGoalSubmit} className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Display name</label>
-            <input
-              type="text"
-              value={goalForm.name}
-              onChange={(e) => setGoalForm({ ...goalForm, name: e.target.value })}
-              placeholder="e.g. Signups"
-              autoFocus
-              className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-white"
-              required
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Event name</label>
-            <input
-              type="text"
-              value={goalForm.event_name}
-              onChange={(e) => setGoalForm({ ...goalForm, event_name: e.target.value })}
-              placeholder="e.g. signup_click (letters, numbers, underscores only)"
-              maxLength={64}
-              className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-white"
-              required
-            />
-            <div className="flex justify-between mt-1">
-              <p className="text-xs text-neutral-400">Letters, numbers, and underscores only. Spaces become underscores.</p>
-              <span className={`text-xs tabular-nums ${goalForm.event_name.length > 56 ? 'text-amber-500' : 'text-neutral-400'}`}>{goalForm.event_name.length}/64</span>
-            </div>
-            {editingGoal && goalForm.event_name.trim().toLowerCase().replace(/\s+/g, '_') !== editingGoal.event_name && (
-              <p className="mt-2 text-xs text-amber-600 dark:text-amber-400">Changing event name does not reassign events already tracked under the previous name.</p>
-            )}
-          </div>
-          <div className="flex justify-end gap-2 pt-2">
-            <Button type="button" variant="secondary" onClick={() => setGoalModalOpen(false)}>
-              Cancel
-            </Button>
-            <Button type="submit" variant="primary" disabled={goalSaving}>
-              {goalSaving ? 'Saving…' : editingGoal ? 'Update' : 'Create'}
-            </Button>
-          </div>
-        </form>
-      </Modal>
-
-      <Modal
-        isOpen={reportModalOpen}
-        onClose={() => setReportModalOpen(false)}
-        title={editingSchedule ? 'Edit report schedule' : 'Add report schedule'}
-      >
-        <form onSubmit={handleReportSubmit} className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Channel</label>
-            <div className="grid grid-cols-2 gap-2">
-              {(['email', 'slack', 'discord', 'webhook'] as const).map((ch) => (
-                <button
-                  key={ch}
-                  type="button"
-                  onClick={() => setReportForm({ ...reportForm, channel: ch })}
-                  className={`flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-colors ${
-                    reportForm.channel === ch
-                      ? 'border-brand-orange bg-brand-orange/10 text-brand-orange'
-                      : 'border-neutral-200 dark:border-neutral-700 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-50 dark:hover:bg-neutral-800'
-                  }`}
-                >
-                  {CHANNEL_ICONS[ch]}
-                  {getChannelLabel(ch)}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          {reportForm.channel === 'email' ? (
-            <div>
-              <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Recipients</label>
-              <input
-                type="text"
-                value={reportForm.recipients}
-                onChange={(e) => setReportForm({ ...reportForm, recipients: e.target.value })}
-                placeholder="email1@example.com, email2@example.com"
-                className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-white"
-                required
-              />
-              <p className="text-xs text-neutral-400 mt-1">Comma-separated email addresses.</p>
-            </div>
-          ) : (
-            <div>
-              <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
-                {reportForm.channel === 'slack' ? 'Slack Webhook URL' : reportForm.channel === 'discord' ? 'Discord Webhook URL' : 'Webhook URL'}
-              </label>
-              <input
-                type="url"
-                value={reportForm.webhookUrl}
-                onChange={(e) => setReportForm({ ...reportForm, webhookUrl: e.target.value })}
-                placeholder="https://hooks.example.com/..."
-                className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-white"
-                required
-              />
-            </div>
-          )}
-
-          <div>
-            <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Frequency</label>
-            <Select
-              value={reportForm.frequency}
-              onChange={(v) => setReportForm({ ...reportForm, frequency: v })}
-              options={[
-                { value: 'daily', label: 'Daily' },
-                { value: 'weekly', label: 'Weekly' },
-                { value: 'monthly', label: 'Monthly' },
-              ]}
-              variant="input"
-              fullWidth
-              align="left"
-            />
-          </div>
-
-          {reportForm.frequency === 'weekly' && (
-            <div>
-              <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Day of week</label>
-              <Select
-                value={String(reportForm.sendDay)}
-                onChange={(v) => setReportForm({ ...reportForm, sendDay: parseInt(v) })}
-                options={WEEKDAY_NAMES.map((name, i) => ({ value: String(i), label: name }))}
-                variant="input"
-                fullWidth
-                align="left"
-              />
-            </div>
-          )}
-
-          {reportForm.frequency === 'monthly' && (
-            <div>
-              <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Day of month</label>
-              <Select
-                value={String(reportForm.sendDay)}
-                onChange={(v) => setReportForm({ ...reportForm, sendDay: parseInt(v) })}
-                options={Array.from({ length: 28 }, (_, i) => {
-                  const d = i + 1
-                  const suffix = d === 1 ? 'st' : d === 2 ? 'nd' : d === 3 ? 'rd' : 'th'
-                  return { value: String(d), label: `${d}${suffix}` }
-                })}
-                variant="input"
-                fullWidth
-                align="left"
-              />
-            </div>
-          )}
-
-          <div>
-            <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Time</label>
-            <Select
-              value={String(reportForm.sendHour)}
-              onChange={(v) => setReportForm({ ...reportForm, sendHour: parseInt(v) })}
-              options={Array.from({ length: 24 }, (_, i) => ({
-                value: String(i),
-                label: formatHour(i),
-              }))}
-              variant="input"
-              fullWidth
-              align="left"
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Timezone</label>
-            <Select
-              value={reportForm.timezone || 'UTC'}
-              onChange={(v) => setReportForm({ ...reportForm, timezone: v })}
-              options={TIMEZONES.map((tz) => ({ value: tz, label: tz }))}
-              variant="input"
-              fullWidth
-              align="left"
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Report Type</label>
-            <Select
-              value={reportForm.reportType}
-              onChange={(v) => setReportForm({ ...reportForm, reportType: v })}
-              options={[
-                { value: 'summary', label: 'Summary' },
-                { value: 'pages', label: 'Pages' },
-                { value: 'sources', label: 'Sources' },
-                { value: 'goals', label: 'Goals' },
-              ]}
-              variant="input"
-              fullWidth
-              align="left"
-            />
-          </div>
-
-          <div className="flex justify-end gap-2 pt-2">
-            <Button type="button" variant="secondary" onClick={() => setReportModalOpen(false)}>
-              Cancel
-            </Button>
-            <Button type="submit" variant="primary" disabled={reportSaving}>
-              {reportSaving ? 'Saving...' : editingSchedule ? 'Update' : 'Create'}
-            </Button>
-          </div>
-        </form>
-      </Modal>
-
-      <Modal
-        isOpen={alertModalOpen}
-        onClose={() => setAlertModalOpen(false)}
-        title={editingAlert ? 'Edit alert channel' : 'Add alert channel'}
-      >
-        <form onSubmit={handleAlertSubmit} className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Channel</label>
-            <div className="grid grid-cols-2 gap-2">
-              {(['email', 'slack', 'discord', 'webhook'] as const).map((ch) => (
-                <button
-                  key={ch}
-                  type="button"
-                  onClick={() => setAlertForm({ ...alertForm, channel: ch })}
-                  className={`flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-colors ${
-                    alertForm.channel === ch
-                      ? 'border-brand-orange bg-brand-orange/10 text-brand-orange'
-                      : 'border-neutral-200 dark:border-neutral-700 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-50 dark:hover:bg-neutral-800'
-                  }`}
-                >
-                  {CHANNEL_ICONS[ch]}
-                  {getChannelLabel(ch)}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          {alertForm.channel === 'email' ? (
-            <div>
-              <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Recipients</label>
-              <input
-                type="text"
-                value={alertForm.recipients}
-                onChange={(e) => setAlertForm({ ...alertForm, recipients: e.target.value })}
-                placeholder="email1@example.com, email2@example.com"
-                className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-white"
-                required
-              />
-              <p className="text-xs text-neutral-400 mt-1">Comma-separated email addresses.</p>
-            </div>
-          ) : (
-            <div>
-              <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
-                {alertForm.channel === 'slack' ? 'Slack Webhook URL' : alertForm.channel === 'discord' ? 'Discord Webhook URL' : 'Webhook URL'}
-              </label>
-              <input
-                type="url"
-                value={alertForm.webhookUrl}
-                onChange={(e) => setAlertForm({ ...alertForm, webhookUrl: e.target.value })}
-                placeholder="https://hooks.example.com/..."
-                className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-white"
-                required
-              />
-            </div>
-          )}
-
-          <div className="p-3 rounded-lg bg-neutral-50 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-700">
-            <p className="text-xs text-neutral-400">
-              Alerts are sent automatically when your site goes down or recovers. No schedule configuration needed.
-            </p>
-          </div>
-
-          <div className="flex justify-end gap-2 pt-2">
-            <Button type="button" variant="secondary" onClick={() => setAlertModalOpen(false)}>
-              Cancel
-            </Button>
-            <Button type="submit" variant="primary" disabled={alertSaving}>
-              {alertSaving ? 'Saving...' : editingAlert ? 'Update' : 'Create'}
-            </Button>
-          </div>
-        </form>
-      </Modal>
-
-      <VerificationModal
-        isOpen={showVerificationModal}
-        onClose={() => setShowVerificationModal(false)}
-        site={site}
-        onVerified={() => mutateSite()}
-      />
-
-      <DeleteSiteModal
-        open={showDeleteModal}
-        onClose={() => setShowDeleteModal(false)}
-        onDeleted={() => router.push('/')}
-        siteName={site?.name || ''}
-        siteDomain={site?.domain || ''}
-        siteId={siteId}
-      />
+    <div className="flex items-center justify-center py-24">
+      <Spinner className="w-6 h-6 text-neutral-500" />
     </div>
   )
 }
diff --git a/components/settings/OrganizationSettings.tsx b/components/settings/OrganizationSettings.tsx
deleted file mode 100644
index 708931e..0000000
--- a/components/settings/OrganizationSettings.tsx
+++ /dev/null
@@ -1,1577 +0,0 @@
-'use client'
-
-import { useState, useEffect, useCallback, useRef } from 'react'
-import { createPortal } from 'react-dom'
-import { useRouter, useSearchParams } from 'next/navigation'
-import { setSessionAction } from '@/app/actions/auth'
-import { logger } from '@/lib/utils/logger'
-import { useAuth } from '@/lib/auth/context'
-import { 
-  deleteOrganization, 
-  switchContext, 
-  getOrganizationMembers, 
-  getInvitations, 
-  sendInvitation, 
-  revokeInvitation,
-  updateOrganization,
-  getOrganization,
-  OrganizationMember,
-  OrganizationInvitation,
-  Organization
-} from '@/lib/api/organization'
-import { getSubscription, createPortalSession, getOrders, cancelSubscription, resumeSubscription, changePlan, createCheckoutSession, SubscriptionDetails, Order } from '@/lib/api/billing'
-import { TRAFFIC_TIERS, PLAN_ID_SOLO, PLAN_ID_TEAM, PLAN_ID_BUSINESS, getTierIndexForLimit, getLimitForTierIndex, getSitesLimitForPlan } from '@/lib/plans'
-import { getAuditLog, AuditLogEntry, GetAuditLogParams } from '@/lib/api/audit'
-import { getNotificationSettings, updateNotificationSettings } from '@/lib/api/notification-settings'
-import { toast } from '@ciphera-net/ui'
-import { getAuthErrorMessage } from '@ciphera-net/ui'
-import { formatDate, formatDateTime, formatDateLong } from '@/lib/utils/formatDate'
-import { motion, AnimatePresence } from 'framer-motion'
-import {
-  AlertTriangleIcon,
-  PlusIcon,
-  BoxIcon,
-  UserIcon,
-  CheckIcon,
-  XIcon,
-  Captcha,
-  BookOpenIcon,
-  ExternalLinkIcon,
-  LayoutDashboardIcon,
-  Spinner,
-} from '@ciphera-net/ui'
-import { MembersListSkeleton, InvoicesListSkeleton, AuditLogSkeleton, SettingsFormSkeleton, SkeletonCard } from '@/components/skeletons'
-
-// * Bell icon for notifications tab
-function BellIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className} xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
-      <path d="M13.73 21a2 2 0 0 1-3.46 0" />
-    </svg>
-  )
-}
-import { Button, Input } from '@ciphera-net/ui'
-
-export default function OrganizationSettings() {
-  const { user } = useAuth()
-  const router = useRouter()
-  const searchParams = useSearchParams()
-  // Initialize from URL, default to 'general'
-  const [activeTab, setActiveTab] = useState<'general' | 'members' | 'billing' | 'notifications' | 'audit'>(() => {
-    const tab = searchParams.get('tab')
-    return (tab === 'billing' || tab === 'members' || tab === 'notifications' || tab === 'audit') ? tab : 'general'
-  })
-
-  // Sync URL with state without triggering navigation/reload
-  const handleTabChange = (tab: 'general' | 'members' | 'billing' | 'notifications' | 'audit') => {
-    setActiveTab(tab)
-    const url = new URL(window.location.href)
-    url.searchParams.set('tab', tab)
-    window.history.replaceState({}, '', url)
-  }
-
-  const [showDeletePrompt, setShowDeletePrompt] = useState(false)
-  const [deleteConfirm, setDeleteConfirm] = useState('')
-  const [isDeleting, setIsDeleting] = useState(false)
-  const [isLoadingDeleteData, setIsLoadingDeleteData] = useState(false)
-
-  // Members State
-  const [members, setMembers] = useState<OrganizationMember[]>([])
-  const [invitations, setInvitations] = useState<OrganizationInvitation[]>([])
-  const [isLoadingMembers, setIsLoadingMembers] = useState(true)
-  
-  // Billing State
-  const [subscription, setSubscription] = useState<SubscriptionDetails | null>(null)
-  const [isLoadingSubscription, setIsLoadingSubscription] = useState(false)
-  const [isRedirectingToPortal, setIsRedirectingToPortal] = useState(false)
-  const [cancelLoadingAction, setCancelLoadingAction] = useState<'period_end' | 'immediate' | null>(null)
-  const [showCancelPrompt, setShowCancelPrompt] = useState(false)
-  const [isResuming, setIsResuming] = useState(false)
-  const [showChangePlanModal, setShowChangePlanModal] = useState(false)
-  const [changePlanId, setChangePlanId] = useState<string>(PLAN_ID_SOLO)
-  const [changePlanTierIndex, setChangePlanTierIndex] = useState(2)
-  const [changePlanYearly, setChangePlanYearly] = useState(false)
-  const [isChangingPlan, setIsChangingPlan] = useState(false)
-  const [orders, setOrders] = useState<Order[]>([])
-  const [isLoadingInvoices, setIsLoadingInvoices] = useState(false)
-
-  // Invite State
-  const [inviteEmail, setInviteEmail] = useState('')
-  const [inviteRole, setInviteRole] = useState('member')
-  const [isInviting, setIsInviting] = useState(false)
-  
-  // Captcha State
-  const [captchaId, setCaptchaId] = useState('')
-  const [captchaSolution, setCaptchaSolution] = useState('')
-  const [captchaToken, setCaptchaToken] = useState('')
-
-  // Org Update State
-  const [orgDetails, setOrgDetails] = useState<Organization | null>(null)
-  const [isEditing, setIsEditing] = useState(false)
-  const [orgName, setOrgName] = useState('')
-  const [orgSlug, setOrgSlug] = useState('')
-  const [isSaving, setIsSaving] = useState(false)
-
-  // Audit log State
-  const [auditEntries, setAuditEntries] = useState<AuditLogEntry[]>([])
-  const [auditTotal, setAuditTotal] = useState(0)
-  const [isLoadingAudit, setIsLoadingAudit] = useState(false)
-  const [auditPage, setAuditPage] = useState(0)
-  const [auditFetchTrigger, setAuditFetchTrigger] = useState(0)
-  const auditPageSize = 20
-  const [auditActionFilter, setAuditActionFilter] = useState('')
-  const [auditLogIdFilter, setAuditLogIdFilter] = useState('')
-  const [auditStartDate, setAuditStartDate] = useState('')
-  const [auditEndDate, setAuditEndDate] = useState('')
-
-  // Notification settings state
-  const [notificationSettings, setNotificationSettings] = useState<Record<string, boolean>>({})
-  const [notificationCategories, setNotificationCategories] = useState<{ id: string; label: string; description: string }[]>([])
-  const [isLoadingNotificationSettings, setIsLoadingNotificationSettings] = useState(false)
-  const [isSavingNotificationSettings, setIsSavingNotificationSettings] = useState(false)
-
-  // Refs for filters to keep loadAudit stable and avoid rapid re-renders
-  const filtersRef = useRef({
-    action: auditActionFilter,
-    logId: auditLogIdFilter,
-    startDate: auditStartDate,
-    endDate: auditEndDate
-  })
-
-  // Update refs when state changes (no useEffect needed)
-  filtersRef.current = {
-    action: auditActionFilter,
-    logId: auditLogIdFilter,
-    startDate: auditStartDate,
-    endDate: auditEndDate
-  }
-
-  const getOrgIdFromToken = () => {
-    return user?.org_id || null
-  }
-
-  const currentOrgId = getOrgIdFromToken()
-
-  const loadMembers = useCallback(async () => {
-    if (!currentOrgId) {
-      setIsLoadingMembers(false)
-      return
-    }
-    setIsLoadingMembers(true)
-    try {
-      const [membersData, invitesData, orgData] = await Promise.all([
-        getOrganizationMembers(currentOrgId),
-        getInvitations(currentOrgId),
-        getOrganization(currentOrgId)
-      ])
-      setMembers(membersData)
-      setInvitations(invitesData)
-      setOrgDetails(orgData)
-      setOrgName(orgData.name)
-      setOrgSlug(orgData.slug)
-    } catch (error) {
-      logger.error('Failed to load data:', error)
-      // toast.error('Failed to load members')
-    } finally {
-      setIsLoadingMembers(false)
-    }
-  }, [currentOrgId])
-
-  const loadSubscription = useCallback(async () => {
-    if (!currentOrgId) return
-    setIsLoadingSubscription(true)
-    try {
-      const sub = await getSubscription()
-      setSubscription(sub)
-    } catch (error) {
-      logger.error('Failed to load subscription:', error)
-      // toast.error('Failed to load subscription details')
-    } finally {
-      setIsLoadingSubscription(false)
-    }
-  }, [currentOrgId])
-
-  const loadOrders = useCallback(async () => {
-    if (!currentOrgId) return
-    setIsLoadingInvoices(true)
-    try {
-      const ords = await getOrders()
-      setOrders(ords)
-    } catch (error) {
-      logger.error('Failed to load orders:', error)
-    } finally {
-      setIsLoadingInvoices(false)
-    }
-  }, [currentOrgId])
-
-  useEffect(() => {
-    if (currentOrgId) {
-      loadMembers()
-    } else {
-      setIsLoadingMembers(false)
-    }
-  }, [currentOrgId, loadMembers])
-
-  // Removed useEffect that syncs searchParams to activeTab to prevent flickering
-  // The initial state is already set from searchParams, and handleTabChange updates the URL manually
-  /* 
-  useEffect(() => {
-    const tab = searchParams.get('tab')
-    const validTab = (tab === 'billing' || tab === 'members' || tab === 'audit') ? tab : 'general'
-    if (validTab !== activeTab) {
-      setActiveTab(validTab)
-    }
-  }, [searchParams, activeTab])
-  */
-
-  useEffect(() => {
-    if (activeTab === 'billing' && currentOrgId) {
-      loadSubscription()
-      loadOrders()
-    }
-  }, [activeTab, currentOrgId, loadSubscription, loadOrders])
-
-  const loadAudit = useCallback(async () => {
-    if (!currentOrgId) return
-    setIsLoadingAudit(true)
-    try {
-      const params: GetAuditLogParams = {
-        limit: auditPageSize,
-        offset: auditPage * auditPageSize,
-      }
-      if (filtersRef.current.action) params.action = filtersRef.current.action
-      if (filtersRef.current.logId) params.log_id = filtersRef.current.logId
-      if (filtersRef.current.startDate) params.start_date = filtersRef.current.startDate
-      if (filtersRef.current.endDate) params.end_date = filtersRef.current.endDate
-      const { entries, total } = await getAuditLog(params)
-      setAuditEntries(Array.isArray(entries) ? entries : [])
-      setAuditTotal(typeof total === 'number' ? total : 0)
-    } catch (error) {
-      logger.error('Failed to load audit log', error)
-      toast.error(getAuthErrorMessage(error as Error) || 'Failed to load audit log entries')
-    } finally {
-      setIsLoadingAudit(false)
-    }
-  }, [currentOrgId, auditPage])
-
-  // Debounced filter change handler
-  useEffect(() => {
-    if (activeTab !== 'audit') return
-    
-    const timer = setTimeout(() => {
-        setAuditPage(0) // Reset page on filter change
-        setAuditFetchTrigger(prev => prev + 1) // Trigger fetch
-    }, 500)
-    return () => clearTimeout(timer)
-  }, [auditActionFilter, auditLogIdFilter, auditStartDate, auditEndDate])
-
-  useEffect(() => {
-    if (activeTab === 'audit' && currentOrgId) {
-      loadAudit()
-    }
-  }, [activeTab, currentOrgId, loadAudit, auditFetchTrigger])
-
-  const loadNotificationSettings = useCallback(async () => {
-    if (!currentOrgId) return
-    setIsLoadingNotificationSettings(true)
-    try {
-      const res = await getNotificationSettings()
-      setNotificationSettings(res.settings || {})
-      setNotificationCategories(res.categories || [])
-    } catch (error) {
-      logger.error('Failed to load notification settings', error)
-      toast.error(getAuthErrorMessage(error as Error) || 'Failed to load notification settings')
-    } finally {
-      setIsLoadingNotificationSettings(false)
-    }
-  }, [currentOrgId])
-
-  useEffect(() => {
-    if (activeTab === 'notifications' && currentOrgId && user?.role !== 'member') {
-      loadNotificationSettings()
-    }
-  }, [activeTab, currentOrgId, loadNotificationSettings, user?.role])
-
-  // * Redirect members away from Notifications tab (owners/admins only)
-  useEffect(() => {
-    if (activeTab === 'notifications' && user?.role === 'member') {
-      handleTabChange('general')
-    }
-  }, [activeTab, user?.role, handleTabChange])
-
-  const hasActiveSubscription = subscription?.subscription_status === 'active' || subscription?.subscription_status === 'trialing'
-
-  useEffect(() => {
-    if (!showChangePlanModal || !hasActiveSubscription) {
-      return
-    }
-  }, [showChangePlanModal, hasActiveSubscription, changePlanId, changePlanTierIndex, changePlanYearly])
-
-  // If no org ID, we are in personal organization context, so don't show org settings
-  if (!currentOrgId) {
-    return (
-        <div className="p-6 text-center text-neutral-400">
-            <p>You are in your personal context. Switch to an Organization to manage its settings.</p>
-        </div>
-    )
-  }
-
-  const handleManageSubscription = async () => {
-    setIsRedirectingToPortal(true)
-    try {
-      const { url } = await createPortalSession()
-      window.location.href = url
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || (error instanceof Error ? error.message : '') || 'Failed to open billing portal')
-      setIsRedirectingToPortal(false)
-    }
-  }
-
-  const handleCancelSubscription = async (atPeriodEnd: boolean) => {
-    setCancelLoadingAction(atPeriodEnd ? 'period_end' : 'immediate')
-    try {
-      await cancelSubscription({ at_period_end: atPeriodEnd })
-      toast.success(atPeriodEnd ? 'Subscription will cancel at the end of the billing period.' : 'Subscription canceled.')
-      setShowCancelPrompt(false)
-      loadSubscription()
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || (error instanceof Error ? error.message : '') || 'Failed to cancel subscription')
-    } finally {
-      setCancelLoadingAction(null)
-    }
-  }
-
-  const handleResumeSubscription = async () => {
-    setIsResuming(true)
-    try {
-      await resumeSubscription()
-      toast.success('Subscription will continue. Cancellation has been undone.')
-      loadSubscription()
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || (error instanceof Error ? error.message : '') || 'Failed to resume subscription')
-    } finally {
-      setIsResuming(false)
-    }
-  }
-
-  const openChangePlanModal = () => {
-    const currentPlan = subscription?.plan_id
-    if (currentPlan === PLAN_ID_TEAM || currentPlan === PLAN_ID_BUSINESS) {
-      setChangePlanId(currentPlan)
-    } else {
-      setChangePlanId(PLAN_ID_SOLO)
-    }
-    if (subscription?.pageview_limit != null && subscription.pageview_limit > 0) {
-      setChangePlanTierIndex(getTierIndexForLimit(subscription.pageview_limit))
-    } else {
-      setChangePlanTierIndex(2)
-    }
-    setChangePlanYearly(subscription?.billing_interval === 'year')
-    setShowChangePlanModal(true)
-  }
-
-  const handleChangePlanSubmit = async () => {
-    const interval = changePlanYearly ? 'year' : 'month'
-    const limit = getLimitForTierIndex(changePlanTierIndex)
-    setIsChangingPlan(true)
-    try {
-      if (hasActiveSubscription) {
-        await changePlan({ plan_id: changePlanId, interval, limit })
-        toast.success('Plan updated. Changes may take a moment to reflect.')
-        setShowChangePlanModal(false)
-        loadSubscription()
-      } else {
-        const { url } = await createCheckoutSession({ plan_id: changePlanId, interval, limit })
-        if (url) window.location.href = url
-        else throw new Error('No checkout URL')
-      }
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || (error instanceof Error ? error.message : '') || 'Failed to update plan')
-    } finally {
-      setIsChangingPlan(false)
-    }
-  }
-
-  const handleDelete = async () => {
-    if (deleteConfirm !== 'DELETE') return
-    
-    setIsDeleting(true)
-    try {
-      await deleteOrganization(currentOrgId)
-      toast.success('Organization deleted successfully')
-      
-      // * Clear sticky session
-      localStorage.removeItem('active_org_id')
-      
-      // * Switch to personal context explicitly
-      try {
-        const { access_token } = await switchContext(null)
-        await setSessionAction(access_token)
-        sessionStorage.setItem('pulse_switching_org', 'true')
-        window.location.href = '/'
-      } catch (switchErr) {
-        logger.error('Failed to switch to personal context after delete:', switchErr)
-        sessionStorage.setItem('pulse_switching_org', 'true')
-        window.location.href = '/'
-      }
-      
-    } catch (err: unknown) {
-      logger.error(err)
-      toast.error(getAuthErrorMessage(err) || (err instanceof Error ? err.message : '') || 'Failed to delete organization')
-      setIsDeleting(false)
-    }
-  }
-
-  const handleSendInvite = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!inviteEmail) return
-
-    if (!captchaToken) {
-        toast.error('Please complete the security check')
-        return
-    }
-
-    setIsInviting(true)
-    try {
-      await sendInvitation(currentOrgId, inviteEmail, inviteRole, {
-        captcha_id: captchaId,
-        captcha_solution: captchaSolution,
-        captcha_token: captchaToken
-      })
-      toast.success(`Invitation sent to ${inviteEmail}`)
-      setInviteEmail('')
-      // Reset captcha
-      setCaptchaId('')
-      setCaptchaSolution('')
-      setCaptchaToken('')
-      loadMembers() // Refresh list
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || (error instanceof Error ? error.message : '') || 'Failed to send invitation')
-    } finally {
-      setIsInviting(false)
-    }
-  }
-
-  const handleRevokeInvite = async (inviteId: string) => {
-    try {
-      await revokeInvitation(currentOrgId, inviteId)
-      toast.success('Invitation revoked')
-      loadMembers() // Refresh list
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || (error instanceof Error ? error.message : '') || 'Failed to revoke invitation')
-    }
-  }
-
-  const handleUpdateOrg = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!currentOrgId) return
-
-    setIsSaving(true)
-    try {
-      await updateOrganization(currentOrgId, orgName, orgSlug)
-      toast.success('Organization updated successfully')
-      setIsEditing(false)
-      loadMembers() 
-    } catch (error: unknown) {
-      toast.error(getAuthErrorMessage(error) || (error instanceof Error ? error.message : '') || 'Failed to save organization settings')
-    } finally {
-      setIsSaving(false)
-    }
-  }
-
-  // Helper to find current org name (from members list if available, or just fallback)
-  // Ideally we'd have a full org object, but we have ID. 
-  // We can find the current user's membership entry which has org name.
-  const currentOrgName = members.find(m => m.user_id === user?.id)?.organization_name || 'Organization'
-
-  // handleTabChange is defined above
-
-  return (
-    <div className="space-y-8">
-      <div>
-        <h1 className="text-2xl font-bold text-white">Organization Settings</h1>
-        <p className="mt-2 text-neutral-600 dark:text-neutral-400">
-          Manage your organization workspace and members.
-        </p>
-      </div>
-
-      <div className="flex flex-col md:flex-row gap-8">
-        {/* Sidebar Navigation */}
-        <nav className="w-full md:w-64 flex-shrink-0 space-y-1" role="tablist" aria-label="Organization settings sections">
-          <button
-            onClick={() => handleTabChange('general')}
-            role="tab"
-            aria-selected={activeTab === 'general'}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
-              activeTab === 'general'
-                ? 'bg-brand-orange/10 text-brand-orange'
-                : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-            }`}
-          >
-            <BoxIcon className="w-5 h-5" />
-            General
-          </button>
-          <button
-            onClick={() => handleTabChange('members')}
-            role="tab"
-            aria-selected={activeTab === 'members'}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
-              activeTab === 'members'
-                ? 'bg-brand-orange/10 text-brand-orange'
-                : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-            }`}
-          >
-            <UserIcon className="w-5 h-5" />
-            Members
-          </button>
-          <button
-            onClick={() => handleTabChange('billing')}
-            role="tab"
-            aria-selected={activeTab === 'billing'}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
-              activeTab === 'billing'
-                ? 'bg-brand-orange/10 text-brand-orange'
-                : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-            }`}
-          >
-            <BoxIcon className="w-5 h-5" />
-            Billing
-          </button>
-          {(user?.role === 'owner' || user?.role === 'admin') && (
-            <button
-              onClick={() => handleTabChange('notifications')}
-              role="tab"
-              aria-selected={activeTab === 'notifications'}
-              className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
-                activeTab === 'notifications'
-                  ? 'bg-brand-orange/10 text-brand-orange'
-                  : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-              }`}
-            >
-              <BellIcon className="w-5 h-5" />
-              Notifications
-            </button>
-          )}
-          <button
-            onClick={() => handleTabChange('audit')}
-            role="tab"
-            aria-selected={activeTab === 'audit'}
-            className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
-              activeTab === 'audit'
-                ? 'bg-brand-orange/10 text-brand-orange'
-                : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-            }`}
-          >
-            <LayoutDashboardIcon className="w-5 h-5" />
-            Audit log
-          </button>
-        </nav>
-
-        {/* Content Area - no min-w-0 so it uses full available width and table doesn't get cramped */}
-        <div className="flex-1 relative">
-          <motion.div
-            key={activeTab}
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.2 }}
-            className="w-full bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-6 shadow-sm"
-          >
-            {activeTab === 'general' && (
-              <div className="space-y-12">
-                 <div>
-                    <h2 className="text-2xl font-bold text-white mb-1">General Information</h2>
-                    <p className="text-sm text-neutral-400">Basic details about your organization.</p>
-                  </div>
-
-                 <form onSubmit={handleUpdateOrg} className="space-y-4">
-                    <div className="space-y-1.5">
-                      <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
-                        Organization Name
-                      </label>
-                      <Input
-                        type="text"
-                        value={orgName}
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setOrgName(e.target.value)}
-                        required
-                        minLength={2}
-                        maxLength={50}
-                        disabled={!isEditing}
-                        className={`bg-white dark:bg-neutral-900 ${!isEditing ? 'text-neutral-400' : ''}`}
-                      />
-                    </div>
-                    
-                    <div className="space-y-1.5">
-                      <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
-                        Organization Slug
-                      </label>
-                      <div className="flex rounded-xl shadow-sm">
-                        <span className="inline-flex items-center px-3 rounded-l-xl border border-r-0 border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900 text-neutral-400 text-sm">
-                          pulse.ciphera.net/
-                        </span>
-                        <Input
-                          type="text"
-                          value={orgSlug}
-                          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setOrgSlug(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''))}
-                          required
-                          minLength={3}
-                          maxLength={30}
-                          disabled={!isEditing}
-                          className={`rounded-l-none bg-white dark:bg-neutral-900 ${!isEditing ? 'text-neutral-400' : ''}`}
-                        />
-                      </div>
-                      <p className="text-xs text-neutral-400">
-                        Changing the slug will change your organization's URL.
-                      </p>
-                    </div>
-
-                    <div className="flex justify-end gap-3">
-                        {!isEditing ? (
-                            <Button type="button" onClick={() => setIsEditing(true)}>
-                                Edit Details
-                            </Button>
-                        ) : (
-                            <>
-                                <Button 
-                                    type="button" 
-                                    variant="ghost" 
-                                    onClick={() => {
-                                        setIsEditing(false)
-                                        // Reset values
-                                        if (orgDetails) {
-                                            setOrgName(orgDetails.name)
-                                            setOrgSlug(orgDetails.slug)
-                                        }
-                                    }}
-                                    disabled={isSaving}
-                                >
-                                    Cancel
-                                </Button>
-                                <Button type="submit" disabled={isSaving} isLoading={isSaving}>
-                                    Save Changes
-                                </Button>
-                            </>
-                        )}
-                    </div>
-                 </form>
-
-                 <div className="space-y-6">
-                  <div>
-                    <h2 className="text-2xl font-bold text-red-600 dark:text-red-500 mb-1">Danger Zone</h2>
-                    <p className="text-sm text-neutral-400">Irreversible actions for this organization.</p>
-                  </div>
-
-                  <div className="p-6 border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-900/10 rounded-2xl flex items-center justify-between">
-                    <div>
-                      <h3 className="font-medium text-red-900 dark:text-red-200">Delete Organization</h3>
-                      <p className="text-sm text-red-700 dark:text-red-300 mt-1">Permanently delete this organization and all its data.</p>
-                    </div>
-                    <button
-                      onClick={async () => {
-                        if (!subscription) {
-                          setIsLoadingDeleteData(true)
-                          try {
-                            const sub = await getSubscription()
-                            setSubscription(sub)
-                          } catch {
-                            // proceed without subscription data
-                          } finally {
-                            setIsLoadingDeleteData(false)
-                          }
-                        }
-                        setShowDeletePrompt(true)
-                      }}
-                      disabled={isLoadingDeleteData}
-                      className="px-4 py-2 bg-white dark:bg-neutral-900 border border-red-200 dark:border-red-900 text-red-600 dark:text-red-400 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors text-sm font-medium disabled:opacity-50 flex items-center gap-2"
-                    >
-                      {isLoadingDeleteData && <Spinner className="h-4 w-4" />}
-                      Delete Organization
-                    </button>
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {activeTab === 'members' && (
-              <div className="space-y-12">
-                {/* Invite Section */}
-                <div>
-                  <h2 className="text-2xl font-bold text-white mb-1">Organization Members</h2>
-                  <p className="text-sm text-neutral-400 mb-6">Manage who has access to this organization.</p>
-                  
-                  <div className="bg-neutral-50 dark:bg-neutral-900/50 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-4">
-                    <h3 className="text-sm font-medium text-white mb-3">Invite New Member</h3>
-                    <form onSubmit={handleSendInvite} className="flex gap-3 items-end">
-                      <div className="flex-1">
-                        <Input 
-                          type="email" 
-                          placeholder="colleague@company.com" 
-                          value={inviteEmail}
-                          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setInviteEmail(e.target.value)}
-                          required
-                          className="bg-white dark:bg-neutral-900"
-                        />
-                      </div>
-                      <div className="w-32">
-                        <select 
-                          className="w-full h-10 px-3 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm outline-none focus:ring-2 focus:ring-brand-orange dark:text-white"
-                          value={inviteRole}
-                          onChange={(e) => setInviteRole(e.target.value)}
-                        >
-                          <option value="member">Member</option>
-                          <option value="admin">Admin</option>
-                          <option value="owner">Owner</option>
-                        </select>
-                      </div>
-                      <Button type="submit" disabled={isInviting} isLoading={isInviting}>
-                        <PlusIcon className="w-4 h-4 mr-2" />
-                        Invite
-                      </Button>
-                    </form>
-                    <div className="mt-4">
-                        <Captcha
-                            onVerify={(id, solution, token) => {
-                                setCaptchaId(id)
-                                setCaptchaSolution(solution)
-                                setCaptchaToken(token || '')
-                            }}
-                            apiUrl={process.env.NEXT_PUBLIC_CAPTCHA_API_URL}
-                            action="org-settings"
-                        />
-                    </div>
-                  </div>
-                </div>
-
-                {/* Members List */}
-                <div className="space-y-4">
-                  <h3 className="text-sm font-medium text-neutral-400 uppercase tracking-wider">Active Members</h3>
-                  <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden divide-y divide-neutral-200 dark:divide-neutral-800">
-                    {isLoadingMembers ? (
-                      <MembersListSkeleton />
-                    ) : members.length === 0 ? (
-                      <div className="p-8 text-center text-neutral-400">No members found.</div>
-                    ) : (
-                      members.map((member) => (
-                        <div key={member.user_id} className="p-4 flex items-center justify-between hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors">
-                          <div className="flex items-center gap-3">
-                            <div className="h-10 w-10 rounded-full bg-brand-orange/10 flex items-center justify-center text-brand-orange font-medium">
-                              {member.user_email?.[0].toUpperCase() || '?'}
-                            </div>
-                            <div>
-                              <div className="text-sm font-medium text-white">
-                                {member.user_email || 'Unknown User'}
-                              </div>
-                              <div className="text-xs text-neutral-400">
-                                Joined {formatDate(new Date(member.joined_at))}
-                              </div>
-                            </div>
-                          </div>
-                          <div className="flex items-center gap-4">
-                            <span className={`px-2.5 py-0.5 rounded-full text-xs font-medium capitalize ${
-                              member.role === 'owner' 
-                                ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300'
-                                : member.role === 'admin'
-                                ? 'bg-brand-orange/10 text-brand-orange'
-                                : 'bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300'
-                            }`}>
-                              {member.role}
-                            </span>
-                          </div>
-                        </div>
-                      ))
-                    )}
-                  </div>
-                </div>
-
-                {/* Pending Invitations */}
-                {invitations.length > 0 && (
-                  <div className="space-y-4">
-                    <h3 className="text-sm font-medium text-neutral-400 uppercase tracking-wider">Pending Invitations</h3>
-                    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden divide-y divide-neutral-200 dark:divide-neutral-800">
-                      {invitations.map((invite) => (
-                        <div key={invite.id} className="p-4 flex items-center justify-between">
-                          <div className="flex items-center gap-3">
-                            <div className="h-10 w-10 rounded-full bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center text-neutral-400">
-                              <div className="w-2 h-2 rounded-full bg-neutral-400 animate-pulse"></div>
-                            </div>
-                            <div>
-                              <div className="text-sm font-medium text-white">
-                                {invite.email}
-                              </div>
-                              <div className="text-xs text-neutral-400">
-                                Invited as <span className="capitalize font-medium">{invite.role}</span> • Expires {formatDate(new Date(invite.expires_at))}
-                              </div>
-                            </div>
-                          </div>
-                          <Button 
-                            variant="ghost" 
-                            onClick={() => handleRevokeInvite(invite.id)}
-                            className="text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20 h-9 px-3"
-                          >
-                            Revoke
-                          </Button>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
-
-            {activeTab === 'billing' && (
-              <div className="space-y-8">
-                <div>
-                  <h2 className="text-2xl font-bold text-white mb-1">Billing & Subscription</h2>
-                  <p className="text-sm text-neutral-400">Manage your plan, usage, and payment details.</p>
-                </div>
-
-                {isLoadingSubscription ? (
-                  <div className="space-y-4">
-                    <SkeletonCard className="h-32" />
-                    <SkeletonCard className="h-20" />
-                  </div>
-                ) : !subscription ? (
-                  <div className="p-6 text-center bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-200 dark:border-neutral-800">
-                    <p className="text-neutral-400">Could not load subscription details.</p>
-                    <Button variant="ghost" onClick={loadSubscription} className="mt-4">Retry</Button>
-                  </div>
-                ) : (
-                  <div className="space-y-6">
-
-                    {/* Trial notice */}
-                    {subscription.subscription_status === 'trialing' && (
-                      <div className="p-6 bg-yellow-50 dark:bg-yellow-900/10 border border-yellow-200 dark:border-yellow-800 rounded-2xl flex flex-col sm:flex-row sm:items-center gap-3">
-                        <div className="flex-1">
-                          <p className="text-sm font-medium text-yellow-800 dark:text-yellow-200">
-                            Your free trial ends on{' '}
-                            <span className="font-semibold">
-                              {(() => {
-                                const d = subscription.current_period_end ? new Date(subscription.current_period_end as string) : null
-                                return d && !Number.isNaN(d.getTime()) ? formatDateLong(d) : '—'
-                              })()}
-                            </span>
-                          </p>
-                          <p className="text-xs text-yellow-700 dark:text-yellow-300 mt-0.5">
-                            After the trial you'll be charged automatically unless you cancel before then.
-                          </p>
-                        </div>
-                      </div>
-                    )}
-
-                    {/* Past due notice */}
-                    {subscription.subscription_status === 'past_due' && (
-                      <div className="p-6 bg-red-50 dark:bg-red-900/10 border border-red-200 dark:border-red-800 rounded-2xl flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
-                        <div className="flex-1">
-                          <p className="text-sm font-medium text-red-800 dark:text-red-200">
-                            Payment past due
-                          </p>
-                          <p className="text-xs text-red-700 dark:text-red-300 mt-0.5">
-                            We couldn't charge your payment method. Please update your billing info to avoid service interruption.
-                          </p>
-                        </div>
-                        <Button
-                          variant="secondary"
-                          onClick={handleManageSubscription}
-                          disabled={isRedirectingToPortal}
-                          isLoading={isRedirectingToPortal}
-                          className="shrink-0"
-                        >
-                          Update payment method
-                        </Button>
-                      </div>
-                    )}
-
-                    {/* Cancel-at-period-end notice */}
-                    {subscription.cancel_at_period_end && (
-                      <div className="p-6 bg-amber-50 dark:bg-amber-900/10 border border-amber-200 dark:border-amber-800 rounded-2xl flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
-                        <div>
-                          <p className="text-sm font-medium text-amber-800 dark:text-amber-200">
-                            Your subscription will end on{' '}
-                            <span className="font-semibold">
-                              {(() => {
-                                const d = subscription.current_period_end ? new Date(subscription.current_period_end as string) : null
-                                return d && !Number.isNaN(d.getTime()) ? formatDateLong(d) : '—'
-                              })()}
-                            </span>
-                          </p>
-                          <p className="text-xs text-amber-700 dark:text-amber-300 mt-1">
-                            You keep full access until then. Your data is retained for 30 days after. Use "Change plan" to resubscribe.
-                          </p>
-                        </div>
-                        <Button
-                          variant="secondary"
-                          onClick={handleResumeSubscription}
-                          disabled={isResuming}
-                          isLoading={isResuming}
-                          className="shrink-0"
-                        >
-                          Keep my subscription
-                        </Button>
-                      </div>
-                    )}
-
-                    {/* Plan & Usage card */}
-                    <div className="bg-neutral-50 dark:bg-neutral-900/50 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden">
-                      {/* Plan header */}
-                      <div className="p-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-                        <div className="flex items-center gap-3">
-                          <span className="text-xl font-bold text-white capitalize">
-                            {subscription.plan_id?.startsWith('price_') ? 'Pro' : (subscription.plan_id === 'free' || !subscription.plan_id ? 'Free' : subscription.plan_id)} Plan
-                          </span>
-                          <span className={`px-2.5 py-0.5 rounded-full text-xs font-medium capitalize ${
-                            subscription.subscription_status === 'active'
-                              ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300'
-                              : subscription.subscription_status === 'trialing'
-                              ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300'
-                              : subscription.subscription_status === 'past_due'
-                              ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300'
-                              : 'bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300'
-                          }`}>
-                            {subscription.subscription_status === 'trialing' ? 'Trial' : subscription.subscription_status === 'past_due' ? 'Past Due' : (subscription.subscription_status || 'Free')}
-                          </span>
-                          {subscription.billing_interval && (
-                            <span className="text-xs text-neutral-500 capitalize">
-                              Billed {subscription.billing_interval}ly
-                            </span>
-                          )}
-                        </div>
-                        <Button onClick={openChangePlanModal} disabled={subscription.cancel_at_period_end}>
-                          Change plan
-                        </Button>
-                      </div>
-                      {(subscription.business_name || subscription.tax_id) && (
-                        <div className="px-6 pb-2 -mt-2 space-y-1 text-sm text-neutral-400">
-                          {subscription.business_name && (
-                            <div>Billing for: {subscription.business_name}</div>
-                          )}
-                          {subscription.tax_id && (
-                            <span>
-                              Tax ID: {subscription.tax_id.value} ({subscription.tax_id.type})
-                            </span>
-                          )}
-                        </div>
-                      )}
-
-                      {/* Usage stats */}
-                      <div className="border-t border-neutral-200 dark:border-neutral-800 p-6 grid grid-cols-2 md:grid-cols-4 gap-y-4 gap-x-6">
-                        <div>
-                          <div className="text-xs text-neutral-500 uppercase tracking-wider mb-1">Sites</div>
-                          <div className="text-lg font-semibold text-white">
-                            {typeof subscription.sites_count === 'number'
-                              ? (() => {
-                                  const limit = getSitesLimitForPlan(subscription.plan_id)
-                                  return limit != null ? `${subscription.sites_count} / ${limit}` : `${subscription.sites_count}`
-                                })()
-                              : '—'}
-                          </div>
-                        </div>
-                        <div>
-                          <div className="text-xs text-neutral-500 uppercase tracking-wider mb-1">Pageviews</div>
-                          <div className="text-lg font-semibold text-white">
-                            {subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number'
-                              ? `${subscription.pageview_usage.toLocaleString()} / ${subscription.pageview_limit.toLocaleString()}`
-                              : '—'}
-                          </div>
-                          {subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number' && (
-                            <div className="mt-2 h-1.5 w-full rounded-full bg-neutral-200 dark:bg-neutral-700 overflow-hidden">
-                              <div
-                                className={`h-full rounded-full transition-all ${
-                                  subscription.pageview_usage / subscription.pageview_limit >= 1
-                                    ? 'bg-red-500'
-                                    : subscription.pageview_usage / subscription.pageview_limit >= 0.9
-                                    ? 'bg-red-400'
-                                    : subscription.pageview_usage / subscription.pageview_limit >= 0.8
-                                    ? 'bg-amber-400'
-                                    : 'bg-green-500'
-                                }`}
-                                style={{ width: `${Math.min(100, (subscription.pageview_usage / subscription.pageview_limit) * 100)}%` }}
-                              />
-                            </div>
-                          )}
-                        </div>
-                        <div>
-                          <div className="text-xs text-neutral-500 uppercase tracking-wider mb-1">
-                            {subscription.subscription_status === 'trialing' ? 'Trial ends' : (subscription.cancel_at_period_end ? 'Access until' : 'Renews')}
-                          </div>
-                          <div className="text-lg font-semibold text-white">
-                            {(() => {
-                              const ts = subscription.current_period_end
-                              const d = ts ? new Date(ts) : null
-                              return d && !Number.isNaN(d.getTime()) && d.getTime() !== 0
-                                ? formatDate(d)
-                                : '—'
-                            })()}
-                          </div>
-                        </div>
-                        <div>
-                          <div className="text-xs text-neutral-500 uppercase tracking-wider mb-1">Limit</div>
-                          <div className="text-lg font-semibold text-white">
-                            {subscription.pageview_limit > 0 ? `${subscription.pageview_limit.toLocaleString()} / mo` : 'Unlimited'}
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* Quick actions */}
-                    <div className="flex flex-wrap items-center gap-4">
-                      {subscription.has_payment_method && (
-                        <button
-                          type="button"
-                          onClick={handleManageSubscription}
-                          disabled={isRedirectingToPortal}
-                          className="inline-flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:rounded"
-                        >
-                          <ExternalLinkIcon className="w-4 h-4" />
-                          Payment method & invoices
-                        </button>
-                      )}
-                      {subscription.has_payment_method && (subscription.subscription_status === 'active' || subscription.subscription_status === 'trialing') && !subscription.cancel_at_period_end && (
-                        <button
-                          type="button"
-                          onClick={() => setShowCancelPrompt(true)}
-                          className="inline-flex items-center gap-2 rounded-xl border border-neutral-200 dark:border-neutral-700 px-3.5 py-1.5 text-sm text-neutral-600 dark:text-neutral-400 hover:border-red-300 hover:text-red-600 dark:hover:border-red-800 dark:hover:text-red-400 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2"
-                        >
-                          Cancel subscription
-                        </button>
-                      )}
-                    </div>
-
-                    {/* Order History */}
-                    <div>
-                      <h3 className="text-lg font-semibold text-white mb-3">Recent orders</h3>
-                      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden divide-y divide-neutral-200 dark:divide-neutral-800">
-                        {isLoadingInvoices ? (
-                          <InvoicesListSkeleton />
-                        ) : orders.length === 0 ? (
-                          <div className="p-8 text-center text-neutral-400">No orders found.</div>
-                        ) : (
-                          <>
-                            {orders.map((order) => (
-                              <div key={order.id} className="px-4 py-3 flex items-center justify-between hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors">
-                                <div className="flex items-center gap-3">
-                                  <div>
-                                    <span className="font-medium text-sm text-white">
-                                      {(order.total_amount / 100).toLocaleString('en-US', { style: 'currency', currency: order.currency.toUpperCase() })}
-                                    </span>
-                                    <span className="text-xs text-neutral-500 ml-2">
-                                      {formatDate(new Date(order.created_at))}
-                                    </span>
-                                  </div>
-                                </div>
-                                <div className="flex items-center gap-3">
-                                  <span className={`px-2 py-0.5 rounded-full text-xs font-medium capitalize ${
-                                    order.status === 'paid'
-                                      ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300'
-                                      : order.status === 'open'
-                                      ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
-                                      : 'bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300'
-                                  }`}>
-                                    {order.status}
-                                  </span>
-                                </div>
-                              </div>
-                            ))}
-                          </>
-                        )
-                        }
-                        </div>
-                      </div>
-                    </div>
-                )}
-              </div>
-            )}
-
-            {activeTab === 'notifications' && (
-              <div className="space-y-8">
-                <div>
-                  <h2 className="text-2xl font-bold text-white mb-1">Notification Settings</h2>
-                  <p className="text-sm text-neutral-400 mb-6">
-                    Choose which notification types you want to receive. These apply to the notification center for owners and admins.
-                  </p>
-                </div>
-
-                {isLoadingNotificationSettings ? (
-                  <SettingsFormSkeleton />
-                ) : (
-                  <div className="space-y-4">
-                    <h3 className="text-sm font-medium text-neutral-400 uppercase tracking-wider">Notification categories</h3>
-                    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden divide-y divide-neutral-200 dark:divide-neutral-800">
-                      {notificationCategories.map((cat) => (
-                        <div
-                          key={cat.id}
-                          className="p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors"
-                        >
-                          <div className="flex-1">
-                            <p className="text-sm font-medium text-white">{cat.label}</p>
-                            <p className="text-sm text-neutral-400 mt-0.5">{cat.description}</p>
-                          </div>
-                          <div className="flex items-center shrink-0">
-                            <button
-                              type="button"
-                              role="switch"
-                              aria-checked={notificationSettings[cat.id] !== false}
-                              aria-label={`${notificationSettings[cat.id] !== false ? 'Disable' : 'Enable'} ${cat.label} notifications`}
-                              onClick={() => {
-                                const prev = { ...notificationSettings }
-                                const next = { ...notificationSettings, [cat.id]: notificationSettings[cat.id] === false }
-                                setNotificationSettings(next)
-                                setIsSavingNotificationSettings(true)
-                                updateNotificationSettings(next)
-                                  .then(() => {
-                                    toast.success('Notification settings updated')
-                                  })
-                                  .catch((err) => {
-                                    toast.error(getAuthErrorMessage(err) || 'Failed to save notification preferences')
-                                    setNotificationSettings(prev)
-                                  })
-                                  .finally(() => setIsSavingNotificationSettings(false))
-                              }}
-                              disabled={isSavingNotificationSettings}
-                              className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed ${
-                                notificationSettings[cat.id] !== false ? 'bg-brand-orange' : 'bg-neutral-200 dark:bg-neutral-700'
-                              }`}
-                            >
-                              <span
-                                className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
-                                  notificationSettings[cat.id] !== false ? 'translate-x-5' : 'translate-x-0'
-                                }`}
-                              />
-                            </button>
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
-
-            {activeTab === 'audit' && (
-              <div className="space-y-12">
-                <div>
-                  <h2 className="text-2xl font-bold text-white mb-1">Audit log</h2>
-                  <p className="text-sm text-neutral-400">Who did what and when for this organization.</p>
-                </div>
-
-                {/* Advanced Filters */}
-                <div className="bg-neutral-50 dark:bg-neutral-900/50 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-4 mb-6">
-                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-                    <div className="space-y-1">
-                      <label className="block text-xs font-medium text-neutral-500 uppercase">Log ID</label>
-                      <input
-                        type="text"
-                        placeholder="e.g. 8a2b3c"
-                        value={auditLogIdFilter}
-                        onChange={(e) => setAuditLogIdFilter(e.target.value)}
-                        className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm text-white focus:ring-2 focus:ring-brand-orange outline-none transition-all"
-                      />
-                    </div>
-                    <div className="space-y-1">
-                      <label className="block text-xs font-medium text-neutral-500 uppercase">Action</label>
-                      <input
-                        type="text"
-                        placeholder="e.g. site_created"
-                        value={auditActionFilter}
-                        onChange={(e) => setAuditActionFilter(e.target.value)}
-                        className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm text-white focus:ring-2 focus:ring-brand-orange outline-none transition-all"
-                      />
-                    </div>
-                    <div className="space-y-1">
-                      <label className="block text-xs font-medium text-neutral-500 uppercase">From date</label>
-                      <input
-                        type="date"
-                        value={auditStartDate}
-                        onChange={(e) => setAuditStartDate(e.target.value)}
-                        className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm text-white focus:ring-2 focus:ring-brand-orange outline-none transition-all"
-                      />
-                    </div>
-                    <div className="space-y-1">
-                      <label className="block text-xs font-medium text-neutral-500 uppercase">To date</label>
-                      <input
-                        type="date"
-                        value={auditEndDate}
-                        onChange={(e) => setAuditEndDate(e.target.value)}
-                        className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-sm text-white focus:ring-2 focus:ring-brand-orange outline-none transition-all"
-                      />
-                    </div>
-                  </div>
-                  <div className="mt-4 flex justify-end gap-2">
-                    <Button
-                        variant="ghost"
-                        onClick={() => {
-                            setAuditLogIdFilter('')
-                            setAuditActionFilter('')
-                            setAuditStartDate('')
-                            setAuditEndDate('')
-                            setAuditPage(0)
-                            setAuditFetchTrigger(prev => prev + 1)
-                        }}
-                        disabled={isLoadingAudit}
-                    >
-                        Clear Filters
-                    </Button>
-                  </div>
-                </div>
-
-                {/* Table */}
-                <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden">
-                  {isLoadingAudit ? (
-                    <AuditLogSkeleton />
-                  ) : (auditEntries ?? []).length === 0 ? (
-                    <div className="p-8 text-center text-neutral-500">No audit events found.</div>
-                  ) : (
-                    <div className="overflow-x-auto">
-                      <table className="w-full text-sm min-w-full">
-                        <thead>
-                          <tr className="border-b border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/50">
-                            <th className="text-left px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300 whitespace-nowrap">Log ID</th>
-                            <th className="text-left px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300 whitespace-nowrap">Time</th>
-                            <th className="text-left px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300 whitespace-nowrap">Actor</th>
-                            <th className="text-left px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300 whitespace-nowrap">Action</th>
-                            <th className="text-left px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300 whitespace-nowrap">Resource</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {(auditEntries ?? []).map((entry) => (
-                            <tr key={entry.id} className="border-b border-neutral-100 dark:border-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-800/30">
-                              <td className="px-4 py-3 text-neutral-500 dark:text-neutral-500 font-mono text-xs whitespace-nowrap" title={entry.id}>
-                                {entry.id}
-                              </td>
-                              <td className="px-4 py-3 text-neutral-600 dark:text-neutral-400 whitespace-nowrap">
-                                {formatDateTime(new Date(entry.occurred_at))}
-                              </td>
-                              <td className="px-4 py-3 text-white whitespace-nowrap" title={entry.actor_email || entry.actor_id || 'System'}>
-                                {entry.actor_email || entry.actor_id || 'System'}
-                              </td>
-                              <td className="px-4 py-3 font-medium text-white whitespace-nowrap" title={entry.action}>{entry.action}</td>
-                              <td className="px-4 py-3 text-neutral-600 dark:text-neutral-400">{entry.resource_type}</td>
-                            </tr>
-                          ))}
-                        </tbody>
-                      </table>
-                    </div>
-                  )}
-
-                  {/* Pagination */}
-                  {auditTotal > auditPageSize && (
-                    <div className="flex items-center justify-between px-4 py-3 border-t border-neutral-200 dark:border-neutral-800">
-                      <span className="text-sm text-neutral-400">
-                        {auditPage * auditPageSize + 1}–{Math.min((auditPage + 1) * auditPageSize, auditTotal)} of {auditTotal}
-                      </span>
-                      <div className="flex gap-2">
-                        <Button
-                          variant="ghost"
-                          onClick={() => setAuditPage((p) => Math.max(0, p - 1))}
-                          disabled={auditPage === 0 || isLoadingAudit}
-                          className="text-sm py-2 px-3"
-                        >
-                          Previous
-                        </Button>
-                        <Button
-                          variant="ghost"
-                          onClick={() => setAuditPage((p) => p + 1)}
-                          disabled={(auditPage + 1) * auditPageSize >= auditTotal || isLoadingAudit}
-                          className="text-sm py-2 px-3"
-                        >
-                          Next
-                        </Button>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-          </motion.div>
-        </div>
-      </div>
-
-      {/* Delete Confirmation Modal — portal to body so backdrop-blur covers the fixed header */}
-      {typeof document !== 'undefined' && createPortal(
-      <AnimatePresence>
-        {showDeletePrompt && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className="fixed inset-0 z-50 flex items-center justify-center bg-white/80 dark:bg-neutral-900/80 backdrop-blur-sm p-4 pointer-events-none"
-          >
-            <motion.div
-              initial={{ scale: 0.95, opacity: 0 }}
-              animate={{ scale: 1, opacity: 1 }}
-              exit={{ scale: 0.95, opacity: 0 }}
-              className="w-full max-w-sm bg-white dark:bg-neutral-900 p-6 rounded-2xl border border-red-200 dark:border-red-900 shadow-xl pointer-events-auto"
-            >
-              <div className="flex justify-between items-center mb-4">
-                <h3 className="text-lg font-semibold text-red-600 dark:text-red-500">Delete {orgName || 'Organization'}?</h3>
-                <button
-                  onClick={() => {
-                    setShowDeletePrompt(false)
-                    setDeleteConfirm('')
-                  }}
-                  className="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-white"
-                >
-                  <XIcon className="w-5 h-5" />
-                </button>
-              </div>
-
-              <p className="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
-                This action is <span className="font-bold">irreversible</span>. The following will be permanently deleted:
-              </p>
-
-              <div className="mb-5 space-y-2">
-                {typeof subscription?.sites_count === 'number' && subscription.sites_count > 0 && (
-                  <div className="flex items-center gap-3 p-3 bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-900/20 rounded-lg">
-                    <AlertTriangleIcon className="h-4 w-4 text-red-500 shrink-0" />
-                    <span className="text-sm font-medium text-red-700 dark:text-red-300">
-                      {subscription.sites_count} {subscription.sites_count === 1 ? 'site' : 'sites'} and all analytics data
-                    </span>
-                  </div>
-                )}
-                {members.length > 1 && (
-                  <div className="flex items-center gap-3 p-3 bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-900/20 rounded-lg">
-                    <AlertTriangleIcon className="h-4 w-4 text-red-500 shrink-0" />
-                    <span className="text-sm font-medium text-red-700 dark:text-red-300">
-                      {members.length - 1} {members.length - 1 === 1 ? 'member' : 'members'} will be removed
-                    </span>
-                  </div>
-                )}
-                {subscription?.plan_id && subscription.plan_id !== 'free' && (
-                  <div className="flex items-center gap-3 p-3 bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-900/20 rounded-lg">
-                    <AlertTriangleIcon className="h-4 w-4 text-red-500 shrink-0" />
-                    <span className="text-sm font-medium text-red-700 dark:text-red-300">
-                      Active subscription will be cancelled
-                    </span>
-                  </div>
-                )}
-                <div className="flex items-center gap-3 p-3 bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-900/20 rounded-lg">
-                  <AlertTriangleIcon className="h-4 w-4 text-red-500 shrink-0" />
-                  <span className="text-sm font-medium text-red-700 dark:text-red-300">
-                    All notifications and settings
-                  </span>
-                </div>
-              </div>
-
-              <div className="space-y-4">
-                <div>
-                  <label className="block text-xs font-medium text-neutral-700 dark:text-neutral-300 mb-1">
-                    Type <span className="font-mono font-bold text-red-600 dark:text-red-400">DELETE</span> to confirm
-                  </label>
-                  <input
-                    type="text"
-                    value={deleteConfirm}
-                    onChange={(e) => setDeleteConfirm(e.target.value)}
-                    autoComplete="off"
-                    className="w-full px-3 py-2 text-sm border border-neutral-300 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400"
-                    placeholder="DELETE"
-                  />
-                </div>
-
-                <div className="flex gap-3">
-                  <button
-                    type="button"
-                    onClick={() => {
-                      setShowDeletePrompt(false)
-                      setDeleteConfirm('')
-                    }}
-                    className="flex-1 px-4 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-xl transition-colors"
-                    disabled={isDeleting}
-                  >
-                    Cancel
-                  </button>
-                  <button
-                    onClick={handleDelete}
-                    disabled={deleteConfirm !== 'DELETE' || isDeleting}
-                    className="flex-1 px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 dark:bg-red-600 dark:hover:bg-red-700 rounded-xl transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                  >
-                    {isDeleting ? 'Deleting...' : 'Delete Forever'}
-                  </button>
-                </div>
-              </div>
-            </motion.div>
-          </motion.div>
-        )}
-      </AnimatePresence>,
-      document.body
-      )}
-
-      {/* Cancel subscription confirmation modal */}
-      <AnimatePresence>
-        {showCancelPrompt && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
-          >
-            <motion.div
-              initial={{ scale: 0.95, opacity: 0 }}
-              animate={{ scale: 1, opacity: 1 }}
-              exit={{ scale: 0.95, opacity: 0 }}
-              className="bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl max-w-md w-full p-6 border border-neutral-200 dark:border-neutral-800"
-            >
-              <div className="flex justify-between items-center mb-4">
-                <h3 className="text-lg font-semibold text-white">Cancel subscription?</h3>
-                <button
-                  onClick={() => setShowCancelPrompt(false)}
-                  className="text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-400"
-                  disabled={cancelLoadingAction != null}
-                >
-                  <XIcon className="w-5 h-5" />
-                </button>
-              </div>
-              <p className="text-neutral-600 dark:text-neutral-300 mb-4">
-                You can cancel at the end of your billing period (you keep access until then) or cancel immediately. Your data is retained for 30 days after access ends.
-              </p>
-              <div className="flex flex-col gap-2">
-                <Button
-                  onClick={() => handleCancelSubscription(true)}
-                  disabled={cancelLoadingAction != null}
-                  isLoading={cancelLoadingAction === 'period_end'}
-                >
-                  Cancel at period end
-                </Button>
-                <Button
-                  variant="ghost"
-                  className="text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20"
-                  onClick={() => handleCancelSubscription(false)}
-                  disabled={cancelLoadingAction != null}
-                  isLoading={cancelLoadingAction === 'immediate'}
-                >
-                  Cancel immediately
-                </Button>
-                <Button variant="ghost" onClick={() => setShowCancelPrompt(false)} disabled={cancelLoadingAction != null}>
-                  Keep subscription
-                </Button>
-              </div>
-            </motion.div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-
-      {/* Change plan modal */}
-      <AnimatePresence>
-        {showChangePlanModal && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
-          >
-            <motion.div
-              initial={{ scale: 0.95, opacity: 0 }}
-              animate={{ scale: 1, opacity: 1 }}
-              exit={{ scale: 0.95, opacity: 0 }}
-              className="bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl max-w-md w-full p-6 border border-neutral-200 dark:border-neutral-800"
-            >
-              <div className="flex justify-between items-center mb-4">
-                <h3 className="text-lg font-semibold text-white">Change plan</h3>
-                <button
-                  type="button"
-                  onClick={() => setShowChangePlanModal(false)}
-                  className="text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange rounded-lg p-1"
-                  disabled={isChangingPlan}
-                  aria-label="Close dialog"
-                >
-                  <XIcon className="w-5 h-5" />
-                </button>
-              </div>
-              <p className="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
-                Choose your pageview limit and billing interval. {hasActiveSubscription ? 'Your next invoice will reflect prorations.' : 'You’ll start a new subscription.'}
-              </p>
-              <div className="space-y-4">
-                <div>
-                  <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Plan</label>
-                  <div className="grid grid-cols-3 gap-2">
-                    {([
-                      { id: PLAN_ID_SOLO, name: 'Solo', sites: '1 site' },
-                      { id: PLAN_ID_TEAM, name: 'Team', sites: 'Up to 5 sites' },
-                      { id: PLAN_ID_BUSINESS, name: 'Business', sites: 'Up to 10 sites' },
-                    ] as const).map((plan) => {
-                      const isCurrentPlan = subscription?.plan_id === plan.id
-                      const isSelected = changePlanId === plan.id
-                      return (
-                        <button
-                          key={plan.id}
-                          type="button"
-                          onClick={() => setChangePlanId(plan.id)}
-                          className={`relative p-3 rounded-xl border text-left transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange ${
-                            isSelected
-                              ? 'border-brand-orange bg-brand-orange/5 dark:bg-brand-orange/10'
-                              : 'border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600'
-                          }`}
-                        >
-                          <span className={`block text-sm font-semibold ${isSelected ? 'text-brand-orange' : 'text-white'}`}>
-                            {plan.name}
-                          </span>
-                          <span className="block text-xs text-neutral-500 mt-0.5">{plan.sites}</span>
-                          {isCurrentPlan && (
-                            <span className="absolute -top-2 right-2 px-1.5 py-0.5 text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 rounded-full border border-neutral-200 dark:border-neutral-700">
-                              Current
-                            </span>
-                          )}
-                        </button>
-                      )
-                    })}
-                  </div>
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Pageviews per month</label>
-                  <select
-                    value={changePlanTierIndex}
-                    onChange={(e) => setChangePlanTierIndex(Number(e.target.value))}
-                    className="w-full px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-white focus:ring-2 focus:ring-brand-orange outline-none"
-                  >
-                    {TRAFFIC_TIERS.map((tier, idx) => (
-                      <option key={tier.value} value={idx}>
-                        {tier.label} / month
-                      </option>
-                    ))}
-                  </select>
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Billing</label>
-                  <div className="flex rounded-lg border border-neutral-200 dark:border-neutral-800 p-1 gap-1">
-                    <button
-                      type="button"
-                      onClick={() => setChangePlanYearly(false)}
-                      className={`flex-1 py-2 text-sm font-medium rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange ${!changePlanYearly ? 'bg-brand-orange text-white' : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'}`}
-                    >
-                      Monthly
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => setChangePlanYearly(true)}
-                      className={`flex-1 py-2 text-sm font-medium rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange ${changePlanYearly ? 'bg-brand-orange text-white' : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'}`}
-                    >
-                      Yearly
-                    </button>
-                  </div>
-                </div>
-              </div>
-              {hasActiveSubscription && (
-                <div className="mt-4 p-4 rounded-lg bg-neutral-100 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-700">
-                  <p className="text-sm text-neutral-600 dark:text-neutral-400">
-                    Your plan will be updated. Any prorations will be reflected on your next invoice.
-                  </p>
-                </div>
-              )}
-              <div className="flex gap-2 mt-6">
-                <Button
-                  onClick={handleChangePlanSubmit}
-                  isLoading={isChangingPlan}
-                  disabled={isChangingPlan}
-                  className="flex-1"
-                >
-                  {hasActiveSubscription ? 'Update plan' : 'Start subscription'}
-                </Button>
-                <Button variant="ghost" onClick={() => setShowChangePlanModal(false)} disabled={isChangingPlan}>
-                  Cancel
-                </Button>
-              </div>
-            </motion.div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  )
-}
diff --git a/components/settings/SettingsModalWrapper.tsx b/components/settings/SettingsModalWrapper.tsx
deleted file mode 100644
index 55c187e..0000000
--- a/components/settings/SettingsModalWrapper.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-'use client'
-
-import { useState, useEffect } from 'react'
-import Link from 'next/link'
-import { SettingsModal, type SettingsSection } from '@ciphera-net/ui'
-import { UserIcon, LockIcon, BellIcon, ChevronRightIcon } from '@ciphera-net/ui'
-import { NotificationToggleList, type NotificationOption } from '@ciphera-net/ui'
-import ProfileSettings from '@/components/settings/ProfileSettings'
-import TrustedDevicesCard from '@/components/settings/TrustedDevicesCard'
-import SecurityActivityCard from '@/components/settings/SecurityActivityCard'
-import { useSettingsModal } from '@/lib/settings-modal-context'
-import { useAuth } from '@/lib/auth/context'
-import { updateUserPreferences } from '@/lib/api/user'
-
-// --- Security Alerts ---
-
-const SECURITY_ALERT_OPTIONS: NotificationOption[] = [
-  { key: 'login_alerts', label: 'Login Activity', description: 'New device sign-ins and suspicious login attempts.' },
-  { key: 'password_alerts', label: 'Password Changes', description: 'Password changes and session revocations.' },
-  { key: 'two_factor_alerts', label: 'Two-Factor Authentication', description: '2FA enabled/disabled and recovery code changes.' },
-]
-
-function SecurityAlertsCard() {
-  const { user } = useAuth()
-  const [emailNotifications, setEmailNotifications] = useState<Record<string, boolean>>({})
-
-  useEffect(() => {
-    if (user?.preferences?.email_notifications) {
-      setEmailNotifications(user.preferences.email_notifications)
-    } else {
-      const defaults = SECURITY_ALERT_OPTIONS.reduce((acc, option) => ({
-        ...acc,
-        [option.key]: true
-      }), {} as Record<string, boolean>)
-      setEmailNotifications(defaults)
-    }
-  }, [user])
-
-  const handleToggle = async (key: string) => {
-    const newState = {
-      ...emailNotifications,
-      [key]: !emailNotifications[key]
-    }
-    setEmailNotifications(newState)
-    try {
-      await updateUserPreferences({
-        email_notifications: newState as { new_file_received: boolean; file_downloaded: boolean; login_alerts: boolean; password_alerts: boolean; two_factor_alerts: boolean }
-      })
-    } catch {
-      setEmailNotifications(prev => ({
-        ...prev,
-        [key]: !prev[key]
-      }))
-    }
-  }
-
-  return (
-    <NotificationToggleList
-      title="Security Alerts"
-      description="Choose which security events trigger email alerts"
-      icon={<BellIcon className="w-5 h-5 text-brand-orange" />}
-      options={SECURITY_ALERT_OPTIONS}
-      values={emailNotifications}
-      onToggle={handleToggle}
-    />
-  )
-}
-
-// --- Notification Center Placeholder ---
-
-function NotificationCenterPlaceholder() {
-  return (
-    <div className="text-center max-w-md mx-auto py-8">
-      <BellIcon className="w-12 h-12 text-neutral-300 mx-auto mb-4" />
-      <h3 className="text-lg font-medium text-white mb-2">Notification Center</h3>
-      <p className="text-sm text-neutral-500 mb-4">View and manage all your notifications in one place.</p>
-      <Link href="/notifications" className="inline-flex items-center gap-2 px-4 py-2 bg-brand-orange text-white rounded-lg hover:bg-brand-orange/90 transition-colors">
-        Open Notification Center
-        <ChevronRightIcon className="w-4 h-4" />
-      </Link>
-    </div>
-  )
-}
-
-// --- Main Wrapper ---
-
-export default function SettingsModalWrapper() {
-  const { isOpen, closeSettings } = useSettingsModal()
-
-  const sections: SettingsSection[] = [
-    {
-      id: 'pulse',
-      label: 'Account',
-      icon: UserIcon,
-      defaultExpanded: true,
-      items: [
-        { id: 'profile', label: 'Profile', content: <ProfileSettings activeTab="profile" borderless hideDangerZone /> },
-        { id: 'security', label: 'Security', content: <ProfileSettings activeTab="security" borderless /> },
-        { id: 'preferences', label: 'Preferences', content: <ProfileSettings activeTab="preferences" borderless /> },
-        { id: 'danger-zone', label: 'Danger Zone', content: <ProfileSettings activeTab="danger-zone" borderless /> },
-      ],
-    },
-    {
-      id: 'security-section',
-      label: 'Security',
-      icon: LockIcon,
-      items: [
-        { id: 'devices', label: 'Trusted Devices', content: <TrustedDevicesCard /> },
-        { id: 'activity', label: 'Security Activity', content: <SecurityActivityCard /> },
-      ],
-    },
-    {
-      id: 'notifications',
-      label: 'Notifications',
-      icon: BellIcon,
-      items: [
-        { id: 'security-alerts', label: 'Security Alerts', content: <SecurityAlertsCard /> },
-        { id: 'center', label: 'Notification Center', content: <NotificationCenterPlaceholder /> },
-      ],
-    },
-  ]
-
-  return <SettingsModal open={isOpen} onClose={closeSettings} sections={sections} />
-}
diff --git a/lib/settings-modal-context.tsx b/lib/settings-modal-context.tsx
deleted file mode 100644
index f4de243..0000000
--- a/lib/settings-modal-context.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-'use client'
-
-import { createContext, useContext, useState, useCallback } from 'react'
-
-interface SettingsModalContextType {
-  isOpen: boolean
-  openSettings: () => void
-  closeSettings: () => void
-}
-
-const SettingsModalContext = createContext<SettingsModalContextType>({
-  isOpen: false,
-  openSettings: () => {},
-  closeSettings: () => {},
-})
-
-export function SettingsModalProvider({ children }: { children: React.ReactNode }) {
-  const [isOpen, setIsOpen] = useState(false)
-  const openSettings = useCallback(() => setIsOpen(true), [])
-  const closeSettings = useCallback(() => setIsOpen(false), [])
-
-  return (
-    <SettingsModalContext.Provider value={{ isOpen, openSettings, closeSettings }}>
-      {children}
-    </SettingsModalContext.Provider>
-  )
-}
-
-export function useSettingsModal() {
-  return useContext(SettingsModalContext)
-}
-- 
2.49.1


From 6b33483c81ee6f713aacfbc4d3ac9a240297279d Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 10:53:48 +0100
Subject: [PATCH 319/428] fix: remove SettingsModalProvider import and wrapper
 from layout

---
 app/layout-content.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/app/layout-content.tsx b/app/layout-content.tsx
index df84659..ff50fae 100644
--- a/app/layout-content.tsx
+++ b/app/layout-content.tsx
@@ -15,7 +15,6 @@ import { getUserOrganizations, switchContext, type OrganizationMember } from '@/
 import { setSessionAction } from '@/app/actions/auth'
 import { LoadingOverlay } from '@ciphera-net/ui'
 import { useRouter } from 'next/navigation'
-import { SettingsModalProvider } from '@/lib/settings-modal-context'
 import { UnifiedSettingsProvider, useUnifiedSettings } from '@/lib/unified-settings-context'
 import UnifiedSettingsModal from '@/components/settings/unified/UnifiedSettingsModal'
 
@@ -164,10 +163,8 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
 
 export default function LayoutContent({ children }: { children: React.ReactNode }) {
   return (
-    <SettingsModalProvider>
-      <UnifiedSettingsProvider>
-        <LayoutInner>{children}</LayoutInner>
-      </UnifiedSettingsProvider>
-    </SettingsModalProvider>
+    <UnifiedSettingsProvider>
+      <LayoutInner>{children}</LayoutInner>
+    </UnifiedSettingsProvider>
   )
 }
-- 
2.49.1


From 4a950f70701780a735de59960171cb02612ad584 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 10:55:55 +0100
Subject: [PATCH 320/428] fix: wrap org-settings redirect in Suspense for
 useSearchParams

---
 app/org-settings/page.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/org-settings/page.tsx b/app/org-settings/page.tsx
index 75633ae..f89e2da 100644
--- a/app/org-settings/page.tsx
+++ b/app/org-settings/page.tsx
@@ -1,15 +1,11 @@
 'use client'
 
-import { useEffect } from 'react'
+import { Suspense, useEffect } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useUnifiedSettings } from '@/lib/unified-settings-context'
 import { Spinner } from '@ciphera-net/ui'
 
-/**
- * Legacy org settings page — now a redirect handler.
- * Redirects to home and opens unified settings modal at the correct workspace tab.
- */
-export default function OrgSettingsRedirect() {
+function OrgSettingsInner() {
   const router = useRouter()
   const searchParams = useSearchParams()
   const { openUnifiedSettings } = useUnifiedSettings()
@@ -36,3 +32,11 @@ export default function OrgSettingsRedirect() {
     </div>
   )
 }
+
+export default function OrgSettingsRedirect() {
+  return (
+    <Suspense fallback={<div className="flex items-center justify-center py-24"><Spinner className="w-6 h-6 text-neutral-500" /></div>}>
+      <OrgSettingsInner />
+    </Suspense>
+  )
+}
-- 
2.49.1


From b352fa00e49fa1ed52604abee0913aaa16b4fd6f Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 11:06:15 +0100
Subject: [PATCH 321/428] fix: respect requested context over URL
 auto-detection + fix backdrop click

---
 components/settings/unified/UnifiedSettingsModal.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index d1e39ea..90b493d 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -318,7 +318,8 @@ export default function UnifiedSettingsModal() {
       const match = window.location.pathname.match(/\/sites\/([a-f0-9-]+)/)
       if (match) {
         setActiveSiteId(match[1])
-        setContext('site')
+        // Only default to site context if no specific context was requested
+        if (!initTab?.context) setContext('site')
       } else {
         setActiveSiteId(null)
         if (!initTab?.context) setContext('workspace')
@@ -393,6 +394,7 @@ export default function UnifiedSettingsModal() {
               ? 'opacity-0 pointer-events-none transition-opacity duration-150'
               : 'opacity-0 pointer-events-none invisible'
         }`}
+        onClick={handleBackdropClick}
       >
         <div
           className="relative w-full max-w-3xl h-[85vh] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-2xl shadow-xl shadow-black/20 flex flex-col overflow-hidden"
-- 
2.49.1


From 97b9486382981b15a4e68598f59f4024346ffe29 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 11:11:13 +0100
Subject: [PATCH 322/428] fix: org-settings redirect uses router.back() to stay
 on current page

---
 app/org-settings/page.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/org-settings/page.tsx b/app/org-settings/page.tsx
index f89e2da..f9a8d6f 100644
--- a/app/org-settings/page.tsx
+++ b/app/org-settings/page.tsx
@@ -22,8 +22,9 @@ function OrgSettingsInner() {
     }
 
     const mappedTab = tab ? tabMap[tab] || 'general' : 'general'
-    router.replace('/')
-    setTimeout(() => openUnifiedSettings({ context: 'workspace', tab: mappedTab }), 100)
+    // Go back to wherever the user came from (not always /)
+    router.back()
+    setTimeout(() => openUnifiedSettings({ context: 'workspace', tab: mappedTab }), 200)
   }, [searchParams, router, openUnifiedSettings])
 
   return (
-- 
2.49.1


From 6fef6da468bd632b8f6791450717c14405fc1f50 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 11:14:21 +0100
Subject: [PATCH 323/428] fix: widen settings modal to max-w-4xl and 90vh
 height

---
 components/settings/unified/UnifiedSettingsModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index 90b493d..3c6dd4e 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -397,7 +397,7 @@ export default function UnifiedSettingsModal() {
         onClick={handleBackdropClick}
       >
         <div
-          className="relative w-full max-w-3xl h-[85vh] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-2xl shadow-xl shadow-black/20 flex flex-col overflow-hidden"
+          className="relative w-full max-w-4xl h-[90vh] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-2xl shadow-xl shadow-black/20 flex flex-col overflow-hidden"
           onClick={e => e.stopPropagation()}
         >
           {/* Content animates in/out */}
-- 
2.49.1


From c99278e7fa491e81946557fac56bb88f260803b0 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 11:21:01 +0100
Subject: [PATCH 324/428] chore: bump @ciphera-net/ui to 0.3.3

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a8a1e01..8ae1ac3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "pulse-frontend",
       "version": "0.15.0-alpha",
       "dependencies": {
-        "@ciphera-net/ui": "^0.3.2",
+        "@ciphera-net/ui": "^0.3.3",
         "@ducanh2912/next-pwa": "^10.2.9",
         "@icons-pack/react-simple-icons": "^13.13.0",
         "@phosphor-icons/react": "^2.1.10",
@@ -1682,9 +1682,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.3.2",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.3.2/f2271906ba6b3827dfc9598f6aed95bff20ae2a0",
-      "integrity": "sha512-bi8PANCpl27bCfIiHBmgyPFOKkTYgLHw/wOeUe9COAFHJj8MJGEj0rrXMa8L9Bf9IChw+MlITAojrklc1P8Kkw==",
+      "version": "0.3.3",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.3.3/e67893f5cadc93c0dcb0b9987b9d370dce0d073b",
+      "integrity": "sha512-Z5A8qj0ZuMMJq72ZREknxDlL1LciUoirmQmkHmp4H2Vl/5ZWELrvdm65V11hJuc2TZpXnCBxtWa2UoKi/SVOIw==",
       "dependencies": {
         "@phosphor-icons/react": "^2.1.10",
         "class-variance-authority": "^0.7.1",
diff --git a/package.json b/package.json
index 54beb66..93801dd 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.3.2",
+    "@ciphera-net/ui": "^0.3.3",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@icons-pack/react-simple-icons": "^13.13.0",
     "@phosphor-icons/react": "^2.1.10",
-- 
2.49.1


From ee1196f061200a9c069ba34556c4cb169f16ed1b Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 11:26:38 +0100
Subject: [PATCH 325/428] =?UTF-8?q?fix:=20pass=20onOpenOrgSettings=20to=20?=
 =?UTF-8?q?UserMenu=20=E2=80=94=20no=20more=20page=20navigation=20for=20or?=
 =?UTF-8?q?g=20settings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/dashboard/Sidebar.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index e365f53..f65c63c 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -379,12 +379,13 @@ interface SidebarContentProps {
   orgs: OrganizationMember[]
   onSwitchOrganization: (orgId: string | null) => Promise<void>
   openSettings: () => void
+  openOrgSettings: () => void
 }
 
 function SidebarContent({
   isMobile, collapsed, siteId, sites, canEdit, pendingHref,
   onNavigate, onMobileClose, onExpand, onCollapse, onToggle,
-  wasCollapsed, pickerOpenCallbackRef, auth, orgs, onSwitchOrganization, openSettings,
+  wasCollapsed, pickerOpenCallbackRef, auth, orgs, onSwitchOrganization, openSettings, openOrgSettings,
 }: SidebarContentProps) {
   const router = useRouter()
   const c = isMobile ? false : collapsed
@@ -464,6 +465,7 @@ function SidebarContent({
               onCreateOrganization={() => router.push('/onboarding')}
               allowPersonalOrganization={false}
               onOpenSettings={openSettings}
+              onOpenOrgSettings={openOrgSettings}
               compact
               anchor="right"
             >
@@ -565,6 +567,7 @@ export default function Sidebar({
           orgs={orgs}
           onSwitchOrganization={handleSwitchOrganization}
           openSettings={() => openUnifiedSettings({ context: 'account', tab: 'profile' })}
+          openOrgSettings={() => openUnifiedSettings({ context: 'workspace', tab: 'general' })}
         />
       </aside>
 
@@ -608,6 +611,7 @@ export default function Sidebar({
               orgs={orgs}
               onSwitchOrganization={handleSwitchOrganization}
               openSettings={() => openUnifiedSettings({ context: 'account', tab: 'profile' })}
+              openOrgSettings={() => openUnifiedSettings({ context: 'workspace', tab: 'general' })}
             />
           </aside>
         </>
-- 
2.49.1


From 012b0d494f5b503c0266be7258c2a2789f325be1 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 11:33:58 +0100
Subject: [PATCH 326/428] perf: lazy-load tabs, cache listSites, faster tab
 switching animation

---
 .../settings/unified/UnifiedSettingsModal.tsx | 52 ++++++++++---------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index 3c6dd4e..caea503 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -1,32 +1,32 @@
 'use client'
 
 import { useState, useCallback, useEffect, useRef } from 'react'
+import dynamic from 'next/dynamic'
 import { AnimatePresence, motion } from 'framer-motion'
 import { X, GearSix, Buildings, User } from '@phosphor-icons/react'
-import { Button } from '@ciphera-net/ui'
+import { Button, Spinner } from '@ciphera-net/ui'
 import { useUnifiedSettings } from '@/lib/unified-settings-context'
 import { useAuth } from '@/lib/auth/context'
 import { useSite } from '@/lib/swr/dashboard'
 import { listSites, type Site } from '@/lib/api/sites'
 
-// Tab content components — Site
-import SiteGeneralTab from './tabs/SiteGeneralTab'
-import SiteGoalsTab from './tabs/SiteGoalsTab'
-import SiteVisibilityTab from './tabs/SiteVisibilityTab'
-import SitePrivacyTab from './tabs/SitePrivacyTab'
-import SiteBotSpamTab from './tabs/SiteBotSpamTab'
-import SiteReportsTab from './tabs/SiteReportsTab'
-import SiteIntegrationsTab from './tabs/SiteIntegrationsTab'
-// Tab content components — Workspace
-import WorkspaceGeneralTab from './tabs/WorkspaceGeneralTab'
-import WorkspaceBillingTab from './tabs/WorkspaceBillingTab'
-import WorkspaceMembersTab from './tabs/WorkspaceMembersTab'
-import WorkspaceNotificationsTab from './tabs/WorkspaceNotificationsTab'
-import WorkspaceAuditTab from './tabs/WorkspaceAuditTab'
-// Tab content components — Account
-import AccountProfileTab from './tabs/AccountProfileTab'
-import AccountSecurityTab from './tabs/AccountSecurityTab'
-import AccountDevicesTab from './tabs/AccountDevicesTab'
+// Lazy-load tab components — only loaded when the tab is first rendered
+const tabLoader = () => <div className="flex items-center justify-center py-12"><Spinner className="w-6 h-6 text-neutral-500" /></div>
+const SiteGeneralTab = dynamic(() => import('./tabs/SiteGeneralTab'), { loading: tabLoader })
+const SiteGoalsTab = dynamic(() => import('./tabs/SiteGoalsTab'), { loading: tabLoader })
+const SiteVisibilityTab = dynamic(() => import('./tabs/SiteVisibilityTab'), { loading: tabLoader })
+const SitePrivacyTab = dynamic(() => import('./tabs/SitePrivacyTab'), { loading: tabLoader })
+const SiteBotSpamTab = dynamic(() => import('./tabs/SiteBotSpamTab'), { loading: tabLoader })
+const SiteReportsTab = dynamic(() => import('./tabs/SiteReportsTab'), { loading: tabLoader })
+const SiteIntegrationsTab = dynamic(() => import('./tabs/SiteIntegrationsTab'), { loading: tabLoader })
+const WorkspaceGeneralTab = dynamic(() => import('./tabs/WorkspaceGeneralTab'), { loading: tabLoader })
+const WorkspaceBillingTab = dynamic(() => import('./tabs/WorkspaceBillingTab'), { loading: tabLoader })
+const WorkspaceMembersTab = dynamic(() => import('./tabs/WorkspaceMembersTab'), { loading: tabLoader })
+const WorkspaceNotificationsTab = dynamic(() => import('./tabs/WorkspaceNotificationsTab'), { loading: tabLoader })
+const WorkspaceAuditTab = dynamic(() => import('./tabs/WorkspaceAuditTab'), { loading: tabLoader })
+const AccountProfileTab = dynamic(() => import('./tabs/AccountProfileTab'), { loading: tabLoader })
+const AccountSecurityTab = dynamic(() => import('./tabs/AccountSecurityTab'), { loading: tabLoader })
+const AccountDevicesTab = dynamic(() => import('./tabs/AccountDevicesTab'), { loading: tabLoader })
 
 // ─── Types ──────────────────────────────────────────────────────
 
@@ -326,9 +326,12 @@ export default function UnifiedSettingsModal() {
       }
     }
 
-    listSites().then(data => {
-      setSites(Array.isArray(data) ? data : [])
-    }).catch(() => {})
+    // Only fetch sites if we don't have them yet
+    if (sites.length === 0) {
+      listSites().then(data => {
+        setSites(Array.isArray(data) ? data : [])
+      }).catch(() => {})
+    }
   }, [isOpen, user?.org_id])
 
   // Global keyboard shortcuts: `,` toggles settings, Escape closes
@@ -437,13 +440,12 @@ export default function UnifiedSettingsModal() {
 
               {/* Content */}
               <div className="flex-1 overflow-y-auto overflow-x-hidden">
-                <AnimatePresence mode="wait">
+                <AnimatePresence initial={false}>
                   <motion.div
                     key={`${context}-${activeTab}`}
                     initial={{ opacity: 0 }}
                     animate={{ opacity: 1 }}
-                    exit={{ opacity: 0 }}
-                    transition={{ duration: 0.12 }}
+                    transition={{ duration: 0.08 }}
                     className="p-6"
                   >
                     <TabContent context={context} activeTab={activeTab} siteId={activeSiteId} onDirtyChange={handleDirtyChange} onRegisterSave={handleRegisterSave} />
-- 
2.49.1


From e7d2ecf50bc6cb0cd6f148dc1afe5447cfc366dc Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 11:38:39 +0100
Subject: [PATCH 327/428] =?UTF-8?q?fix:=20remove=20tab=20content=20animati?=
 =?UTF-8?q?on=20=E2=80=94=20prevents=20flash=20on=20context=20switch?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../settings/unified/UnifiedSettingsModal.tsx      | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index caea503..f3f02c3 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -440,17 +440,9 @@ export default function UnifiedSettingsModal() {
 
               {/* Content */}
               <div className="flex-1 overflow-y-auto overflow-x-hidden">
-                <AnimatePresence initial={false}>
-                  <motion.div
-                    key={`${context}-${activeTab}`}
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    transition={{ duration: 0.08 }}
-                    className="p-6"
-                  >
-                    <TabContent context={context} activeTab={activeTab} siteId={activeSiteId} onDirtyChange={handleDirtyChange} onRegisterSave={handleRegisterSave} />
-                  </motion.div>
-                </AnimatePresence>
+                <div key={`${context}-${activeTab}`} className="p-6">
+                  <TabContent context={context} activeTab={activeTab} siteId={activeSiteId} onDirtyChange={handleDirtyChange} onRegisterSave={handleRegisterSave} />
+                </div>
               </div>
 
               {/* Save bar */}
-- 
2.49.1


From c63e72a578ad22222983735afa66d5e56cc48f33 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 11:39:46 +0100
Subject: [PATCH 328/428] feat: sliding background animation on context
 switcher

---
 .../settings/unified/UnifiedSettingsModal.tsx | 57 ++++++++-----------
 1 file changed, 23 insertions(+), 34 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index f3f02c3..4cbee82 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -72,46 +72,35 @@ function ContextSwitcher({
   onChange: (ctx: SettingsContext) => void
   activeSiteDomain: string | null
 }) {
+  const items: { id: SettingsContext; icon: React.ReactNode; label: string; visible: boolean }[] = [
+    { id: 'site', icon: <GearSix weight="bold" className="w-4 h-4" />, label: activeSiteDomain || '', visible: !!activeSiteDomain },
+    { id: 'workspace', icon: <Buildings weight="bold" className="w-4 h-4" />, label: 'Organization', visible: true },
+    { id: 'account', icon: <User weight="bold" className="w-4 h-4" />, label: 'Account', visible: true },
+  ]
+
   return (
     <div className="flex items-center gap-1 p-1 bg-neutral-800/50 rounded-xl">
-      {/* Site button — locked to current site, no dropdown */}
-      {activeSiteDomain && (
+      {items.filter(i => i.visible).map(item => (
         <button
-          onClick={() => onChange('site')}
-          className={`flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
-            active === 'site'
-              ? 'bg-neutral-700 text-white shadow-sm'
-              : 'text-neutral-400 hover:text-white'
+          key={item.id}
+          onClick={() => onChange(item.id)}
+          className={`relative flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg transition-colors duration-200 ${
+            active === item.id ? 'text-white' : 'text-neutral-400 hover:text-white'
           }`}
         >
-          <GearSix weight="bold" className="w-4 h-4" />
-          <span className="hidden sm:inline">{activeSiteDomain}</span>
+          {active === item.id && (
+            <motion.div
+              layoutId="context-switcher-bg"
+              className="absolute inset-0 bg-neutral-700 rounded-lg shadow-sm"
+              transition={{ type: 'spring', bounce: 0.15, duration: 0.35 }}
+            />
+          )}
+          <span className="relative z-10 flex items-center gap-2">
+            {item.icon}
+            <span className="hidden sm:inline">{item.label}</span>
+          </span>
         </button>
-      )}
-
-      <button
-        onClick={() => onChange('workspace')}
-        className={`flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
-          active === 'workspace'
-            ? 'bg-neutral-700 text-white shadow-sm'
-            : 'text-neutral-400 hover:text-white'
-        }`}
-      >
-        <Buildings weight="bold" className="w-4 h-4" />
-        <span className="hidden sm:inline">Organization</span>
-      </button>
-
-      <button
-        onClick={() => onChange('account')}
-        className={`flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
-          active === 'account'
-            ? 'bg-neutral-700 text-white shadow-sm'
-            : 'text-neutral-400 hover:text-white'
-        }`}
-      >
-        <User weight="bold" className="w-4 h-4" />
-        <span className="hidden sm:inline">Account</span>
-      </button>
+      ))}
     </div>
   )
 }
-- 
2.49.1


From 952cebc59aad052ee41b8403f1a638502df1ecb4 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 11:48:58 +0100
Subject: [PATCH 329/428] =?UTF-8?q?perf:=20lazy-load=20Chart=20component?=
 =?UTF-8?q?=20=E2=80=94=20prevents=20main=20thread=20freeze=20on=20page=20?=
 =?UTF-8?q?load?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/sites/[id]/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx
index 1d34768..9b23553 100644
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -25,7 +25,7 @@ import dynamic from 'next/dynamic'
 import { DashboardSkeleton, useMinimumLoading, useSkeletonFade } from '@/components/skeletons'
 import FilterBar from '@/components/dashboard/FilterBar'
 import AddFilterDropdown, { type FilterSuggestion, type FilterSuggestions } from '@/components/dashboard/AddFilterDropdown'
-import Chart from '@/components/dashboard/Chart'
+const Chart = dynamic(() => import('@/components/dashboard/Chart'), { ssr: false })
 import ContentStats from '@/components/dashboard/ContentStats'
 import TopReferrers from '@/components/dashboard/TopReferrers'
 import Locations from '@/components/dashboard/Locations'
-- 
2.49.1


From ef3edd963adcbb6e2f0036d197256d6f6323812f Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 11:52:29 +0100
Subject: [PATCH 330/428] =?UTF-8?q?perf:=20reduce=20chart=20animation=20fr?=
 =?UTF-8?q?om=201100ms=20to=20400ms=20=E2=80=94=20shorter=20main=20thread?=
 =?UTF-8?q?=20block?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/dashboard/Chart.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index 9eceb86..700caa6 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -431,6 +431,7 @@ export default function Chart({
                 xDataKey="dateObj"
                 aspectRatio="2.5 / 1"
                 margin={{ top: 20, right: 20, bottom: 40, left: 50 }}
+                animationDuration={400}
               >
                 <VisxGrid horizontal vertical={false} stroke="var(--chart-grid)" strokeDasharray="4,4" />
                 <VisxArea
-- 
2.49.1


From 704557f233f7a6c434c2aec38c59f75175b2835a Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 20:24:54 +0100
Subject: [PATCH 331/428] feat: update frontend billing api for mollie
 (country, vat_id, payment method update)

---
 components/PricingSection.tsx | 4 ++--
 lib/api/billing.ts            | 9 +++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/components/PricingSection.tsx b/components/PricingSection.tsx
index abe8c1d..3d6c276 100644
--- a/components/PricingSection.tsx
+++ b/components/PricingSection.tsx
@@ -109,7 +109,7 @@ export default function PricingSection() {
   const [loadingPlan, setLoadingPlan] = useState<string | null>(null)
   const { user } = useAuth()
 
-  // * Show toast when redirected from Polar Checkout with canceled=true
+  // * Show toast when redirected from Mollie Checkout with canceled=true
   useEffect(() => {
     if (searchParams.get('canceled') === 'true') {
       toast.info('Checkout was canceled. You can try again whenever you’re ready.')
@@ -196,7 +196,7 @@ export default function PricingSection() {
         limit,
       })
 
-      // 3. Redirect to Polar Checkout
+      // 3. Redirect to Mollie Checkout
       if (url) {
         window.location.href = url
       } else {
diff --git a/lib/api/billing.ts b/lib/api/billing.ts
index 49660a6..9f2d29c 100644
--- a/lib/api/billing.ts
+++ b/lib/api/billing.ts
@@ -72,6 +72,8 @@ export interface CreateCheckoutParams {
   plan_id: string
   interval: string
   limit: number
+  country: string
+  vat_id?: string
 }
 
 export async function createCheckoutSession(params: CreateCheckoutParams): Promise<{ url: string }> {
@@ -81,6 +83,13 @@ export async function createCheckoutSession(params: CreateCheckoutParams): Promi
   })
 }
 
+/** Creates a Mollie checkout session to update the payment mandate. */
+export async function updatePaymentMethod(): Promise<{ url: string }> {
+  return apiRequest<{ url: string }>('/api/billing/update-payment-method', {
+    method: 'POST',
+  })
+}
+
 export interface Order {
   id: string
   total_amount: number
-- 
2.49.1


From 94d0b3498fd16c8b300a8264b9fc39072746a134 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 20:27:07 +0100
Subject: [PATCH 332/428] feat: add country and vat id fields to checkout flow

---
 app/welcome/page.tsx          |  63 +++++++++++-
 components/PricingSection.tsx | 185 +++++++++++++++++++++++++++++-----
 2 files changed, 221 insertions(+), 27 deletions(-)

diff --git a/app/welcome/page.tsx b/app/welcome/page.tsx
index 55065f6..e30ee61 100644
--- a/app/welcome/page.tsx
+++ b/app/welcome/page.tsx
@@ -102,6 +102,10 @@ function WelcomeContent() {
   const [hadPendingCheckout, setHadPendingCheckout] = useState<boolean | null>(null)
   const [dismissedPendingCheckout, setDismissedPendingCheckout] = useState(false)
 
+  const [welcomeCountry, setWelcomeCountry] = useState('')
+  const [welcomeVatId, setWelcomeVatId] = useState('')
+  const [showBillingFields, setShowBillingFields] = useState(false)
+
   const [organizations, setOrganizations] = useState<OrganizationMember[] | null>(null)
   const [orgsLoading, setOrgsLoading] = useState(false)
   const [switchingOrgId, setSwitchingOrgId] = useState<string | null>(null)
@@ -211,6 +215,13 @@ function WelcomeContent() {
       setStep(4)
       return
     }
+
+    // Show billing fields first if country not yet selected
+    if (!welcomeCountry) {
+      setShowBillingFields(true)
+      return
+    }
+
     setPlanLoading(true)
     setPlanError('')
     try {
@@ -220,6 +231,8 @@ function WelcomeContent() {
         plan_id: intent.planId,
         interval: intent.interval || 'month',
         limit: intent.limit ?? 100000,
+        country: welcomeCountry,
+        vat_id: welcomeVatId || undefined,
       })
       localStorage.removeItem('pulse_pending_checkout')
       if (url) {
@@ -568,6 +581,52 @@ function WelcomeContent() {
               {planError && (
                 <p className="text-sm text-red-500 dark:text-red-400 mb-4 text-center">{planError}</p>
               )}
+              {showBillingFields && showPendingCheckoutInStep3 && (
+                <div className="space-y-3 mb-5">
+                  <div>
+                    <label htmlFor="welcome-country" className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
+                      Country <span className="text-red-400">*</span>
+                    </label>
+                    <select
+                      id="welcome-country"
+                      required
+                      value={welcomeCountry}
+                      onChange={(e) => setWelcomeCountry(e.target.value)}
+                      className="w-full rounded-lg border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-800 px-3 py-2.5 text-sm text-neutral-900 dark:text-white focus:border-brand-orange focus:outline-none focus:ring-1 focus:ring-brand-orange transition-colors"
+                    >
+                      <option value="" disabled>Select a country</option>
+                      {[
+                        { code: 'BE', label: 'Belgium' }, { code: 'NL', label: 'Netherlands' }, { code: 'DE', label: 'Germany' },
+                        { code: 'FR', label: 'France' }, { code: 'AT', label: 'Austria' }, { code: 'IT', label: 'Italy' },
+                        { code: 'ES', label: 'Spain' }, { code: 'PT', label: 'Portugal' }, { code: 'IE', label: 'Ireland' },
+                        { code: 'LU', label: 'Luxembourg' }, { code: 'FI', label: 'Finland' }, { code: 'SE', label: 'Sweden' },
+                        { code: 'DK', label: 'Denmark' }, { code: 'PL', label: 'Poland' }, { code: 'CZ', label: 'Czech Republic' },
+                        { code: 'RO', label: 'Romania' }, { code: 'BG', label: 'Bulgaria' }, { code: 'HR', label: 'Croatia' },
+                        { code: 'SI', label: 'Slovenia' }, { code: 'SK', label: 'Slovakia' }, { code: 'HU', label: 'Hungary' },
+                        { code: 'LT', label: 'Lithuania' }, { code: 'LV', label: 'Latvia' }, { code: 'EE', label: 'Estonia' },
+                        { code: 'MT', label: 'Malta' }, { code: 'CY', label: 'Cyprus' }, { code: 'GR', label: 'Greece' },
+                        { code: 'US', label: 'United States' }, { code: 'GB', label: 'United Kingdom' },
+                        { code: 'CH', label: 'Switzerland' }, { code: 'NO', label: 'Norway' },
+                        { code: 'CA', label: 'Canada' }, { code: 'AU', label: 'Australia' }, { code: 'OTHER', label: 'Other' },
+                      ].map((c) => (
+                        <option key={c.code} value={c.code}>{c.label}</option>
+                      ))}
+                    </select>
+                  </div>
+                  <div>
+                    <label htmlFor="welcome-vat" className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
+                      VAT ID <span className="text-neutral-500">(optional)</span>
+                    </label>
+                    <Input
+                      id="welcome-vat"
+                      type="text"
+                      value={welcomeVatId}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => setWelcomeVatId(e.target.value)}
+                      placeholder="e.g. BE0123456789"
+                    />
+                  </div>
+                </div>
+              )}
               <div className="flex flex-col sm:flex-row gap-3 justify-center">
                 {showPendingCheckoutInStep3 ? (
                   <>
@@ -575,9 +634,9 @@ function WelcomeContent() {
                       variant="primary"
                       className="w-full sm:w-auto"
                       onClick={handlePlanContinue}
-                      disabled={planLoading}
+                      disabled={planLoading || (showBillingFields && !welcomeCountry)}
                     >
-                      Continue to checkout
+                      {showBillingFields ? 'Continue to payment' : 'Continue to checkout'}
                     </Button>
                     <Button
                       variant="secondary"
diff --git a/components/PricingSection.tsx b/components/PricingSection.tsx
index 3d6c276..e7c4af4 100644
--- a/components/PricingSection.tsx
+++ b/components/PricingSection.tsx
@@ -102,11 +102,52 @@ const TRAFFIC_TIERS = [
   },
 ]
 
+const COUNTRY_OPTIONS = [
+  { code: 'BE', label: 'Belgium' },
+  { code: 'NL', label: 'Netherlands' },
+  { code: 'DE', label: 'Germany' },
+  { code: 'FR', label: 'France' },
+  { code: 'AT', label: 'Austria' },
+  { code: 'IT', label: 'Italy' },
+  { code: 'ES', label: 'Spain' },
+  { code: 'PT', label: 'Portugal' },
+  { code: 'IE', label: 'Ireland' },
+  { code: 'LU', label: 'Luxembourg' },
+  { code: 'FI', label: 'Finland' },
+  { code: 'SE', label: 'Sweden' },
+  { code: 'DK', label: 'Denmark' },
+  { code: 'PL', label: 'Poland' },
+  { code: 'CZ', label: 'Czech Republic' },
+  { code: 'RO', label: 'Romania' },
+  { code: 'BG', label: 'Bulgaria' },
+  { code: 'HR', label: 'Croatia' },
+  { code: 'SI', label: 'Slovenia' },
+  { code: 'SK', label: 'Slovakia' },
+  { code: 'HU', label: 'Hungary' },
+  { code: 'LT', label: 'Lithuania' },
+  { code: 'LV', label: 'Latvia' },
+  { code: 'EE', label: 'Estonia' },
+  { code: 'MT', label: 'Malta' },
+  { code: 'CY', label: 'Cyprus' },
+  { code: 'GR', label: 'Greece' },
+  { code: 'US', label: 'United States' },
+  { code: 'GB', label: 'United Kingdom' },
+  { code: 'CH', label: 'Switzerland' },
+  { code: 'NO', label: 'Norway' },
+  { code: 'CA', label: 'Canada' },
+  { code: 'AU', label: 'Australia' },
+  { code: 'OTHER', label: 'Other' },
+]
+
 export default function PricingSection() {
   const searchParams = useSearchParams()
   const [isYearly, setIsYearly] = useState(false)
   const [sliderIndex, setSliderIndex] = useState(2) // Default to 100k (index 2)
   const [loadingPlan, setLoadingPlan] = useState<string | null>(null)
+  const [checkoutCountry, setCheckoutCountry] = useState('')
+  const [checkoutVatId, setCheckoutVatId] = useState('')
+  const [showCheckoutForm, setShowCheckoutForm] = useState(false)
+  const [pendingCheckout, setPendingCheckout] = useState<{ planId: string; interval: string; limit: number } | null>(null)
   const { user } = useAuth()
 
   // * Show toast when redirected from Mollie Checkout with canceled=true
@@ -167,42 +208,49 @@ export default function PricingSection() {
   }
 
   const handleSubscribe = async (planId: string, options?: { interval?: string, limit?: number }) => {
-    try {
-      setLoadingPlan(planId)
-      
-      // 1. If not logged in, redirect to login/signup
-      if (!user) {
-        // Store checkout intent
-        const intent = {
-          planId,
-          interval: isYearly ? 'year' : 'month',
-          limit: currentTraffic.value,
-          sliderIndex, // Store UI state to restore it
-          isYearly     // Store UI state to restore it
-        }
-        localStorage.setItem('pulse_pending_checkout', JSON.stringify(intent))
-        
-        initiateOAuthFlow() 
-        return
+    // 1. If not logged in, redirect to login/signup
+    if (!user) {
+      const intent = {
+        planId,
+        interval: isYearly ? 'year' : 'month',
+        limit: currentTraffic.value,
+        sliderIndex,
+        isYearly
       }
+      localStorage.setItem('pulse_pending_checkout', JSON.stringify(intent))
+      initiateOAuthFlow()
+      return
+    }
 
-      // 2. Call backend to create checkout session
-      const interval = options?.interval || (isYearly ? 'year' : 'month')
-      const limit = options?.limit || currentTraffic.value
+    // 2. Show checkout form to collect country + optional VAT
+    const interval = options?.interval || (isYearly ? 'year' : 'month')
+    const limit = options?.limit || currentTraffic.value
+    setPendingCheckout({ planId, interval, limit })
+    setCheckoutCountry('')
+    setCheckoutVatId('')
+    setShowCheckoutForm(true)
+  }
+
+  const handleCheckoutSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!pendingCheckout || !checkoutCountry) return
+
+    try {
+      setLoadingPlan(pendingCheckout.planId)
 
       const { url } = await createCheckoutSession({
-        plan_id: planId,
-        interval,
-        limit,
+        plan_id: pendingCheckout.planId,
+        interval: pendingCheckout.interval,
+        limit: pendingCheckout.limit,
+        country: checkoutCountry,
+        vat_id: checkoutVatId || undefined,
       })
 
-      // 3. Redirect to Mollie Checkout
       if (url) {
         window.location.href = url
       } else {
         throw new Error('No checkout URL returned')
       }
-
     } catch (error: unknown) {
       logger.error('Checkout error:', error)
       toast.error('Failed to start checkout — please try again')
@@ -211,6 +259,14 @@ export default function PricingSection() {
     }
   }
 
+  const handleCheckoutCancel = () => {
+    setShowCheckoutForm(false)
+    setPendingCheckout(null)
+    setCheckoutCountry('')
+    setCheckoutVatId('')
+    setLoadingPlan(null)
+  }
+
   return (
     <section className="py-24 px-4 max-w-6xl mx-auto">
       <motion.div
@@ -437,6 +493,85 @@ export default function PricingSection() {
           </div>
         </div>
       </motion.div>
+
+      {/* Checkout Country / VAT Modal */}
+      {showCheckoutForm && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center px-4">
+          <div
+            className="absolute inset-0 bg-black/60"
+            onClick={handleCheckoutCancel}
+          />
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.2 }}
+            className="relative w-full max-w-md border border-neutral-800 rounded-2xl bg-neutral-900 p-6 shadow-xl"
+          >
+            <h3 className="text-lg font-bold text-white mb-1">
+              Billing details
+            </h3>
+            <p className="text-sm text-neutral-400 mb-6">
+              Select your country to calculate the correct tax rate.
+            </p>
+
+            <form onSubmit={handleCheckoutSubmit} className="space-y-4">
+              {/* Country */}
+              <div>
+                <label htmlFor="checkout-country" className="block text-sm font-medium text-neutral-300 mb-1.5">
+                  Country <span className="text-red-400">*</span>
+                </label>
+                <select
+                  id="checkout-country"
+                  required
+                  value={checkoutCountry}
+                  onChange={(e) => setCheckoutCountry(e.target.value)}
+                  className="w-full rounded-lg border border-neutral-700 bg-neutral-800 px-3 py-2.5 text-sm text-white placeholder-neutral-500 focus:border-brand-orange focus:outline-none focus:ring-1 focus:ring-brand-orange transition-colors"
+                >
+                  <option value="" disabled>Select a country</option>
+                  {COUNTRY_OPTIONS.map((c) => (
+                    <option key={c.code} value={c.code}>{c.label}</option>
+                  ))}
+                </select>
+              </div>
+
+              {/* VAT ID */}
+              <div>
+                <label htmlFor="checkout-vat" className="block text-sm font-medium text-neutral-300 mb-1.5">
+                  VAT ID <span className="text-neutral-500">(optional)</span>
+                </label>
+                <input
+                  id="checkout-vat"
+                  type="text"
+                  value={checkoutVatId}
+                  onChange={(e) => setCheckoutVatId(e.target.value)}
+                  placeholder="e.g. BE0123456789"
+                  className="w-full rounded-lg border border-neutral-700 bg-neutral-800 px-3 py-2.5 text-sm text-white placeholder-neutral-500 focus:border-brand-orange focus:outline-none focus:ring-1 focus:ring-brand-orange transition-colors"
+                />
+              </div>
+
+              {/* Actions */}
+              <div className="flex items-center gap-3 pt-2">
+                <Button
+                  type="submit"
+                  variant="primary"
+                  disabled={!checkoutCountry || !!loadingPlan}
+                  className="flex-1"
+                >
+                  {loadingPlan ? 'Loading...' : 'Continue to payment'}
+                </Button>
+                <Button
+                  type="button"
+                  variant="secondary"
+                  onClick={handleCheckoutCancel}
+                  className="flex-1"
+                >
+                  Cancel
+                </Button>
+              </div>
+            </form>
+          </motion.div>
+        </div>
+      )}
     </section>
   )
 }
-- 
2.49.1


From 4e7ad887636d432cb74f9aa68ea807a6b93dfa22 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 20:46:47 +0100
Subject: [PATCH 333/428] fix: update billing tab for mollie response format,
 use updatePaymentMethod

---
 .../unified/tabs/WorkspaceBillingTab.tsx      | 23 ++++++++-----------
 lib/api/billing.ts                            |  6 +----
 2 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/components/settings/unified/tabs/WorkspaceBillingTab.tsx b/components/settings/unified/tabs/WorkspaceBillingTab.tsx
index e61c7cc..a5ecdff 100644
--- a/components/settings/unified/tabs/WorkspaceBillingTab.tsx
+++ b/components/settings/unified/tabs/WorkspaceBillingTab.tsx
@@ -5,7 +5,7 @@ import Link from 'next/link'
 import { Button, toast, Spinner } from '@ciphera-net/ui'
 import { CreditCard, ArrowSquareOut } from '@phosphor-icons/react'
 import { useSubscription } from '@/lib/swr/dashboard'
-import { createPortalSession, cancelSubscription, resumeSubscription, getOrders, type Order } from '@/lib/api/billing'
+import { updatePaymentMethod, cancelSubscription, resumeSubscription, getOrders, type Order } from '@/lib/api/billing'
 import { formatDateLong, formatDate } from '@/lib/utils/formatDate'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
 
@@ -18,16 +18,16 @@ export default function WorkspaceBillingTab() {
     getOrders().then(setOrders).catch(() => {})
   }, [])
 
-  const formatAmount = (amount: number, currency: string) => {
-    return new Intl.NumberFormat('en-GB', { style: 'currency', currency: currency || 'USD' }).format(amount / 100)
+  const formatAmount = (amount: string, currency: string) => {
+    return new Intl.NumberFormat('en-GB', { style: 'currency', currency: currency || 'EUR' }).format(parseFloat(amount))
   }
 
   const handleManageBilling = async () => {
     try {
-      const { url } = await createPortalSession()
-      if (url) window.open(url, '_blank')
+      const { url } = await updatePaymentMethod()
+      if (url) window.location.href = url
     } catch (err) {
-      toast.error(getAuthErrorMessage(err as Error) || 'Failed to open billing portal')
+      toast.error(getAuthErrorMessage(err as Error) || 'Failed to update payment method')
     }
   }
 
@@ -149,7 +149,7 @@ export default function WorkspaceBillingTab() {
         {subscription.has_payment_method && (
           <Button onClick={handleManageBilling} variant="secondary" className="text-sm gap-1.5">
             <ArrowSquareOut weight="bold" className="w-3.5 h-3.5" />
-            Payment method & invoices
+            Update payment method
           </Button>
         )}
 
@@ -180,13 +180,10 @@ export default function WorkspaceBillingTab() {
               <div key={order.id} className="flex items-center justify-between p-3 rounded-lg border border-neutral-800 text-sm">
                 <div className="flex items-center gap-3">
                   <span className="text-neutral-300">{formatDate(new Date(order.created_at))}</span>
-                  <span className="text-white font-medium">{formatAmount(order.total_amount, order.currency)}</span>
-                  {order.invoice_number && (
-                    <span className="text-neutral-500 text-xs">{order.invoice_number}</span>
-                  )}
+                  <span className="text-white font-medium">{formatAmount(order.amount, order.currency)}</span>
                 </div>
-                <span className={`text-xs px-2 py-0.5 rounded-full ${order.paid ? 'bg-green-900/30 text-green-400' : 'bg-neutral-800 text-neutral-400'}`}>
-                  {order.paid ? 'Paid' : order.status}
+                <span className={`text-xs px-2 py-0.5 rounded-full ${order.status === 'paid' ? 'bg-green-900/30 text-green-400' : 'bg-neutral-800 text-neutral-400'}`}>
+                  {order.status === 'paid' ? 'Paid' : order.status}
                 </span>
               </div>
             ))}
diff --git a/lib/api/billing.ts b/lib/api/billing.ts
index 9f2d29c..666ac47 100644
--- a/lib/api/billing.ts
+++ b/lib/api/billing.ts
@@ -92,14 +92,10 @@ export async function updatePaymentMethod(): Promise<{ url: string }> {
 
 export interface Order {
   id: string
-  total_amount: number
-  subtotal_amount: number
-  tax_amount: number
+  amount: string
   currency: string
   status: string
   created_at: string
-  paid: boolean
-  invoice_number: string
 }
 
 export async function getOrders(): Promise<Order[]> {
-- 
2.49.1


From d419322ab71e39cf8de91b9e8d45d0c49e6966a7 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 21:22:12 +0100
Subject: [PATCH 334/428] refactor: extract shared country list and plan prices

---
 components/PricingSection.tsx | 39 ++++-------------------------------
 lib/countries.ts              | 35 +++++++++++++++++++++++++++++++
 lib/plans.ts                  | 11 ++++++++++
 3 files changed, 50 insertions(+), 35 deletions(-)
 create mode 100644 lib/countries.ts

diff --git a/components/PricingSection.tsx b/components/PricingSection.tsx
index e7c4af4..656b036 100644
--- a/components/PricingSection.tsx
+++ b/components/PricingSection.tsx
@@ -8,6 +8,7 @@ import { Button, CheckCircleIcon } from '@ciphera-net/ui'
 import { useAuth } from '@/lib/auth/context'
 import { initiateOAuthFlow } from '@/lib/api/oauth'
 import { toast } from '@ciphera-net/ui'
+import { COUNTRY_OPTIONS } from '@/lib/countries'
 import { createCheckoutSession } from '@/lib/api/billing'
 
 // 1. Define Plans with IDs and Site Limits
@@ -102,40 +103,8 @@ const TRAFFIC_TIERS = [
   },
 ]
 
-const COUNTRY_OPTIONS = [
-  { code: 'BE', label: 'Belgium' },
-  { code: 'NL', label: 'Netherlands' },
-  { code: 'DE', label: 'Germany' },
-  { code: 'FR', label: 'France' },
-  { code: 'AT', label: 'Austria' },
-  { code: 'IT', label: 'Italy' },
-  { code: 'ES', label: 'Spain' },
-  { code: 'PT', label: 'Portugal' },
-  { code: 'IE', label: 'Ireland' },
-  { code: 'LU', label: 'Luxembourg' },
-  { code: 'FI', label: 'Finland' },
-  { code: 'SE', label: 'Sweden' },
-  { code: 'DK', label: 'Denmark' },
-  { code: 'PL', label: 'Poland' },
-  { code: 'CZ', label: 'Czech Republic' },
-  { code: 'RO', label: 'Romania' },
-  { code: 'BG', label: 'Bulgaria' },
-  { code: 'HR', label: 'Croatia' },
-  { code: 'SI', label: 'Slovenia' },
-  { code: 'SK', label: 'Slovakia' },
-  { code: 'HU', label: 'Hungary' },
-  { code: 'LT', label: 'Lithuania' },
-  { code: 'LV', label: 'Latvia' },
-  { code: 'EE', label: 'Estonia' },
-  { code: 'MT', label: 'Malta' },
-  { code: 'CY', label: 'Cyprus' },
-  { code: 'GR', label: 'Greece' },
-  { code: 'US', label: 'United States' },
-  { code: 'GB', label: 'United Kingdom' },
-  { code: 'CH', label: 'Switzerland' },
-  { code: 'NO', label: 'Norway' },
-  { code: 'CA', label: 'Canada' },
-  { code: 'AU', label: 'Australia' },
+const PRICING_COUNTRY_OPTIONS = [
+  ...COUNTRY_OPTIONS.map((c) => ({ code: c.value, label: c.label })),
   { code: 'OTHER', label: 'Other' },
 ]
 
@@ -528,7 +497,7 @@ export default function PricingSection() {
                   className="w-full rounded-lg border border-neutral-700 bg-neutral-800 px-3 py-2.5 text-sm text-white placeholder-neutral-500 focus:border-brand-orange focus:outline-none focus:ring-1 focus:ring-brand-orange transition-colors"
                 >
                   <option value="" disabled>Select a country</option>
-                  {COUNTRY_OPTIONS.map((c) => (
+                  {PRICING_COUNTRY_OPTIONS.map((c) => (
                     <option key={c.code} value={c.code}>{c.label}</option>
                   ))}
                 </select>
diff --git a/lib/countries.ts b/lib/countries.ts
new file mode 100644
index 0000000..33959e1
--- /dev/null
+++ b/lib/countries.ts
@@ -0,0 +1,35 @@
+export const COUNTRY_OPTIONS = [
+  { value: 'BE', label: 'Belgium' },
+  { value: 'NL', label: 'Netherlands' },
+  { value: 'DE', label: 'Germany' },
+  { value: 'FR', label: 'France' },
+  { value: 'AT', label: 'Austria' },
+  { value: 'IT', label: 'Italy' },
+  { value: 'ES', label: 'Spain' },
+  { value: 'PT', label: 'Portugal' },
+  { value: 'IE', label: 'Ireland' },
+  { value: 'LU', label: 'Luxembourg' },
+  { value: 'FI', label: 'Finland' },
+  { value: 'SE', label: 'Sweden' },
+  { value: 'DK', label: 'Denmark' },
+  { value: 'PL', label: 'Poland' },
+  { value: 'CZ', label: 'Czech Republic' },
+  { value: 'RO', label: 'Romania' },
+  { value: 'BG', label: 'Bulgaria' },
+  { value: 'HR', label: 'Croatia' },
+  { value: 'SI', label: 'Slovenia' },
+  { value: 'SK', label: 'Slovakia' },
+  { value: 'HU', label: 'Hungary' },
+  { value: 'LT', label: 'Lithuania' },
+  { value: 'LV', label: 'Latvia' },
+  { value: 'EE', label: 'Estonia' },
+  { value: 'MT', label: 'Malta' },
+  { value: 'CY', label: 'Cyprus' },
+  { value: 'GR', label: 'Greece' },
+  { value: 'US', label: 'United States' },
+  { value: 'GB', label: 'United Kingdom' },
+  { value: 'CH', label: 'Switzerland' },
+  { value: 'NO', label: 'Norway' },
+  { value: 'CA', label: 'Canada' },
+  { value: 'AU', label: 'Australia' },
+] as const
diff --git a/lib/plans.ts b/lib/plans.ts
index a2d2ce9..0707111 100644
--- a/lib/plans.ts
+++ b/lib/plans.ts
@@ -79,3 +79,14 @@ export function formatRetentionMonths(months: number): string {
   if (Number.isInteger(years)) return years === 1 ? '1 year' : `${years} years`
   return `${months} months`
 }
+
+/**
+ * Monthly prices in EUR cents per plan and traffic tier.
+ * IMPORTANT: Must stay in sync with backend GetSubscriptionAmount() in internal/billing/mollie.go
+ * Yearly = monthly * 11 (1 month free)
+ */
+export const PLAN_PRICES: Record<string, Record<number, number>> = {
+  solo:     { 10000: 700, 50000: 1100, 100000: 1500, 250000: 2500, 500000: 3900, 1000000: 5500, 2500000: 7900, 5000000: 10300, 10000000: 13500 },
+  team:     { 10000: 1100, 50000: 1900, 100000: 2300, 250000: 3900, 500000: 5900, 1000000: 7900, 2500000: 11900, 5000000: 15500, 10000000: 19900 },
+  business: { 10000: 1500, 50000: 2700, 100000: 3100, 250000: 5900, 500000: 7900, 1000000: 11100, 2500000: 16900, 5000000: 20700, 10000000: 26900 },
+}
-- 
2.49.1


From 6ea520e0eddcc3689e16c5b3c9b056e312ca7fa9 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 21:24:27 +0100
Subject: [PATCH 335/428] feat: add mollie.js helper and embedded checkout API
 call

---
 lib/api/billing.ts | 16 +++++++++++
 lib/mollie.ts      | 69 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 85 insertions(+)
 create mode 100644 lib/mollie.ts

diff --git a/lib/api/billing.ts b/lib/api/billing.ts
index 666ac47..22c1391 100644
--- a/lib/api/billing.ts
+++ b/lib/api/billing.ts
@@ -101,3 +101,19 @@ export interface Order {
 export async function getOrders(): Promise<Order[]> {
   return apiRequest<Order[]>('/api/billing/invoices')
 }
+
+export interface CreateEmbeddedCheckoutParams {
+  plan_id: string
+  interval: string
+  limit: number
+  country: string
+  vat_id?: string
+  card_token: string
+}
+
+export async function createEmbeddedCheckout(params: CreateEmbeddedCheckoutParams): Promise<{ status: 'success' | 'pending'; redirect_url?: string }> {
+  return apiRequest<{ status: 'success' | 'pending'; redirect_url?: string }>('/api/billing/checkout-embedded', {
+    method: 'POST',
+    body: JSON.stringify(params),
+  })
+}
diff --git a/lib/mollie.ts b/lib/mollie.ts
new file mode 100644
index 0000000..e731c8c
--- /dev/null
+++ b/lib/mollie.ts
@@ -0,0 +1,69 @@
+'use client'
+
+// Mollie.js types (no official @types package)
+export interface MollieInstance {
+  createComponent: (type: string, options?: { styles?: Record<string, unknown> }) => MollieComponent
+  createToken: () => Promise<{ token: string | null; error: MollieError | null }>
+}
+
+export interface MollieComponent {
+  mount: (selector: string | HTMLElement) => void
+  unmount: () => void
+  addEventListener: (event: string, callback: (event: unknown) => void) => void
+}
+
+export interface MollieError {
+  field: string
+  message: string
+}
+
+declare global {
+  interface Window {
+    Mollie: (profileId: string, options?: { locale?: string; testmode?: boolean }) => MollieInstance
+  }
+}
+
+const MOLLIE_PROFILE_ID = process.env.NEXT_PUBLIC_MOLLIE_PROFILE_ID || ''
+
+// Mollie Components card field styles — matches Pulse dark theme
+export const MOLLIE_FIELD_STYLES = {
+  base: {
+    color: '#ffffff',
+    fontSize: '14px',
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    fontWeight: '400',
+    letterSpacing: '0.025em',
+    '::placeholder': {
+      color: '#737373',
+    },
+  },
+  valid: {
+    color: '#ffffff',
+  },
+  invalid: {
+    color: '#ef4444',
+  },
+}
+
+let mollieInstance: MollieInstance | null = null
+
+/**
+ * Initialize Mollie.js. Must be called after the Mollie script has loaded.
+ */
+export function initMollie(): MollieInstance | null {
+  if (mollieInstance) return mollieInstance
+  if (typeof window === 'undefined' || !window.Mollie || !MOLLIE_PROFILE_ID) return null
+
+  // Mollie auto-detects test/live mode based on the API key configured server-side.
+  mollieInstance = window.Mollie(MOLLIE_PROFILE_ID, {
+    locale: 'en_US',
+  })
+  return mollieInstance
+}
+
+/**
+ * Get the current Mollie instance (must call initMollie first).
+ */
+export function getMollie(): MollieInstance | null {
+  return mollieInstance
+}
-- 
2.49.1


From 837f4401070d754bfc7a4c2eb239e6e7e245bf5d Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 21:25:51 +0100
Subject: [PATCH 336/428] feat: add plan summary component for checkout page

---
 components/checkout/PlanSummary.tsx | 125 ++++++++++++++++++++++++++++
 1 file changed, 125 insertions(+)
 create mode 100644 components/checkout/PlanSummary.tsx

diff --git a/components/checkout/PlanSummary.tsx b/components/checkout/PlanSummary.tsx
new file mode 100644
index 0000000..7a6eab7
--- /dev/null
+++ b/components/checkout/PlanSummary.tsx
@@ -0,0 +1,125 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { Check } from '@phosphor-icons/react'
+import {
+  TRAFFIC_TIERS,
+  getSitesLimitForPlan,
+  getMaxRetentionMonthsForPlan,
+  PLAN_PRICES,
+} from '@/lib/plans'
+
+interface PlanSummaryProps {
+  plan: string
+  interval: string
+  limit: number
+}
+
+export default function PlanSummary({ plan, interval, limit }: PlanSummaryProps) {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const [currentInterval, setCurrentInterval] = useState(interval)
+
+  const monthlyCents = PLAN_PRICES[plan]?.[limit] || 0
+  const isYearly = currentInterval === 'year'
+  const displayPrice = isYearly ? (monthlyCents * 11) / 100 : monthlyCents / 100
+  const monthlyEquivalent = isYearly ? displayPrice / 12 : displayPrice
+
+  const tierLabel =
+    TRAFFIC_TIERS.find((t) => t.value === limit)?.label ||
+    `${(limit / 1000).toFixed(0)}k`
+  const sitesLimit = getSitesLimitForPlan(plan)
+  const retentionMonths = getMaxRetentionMonthsForPlan(plan)
+  const retentionLabel =
+    retentionMonths >= 12
+      ? `${retentionMonths / 12} year${retentionMonths > 12 ? 's' : ''}`
+      : `${retentionMonths} months`
+
+  const handleIntervalToggle = (newInterval: string) => {
+    setCurrentInterval(newInterval)
+    const params = new URLSearchParams(searchParams.toString())
+    params.set('interval', newInterval)
+    router.replace(`/checkout?${params.toString()}`, { scroll: false })
+  }
+
+  const features = [
+    `${tierLabel} pageviews/mo`,
+    `${sitesLimit} site${sitesLimit && sitesLimit > 1 ? 's' : ''}`,
+    `${retentionLabel} data retention`,
+    'Unlimited team members',
+    'Custom events & goals',
+    'Funnels & user journeys',
+  ]
+
+  return (
+    <div className="rounded-2xl border border-neutral-800 bg-neutral-900/50 backdrop-blur-xl p-6">
+      {/* Plan header */}
+      <div className="flex items-center gap-3 mb-6">
+        <h2 className="text-xl font-semibold text-white capitalize">{plan}</h2>
+        <span className="rounded-full bg-orange-500/15 px-3 py-0.5 text-xs font-medium text-orange-400">
+          30-day trial
+        </span>
+      </div>
+
+      {/* Price display */}
+      <div className="mb-6">
+        <div className="flex items-baseline gap-1">
+          <span className="text-4xl font-bold tracking-tight text-white">
+            &euro;{isYearly ? monthlyEquivalent.toFixed(2) : displayPrice.toFixed(0)}
+          </span>
+          <span className="text-neutral-400 text-sm">/mo</span>
+        </div>
+        {isYearly && (
+          <div className="mt-1.5 flex items-center gap-2">
+            <span className="text-sm text-neutral-400">
+              &euro;{displayPrice.toFixed(2)} billed yearly
+            </span>
+            <span className="rounded-full bg-orange-500/15 px-2.5 py-0.5 text-xs font-medium text-orange-400">
+              Save 1 month
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Interval toggle */}
+      <div className="mb-6 flex rounded-lg bg-neutral-800/60 p-1">
+        <button
+          type="button"
+          onClick={() => handleIntervalToggle('month')}
+          className={`flex-1 rounded-md px-4 py-2 text-sm font-medium transition-colors ${
+            currentInterval === 'month'
+              ? 'bg-neutral-700 text-white shadow-sm'
+              : 'text-neutral-400 hover:text-neutral-200'
+          }`}
+        >
+          Monthly
+        </button>
+        <button
+          type="button"
+          onClick={() => handleIntervalToggle('year')}
+          className={`flex-1 rounded-md px-4 py-2 text-sm font-medium transition-colors ${
+            currentInterval === 'year'
+              ? 'bg-neutral-700 text-white shadow-sm'
+              : 'text-neutral-400 hover:text-neutral-200'
+          }`}
+        >
+          Yearly
+        </button>
+      </div>
+
+      {/* Divider */}
+      <div className="border-t border-neutral-800 mb-6" />
+
+      {/* Features list */}
+      <ul className="space-y-3">
+        {features.map((feature) => (
+          <li key={feature} className="flex items-center gap-3 text-sm text-neutral-300">
+            <Check weight="bold" className="h-4 w-4 shrink-0 text-orange-400" />
+            {feature}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
-- 
2.49.1


From 89575c9fcbb7f96febb488c660fa17290b38e85c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 21:26:32 +0100
Subject: [PATCH 337/428] feat: add checkout page shell with auth guard and
 success polling

---
 app/checkout/page.tsx | 235 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 235 insertions(+)
 create mode 100644 app/checkout/page.tsx

diff --git a/app/checkout/page.tsx b/app/checkout/page.tsx
new file mode 100644
index 0000000..c994104
--- /dev/null
+++ b/app/checkout/page.tsx
@@ -0,0 +1,235 @@
+'use client'
+
+import { Suspense, useEffect, useState } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import Image from 'next/image'
+import Link from 'next/link'
+import { motion } from 'framer-motion'
+import { useAuth } from '@/lib/auth/context'
+import { useSubscription } from '@/lib/swr/dashboard'
+import { getSubscription } from '@/lib/api/billing'
+import { PLAN_PRICES, TRAFFIC_TIERS } from '@/lib/plans'
+import PlanSummary from '@/components/checkout/PlanSummary'
+import PaymentForm from '@/components/checkout/PaymentForm'
+import pulseLogo from '@/public/pulse_logo_no_margins.png'
+
+// ---------------------------------------------------------------------------
+// Validation helpers
+// ---------------------------------------------------------------------------
+
+const VALID_PLANS = new Set(Object.keys(PLAN_PRICES))
+const VALID_INTERVALS = new Set(['month', 'year'])
+const VALID_LIMITS = new Set(TRAFFIC_TIERS.map((t) => t.value))
+
+function isValidCheckoutParams(plan: string | null, interval: string | null, limit: string | null) {
+  if (!plan || !interval || !limit) return false
+  const limitNum = Number(limit)
+  if (!VALID_PLANS.has(plan)) return false
+  if (!VALID_INTERVALS.has(interval)) return false
+  if (!VALID_LIMITS.has(limitNum)) return false
+  if (!PLAN_PRICES[plan]?.[limitNum]) return false
+  return true
+}
+
+// ---------------------------------------------------------------------------
+// Success polling component (post-3DS return)
+// ---------------------------------------------------------------------------
+
+function CheckoutSuccess() {
+  const router = useRouter()
+  const [ready, setReady] = useState(false)
+  const [timedOut, setTimedOut] = useState(false)
+
+  useEffect(() => {
+    let cancelled = false
+    const timeout = setTimeout(() => setTimedOut(true), 30000)
+
+    const poll = async () => {
+      for (let i = 0; i < 15; i++) {
+        if (cancelled) return
+        try {
+          const data = await getSubscription()
+          if (data.subscription_status === 'active' || data.subscription_status === 'trialing') {
+            setReady(true)
+            clearTimeout(timeout)
+            setTimeout(() => router.push('/'), 2000)
+            return
+          }
+        } catch {
+          // ignore — keep polling
+        }
+        await new Promise((r) => setTimeout(r, 2000))
+      }
+      setTimedOut(true)
+    }
+    poll()
+
+    return () => {
+      cancelled = true
+      clearTimeout(timeout)
+    }
+  }, [router])
+
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      <motion.div
+        initial={{ opacity: 0, y: 12 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4 }}
+        className="text-center"
+      >
+        {ready ? (
+          <>
+            <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-emerald-500/20">
+              <svg className="h-8 w-8 text-emerald-400" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+              </svg>
+            </div>
+            <h2 className="text-xl font-semibold text-white">You&apos;re all set!</h2>
+            <p className="mt-2 text-sm text-zinc-400">Redirecting to dashboard...</p>
+          </>
+        ) : timedOut ? (
+          <>
+            <h2 className="text-xl font-semibold text-white">Taking longer than expected</h2>
+            <p className="mt-2 text-sm text-zinc-400">
+              Your payment was received. It may take a moment to activate.
+            </p>
+            <Link
+              href="/"
+              className="mt-4 inline-block text-sm font-medium text-blue-400 hover:text-blue-300 transition-colors"
+            >
+              Go to dashboard
+            </Link>
+          </>
+        ) : (
+          <>
+            <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-2 border-zinc-600 border-t-white" />
+            <h2 className="text-xl font-semibold text-white">Setting up your subscription...</h2>
+            <p className="mt-2 text-sm text-zinc-400">This usually takes a few seconds.</p>
+          </>
+        )}
+      </motion.div>
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Main checkout content (reads searchParams)
+// ---------------------------------------------------------------------------
+
+function CheckoutContent() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const { user, loading: authLoading } = useAuth()
+  const { data: subscription } = useSubscription()
+
+  const status = searchParams.get('status')
+  const plan = searchParams.get('plan')
+  const interval = searchParams.get('interval')
+  const limit = searchParams.get('limit')
+
+  // -- Auth guard --
+  useEffect(() => {
+    if (!authLoading && !user) {
+      const returnUrl = encodeURIComponent(window.location.pathname + window.location.search)
+      router.replace(`/login?redirect=${returnUrl}`)
+    }
+  }, [authLoading, user, router])
+
+  // -- Subscription guard --
+  useEffect(() => {
+    if (subscription && (subscription.subscription_status === 'active' || subscription.subscription_status === 'trialing')) {
+      router.replace('/')
+    }
+  }, [subscription, router])
+
+  // -- Param validation --
+  useEffect(() => {
+    if (status === 'success') return // success state doesn't need plan params
+    if (!authLoading && user && !isValidCheckoutParams(plan, interval, limit)) {
+      router.replace('/pricing')
+    }
+  }, [authLoading, user, plan, interval, limit, status, router])
+
+  // -- Post-3DS success --
+  if (status === 'success') {
+    return <CheckoutSuccess />
+  }
+
+  // -- Loading state --
+  if (authLoading || !user || !isValidCheckoutParams(plan, interval, limit)) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <div className="h-8 w-8 animate-spin rounded-full border-2 border-zinc-600 border-t-white" />
+      </div>
+    )
+  }
+
+  const planId = plan!
+  const billingInterval = interval as 'month' | 'year'
+  const pageviewLimit = Number(limit)
+
+  return (
+    <div className="flex min-h-screen flex-col">
+      {/* Header */}
+      <div className="px-6 py-5">
+        <Link href="/pricing" className="inline-block">
+          <Image
+            src={pulseLogo}
+            alt="Pulse"
+            width={90}
+            height={28}
+            unoptimized
+            className="opacity-80 hover:opacity-100 transition-opacity"
+          />
+        </Link>
+      </div>
+
+      {/* Main content */}
+      <div className="flex flex-1 items-start justify-center px-4 pb-12 pt-4 sm:px-6 lg:pt-8">
+        <motion.div
+          initial={{ opacity: 0, y: 16 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.45, ease: 'easeOut' }}
+          className="w-full max-w-4xl"
+        >
+          <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+            {/* Left — Plan summary */}
+            <PlanSummary
+              planId={planId}
+              interval={billingInterval}
+              limit={pageviewLimit}
+            />
+
+            {/* Right — Payment form */}
+            <PaymentForm
+              planId={planId}
+              interval={billingInterval}
+              limit={pageviewLimit}
+            />
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Page wrapper with Suspense (required for useSearchParams in App Router)
+// ---------------------------------------------------------------------------
+
+export default function CheckoutPage() {
+  return (
+    <div className="min-h-screen bg-zinc-950 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-zinc-900/40 via-zinc-950 to-zinc-950">
+      <Suspense
+        fallback={
+          <div className="flex min-h-screen items-center justify-center">
+            <div className="h-8 w-8 animate-spin rounded-full border-2 border-zinc-600 border-t-white" />
+          </div>
+        }
+      >
+        <CheckoutContent />
+      </Suspense>
+    </div>
+  )
+}
-- 
2.49.1


From e23ec2ca403115f688f73010a03d307410564d2d Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 21:26:38 +0100
Subject: [PATCH 338/428] feat: add payment form with mollie components card
 fields

---
 components/checkout/PaymentForm.tsx | 256 ++++++++++++++++++++++++++++
 1 file changed, 256 insertions(+)
 create mode 100644 components/checkout/PaymentForm.tsx

diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx
new file mode 100644
index 0000000..a9f5304
--- /dev/null
+++ b/components/checkout/PaymentForm.tsx
@@ -0,0 +1,256 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import Script from 'next/script'
+import { Lock, ShieldCheck } from '@phosphor-icons/react'
+import { COUNTRY_OPTIONS } from '@/lib/countries'
+import { initMollie, getMollie, MOLLIE_FIELD_STYLES, type MollieComponent } from '@/lib/mollie'
+import { createEmbeddedCheckout } from '@/lib/api/billing'
+
+interface PaymentFormProps {
+  plan: string
+  interval: string
+  limit: number
+}
+
+const inputClass =
+  'w-full rounded-lg border border-neutral-700 bg-neutral-800/50 px-3 py-2.5 text-sm text-white placeholder:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-brand-orange focus:border-brand-orange transition-colors'
+const mollieFieldClass =
+  'w-full rounded-lg border border-neutral-700 bg-neutral-800/50 px-3 py-2.5 h-[42px] transition-colors focus-within:ring-1 focus-within:ring-brand-orange focus-within:border-brand-orange'
+
+export default function PaymentForm({ plan, interval, limit }: PaymentFormProps) {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const currentInterval = searchParams.get('interval') || interval
+
+  const [country, setCountry] = useState('')
+  const [vatId, setVatId] = useState('')
+  const [mollieReady, setMollieReady] = useState(false)
+  const [mollieError, setMollieError] = useState(false)
+  const [formError, setFormError] = useState<string | null>(null)
+  const [cardErrors, setCardErrors] = useState<Record<string, string>>({})
+  const [submitting, setSubmitting] = useState(false)
+
+  const componentsRef = useRef<Record<string, MollieComponent | null>>({
+    cardNumber: null,
+    cardExpiry: null,
+    cardCvc: null,
+  })
+
+  const mountMollieComponents = () => {
+    const mollie = initMollie()
+    if (!mollie) {
+      setMollieError(true)
+      return
+    }
+
+    try {
+      const fields: Array<{ type: string; selector: string }> = [
+        { type: 'cardNumber', selector: '#mollie-card-number' },
+        { type: 'cardExpiry', selector: '#mollie-card-expiry' },
+        { type: 'cardCvc', selector: '#mollie-card-cvc' },
+      ]
+
+      for (const { type, selector } of fields) {
+        const component = mollie.createComponent(type, { styles: MOLLIE_FIELD_STYLES })
+        component.mount(selector)
+        component.addEventListener('change', (event: unknown) => {
+          const e = event as { error?: string; touched?: boolean }
+          setCardErrors((prev) => {
+            const next = { ...prev }
+            if (e.error) next[type] = e.error
+            else delete next[type]
+            return next
+          })
+        })
+        componentsRef.current[type] = component
+      }
+
+      setMollieReady(true)
+    } catch {
+      setMollieError(true)
+    }
+  }
+
+  // Cleanup Mollie components on unmount
+  useEffect(() => {
+    return () => {
+      Object.values(componentsRef.current).forEach((c) => c?.unmount())
+    }
+  }, [])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setFormError(null)
+    if (!country) {
+      setFormError('Please select your country')
+      return
+    }
+
+    const mollie = getMollie()
+    if (!mollie) {
+      setFormError('Payment system not loaded. Please refresh.')
+      return
+    }
+
+    setSubmitting(true)
+    try {
+      const { token, error } = await mollie.createToken()
+      if (error || !token) {
+        setFormError(error?.message || 'Invalid card details.')
+        setSubmitting(false)
+        return
+      }
+
+      const result = await createEmbeddedCheckout({
+        plan_id: plan,
+        interval: currentInterval,
+        limit,
+        country,
+        vat_id: vatId || undefined,
+        card_token: token,
+      })
+
+      if (result.status === 'success') router.push('/checkout?status=success')
+      else if (result.status === 'pending' && result.redirect_url)
+        window.location.href = result.redirect_url
+    } catch (err) {
+      setFormError((err as Error)?.message || 'Payment failed. Please try again.')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <>
+      <Script
+        src="https://js.mollie.com/v1/mollie.js"
+        onLoad={mountMollieComponents}
+        onError={() => setMollieError(true)}
+      />
+
+      <form
+        onSubmit={handleSubmit}
+        className="rounded-2xl border border-neutral-800 bg-neutral-900/50 backdrop-blur-xl p-6"
+      >
+        <h2 className="text-lg font-semibold text-white mb-6">Payment details</h2>
+
+        {/* Card number */}
+        <div className="mb-4">
+          <label className="block text-sm font-medium text-neutral-300 mb-1.5">Card number</label>
+          <div className="relative">
+            <div id="mollie-card-number" className={mollieFieldClass} />
+            {!mollieReady && (
+              <div className="absolute inset-0 animate-pulse bg-neutral-700/30 rounded-lg" />
+            )}
+          </div>
+          {cardErrors.cardNumber && (
+            <p className="mt-1 text-xs text-red-400">{cardErrors.cardNumber}</p>
+          )}
+        </div>
+
+        {/* Expiry & CVC */}
+        <div className="mb-4 grid grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-neutral-300 mb-1.5">Expiry date</label>
+            <div className="relative">
+              <div id="mollie-card-expiry" className={mollieFieldClass} />
+              {!mollieReady && (
+                <div className="absolute inset-0 animate-pulse bg-neutral-700/30 rounded-lg" />
+              )}
+            </div>
+            {cardErrors.cardExpiry && (
+              <p className="mt-1 text-xs text-red-400">{cardErrors.cardExpiry}</p>
+            )}
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-neutral-300 mb-1.5">CVC</label>
+            <div className="relative">
+              <div id="mollie-card-cvc" className={mollieFieldClass} />
+              {!mollieReady && (
+                <div className="absolute inset-0 animate-pulse bg-neutral-700/30 rounded-lg" />
+              )}
+            </div>
+            {cardErrors.cardCvc && (
+              <p className="mt-1 text-xs text-red-400">{cardErrors.cardCvc}</p>
+            )}
+          </div>
+        </div>
+
+        {/* Country */}
+        <div className="mb-4">
+          <label className="block text-sm font-medium text-neutral-300 mb-1.5">Country</label>
+          <select
+            value={country}
+            onChange={(e) => setCountry(e.target.value)}
+            className={`${inputClass} appearance-none`}
+          >
+            <option value="">Select country</option>
+            {COUNTRY_OPTIONS.map((c) => (
+              <option key={c.value} value={c.value}>
+                {c.label}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* VAT ID */}
+        <div className="mb-6">
+          <label className="block text-sm font-medium text-neutral-300 mb-1.5">
+            VAT ID <span className="text-neutral-500">(optional)</span>
+          </label>
+          <input
+            type="text"
+            value={vatId}
+            onChange={(e) => setVatId(e.target.value)}
+            placeholder="e.g. BE0123456789"
+            className={inputClass}
+          />
+        </div>
+
+        {/* Form / API errors */}
+        {formError && (
+          <div className="mb-4 rounded-lg bg-red-500/10 border border-red-500/20 px-4 py-3 text-sm text-red-400">
+            {formError}
+          </div>
+        )}
+
+        {/* Mollie fallback */}
+        {mollieError && (
+          <div className="mb-4 rounded-lg bg-yellow-500/10 border border-yellow-500/20 px-4 py-3 text-sm text-yellow-400">
+            Card fields could not load.{' '}
+            <a
+              href={`/checkout?plan=${plan}&interval=${currentInterval}&limit=${limit}&fallback=1`}
+              className="underline hover:text-yellow-300"
+            >
+              Use the hosted checkout instead
+            </a>
+            .
+          </div>
+        )}
+
+        {/* Submit */}
+        <button
+          type="submit"
+          disabled={submitting || !mollieReady}
+          className="w-full rounded-lg bg-brand-orange px-4 py-3 text-sm font-semibold text-white transition-colors hover:bg-brand-orange/90 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {submitting ? 'Processing...' : 'Start free trial'}
+        </button>
+
+        {/* Trust signals */}
+        <div className="mt-4 flex items-center justify-center gap-6 text-xs text-neutral-500">
+          <span className="flex items-center gap-1.5">
+            <Lock weight="fill" className="h-3.5 w-3.5" />
+            Secured with SSL
+          </span>
+          <span className="flex items-center gap-1.5">
+            <ShieldCheck weight="fill" className="h-3.5 w-3.5" />
+            Cancel anytime
+          </span>
+        </div>
+      </form>
+    </>
+  )
+}
-- 
2.49.1


From 58ac7b9cc5145955f57738a40a33536124c51776 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 21:30:17 +0100
Subject: [PATCH 339/428] feat: pricing and welcome CTAs now redirect to
 /checkout page

---
 app/welcome/page.tsx          |  98 ++---------------------
 components/PricingSection.tsx | 141 ++--------------------------------
 2 files changed, 13 insertions(+), 226 deletions(-)

diff --git a/app/welcome/page.tsx b/app/welcome/page.tsx
index e30ee61..5739f93 100644
--- a/app/welcome/page.tsx
+++ b/app/welcome/page.tsx
@@ -16,7 +16,6 @@ import {
   type Organization,
   type OrganizationMember,
 } from '@/lib/api/organization'
-import { createCheckoutSession } from '@/lib/api/billing'
 import { createSite, type Site } from '@/lib/api/sites'
 import { setSessionAction } from '@/app/actions/auth'
 import { useAuth } from '@/lib/auth/context'
@@ -88,7 +87,6 @@ function WelcomeContent() {
   const [orgLoading, setOrgLoading] = useState(false)
   const [orgError, setOrgError] = useState('')
 
-  const [planLoading, setPlanLoading] = useState(false)
   const [planError, setPlanError] = useState('')
 
   const [siteName, setSiteName] = useState('')
@@ -98,14 +96,9 @@ function WelcomeContent() {
   const [createdSite, setCreatedSite] = useState<Site | null>(null)
   const [showVerificationModal, setShowVerificationModal] = useState(false)
 
-  const [redirectingCheckout, setRedirectingCheckout] = useState(false)
   const [hadPendingCheckout, setHadPendingCheckout] = useState<boolean | null>(null)
   const [dismissedPendingCheckout, setDismissedPendingCheckout] = useState(false)
 
-  const [welcomeCountry, setWelcomeCountry] = useState('')
-  const [welcomeVatId, setWelcomeVatId] = useState('')
-  const [showBillingFields, setShowBillingFields] = useState(false)
-
   const [organizations, setOrganizations] = useState<OrganizationMember[] | null>(null)
   const [orgsLoading, setOrgsLoading] = useState(false)
   const [switchingOrgId, setSwitchingOrgId] = useState<string | null>(null)
@@ -216,36 +209,14 @@ function WelcomeContent() {
       return
     }
 
-    // Show billing fields first if country not yet selected
-    if (!welcomeCountry) {
-      setShowBillingFields(true)
-      return
-    }
-
-    setPlanLoading(true)
-    setPlanError('')
+    trackWelcomePlanContinue()
     try {
-      trackWelcomePlanContinue()
-      const intent = JSON.parse(raw)
-      const { url } = await createCheckoutSession({
-        plan_id: intent.planId,
-        interval: intent.interval || 'month',
-        limit: intent.limit ?? 100000,
-        country: welcomeCountry,
-        vat_id: welcomeVatId || undefined,
-      })
+      const { planId, interval, limit } = JSON.parse(raw)
       localStorage.removeItem('pulse_pending_checkout')
-      if (url) {
-        setRedirectingCheckout(true)
-        window.location.href = url
-        return
-      }
-      throw new Error('No checkout URL returned')
-    } catch (err: unknown) {
-      setPlanError(getAuthErrorMessage(err) || (err as Error)?.message || 'Failed to start checkout')
+      router.push(`/checkout?plan=${planId}&interval=${interval || 'month'}&limit=${limit ?? 100000}`)
+    } catch {
+      setPlanError('Failed to parse checkout data')
       localStorage.removeItem('pulse_pending_checkout')
-    } finally {
-      setPlanLoading(false)
     }
   }
 
@@ -333,15 +304,6 @@ function WelcomeContent() {
     return <LoadingOverlay logoSrc="/pulse_icon_no_margins.png" title="Switching organization..." />
   }
 
-  if (redirectingCheckout || (planLoading && step === 3)) {
-    return (
-      <LoadingOverlay
-        logoSrc="/pulse_icon_no_margins.png"
-        title={redirectingCheckout ? 'Taking you to checkout...' : 'Preparing your plan...'}
-      />
-    )
-  }
-
   const cardClass =
     'bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl shadow-sm p-6 max-w-lg mx-auto'
 
@@ -581,52 +543,6 @@ function WelcomeContent() {
               {planError && (
                 <p className="text-sm text-red-500 dark:text-red-400 mb-4 text-center">{planError}</p>
               )}
-              {showBillingFields && showPendingCheckoutInStep3 && (
-                <div className="space-y-3 mb-5">
-                  <div>
-                    <label htmlFor="welcome-country" className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
-                      Country <span className="text-red-400">*</span>
-                    </label>
-                    <select
-                      id="welcome-country"
-                      required
-                      value={welcomeCountry}
-                      onChange={(e) => setWelcomeCountry(e.target.value)}
-                      className="w-full rounded-lg border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-800 px-3 py-2.5 text-sm text-neutral-900 dark:text-white focus:border-brand-orange focus:outline-none focus:ring-1 focus:ring-brand-orange transition-colors"
-                    >
-                      <option value="" disabled>Select a country</option>
-                      {[
-                        { code: 'BE', label: 'Belgium' }, { code: 'NL', label: 'Netherlands' }, { code: 'DE', label: 'Germany' },
-                        { code: 'FR', label: 'France' }, { code: 'AT', label: 'Austria' }, { code: 'IT', label: 'Italy' },
-                        { code: 'ES', label: 'Spain' }, { code: 'PT', label: 'Portugal' }, { code: 'IE', label: 'Ireland' },
-                        { code: 'LU', label: 'Luxembourg' }, { code: 'FI', label: 'Finland' }, { code: 'SE', label: 'Sweden' },
-                        { code: 'DK', label: 'Denmark' }, { code: 'PL', label: 'Poland' }, { code: 'CZ', label: 'Czech Republic' },
-                        { code: 'RO', label: 'Romania' }, { code: 'BG', label: 'Bulgaria' }, { code: 'HR', label: 'Croatia' },
-                        { code: 'SI', label: 'Slovenia' }, { code: 'SK', label: 'Slovakia' }, { code: 'HU', label: 'Hungary' },
-                        { code: 'LT', label: 'Lithuania' }, { code: 'LV', label: 'Latvia' }, { code: 'EE', label: 'Estonia' },
-                        { code: 'MT', label: 'Malta' }, { code: 'CY', label: 'Cyprus' }, { code: 'GR', label: 'Greece' },
-                        { code: 'US', label: 'United States' }, { code: 'GB', label: 'United Kingdom' },
-                        { code: 'CH', label: 'Switzerland' }, { code: 'NO', label: 'Norway' },
-                        { code: 'CA', label: 'Canada' }, { code: 'AU', label: 'Australia' }, { code: 'OTHER', label: 'Other' },
-                      ].map((c) => (
-                        <option key={c.code} value={c.code}>{c.label}</option>
-                      ))}
-                    </select>
-                  </div>
-                  <div>
-                    <label htmlFor="welcome-vat" className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
-                      VAT ID <span className="text-neutral-500">(optional)</span>
-                    </label>
-                    <Input
-                      id="welcome-vat"
-                      type="text"
-                      value={welcomeVatId}
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => setWelcomeVatId(e.target.value)}
-                      placeholder="e.g. BE0123456789"
-                    />
-                  </div>
-                </div>
-              )}
               <div className="flex flex-col sm:flex-row gap-3 justify-center">
                 {showPendingCheckoutInStep3 ? (
                   <>
@@ -634,15 +550,13 @@ function WelcomeContent() {
                       variant="primary"
                       className="w-full sm:w-auto"
                       onClick={handlePlanContinue}
-                      disabled={planLoading || (showBillingFields && !welcomeCountry)}
                     >
-                      {showBillingFields ? 'Continue to payment' : 'Continue to checkout'}
+                      Continue to checkout
                     </Button>
                     <Button
                       variant="secondary"
                       className="w-full sm:w-auto"
                       onClick={handlePlanSkip}
-                      disabled={planLoading}
                     >
                       Stay on free plan
                     </Button>
diff --git a/components/PricingSection.tsx b/components/PricingSection.tsx
index 656b036..e6a9566 100644
--- a/components/PricingSection.tsx
+++ b/components/PricingSection.tsx
@@ -2,14 +2,12 @@
 
 import { useState, useEffect } from 'react'
 import { logger } from '@/lib/utils/logger'
-import { useSearchParams } from 'next/navigation'
+import { useSearchParams, useRouter } from 'next/navigation'
 import { motion } from 'framer-motion'
 import { Button, CheckCircleIcon } from '@ciphera-net/ui'
 import { useAuth } from '@/lib/auth/context'
 import { initiateOAuthFlow } from '@/lib/api/oauth'
 import { toast } from '@ciphera-net/ui'
-import { COUNTRY_OPTIONS } from '@/lib/countries'
-import { createCheckoutSession } from '@/lib/api/billing'
 
 // 1. Define Plans with IDs and Site Limits
 const PLANS = [
@@ -103,20 +101,12 @@ const TRAFFIC_TIERS = [
   },
 ]
 
-const PRICING_COUNTRY_OPTIONS = [
-  ...COUNTRY_OPTIONS.map((c) => ({ code: c.value, label: c.label })),
-  { code: 'OTHER', label: 'Other' },
-]
-
 export default function PricingSection() {
   const searchParams = useSearchParams()
+  const router = useRouter()
   const [isYearly, setIsYearly] = useState(false)
   const [sliderIndex, setSliderIndex] = useState(2) // Default to 100k (index 2)
   const [loadingPlan, setLoadingPlan] = useState<string | null>(null)
-  const [checkoutCountry, setCheckoutCountry] = useState('')
-  const [checkoutVatId, setCheckoutVatId] = useState('')
-  const [showCheckoutForm, setShowCheckoutForm] = useState(false)
-  const [pendingCheckout, setPendingCheckout] = useState<{ planId: string; interval: string; limit: number } | null>(null)
   const { user } = useAuth()
 
   // * Show toast when redirected from Mollie Checkout with canceled=true
@@ -176,7 +166,7 @@ export default function PricingSection() {
     }
   }
 
-  const handleSubscribe = async (planId: string, options?: { interval?: string, limit?: number }) => {
+  const handleSubscribe = (planId: string, options?: { interval?: string, limit?: number }) => {
     // 1. If not logged in, redirect to login/signup
     if (!user) {
       const intent = {
@@ -191,49 +181,10 @@ export default function PricingSection() {
       return
     }
 
-    // 2. Show checkout form to collect country + optional VAT
-    const interval = options?.interval || (isYearly ? 'year' : 'month')
-    const limit = options?.limit || currentTraffic.value
-    setPendingCheckout({ planId, interval, limit })
-    setCheckoutCountry('')
-    setCheckoutVatId('')
-    setShowCheckoutForm(true)
-  }
-
-  const handleCheckoutSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!pendingCheckout || !checkoutCountry) return
-
-    try {
-      setLoadingPlan(pendingCheckout.planId)
-
-      const { url } = await createCheckoutSession({
-        plan_id: pendingCheckout.planId,
-        interval: pendingCheckout.interval,
-        limit: pendingCheckout.limit,
-        country: checkoutCountry,
-        vat_id: checkoutVatId || undefined,
-      })
-
-      if (url) {
-        window.location.href = url
-      } else {
-        throw new Error('No checkout URL returned')
-      }
-    } catch (error: unknown) {
-      logger.error('Checkout error:', error)
-      toast.error('Failed to start checkout — please try again')
-    } finally {
-      setLoadingPlan(null)
-    }
-  }
-
-  const handleCheckoutCancel = () => {
-    setShowCheckoutForm(false)
-    setPendingCheckout(null)
-    setCheckoutCountry('')
-    setCheckoutVatId('')
-    setLoadingPlan(null)
+    // 2. Navigate to embedded checkout page
+    const selectedInterval = options?.interval || (isYearly ? 'year' : 'month')
+    const selectedLimit = options?.limit || currentTraffic.value
+    router.push(`/checkout?plan=${planId}&interval=${selectedInterval}&limit=${selectedLimit}`)
   }
 
   return (
@@ -463,84 +414,6 @@ export default function PricingSection() {
         </div>
       </motion.div>
 
-      {/* Checkout Country / VAT Modal */}
-      {showCheckoutForm && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center px-4">
-          <div
-            className="absolute inset-0 bg-black/60"
-            onClick={handleCheckoutCancel}
-          />
-          <motion.div
-            initial={{ opacity: 0, y: 10 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.2 }}
-            className="relative w-full max-w-md border border-neutral-800 rounded-2xl bg-neutral-900 p-6 shadow-xl"
-          >
-            <h3 className="text-lg font-bold text-white mb-1">
-              Billing details
-            </h3>
-            <p className="text-sm text-neutral-400 mb-6">
-              Select your country to calculate the correct tax rate.
-            </p>
-
-            <form onSubmit={handleCheckoutSubmit} className="space-y-4">
-              {/* Country */}
-              <div>
-                <label htmlFor="checkout-country" className="block text-sm font-medium text-neutral-300 mb-1.5">
-                  Country <span className="text-red-400">*</span>
-                </label>
-                <select
-                  id="checkout-country"
-                  required
-                  value={checkoutCountry}
-                  onChange={(e) => setCheckoutCountry(e.target.value)}
-                  className="w-full rounded-lg border border-neutral-700 bg-neutral-800 px-3 py-2.5 text-sm text-white placeholder-neutral-500 focus:border-brand-orange focus:outline-none focus:ring-1 focus:ring-brand-orange transition-colors"
-                >
-                  <option value="" disabled>Select a country</option>
-                  {PRICING_COUNTRY_OPTIONS.map((c) => (
-                    <option key={c.code} value={c.code}>{c.label}</option>
-                  ))}
-                </select>
-              </div>
-
-              {/* VAT ID */}
-              <div>
-                <label htmlFor="checkout-vat" className="block text-sm font-medium text-neutral-300 mb-1.5">
-                  VAT ID <span className="text-neutral-500">(optional)</span>
-                </label>
-                <input
-                  id="checkout-vat"
-                  type="text"
-                  value={checkoutVatId}
-                  onChange={(e) => setCheckoutVatId(e.target.value)}
-                  placeholder="e.g. BE0123456789"
-                  className="w-full rounded-lg border border-neutral-700 bg-neutral-800 px-3 py-2.5 text-sm text-white placeholder-neutral-500 focus:border-brand-orange focus:outline-none focus:ring-1 focus:ring-brand-orange transition-colors"
-                />
-              </div>
-
-              {/* Actions */}
-              <div className="flex items-center gap-3 pt-2">
-                <Button
-                  type="submit"
-                  variant="primary"
-                  disabled={!checkoutCountry || !!loadingPlan}
-                  className="flex-1"
-                >
-                  {loadingPlan ? 'Loading...' : 'Continue to payment'}
-                </Button>
-                <Button
-                  type="button"
-                  variant="secondary"
-                  onClick={handleCheckoutCancel}
-                  className="flex-1"
-                >
-                  Cancel
-                </Button>
-              </div>
-            </form>
-          </motion.div>
-        </div>
-      )}
     </section>
   )
 }
-- 
2.49.1


From 6be8952fbec810ac8fe4a7c89c3cc47f3a78bdaa Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 21:31:56 +0100
Subject: [PATCH 340/428] fix: checkout page polish, metadata, and typescript
 fixes

---
 app/checkout/layout.tsx | 8 ++++++++
 app/checkout/page.tsx   | 6 +++---
 2 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 app/checkout/layout.tsx

diff --git a/app/checkout/layout.tsx b/app/checkout/layout.tsx
new file mode 100644
index 0000000..8b9bba6
--- /dev/null
+++ b/app/checkout/layout.tsx
@@ -0,0 +1,8 @@
+export const metadata = {
+  title: 'Checkout — Pulse',
+  robots: 'noindex, nofollow',
+}
+
+export default function CheckoutLayout({ children }: { children: React.ReactNode }) {
+  return children
+}
diff --git a/app/checkout/page.tsx b/app/checkout/page.tsx
index c994104..320eaf9 100644
--- a/app/checkout/page.tsx
+++ b/app/checkout/page.tsx
@@ -19,7 +19,7 @@ import pulseLogo from '@/public/pulse_logo_no_margins.png'
 
 const VALID_PLANS = new Set(Object.keys(PLAN_PRICES))
 const VALID_INTERVALS = new Set(['month', 'year'])
-const VALID_LIMITS = new Set(TRAFFIC_TIERS.map((t) => t.value))
+const VALID_LIMITS = new Set<number>(TRAFFIC_TIERS.map((t) => t.value))
 
 function isValidCheckoutParams(plan: string | null, interval: string | null, limit: string | null) {
   if (!plan || !interval || !limit) return false
@@ -196,14 +196,14 @@ function CheckoutContent() {
           <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
             {/* Left — Plan summary */}
             <PlanSummary
-              planId={planId}
+              plan={planId}
               interval={billingInterval}
               limit={pageviewLimit}
             />
 
             {/* Right — Payment form */}
             <PaymentForm
-              planId={planId}
+              plan={planId}
               interval={billingInterval}
               limit={pageviewLimit}
             />
-- 
2.49.1


From 0f41eb4df4cf7ef5425daee90e101c62f410dc6e Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 21:38:47 +0100
Subject: [PATCH 341/428] fix: allow mollie.js in CSP, hide app header on
 checkout page

---
 app/layout-content.tsx | 7 +++++++
 next.config.ts         | 6 +++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/layout-content.tsx b/app/layout-content.tsx
index ff50fae..42fc2ea 100644
--- a/app/layout-content.tsx
+++ b/app/layout-content.tsx
@@ -91,6 +91,8 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
   const showOfflineBar = Boolean(auth.user && !isOnline)
   // Site pages use DashboardShell with full sidebar — no Header needed
   const isSitePage = pathname.startsWith('/sites/') && pathname !== '/sites/new'
+  // Checkout page has its own minimal layout — no app header/footer
+  const isCheckoutPage = pathname.startsWith('/checkout')
 
   if (isSwitchingOrg) {
     return <LoadingOverlay logoSrc="/pulse_icon_no_margins.png" title="Pulse" portal={false} />
@@ -113,6 +115,11 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
     )
   }
 
+  // Checkout page: render children only (has its own layout)
+  if (isAuthenticated && isCheckoutPage) {
+    return <>{children}</>
+  }
+
   // Authenticated non-site pages (sites list, onboarding, etc.): static header
   if (isAuthenticated) {
     return (
diff --git a/next.config.ts b/next.config.ts
index f4d7991..1070da7 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -11,13 +11,13 @@ const withPWA = withPWAInit({
 const cspDirectives = [
   "default-src 'self'",
   // Next.js requires 'unsafe-inline' for its bootstrap scripts; 'unsafe-eval' only in dev (HMR)
-  `script-src 'self' 'unsafe-inline'${process.env.NODE_ENV === 'development' ? " 'unsafe-eval'" : ''}`,
+  `script-src 'self' 'unsafe-inline' https://js.mollie.com${process.env.NODE_ENV === 'development' ? " 'unsafe-eval'" : ''}`,
   "style-src 'self' 'unsafe-inline'",
   "img-src 'self' data: blob: https://www.google.com https://*.gstatic.com https://ciphera.net",
   "font-src 'self'",
-  `connect-src 'self' https://*.ciphera.net https://ciphera.net https://www.google.com https://*.gstatic.com https://cdn.jsdelivr.net${process.env.NODE_ENV === 'development' ? ' http://localhost:*' : ''}`,
+  `connect-src 'self' https://*.ciphera.net https://ciphera.net https://www.google.com https://*.gstatic.com https://cdn.jsdelivr.net https://*.mollie.com${process.env.NODE_ENV === 'development' ? ' http://localhost:*' : ''}`,
   "worker-src 'self' blob:",
-  "frame-src 'none'",
+  "frame-src https://*.mollie.com",
   "object-src 'none'",
   "base-uri 'self'",
   "form-action 'self' https://*.ciphera.net",
-- 
2.49.1


From 512368d79e7ae4670b6b194468191a265af9d3a6 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 21:57:48 +0100
Subject: [PATCH 342/428] fix: pass testmode flag to mollie.js based on env var

---
 lib/mollie.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/lib/mollie.ts b/lib/mollie.ts
index e731c8c..b56e85f 100644
--- a/lib/mollie.ts
+++ b/lib/mollie.ts
@@ -54,9 +54,11 @@ export function initMollie(): MollieInstance | null {
   if (mollieInstance) return mollieInstance
   if (typeof window === 'undefined' || !window.Mollie || !MOLLIE_PROFILE_ID) return null
 
-  // Mollie auto-detects test/live mode based on the API key configured server-side.
+  // testmode must match the API key type on the backend (test_ = true, live_ = false)
+  const testmode = process.env.NEXT_PUBLIC_MOLLIE_TESTMODE === 'true'
   mollieInstance = window.Mollie(MOLLIE_PROFILE_ID, {
     locale: 'en_US',
+    testmode,
   })
   return mollieInstance
 }
-- 
2.49.1


From 22dddc6b6fecd3f49a9b92e1059806bbb5bf3da9 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 22:03:23 +0100
Subject: [PATCH 343/428] fix: mount mollie components after DOM ready via
 useEffect

---
 components/checkout/PaymentForm.tsx | 78 +++++++++++++++++------------
 1 file changed, 47 insertions(+), 31 deletions(-)

diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx
index a9f5304..0d0de8a 100644
--- a/components/checkout/PaymentForm.tsx
+++ b/components/checkout/PaymentForm.tsx
@@ -38,40 +38,56 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
     cardCvc: null,
   })
 
-  const mountMollieComponents = () => {
-    const mollie = initMollie()
-    if (!mollie) {
-      setMollieError(true)
-      return
-    }
+  const [scriptLoaded, setScriptLoaded] = useState(false)
 
-    try {
-      const fields: Array<{ type: string; selector: string }> = [
-        { type: 'cardNumber', selector: '#mollie-card-number' },
-        { type: 'cardExpiry', selector: '#mollie-card-expiry' },
-        { type: 'cardCvc', selector: '#mollie-card-cvc' },
-      ]
+  // Mount Mollie components AFTER both script loaded AND DOM elements exist
+  useEffect(() => {
+    if (!scriptLoaded) return
 
-      for (const { type, selector } of fields) {
-        const component = mollie.createComponent(type, { styles: MOLLIE_FIELD_STYLES })
-        component.mount(selector)
-        component.addEventListener('change', (event: unknown) => {
-          const e = event as { error?: string; touched?: boolean }
-          setCardErrors((prev) => {
-            const next = { ...prev }
-            if (e.error) next[type] = e.error
-            else delete next[type]
-            return next
-          })
-        })
-        componentsRef.current[type] = component
+    // Small delay to ensure DOM elements are painted
+    const timer = setTimeout(() => {
+      const mollie = initMollie()
+      if (!mollie) {
+        setMollieError(true)
+        return
       }
 
-      setMollieReady(true)
-    } catch {
-      setMollieError(true)
-    }
-  }
+      try {
+        const fields: Array<{ type: string; selector: string }> = [
+          { type: 'cardNumber', selector: '#mollie-card-number' },
+          { type: 'cardExpiry', selector: '#mollie-card-expiry' },
+          { type: 'cardCvc', selector: '#mollie-card-cvc' },
+        ]
+
+        for (const { type, selector } of fields) {
+          const el = document.querySelector(selector)
+          if (!el) {
+            setMollieError(true)
+            return
+          }
+          const component = mollie.createComponent(type, { styles: MOLLIE_FIELD_STYLES })
+          component.mount(el)
+          component.addEventListener('change', (event: unknown) => {
+            const e = event as { error?: string; touched?: boolean }
+            setCardErrors((prev) => {
+              const next = { ...prev }
+              if (e.error) next[type] = e.error
+              else delete next[type]
+              return next
+            })
+          })
+          componentsRef.current[type] = component
+        }
+
+        setMollieReady(true)
+      } catch (err) {
+        console.error('Mollie mount error:', err)
+        setMollieError(true)
+      }
+    }, 100)
+
+    return () => clearTimeout(timer)
+  }, [scriptLoaded])
 
   // Cleanup Mollie components on unmount
   useEffect(() => {
@@ -126,7 +142,7 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
     <>
       <Script
         src="https://js.mollie.com/v1/mollie.js"
-        onLoad={mountMollieComponents}
+        onLoad={() => setScriptLoaded(true)}
         onError={() => setMollieError(true)}
       />
 
-- 
2.49.1


From e089640fb99317a4045c040ae1895d2c6e58796d Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 22:04:55 +0100
Subject: [PATCH 344/428] fix: cast querySelector result to HTMLElement for
 mollie mount

---
 components/checkout/PaymentForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx
index 0d0de8a..85e8c2a 100644
--- a/components/checkout/PaymentForm.tsx
+++ b/components/checkout/PaymentForm.tsx
@@ -60,7 +60,7 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
         ]
 
         for (const { type, selector } of fields) {
-          const el = document.querySelector(selector)
+          const el = document.querySelector(selector) as HTMLElement | null
           if (!el) {
             setMollieError(true)
             return
-- 
2.49.1


From 3e7a32dc91e034bfc4b2eafe431d4c780ca3c4c7 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 22:11:30 +0100
Subject: [PATCH 345/428] fix: use correct mollie component types (expiryDate,
 verificationCode)

---
 components/checkout/PaymentForm.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx
index 85e8c2a..780c27e 100644
--- a/components/checkout/PaymentForm.tsx
+++ b/components/checkout/PaymentForm.tsx
@@ -34,8 +34,8 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
 
   const componentsRef = useRef<Record<string, MollieComponent | null>>({
     cardNumber: null,
-    cardExpiry: null,
-    cardCvc: null,
+    expiryDate: null,
+    verificationCode: null,
   })
 
   const [scriptLoaded, setScriptLoaded] = useState(false)
@@ -55,8 +55,8 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
       try {
         const fields: Array<{ type: string; selector: string }> = [
           { type: 'cardNumber', selector: '#mollie-card-number' },
-          { type: 'cardExpiry', selector: '#mollie-card-expiry' },
-          { type: 'cardCvc', selector: '#mollie-card-cvc' },
+          { type: 'expiryDate', selector: '#mollie-card-expiry' },
+          { type: 'verificationCode', selector: '#mollie-card-cvc' },
         ]
 
         for (const { type, selector } of fields) {
@@ -176,8 +176,8 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
                 <div className="absolute inset-0 animate-pulse bg-neutral-700/30 rounded-lg" />
               )}
             </div>
-            {cardErrors.cardExpiry && (
-              <p className="mt-1 text-xs text-red-400">{cardErrors.cardExpiry}</p>
+            {cardErrors.expiryDate && (
+              <p className="mt-1 text-xs text-red-400">{cardErrors.expiryDate}</p>
             )}
           </div>
           <div>
@@ -188,8 +188,8 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
                 <div className="absolute inset-0 animate-pulse bg-neutral-700/30 rounded-lg" />
               )}
             </div>
-            {cardErrors.cardCvc && (
-              <p className="mt-1 text-xs text-red-400">{cardErrors.cardCvc}</p>
+            {cardErrors.verificationCode && (
+              <p className="mt-1 text-xs text-red-400">{cardErrors.verificationCode}</p>
             )}
           </div>
         </div>
-- 
2.49.1


From f72a140ca67dcea709325aed2b45c75ee721a280 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 22:16:20 +0100
Subject: [PATCH 346/428] fix: add required cardHolder component for mollie
 components

---
 components/checkout/PaymentForm.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx
index 780c27e..1add585 100644
--- a/components/checkout/PaymentForm.tsx
+++ b/components/checkout/PaymentForm.tsx
@@ -33,6 +33,7 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
   const [submitting, setSubmitting] = useState(false)
 
   const componentsRef = useRef<Record<string, MollieComponent | null>>({
+    cardHolder: null,
     cardNumber: null,
     expiryDate: null,
     verificationCode: null,
@@ -54,6 +55,7 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
 
       try {
         const fields: Array<{ type: string; selector: string }> = [
+          { type: 'cardHolder', selector: '#mollie-card-holder' },
           { type: 'cardNumber', selector: '#mollie-card-number' },
           { type: 'expiryDate', selector: '#mollie-card-expiry' },
           { type: 'verificationCode', selector: '#mollie-card-cvc' },
@@ -152,6 +154,20 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
       >
         <h2 className="text-lg font-semibold text-white mb-6">Payment details</h2>
 
+        {/* Cardholder name */}
+        <div className="mb-4">
+          <label className="block text-sm font-medium text-neutral-300 mb-1.5">Cardholder name</label>
+          <div className="relative">
+            <div id="mollie-card-holder" className={mollieFieldClass} />
+            {!mollieReady && (
+              <div className="absolute inset-0 animate-pulse bg-neutral-700/30 rounded-lg" />
+            )}
+          </div>
+          {cardErrors.cardHolder && (
+            <p className="mt-1 text-xs text-red-400">{cardErrors.cardHolder}</p>
+          )}
+        </div>
+
         {/* Card number */}
         <div className="mb-4">
           <label className="block text-sm font-medium text-neutral-300 mb-1.5">Card number</label>
-- 
2.49.1


From 742c24fa6bb64add186b45cb593c0cc89ee45489 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 22:21:59 +0100
Subject: [PATCH 347/428] fix: prevent auth flash on checkout, skip
 subscription guard on success return

---
 app/checkout/page.tsx  | 5 +++--
 app/layout-content.tsx | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/checkout/page.tsx b/app/checkout/page.tsx
index 320eaf9..d93e67f 100644
--- a/app/checkout/page.tsx
+++ b/app/checkout/page.tsx
@@ -136,12 +136,13 @@ function CheckoutContent() {
     }
   }, [authLoading, user, router])
 
-  // -- Subscription guard --
+  // -- Subscription guard (skip on success page — it handles its own redirect) --
   useEffect(() => {
+    if (status === 'success') return
     if (subscription && (subscription.subscription_status === 'active' || subscription.subscription_status === 'trialing')) {
       router.replace('/')
     }
-  }, [subscription, router])
+  }, [subscription, status, router])
 
   // -- Param validation --
   useEffect(() => {
diff --git a/app/layout-content.tsx b/app/layout-content.tsx
index 42fc2ea..ddf2ccf 100644
--- a/app/layout-content.tsx
+++ b/app/layout-content.tsx
@@ -98,8 +98,8 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
     return <LoadingOverlay logoSrc="/pulse_icon_no_margins.png" title="Pulse" portal={false} />
   }
 
-  // While auth is loading on a site page, render nothing to prevent flash of public header
-  if (auth.loading && isSitePage) {
+  // While auth is loading on a site or checkout page, render nothing to prevent flash of public header
+  if (auth.loading && (isSitePage || isCheckoutPage)) {
     return null
   }
 
-- 
2.49.1


From 48f71ee65b019043e81a5880ad68503146cecacb Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 22:33:30 +0100
Subject: [PATCH 348/428] =?UTF-8?q?fix:=20checkout=20UI=20polish=20?=
 =?UTF-8?q?=E2=80=94=20brand=20colors,=20Pulse=20Select,=20logo,=20touched?=
 =?UTF-8?q?-only=20errors,=20no=20skeletons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/checkout/page.tsx               | 13 ++++---
 components/checkout/PaymentForm.tsx | 57 +++++++++--------------------
 components/checkout/PlanSummary.tsx |  6 +--
 3 files changed, 28 insertions(+), 48 deletions(-)

diff --git a/app/checkout/page.tsx b/app/checkout/page.tsx
index d93e67f..87613ef 100644
--- a/app/checkout/page.tsx
+++ b/app/checkout/page.tsx
@@ -11,7 +11,7 @@ import { getSubscription } from '@/lib/api/billing'
 import { PLAN_PRICES, TRAFFIC_TIERS } from '@/lib/plans'
 import PlanSummary from '@/components/checkout/PlanSummary'
 import PaymentForm from '@/components/checkout/PaymentForm'
-import pulseLogo from '@/public/pulse_logo_no_margins.png'
+import pulseIcon from '@/public/pulse_icon_no_margins.png'
 
 // ---------------------------------------------------------------------------
 // Validation helpers
@@ -174,15 +174,16 @@ function CheckoutContent() {
     <div className="flex min-h-screen flex-col">
       {/* Header */}
       <div className="px-6 py-5">
-        <Link href="/pricing" className="inline-block">
+        <Link href="/pricing" className="flex items-center gap-2 w-fit hover:opacity-80 transition-opacity">
           <Image
-            src={pulseLogo}
+            src={pulseIcon}
             alt="Pulse"
-            width={90}
-            height={28}
+            width={36}
+            height={36}
             unoptimized
-            className="opacity-80 hover:opacity-100 transition-opacity"
+            className="object-contain w-8 h-8"
           />
+          <span className="text-xl font-bold text-white tracking-tight">Pulse</span>
         </Link>
       </div>
 
diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx
index 1add585..9b0ae0d 100644
--- a/components/checkout/PaymentForm.tsx
+++ b/components/checkout/PaymentForm.tsx
@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import Script from 'next/script'
 import { Lock, ShieldCheck } from '@phosphor-icons/react'
+import { Select } from '@ciphera-net/ui'
 import { COUNTRY_OPTIONS } from '@/lib/countries'
 import { initMollie, getMollie, MOLLIE_FIELD_STYLES, type MollieComponent } from '@/lib/mollie'
 import { createEmbeddedCheckout } from '@/lib/api/billing'
@@ -30,6 +31,7 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
   const [mollieError, setMollieError] = useState(false)
   const [formError, setFormError] = useState<string | null>(null)
   const [cardErrors, setCardErrors] = useState<Record<string, string>>({})
+  const [touchedFields, setTouchedFields] = useState<Set<string>>(new Set())
   const [submitting, setSubmitting] = useState(false)
 
   const componentsRef = useRef<Record<string, MollieComponent | null>>({
@@ -71,6 +73,9 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
           component.mount(el)
           component.addEventListener('change', (event: unknown) => {
             const e = event as { error?: string; touched?: boolean }
+            if (e.touched) {
+              setTouchedFields((prev) => new Set(prev).add(type))
+            }
             setCardErrors((prev) => {
               const next = { ...prev }
               if (e.error) next[type] = e.error
@@ -157,13 +162,8 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
         {/* Cardholder name */}
         <div className="mb-4">
           <label className="block text-sm font-medium text-neutral-300 mb-1.5">Cardholder name</label>
-          <div className="relative">
-            <div id="mollie-card-holder" className={mollieFieldClass} />
-            {!mollieReady && (
-              <div className="absolute inset-0 animate-pulse bg-neutral-700/30 rounded-lg" />
-            )}
-          </div>
-          {cardErrors.cardHolder && (
+          <div id="mollie-card-holder" className={mollieFieldClass} />
+          {touchedFields.has('cardHolder') && cardErrors.cardHolder && (
             <p className="mt-1 text-xs text-red-400">{cardErrors.cardHolder}</p>
           )}
         </div>
@@ -171,13 +171,8 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
         {/* Card number */}
         <div className="mb-4">
           <label className="block text-sm font-medium text-neutral-300 mb-1.5">Card number</label>
-          <div className="relative">
-            <div id="mollie-card-number" className={mollieFieldClass} />
-            {!mollieReady && (
-              <div className="absolute inset-0 animate-pulse bg-neutral-700/30 rounded-lg" />
-            )}
-          </div>
-          {cardErrors.cardNumber && (
+          <div id="mollie-card-number" className={mollieFieldClass} />
+          {touchedFields.has('cardNumber') && cardErrors.cardNumber && (
             <p className="mt-1 text-xs text-red-400">{cardErrors.cardNumber}</p>
           )}
         </div>
@@ -186,25 +181,15 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
         <div className="mb-4 grid grid-cols-2 gap-4">
           <div>
             <label className="block text-sm font-medium text-neutral-300 mb-1.5">Expiry date</label>
-            <div className="relative">
-              <div id="mollie-card-expiry" className={mollieFieldClass} />
-              {!mollieReady && (
-                <div className="absolute inset-0 animate-pulse bg-neutral-700/30 rounded-lg" />
-              )}
-            </div>
-            {cardErrors.expiryDate && (
+            <div id="mollie-card-expiry" className={mollieFieldClass} />
+            {touchedFields.has('expiryDate') && cardErrors.expiryDate && (
               <p className="mt-1 text-xs text-red-400">{cardErrors.expiryDate}</p>
             )}
           </div>
           <div>
             <label className="block text-sm font-medium text-neutral-300 mb-1.5">CVC</label>
-            <div className="relative">
-              <div id="mollie-card-cvc" className={mollieFieldClass} />
-              {!mollieReady && (
-                <div className="absolute inset-0 animate-pulse bg-neutral-700/30 rounded-lg" />
-              )}
-            </div>
-            {cardErrors.verificationCode && (
+            <div id="mollie-card-cvc" className={mollieFieldClass} />
+            {touchedFields.has('verificationCode') && cardErrors.verificationCode && (
               <p className="mt-1 text-xs text-red-400">{cardErrors.verificationCode}</p>
             )}
           </div>
@@ -213,18 +198,12 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
         {/* Country */}
         <div className="mb-4">
           <label className="block text-sm font-medium text-neutral-300 mb-1.5">Country</label>
-          <select
+          <Select
             value={country}
-            onChange={(e) => setCountry(e.target.value)}
-            className={`${inputClass} appearance-none`}
-          >
-            <option value="">Select country</option>
-            {COUNTRY_OPTIONS.map((c) => (
-              <option key={c.value} value={c.value}>
-                {c.label}
-              </option>
-            ))}
-          </select>
+            onChange={setCountry}
+            variant="input"
+            options={[{ value: '', label: 'Select country' }, ...COUNTRY_OPTIONS.map((c) => ({ value: c.value, label: c.label }))]}
+          />
         </div>
 
         {/* VAT ID */}
diff --git a/components/checkout/PlanSummary.tsx b/components/checkout/PlanSummary.tsx
index 7a6eab7..5982492 100644
--- a/components/checkout/PlanSummary.tsx
+++ b/components/checkout/PlanSummary.tsx
@@ -57,7 +57,7 @@ export default function PlanSummary({ plan, interval, limit }: PlanSummaryProps)
       {/* Plan header */}
       <div className="flex items-center gap-3 mb-6">
         <h2 className="text-xl font-semibold text-white capitalize">{plan}</h2>
-        <span className="rounded-full bg-orange-500/15 px-3 py-0.5 text-xs font-medium text-orange-400">
+        <span className="rounded-full bg-brand-orange/15 px-3 py-0.5 text-xs font-medium text-brand-orange">
           30-day trial
         </span>
       </div>
@@ -75,7 +75,7 @@ export default function PlanSummary({ plan, interval, limit }: PlanSummaryProps)
             <span className="text-sm text-neutral-400">
               &euro;{displayPrice.toFixed(2)} billed yearly
             </span>
-            <span className="rounded-full bg-orange-500/15 px-2.5 py-0.5 text-xs font-medium text-orange-400">
+            <span className="rounded-full bg-brand-orange/15 px-2.5 py-0.5 text-xs font-medium text-brand-orange">
               Save 1 month
             </span>
           </div>
@@ -115,7 +115,7 @@ export default function PlanSummary({ plan, interval, limit }: PlanSummaryProps)
       <ul className="space-y-3">
         {features.map((feature) => (
           <li key={feature} className="flex items-center gap-3 text-sm text-neutral-300">
-            <Check weight="bold" className="h-4 w-4 shrink-0 text-orange-400" />
+            <Check weight="bold" className="h-4 w-4 shrink-0 text-brand-orange" />
             {feature}
           </li>
         ))}
-- 
2.49.1


From 497f0f791ae9d0b332cb02bcb7fd876163e5f070 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 22:41:51 +0100
Subject: [PATCH 349/428] fix: hide mollie spinners, add placeholders, errors
 only on submit, sliding interval toggle

---
 components/checkout/PaymentForm.tsx | 44 ++++++++++++++---------------
 components/checkout/PlanSummary.tsx | 44 ++++++++++++++---------------
 2 files changed, 43 insertions(+), 45 deletions(-)

diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx
index 9b0ae0d..b3d5b5f 100644
--- a/components/checkout/PaymentForm.tsx
+++ b/components/checkout/PaymentForm.tsx
@@ -17,8 +17,8 @@ interface PaymentFormProps {
 
 const inputClass =
   'w-full rounded-lg border border-neutral-700 bg-neutral-800/50 px-3 py-2.5 text-sm text-white placeholder:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-brand-orange focus:border-brand-orange transition-colors'
-const mollieFieldClass =
-  'w-full rounded-lg border border-neutral-700 bg-neutral-800/50 px-3 py-2.5 h-[42px] transition-colors focus-within:ring-1 focus-within:ring-brand-orange focus-within:border-brand-orange'
+const mollieFieldBase =
+  'w-full rounded-lg border border-neutral-700 bg-neutral-800/50 px-3 py-2.5 h-[42px] transition-all focus-within:ring-1 focus-within:ring-brand-orange focus-within:border-brand-orange'
 
 export default function PaymentForm({ plan, interval, limit }: PaymentFormProps) {
   const router = useRouter()
@@ -31,7 +31,7 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
   const [mollieError, setMollieError] = useState(false)
   const [formError, setFormError] = useState<string | null>(null)
   const [cardErrors, setCardErrors] = useState<Record<string, string>>({})
-  const [touchedFields, setTouchedFields] = useState<Set<string>>(new Set())
+  const [submitted, setSubmitted] = useState(false)
   const [submitting, setSubmitting] = useState(false)
 
   const componentsRef = useRef<Record<string, MollieComponent | null>>({
@@ -56,26 +56,25 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
       }
 
       try {
-        const fields: Array<{ type: string; selector: string }> = [
-          { type: 'cardHolder', selector: '#mollie-card-holder' },
-          { type: 'cardNumber', selector: '#mollie-card-number' },
-          { type: 'expiryDate', selector: '#mollie-card-expiry' },
-          { type: 'verificationCode', selector: '#mollie-card-cvc' },
+        const fields: Array<{ type: string; selector: string; placeholder?: string }> = [
+          { type: 'cardHolder', selector: '#mollie-card-holder', placeholder: 'John Doe' },
+          { type: 'cardNumber', selector: '#mollie-card-number', placeholder: '1234 5678 9012 3456' },
+          { type: 'expiryDate', selector: '#mollie-card-expiry', placeholder: 'MM / YY' },
+          { type: 'verificationCode', selector: '#mollie-card-cvc', placeholder: 'CVC' },
         ]
 
-        for (const { type, selector } of fields) {
+        for (const { type, selector, placeholder } of fields) {
           const el = document.querySelector(selector) as HTMLElement | null
           if (!el) {
             setMollieError(true)
             return
           }
-          const component = mollie.createComponent(type, { styles: MOLLIE_FIELD_STYLES })
+          const opts: Record<string, unknown> = { styles: MOLLIE_FIELD_STYLES }
+          if (placeholder) opts.placeholder = placeholder
+          const component = mollie.createComponent(type, opts)
           component.mount(el)
           component.addEventListener('change', (event: unknown) => {
-            const e = event as { error?: string; touched?: boolean }
-            if (e.touched) {
-              setTouchedFields((prev) => new Set(prev).add(type))
-            }
+            const e = event as { error?: string }
             setCardErrors((prev) => {
               const next = { ...prev }
               if (e.error) next[type] = e.error
@@ -104,6 +103,7 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
   }, [])
 
   const handleSubmit = async (e: React.FormEvent) => {
+    setSubmitted(true)
     e.preventDefault()
     setFormError(null)
     if (!country) {
@@ -162,8 +162,8 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
         {/* Cardholder name */}
         <div className="mb-4">
           <label className="block text-sm font-medium text-neutral-300 mb-1.5">Cardholder name</label>
-          <div id="mollie-card-holder" className={mollieFieldClass} />
-          {touchedFields.has('cardHolder') && cardErrors.cardHolder && (
+          <div id="mollie-card-holder" className={`${mollieFieldBase} ${mollieReady ? 'opacity-100' : 'opacity-0'}`} />
+          {submitted && cardErrors.cardHolder && (
             <p className="mt-1 text-xs text-red-400">{cardErrors.cardHolder}</p>
           )}
         </div>
@@ -171,8 +171,8 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
         {/* Card number */}
         <div className="mb-4">
           <label className="block text-sm font-medium text-neutral-300 mb-1.5">Card number</label>
-          <div id="mollie-card-number" className={mollieFieldClass} />
-          {touchedFields.has('cardNumber') && cardErrors.cardNumber && (
+          <div id="mollie-card-number" className={`${mollieFieldBase} ${mollieReady ? 'opacity-100' : 'opacity-0'}`} />
+          {submitted && cardErrors.cardNumber && (
             <p className="mt-1 text-xs text-red-400">{cardErrors.cardNumber}</p>
           )}
         </div>
@@ -181,15 +181,15 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
         <div className="mb-4 grid grid-cols-2 gap-4">
           <div>
             <label className="block text-sm font-medium text-neutral-300 mb-1.5">Expiry date</label>
-            <div id="mollie-card-expiry" className={mollieFieldClass} />
-            {touchedFields.has('expiryDate') && cardErrors.expiryDate && (
+            <div id="mollie-card-expiry" className={`${mollieFieldBase} ${mollieReady ? 'opacity-100' : 'opacity-0'}`} />
+            {submitted && cardErrors.expiryDate && (
               <p className="mt-1 text-xs text-red-400">{cardErrors.expiryDate}</p>
             )}
           </div>
           <div>
             <label className="block text-sm font-medium text-neutral-300 mb-1.5">CVC</label>
-            <div id="mollie-card-cvc" className={mollieFieldClass} />
-            {touchedFields.has('verificationCode') && cardErrors.verificationCode && (
+            <div id="mollie-card-cvc" className={`${mollieFieldBase} ${mollieReady ? 'opacity-100' : 'opacity-0'}`} />
+            {submitted && cardErrors.verificationCode && (
               <p className="mt-1 text-xs text-red-400">{cardErrors.verificationCode}</p>
             )}
           </div>
diff --git a/components/checkout/PlanSummary.tsx b/components/checkout/PlanSummary.tsx
index 5982492..f9af880 100644
--- a/components/checkout/PlanSummary.tsx
+++ b/components/checkout/PlanSummary.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
+import { motion } from 'framer-motion'
 import { Check } from '@phosphor-icons/react'
 import {
   TRAFFIC_TIERS,
@@ -83,29 +84,26 @@ export default function PlanSummary({ plan, interval, limit }: PlanSummaryProps)
       </div>
 
       {/* Interval toggle */}
-      <div className="mb-6 flex rounded-lg bg-neutral-800/60 p-1">
-        <button
-          type="button"
-          onClick={() => handleIntervalToggle('month')}
-          className={`flex-1 rounded-md px-4 py-2 text-sm font-medium transition-colors ${
-            currentInterval === 'month'
-              ? 'bg-neutral-700 text-white shadow-sm'
-              : 'text-neutral-400 hover:text-neutral-200'
-          }`}
-        >
-          Monthly
-        </button>
-        <button
-          type="button"
-          onClick={() => handleIntervalToggle('year')}
-          className={`flex-1 rounded-md px-4 py-2 text-sm font-medium transition-colors ${
-            currentInterval === 'year'
-              ? 'bg-neutral-700 text-white shadow-sm'
-              : 'text-neutral-400 hover:text-neutral-200'
-          }`}
-        >
-          Yearly
-        </button>
+      <div className="mb-6 flex items-center gap-1 p-1 bg-neutral-800/50 rounded-xl">
+        {(['month', 'year'] as const).map((iv) => (
+          <button
+            key={iv}
+            type="button"
+            onClick={() => handleIntervalToggle(iv)}
+            className={`relative flex-1 px-4 py-2 text-sm font-medium rounded-lg transition-colors duration-200 ${
+              currentInterval === iv ? 'text-white' : 'text-neutral-400 hover:text-white'
+            }`}
+          >
+            {currentInterval === iv && (
+              <motion.div
+                layoutId="checkout-interval-bg"
+                className="absolute inset-0 bg-neutral-700 rounded-lg shadow-sm"
+                transition={{ type: 'spring', bounce: 0.15, duration: 0.35 }}
+              />
+            )}
+            <span className="relative z-10">{iv === 'month' ? 'Monthly' : 'Yearly'}</span>
+          </button>
+        ))}
       </div>
 
       {/* Divider */}
-- 
2.49.1


From 9297e20604f21aa1a16a3aed400ccc5521cf444c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 22:45:35 +0100
Subject: [PATCH 350/428] fix: increase card field height and font size for
 larger card brand logos

---
 components/checkout/PaymentForm.tsx | 2 +-
 lib/mollie.ts                       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx
index b3d5b5f..838b99f 100644
--- a/components/checkout/PaymentForm.tsx
+++ b/components/checkout/PaymentForm.tsx
@@ -18,7 +18,7 @@ interface PaymentFormProps {
 const inputClass =
   'w-full rounded-lg border border-neutral-700 bg-neutral-800/50 px-3 py-2.5 text-sm text-white placeholder:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-brand-orange focus:border-brand-orange transition-colors'
 const mollieFieldBase =
-  'w-full rounded-lg border border-neutral-700 bg-neutral-800/50 px-3 py-2.5 h-[42px] transition-all focus-within:ring-1 focus-within:ring-brand-orange focus-within:border-brand-orange'
+  'w-full rounded-lg border border-neutral-700 bg-neutral-800/50 px-3 py-3 h-[48px] transition-all focus-within:ring-1 focus-within:ring-brand-orange focus-within:border-brand-orange'
 
 export default function PaymentForm({ plan, interval, limit }: PaymentFormProps) {
   const router = useRouter()
diff --git a/lib/mollie.ts b/lib/mollie.ts
index b56e85f..9b1f66f 100644
--- a/lib/mollie.ts
+++ b/lib/mollie.ts
@@ -29,7 +29,7 @@ const MOLLIE_PROFILE_ID = process.env.NEXT_PUBLIC_MOLLIE_PROFILE_ID || ''
 export const MOLLIE_FIELD_STYLES = {
   base: {
     color: '#ffffff',
-    fontSize: '14px',
+    fontSize: '15px',
     fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
     fontWeight: '400',
     letterSpacing: '0.025em',
-- 
2.49.1


From 3a29fb5a096db658461af0eb0e912b99c8fe6654 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 22:47:01 +0100
Subject: [PATCH 351/428] fix: use visibility hidden instead of opacity to
 fully hide mollie loading spinners

---
 components/checkout/PaymentForm.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx
index 838b99f..5f85839 100644
--- a/components/checkout/PaymentForm.tsx
+++ b/components/checkout/PaymentForm.tsx
@@ -162,7 +162,7 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
         {/* Cardholder name */}
         <div className="mb-4">
           <label className="block text-sm font-medium text-neutral-300 mb-1.5">Cardholder name</label>
-          <div id="mollie-card-holder" className={`${mollieFieldBase} ${mollieReady ? 'opacity-100' : 'opacity-0'}`} />
+          <div id="mollie-card-holder" className={mollieFieldBase} style={{ visibility: mollieReady ? 'visible' : 'hidden' }} />
           {submitted && cardErrors.cardHolder && (
             <p className="mt-1 text-xs text-red-400">{cardErrors.cardHolder}</p>
           )}
@@ -171,7 +171,7 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
         {/* Card number */}
         <div className="mb-4">
           <label className="block text-sm font-medium text-neutral-300 mb-1.5">Card number</label>
-          <div id="mollie-card-number" className={`${mollieFieldBase} ${mollieReady ? 'opacity-100' : 'opacity-0'}`} />
+          <div id="mollie-card-number" className={mollieFieldBase} style={{ visibility: mollieReady ? 'visible' : 'hidden' }} />
           {submitted && cardErrors.cardNumber && (
             <p className="mt-1 text-xs text-red-400">{cardErrors.cardNumber}</p>
           )}
@@ -181,14 +181,14 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
         <div className="mb-4 grid grid-cols-2 gap-4">
           <div>
             <label className="block text-sm font-medium text-neutral-300 mb-1.5">Expiry date</label>
-            <div id="mollie-card-expiry" className={`${mollieFieldBase} ${mollieReady ? 'opacity-100' : 'opacity-0'}`} />
+            <div id="mollie-card-expiry" className={mollieFieldBase} style={{ visibility: mollieReady ? 'visible' : 'hidden' }} />
             {submitted && cardErrors.expiryDate && (
               <p className="mt-1 text-xs text-red-400">{cardErrors.expiryDate}</p>
             )}
           </div>
           <div>
             <label className="block text-sm font-medium text-neutral-300 mb-1.5">CVC</label>
-            <div id="mollie-card-cvc" className={`${mollieFieldBase} ${mollieReady ? 'opacity-100' : 'opacity-0'}`} />
+            <div id="mollie-card-cvc" className={mollieFieldBase} style={{ visibility: mollieReady ? 'visible' : 'hidden' }} />
             {submitted && cardErrors.verificationCode && (
               <p className="mt-1 text-xs text-red-400">{cardErrors.verificationCode}</p>
             )}
-- 
2.49.1


From 4c6020535ac2c1c0923a7e9a75a900cb4d25236c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 22:51:54 +0100
Subject: [PATCH 352/428] fix: hide mollie spinners with overflow clip, show
 static placeholder fields while loading

---
 components/checkout/PaymentForm.tsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx
index 5f85839..061289b 100644
--- a/components/checkout/PaymentForm.tsx
+++ b/components/checkout/PaymentForm.tsx
@@ -162,7 +162,10 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
         {/* Cardholder name */}
         <div className="mb-4">
           <label className="block text-sm font-medium text-neutral-300 mb-1.5">Cardholder name</label>
-          <div id="mollie-card-holder" className={mollieFieldBase} style={{ visibility: mollieReady ? 'visible' : 'hidden' }} />
+          <div className="overflow-hidden transition-all duration-300" style={{ height: mollieReady ? '48px' : '0px' }}>
+            <div id="mollie-card-holder" className={mollieFieldBase} />
+          </div>
+          {!mollieReady && <div className={`${mollieFieldBase} bg-neutral-800/30`} />}
           {submitted && cardErrors.cardHolder && (
             <p className="mt-1 text-xs text-red-400">{cardErrors.cardHolder}</p>
           )}
@@ -171,7 +174,10 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
         {/* Card number */}
         <div className="mb-4">
           <label className="block text-sm font-medium text-neutral-300 mb-1.5">Card number</label>
-          <div id="mollie-card-number" className={mollieFieldBase} style={{ visibility: mollieReady ? 'visible' : 'hidden' }} />
+          <div className="overflow-hidden transition-all duration-300" style={{ height: mollieReady ? '48px' : '0px' }}>
+            <div id="mollie-card-number" className={mollieFieldBase} />
+          </div>
+          {!mollieReady && <div className={`${mollieFieldBase} bg-neutral-800/30`} />}
           {submitted && cardErrors.cardNumber && (
             <p className="mt-1 text-xs text-red-400">{cardErrors.cardNumber}</p>
           )}
@@ -181,14 +187,20 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
         <div className="mb-4 grid grid-cols-2 gap-4">
           <div>
             <label className="block text-sm font-medium text-neutral-300 mb-1.5">Expiry date</label>
-            <div id="mollie-card-expiry" className={mollieFieldBase} style={{ visibility: mollieReady ? 'visible' : 'hidden' }} />
+            <div className="overflow-hidden transition-all duration-300" style={{ height: mollieReady ? '48px' : '0px' }}>
+              <div id="mollie-card-expiry" className={mollieFieldBase} />
+            </div>
+            {!mollieReady && <div className={`${mollieFieldBase} bg-neutral-800/30`} />}
             {submitted && cardErrors.expiryDate && (
               <p className="mt-1 text-xs text-red-400">{cardErrors.expiryDate}</p>
             )}
           </div>
           <div>
             <label className="block text-sm font-medium text-neutral-300 mb-1.5">CVC</label>
-            <div id="mollie-card-cvc" className={mollieFieldBase} style={{ visibility: mollieReady ? 'visible' : 'hidden' }} />
+            <div className="overflow-hidden transition-all duration-300" style={{ height: mollieReady ? '48px' : '0px' }}>
+              <div id="mollie-card-cvc" className={mollieFieldBase} />
+            </div>
+            {!mollieReady && <div className={`${mollieFieldBase} bg-neutral-800/30`} />}
             {submitted && cardErrors.verificationCode && (
               <p className="mt-1 text-xs text-red-400">{cardErrors.verificationCode}</p>
             )}
-- 
2.49.1


From 75bf071d98987eea261fc6ea3862438ac32a8563 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 23:10:14 +0100
Subject: [PATCH 353/428] feat: split checkout layout with auto-cycling feature
 slideshow

---
 app/checkout/page.tsx                    |  61 +++++----
 components/checkout/FeatureSlideshow.tsx | 160 +++++++++++++++++++++++
 components/checkout/PlanSummary.tsx      | 124 +++++++-----------
 3 files changed, 241 insertions(+), 104 deletions(-)
 create mode 100644 components/checkout/FeatureSlideshow.tsx

diff --git a/app/checkout/page.tsx b/app/checkout/page.tsx
index 87613ef..2db9cc9 100644
--- a/app/checkout/page.tsx
+++ b/app/checkout/page.tsx
@@ -11,6 +11,7 @@ import { getSubscription } from '@/lib/api/billing'
 import { PLAN_PRICES, TRAFFIC_TIERS } from '@/lib/plans'
 import PlanSummary from '@/components/checkout/PlanSummary'
 import PaymentForm from '@/components/checkout/PaymentForm'
+import FeatureSlideshow from '@/components/checkout/FeatureSlideshow'
 import pulseIcon from '@/public/pulse_icon_no_margins.png'
 
 // ---------------------------------------------------------------------------
@@ -171,46 +172,52 @@ function CheckoutContent() {
   const pageviewLimit = Number(limit)
 
   return (
-    <div className="flex min-h-screen flex-col">
-      {/* Header */}
-      <div className="px-6 py-5">
-        <Link href="/pricing" className="flex items-center gap-2 w-fit hover:opacity-80 transition-opacity">
-          <Image
-            src={pulseIcon}
-            alt="Pulse"
-            width={36}
-            height={36}
-            unoptimized
-            className="object-contain w-8 h-8"
-          />
-          <span className="text-xl font-bold text-white tracking-tight">Pulse</span>
-        </Link>
+    <div className="flex min-h-screen">
+      {/* Left — Feature slideshow (hidden on mobile) */}
+      <div className="hidden lg:block lg:w-1/2 relative sticky top-0 h-screen overflow-hidden">
+        <FeatureSlideshow />
       </div>
 
-      {/* Main content */}
-      <div className="flex flex-1 items-start justify-center px-4 pb-12 pt-4 sm:px-6 lg:pt-8">
-        <motion.div
-          initial={{ opacity: 0, y: 16 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.45, ease: 'easeOut' }}
-          className="w-full max-w-4xl"
-        >
-          <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
-            {/* Left — Plan summary */}
+      {/* Right — Payment */}
+      <div className="w-full lg:w-1/2 flex flex-col min-h-screen">
+        {/* Header */}
+        <div className="px-6 py-5">
+          <Link href="/pricing" className="flex items-center gap-2 w-fit hover:opacity-80 transition-opacity">
+            <Image
+              src={pulseIcon}
+              alt="Pulse"
+              width={36}
+              height={36}
+              unoptimized
+              className="object-contain w-8 h-8"
+            />
+            <span className="text-xl font-bold text-white tracking-tight">Pulse</span>
+          </Link>
+        </div>
+
+        {/* Main content */}
+        <div className="flex flex-1 flex-col px-4 pb-12 pt-2 sm:px-6 lg:px-10">
+          <motion.div
+            initial={{ opacity: 0, y: 16 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.45, ease: 'easeOut' }}
+            className="w-full max-w-lg mx-auto flex flex-col gap-6"
+          >
+            {/* Plan summary (compact) */}
             <PlanSummary
               plan={planId}
               interval={billingInterval}
               limit={pageviewLimit}
             />
 
-            {/* Right — Payment form */}
+            {/* Payment form */}
             <PaymentForm
               plan={planId}
               interval={billingInterval}
               limit={pageviewLimit}
             />
-          </div>
-        </motion.div>
+          </motion.div>
+        </div>
       </div>
     </div>
   )
diff --git a/components/checkout/FeatureSlideshow.tsx b/components/checkout/FeatureSlideshow.tsx
new file mode 100644
index 0000000..b8d9d63
--- /dev/null
+++ b/components/checkout/FeatureSlideshow.tsx
@@ -0,0 +1,160 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import Image from 'next/image'
+import { AnimatePresence, motion } from 'framer-motion'
+import { Check } from '@phosphor-icons/react'
+import { PulseMockup } from '@/components/marketing/mockups/pulse-mockup'
+import { PulseFeaturesCarousel } from '@/components/marketing/mockups/pulse-features-carousel'
+import { FunnelMockup } from '@/components/marketing/mockups/funnel-mockup'
+import { EmailReportMockup } from '@/components/marketing/mockups/email-report-mockup'
+
+interface Slide {
+  headline: string
+  description: string
+  features: string[]
+  mockup: React.ReactNode
+}
+
+const slides: Slide[] = [
+  {
+    headline: 'Your traffic, at a glance.',
+    description:
+      'A clean, real-time dashboard that shows pageviews, visitors, bounce rate, and session duration — no learning curve required.',
+    features: [
+      'Real-time visitor count',
+      'Pageview trends over time',
+      'Bounce rate & session duration',
+      'Top pages & referrers',
+    ],
+    mockup: <PulseMockup />,
+  },
+  {
+    headline: 'Everything you need to know about your visitors.',
+    description:
+      'Break down your audience by device, browser, OS, country, and language — all without cookies or fingerprinting.',
+    features: [
+      'Device & browser breakdown',
+      'Country & region stats',
+      'Language preferences',
+      'Screen size distribution',
+    ],
+    mockup: <PulseFeaturesCarousel />,
+  },
+  {
+    headline: 'See where visitors drop off.',
+    description:
+      'Build funnels to track multi-step flows and find exactly where users abandon your conversion paths.',
+    features: [
+      'Multi-step funnel builder',
+      'Drop-off visualization',
+      'Conversion rate tracking',
+      'Custom event support',
+    ],
+    mockup: <FunnelMockup />,
+  },
+  {
+    headline: 'Reports delivered to your inbox.',
+    description:
+      'Schedule weekly or monthly email reports so your team stays informed without logging in.',
+    features: [
+      'Weekly & monthly digests',
+      'Customizable metrics',
+      'Team-wide distribution',
+      'PDF & inline previews',
+    ],
+    mockup: <EmailReportMockup />,
+  },
+]
+
+export default function FeatureSlideshow() {
+  const [activeIndex, setActiveIndex] = useState(0)
+
+  const advance = useCallback(() => {
+    setActiveIndex((prev) => (prev + 1) % slides.length)
+  }, [])
+
+  useEffect(() => {
+    const timer = setInterval(advance, 5000)
+    return () => clearInterval(timer)
+  }, [advance])
+
+  const slide = slides[activeIndex]
+
+  return (
+    <div className="relative h-full w-full">
+      {/* Background image */}
+      <Image
+        src="/pulse-showcase-bg.png"
+        alt=""
+        fill
+        unoptimized
+        className="object-cover"
+        priority
+      />
+
+      {/* Dark overlay */}
+      <div className="absolute inset-0 bg-black/40" />
+
+      {/* Content */}
+      <div className="relative z-10 flex h-full flex-col justify-center px-10 xl:px-14 py-12">
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={activeIndex}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.45 }}
+            className="flex flex-col gap-8"
+          >
+            {/* Text */}
+            <div>
+              <h2 className="text-3xl xl:text-4xl font-bold text-white leading-tight">
+                {slide.headline}
+              </h2>
+              <p className="mt-3 text-neutral-400 text-sm xl:text-base leading-relaxed max-w-md">
+                {slide.description}
+              </p>
+
+              <ul className="mt-5 space-y-2.5">
+                {slide.features.map((f) => (
+                  <li key={f} className="flex items-center gap-2.5 text-sm text-neutral-300">
+                    <Check weight="bold" className="h-4 w-4 shrink-0 text-brand-orange" />
+                    {f}
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {/* Mockup */}
+            <div className="relative">
+              {/* Orange glow */}
+              <div className="absolute -inset-8 rounded-3xl bg-brand-orange/8 blur-3xl pointer-events-none" />
+
+              <div className="relative rounded-2xl border border-white/[0.08] overflow-hidden">
+                {slide.mockup}
+              </div>
+            </div>
+          </motion.div>
+        </AnimatePresence>
+
+        {/* Dot indicators */}
+        <div className="mt-8 flex items-center gap-2">
+          {slides.map((_, i) => (
+            <button
+              key={i}
+              type="button"
+              onClick={() => setActiveIndex(i)}
+              className={`h-2 rounded-full transition-all duration-300 ${
+                i === activeIndex
+                  ? 'w-6 bg-brand-orange'
+                  : 'w-2 bg-white/25 hover:bg-white/40'
+              }`}
+              aria-label={`Go to slide ${i + 1}`}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/components/checkout/PlanSummary.tsx b/components/checkout/PlanSummary.tsx
index f9af880..bec4c3e 100644
--- a/components/checkout/PlanSummary.tsx
+++ b/components/checkout/PlanSummary.tsx
@@ -3,11 +3,8 @@
 import { useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { motion } from 'framer-motion'
-import { Check } from '@phosphor-icons/react'
 import {
   TRAFFIC_TIERS,
-  getSitesLimitForPlan,
-  getMaxRetentionMonthsForPlan,
   PLAN_PRICES,
 } from '@/lib/plans'
 
@@ -30,12 +27,6 @@ export default function PlanSummary({ plan, interval, limit }: PlanSummaryProps)
   const tierLabel =
     TRAFFIC_TIERS.find((t) => t.value === limit)?.label ||
     `${(limit / 1000).toFixed(0)}k`
-  const sitesLimit = getSitesLimitForPlan(plan)
-  const retentionMonths = getMaxRetentionMonthsForPlan(plan)
-  const retentionLabel =
-    retentionMonths >= 12
-      ? `${retentionMonths / 12} year${retentionMonths > 12 ? 's' : ''}`
-      : `${retentionMonths} months`
 
   const handleIntervalToggle = (newInterval: string) => {
     setCurrentInterval(newInterval)
@@ -44,80 +35,59 @@ export default function PlanSummary({ plan, interval, limit }: PlanSummaryProps)
     router.replace(`/checkout?${params.toString()}`, { scroll: false })
   }
 
-  const features = [
-    `${tierLabel} pageviews/mo`,
-    `${sitesLimit} site${sitesLimit && sitesLimit > 1 ? 's' : ''}`,
-    `${retentionLabel} data retention`,
-    'Unlimited team members',
-    'Custom events & goals',
-    'Funnels & user journeys',
-  ]
-
   return (
-    <div className="rounded-2xl border border-neutral-800 bg-neutral-900/50 backdrop-blur-xl p-6">
-      {/* Plan header */}
-      <div className="flex items-center gap-3 mb-6">
-        <h2 className="text-xl font-semibold text-white capitalize">{plan}</h2>
-        <span className="rounded-full bg-brand-orange/15 px-3 py-0.5 text-xs font-medium text-brand-orange">
-          30-day trial
-        </span>
+    <div className="rounded-2xl border border-neutral-800 bg-neutral-900/50 backdrop-blur-xl p-5">
+      <div className="flex flex-col sm:flex-row sm:items-center gap-4">
+        {/* Plan name + badge */}
+        <div className="flex items-center gap-3">
+          <h2 className="text-lg font-semibold text-white capitalize">{plan}</h2>
+          <span className="rounded-full bg-brand-orange/15 px-3 py-0.5 text-xs font-medium text-brand-orange">
+            30-day trial
+          </span>
+        </div>
+
+        {/* Interval toggle */}
+        <div className="flex items-center gap-1 p-1 bg-neutral-800/50 rounded-xl sm:ml-auto">
+          {(['month', 'year'] as const).map((iv) => (
+            <button
+              key={iv}
+              type="button"
+              onClick={() => handleIntervalToggle(iv)}
+              className={`relative px-3.5 py-1.5 text-sm font-medium rounded-lg transition-colors duration-200 ${
+                currentInterval === iv ? 'text-white' : 'text-neutral-400 hover:text-white'
+              }`}
+            >
+              {currentInterval === iv && (
+                <motion.div
+                  layoutId="checkout-interval-bg"
+                  className="absolute inset-0 bg-neutral-700 rounded-lg shadow-sm"
+                  transition={{ type: 'spring', bounce: 0.15, duration: 0.35 }}
+                />
+              )}
+              <span className="relative z-10">{iv === 'month' ? 'Monthly' : 'Yearly'}</span>
+            </button>
+          ))}
+        </div>
       </div>
 
-      {/* Price display */}
-      <div className="mb-6">
-        <div className="flex items-baseline gap-1">
-          <span className="text-4xl font-bold tracking-tight text-white">
-            &euro;{isYearly ? monthlyEquivalent.toFixed(2) : displayPrice.toFixed(0)}
-          </span>
-          <span className="text-neutral-400 text-sm">/mo</span>
-        </div>
+      {/* Price row */}
+      <div className="mt-4 flex items-baseline gap-2 flex-wrap">
+        <span className="text-3xl font-bold tracking-tight text-white">
+          &euro;{isYearly ? monthlyEquivalent.toFixed(2) : displayPrice.toFixed(0)}
+        </span>
+        <span className="text-neutral-400 text-sm">/mo</span>
+        <span className="text-neutral-500 text-sm">&middot; {tierLabel} pageviews</span>
         {isYearly && (
-          <div className="mt-1.5 flex items-center gap-2">
-            <span className="text-sm text-neutral-400">
-              &euro;{displayPrice.toFixed(2)} billed yearly
-            </span>
-            <span className="rounded-full bg-brand-orange/15 px-2.5 py-0.5 text-xs font-medium text-brand-orange">
-              Save 1 month
-            </span>
-          </div>
+          <span className="rounded-full bg-brand-orange/15 px-2.5 py-0.5 text-xs font-medium text-brand-orange">
+            Save 1 month
+          </span>
         )}
       </div>
-
-      {/* Interval toggle */}
-      <div className="mb-6 flex items-center gap-1 p-1 bg-neutral-800/50 rounded-xl">
-        {(['month', 'year'] as const).map((iv) => (
-          <button
-            key={iv}
-            type="button"
-            onClick={() => handleIntervalToggle(iv)}
-            className={`relative flex-1 px-4 py-2 text-sm font-medium rounded-lg transition-colors duration-200 ${
-              currentInterval === iv ? 'text-white' : 'text-neutral-400 hover:text-white'
-            }`}
-          >
-            {currentInterval === iv && (
-              <motion.div
-                layoutId="checkout-interval-bg"
-                className="absolute inset-0 bg-neutral-700 rounded-lg shadow-sm"
-                transition={{ type: 'spring', bounce: 0.15, duration: 0.35 }}
-              />
-            )}
-            <span className="relative z-10">{iv === 'month' ? 'Monthly' : 'Yearly'}</span>
-          </button>
-        ))}
-      </div>
-
-      {/* Divider */}
-      <div className="border-t border-neutral-800 mb-6" />
-
-      {/* Features list */}
-      <ul className="space-y-3">
-        {features.map((feature) => (
-          <li key={feature} className="flex items-center gap-3 text-sm text-neutral-300">
-            <Check weight="bold" className="h-4 w-4 shrink-0 text-brand-orange" />
-            {feature}
-          </li>
-        ))}
-      </ul>
+      {isYearly && (
+        <p className="mt-1 text-sm text-neutral-400">
+          &euro;{displayPrice.toFixed(2)} billed yearly
+        </p>
+      )}
     </div>
   )
 }
-- 
2.49.1


From e5ac1893dc7331f660e368f02e17fc577ff6c533 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 23:17:18 +0100
Subject: [PATCH 354/428] fix: lock left panel, only right side scrolls

---
 app/checkout/page.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/checkout/page.tsx b/app/checkout/page.tsx
index 2db9cc9..43bf9c3 100644
--- a/app/checkout/page.tsx
+++ b/app/checkout/page.tsx
@@ -172,14 +172,14 @@ function CheckoutContent() {
   const pageviewLimit = Number(limit)
 
   return (
-    <div className="flex min-h-screen">
+    <div className="flex h-screen overflow-hidden">
       {/* Left — Feature slideshow (hidden on mobile) */}
-      <div className="hidden lg:block lg:w-1/2 relative sticky top-0 h-screen overflow-hidden">
+      <div className="hidden lg:flex lg:w-1/2 relative h-full overflow-hidden">
         <FeatureSlideshow />
       </div>
 
-      {/* Right — Payment */}
-      <div className="w-full lg:w-1/2 flex flex-col min-h-screen">
+      {/* Right — Payment (scrollable) */}
+      <div className="w-full lg:w-1/2 flex flex-col h-full overflow-y-auto">
         {/* Header */}
         <div className="px-6 py-5">
           <Link href="/pricing" className="flex items-center gap-2 w-fit hover:opacity-80 transition-opacity">
-- 
2.49.1


From 7c55e5f76317ab37363a247305dd9d2c50f0465a Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 23:18:58 +0100
Subject: [PATCH 355/428] fix: simplify slideshow to titles only, catch mollie
 unmount errors

---
 components/checkout/FeatureSlideshow.tsx | 77 +++---------------------
 components/checkout/PaymentForm.tsx      |  4 +-
 2 files changed, 11 insertions(+), 70 deletions(-)

diff --git a/components/checkout/FeatureSlideshow.tsx b/components/checkout/FeatureSlideshow.tsx
index b8d9d63..2ffbbaa 100644
--- a/components/checkout/FeatureSlideshow.tsx
+++ b/components/checkout/FeatureSlideshow.tsx
@@ -3,7 +3,6 @@
 import { useState, useEffect, useCallback } from 'react'
 import Image from 'next/image'
 import { AnimatePresence, motion } from 'framer-motion'
-import { Check } from '@phosphor-icons/react'
 import { PulseMockup } from '@/components/marketing/mockups/pulse-mockup'
 import { PulseFeaturesCarousel } from '@/components/marketing/mockups/pulse-features-carousel'
 import { FunnelMockup } from '@/components/marketing/mockups/funnel-mockup'
@@ -11,60 +10,14 @@ import { EmailReportMockup } from '@/components/marketing/mockups/email-report-m
 
 interface Slide {
   headline: string
-  description: string
-  features: string[]
   mockup: React.ReactNode
 }
 
 const slides: Slide[] = [
-  {
-    headline: 'Your traffic, at a glance.',
-    description:
-      'A clean, real-time dashboard that shows pageviews, visitors, bounce rate, and session duration — no learning curve required.',
-    features: [
-      'Real-time visitor count',
-      'Pageview trends over time',
-      'Bounce rate & session duration',
-      'Top pages & referrers',
-    ],
-    mockup: <PulseMockup />,
-  },
-  {
-    headline: 'Everything you need to know about your visitors.',
-    description:
-      'Break down your audience by device, browser, OS, country, and language — all without cookies or fingerprinting.',
-    features: [
-      'Device & browser breakdown',
-      'Country & region stats',
-      'Language preferences',
-      'Screen size distribution',
-    ],
-    mockup: <PulseFeaturesCarousel />,
-  },
-  {
-    headline: 'See where visitors drop off.',
-    description:
-      'Build funnels to track multi-step flows and find exactly where users abandon your conversion paths.',
-    features: [
-      'Multi-step funnel builder',
-      'Drop-off visualization',
-      'Conversion rate tracking',
-      'Custom event support',
-    ],
-    mockup: <FunnelMockup />,
-  },
-  {
-    headline: 'Reports delivered to your inbox.',
-    description:
-      'Schedule weekly or monthly email reports so your team stays informed without logging in.',
-    features: [
-      'Weekly & monthly digests',
-      'Customizable metrics',
-      'Team-wide distribution',
-      'PDF & inline previews',
-    ],
-    mockup: <EmailReportMockup />,
-  },
+  { headline: 'Your traffic, at a glance.', mockup: <PulseMockup /> },
+  { headline: 'Everything you need to know about your visitors.', mockup: <PulseFeaturesCarousel /> },
+  { headline: 'See where visitors drop off.', mockup: <FunnelMockup /> },
+  { headline: 'Reports delivered to your inbox.', mockup: <EmailReportMockup /> },
 ]
 
 export default function FeatureSlideshow() {
@@ -107,24 +60,10 @@ export default function FeatureSlideshow() {
             transition={{ duration: 0.45 }}
             className="flex flex-col gap-8"
           >
-            {/* Text */}
-            <div>
-              <h2 className="text-3xl xl:text-4xl font-bold text-white leading-tight">
-                {slide.headline}
-              </h2>
-              <p className="mt-3 text-neutral-400 text-sm xl:text-base leading-relaxed max-w-md">
-                {slide.description}
-              </p>
-
-              <ul className="mt-5 space-y-2.5">
-                {slide.features.map((f) => (
-                  <li key={f} className="flex items-center gap-2.5 text-sm text-neutral-300">
-                    <Check weight="bold" className="h-4 w-4 shrink-0 text-brand-orange" />
-                    {f}
-                  </li>
-                ))}
-              </ul>
-            </div>
+            {/* Headline only */}
+            <h2 className="text-3xl xl:text-4xl font-bold text-white leading-tight">
+              {slide.headline}
+            </h2>
 
             {/* Mockup */}
             <div className="relative">
diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx
index 061289b..94487c0 100644
--- a/components/checkout/PaymentForm.tsx
+++ b/components/checkout/PaymentForm.tsx
@@ -98,7 +98,9 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
   // Cleanup Mollie components on unmount
   useEffect(() => {
     return () => {
-      Object.values(componentsRef.current).forEach((c) => c?.unmount())
+      Object.values(componentsRef.current).forEach((c) => {
+        try { c?.unmount() } catch { /* DOM already removed */ }
+      })
     }
   }, [])
 
-- 
2.49.1


From fba1f84ce510b4dd242cc00d8ddfe3d391365afa Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 23:25:49 +0100
Subject: [PATCH 356/428] fix: replace window.location.reload with
 router.refresh on org switch to prevent hydration errors

---
 app/layout-content.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/layout-content.tsx b/app/layout-content.tsx
index ddf2ccf..3e0d959 100644
--- a/app/layout-content.tsx
+++ b/app/layout-content.tsx
@@ -78,11 +78,17 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
   const handleSwitchOrganization = async (orgId: string | null) => {
     if (!orgId) return
     try {
+      setIsSwitchingOrg(true)
       const { access_token } = await switchContext(orgId)
       await setSessionAction(access_token)
-      sessionStorage.setItem(ORG_SWITCH_KEY, 'true')
-      window.location.reload()
+      router.refresh()
+      // Allow time for server components to re-fetch with new auth
+      setTimeout(() => {
+        setIsSwitchingOrg(false)
+        router.push('/')
+      }, 600)
     } catch (err) {
+      setIsSwitchingOrg(false)
       logger.error('Failed to switch organization', err)
     }
   }
-- 
2.49.1


From 489608946318b190aacda6aa5896e018881891ba Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 23:27:04 +0100
Subject: [PATCH 357/428] fix: remove dot indicators from checkout slideshow

---
 components/checkout/FeatureSlideshow.tsx | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/components/checkout/FeatureSlideshow.tsx b/components/checkout/FeatureSlideshow.tsx
index 2ffbbaa..27abc88 100644
--- a/components/checkout/FeatureSlideshow.tsx
+++ b/components/checkout/FeatureSlideshow.tsx
@@ -77,22 +77,6 @@ export default function FeatureSlideshow() {
           </motion.div>
         </AnimatePresence>
 
-        {/* Dot indicators */}
-        <div className="mt-8 flex items-center gap-2">
-          {slides.map((_, i) => (
-            <button
-              key={i}
-              type="button"
-              onClick={() => setActiveIndex(i)}
-              className={`h-2 rounded-full transition-all duration-300 ${
-                i === activeIndex
-                  ? 'w-6 bg-brand-orange'
-                  : 'w-2 bg-white/25 hover:bg-white/40'
-              }`}
-              aria-label={`Go to slide ${i + 1}`}
-            />
-          ))}
-        </div>
       </div>
     </div>
   )
-- 
2.49.1


From b5150e3b7a33e3e594f5122b5f0cf3c1eb51d0b9 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 23:28:03 +0100
Subject: [PATCH 358/428] fix: remove mockup border, scale down mockups to fit
 viewport

---
 components/checkout/FeatureSlideshow.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/checkout/FeatureSlideshow.tsx b/components/checkout/FeatureSlideshow.tsx
index 27abc88..5b04eef 100644
--- a/components/checkout/FeatureSlideshow.tsx
+++ b/components/checkout/FeatureSlideshow.tsx
@@ -70,8 +70,10 @@ export default function FeatureSlideshow() {
               {/* Orange glow */}
               <div className="absolute -inset-8 rounded-3xl bg-brand-orange/8 blur-3xl pointer-events-none" />
 
-              <div className="relative rounded-2xl border border-white/[0.08] overflow-hidden">
-                {slide.mockup}
+              <div className="relative rounded-2xl overflow-hidden max-h-[50vh]">
+                <div className="scale-[0.85] origin-top">
+                  {slide.mockup}
+                </div>
               </div>
             </div>
           </motion.div>
-- 
2.49.1


From 7a447874383ee4031e3ca08648fcfcf0f275fdb8 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 23:31:50 +0100
Subject: [PATCH 359/428] fix: center titles, constrain mockups with overflow
 hidden instead of scale

---
 components/checkout/FeatureSlideshow.tsx | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/components/checkout/FeatureSlideshow.tsx b/components/checkout/FeatureSlideshow.tsx
index 5b04eef..7502ac7 100644
--- a/components/checkout/FeatureSlideshow.tsx
+++ b/components/checkout/FeatureSlideshow.tsx
@@ -50,7 +50,7 @@ export default function FeatureSlideshow() {
       <div className="absolute inset-0 bg-black/40" />
 
       {/* Content */}
-      <div className="relative z-10 flex h-full flex-col justify-center px-10 xl:px-14 py-12">
+      <div className="relative z-10 flex h-full flex-col items-center justify-center px-10 xl:px-14 py-12 overflow-hidden">
         <AnimatePresence mode="wait">
           <motion.div
             key={activeIndex}
@@ -58,27 +58,24 @@ export default function FeatureSlideshow() {
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
             transition={{ duration: 0.45 }}
-            className="flex flex-col gap-8"
+            className="flex flex-col items-center gap-6 w-full max-w-lg"
           >
-            {/* Headline only */}
-            <h2 className="text-3xl xl:text-4xl font-bold text-white leading-tight">
+            {/* Headline — centered */}
+            <h2 className="text-3xl xl:text-4xl font-bold text-white leading-tight text-center">
               {slide.headline}
             </h2>
 
-            {/* Mockup */}
-            <div className="relative">
+            {/* Mockup — constrained */}
+            <div className="relative w-full">
               {/* Orange glow */}
               <div className="absolute -inset-8 rounded-3xl bg-brand-orange/8 blur-3xl pointer-events-none" />
 
-              <div className="relative rounded-2xl overflow-hidden max-h-[50vh]">
-                <div className="scale-[0.85] origin-top">
-                  {slide.mockup}
-                </div>
+              <div className="relative rounded-2xl overflow-hidden" style={{ maxHeight: '55vh' }}>
+                {slide.mockup}
               </div>
             </div>
           </motion.div>
         </AnimatePresence>
-
       </div>
     </div>
   )
-- 
2.49.1


From 977425fdb9cf55a0209c1bb2656774caa2fcb291 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 23:33:36 +0100
Subject: [PATCH 360/428] feat: break visitor carousel into 5 separate slides
 with unique titles

---
 components/checkout/FeatureSlideshow.tsx         | 16 ++++++++++++++--
 .../mockups/pulse-features-carousel.tsx          | 10 +++++-----
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/components/checkout/FeatureSlideshow.tsx b/components/checkout/FeatureSlideshow.tsx
index 7502ac7..79b8c12 100644
--- a/components/checkout/FeatureSlideshow.tsx
+++ b/components/checkout/FeatureSlideshow.tsx
@@ -4,7 +4,7 @@ import { useState, useEffect, useCallback } from 'react'
 import Image from 'next/image'
 import { AnimatePresence, motion } from 'framer-motion'
 import { PulseMockup } from '@/components/marketing/mockups/pulse-mockup'
-import { PulseFeaturesCarousel } from '@/components/marketing/mockups/pulse-features-carousel'
+import { PagesCard, ReferrersCard, LocationsCard, TechnologyCard, PeakHoursCard } from '@/components/marketing/mockups/pulse-features-carousel'
 import { FunnelMockup } from '@/components/marketing/mockups/funnel-mockup'
 import { EmailReportMockup } from '@/components/marketing/mockups/email-report-mockup'
 
@@ -13,9 +13,21 @@ interface Slide {
   mockup: React.ReactNode
 }
 
+function FeatureCard({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="rounded-xl border border-white/[0.08] bg-neutral-900/80 px-6 py-5 shadow-2xl">
+      {children}
+    </div>
+  )
+}
+
 const slides: Slide[] = [
   { headline: 'Your traffic, at a glance.', mockup: <PulseMockup /> },
-  { headline: 'Everything you need to know about your visitors.', mockup: <PulseFeaturesCarousel /> },
+  { headline: 'See which pages perform best.', mockup: <FeatureCard><PagesCard /></FeatureCard> },
+  { headline: 'Know where your visitors come from.', mockup: <FeatureCard><ReferrersCard /></FeatureCard> },
+  { headline: 'Visitors from around the world.', mockup: <FeatureCard><LocationsCard /></FeatureCard> },
+  { headline: 'Understand your audience's tech stack.', mockup: <FeatureCard><TechnologyCard /></FeatureCard> },
+  { headline: 'Find your peak traffic hours.', mockup: <FeatureCard><PeakHoursCard /></FeatureCard> },
   { headline: 'See where visitors drop off.', mockup: <FunnelMockup /> },
   { headline: 'Reports delivered to your inbox.', mockup: <EmailReportMockup /> },
 ]
diff --git a/components/marketing/mockups/pulse-features-carousel.tsx b/components/marketing/mockups/pulse-features-carousel.tsx
index be2def2..1201b18 100644
--- a/components/marketing/mockups/pulse-features-carousel.tsx
+++ b/components/marketing/mockups/pulse-features-carousel.tsx
@@ -113,7 +113,7 @@ function BarRow({
 
 // ─── Card 1: Pages ───────────────────────────────────────────────────────────
 
-function PagesCard() {
+export function PagesCard() {
   const data = [
     { label: '/', value: 142 },
     { label: '/products/drop', value: 68 },
@@ -169,7 +169,7 @@ function getReferrerIcon(name: string, favicon?: string) {
 
 const FAVICON_URL = 'https://www.google.com/s2/favicons'
 
-function ReferrersCard() {
+export function ReferrersCard() {
   const data = [
     { label: 'Direct', value: 186 },
     { label: 'Google', value: 94, domain: 'google.com' },
@@ -206,7 +206,7 @@ function ReferrersCard() {
 
 // ─── Card 3: Locations (Real Dotted Map) ─────────────────────────────────────
 
-function LocationsCard() {
+export function LocationsCard() {
   const mockData = [
     { country: 'CH', pageviews: 320 },
     { country: 'US', pageviews: 186 },
@@ -300,7 +300,7 @@ const BROWSER_ICONS: Record<string, string> = {
   Opera: '/icons/browsers/opera.svg',
 }
 
-function TechnologyCard() {
+export function TechnologyCard() {
   const data = [
     { label: 'Chrome', value: 412 },
     { label: 'Safari', value: 189 },
@@ -381,7 +381,7 @@ function getHighlightColor(value: number, max: number): string {
   return HIGHLIGHT_COLORS[4]
 }
 
-function PeakHoursCard() {
+export function PeakHoursCard() {
   const max = Math.max(...MOCK_GRID.flat())
 
   // Find best time
-- 
2.49.1


From 088db2a104da267293f4e6a264d102e1bb79671d Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 23:35:09 +0100
Subject: [PATCH 361/428] fix: escape apostrophe in slideshow headline

---
 components/checkout/FeatureSlideshow.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/checkout/FeatureSlideshow.tsx b/components/checkout/FeatureSlideshow.tsx
index 79b8c12..c7e3481 100644
--- a/components/checkout/FeatureSlideshow.tsx
+++ b/components/checkout/FeatureSlideshow.tsx
@@ -26,7 +26,7 @@ const slides: Slide[] = [
   { headline: 'See which pages perform best.', mockup: <FeatureCard><PagesCard /></FeatureCard> },
   { headline: 'Know where your visitors come from.', mockup: <FeatureCard><ReferrersCard /></FeatureCard> },
   { headline: 'Visitors from around the world.', mockup: <FeatureCard><LocationsCard /></FeatureCard> },
-  { headline: 'Understand your audience's tech stack.', mockup: <FeatureCard><TechnologyCard /></FeatureCard> },
+  { headline: 'Understand your audience\u2019s tech stack.', mockup: <FeatureCard><TechnologyCard /></FeatureCard> },
   { headline: 'Find your peak traffic hours.', mockup: <FeatureCard><PeakHoursCard /></FeatureCard> },
   { headline: 'See where visitors drop off.', mockup: <FunnelMockup /> },
   { headline: 'Reports delivered to your inbox.', mockup: <EmailReportMockup /> },
-- 
2.49.1


From 0bfde330505f130464029236e4f3325cfb2d6d70 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 23:39:38 +0100
Subject: [PATCH 362/428] fix: remove funnel and email report slides from
 checkout slideshow

---
 components/checkout/FeatureSlideshow.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/components/checkout/FeatureSlideshow.tsx b/components/checkout/FeatureSlideshow.tsx
index c7e3481..63bd6e9 100644
--- a/components/checkout/FeatureSlideshow.tsx
+++ b/components/checkout/FeatureSlideshow.tsx
@@ -5,8 +5,6 @@ import Image from 'next/image'
 import { AnimatePresence, motion } from 'framer-motion'
 import { PulseMockup } from '@/components/marketing/mockups/pulse-mockup'
 import { PagesCard, ReferrersCard, LocationsCard, TechnologyCard, PeakHoursCard } from '@/components/marketing/mockups/pulse-features-carousel'
-import { FunnelMockup } from '@/components/marketing/mockups/funnel-mockup'
-import { EmailReportMockup } from '@/components/marketing/mockups/email-report-mockup'
 
 interface Slide {
   headline: string
@@ -28,8 +26,6 @@ const slides: Slide[] = [
   { headline: 'Visitors from around the world.', mockup: <FeatureCard><LocationsCard /></FeatureCard> },
   { headline: 'Understand your audience\u2019s tech stack.', mockup: <FeatureCard><TechnologyCard /></FeatureCard> },
   { headline: 'Find your peak traffic hours.', mockup: <FeatureCard><PeakHoursCard /></FeatureCard> },
-  { headline: 'See where visitors drop off.', mockup: <FunnelMockup /> },
-  { headline: 'Reports delivered to your inbox.', mockup: <EmailReportMockup /> },
 ]
 
 export default function FeatureSlideshow() {
-- 
2.49.1


From af1d718a1896023a56ceb93e2a6f58dc8b67e833 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 23:50:28 +0100
Subject: [PATCH 363/428] fix: move logo to left panel, increase slide interval
 to 8s, keep mobile logo

---
 app/checkout/page.tsx                    |  4 ++--
 components/checkout/FeatureSlideshow.tsx | 19 ++++++++++++++++++-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/app/checkout/page.tsx b/app/checkout/page.tsx
index 43bf9c3..20e88cf 100644
--- a/app/checkout/page.tsx
+++ b/app/checkout/page.tsx
@@ -180,8 +180,8 @@ function CheckoutContent() {
 
       {/* Right — Payment (scrollable) */}
       <div className="w-full lg:w-1/2 flex flex-col h-full overflow-y-auto">
-        {/* Header */}
-        <div className="px-6 py-5">
+        {/* Logo on mobile only (desktop logo is on the left panel) */}
+        <div className="px-6 py-5 lg:hidden">
           <Link href="/pricing" className="flex items-center gap-2 w-fit hover:opacity-80 transition-opacity">
             <Image
               src={pulseIcon}
diff --git a/components/checkout/FeatureSlideshow.tsx b/components/checkout/FeatureSlideshow.tsx
index 63bd6e9..a9147d0 100644
--- a/components/checkout/FeatureSlideshow.tsx
+++ b/components/checkout/FeatureSlideshow.tsx
@@ -2,6 +2,8 @@
 
 import { useState, useEffect, useCallback } from 'react'
 import Image from 'next/image'
+import Link from 'next/link'
+import pulseIcon from '@/public/pulse_icon_no_margins.png'
 import { AnimatePresence, motion } from 'framer-motion'
 import { PulseMockup } from '@/components/marketing/mockups/pulse-mockup'
 import { PagesCard, ReferrersCard, LocationsCard, TechnologyCard, PeakHoursCard } from '@/components/marketing/mockups/pulse-features-carousel'
@@ -36,7 +38,7 @@ export default function FeatureSlideshow() {
   }, [])
 
   useEffect(() => {
-    const timer = setInterval(advance, 5000)
+    const timer = setInterval(advance, 8000)
     return () => clearInterval(timer)
   }, [advance])
 
@@ -57,6 +59,21 @@ export default function FeatureSlideshow() {
       {/* Dark overlay */}
       <div className="absolute inset-0 bg-black/40" />
 
+      {/* Logo */}
+      <div className="absolute top-0 left-0 z-20 px-6 py-5">
+        <Link href="/pricing" className="flex items-center gap-2 w-fit hover:opacity-80 transition-opacity">
+          <Image
+            src={pulseIcon}
+            alt="Pulse"
+            width={36}
+            height={36}
+            unoptimized
+            className="object-contain w-8 h-8"
+          />
+          <span className="text-xl font-bold text-white tracking-tight">Pulse</span>
+        </Link>
+      </div>
+
       {/* Content */}
       <div className="relative z-10 flex h-full flex-col items-center justify-center px-10 xl:px-14 py-12 overflow-hidden">
         <AnimatePresence mode="wait">
-- 
2.49.1


From 342ee1fdf3cfd9c8386f9ce67163a0ddd6179116 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 23:54:00 +0100
Subject: [PATCH 364/428] fix: add top padding to right column on checkout page

---
 app/checkout/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/checkout/page.tsx b/app/checkout/page.tsx
index 20e88cf..d1dae06 100644
--- a/app/checkout/page.tsx
+++ b/app/checkout/page.tsx
@@ -196,7 +196,7 @@ function CheckoutContent() {
         </div>
 
         {/* Main content */}
-        <div className="flex flex-1 flex-col px-4 pb-12 pt-2 sm:px-6 lg:px-10">
+        <div className="flex flex-1 flex-col px-4 pb-12 pt-6 lg:pt-10 sm:px-6 lg:px-10">
           <motion.div
             initial={{ opacity: 0, y: 16 }}
             animate={{ opacity: 1, y: 0 }}
-- 
2.49.1


From 5cff767e32e9c09433f431cd9d702be0e27bb721 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 23:59:30 +0100
Subject: [PATCH 365/428] =?UTF-8?q?fix:=20org=20switch=20now=20updates=20a?=
 =?UTF-8?q?uth=20context=20immediately=20=E2=80=94=20no=20stale=20org=20in?=
 =?UTF-8?q?=20header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/layout-content.tsx | 10 ++++------
 lib/auth/context.tsx   | 11 +++--------
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/app/layout-content.tsx b/app/layout-content.tsx
index 3e0d959..745e0e9 100644
--- a/app/layout-content.tsx
+++ b/app/layout-content.tsx
@@ -81,12 +81,10 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
       setIsSwitchingOrg(true)
       const { access_token } = await switchContext(orgId)
       await setSessionAction(access_token)
-      router.refresh()
-      // Allow time for server components to re-fetch with new auth
-      setTimeout(() => {
-        setIsSwitchingOrg(false)
-        router.push('/')
-      }, 600)
+      // Refresh auth context (re-fetches /auth/user/me with new JWT, updates org_id + SWR cache)
+      await auth.refresh()
+      router.push('/')
+      setTimeout(() => setIsSwitchingOrg(false), 300)
     } catch (err) {
       setIsSwitchingOrg(false)
       logger.error('Failed to switch organization', err)
diff --git a/lib/auth/context.tsx b/lib/auth/context.tsx
index ef5f7af..4ce4881 100644
--- a/lib/auth/context.tsx
+++ b/lib/auth/context.tsx
@@ -112,14 +112,9 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     try {
       const userData = await apiRequest<User>('/auth/user/me')
 
-      setUser(prev => {
-        const merged = {
-          ...userData,
-          org_id: prev?.org_id,
-          role: prev?.role
-        }
-        localStorage.setItem('user', JSON.stringify(merged))
-        return merged
+      setUser(() => {
+        localStorage.setItem('user', JSON.stringify(userData))
+        return userData
       })
     } catch (e) {
       logger.error('Failed to refresh user data', e)
-- 
2.49.1


From ef8317608938dc2db7b27e7bec834b7d323ef648 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 00:25:23 +0100
Subject: [PATCH 366/428] fix: replace browser confirm with in-app modal for
 cancel subscription

---
 .../unified/tabs/WorkspaceBillingTab.tsx      | 35 ++++++++++++++++---
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/components/settings/unified/tabs/WorkspaceBillingTab.tsx b/components/settings/unified/tabs/WorkspaceBillingTab.tsx
index a5ecdff..93f5ab7 100644
--- a/components/settings/unified/tabs/WorkspaceBillingTab.tsx
+++ b/components/settings/unified/tabs/WorkspaceBillingTab.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react'
 import Link from 'next/link'
-import { Button, toast, Spinner } from '@ciphera-net/ui'
+import { Button, toast, Spinner, Modal } from '@ciphera-net/ui'
 import { CreditCard, ArrowSquareOut } from '@phosphor-icons/react'
 import { useSubscription } from '@/lib/swr/dashboard'
 import { updatePaymentMethod, cancelSubscription, resumeSubscription, getOrders, type Order } from '@/lib/api/billing'
@@ -12,6 +12,7 @@ import { getAuthErrorMessage } from '@ciphera-net/ui'
 export default function WorkspaceBillingTab() {
   const { data: subscription, isLoading, mutate } = useSubscription()
   const [cancelling, setCancelling] = useState(false)
+  const [showCancelConfirm, setShowCancelConfirm] = useState(false)
   const [orders, setOrders] = useState<Order[]>([])
 
   useEffect(() => {
@@ -32,7 +33,6 @@ export default function WorkspaceBillingTab() {
   }
 
   const handleCancel = async () => {
-    if (!confirm('Are you sure you want to cancel your subscription?')) return
     setCancelling(true)
     try {
       await cancelSubscription()
@@ -42,6 +42,7 @@ export default function WorkspaceBillingTab() {
       toast.error(getAuthErrorMessage(err as Error) || 'Failed to cancel subscription')
     } finally {
       setCancelling(false)
+      setShowCancelConfirm(false)
     }
   }
 
@@ -155,12 +156,11 @@ export default function WorkspaceBillingTab() {
 
         {isActive && !subscription.cancel_at_period_end && (
           <Button
-            onClick={handleCancel}
+            onClick={() => setShowCancelConfirm(true)}
             variant="secondary"
             className="text-sm text-neutral-400 hover:text-red-400"
-            disabled={cancelling}
           >
-            {cancelling ? 'Cancelling...' : 'Cancel subscription'}
+            Cancel subscription
           </Button>
         )}
 
@@ -171,6 +171,31 @@ export default function WorkspaceBillingTab() {
         )}
       </div>
 
+      {/* Cancel confirmation */}
+      <Modal isOpen={showCancelConfirm} onClose={() => setShowCancelConfirm(false)} title="Cancel subscription" className="max-w-md">
+        <p className="text-sm text-neutral-400 mb-1">
+          Are you sure you want to cancel your subscription?
+        </p>
+        {subscription.current_period_end && (
+          <p className="text-sm text-neutral-500 mb-5">
+            Your plan will remain active until {formatDateLong(new Date(subscription.current_period_end))}.
+          </p>
+        )}
+        <div className="flex justify-end gap-3">
+          <Button variant="secondary" className="text-sm" onClick={() => setShowCancelConfirm(false)} disabled={cancelling}>
+            Keep plan
+          </Button>
+          <Button
+            variant="primary"
+            className="text-sm bg-red-600 hover:bg-red-700 border-red-600 hover:border-red-700"
+            onClick={handleCancel}
+            disabled={cancelling}
+          >
+            {cancelling ? 'Cancelling...' : 'Yes, cancel'}
+          </Button>
+        </div>
+      </Modal>
+
       {/* Recent Invoices */}
       {orders.length > 0 && (
         <div className="space-y-2 pt-6 border-t border-neutral-800">
-- 
2.49.1


From 4e9439770ff12252c76dce0a5307d11a532e1744 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 11:07:20 +0100
Subject: [PATCH 367/428] docs: add VAT implementation design

---
 .../27-03-2026-vat-implementation-design.md   | 156 ++++++++++++++++++
 1 file changed, 156 insertions(+)
 create mode 100644 docs/plans/27-03-2026-vat-implementation-design.md

diff --git a/docs/plans/27-03-2026-vat-implementation-design.md b/docs/plans/27-03-2026-vat-implementation-design.md
new file mode 100644
index 0000000..8a04f13
--- /dev/null
+++ b/docs/plans/27-03-2026-vat-implementation-design.md
@@ -0,0 +1,156 @@
+# VAT Implementation Design
+
+## Goal
+
+Add EU VAT handling to the Pulse checkout and subscription flow. Prices are shown and charged excl. VAT; VAT is calculated at checkout based on customer country and VAT ID, and added to the Mollie charge.
+
+## VAT Rules
+
+| Customer | Rate | Reason |
+|----------|------|--------|
+| Country = BE | 21% | Belgian VAT |
+| EU country + valid VIES VAT ID | 0% | Reverse charge (intra-community) |
+| EU country + no/invalid VAT ID | 21% | Belgian VAT (no OSS registration) |
+| Non-EU country | 0% | Outside EU scope |
+
+---
+
+## Architecture
+
+Backend-only VAT calculation. Frontend calls a new endpoint when country/VAT ID changes and displays the breakdown. Backend validates VIES, calculates totals, and charges the VAT-inclusive amount through Mollie.
+
+---
+
+## Section 1: New Endpoint — `POST /api/billing/calculate-vat`
+
+**Request:**
+```json
+{
+  "plan_id": "solo",
+  "interval": "month",
+  "limit": 10000,
+  "country": "BE",
+  "vat_id": ""
+}
+```
+
+**Response:**
+```json
+{
+  "base_amount": "7.00",
+  "vat_rate": 21,
+  "vat_amount": "1.47",
+  "total_amount": "8.47",
+  "vat_exempt": false,
+  "vat_reason": ""
+}
+```
+
+VAT-exempt example (valid EU VAT ID):
+```json
+{
+  "base_amount": "7.00",
+  "vat_rate": 0,
+  "vat_amount": "0.00",
+  "total_amount": "7.00",
+  "vat_exempt": true,
+  "vat_reason": "Reverse charge (intra-community)"
+}
+```
+
+---
+
+## Section 2: New Backend Module — `internal/billing/vat.go`
+
+**Functions:**
+- `CalculateVAT(planID, interval string, limit int64, country, vatID string) (*VATResult, error)` — main entry point
+- `validateVIES(countryCode, vatNumber string) (bool, error)` — calls EU VIES REST API (`https://ec.europa.eu/taxation_customs/vies/rest-api/ms/{country}/vat/{number}`)
+- `isEUCountry(country string) bool` — static list of 27 EU member state codes
+- In-memory VIES cache: 24h TTL per `countryCode+vatNumber` key
+
+**`EmbeddedCheckoutHandler` changes:**
+- Call `CalculateVAT` instead of `GetSubscriptionAmount` for the subscription amount
+- Store VAT breakdown in payment metadata: `vat_rate`, `vat_amount`, `base_amount`, `total_amount`
+
+**`handleFirstPaymentCompleted` changes:**
+- Read `total_amount` from metadata for the recurring subscription charge (not `amount`)
+
+**`ChangePlanHandler` changes:**
+- Call `CalculateVAT` using stored `billing_country` + `vat_id` from `organization_billing`
+
+---
+
+## Section 3: Frontend Changes
+
+**State lifting in `CheckoutContent` (`app/checkout/page.tsx`):**
+- `country` and `vatId` state lifted up from `PaymentForm` to `CheckoutContent`
+- Passed down to both `PlanSummary` (display) and `PaymentForm` (submission)
+
+**`PlanSummary.tsx`:**
+- Accepts `country`, `vatId`, `onCountryChange`, `onVatIdChange` props
+- Country selector and VAT ID input moved here from `PaymentForm`
+- Calls `POST /api/billing/calculate-vat` on country/VAT ID change (debounced 400ms)
+- Shows VAT breakdown when country is selected:
+  ```
+  €7.00 /mo    excl. VAT
+  VAT 21%      €1.47
+  ──────────────────────
+  Total        €8.47 /mo
+  ```
+- Shows "Reverse charge" note when VAT-exempt
+- Loading spinner while VIES validates
+
+**`PaymentForm.tsx`:**
+- Country + VAT ID inputs removed
+- Receives `totalAmount`, `country`, `vatId` as props
+- Submit button shows: "Start free trial · €8.47/mo"
+- Passes `country` + `vat_id` to `createEmbeddedCheckout` as before
+
+**`PricingSection.tsx`:**
+- Add small "excl. VAT" label under each plan price
+
+---
+
+## Data Flow
+
+```
+User selects country / enters VAT ID
+  → PlanSummary debounce 400ms
+  → POST /api/billing/calculate-vat
+    → CalculateVAT()
+      → validateVIES() if VAT ID provided (cached 24h)
+      → return VATResult
+  → Display breakdown in PlanSummary
+  → Pass totalAmount to PaymentForm submit button
+
+User clicks "Start free trial"
+  → POST /api/billing/checkout-embedded (country + vat_id + card_token)
+    → CalculateVAT() (re-validated server-side)
+    → CreateFirstPaymentWithToken("0.00") — trial mandate, no charge
+    → handleFirstPaymentCompleted()
+      → CreateSubscription(totalAmount) — VAT-inclusive recurring amount
+```
+
+---
+
+## Error Handling
+
+- VIES API down → treat as invalid VAT ID (charge 21%) — log warning
+- VIES validation failed → show "VAT ID could not be verified, 21% VAT will apply"
+- Country not selected → no VAT breakdown shown, checkout blocked
+
+---
+
+## Files Changed
+
+| Action | File |
+|--------|------|
+| New | `pulse-backend/internal/billing/vat.go` |
+| New | `POST /api/billing/calculate-vat` in `billing_handlers.go` |
+| Modified | `EmbeddedCheckoutHandler` in `billing_handlers.go` |
+| Modified | `handleFirstPaymentCompleted` in `billing_handlers.go` |
+| Modified | `ChangePlanHandler` in `billing_handlers.go` |
+| Modified | `pulse-frontend/app/checkout/page.tsx` |
+| Modified | `pulse-frontend/components/checkout/PlanSummary.tsx` |
+| Modified | `pulse-frontend/components/checkout/PaymentForm.tsx` |
+| Modified | `pulse-frontend/components/PricingSection.tsx` |
-- 
2.49.1


From f4ba6c8a2acc9b86b4cbb35cfc658ecf88706628 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 11:07:45 +0100
Subject: [PATCH 368/428] Revert "docs: add VAT implementation design"

This reverts commit 4e9439770ff12252c76dce0a5307d11a532e1744.
---
 .../27-03-2026-vat-implementation-design.md   | 156 ------------------
 1 file changed, 156 deletions(-)
 delete mode 100644 docs/plans/27-03-2026-vat-implementation-design.md

diff --git a/docs/plans/27-03-2026-vat-implementation-design.md b/docs/plans/27-03-2026-vat-implementation-design.md
deleted file mode 100644
index 8a04f13..0000000
--- a/docs/plans/27-03-2026-vat-implementation-design.md
+++ /dev/null
@@ -1,156 +0,0 @@
-# VAT Implementation Design
-
-## Goal
-
-Add EU VAT handling to the Pulse checkout and subscription flow. Prices are shown and charged excl. VAT; VAT is calculated at checkout based on customer country and VAT ID, and added to the Mollie charge.
-
-## VAT Rules
-
-| Customer | Rate | Reason |
-|----------|------|--------|
-| Country = BE | 21% | Belgian VAT |
-| EU country + valid VIES VAT ID | 0% | Reverse charge (intra-community) |
-| EU country + no/invalid VAT ID | 21% | Belgian VAT (no OSS registration) |
-| Non-EU country | 0% | Outside EU scope |
-
----
-
-## Architecture
-
-Backend-only VAT calculation. Frontend calls a new endpoint when country/VAT ID changes and displays the breakdown. Backend validates VIES, calculates totals, and charges the VAT-inclusive amount through Mollie.
-
----
-
-## Section 1: New Endpoint — `POST /api/billing/calculate-vat`
-
-**Request:**
-```json
-{
-  "plan_id": "solo",
-  "interval": "month",
-  "limit": 10000,
-  "country": "BE",
-  "vat_id": ""
-}
-```
-
-**Response:**
-```json
-{
-  "base_amount": "7.00",
-  "vat_rate": 21,
-  "vat_amount": "1.47",
-  "total_amount": "8.47",
-  "vat_exempt": false,
-  "vat_reason": ""
-}
-```
-
-VAT-exempt example (valid EU VAT ID):
-```json
-{
-  "base_amount": "7.00",
-  "vat_rate": 0,
-  "vat_amount": "0.00",
-  "total_amount": "7.00",
-  "vat_exempt": true,
-  "vat_reason": "Reverse charge (intra-community)"
-}
-```
-
----
-
-## Section 2: New Backend Module — `internal/billing/vat.go`
-
-**Functions:**
-- `CalculateVAT(planID, interval string, limit int64, country, vatID string) (*VATResult, error)` — main entry point
-- `validateVIES(countryCode, vatNumber string) (bool, error)` — calls EU VIES REST API (`https://ec.europa.eu/taxation_customs/vies/rest-api/ms/{country}/vat/{number}`)
-- `isEUCountry(country string) bool` — static list of 27 EU member state codes
-- In-memory VIES cache: 24h TTL per `countryCode+vatNumber` key
-
-**`EmbeddedCheckoutHandler` changes:**
-- Call `CalculateVAT` instead of `GetSubscriptionAmount` for the subscription amount
-- Store VAT breakdown in payment metadata: `vat_rate`, `vat_amount`, `base_amount`, `total_amount`
-
-**`handleFirstPaymentCompleted` changes:**
-- Read `total_amount` from metadata for the recurring subscription charge (not `amount`)
-
-**`ChangePlanHandler` changes:**
-- Call `CalculateVAT` using stored `billing_country` + `vat_id` from `organization_billing`
-
----
-
-## Section 3: Frontend Changes
-
-**State lifting in `CheckoutContent` (`app/checkout/page.tsx`):**
-- `country` and `vatId` state lifted up from `PaymentForm` to `CheckoutContent`
-- Passed down to both `PlanSummary` (display) and `PaymentForm` (submission)
-
-**`PlanSummary.tsx`:**
-- Accepts `country`, `vatId`, `onCountryChange`, `onVatIdChange` props
-- Country selector and VAT ID input moved here from `PaymentForm`
-- Calls `POST /api/billing/calculate-vat` on country/VAT ID change (debounced 400ms)
-- Shows VAT breakdown when country is selected:
-  ```
-  €7.00 /mo    excl. VAT
-  VAT 21%      €1.47
-  ──────────────────────
-  Total        €8.47 /mo
-  ```
-- Shows "Reverse charge" note when VAT-exempt
-- Loading spinner while VIES validates
-
-**`PaymentForm.tsx`:**
-- Country + VAT ID inputs removed
-- Receives `totalAmount`, `country`, `vatId` as props
-- Submit button shows: "Start free trial · €8.47/mo"
-- Passes `country` + `vat_id` to `createEmbeddedCheckout` as before
-
-**`PricingSection.tsx`:**
-- Add small "excl. VAT" label under each plan price
-
----
-
-## Data Flow
-
-```
-User selects country / enters VAT ID
-  → PlanSummary debounce 400ms
-  → POST /api/billing/calculate-vat
-    → CalculateVAT()
-      → validateVIES() if VAT ID provided (cached 24h)
-      → return VATResult
-  → Display breakdown in PlanSummary
-  → Pass totalAmount to PaymentForm submit button
-
-User clicks "Start free trial"
-  → POST /api/billing/checkout-embedded (country + vat_id + card_token)
-    → CalculateVAT() (re-validated server-side)
-    → CreateFirstPaymentWithToken("0.00") — trial mandate, no charge
-    → handleFirstPaymentCompleted()
-      → CreateSubscription(totalAmount) — VAT-inclusive recurring amount
-```
-
----
-
-## Error Handling
-
-- VIES API down → treat as invalid VAT ID (charge 21%) — log warning
-- VIES validation failed → show "VAT ID could not be verified, 21% VAT will apply"
-- Country not selected → no VAT breakdown shown, checkout blocked
-
----
-
-## Files Changed
-
-| Action | File |
-|--------|------|
-| New | `pulse-backend/internal/billing/vat.go` |
-| New | `POST /api/billing/calculate-vat` in `billing_handlers.go` |
-| Modified | `EmbeddedCheckoutHandler` in `billing_handlers.go` |
-| Modified | `handleFirstPaymentCompleted` in `billing_handlers.go` |
-| Modified | `ChangePlanHandler` in `billing_handlers.go` |
-| Modified | `pulse-frontend/app/checkout/page.tsx` |
-| Modified | `pulse-frontend/components/checkout/PlanSummary.tsx` |
-| Modified | `pulse-frontend/components/checkout/PaymentForm.tsx` |
-| Modified | `pulse-frontend/components/PricingSection.tsx` |
-- 
2.49.1


From 5ca24f6c9c5a725846a4b9da0402d47e6f1d78ae Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 11:33:48 +0100
Subject: [PATCH 369/428] feat: add calculateVAT API function

---
 lib/api/billing.ts | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/lib/api/billing.ts b/lib/api/billing.ts
index 22c1391..01f25b5 100644
--- a/lib/api/billing.ts
+++ b/lib/api/billing.ts
@@ -102,6 +102,30 @@ export async function getOrders(): Promise<Order[]> {
   return apiRequest<Order[]>('/api/billing/invoices')
 }
 
+export interface VATResult {
+  base_amount: string
+  vat_rate: number
+  vat_amount: string
+  total_amount: string
+  vat_exempt: boolean
+  vat_reason: string
+}
+
+export interface CalculateVATParams {
+  plan_id: string
+  interval: string
+  limit: number
+  country: string
+  vat_id?: string
+}
+
+export async function calculateVAT(params: CalculateVATParams): Promise<VATResult> {
+  return apiRequest<VATResult>('/api/billing/calculate-vat', {
+    method: 'POST',
+    body: JSON.stringify(params),
+  })
+}
+
 export interface CreateEmbeddedCheckoutParams {
   plan_id: string
   interval: string
-- 
2.49.1


From 0fcc4866fb1582a0e73afa6ca069bcf8ed7e5af4 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 11:34:29 +0100
Subject: [PATCH 370/428] feat: lift country/vatId state to CheckoutContent

---
 app/checkout/page.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/app/checkout/page.tsx b/app/checkout/page.tsx
index d1dae06..250653b 100644
--- a/app/checkout/page.tsx
+++ b/app/checkout/page.tsx
@@ -170,6 +170,8 @@ function CheckoutContent() {
   const planId = plan!
   const billingInterval = interval as 'month' | 'year'
   const pageviewLimit = Number(limit)
+  const [country, setCountry] = useState('')
+  const [vatId, setVatId] = useState('')
 
   return (
     <div className="flex h-screen overflow-hidden">
@@ -208,6 +210,10 @@ function CheckoutContent() {
               plan={planId}
               interval={billingInterval}
               limit={pageviewLimit}
+              country={country}
+              vatId={vatId}
+              onCountryChange={setCountry}
+              onVatIdChange={setVatId}
             />
 
             {/* Payment form */}
@@ -215,6 +221,8 @@ function CheckoutContent() {
               plan={planId}
               interval={billingInterval}
               limit={pageviewLimit}
+              country={country}
+              vatId={vatId}
             />
           </motion.div>
         </div>
-- 
2.49.1


From d9e3f90c277d8e50edaa146b40e631a8cb45671f Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 11:41:44 +0100
Subject: [PATCH 371/428] feat: add VAT breakdown to PlanSummary

---
 components/checkout/PlanSummary.tsx | 137 ++++++++++++++++++++++------
 1 file changed, 108 insertions(+), 29 deletions(-)

diff --git a/components/checkout/PlanSummary.tsx b/components/checkout/PlanSummary.tsx
index bec4c3e..a28541b 100644
--- a/components/checkout/PlanSummary.tsx
+++ b/components/checkout/PlanSummary.tsx
@@ -1,28 +1,36 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { motion } from 'framer-motion'
-import {
-  TRAFFIC_TIERS,
-  PLAN_PRICES,
-} from '@/lib/plans'
+import { Select } from '@ciphera-net/ui'
+import { TRAFFIC_TIERS, PLAN_PRICES } from '@/lib/plans'
+import { COUNTRY_OPTIONS } from '@/lib/countries'
+import { calculateVAT, type VATResult } from '@/lib/api/billing'
 
 interface PlanSummaryProps {
   plan: string
   interval: string
   limit: number
+  country: string
+  vatId: string
+  onCountryChange: (country: string) => void
+  onVatIdChange: (vatId: string) => void
 }
 
-export default function PlanSummary({ plan, interval, limit }: PlanSummaryProps) {
+const inputClass =
+  'w-full rounded-lg border border-neutral-700 bg-neutral-800/50 px-3 py-2.5 text-sm text-white placeholder:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-brand-orange focus:border-brand-orange transition-colors'
+
+export default function PlanSummary({ plan, interval, limit, country, vatId, onCountryChange, onVatIdChange }: PlanSummaryProps) {
   const router = useRouter()
   const searchParams = useSearchParams()
   const [currentInterval, setCurrentInterval] = useState(interval)
+  const [vatResult, setVatResult] = useState<VATResult | null>(null)
+  const [vatLoading, setVatLoading] = useState(false)
 
   const monthlyCents = PLAN_PRICES[plan]?.[limit] || 0
   const isYearly = currentInterval === 'year'
-  const displayPrice = isYearly ? (monthlyCents * 11) / 100 : monthlyCents / 100
-  const monthlyEquivalent = isYearly ? displayPrice / 12 : displayPrice
+  const baseDisplay = isYearly ? (monthlyCents * 11) / 100 : monthlyCents / 100
 
   const tierLabel =
     TRAFFIC_TIERS.find((t) => t.value === limit)?.label ||
@@ -35,18 +43,35 @@ export default function PlanSummary({ plan, interval, limit }: PlanSummaryProps)
     router.replace(`/checkout?${params.toString()}`, { scroll: false })
   }
 
+  const fetchVAT = useCallback(async (c: string, v: string, iv: string) => {
+    if (!c) { setVatResult(null); return }
+    setVatLoading(true)
+    try {
+      const result = await calculateVAT({ plan_id: plan, interval: iv, limit, country: c, vat_id: v || undefined })
+      setVatResult(result)
+    } catch {
+      setVatResult(null)
+    } finally {
+      setVatLoading(false)
+    }
+  }, [plan, limit])
+
+  useEffect(() => {
+    if (!country) { setVatResult(null); return }
+    const timer = setTimeout(() => fetchVAT(country, vatId, currentInterval), vatId ? 400 : 0)
+    return () => clearTimeout(timer)
+  }, [country, vatId, currentInterval, fetchVAT])
+
   return (
-    <div className="rounded-2xl border border-neutral-800 bg-neutral-900/50 backdrop-blur-xl p-5">
+    <div className="rounded-2xl border border-neutral-800 bg-neutral-900/50 backdrop-blur-xl p-5 space-y-4">
+      {/* Plan name + interval toggle */}
       <div className="flex flex-col sm:flex-row sm:items-center gap-4">
-        {/* Plan name + badge */}
         <div className="flex items-center gap-3">
           <h2 className="text-lg font-semibold text-white capitalize">{plan}</h2>
           <span className="rounded-full bg-brand-orange/15 px-3 py-0.5 text-xs font-medium text-brand-orange">
             30-day trial
           </span>
         </div>
-
-        {/* Interval toggle */}
         <div className="flex items-center gap-1 p-1 bg-neutral-800/50 rounded-xl sm:ml-auto">
           {(['month', 'year'] as const).map((iv) => (
             <button
@@ -70,24 +95,78 @@ export default function PlanSummary({ plan, interval, limit }: PlanSummaryProps)
         </div>
       </div>
 
-      {/* Price row */}
-      <div className="mt-4 flex items-baseline gap-2 flex-wrap">
-        <span className="text-3xl font-bold tracking-tight text-white">
-          &euro;{isYearly ? monthlyEquivalent.toFixed(2) : displayPrice.toFixed(0)}
-        </span>
-        <span className="text-neutral-400 text-sm">/mo</span>
-        <span className="text-neutral-500 text-sm">&middot; {tierLabel} pageviews</span>
-        {isYearly && (
-          <span className="rounded-full bg-brand-orange/15 px-2.5 py-0.5 text-xs font-medium text-brand-orange">
-            Save 1 month
-          </span>
-        )}
+      {/* Country */}
+      <div>
+        <label className="block text-sm font-medium text-neutral-300 mb-1.5">Country</label>
+        <Select
+          value={country}
+          onChange={onCountryChange}
+          variant="input"
+          options={[{ value: '', label: 'Select country' }, ...COUNTRY_OPTIONS.map((c) => ({ value: c.value, label: c.label }))]}
+        />
+      </div>
+
+      {/* VAT ID */}
+      <div>
+        <label className="block text-sm font-medium text-neutral-300 mb-1.5">
+          VAT ID <span className="text-neutral-500">(optional)</span>
+        </label>
+        <input
+          type="text"
+          value={vatId}
+          onChange={(e) => onVatIdChange(e.target.value)}
+          placeholder="e.g. BE0123456789"
+          className={inputClass}
+        />
+      </div>
+
+      {/* Price breakdown */}
+      <div className="pt-2 border-t border-neutral-800">
+        {!country ? (
+          <div className="flex items-baseline gap-2 flex-wrap">
+            <span className="text-3xl font-bold tracking-tight text-white">
+              &euro;{isYearly ? (baseDisplay / 12).toFixed(2) : baseDisplay.toFixed(0)}
+            </span>
+            <span className="text-neutral-400 text-sm">/mo</span>
+            <span className="text-neutral-500 text-sm">excl. VAT &middot; {tierLabel} pageviews</span>
+            {isYearly && (
+              <span className="rounded-full bg-brand-orange/15 px-2.5 py-0.5 text-xs font-medium text-brand-orange">
+                Save 1 month
+              </span>
+            )}
+          </div>
+        ) : vatLoading ? (
+          <div className="flex items-center gap-2 text-sm text-neutral-400">
+            <div className="h-4 w-4 animate-spin rounded-full border-2 border-neutral-600 border-t-white" />
+            Calculating VAT...
+          </div>
+        ) : vatResult ? (
+          <div className="space-y-1.5 text-sm">
+            <div className="flex justify-between text-neutral-400">
+              <span>Subtotal ({tierLabel} pageviews)</span>
+              <span>&euro;{vatResult.base_amount}</span>
+            </div>
+            {vatResult.vat_exempt ? (
+              <div className="flex justify-between text-neutral-500 text-xs">
+                <span>{vatResult.vat_reason}</span>
+                <span>&euro;0.00</span>
+              </div>
+            ) : (
+              <div className="flex justify-between text-neutral-400">
+                <span>VAT {vatResult.vat_rate}%</span>
+                <span>&euro;{vatResult.vat_amount}</span>
+              </div>
+            )}
+            <div className="flex justify-between font-semibold text-white pt-1 border-t border-neutral-800">
+              <span>Total /mo</span>
+              <span>&euro;{vatResult.total_amount}</span>
+            </div>
+            {isYearly && (
+              <p className="text-xs text-neutral-500">Billed as &euro;{(parseFloat(vatResult.total_amount) * 12).toFixed(2)}/year</p>
+            )}
+          </div>
+        ) : null}
       </div>
-      {isYearly && (
-        <p className="mt-1 text-sm text-neutral-400">
-          &euro;{displayPrice.toFixed(2)} billed yearly
-        </p>
-      )}
     </div>
   )
 }
-- 
2.49.1


From eb52b7fae66797d1eb77174a4e302fe22d584751 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 11:43:19 +0100
Subject: [PATCH 372/428] feat: remove country/VAT inputs from PaymentForm,
 accept as props

---
 components/checkout/PaymentForm.tsx | 43 ++++-------------------------
 1 file changed, 6 insertions(+), 37 deletions(-)

diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx
index 94487c0..fdd0a92 100644
--- a/components/checkout/PaymentForm.tsx
+++ b/components/checkout/PaymentForm.tsx
@@ -1,11 +1,9 @@
 'use client'
 
 import { useEffect, useRef, useState } from 'react'
-import { useRouter, useSearchParams } from 'next/navigation'
+import { useRouter } from 'next/navigation'
 import Script from 'next/script'
 import { Lock, ShieldCheck } from '@phosphor-icons/react'
-import { Select } from '@ciphera-net/ui'
-import { COUNTRY_OPTIONS } from '@/lib/countries'
 import { initMollie, getMollie, MOLLIE_FIELD_STYLES, type MollieComponent } from '@/lib/mollie'
 import { createEmbeddedCheckout } from '@/lib/api/billing'
 
@@ -13,20 +11,16 @@ interface PaymentFormProps {
   plan: string
   interval: string
   limit: number
+  country: string
+  vatId: string
 }
 
-const inputClass =
-  'w-full rounded-lg border border-neutral-700 bg-neutral-800/50 px-3 py-2.5 text-sm text-white placeholder:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-brand-orange focus:border-brand-orange transition-colors'
 const mollieFieldBase =
   'w-full rounded-lg border border-neutral-700 bg-neutral-800/50 px-3 py-3 h-[48px] transition-all focus-within:ring-1 focus-within:ring-brand-orange focus-within:border-brand-orange'
 
-export default function PaymentForm({ plan, interval, limit }: PaymentFormProps) {
+export default function PaymentForm({ plan, interval, limit, country, vatId }: PaymentFormProps) {
   const router = useRouter()
-  const searchParams = useSearchParams()
-  const currentInterval = searchParams.get('interval') || interval
 
-  const [country, setCountry] = useState('')
-  const [vatId, setVatId] = useState('')
   const [mollieReady, setMollieReady] = useState(false)
   const [mollieError, setMollieError] = useState(false)
   const [formError, setFormError] = useState<string | null>(null)
@@ -130,7 +124,7 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
 
       const result = await createEmbeddedCheckout({
         plan_id: plan,
-        interval: currentInterval,
+        interval: interval,
         limit,
         country,
         vat_id: vatId || undefined,
@@ -209,31 +203,6 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
           </div>
         </div>
 
-        {/* Country */}
-        <div className="mb-4">
-          <label className="block text-sm font-medium text-neutral-300 mb-1.5">Country</label>
-          <Select
-            value={country}
-            onChange={setCountry}
-            variant="input"
-            options={[{ value: '', label: 'Select country' }, ...COUNTRY_OPTIONS.map((c) => ({ value: c.value, label: c.label }))]}
-          />
-        </div>
-
-        {/* VAT ID */}
-        <div className="mb-6">
-          <label className="block text-sm font-medium text-neutral-300 mb-1.5">
-            VAT ID <span className="text-neutral-500">(optional)</span>
-          </label>
-          <input
-            type="text"
-            value={vatId}
-            onChange={(e) => setVatId(e.target.value)}
-            placeholder="e.g. BE0123456789"
-            className={inputClass}
-          />
-        </div>
-
         {/* Form / API errors */}
         {formError && (
           <div className="mb-4 rounded-lg bg-red-500/10 border border-red-500/20 px-4 py-3 text-sm text-red-400">
@@ -246,7 +215,7 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
           <div className="mb-4 rounded-lg bg-yellow-500/10 border border-yellow-500/20 px-4 py-3 text-sm text-yellow-400">
             Card fields could not load.{' '}
             <a
-              href={`/checkout?plan=${plan}&interval=${currentInterval}&limit=${limit}&fallback=1`}
+              href={`/checkout?plan=${plan}&interval=${interval}&limit=${limit}&fallback=1`}
               className="underline hover:text-yellow-300"
             >
               Use the hosted checkout instead
-- 
2.49.1


From fc5372ff26ac7d9168abd46c276aa2e752073e1c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 11:44:38 +0100
Subject: [PATCH 373/428] feat: add excl. VAT label to pricing page

---
 components/PricingSection.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/PricingSection.tsx b/components/PricingSection.tsx
index e6a9566..e8678c9 100644
--- a/components/PricingSection.tsx
+++ b/components/PricingSection.tsx
@@ -331,6 +331,7 @@ export default function PricingSection() {
                             €{priceDetails.yearlyTotal}
                           </span>
                           <span className="text-neutral-400 font-medium">/year</span>
+                          <span className="text-xs text-neutral-500 ml-1">excl. VAT</span>
                         </div>
                         <div className="flex items-center gap-2 mt-2 text-sm font-medium">
                           <span className="text-neutral-400 line-through decoration-neutral-400">
@@ -347,6 +348,7 @@ export default function PricingSection() {
                           €{priceDetails.baseMonthly}
                         </span>
                         <span className="text-neutral-400 font-medium">/mo</span>
+                        <span className="text-xs text-neutral-500 ml-1">excl. VAT</span>
                       </div>
                     )
                   ) : (
-- 
2.49.1


From ad207dc23ff8d706bd645a045a6e3e6ae378ba08 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 11:48:00 +0100
Subject: [PATCH 374/428] fix: move useState before conditional returns, fix
 yearly total display

---
 app/checkout/page.tsx               | 4 ++--
 components/checkout/PlanSummary.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/checkout/page.tsx b/app/checkout/page.tsx
index 250653b..55fcb35 100644
--- a/app/checkout/page.tsx
+++ b/app/checkout/page.tsx
@@ -123,6 +123,8 @@ function CheckoutContent() {
   const searchParams = useSearchParams()
   const { user, loading: authLoading } = useAuth()
   const { data: subscription } = useSubscription()
+  const [country, setCountry] = useState('')
+  const [vatId, setVatId] = useState('')
 
   const status = searchParams.get('status')
   const plan = searchParams.get('plan')
@@ -170,8 +172,6 @@ function CheckoutContent() {
   const planId = plan!
   const billingInterval = interval as 'month' | 'year'
   const pageviewLimit = Number(limit)
-  const [country, setCountry] = useState('')
-  const [vatId, setVatId] = useState('')
 
   return (
     <div className="flex h-screen overflow-hidden">
diff --git a/components/checkout/PlanSummary.tsx b/components/checkout/PlanSummary.tsx
index a28541b..59163cc 100644
--- a/components/checkout/PlanSummary.tsx
+++ b/components/checkout/PlanSummary.tsx
@@ -158,11 +158,11 @@ export default function PlanSummary({ plan, interval, limit, country, vatId, onC
               </div>
             )}
             <div className="flex justify-between font-semibold text-white pt-1 border-t border-neutral-800">
-              <span>Total /mo</span>
+              <span>Total {isYearly ? '/year' : '/mo'}</span>
               <span>&euro;{vatResult.total_amount}</span>
             </div>
             {isYearly && (
-              <p className="text-xs text-neutral-500">Billed as &euro;{(parseFloat(vatResult.total_amount) * 12).toFixed(2)}/year</p>
+              <p className="text-xs text-neutral-500">&euro;{(parseFloat(vatResult.total_amount) / 12).toFixed(2)}/mo</p>
             )}
           </div>
         ) : null}
-- 
2.49.1


From 0ca65a50fbf1590c697437afdd662383ab806a58 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 11:55:34 +0100
Subject: [PATCH 375/428] fix: org switcher in sidebar uses SPA navigation
 instead of hard reload

---
 components/dashboard/Sidebar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index f65c63c..52153e4 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -518,8 +518,8 @@ export default function Sidebar({
     try {
       const { access_token } = await switchContext(orgId)
       await setSessionAction(access_token)
-      sessionStorage.setItem('pulse_switching_org', 'true')
-      window.location.reload()
+      await auth.refresh()
+      router.push('/')
     } catch (err) {
       logger.error('Failed to switch organization', err)
     }
-- 
2.49.1


From 20628fa6ab00eaf45429b6fcbf46999ba8ed5f98 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 12:03:56 +0100
Subject: [PATCH 376/428] fix: preserve org_id in auth refresh, fix org
 switcher navigation

---
 lib/auth/context.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/lib/auth/context.tsx b/lib/auth/context.tsx
index 4ce4881..05a2e39 100644
--- a/lib/auth/context.tsx
+++ b/lib/auth/context.tsx
@@ -110,11 +110,13 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
 
   const refresh = useCallback(async () => {
     try {
+      const session = await getSessionAction()
       const userData = await apiRequest<User>('/auth/user/me')
+      const merged = { ...userData, org_id: session?.org_id ?? userData.org_id, role: session?.role ?? userData.role }
 
       setUser(() => {
-        localStorage.setItem('user', JSON.stringify(userData))
-        return userData
+        localStorage.setItem('user', JSON.stringify(merged))
+        return merged
       })
     } catch (e) {
       logger.error('Failed to refresh user data', e)
-- 
2.49.1


From 342d86c26d03d8d7276f585d72277386711f51e8 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 12:16:46 +0100
Subject: [PATCH 377/428] feat: add VAT ID verify button and company info
 display

PlanSummary now has a Verify button for VAT ID instead of
auto-verifying on input. Shows company name and address from
VIES on successful verification, with warning on invalid IDs.
---
 components/checkout/PlanSummary.tsx | 62 ++++++++++++++++++++++++-----
 lib/api/billing.ts                  |  2 +
 2 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/components/checkout/PlanSummary.tsx b/components/checkout/PlanSummary.tsx
index 59163cc..eb98cba 100644
--- a/components/checkout/PlanSummary.tsx
+++ b/components/checkout/PlanSummary.tsx
@@ -27,6 +27,7 @@ export default function PlanSummary({ plan, interval, limit, country, vatId, onC
   const [currentInterval, setCurrentInterval] = useState(interval)
   const [vatResult, setVatResult] = useState<VATResult | null>(null)
   const [vatLoading, setVatLoading] = useState(false)
+  const [verifiedVatId, setVerifiedVatId] = useState('')
 
   const monthlyCents = PLAN_PRICES[plan]?.[limit] || 0
   const isYearly = currentInterval === 'year'
@@ -56,11 +57,28 @@ export default function PlanSummary({ plan, interval, limit, country, vatId, onC
     }
   }, [plan, limit])
 
+  // Auto-fetch when country or interval changes (using the already-verified VAT ID if any)
   useEffect(() => {
     if (!country) { setVatResult(null); return }
-    const timer = setTimeout(() => fetchVAT(country, vatId, currentInterval), vatId ? 400 : 0)
-    return () => clearTimeout(timer)
-  }, [country, vatId, currentInterval, fetchVAT])
+    fetchVAT(country, verifiedVatId, currentInterval)
+  }, [country, currentInterval, fetchVAT, verifiedVatId])
+
+  // Clear verified state when VAT ID input changes
+  useEffect(() => {
+    if (vatId !== verifiedVatId) {
+      setVerifiedVatId('')
+      // Re-fetch without VAT ID to show the 21% rate
+      if (country) fetchVAT(country, '', currentInterval)
+    }
+  }, [vatId]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleVerifyVatId = () => {
+    if (!vatId || !country) return
+    setVerifiedVatId(vatId)
+    fetchVAT(country, vatId, currentInterval)
+  }
+
+  const isVatVerified = verifiedVatId !== '' && verifiedVatId === vatId
 
   return (
     <div className="rounded-2xl border border-neutral-800 bg-neutral-900/50 backdrop-blur-xl p-5 space-y-4">
@@ -111,13 +129,35 @@ export default function PlanSummary({ plan, interval, limit, country, vatId, onC
         <label className="block text-sm font-medium text-neutral-300 mb-1.5">
           VAT ID <span className="text-neutral-500">(optional)</span>
         </label>
-        <input
-          type="text"
-          value={vatId}
-          onChange={(e) => onVatIdChange(e.target.value)}
-          placeholder="e.g. BE0123456789"
-          className={inputClass}
-        />
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={vatId}
+            onChange={(e) => onVatIdChange(e.target.value)}
+            placeholder="e.g. DE123456789"
+            className={inputClass}
+          />
+          <button
+            type="button"
+            onClick={handleVerifyVatId}
+            disabled={!vatId || !country || vatLoading || isVatVerified}
+            className="shrink-0 rounded-lg bg-neutral-700 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-neutral-600 disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            {vatLoading && vatId ? 'Verifying...' : isVatVerified ? 'Verified' : 'Verify'}
+          </button>
+        </div>
+        {/* Verified company info */}
+        {isVatVerified && vatResult?.company_name && (
+          <div className="mt-2 rounded-lg bg-green-500/5 border border-green-500/20 px-3 py-2 text-xs text-neutral-400">
+            <p className="font-medium text-green-400">{vatResult.company_name}</p>
+            {vatResult.company_address && (
+              <p className="mt-0.5 whitespace-pre-line">{vatResult.company_address}</p>
+            )}
+          </div>
+        )}
+        {isVatVerified && vatResult && !vatResult.vat_exempt && (
+          <p className="mt-1.5 text-xs text-yellow-400">VAT ID could not be verified. 21% VAT will apply.</p>
+        )}
       </div>
 
       {/* Price breakdown */}
@@ -138,7 +178,7 @@ export default function PlanSummary({ plan, interval, limit, country, vatId, onC
         ) : vatLoading ? (
           <div className="flex items-center gap-2 text-sm text-neutral-400">
             <div className="h-4 w-4 animate-spin rounded-full border-2 border-neutral-600 border-t-white" />
-            Calculating VAT...
+            {vatId ? 'Verifying VAT ID...' : 'Calculating VAT...'}
           </div>
         ) : vatResult ? (
           <div className="space-y-1.5 text-sm">
diff --git a/lib/api/billing.ts b/lib/api/billing.ts
index 01f25b5..31fae61 100644
--- a/lib/api/billing.ts
+++ b/lib/api/billing.ts
@@ -109,6 +109,8 @@ export interface VATResult {
   total_amount: string
   vat_exempt: boolean
   vat_reason: string
+  company_name?: string
+  company_address?: string
 }
 
 export interface CalculateVATParams {
-- 
2.49.1


From c7cf50ef1d1922722254d9daf5a0866a2af7f134 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 12:22:33 +0100
Subject: [PATCH 378/428] fix: prevent price flash on VAT ID keystroke

Only re-fetch VAT when clearing a previously verified VAT ID,
not on every keystroke when nothing was verified yet.
---
 components/checkout/PlanSummary.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/checkout/PlanSummary.tsx b/components/checkout/PlanSummary.tsx
index eb98cba..915e73e 100644
--- a/components/checkout/PlanSummary.tsx
+++ b/components/checkout/PlanSummary.tsx
@@ -63,9 +63,9 @@ export default function PlanSummary({ plan, interval, limit, country, vatId, onC
     fetchVAT(country, verifiedVatId, currentInterval)
   }, [country, currentInterval, fetchVAT, verifiedVatId])
 
-  // Clear verified state when VAT ID input changes
+  // Clear verified state when VAT ID input changes after a successful verification
   useEffect(() => {
-    if (vatId !== verifiedVatId) {
+    if (verifiedVatId !== '' && vatId !== verifiedVatId) {
       setVerifiedVatId('')
       // Re-fetch without VAT ID to show the 21% rate
       if (country) fetchVAT(country, '', currentInterval)
-- 
2.49.1


From a495ef83894c4c7eae98ae122f121ec1a4837e6a Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 12:26:54 +0100
Subject: [PATCH 379/428] fix: only show slider focus ring on keyboard
 navigation

Replace focus: with focus-visible: on range input so the
orange ring only appears during keyboard nav, not on click.
---
 components/PricingSection.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/PricingSection.tsx b/components/PricingSection.tsx
index e8678c9..053f94b 100644
--- a/components/PricingSection.tsx
+++ b/components/PricingSection.tsx
@@ -230,7 +230,7 @@ export default function PricingSection() {
               onChange={(e) => setSliderIndex(parseInt(e.target.value))}
               aria-label="Monthly pageview limit"
               aria-valuetext={`${currentTraffic.label} pageviews per month`}
-              className="w-full h-2 bg-neutral-700 rounded-lg appearance-none cursor-pointer accent-brand-orange focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
+              className="w-full h-2 bg-neutral-700 rounded-lg appearance-none cursor-pointer accent-brand-orange focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
             />
           </div>
 
-- 
2.49.1


From 8db8f65fca79895219984288680b755c86be473f Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 12:28:10 +0100
Subject: [PATCH 380/428] fix: show Verified only when VIES confirms valid VAT
 ID

Split isVatVerified into isVatChecked (user clicked Verify) and
isVatValid (VIES confirmed exempt). Button now shows Verify and
stays enabled after a failed check so the user can retry.
---
 components/checkout/PlanSummary.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/components/checkout/PlanSummary.tsx b/components/checkout/PlanSummary.tsx
index 915e73e..ec77686 100644
--- a/components/checkout/PlanSummary.tsx
+++ b/components/checkout/PlanSummary.tsx
@@ -78,7 +78,8 @@ export default function PlanSummary({ plan, interval, limit, country, vatId, onC
     fetchVAT(country, vatId, currentInterval)
   }
 
-  const isVatVerified = verifiedVatId !== '' && verifiedVatId === vatId
+  const isVatChecked = verifiedVatId !== '' && verifiedVatId === vatId
+  const isVatValid = isVatChecked && vatResult?.vat_exempt === true
 
   return (
     <div className="rounded-2xl border border-neutral-800 bg-neutral-900/50 backdrop-blur-xl p-5 space-y-4">
@@ -140,14 +141,14 @@ export default function PlanSummary({ plan, interval, limit, country, vatId, onC
           <button
             type="button"
             onClick={handleVerifyVatId}
-            disabled={!vatId || !country || vatLoading || isVatVerified}
+            disabled={!vatId || !country || vatLoading || isVatValid}
             className="shrink-0 rounded-lg bg-neutral-700 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-neutral-600 disabled:opacity-40 disabled:cursor-not-allowed"
           >
-            {vatLoading && vatId ? 'Verifying...' : isVatVerified ? 'Verified' : 'Verify'}
+            {vatLoading && vatId ? 'Verifying...' : isVatValid ? 'Verified' : 'Verify'}
           </button>
         </div>
         {/* Verified company info */}
-        {isVatVerified && vatResult?.company_name && (
+        {isVatValid && vatResult?.company_name && (
           <div className="mt-2 rounded-lg bg-green-500/5 border border-green-500/20 px-3 py-2 text-xs text-neutral-400">
             <p className="font-medium text-green-400">{vatResult.company_name}</p>
             {vatResult.company_address && (
@@ -155,7 +156,7 @@ export default function PlanSummary({ plan, interval, limit, country, vatId, onC
             )}
           </div>
         )}
-        {isVatVerified && vatResult && !vatResult.vat_exempt && (
+        {isVatChecked && vatResult && !vatResult.vat_exempt && (
           <p className="mt-1.5 text-xs text-yellow-400">VAT ID could not be verified. 21% VAT will apply.</p>
         )}
       </div>
-- 
2.49.1


From 9656225b60739631528da83f93fc4e29a3b6d45a Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 12:37:08 +0100
Subject: [PATCH 381/428] fix: eliminate double VIES call on Verify click

Let the verifiedVatId useEffect handle the fetch instead of
calling fetchVAT directly in handleVerifyVatId. Prevents
VIES MS_MAX_CONCURRENT_REQ rate limiting.
---
 components/checkout/PlanSummary.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/checkout/PlanSummary.tsx b/components/checkout/PlanSummary.tsx
index ec77686..ee26698 100644
--- a/components/checkout/PlanSummary.tsx
+++ b/components/checkout/PlanSummary.tsx
@@ -75,7 +75,7 @@ export default function PlanSummary({ plan, interval, limit, country, vatId, onC
   const handleVerifyVatId = () => {
     if (!vatId || !country) return
     setVerifiedVatId(vatId)
-    fetchVAT(country, vatId, currentInterval)
+    // useEffect on verifiedVatId will trigger the fetch
   }
 
   const isVatChecked = verifiedVatId !== '' && verifiedVatId === vatId
-- 
2.49.1


From cb7e4c7c9864f7835b569873475dc36421192d78 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 12:42:07 +0100
Subject: [PATCH 382/428] fix: title-case VIES data, animate company info, no
 price flash
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

VIES returns ALL CAPS — now title-cased for display. Company info
slides in with framer-motion. Price breakdown stays visible during
VAT verification instead of flashing to a loading spinner.
---
 components/checkout/PlanSummary.tsx | 51 +++++++++++++++++++++--------
 1 file changed, 37 insertions(+), 14 deletions(-)

diff --git a/components/checkout/PlanSummary.tsx b/components/checkout/PlanSummary.tsx
index ee26698..c2f4567 100644
--- a/components/checkout/PlanSummary.tsx
+++ b/components/checkout/PlanSummary.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useCallback } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
-import { motion } from 'framer-motion'
+import { motion, AnimatePresence } from 'framer-motion'
 import { Select } from '@ciphera-net/ui'
 import { TRAFFIC_TIERS, PLAN_PRICES } from '@/lib/plans'
 import { COUNTRY_OPTIONS } from '@/lib/countries'
@@ -21,6 +21,11 @@ interface PlanSummaryProps {
 const inputClass =
   'w-full rounded-lg border border-neutral-700 bg-neutral-800/50 px-3 py-2.5 text-sm text-white placeholder:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-brand-orange focus:border-brand-orange transition-colors'
 
+/** Convert VIES ALL-CAPS text to title case (e.g. "SA SODIMAS" → "Sa Sodimas") */
+function toTitleCase(s: string) {
+  return s.replace(/\S+/g, (w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
+}
+
 export default function PlanSummary({ plan, interval, limit, country, vatId, onCountryChange, onVatIdChange }: PlanSummaryProps) {
   const router = useRouter()
   const searchParams = useSearchParams()
@@ -148,17 +153,35 @@ export default function PlanSummary({ plan, interval, limit, country, vatId, onC
           </button>
         </div>
         {/* Verified company info */}
-        {isVatValid && vatResult?.company_name && (
-          <div className="mt-2 rounded-lg bg-green-500/5 border border-green-500/20 px-3 py-2 text-xs text-neutral-400">
-            <p className="font-medium text-green-400">{vatResult.company_name}</p>
-            {vatResult.company_address && (
-              <p className="mt-0.5 whitespace-pre-line">{vatResult.company_address}</p>
-            )}
-          </div>
-        )}
-        {isVatChecked && vatResult && !vatResult.vat_exempt && (
-          <p className="mt-1.5 text-xs text-yellow-400">VAT ID could not be verified. 21% VAT will apply.</p>
-        )}
+        <AnimatePresence>
+          {isVatValid && vatResult?.company_name && (
+            <motion.div
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: 'auto' }}
+              exit={{ opacity: 0, height: 0 }}
+              transition={{ duration: 0.25, ease: 'easeOut' }}
+              className="overflow-hidden"
+            >
+              <div className="mt-2 rounded-lg bg-green-500/5 border border-green-500/20 px-3 py-2 text-xs text-neutral-400">
+                <p className="font-medium text-green-400">{toTitleCase(vatResult.company_name)}</p>
+                {vatResult.company_address && (
+                  <p className="mt-0.5 whitespace-pre-line">{toTitleCase(vatResult.company_address)}</p>
+                )}
+              </div>
+            </motion.div>
+          )}
+          {isVatChecked && vatResult && !vatResult.vat_exempt && (
+            <motion.p
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.2 }}
+              className="mt-1.5 text-xs text-yellow-400"
+            >
+              VAT ID could not be verified. 21% VAT will apply.
+            </motion.p>
+          )}
+        </AnimatePresence>
       </div>
 
       {/* Price breakdown */}
@@ -176,10 +199,10 @@ export default function PlanSummary({ plan, interval, limit, country, vatId, onC
               </span>
             )}
           </div>
-        ) : vatLoading ? (
+        ) : vatLoading && !vatResult ? (
           <div className="flex items-center gap-2 text-sm text-neutral-400">
             <div className="h-4 w-4 animate-spin rounded-full border-2 border-neutral-600 border-t-white" />
-            {vatId ? 'Verifying VAT ID...' : 'Calculating VAT...'}
+            Calculating VAT...
           </div>
         ) : vatResult ? (
           <div className="space-y-1.5 text-sm">
-- 
2.49.1


From 3306508bf03a67a7985d6d9de08195d01bbe98f8 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 12:43:59 +0100
Subject: [PATCH 383/428] fix: show Verified for valid VAT IDs regardless of
 exemption

Use company_name presence to determine validity instead of
vat_exempt, so Belgian B2B shows Verified + company info
even though 21% VAT still applies.
---
 components/checkout/PlanSummary.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/checkout/PlanSummary.tsx b/components/checkout/PlanSummary.tsx
index c2f4567..f75193e 100644
--- a/components/checkout/PlanSummary.tsx
+++ b/components/checkout/PlanSummary.tsx
@@ -84,7 +84,7 @@ export default function PlanSummary({ plan, interval, limit, country, vatId, onC
   }
 
   const isVatChecked = verifiedVatId !== '' && verifiedVatId === vatId
-  const isVatValid = isVatChecked && vatResult?.vat_exempt === true
+  const isVatValid = isVatChecked && !!vatResult?.company_name
 
   return (
     <div className="rounded-2xl border border-neutral-800 bg-neutral-900/50 backdrop-blur-xl p-5 space-y-4">
-- 
2.49.1


From a55f9a91bd786ca21d1e0b85057f051563165ce8 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 12:48:51 +0100
Subject: [PATCH 384/428] fix: hide VAT warning during loading and when VAT is
 valid

Warning no longer flashes during VIES lookup or shows alongside
company info for Belgian B2B (valid VAT but not exempt).
---
 components/checkout/PlanSummary.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/checkout/PlanSummary.tsx b/components/checkout/PlanSummary.tsx
index f75193e..aa11707 100644
--- a/components/checkout/PlanSummary.tsx
+++ b/components/checkout/PlanSummary.tsx
@@ -170,7 +170,7 @@ export default function PlanSummary({ plan, interval, limit, country, vatId, onC
               </div>
             </motion.div>
           )}
-          {isVatChecked && vatResult && !vatResult.vat_exempt && (
+          {isVatChecked && !vatLoading && !isVatValid && vatResult && !vatResult.vat_exempt && (
             <motion.p
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
-- 
2.49.1


From 9c7afda80dcdbac5d53927b0ca9cae5256daed79 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 15:12:27 +0100
Subject: [PATCH 385/428] feat: payment method selector with foldable card form

Checkout shows payment method tiles (Card, Bancontact, iDEAL,
Apple Pay, SEPA DD, Bank Transfer). Card selection expands the
embedded form; other methods redirect to Mollie hosted checkout
with the method pre-selected.
---
 components/checkout/PaymentForm.tsx | 268 +++++++++++++++++++---------
 lib/api/billing.ts                  |   1 +
 2 files changed, 187 insertions(+), 82 deletions(-)

diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx
index fdd0a92..83f3c07 100644
--- a/components/checkout/PaymentForm.tsx
+++ b/components/checkout/PaymentForm.tsx
@@ -3,9 +3,10 @@
 import { useEffect, useRef, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import Script from 'next/script'
-import { Lock, ShieldCheck } from '@phosphor-icons/react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { CreditCard, Lock, ShieldCheck, Bank } from '@phosphor-icons/react'
 import { initMollie, getMollie, MOLLIE_FIELD_STYLES, type MollieComponent } from '@/lib/mollie'
-import { createEmbeddedCheckout } from '@/lib/api/billing'
+import { createEmbeddedCheckout, createCheckoutSession } from '@/lib/api/billing'
 
 interface PaymentFormProps {
   plan: string
@@ -15,12 +16,56 @@ interface PaymentFormProps {
   vatId: string
 }
 
+const PAYMENT_METHODS: Array<{ id: string; label: string; description?: string; icon: string }> = [
+  { id: 'card', label: 'Card', description: 'Visa, Mastercard, Amex', icon: 'card' },
+  { id: 'bancontact', label: 'Bancontact', icon: 'bancontact' },
+  { id: 'ideal', label: 'iDEAL', icon: 'ideal' },
+  { id: 'applepay', label: 'Apple Pay', icon: 'applepay' },
+  { id: 'directdebit', label: 'SEPA Direct Debit', icon: 'sepa' },
+  { id: 'banktransfer', label: 'Bank Transfer', icon: 'banktransfer' },
+]
+
+function MethodIcon({ type, className }: { type: string; className?: string }) {
+  const cn = className || 'h-6 w-6'
+  switch (type) {
+    case 'card':
+      return <CreditCard weight="duotone" className={cn} />
+    case 'bancontact':
+      return (
+        <svg viewBox="0 0 24 24" fill="none" className={cn}>
+          <rect x="2" y="4" width="20" height="16" rx="3" stroke="currentColor" strokeWidth="1.5" />
+          <path d="M7 12h4m2 0h4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+          <circle cx="12" cy="12" r="2" fill="currentColor" opacity="0.5" />
+        </svg>
+      )
+    case 'ideal':
+      return (
+        <svg viewBox="0 0 24 24" fill="none" className={cn}>
+          <rect x="3" y="3" width="18" height="18" rx="4" stroke="currentColor" strokeWidth="1.5" />
+          <path d="M9 8v8m3-8v8m3-8v8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+        </svg>
+      )
+    case 'applepay':
+      return (
+        <svg viewBox="0 0 24 24" fill="currentColor" className={cn}>
+          <path d="M17.05 12.54c-.02-2.1 1.73-3.12 1.81-3.17-1-1.44-2.54-1.64-3.08-1.66-1.3-.14-2.57.78-3.23.78-.68 0-1.7-.76-2.8-.74-1.43.02-2.77.85-3.5 2.14-1.52 2.6-.39 6.43 1.07 8.54.73 1.03 1.58 2.19 2.7 2.15 1.1-.04 1.5-.7 2.82-.7 1.3 0 1.67.7 2.8.67 1.17-.02 1.9-1.04 2.6-2.08.84-1.2 1.18-2.37 1.19-2.43-.03-.01-2.27-.86-2.29-3.43l-.09-.07zM14.95 5.89c.58-.73.98-1.72.87-2.73-.84.04-1.9.58-2.5 1.28-.54.63-1.02 1.66-.9 2.63.95.07 1.93-.48 2.53-1.18z" />
+        </svg>
+      )
+    case 'sepa':
+    case 'banktransfer':
+      return <Bank weight="duotone" className={cn} />
+    default:
+      return <CreditCard weight="duotone" className={cn} />
+  }
+}
+
 const mollieFieldBase =
   'w-full rounded-lg border border-neutral-700 bg-neutral-800/50 px-3 py-3 h-[48px] transition-all focus-within:ring-1 focus-within:ring-brand-orange focus-within:border-brand-orange'
 
 export default function PaymentForm({ plan, interval, limit, country, vatId }: PaymentFormProps) {
   const router = useRouter()
 
+  const [selectedMethod, setSelectedMethod] = useState('card')
   const [mollieReady, setMollieReady] = useState(false)
   const [mollieError, setMollieError] = useState(false)
   const [formError, setFormError] = useState<string | null>(null)
@@ -34,14 +79,14 @@ export default function PaymentForm({ plan, interval, limit, country, vatId }: P
     expiryDate: null,
     verificationCode: null,
   })
+  const mollieInitialized = useRef(false)
 
   const [scriptLoaded, setScriptLoaded] = useState(false)
 
-  // Mount Mollie components AFTER both script loaded AND DOM elements exist
+  // Mount Mollie components AFTER script loaded
   useEffect(() => {
-    if (!scriptLoaded) return
+    if (!scriptLoaded || mollieInitialized.current) return
 
-    // Small delay to ensure DOM elements are painted
     const timer = setTimeout(() => {
       const mollie = initMollie()
       if (!mollie) {
@@ -79,6 +124,7 @@ export default function PaymentForm({ plan, interval, limit, country, vatId }: P
           componentsRef.current[type] = component
         }
 
+        mollieInitialized.current = true
         setMollieReady(true)
       } catch (err) {
         console.error('Mollie mount error:', err)
@@ -99,41 +145,56 @@ export default function PaymentForm({ plan, interval, limit, country, vatId }: P
   }, [])
 
   const handleSubmit = async (e: React.FormEvent) => {
-    setSubmitted(true)
     e.preventDefault()
+    setSubmitted(true)
     setFormError(null)
+
     if (!country) {
       setFormError('Please select your country')
       return
     }
 
-    const mollie = getMollie()
-    if (!mollie) {
-      setFormError('Payment system not loaded. Please refresh.')
-      return
-    }
-
     setSubmitting(true)
+
     try {
-      const { token, error } = await mollie.createToken()
-      if (error || !token) {
-        setFormError(error?.message || 'Invalid card details.')
-        setSubmitting(false)
-        return
+      if (selectedMethod === 'card') {
+        const mollie = getMollie()
+        if (!mollie) {
+          setFormError('Payment system not loaded. Please refresh.')
+          setSubmitting(false)
+          return
+        }
+
+        const { token, error } = await mollie.createToken()
+        if (error || !token) {
+          setFormError(error?.message || 'Invalid card details.')
+          setSubmitting(false)
+          return
+        }
+
+        const result = await createEmbeddedCheckout({
+          plan_id: plan,
+          interval,
+          limit,
+          country,
+          vat_id: vatId || undefined,
+          card_token: token,
+        })
+
+        if (result.status === 'success') router.push('/checkout?status=success')
+        else if (result.status === 'pending' && result.redirect_url)
+          window.location.href = result.redirect_url
+      } else {
+        const result = await createCheckoutSession({
+          plan_id: plan,
+          interval,
+          limit,
+          country,
+          vat_id: vatId || undefined,
+          method: selectedMethod,
+        })
+        window.location.href = result.url
       }
-
-      const result = await createEmbeddedCheckout({
-        plan_id: plan,
-        interval: interval,
-        limit,
-        country,
-        vat_id: vatId || undefined,
-        card_token: token,
-      })
-
-      if (result.status === 'success') router.push('/checkout?status=success')
-      else if (result.status === 'pending' && result.redirect_url)
-        window.location.href = result.redirect_url
     } catch (err) {
       setFormError((err as Error)?.message || 'Payment failed. Please try again.')
     } finally {
@@ -141,6 +202,8 @@ export default function PaymentForm({ plan, interval, limit, country, vatId }: P
     }
   }
 
+  const isCard = selectedMethod === 'card'
+
   return (
     <>
       <Script
@@ -153,56 +216,104 @@ export default function PaymentForm({ plan, interval, limit, country, vatId }: P
         onSubmit={handleSubmit}
         className="rounded-2xl border border-neutral-800 bg-neutral-900/50 backdrop-blur-xl p-6"
       >
-        <h2 className="text-lg font-semibold text-white mb-6">Payment details</h2>
+        <h2 className="text-lg font-semibold text-white mb-4">Payment method</h2>
 
-        {/* Cardholder name */}
-        <div className="mb-4">
-          <label className="block text-sm font-medium text-neutral-300 mb-1.5">Cardholder name</label>
-          <div className="overflow-hidden transition-all duration-300" style={{ height: mollieReady ? '48px' : '0px' }}>
-            <div id="mollie-card-holder" className={mollieFieldBase} />
-          </div>
-          {!mollieReady && <div className={`${mollieFieldBase} bg-neutral-800/30`} />}
-          {submitted && cardErrors.cardHolder && (
-            <p className="mt-1 text-xs text-red-400">{cardErrors.cardHolder}</p>
-          )}
+        {/* Payment method grid */}
+        <div className="grid grid-cols-3 gap-2 mb-5">
+          {PAYMENT_METHODS.map((method) => {
+            const isSelected = selectedMethod === method.id
+            return (
+              <button
+                key={method.id}
+                type="button"
+                onClick={() => { setSelectedMethod(method.id); setFormError(null) }}
+                className={`relative flex flex-col items-center gap-1.5 rounded-xl border px-3 py-3.5 text-xs font-medium transition-all duration-200 ${
+                  isSelected
+                    ? 'border-brand-orange bg-brand-orange/5 text-white'
+                    : 'border-neutral-700/50 bg-neutral-800/30 text-neutral-400 hover:border-neutral-600 hover:text-neutral-300'
+                }`}
+              >
+                <MethodIcon type={method.icon} className="h-5 w-5" />
+                <span>{method.label}</span>
+                {method.description && (
+                  <span className="text-[10px] text-neutral-500 font-normal">{method.description}</span>
+                )}
+              </button>
+            )
+          })}
         </div>
 
-        {/* Card number */}
-        <div className="mb-4">
-          <label className="block text-sm font-medium text-neutral-300 mb-1.5">Card number</label>
-          <div className="overflow-hidden transition-all duration-300" style={{ height: mollieReady ? '48px' : '0px' }}>
-            <div id="mollie-card-number" className={mollieFieldBase} />
-          </div>
-          {!mollieReady && <div className={`${mollieFieldBase} bg-neutral-800/30`} />}
-          {submitted && cardErrors.cardNumber && (
-            <p className="mt-1 text-xs text-red-400">{cardErrors.cardNumber}</p>
-          )}
-        </div>
-
-        {/* Expiry & CVC */}
-        <div className="mb-4 grid grid-cols-2 gap-4">
-          <div>
-            <label className="block text-sm font-medium text-neutral-300 mb-1.5">Expiry date</label>
-            <div className="overflow-hidden transition-all duration-300" style={{ height: mollieReady ? '48px' : '0px' }}>
-              <div id="mollie-card-expiry" className={mollieFieldBase} />
+        {/* Card form — always rendered for Mollie mount, animated visibility */}
+        <div
+          className="overflow-hidden transition-all duration-300 ease-out"
+          style={{ maxHeight: isCard ? '400px' : '0px', opacity: isCard ? 1 : 0 }}
+        >
+          <div className="space-y-4 pb-1">
+            {/* Cardholder name */}
+            <div>
+              <label className="block text-sm font-medium text-neutral-300 mb-1.5">Cardholder name</label>
+              <div className="overflow-hidden transition-all duration-300" style={{ height: mollieReady ? '48px' : '0px' }}>
+                <div id="mollie-card-holder" className={mollieFieldBase} />
+              </div>
+              {!mollieReady && isCard && <div className={`${mollieFieldBase} bg-neutral-800/30 animate-pulse`} />}
+              {submitted && cardErrors.cardHolder && (
+                <p className="mt-1 text-xs text-red-400">{cardErrors.cardHolder}</p>
+              )}
             </div>
-            {!mollieReady && <div className={`${mollieFieldBase} bg-neutral-800/30`} />}
-            {submitted && cardErrors.expiryDate && (
-              <p className="mt-1 text-xs text-red-400">{cardErrors.expiryDate}</p>
-            )}
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-neutral-300 mb-1.5">CVC</label>
-            <div className="overflow-hidden transition-all duration-300" style={{ height: mollieReady ? '48px' : '0px' }}>
-              <div id="mollie-card-cvc" className={mollieFieldBase} />
+
+            {/* Card number */}
+            <div>
+              <label className="block text-sm font-medium text-neutral-300 mb-1.5">Card number</label>
+              <div className="overflow-hidden transition-all duration-300" style={{ height: mollieReady ? '48px' : '0px' }}>
+                <div id="mollie-card-number" className={mollieFieldBase} />
+              </div>
+              {!mollieReady && isCard && <div className={`${mollieFieldBase} bg-neutral-800/30 animate-pulse`} />}
+              {submitted && cardErrors.cardNumber && (
+                <p className="mt-1 text-xs text-red-400">{cardErrors.cardNumber}</p>
+              )}
+            </div>
+
+            {/* Expiry & CVC */}
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-neutral-300 mb-1.5">Expiry date</label>
+                <div className="overflow-hidden transition-all duration-300" style={{ height: mollieReady ? '48px' : '0px' }}>
+                  <div id="mollie-card-expiry" className={mollieFieldBase} />
+                </div>
+                {!mollieReady && isCard && <div className={`${mollieFieldBase} bg-neutral-800/30 animate-pulse`} />}
+                {submitted && cardErrors.expiryDate && (
+                  <p className="mt-1 text-xs text-red-400">{cardErrors.expiryDate}</p>
+                )}
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-neutral-300 mb-1.5">CVC</label>
+                <div className="overflow-hidden transition-all duration-300" style={{ height: mollieReady ? '48px' : '0px' }}>
+                  <div id="mollie-card-cvc" className={mollieFieldBase} />
+                </div>
+                {!mollieReady && isCard && <div className={`${mollieFieldBase} bg-neutral-800/30 animate-pulse`} />}
+                {submitted && cardErrors.verificationCode && (
+                  <p className="mt-1 text-xs text-red-400">{cardErrors.verificationCode}</p>
+                )}
+              </div>
             </div>
-            {!mollieReady && <div className={`${mollieFieldBase} bg-neutral-800/30`} />}
-            {submitted && cardErrors.verificationCode && (
-              <p className="mt-1 text-xs text-red-400">{cardErrors.verificationCode}</p>
-            )}
           </div>
         </div>
 
+        {/* Non-card info */}
+        <AnimatePresence>
+          {!isCard && (
+            <motion.p
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: 'auto' }}
+              exit={{ opacity: 0, height: 0 }}
+              transition={{ duration: 0.2 }}
+              className="text-sm text-neutral-400 mb-4 overflow-hidden"
+            >
+              You&apos;ll be redirected to complete payment securely via {PAYMENT_METHODS.find((m) => m.id === selectedMethod)?.label}.
+            </motion.p>
+          )}
+        </AnimatePresence>
+
         {/* Form / API errors */}
         {formError && (
           <div className="mb-4 rounded-lg bg-red-500/10 border border-red-500/20 px-4 py-3 text-sm text-red-400">
@@ -211,23 +322,16 @@ export default function PaymentForm({ plan, interval, limit, country, vatId }: P
         )}
 
         {/* Mollie fallback */}
-        {mollieError && (
+        {mollieError && isCard && (
           <div className="mb-4 rounded-lg bg-yellow-500/10 border border-yellow-500/20 px-4 py-3 text-sm text-yellow-400">
-            Card fields could not load.{' '}
-            <a
-              href={`/checkout?plan=${plan}&interval=${interval}&limit=${limit}&fallback=1`}
-              className="underline hover:text-yellow-300"
-            >
-              Use the hosted checkout instead
-            </a>
-            .
+            Card fields could not load. Please select another payment method.
           </div>
         )}
 
         {/* Submit */}
         <button
           type="submit"
-          disabled={submitting || !mollieReady}
+          disabled={submitting || (isCard && !mollieReady && !mollieError)}
           className="w-full rounded-lg bg-brand-orange px-4 py-3 text-sm font-semibold text-white transition-colors hover:bg-brand-orange/90 disabled:opacity-50 disabled:cursor-not-allowed"
         >
           {submitting ? 'Processing...' : 'Start free trial'}
diff --git a/lib/api/billing.ts b/lib/api/billing.ts
index 31fae61..48f3ed7 100644
--- a/lib/api/billing.ts
+++ b/lib/api/billing.ts
@@ -74,6 +74,7 @@ export interface CreateCheckoutParams {
   limit: number
   country: string
   vat_id?: string
+  method?: string
 }
 
 export async function createCheckoutSession(params: CreateCheckoutParams): Promise<{ url: string }> {
-- 
2.49.1


From 5c90b15b2ed268630fbedcf6abf89533b009db57 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 15:30:52 +0100
Subject: [PATCH 386/428] feat: branded payment tiles, add Google Pay, remove
 Bank Transfer

Replace generic icons with colored brand SVGs (Mastercard, Bancontact,
iDEAL, Apple Pay, Google Pay, SEPA). Compact equal-height tiles.
---
 components/checkout/PaymentForm.tsx | 77 ++++++++++++++++++-----------
 1 file changed, 48 insertions(+), 29 deletions(-)

diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx
index 83f3c07..1ae156a 100644
--- a/components/checkout/PaymentForm.tsx
+++ b/components/checkout/PaymentForm.tsx
@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import Script from 'next/script'
 import { motion, AnimatePresence } from 'framer-motion'
-import { CreditCard, Lock, ShieldCheck, Bank } from '@phosphor-icons/react'
+import { Lock, ShieldCheck } from '@phosphor-icons/react'
 import { initMollie, getMollie, MOLLIE_FIELD_STYLES, type MollieComponent } from '@/lib/mollie'
 import { createEmbeddedCheckout, createCheckoutSession } from '@/lib/api/billing'
 
@@ -16,46 +16,68 @@ interface PaymentFormProps {
   vatId: string
 }
 
-const PAYMENT_METHODS: Array<{ id: string; label: string; description?: string; icon: string }> = [
-  { id: 'card', label: 'Card', description: 'Visa, Mastercard, Amex', icon: 'card' },
-  { id: 'bancontact', label: 'Bancontact', icon: 'bancontact' },
-  { id: 'ideal', label: 'iDEAL', icon: 'ideal' },
-  { id: 'applepay', label: 'Apple Pay', icon: 'applepay' },
-  { id: 'directdebit', label: 'SEPA Direct Debit', icon: 'sepa' },
-  { id: 'banktransfer', label: 'Bank Transfer', icon: 'banktransfer' },
+const PAYMENT_METHODS = [
+  { id: 'card', label: 'Card' },
+  { id: 'bancontact', label: 'Bancontact' },
+  { id: 'ideal', label: 'iDEAL' },
+  { id: 'applepay', label: 'Apple Pay' },
+  { id: 'googlepay', label: 'Google Pay' },
+  { id: 'directdebit', label: 'SEPA' },
 ]
 
-function MethodIcon({ type, className }: { type: string; className?: string }) {
-  const cn = className || 'h-6 w-6'
+function MethodLogo({ type }: { type: string }) {
   switch (type) {
     case 'card':
-      return <CreditCard weight="duotone" className={cn} />
+      return (
+        <div className="flex items-center gap-1.5">
+          <svg viewBox="0 0 38 24" className="h-5 w-auto">
+            <circle cx="14" cy="12" r="7" fill="#EB001B" />
+            <circle cx="24" cy="12" r="7" fill="#F79E1B" />
+            <path d="M19 6.26a7 7 0 0 1 0 11.48 7 7 0 0 1 0-11.48z" fill="#FF5F00" />
+          </svg>
+        </div>
+      )
     case 'bancontact':
       return (
-        <svg viewBox="0 0 24 24" fill="none" className={cn}>
-          <rect x="2" y="4" width="20" height="16" rx="3" stroke="currentColor" strokeWidth="1.5" />
-          <path d="M7 12h4m2 0h4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-          <circle cx="12" cy="12" r="2" fill="currentColor" opacity="0.5" />
+        <svg viewBox="0 0 40 24" className="h-5 w-auto">
+          <rect width="40" height="24" rx="3" fill="#005498" />
+          <ellipse cx="15" cy="12" rx="7" ry="5.5" fill="#fff" opacity="0.9" />
+          <circle cx="29" cy="12" r="5" fill="#FFD800" />
         </svg>
       )
     case 'ideal':
       return (
-        <svg viewBox="0 0 24 24" fill="none" className={cn}>
-          <rect x="3" y="3" width="18" height="18" rx="4" stroke="currentColor" strokeWidth="1.5" />
-          <path d="M9 8v8m3-8v8m3-8v8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+        <svg viewBox="0 0 40 24" className="h-5 w-auto">
+          <rect width="40" height="24" rx="3" fill="#CC0066" />
+          <rect x="8" y="5" width="24" height="14" rx="2" fill="#fff" />
+          <rect x="12" y="8" width="16" height="8" rx="1" fill="#CC0066" />
         </svg>
       )
     case 'applepay':
       return (
-        <svg viewBox="0 0 24 24" fill="currentColor" className={cn}>
-          <path d="M17.05 12.54c-.02-2.1 1.73-3.12 1.81-3.17-1-1.44-2.54-1.64-3.08-1.66-1.3-.14-2.57.78-3.23.78-.68 0-1.7-.76-2.8-.74-1.43.02-2.77.85-3.5 2.14-1.52 2.6-.39 6.43 1.07 8.54.73 1.03 1.58 2.19 2.7 2.15 1.1-.04 1.5-.7 2.82-.7 1.3 0 1.67.7 2.8.67 1.17-.02 1.9-1.04 2.6-2.08.84-1.2 1.18-2.37 1.19-2.43-.03-.01-2.27-.86-2.29-3.43l-.09-.07zM14.95 5.89c.58-.73.98-1.72.87-2.73-.84.04-1.9.58-2.5 1.28-.54.63-1.02 1.66-.9 2.63.95.07 1.93-.48 2.53-1.18z" />
+        <svg viewBox="0 0 24 24" className="h-5 w-5 text-white">
+          <path d="M17.05 12.54c-.02-2.1 1.73-3.12 1.81-3.17-1-1.44-2.54-1.64-3.08-1.66-1.3-.14-2.57.78-3.23.78-.68 0-1.7-.76-2.8-.74-1.43.02-2.77.85-3.5 2.14-1.52 2.6-.39 6.43 1.07 8.54.73 1.03 1.58 2.19 2.7 2.15 1.1-.04 1.5-.7 2.82-.7 1.3 0 1.67.7 2.8.67 1.17-.02 1.9-1.04 2.6-2.08.84-1.2 1.18-2.37 1.19-2.43-.03-.01-2.27-.86-2.29-3.43zM14.95 5.89c.58-.73.98-1.72.87-2.73-.84.04-1.9.58-2.5 1.28-.54.63-1.02 1.66-.9 2.63.95.07 1.93-.48 2.53-1.18z" fill="currentColor" />
+        </svg>
+      )
+    case 'googlepay':
+      return (
+        <svg viewBox="0 0 24 24" className="h-5 w-5">
+          <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4" />
+          <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+          <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05" />
+          <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+        </svg>
+      )
+    case 'directdebit':
+      return (
+        <svg viewBox="0 0 40 24" className="h-5 w-auto">
+          <rect width="40" height="24" rx="3" fill="#003399" />
+          <circle cx="20" cy="12" r="7.5" fill="none" stroke="#FFCC00" strokeWidth="1" />
+          <path d="M17.5 9.5h5c.5 0 1 .3 1 .8v1.2h-6v-1.2c0-.5.5-.8 1-.8zm-1 3h7v1.2c0 .5-.5.8-1 .8h-5c-.5 0-1-.3-1-.8v-1.2zm0 0h7" stroke="#FFCC00" strokeWidth="0.8" fill="none" />
         </svg>
       )
-    case 'sepa':
-    case 'banktransfer':
-      return <Bank weight="duotone" className={cn} />
     default:
-      return <CreditCard weight="duotone" className={cn} />
+      return null
   }
 }
 
@@ -227,17 +249,14 @@ export default function PaymentForm({ plan, interval, limit, country, vatId }: P
                 key={method.id}
                 type="button"
                 onClick={() => { setSelectedMethod(method.id); setFormError(null) }}
-                className={`relative flex flex-col items-center gap-1.5 rounded-xl border px-3 py-3.5 text-xs font-medium transition-all duration-200 ${
+                className={`flex flex-col items-center justify-center gap-1 rounded-xl border h-[52px] text-[10px] font-medium transition-all duration-200 ${
                   isSelected
                     ? 'border-brand-orange bg-brand-orange/5 text-white'
                     : 'border-neutral-700/50 bg-neutral-800/30 text-neutral-400 hover:border-neutral-600 hover:text-neutral-300'
                 }`}
               >
-                <MethodIcon type={method.icon} className="h-5 w-5" />
+                <MethodLogo type={method.id} />
                 <span>{method.label}</span>
-                {method.description && (
-                  <span className="text-[10px] text-neutral-500 font-normal">{method.description}</span>
-                )}
               </button>
             )
           })}
-- 
2.49.1


From eca42d56ca18d89fee355a3ae4f570da8ca4f9f0 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 15:39:30 +0100
Subject: [PATCH 387/428] fix: use real official payment method logos instead
 of hand-drawn SVGs

Add official brand SVGs (Visa, Mastercard, Bancontact, iDEAL, Apple Pay,
Google Pay, SEPA) as static assets and render via img tags.
---
 components/checkout/PaymentForm.tsx  | 74 +++++++++-------------------
 public/images/payment/applepay.svg   | 16 ++++++
 public/images/payment/bancontact.svg | 16 ++++++
 public/images/payment/googlepay.svg  |  8 +++
 public/images/payment/ideal.svg      | 11 +++++
 public/images/payment/mastercard.svg |  7 +++
 public/images/payment/sepa.svg       | 22 +++++++++
 public/images/payment/visa.svg       |  7 +++
 8 files changed, 109 insertions(+), 52 deletions(-)
 create mode 100644 public/images/payment/applepay.svg
 create mode 100644 public/images/payment/bancontact.svg
 create mode 100644 public/images/payment/googlepay.svg
 create mode 100644 public/images/payment/ideal.svg
 create mode 100644 public/images/payment/mastercard.svg
 create mode 100644 public/images/payment/sepa.svg
 create mode 100644 public/images/payment/visa.svg

diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx
index 1ae156a..4ee8f61 100644
--- a/components/checkout/PaymentForm.tsx
+++ b/components/checkout/PaymentForm.tsx
@@ -25,60 +25,30 @@ const PAYMENT_METHODS = [
   { id: 'directdebit', label: 'SEPA' },
 ]
 
+const METHOD_LOGOS: Record<string, { src: string | string[]; alt: string }> = {
+  card: { src: ['/images/payment/visa.svg', '/images/payment/mastercard.svg'], alt: 'Card' },
+  bancontact: { src: '/images/payment/bancontact.svg', alt: 'Bancontact' },
+  ideal: { src: '/images/payment/ideal.svg', alt: 'iDEAL' },
+  applepay: { src: '/images/payment/applepay.svg', alt: 'Apple Pay' },
+  googlepay: { src: '/images/payment/googlepay.svg', alt: 'Google Pay' },
+  directdebit: { src: '/images/payment/sepa.svg', alt: 'SEPA' },
+}
+
 function MethodLogo({ type }: { type: string }) {
-  switch (type) {
-    case 'card':
-      return (
-        <div className="flex items-center gap-1.5">
-          <svg viewBox="0 0 38 24" className="h-5 w-auto">
-            <circle cx="14" cy="12" r="7" fill="#EB001B" />
-            <circle cx="24" cy="12" r="7" fill="#F79E1B" />
-            <path d="M19 6.26a7 7 0 0 1 0 11.48 7 7 0 0 1 0-11.48z" fill="#FF5F00" />
-          </svg>
-        </div>
-      )
-    case 'bancontact':
-      return (
-        <svg viewBox="0 0 40 24" className="h-5 w-auto">
-          <rect width="40" height="24" rx="3" fill="#005498" />
-          <ellipse cx="15" cy="12" rx="7" ry="5.5" fill="#fff" opacity="0.9" />
-          <circle cx="29" cy="12" r="5" fill="#FFD800" />
-        </svg>
-      )
-    case 'ideal':
-      return (
-        <svg viewBox="0 0 40 24" className="h-5 w-auto">
-          <rect width="40" height="24" rx="3" fill="#CC0066" />
-          <rect x="8" y="5" width="24" height="14" rx="2" fill="#fff" />
-          <rect x="12" y="8" width="16" height="8" rx="1" fill="#CC0066" />
-        </svg>
-      )
-    case 'applepay':
-      return (
-        <svg viewBox="0 0 24 24" className="h-5 w-5 text-white">
-          <path d="M17.05 12.54c-.02-2.1 1.73-3.12 1.81-3.17-1-1.44-2.54-1.64-3.08-1.66-1.3-.14-2.57.78-3.23.78-.68 0-1.7-.76-2.8-.74-1.43.02-2.77.85-3.5 2.14-1.52 2.6-.39 6.43 1.07 8.54.73 1.03 1.58 2.19 2.7 2.15 1.1-.04 1.5-.7 2.82-.7 1.3 0 1.67.7 2.8.67 1.17-.02 1.9-1.04 2.6-2.08.84-1.2 1.18-2.37 1.19-2.43-.03-.01-2.27-.86-2.29-3.43zM14.95 5.89c.58-.73.98-1.72.87-2.73-.84.04-1.9.58-2.5 1.28-.54.63-1.02 1.66-.9 2.63.95.07 1.93-.48 2.53-1.18z" fill="currentColor" />
-        </svg>
-      )
-    case 'googlepay':
-      return (
-        <svg viewBox="0 0 24 24" className="h-5 w-5">
-          <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4" />
-          <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
-          <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05" />
-          <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
-        </svg>
-      )
-    case 'directdebit':
-      return (
-        <svg viewBox="0 0 40 24" className="h-5 w-auto">
-          <rect width="40" height="24" rx="3" fill="#003399" />
-          <circle cx="20" cy="12" r="7.5" fill="none" stroke="#FFCC00" strokeWidth="1" />
-          <path d="M17.5 9.5h5c.5 0 1 .3 1 .8v1.2h-6v-1.2c0-.5.5-.8 1-.8zm-1 3h7v1.2c0 .5-.5.8-1 .8h-5c-.5 0-1-.3-1-.8v-1.2zm0 0h7" stroke="#FFCC00" strokeWidth="0.8" fill="none" />
-        </svg>
-      )
-    default:
-      return null
+  const logo = METHOD_LOGOS[type]
+  if (!logo) return null
+
+  if (Array.isArray(logo.src)) {
+    return (
+      <div className="flex items-center gap-1">
+        {logo.src.map((s) => (
+          <img key={s} src={s} alt="" className="h-6 w-auto rounded-sm" />
+        ))}
+      </div>
+    )
   }
+
+  return <img src={logo.src} alt={logo.alt} className="h-6 w-auto rounded-sm" />
 }
 
 const mollieFieldBase =
diff --git a/public/images/payment/applepay.svg b/public/images/payment/applepay.svg
new file mode 100644
index 0000000..482c190
--- /dev/null
+++ b/public/images/payment/applepay.svg
@@ -0,0 +1,16 @@
+<svg width="120" height="80" viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_823_247)">
+<rect x="1.375" y="1.375" width="117.25" height="77.25" rx="6.625" fill="white"/>
+<path d="M55.5533 22.9046C61.103 22.9046 64.9675 26.7301 64.9675 32.2997C64.9675 37.8892 61.0235 41.7345 55.4142 41.7345H49.2696V51.5062H44.8301V22.9046L55.5533 22.9046ZM49.2695 38.0081H54.3635C58.2288 38.0081 60.4286 35.9271 60.4286 32.3196C60.4286 28.7124 58.2288 26.6509 54.3834 26.6509H49.2695V38.0081Z" fill="black"/>
+<path d="M66.1274 45.5799C66.1274 41.9326 68.9222 39.6929 73.8778 39.4154L79.5858 39.0786V37.4732C79.5858 35.1541 78.0198 33.7666 75.404 33.7666C72.9258 33.7666 71.3797 34.9556 71.0035 36.8191H66.9601C67.1979 33.0528 70.4086 30.278 75.5623 30.278C80.6165 30.278 83.8471 32.9538 83.8471 37.136V51.5062H79.7441V48.0772H79.6454C78.4365 50.3963 75.8001 51.8629 73.065 51.8629C68.9818 51.8629 66.1274 49.3258 66.1274 45.5799ZM79.5858 43.697V42.0518L74.452 42.3688C71.8951 42.5473 70.4484 43.6771 70.4484 45.461C70.4484 47.2842 71.9547 48.4736 74.254 48.4736C77.2468 48.4736 79.5858 46.4122 79.5858 43.697Z" fill="black"/>
+<path d="M87.7206 59.177V55.7082C88.0372 55.7874 88.7506 55.7874 89.1077 55.7874C91.0896 55.7874 92.1601 54.9551 92.8139 52.8145C92.8139 52.7747 93.1908 51.5459 93.1908 51.5261L85.6592 30.6546H90.2967L95.5696 47.6214H95.6484L100.921 30.6546H105.44L97.6303 52.5962C95.8472 57.6508 93.7857 59.276 89.4648 59.276C89.1077 59.276 88.0372 59.2363 87.7206 59.177Z" fill="black"/>
+<path d="M31.7358 25.6955C32.8058 24.3572 33.5319 22.5603 33.3404 20.724C31.7741 20.8019 29.8627 21.7573 28.7562 23.0967C27.7626 24.2436 26.8832 26.1158 27.1124 27.8751C28.8707 28.0276 30.6273 26.9962 31.7358 25.6955Z" fill="black"/>
+<path d="M33.3204 28.2186C30.7671 28.0665 28.5961 29.6678 27.3767 29.6678C26.1567 29.6678 24.2894 28.2952 22.2698 28.3322C19.6412 28.3708 17.2022 29.8571 15.8682 32.2209C13.1246 36.9497 15.1442 43.9642 17.8122 47.8155C19.1079 49.7209 20.6694 51.8189 22.7269 51.7435C24.6709 51.6672 25.4328 50.4847 27.7958 50.4847C30.1571 50.4847 30.8435 51.7435 32.9013 51.7054C35.0353 51.6672 36.3695 49.799 37.6651 47.8918C39.1515 45.7198 39.7599 43.6225 39.7982 43.5073C39.7599 43.4692 35.6832 41.9053 35.6454 37.2158C35.6069 33.2892 38.8461 31.4215 38.9985 31.3057C37.1694 28.6003 34.3113 28.2952 33.3204 28.2186Z" fill="black"/>
+<rect x="1.375" y="1.375" width="117.25" height="77.25" rx="6.625" stroke="black" stroke-width="2.75"/>
+</g>
+<defs>
+<clipPath id="clip0_823_247">
+<rect width="120" height="80" rx="4" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/payment/bancontact.svg b/public/images/payment/bancontact.svg
new file mode 100644
index 0000000..cefe1ba
--- /dev/null
+++ b/public/images/payment/bancontact.svg
@@ -0,0 +1,16 @@
+<svg width="120" height="80" viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="120" height="80" rx="4" fill="white"/>
+<path d="M15.5 67.7753V54.7492H19.4669C22.3503 54.7492 24.2052 55.8471 24.2052 58.1174C24.2052 59.4014 23.6175 60.2946 22.7911 60.8156C23.9848 61.3738 24.6827 62.4532 24.6827 63.9233C24.6827 66.5472 22.7911 67.7753 19.8526 67.7753H15.5ZM18.0528 60.1643H19.9445C21.1014 60.1643 21.5974 59.5874 21.5974 58.5268C21.5974 57.3916 20.6974 57.0195 19.4853 57.0195H18.0528V60.1643ZM18.0528 65.505H19.6322C21.1749 65.505 22.0748 65.1142 22.0748 63.8861C22.0748 62.6765 21.3035 62.1741 19.8526 62.1741H18.0528V65.505ZM29.6333 67.9986C27.1172 67.9986 25.8499 66.7518 25.8499 65.077C25.8499 63.2347 27.3376 62.1554 29.5414 62.1368C30.0891 62.147 30.6353 62.1967 31.1759 62.2857V61.8391C31.1759 60.704 30.5331 60.1643 29.3027 60.1643C28.4737 60.1538 27.6506 60.3054 26.8784 60.6109L26.4193 58.6012C27.209 58.2662 28.4762 58.0429 29.5965 58.0429C32.2962 58.0429 33.6369 59.4944 33.6369 62.0066V67.1798C32.8839 67.5706 31.4698 67.9986 29.6333 67.9986ZM31.1759 65.8958V63.9047C30.7477 63.8082 30.3106 63.7583 29.872 63.7558C29.0272 63.7558 28.366 64.0908 28.366 64.9654C28.366 65.747 28.917 66.1564 29.8903 66.1564C30.333 66.171 30.7729 66.0818 31.1759 65.8958ZM35.4212 67.7753V58.8617C36.741 58.3246 38.1496 58.0467 39.5718 58.0429C42.2532 58.0429 43.7959 59.3827 43.7959 61.8577V67.7753H41.2614V62.0438C41.2614 60.7598 40.6737 60.1643 39.5534 60.1643C38.9972 60.1564 38.4458 60.2707 37.9373 60.4993V67.7753H35.4212ZM52.6528 58.6012L52.1753 60.6295C51.5192 60.3415 50.8148 60.1836 50.1 60.1643C48.6124 60.1643 47.8043 61.225 47.8043 62.9743C47.8043 64.8909 48.6491 65.8772 50.2286 65.8772C50.9335 65.8577 51.627 65.693 52.2671 65.3934L52.6712 67.459C51.8396 67.8339 50.9365 68.0182 50.0265 67.9986C46.9779 67.9986 45.2148 66.0819 45.2148 63.0486C45.2148 60.0341 46.9595 58.0429 49.8797 58.0429C50.8317 58.0382 51.7749 58.2281 52.6528 58.6012ZM58.128 67.9986C55.2997 67.9986 53.5366 66.0074 53.5366 63.0114C53.5366 60.0341 55.2997 58.0429 58.128 58.0429C60.9746 58.0429 62.701 60.0341 62.701 63.0114C62.701 66.0074 60.9746 67.9986 58.128 67.9986ZM58.128 65.8772C59.432 65.8772 60.1115 64.7793 60.1115 63.0115C60.1115 61.2622 59.432 60.1643 58.128 60.1643C56.8424 60.1643 56.1262 61.2622 56.1262 63.0115C56.1262 64.7793 56.8424 65.8772 58.128 65.8772ZM64.1676 67.7753V58.8617C65.4874 58.3246 66.896 58.0467 68.3182 58.0429C70.9996 58.0429 72.5423 59.3827 72.5423 61.8577V67.7753H70.0078V62.0438C70.0078 60.7598 69.4201 60.1643 68.2998 60.1643C67.7436 60.1564 67.1922 60.2707 66.6837 60.4993V67.7753H64.1676ZM78.258 67.9986C76.0725 67.9986 74.9523 66.789 74.9523 64.3326V60.3132H73.7034V58.2662H74.9523V56.2006L77.4866 56.0704V58.2662H79.5252V60.3132H77.4866V64.2955C77.4866 65.3748 77.9275 65.8772 78.7539 65.8772C79.0814 65.8764 79.4078 65.8389 79.7272 65.7656L79.8558 67.8312C79.3313 67.9489 78.7952 68.005 78.258 67.9986ZM84.6551 67.9986C82.139 67.9986 80.8718 66.7518 80.8718 65.077C80.8718 63.2347 82.3594 62.1554 84.5633 62.1368C85.1109 62.147 85.6571 62.1967 86.1978 62.2857V61.8391C86.1978 60.704 85.555 60.1643 84.3245 60.1643C83.4956 60.1538 82.6725 60.3054 81.9003 60.6109L81.4411 58.6012C82.2308 58.2662 83.4981 58.0429 84.6184 58.0429C87.3181 58.0429 88.6587 59.4944 88.6587 62.0066V67.1798C87.9058 67.5706 86.4916 67.9986 84.6551 67.9986ZM86.1978 65.8958V63.9047C85.7696 63.8082 85.3325 63.7583 84.8938 63.7558C84.049 63.7558 83.3879 64.0908 83.3879 64.9654C83.3879 65.747 83.9388 66.1564 84.9122 66.1564C85.3548 66.171 85.7948 66.0818 86.1978 65.8958ZM97.3299 58.6012L96.8524 60.6295C96.1964 60.3415 95.4919 60.1836 94.7771 60.1643C93.2896 60.1643 92.4814 61.225 92.4814 62.9743C92.4814 64.8909 93.3262 65.8772 94.9057 65.8772C95.6106 65.8577 96.3041 65.693 96.9442 65.3934L97.3483 67.459C96.5167 67.8339 95.6137 68.0182 94.7037 67.9986C91.655 67.9986 89.8919 66.0819 89.8919 63.0486C89.8919 60.0341 91.6367 58.0429 94.5567 58.0429C95.5088 58.0382 96.452 58.2281 97.3299 58.6012ZM102.902 67.9986C100.717 67.9986 99.5964 66.789 99.5964 64.3326V60.3132H98.3475V58.2662H99.5964V56.2006L102.131 56.0704V58.2662H104.169V60.3132H102.131V64.2955C102.131 65.3748 102.572 65.8772 103.398 65.8772C103.726 65.8764 104.052 65.8389 104.371 65.7656L104.5 67.8312C103.975 67.9489 103.439 68.005 102.902 67.9986Z" fill="#1E3764"/>
+<path d="M33.1782 48.2362C46.5891 48.2362 53.2945 39.1772 60 30.1181H15.5V48.2362H33.1782Z" fill="url(#paint0_linear_823_627)"/>
+<path d="M86.8218 12C73.4109 12 66.7054 21.059 60 30.1181H104.5V12H86.8218Z" fill="url(#paint1_linear_823_627)"/>
+<defs>
+<linearGradient id="paint0_linear_823_627" x1="24.5009" y1="40.0136" x2="57.1574" y2="28.0426" gradientUnits="userSpaceOnUse">
+<stop stop-color="#005AB9"/>
+<stop offset="1" stop-color="#1E3764"/>
+</linearGradient>
+<linearGradient id="paint1_linear_823_627" x1="62.6944" y1="31.6895" x2="97.3534" y2="20.0193" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FBA900"/>
+<stop offset="1" stop-color="#FFD800"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/images/payment/googlepay.svg b/public/images/payment/googlepay.svg
new file mode 100644
index 0000000..fa96e00
--- /dev/null
+++ b/public/images/payment/googlepay.svg
@@ -0,0 +1,8 @@
+<svg width="120" height="80" viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="120" height="80" rx="4" fill="white"/>
+<path d="M57.5437 26.997V35.9796H63.0833C64.4033 35.9796 65.4945 35.5352 66.3569 34.6486C67.2435 33.7642 67.6879 32.7082 67.6879 31.4872C67.6879 30.2904 67.2435 29.2476 66.3569 28.3588C65.4945 27.4502 64.4033 26.9948 63.0833 26.9948H57.5437V26.997ZM57.5437 39.141V49.5602H54.2349V23.8356H63.0129C65.2415 23.8356 67.1335 24.577 68.6933 26.062C70.2773 27.547 71.0693 29.3554 71.0693 31.4872C71.0693 33.6674 70.2773 35.489 68.6933 36.9476C67.1599 38.4106 65.2635 39.1388 63.0107 39.1388H57.5437V39.141ZM74.4133 44.1724C74.4133 45.0348 74.7785 45.752 75.5111 46.3284C76.2415 46.9004 77.0995 47.1886 78.0807 47.1886C79.4733 47.1886 80.7119 46.6738 81.8031 45.6464C82.8965 44.6146 83.4399 43.4046 83.4399 42.0164C82.4081 41.2024 80.9693 40.7954 79.1235 40.7954C77.7815 40.7954 76.6595 41.121 75.7619 41.7678C74.8621 42.4146 74.4133 43.2132 74.4133 44.1724ZM78.6945 31.3794C81.1409 31.3794 83.0703 32.0328 84.4871 33.3374C85.8995 34.6442 86.6079 36.435 86.6079 38.7098V49.5602H83.4421V47.1182H83.2991C81.9307 49.129 80.1091 50.1366 77.8299 50.1366C75.8895 50.1366 74.2637 49.5602 72.9569 48.4118C71.6501 47.2612 70.9967 45.8246 70.9967 44.0998C70.9967 42.2782 71.6853 40.8306 73.0647 39.7526C74.4441 38.6746 76.2833 38.1356 78.5867 38.1356C80.5491 38.1356 82.1705 38.4942 83.4399 39.2136V38.4568C83.4399 37.3084 82.9845 36.3316 82.0737 35.5308C81.1961 34.7411 80.0531 34.3114 78.8727 34.3274C77.0247 34.3274 75.5639 35.104 74.4837 36.6638L71.5709 34.829C73.1769 32.53 75.5529 31.3794 78.6945 31.3794ZM104.771 31.9558L93.7271 57.3218H90.3105L94.4113 48.447L87.1469 31.9558H90.7439L95.9953 44.6036H96.0657L101.174 31.9536L104.771 31.9558Z" fill="#3C4043"/>
+<path d="M44.1722 36.8948C44.1722 35.8542 44.0842 34.8488 43.917 33.8896H29.9602V39.5832H37.955C37.6239 41.4215 36.5557 43.0445 34.9982 44.0756V47.7716H39.77C42.564 45.1976 44.1722 41.3916 44.1722 36.8948Z" fill="#4285F4"/>
+<path d="M29.9603 51.34C33.9555 51.34 37.3171 50.031 39.7701 47.7738L34.9983 44.0756C33.6717 44.9688 31.9623 45.4902 29.9603 45.4902C26.1015 45.4902 22.8235 42.8898 21.6531 39.3874H16.7383V43.1956C19.2527 48.1909 24.3678 51.3425 29.9603 51.3422" fill="#34A853"/>
+<path d="M21.6529 39.3874C21.0355 37.5518 21.0355 35.5646 21.6529 33.729V29.9208H16.7381C15.6991 31.9782 15.1587 34.2512 15.1606 36.556C15.1606 38.943 15.7327 41.198 16.7381 43.1934L21.6529 39.3852V39.3874Z" fill="#FABB05"/>
+<path d="M29.96 27.6262C32.1424 27.6262 34.096 28.3742 35.636 29.8438V29.846L39.86 25.6264C37.2992 23.2416 33.9552 21.7764 29.9622 21.7764C24.3703 21.7757 19.2553 24.9264 16.7402 29.9208L21.655 33.729C22.8254 30.2266 26.1034 27.6262 29.9622 27.6262" fill="#E94235"/>
+</svg>
diff --git a/public/images/payment/ideal.svg b/public/images/payment/ideal.svg
new file mode 100644
index 0000000..69cb7cc
--- /dev/null
+++ b/public/images/payment/ideal.svg
@@ -0,0 +1,11 @@
+<svg width="120" height="80" viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="120" height="80" rx="4" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.6001 12.7443V67.2557C23.6001 69.8651 25.7406 72 28.3567 72H61.0109C85.6977 72 96.4001 58.2179 96.4001 39.9288C96.4001 21.7346 85.6977 8 61.0109 8H28.3567C25.7406 8 23.6001 10.1349 23.6001 12.7443Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M45.2002 21.4283V61.6H62.5782C78.3572 61.6 85.2002 52.6335 85.2002 39.9527C85.2002 27.816 78.3572 18.4 62.5782 18.4H48.2102C46.5406 18.4 45.2002 19.7722 45.2002 21.4283Z" fill="#CC0066"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M60.6001 12C87.5763 12 91.6001 29.2633 91.6001 39.5408C91.6001 57.3725 80.5763 67.2 60.6001 67.2H32.1715C29.6477 67.2 27.6001 65.1637 27.6001 62.6533V16.5467C27.6001 14.0366 29.6477 12 32.1715 12H60.6001ZM60.6001 13.5156H32.1715C30.4811 13.5156 29.1239 14.8654 29.1239 16.5467V62.6533C29.1239 64.3349 30.4811 65.6844 32.1715 65.6844H60.6001C79.6001 65.6844 90.0763 56.4018 90.0763 39.5408C90.0763 16.9019 71.6001 13.5156 60.6001 13.5156Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.8526 34.4V34.4234C52.4917 34.4234 53.0817 34.5183 53.647 34.7074C54.2124 34.8964 54.6794 35.204 55.0973 35.5823C55.4906 35.9843 55.8102 36.4809 56.056 37.0484C56.2772 37.6395 56.4001 38.325 56.4001 39.1292C56.4001 39.8386 56.3018 40.477 56.1297 41.0682C55.9331 41.6593 55.6627 42.1793 55.294 42.6052C54.9252 43.0308 54.4582 43.3616 53.8928 43.6219C53.3275 43.8584 52.6638 44 51.9018 44H47.6001V34.4H51.8526ZM51.3364 36.2208H49.7632V42.2741H51.7051V42.2505C52.0247 42.2505 52.3196 42.2032 52.6392 42.1084C52.9342 42.014 53.2046 41.8485 53.4258 41.612C53.647 41.3756 53.8437 41.0918 53.9912 40.7135C54.1386 40.3349 54.2124 39.9095 54.2124 39.3657C54.2124 38.8927 54.1632 38.4432 54.0649 38.0651C53.9666 37.6868 53.7945 37.3321 53.5733 37.072C53.3521 36.8119 53.0571 36.5754 52.6884 36.4333C52.3197 36.2917 51.8772 36.2208 51.3364 36.2208Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M71.9338 34.4L75.6001 44H73.3569L72.6094 41.8719H68.9431L68.171 44H66.0001L69.6905 34.4H71.9338ZM70.8242 36.7646H70.8003L69.5217 40.2877H72.0544L70.8242 36.7646Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M64.2832 36.1971H59.2806V38.2542H63.8858V39.8857H59.2806V42.2266H64.4001V44H57.2001V34.4H64.2832V36.1971Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.6327 34.4V42.2267H83.6001V44H76.4001V34.4H78.6327Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M37.2002 46.4C38.9579 46.4 40.4002 47.8826 40.4002 49.7414V61.6H40.3777C36.8396 61.6 34.0002 58.6118 34.0002 54.9413V49.7414C34.0002 47.9061 35.4199 46.4 37.2002 46.4ZM37.6002 35.2C40.0303 35.2 42.0002 37.1701 42.0002 39.6C42.0002 42.0301 40.0303 44 37.6002 44C35.1701 44 33.2002 42.0301 33.2002 39.6C33.2002 37.1701 35.1701 35.2 37.6002 35.2Z" fill="black"/>
+</svg>
diff --git a/public/images/payment/mastercard.svg b/public/images/payment/mastercard.svg
new file mode 100644
index 0000000..6aa2ab8
--- /dev/null
+++ b/public/images/payment/mastercard.svg
@@ -0,0 +1,7 @@
+<svg width="120" height="80" viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="120" height="80" rx="4" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M97.5288 54.6562V53.7384H97.289L97.0137 54.3698L96.7378 53.7384H96.498V54.6562H96.6675V53.9637L96.9257 54.5609H97.1011L97.36 53.9624V54.6562H97.5288ZM96.0111 54.6562V53.8947H96.318V53.7397H95.5361V53.8947H95.843V54.6562H96.0111Z" fill="#F79E1B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.6521 58.595H70.3479V21.4044H49.6521V58.595Z" fill="#FF5F00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M98.2675 40.0003C98.2675 53.063 87.6791 63.652 74.6171 63.652C69.0996 63.652 64.0229 61.7624 60 58.5956C65.5011 54.2646 69.0339 47.5448 69.0339 40.0003C69.0339 32.4552 65.5011 25.7354 60 21.4044C64.0229 18.2376 69.0996 16.348 74.6171 16.348C87.6791 16.348 98.2675 26.937 98.2675 40.0003Z" fill="#F79E1B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.966 40.0003C50.966 32.4552 54.4988 25.7354 59.9999 21.4044C55.977 18.2376 50.9003 16.348 45.3828 16.348C32.3208 16.348 21.7324 26.937 21.7324 40.0003C21.7324 53.063 32.3208 63.652 45.3828 63.652C50.9003 63.652 55.977 61.7624 59.9999 58.5956C54.4988 54.2646 50.966 47.5448 50.966 40.0003Z" fill="#EB001B"/>
+</svg>
diff --git a/public/images/payment/sepa.svg b/public/images/payment/sepa.svg
new file mode 100644
index 0000000..ba405fd
--- /dev/null
+++ b/public/images/payment/sepa.svg
@@ -0,0 +1,22 @@
+<svg width="120" height="80" viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="120" height="80" rx="4" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M61.7961 51.0291L61.7626 52.2779H57.8379V46.1184H59.2417V51.0291H61.7961Z" fill="#005DA1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M65.3571 50.1424C65.2336 50.0933 64.9856 50.0354 64.6468 50.0354C64.0768 50.0354 63.8121 50.2573 63.8121 50.6922C63.8121 51.1772 64.1015 51.3499 64.5242 51.3499C64.9609 51.3499 65.3571 51.0868 65.3571 50.7668V50.1424ZM65.5486 51.8015L65.523 51.7928C65.2177 52.1541 64.7386 52.3601 64.1668 52.3601C63.2174 52.3601 62.6147 51.8261 62.6147 50.7089C62.6147 49.789 63.2589 49.1567 64.3989 49.1567C64.7703 49.1567 65.0924 49.2146 65.3571 49.2962V49.0094C65.3571 48.5078 65.0924 48.2781 64.4077 48.2781C63.8545 48.2781 63.4909 48.3605 63.0268 48.549L62.9192 47.5309C63.4247 47.3169 63.9939 47.2021 64.6389 47.2021C66.1177 47.2021 66.6303 47.8343 66.6303 49.1979V52.2777H65.6465L65.5486 51.8015Z" fill="#005DA1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M69.4 52.3767C68.7956 52.3767 68.2503 52.2618 67.8294 52.0321L67.9609 50.9806C68.3756 51.2183 68.9624 51.3332 69.3912 51.3332C69.9038 51.3332 70.1183 51.128 70.1183 50.8324C70.1183 50.0353 67.7968 50.4957 67.7968 48.755C67.7968 47.8597 68.4083 47.2186 69.6974 47.2186C70.2003 47.2186 70.698 47.3177 71.118 47.4896L71.0112 48.5323C70.5974 48.3604 70.0441 48.278 69.6727 48.278C69.2518 48.278 69.0188 48.4428 69.0188 48.6971C69.0188 49.4522 71.3085 49.0006 71.3085 50.7176C71.3085 51.7111 70.7544 52.3767 69.4 52.3767Z" fill="#005DA1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M73.8302 48.2537V50.7994C73.8302 51.1861 74.0287 51.3501 74.4249 51.3501C74.5573 51.3501 74.7302 51.3255 74.822 51.2922L74.8961 52.22C74.7223 52.2945 74.3923 52.3603 74.0358 52.3603C73.037 52.3603 72.549 51.785 72.549 50.8406V48.2537H71.987V47.3013H72.6064L72.8208 46.1754L73.8302 46.085V47.3013H74.9464V48.2537H73.8302Z" fill="#005DA1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M97.9976 52.2778V48.2457H97.3693V47.3013H97.9976V47.0873C97.9976 46.3401 98.5182 45.7245 99.7155 45.7245C99.9979 45.7245 100.31 45.7649 100.526 45.8307L100.451 46.6523C100.302 46.619 100.138 46.6032 99.9714 46.6032C99.4693 46.6032 99.2779 46.7997 99.2779 47.1206V47.3013H100.344V48.2457H99.2779V52.2778H97.9976Z" fill="#005DA1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M94.8401 52.2778V47.3337L96.154 47.2758V52.2778H94.8401ZM95.501 46.7672C95.0051 46.7672 94.766 46.6269 94.766 46.2253C94.766 45.8719 95.0051 45.6746 95.501 45.6746C96.0057 45.6746 96.2281 45.864 96.2281 46.2253C96.2281 46.5866 96.0057 46.7672 95.501 46.7672Z" fill="#005DA1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M90.5345 52.2778V47.3337L91.5581 47.2846L91.6745 48.1142H91.6983C92.0133 47.5143 92.5013 47.2188 93.0713 47.2188C93.2945 47.2188 93.4842 47.2521 93.6157 47.2925L93.5328 48.5491C93.3775 48.5 93.1869 48.4667 92.9875 48.4667C92.3186 48.4667 91.8236 48.9516 91.8236 49.7812V52.2778H90.5345Z" fill="#005DA1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M87.9053 52.2778V49.1077C87.9053 48.5982 87.6494 48.3351 87.1041 48.3351C86.7318 48.3351 86.4097 48.5 86.2527 48.7131V52.2778H84.9715V45.8885L86.2527 45.8228V46.9557L86.2359 47.6126L86.2606 47.6301C86.633 47.317 87.0856 47.2022 87.5091 47.2022C88.5662 47.2022 89.1856 47.909 89.1856 49.1077V52.2778H87.9053Z" fill="#005DA1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M83.6814 48.5161C83.4256 48.4258 83.1194 48.36 82.83 48.36C81.8973 48.36 81.5903 48.7459 81.5903 49.7973C81.5903 50.8654 82.0288 51.2837 82.8053 51.2837C83.1361 51.2837 83.4503 51.2179 83.715 51.0952L83.8067 52.0887C83.5094 52.2694 83.062 52.3764 82.5247 52.3764C81.0458 52.3764 80.2597 51.538 80.2597 49.7973C80.2597 48.1461 80.9461 47.2183 82.5494 47.2183C82.9703 47.2183 83.4423 47.3086 83.7556 47.4323L83.6814 48.5161Z" fill="#005DA1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M77.4249 52.3767C76.8213 52.3767 76.276 52.2618 75.8543 52.0321L75.9866 50.9806C76.4005 51.2183 76.9872 51.3332 77.4169 51.3332C77.9296 51.3332 78.144 51.128 78.144 50.8324C78.144 50.0353 75.8225 50.4957 75.8225 48.755C75.8225 47.8597 76.4331 47.2186 77.7231 47.2186C78.226 47.2186 78.7228 47.3177 79.1437 47.4896L79.0369 48.5323C78.6231 48.3604 78.0699 48.278 77.6984 48.278C77.2766 48.278 77.0446 48.4428 77.0446 48.6971C77.0446 49.4522 79.3343 49.0006 79.3343 50.7176C79.3343 51.7111 78.7802 52.3767 77.4249 52.3767Z" fill="#005DA1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M102.973 48.2537V50.7994C102.973 51.1861 103.171 51.3501 103.567 51.3501C103.699 51.3501 103.873 51.3255 103.964 51.2922L104.038 52.22C103.865 52.2945 103.535 52.3603 103.178 52.3603C102.179 52.3603 101.691 51.785 101.691 50.8406V48.2537H101.128V47.3013H101.748L101.963 46.1754L102.973 46.085V47.3013H104.088V48.2537H102.973Z" fill="#005DA1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M61.9028 42.6681C60.3543 42.6681 58.9311 42.2971 57.7734 41.678L58.1652 39.113C59.3405 39.7321 60.5502 40.0864 61.8667 40.0864C63.3261 40.0864 63.9676 39.5559 63.9676 38.636C63.9676 36.5489 57.8273 37.4328 57.8273 32.993C57.8273 30.7472 59.2867 28.9249 62.6679 28.9249C63.9676 28.9249 65.3731 29.1906 66.4055 29.6151L66.0323 32.1266C64.9284 31.7732 63.8255 31.561 62.8108 31.561C61.1555 31.561 60.7108 32.1266 60.7108 32.8342C60.7108 34.9038 66.8502 33.9488 66.8502 38.4413C66.8502 41.0589 65.0167 42.6681 61.9028 42.6681Z" fill="#005DA1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M78.421 39.8206V42.4207H69.3451V29.1555H78.421V31.7906H72.3531V34.4258H77.2819V36.7961H72.3531V39.8206H78.421Z" fill="#005DA1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M85.8635 31.6491H84.0829V35.7171H85.8635C87.3406 35.7171 87.9803 35.3462 87.9803 33.6835C87.9803 32.0911 87.4121 31.6491 85.8635 31.6491ZM85.8635 38.105H84.0829V42.4212H81.0759V29.1551H85.8635C89.565 29.1551 91.0774 30.6055 91.0774 33.7011C91.0774 36.4958 89.5835 38.105 85.8635 38.105Z" fill="#005DA1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M97.4702 32.7984L96.1352 37.3443H99.5349L98.2528 32.7984L97.8972 31.4014H97.8434L97.4702 32.7984ZM100.246 39.8383H95.4055L94.6581 42.4209H91.4905L96.0999 29.1556H99.6769L104.339 42.4209H100.993L100.246 39.8383Z" fill="#005DA1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.6441 39.6275C29.6018 39.6836 29.5374 39.7117 29.4712 39.7257C29.3971 39.7345 29.3203 39.7178 29.2568 39.6705L25.8235 37.1072L21.2291 33.6776L17.795 31.1135C17.7324 31.0661 17.6953 30.9977 17.6821 30.924C17.6777 30.8574 17.6874 30.7881 17.7297 30.732L18.6659 29.4929C18.6659 29.4929 19.6938 28.1714 20.5965 26.9779L24.4603 29.863L28.6462 32.9883L32.5109 35.8734C31.6082 37.0669 30.5803 38.3884 30.5803 38.3884L29.6441 39.6275ZM23.1862 24.0034L26.5991 26.5526L28.9065 28.2749L31.2121 29.998L34.6268 32.5455C34.7582 32.6428 34.7856 32.8261 34.6885 32.9541L33.8697 34.0748L30.0059 31.1897L25.82 28.0644L21.9562 25.1793L22.7741 24.0586C22.8703 23.9306 23.0556 23.906 23.1862 24.0034ZM35.0177 32.0491L29.2868 27.7715L23.5568 23.4921C23.1571 23.1948 22.5906 23.2738 22.2915 23.6693L17.2471 30.3435C17.1668 30.4479 17.1191 30.5636 17.0909 30.6838C17.0044 31.024 17.1244 31.4002 17.4235 31.6247L20.8391 34.1739L25.453 37.6185L28.8668 40.1668C29.1668 40.3913 29.5638 40.4009 29.8682 40.2221C29.9768 40.1633 30.0747 40.0844 30.1541 39.98L35.1985 33.3066C35.4977 32.9111 35.4165 32.3473 35.0177 32.0491Z" fill="#A4AAB6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4587 56.1126L20.484 42.8281H31.3907L30.451 44.0786L29.0975 45.9368L28.944 46.2113L28.8019 46.5305L28.6563 46.89L28.5046 47.2715L28.359 47.6871L28.2152 48.0958L28.0802 48.507L27.9469 48.9104L27.8269 49.2928L27.7166 49.6453L27.6187 49.9531L27.5446 50.21L27.4872 50.4056L27.4396 50.5275C27.4396 50.5275 27.4316 50.5538 27.4078 50.5854C27.3805 50.6231 27.2155 50.773 27.0813 50.6739C26.9525 50.5783 26.9657 50.2416 26.979 50.0811C27.0196 49.5892 27.0593 49.0972 27.0999 48.6061C27.1122 48.4334 26.9004 48.336 26.7637 48.4141C26.161 48.7587 25.8019 49.1761 25.4728 49.6532C25.5037 49.5418 25.5346 49.4296 25.5646 49.3182C25.704 48.8113 25.899 48.2869 25.974 47.766C26.0163 47.4688 25.9405 47.1154 25.591 47.0584C25.1975 46.9926 24.9399 47.4039 24.7475 47.6748C24.1643 48.4921 23.821 49.5304 23.0975 50.2416C22.8249 50.5091 22.5231 50.7064 22.1322 50.5959C21.6778 50.4678 21.5013 50.9984 22.3025 51.0703C23.0905 51.1404 23.6763 50.3135 24.0337 49.7356C24.2931 49.3156 24.5216 48.8771 24.774 48.4536C24.8957 48.2501 25.0219 48.0493 25.1613 47.8572C25.2222 47.7757 25.336 47.5565 25.4419 47.5275C25.5813 47.4889 25.5452 47.5687 25.5372 47.6784C25.5187 47.9256 25.4128 48.18 25.3475 48.4185C25.2769 48.6789 25.2054 48.9394 25.134 49.1998C24.9813 49.7584 24.8296 50.317 24.6769 50.8747C24.6081 51.1282 24.9434 51.2457 25.0846 51.0457C25.6457 50.2512 25.9255 49.5778 26.6172 49.0464C26.6022 49.2209 26.5881 49.3954 26.574 49.5708C26.551 49.8593 26.4955 50.1644 26.5149 50.4529C26.5484 50.9247 26.9066 51.2518 27.3575 51.0457C27.5931 50.937 27.7625 50.773 27.7625 50.773L27.789 50.7537L27.8843 50.6827L28.0581 50.5687L28.2937 50.4073L28.5557 50.2127L28.8452 50.0092L29.1857 49.7716L29.5316 49.5181L29.8766 49.2656L30.2225 49.0122L30.5587 48.7578L30.8746 48.5202L31.1657 48.2843L31.4207 48.0879L31.6237 47.9002L31.7816 47.7494L31.7878 47.7406L31.7913 47.7441L32.8669 46.4814L35.6154 42.8281H40.4949L44.2907 56.1126H16.4587ZM36.0487 42.2528L44.6922 30.7651L45.5737 29.6102C45.6646 29.4866 45.6513 29.3735 45.5649 29.3112L43.1181 27.5495C43.0325 27.4872 42.9205 27.5118 42.8569 27.5968C42.851 27.605 42.7319 27.7567 42.4996 28.0519L31.8231 42.2528H20.0657L15.6602 56.6879H45.0769L40.921 42.2528H36.0487Z" fill="#005DA1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M46.6821 30.1526L46.3592 29.9114C46.2947 29.8632 46.2021 29.8763 46.1536 29.9404L42.0453 35.3738C41.9959 35.4369 42.01 35.529 42.0736 35.5772L42.3974 35.8184C42.4618 35.8666 42.5527 35.8534 42.6021 35.7894L46.7112 30.356C46.7598 30.292 46.7465 30.2008 46.6821 30.1526Z" fill="#0062A5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.178 53.2862H38.353L38.1792 52.6426H30.178H22.1768L22.0039 53.2862H30.178Z" fill="#005DA1"/>
+</svg>
diff --git a/public/images/payment/visa.svg b/public/images/payment/visa.svg
new file mode 100644
index 0000000..eb1507e
--- /dev/null
+++ b/public/images/payment/visa.svg
@@ -0,0 +1,7 @@
+<svg width="120" height="80" viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="120" height="80" rx="4" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M86.6666 44.9375L90.3239 35.0625L92.3809 44.9375H86.6666ZM100.952 52.8375L95.8086 27.1625H88.7383C86.3525 27.1625 85.7723 29.0759 85.7723 29.0759L76.1904 52.8375H82.8868L84.2269 49.0244H92.3947L93.1479 52.8375H100.952Z" fill="#1434CB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M77.1866 33.5711L78.0952 28.244C78.0952 28.244 75.2896 27.1625 72.3648 27.1625C69.2031 27.1625 61.6955 28.5638 61.6955 35.3738C61.6955 41.7825 70.5071 41.8621 70.5071 45.2266C70.5071 48.5912 62.6034 47.9901 59.9955 45.8676L59.0476 51.4362C59.0476 51.4362 61.8919 52.8375 66.2397 52.8375C70.5869 52.8375 77.1467 50.5544 77.1467 44.3455C77.1467 37.8964 68.2552 37.296 68.2552 34.4921C68.2552 31.6882 74.4602 32.0484 77.1866 33.5711Z" fill="#1434CB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M54.6517 52.8375H47.6191L52.0144 27.1625H59.0477L54.6517 52.8375Z" fill="#1434CB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.3113 27.1625L35.9217 44.8213L35.1663 41.0185L35.167 41.0199L32.9114 29.4749C32.9114 29.4749 32.6394 27.1625 29.7324 27.1625H19.1709L19.0476 27.5966C19.0476 27.5966 22.2782 28.2669 26.057 30.5326L31.8793 52.8375H38.8617L49.5238 27.1625H42.3113Z" fill="#1434CB"/>
+</svg>
-- 
2.49.1


From 5faa0dec804d4c0778229eaf5e0b500978d7ae80 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 15:52:17 +0100
Subject: [PATCH 388/428] fix: pause carousel interval when tab is hidden

Prevents animation backlog from setInterval firing while the browser
throttles rAF in background tabs, which caused a blank carousel on return.
---
 components/checkout/FeatureSlideshow.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/components/checkout/FeatureSlideshow.tsx b/components/checkout/FeatureSlideshow.tsx
index a9147d0..d172b82 100644
--- a/components/checkout/FeatureSlideshow.tsx
+++ b/components/checkout/FeatureSlideshow.tsx
@@ -38,8 +38,22 @@ export default function FeatureSlideshow() {
   }, [])
 
   useEffect(() => {
-    const timer = setInterval(advance, 8000)
-    return () => clearInterval(timer)
+    let timer: ReturnType<typeof setInterval> | null = null
+
+    const start = () => { timer = setInterval(advance, 8000) }
+    const stop = () => { if (timer) { clearInterval(timer); timer = null } }
+
+    const onVisibility = () => {
+      if (document.hidden) stop()
+      else start()
+    }
+
+    start()
+    document.addEventListener('visibilitychange', onVisibility)
+    return () => {
+      stop()
+      document.removeEventListener('visibilitychange', onVisibility)
+    }
   }, [advance])
 
   const slide = slides[activeIndex]
-- 
2.49.1


From e206399f9d717a4c4548b6d0a0b67eebd4cd79d4 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 15:53:20 +0100
Subject: [PATCH 389/428] fix: pause carousel on hidden tab, remove payment
 tile labels

Carousel: listen to visibilitychange to prevent animation backlog when
tab is backgrounded. Payment tiles: logo-only, no text labels.
---
 components/checkout/PaymentForm.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx
index 4ee8f61..2fd49f3 100644
--- a/components/checkout/PaymentForm.tsx
+++ b/components/checkout/PaymentForm.tsx
@@ -219,14 +219,13 @@ export default function PaymentForm({ plan, interval, limit, country, vatId }: P
                 key={method.id}
                 type="button"
                 onClick={() => { setSelectedMethod(method.id); setFormError(null) }}
-                className={`flex flex-col items-center justify-center gap-1 rounded-xl border h-[52px] text-[10px] font-medium transition-all duration-200 ${
+                className={`flex items-center justify-center rounded-xl border h-[44px] transition-all duration-200 ${
                   isSelected
-                    ? 'border-brand-orange bg-brand-orange/5 text-white'
-                    : 'border-neutral-700/50 bg-neutral-800/30 text-neutral-400 hover:border-neutral-600 hover:text-neutral-300'
+                    ? 'border-brand-orange bg-brand-orange/5'
+                    : 'border-neutral-700/50 bg-neutral-800/30 hover:border-neutral-600'
                 }`}
               >
                 <MethodLogo type={method.id} />
-                <span>{method.label}</span>
               </button>
             )
           })}
-- 
2.49.1


From 324ba131d4b18192d29a20d1a27d799a6ed039f8 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 16:23:58 +0100
Subject: [PATCH 390/428] chore: bump @ciphera-net/ui to 0.3.4 (session refresh
 retry fix)

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8ae1ac3..dcbd66e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "pulse-frontend",
       "version": "0.15.0-alpha",
       "dependencies": {
-        "@ciphera-net/ui": "^0.3.3",
+        "@ciphera-net/ui": "^0.3.4",
         "@ducanh2912/next-pwa": "^10.2.9",
         "@icons-pack/react-simple-icons": "^13.13.0",
         "@phosphor-icons/react": "^2.1.10",
@@ -1682,9 +1682,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.3.3",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.3.3/e67893f5cadc93c0dcb0b9987b9d370dce0d073b",
-      "integrity": "sha512-Z5A8qj0ZuMMJq72ZREknxDlL1LciUoirmQmkHmp4H2Vl/5ZWELrvdm65V11hJuc2TZpXnCBxtWa2UoKi/SVOIw==",
+      "version": "0.3.4",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.3.4/22dd1c925f48fe78dbe286a714aed7c209dd2034",
+      "integrity": "sha512-TwDelE6naZvKhy6Id+IMinXn7R4WLBsN8CyScpOcOgNSmbSwdHNbkHE4kKUK8iIH/dlppRZzI2cCfwLOgfg9sg==",
       "dependencies": {
         "@phosphor-icons/react": "^2.1.10",
         "class-variance-authority": "^0.7.1",
diff --git a/package.json b/package.json
index 93801dd..edc16f7 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.3.3",
+    "@ciphera-net/ui": "^0.3.4",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@icons-pack/react-simple-icons": "^13.13.0",
     "@phosphor-icons/react": "^2.1.10",
-- 
2.49.1


From 773e91d4906b9c1539469d99aa47bc77717de360 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 17:44:40 +0100
Subject: [PATCH 391/428] feat: remap PageSpeed audit links to
 ciphera.net/learn articles

---
 app/sites/[id]/pagespeed/page.tsx |  3 ++-
 lib/learn-links.ts                | 30 ++++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 lib/learn-links.ts

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index 8980d2e..c0eade6 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -8,6 +8,7 @@ import { updatePageSpeedConfig, triggerPageSpeedCheck, getPageSpeedLatest, getPa
 import { toast, Button } from '@ciphera-net/ui'
 import { motion } from 'framer-motion'
 import ScoreGauge from '@/components/pagespeed/ScoreGauge'
+import { remapLearnUrl } from '@/lib/learn-links'
 import { AreaChart as VisxAreaChart, Area as VisxArea, Grid as VisxGrid, XAxis as VisxXAxis, YAxis as VisxYAxis, ChartTooltip as VisxChartTooltip } from '@/components/ui/area-chart'
 import { useMinimumLoading, useSkeletonFade } from '@/components/skeletons'
 
@@ -788,7 +789,7 @@ function AuditDescription({ text }: { text: string }) {
           return (
             <a
               key={i}
-              href={match[2]}
+              href={remapLearnUrl(match[2])}
               target="_blank"
               rel="noopener noreferrer"
               className="text-brand-orange hover:underline"
diff --git a/lib/learn-links.ts b/lib/learn-links.ts
new file mode 100644
index 0000000..dd0f4a1
--- /dev/null
+++ b/lib/learn-links.ts
@@ -0,0 +1,30 @@
+/**
+ * Maps Google/Deque documentation URLs to ciphera.net/learn articles.
+ * Keys are normalized URLs (no protocol, no trailing slash, no query/hash).
+ * Add entries as new /learn articles are published on ciphera.net.
+ */
+const LEARN_URL_MAP: Record<string, string> = {
+  // Performance Metrics
+  'developer.chrome.com/docs/lighthouse/performance/first-contentful-paint': 'https://ciphera.net/learn/first-contentful-paint',
+  'developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint': 'https://ciphera.net/learn/largest-contentful-paint',
+  'developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time': 'https://ciphera.net/learn/total-blocking-time',
+  'web.dev/articles/cls': 'https://ciphera.net/learn/cumulative-layout-shift',
+  'developer.chrome.com/docs/lighthouse/performance/speed-index': 'https://ciphera.net/learn/speed-index',
+  'web.dev/articles/inp': 'https://ciphera.net/learn/interaction-to-next-paint',
+  'developer.chrome.com/docs/lighthouse/performance/interactive': 'https://ciphera.net/learn/time-to-interactive',
+  'developer.chrome.com/docs/lighthouse/performance/lighthouse-max-potential-fid': 'https://ciphera.net/learn/max-potential-first-input-delay',
+}
+
+function normalizeUrl(url: string): string {
+  try {
+    const u = new URL(url)
+    return (u.host + u.pathname).replace(/\/+$/, '')
+  } catch {
+    return url
+  }
+}
+
+export function remapLearnUrl(url: string): string {
+  const normalized = normalizeUrl(url)
+  return LEARN_URL_MAP[normalized] || url
+}
-- 
2.49.1


From 9c9066b75fbe849c31033366b0f90e7e60f0e000 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 17:51:30 +0100
Subject: [PATCH 392/428] refactor: update learn link URLs to product-based
 routing (/learn/pulse/...)

---
 lib/learn-links.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/lib/learn-links.ts b/lib/learn-links.ts
index dd0f4a1..513f4ef 100644
--- a/lib/learn-links.ts
+++ b/lib/learn-links.ts
@@ -5,14 +5,14 @@
  */
 const LEARN_URL_MAP: Record<string, string> = {
   // Performance Metrics
-  'developer.chrome.com/docs/lighthouse/performance/first-contentful-paint': 'https://ciphera.net/learn/first-contentful-paint',
-  'developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint': 'https://ciphera.net/learn/largest-contentful-paint',
-  'developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time': 'https://ciphera.net/learn/total-blocking-time',
-  'web.dev/articles/cls': 'https://ciphera.net/learn/cumulative-layout-shift',
-  'developer.chrome.com/docs/lighthouse/performance/speed-index': 'https://ciphera.net/learn/speed-index',
-  'web.dev/articles/inp': 'https://ciphera.net/learn/interaction-to-next-paint',
-  'developer.chrome.com/docs/lighthouse/performance/interactive': 'https://ciphera.net/learn/time-to-interactive',
-  'developer.chrome.com/docs/lighthouse/performance/lighthouse-max-potential-fid': 'https://ciphera.net/learn/max-potential-first-input-delay',
+  'developer.chrome.com/docs/lighthouse/performance/first-contentful-paint': 'https://ciphera.net/learn/pulse/first-contentful-paint',
+  'developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint': 'https://ciphera.net/learn/pulse/largest-contentful-paint',
+  'developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time': 'https://ciphera.net/learn/pulse/total-blocking-time',
+  'web.dev/articles/cls': 'https://ciphera.net/learn/pulse/cumulative-layout-shift',
+  'developer.chrome.com/docs/lighthouse/performance/speed-index': 'https://ciphera.net/learn/pulse/speed-index',
+  'web.dev/articles/inp': 'https://ciphera.net/learn/pulse/interaction-to-next-paint',
+  'developer.chrome.com/docs/lighthouse/performance/interactive': 'https://ciphera.net/learn/pulse/time-to-interactive',
+  'developer.chrome.com/docs/lighthouse/performance/lighthouse-max-potential-fid': 'https://ciphera.net/learn/pulse/max-potential-first-input-delay',
 }
 
 function normalizeUrl(url: string): string {
-- 
2.49.1


From 22295302ee1fa59c79c1550a3509d27ec15b2433 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 18:10:51 +0100
Subject: [PATCH 393/428] =?UTF-8?q?feat:=20expand=20learn=20link=20URL=20m?=
 =?UTF-8?q?ap=20to=20116=20entries=20=E2=80=94=20full=20Lighthouse=20audit?=
 =?UTF-8?q?=20coverage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/learn-links.ts | 120 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 120 insertions(+)

diff --git a/lib/learn-links.ts b/lib/learn-links.ts
index 513f4ef..f99ea61 100644
--- a/lib/learn-links.ts
+++ b/lib/learn-links.ts
@@ -13,6 +13,126 @@ const LEARN_URL_MAP: Record<string, string> = {
   'web.dev/articles/inp': 'https://ciphera.net/learn/pulse/interaction-to-next-paint',
   'developer.chrome.com/docs/lighthouse/performance/interactive': 'https://ciphera.net/learn/pulse/time-to-interactive',
   'developer.chrome.com/docs/lighthouse/performance/lighthouse-max-potential-fid': 'https://ciphera.net/learn/pulse/max-potential-first-input-delay',
+
+  // Performance Insights
+  'developer.chrome.com/docs/performance/insights/cache': 'https://ciphera.net/learn/pulse/cache-insight',
+  'developer.chrome.com/docs/performance/insights/cls-culprit': 'https://ciphera.net/learn/pulse/cls-culprits-insight',
+  'developer.chrome.com/docs/performance/insights/document-latency': 'https://ciphera.net/learn/pulse/document-latency-insight',
+  'developer.chrome.com/docs/performance/insights/dom-size': 'https://ciphera.net/learn/pulse/dom-size-insight',
+  'developer.chrome.com/docs/performance/insights/duplicated-javascript': 'https://ciphera.net/learn/pulse/duplicated-javascript-insight',
+  'developer.chrome.com/docs/performance/insights/font-display': 'https://ciphera.net/learn/pulse/font-display-insight',
+  'developer.chrome.com/docs/performance/insights/forced-reflow': 'https://ciphera.net/learn/pulse/forced-reflow-insight',
+  'developer.chrome.com/docs/performance/insights/image-delivery': 'https://ciphera.net/learn/pulse/image-delivery-insight',
+  'developer.chrome.com/docs/performance/insights/inp-breakdown': 'https://ciphera.net/learn/pulse/inp-breakdown-insight',
+  'developer.chrome.com/docs/performance/insights/lcp-breakdown': 'https://ciphera.net/learn/pulse/lcp-breakdown-insight',
+  'developer.chrome.com/docs/performance/insights/lcp-discovery': 'https://ciphera.net/learn/pulse/lcp-discovery-insight',
+  'developer.chrome.com/docs/performance/insights/legacy-javascript': 'https://ciphera.net/learn/pulse/legacy-javascript-insight',
+  'developer.chrome.com/docs/performance/insights/modern-http': 'https://ciphera.net/learn/pulse/modern-http-insight',
+  'developer.chrome.com/docs/performance/insights/network-dependency-tree': 'https://ciphera.net/learn/pulse/network-dependency-tree-insight',
+  'developer.chrome.com/docs/performance/insights/render-blocking': 'https://ciphera.net/learn/pulse/render-blocking-insight',
+  'developer.chrome.com/docs/performance/insights/third-parties': 'https://ciphera.net/learn/pulse/third-parties-insight',
+  'developer.chrome.com/docs/performance/insights/viewport': 'https://ciphera.net/learn/pulse/viewport-insight',
+
+  // Performance Diagnostics
+  'developer.chrome.com/docs/lighthouse/performance/unminified-css': 'https://ciphera.net/learn/pulse/unminified-css',
+  'developer.chrome.com/docs/lighthouse/performance/unminified-javascript': 'https://ciphera.net/learn/pulse/unminified-javascript',
+  'developer.chrome.com/docs/lighthouse/performance/unused-css-rules': 'https://ciphera.net/learn/pulse/unused-css-rules',
+  'developer.chrome.com/docs/lighthouse/performance/unused-javascript': 'https://ciphera.net/learn/pulse/unused-javascript',
+  'developer.chrome.com/docs/lighthouse/performance/total-byte-weight': 'https://ciphera.net/learn/pulse/total-byte-weight',
+  'developer.chrome.com/docs/lighthouse/performance/user-timings': 'https://ciphera.net/learn/pulse/user-timings',
+  'developer.chrome.com/docs/lighthouse/performance/bootup-time': 'https://ciphera.net/learn/pulse/bootup-time',
+  'developer.chrome.com/docs/lighthouse/performance/mainthread-work-breakdown': 'https://ciphera.net/learn/pulse/mainthread-work-breakdown',
+  'web.dev/articles/optimize-long-tasks': 'https://ciphera.net/learn/pulse/long-tasks',
+  'developer.chrome.com/docs/lighthouse/performance/non-composited-animations': 'https://ciphera.net/learn/pulse/non-composited-animations',
+  'web.dev/articles/optimize-cls': 'https://ciphera.net/learn/pulse/unsized-images',
+  'developer.chrome.com/docs/lighthouse/performance/bf-cache': 'https://ciphera.net/learn/pulse/bf-cache',
+
+  // Performance Hidden
+  'developer.chrome.com/docs/lighthouse/performance/redirects': 'https://ciphera.net/learn/pulse/redirects',
+  'developer.chrome.com/docs/lighthouse/performance/time-to-first-byte': 'https://ciphera.net/learn/pulse/server-response-time',
+
+  // SEO
+  'developer.chrome.com/docs/lighthouse/seo/is-crawlable': 'https://ciphera.net/learn/pulse/is-crawlable',
+  'developer.chrome.com/docs/lighthouse/seo/http-status-code': 'https://ciphera.net/learn/pulse/http-status-code',
+  'developer.chrome.com/docs/lighthouse/seo/invalid-robots-txt': 'https://ciphera.net/learn/pulse/robots-txt',
+  'developer.chrome.com/docs/lighthouse/seo/meta-description': 'https://ciphera.net/learn/pulse/meta-description',
+  'developer.chrome.com/docs/lighthouse/seo/link-text': 'https://ciphera.net/learn/pulse/link-text',
+  'developer.chrome.com/docs/lighthouse/seo/hreflang': 'https://ciphera.net/learn/pulse/hreflang',
+  'developer.chrome.com/docs/lighthouse/seo/canonical': 'https://ciphera.net/learn/pulse/canonical',
+  'developer.chrome.com/docs/lighthouse/seo/structured-data': 'https://ciphera.net/learn/pulse/structured-data',
+
+  // Best Practices
+  'developer.chrome.com/docs/lighthouse/pwa/is-on-https': 'https://ciphera.net/learn/pulse/is-on-https',
+  'developer.chrome.com/docs/lighthouse/pwa/redirects-http': 'https://ciphera.net/learn/pulse/redirects-http',
+  'developer.chrome.com/docs/lighthouse/best-practices/geolocation-on-start': 'https://ciphera.net/learn/pulse/geolocation-on-start',
+  'developer.chrome.com/docs/lighthouse/best-practices/notification-on-start': 'https://ciphera.net/learn/pulse/notification-on-start',
+  'developer.chrome.com/docs/lighthouse/best-practices/csp-xss': 'https://ciphera.net/learn/pulse/csp-xss',
+  'developer.chrome.com/docs/lighthouse/best-practices/has-hsts': 'https://ciphera.net/learn/pulse/has-hsts',
+  'web.dev/articles/why-coop-coep': 'https://ciphera.net/learn/pulse/origin-isolation',
+  'developer.chrome.com/docs/lighthouse/best-practices/clickjacking-mitigation': 'https://ciphera.net/learn/pulse/clickjacking-mitigation',
+  'developer.chrome.com/docs/lighthouse/best-practices/paste-preventing-inputs': 'https://ciphera.net/learn/pulse/paste-preventing-inputs',
+  'developer.chrome.com/docs/lighthouse/best-practices/image-aspect-ratio': 'https://ciphera.net/learn/pulse/image-aspect-ratio',
+  'web.dev/articles/serve-responsive-images': 'https://ciphera.net/learn/pulse/image-size-responsive',
+  'developer.chrome.com/docs/lighthouse/best-practices/doctype': 'https://ciphera.net/learn/pulse/doctype',
+  'developer.chrome.com/docs/lighthouse/best-practices/charset': 'https://ciphera.net/learn/pulse/charset',
+
+  // Accessibility
+  'dequeuniversity.com/rules/axe/4.11/aria-allowed-attr': 'https://ciphera.net/learn/pulse/aria-allowed-attr',
+  'dequeuniversity.com/rules/axe/4.11/aria-command-name': 'https://ciphera.net/learn/pulse/aria-command-name',
+  'dequeuniversity.com/rules/axe/4.11/aria-conditional-attr': 'https://ciphera.net/learn/pulse/aria-conditional-attr',
+  'dequeuniversity.com/rules/axe/4.11/aria-deprecated-role': 'https://ciphera.net/learn/pulse/aria-deprecated-role',
+  'dequeuniversity.com/rules/axe/4.11/aria-dialog-name': 'https://ciphera.net/learn/pulse/aria-dialog-name',
+  'dequeuniversity.com/rules/axe/4.11/aria-hidden-body': 'https://ciphera.net/learn/pulse/aria-hidden-body',
+  'dequeuniversity.com/rules/axe/4.11/aria-hidden-focus': 'https://ciphera.net/learn/pulse/aria-hidden-focus',
+  'dequeuniversity.com/rules/axe/4.11/aria-input-field-name': 'https://ciphera.net/learn/pulse/aria-input-field-name',
+  'dequeuniversity.com/rules/axe/4.11/aria-meter-name': 'https://ciphera.net/learn/pulse/aria-meter-name',
+  'dequeuniversity.com/rules/axe/4.11/aria-progressbar-name': 'https://ciphera.net/learn/pulse/aria-progressbar-name',
+  'dequeuniversity.com/rules/axe/4.11/aria-prohibited-attr': 'https://ciphera.net/learn/pulse/aria-prohibited-attr',
+  'dequeuniversity.com/rules/axe/4.11/aria-required-attr': 'https://ciphera.net/learn/pulse/aria-required-attr',
+  'dequeuniversity.com/rules/axe/4.11/aria-required-children': 'https://ciphera.net/learn/pulse/aria-required-children',
+  'dequeuniversity.com/rules/axe/4.11/aria-required-parent': 'https://ciphera.net/learn/pulse/aria-required-parent',
+  'dequeuniversity.com/rules/axe/4.11/aria-roles': 'https://ciphera.net/learn/pulse/aria-roles',
+  'dequeuniversity.com/rules/axe/4.11/aria-text': 'https://ciphera.net/learn/pulse/aria-text',
+  'dequeuniversity.com/rules/axe/4.11/aria-toggle-field-name': 'https://ciphera.net/learn/pulse/aria-toggle-field-name',
+  'dequeuniversity.com/rules/axe/4.11/aria-tooltip-name': 'https://ciphera.net/learn/pulse/aria-tooltip-name',
+  'dequeuniversity.com/rules/axe/4.11/aria-treeitem-name': 'https://ciphera.net/learn/pulse/aria-treeitem-name',
+  'dequeuniversity.com/rules/axe/4.11/aria-valid-attr-value': 'https://ciphera.net/learn/pulse/aria-valid-attr-value',
+  'dequeuniversity.com/rules/axe/4.11/aria-valid-attr': 'https://ciphera.net/learn/pulse/aria-valid-attr',
+  'dequeuniversity.com/rules/axe/4.11/duplicate-id-aria': 'https://ciphera.net/learn/pulse/duplicate-id-aria',
+  'dequeuniversity.com/rules/axe/4.11/button-name': 'https://ciphera.net/learn/pulse/button-name',
+  'dequeuniversity.com/rules/axe/4.11/document-title': 'https://ciphera.net/learn/pulse/document-title',
+  'dequeuniversity.com/rules/axe/4.11/form-field-multiple-labels': 'https://ciphera.net/learn/pulse/form-field-multiple-labels',
+  'dequeuniversity.com/rules/axe/4.11/frame-title': 'https://ciphera.net/learn/pulse/frame-title',
+  'dequeuniversity.com/rules/axe/4.11/image-alt': 'https://ciphera.net/learn/pulse/image-alt',
+  'dequeuniversity.com/rules/axe/4.11/input-button-name': 'https://ciphera.net/learn/pulse/input-button-name',
+  'dequeuniversity.com/rules/axe/4.11/input-image-alt': 'https://ciphera.net/learn/pulse/input-image-alt',
+  'dequeuniversity.com/rules/axe/4.11/label': 'https://ciphera.net/learn/pulse/label',
+  'dequeuniversity.com/rules/axe/4.11/link-name': 'https://ciphera.net/learn/pulse/link-name',
+  'dequeuniversity.com/rules/axe/4.11/object-alt': 'https://ciphera.net/learn/pulse/object-alt',
+  'dequeuniversity.com/rules/axe/4.11/select-name': 'https://ciphera.net/learn/pulse/select-name',
+  'dequeuniversity.com/rules/axe/4.11/skip-link': 'https://ciphera.net/learn/pulse/skip-link',
+  'dequeuniversity.com/rules/axe/4.11/image-redundant-alt': 'https://ciphera.net/learn/pulse/image-redundant-alt',
+  'dequeuniversity.com/rules/axe/4.11/color-contrast': 'https://ciphera.net/learn/pulse/color-contrast',
+  'dequeuniversity.com/rules/axe/4.11/link-in-text-block': 'https://ciphera.net/learn/pulse/link-in-text-block',
+  'dequeuniversity.com/rules/axe/4.11/accesskeys': 'https://ciphera.net/learn/pulse/accesskeys',
+  'dequeuniversity.com/rules/axe/4.11/bypass': 'https://ciphera.net/learn/pulse/bypass',
+  'dequeuniversity.com/rules/axe/4.11/heading-order': 'https://ciphera.net/learn/pulse/heading-order',
+  'dequeuniversity.com/rules/axe/4.11/tabindex': 'https://ciphera.net/learn/pulse/tabindex',
+  'dequeuniversity.com/rules/axe/4.11/definition-list': 'https://ciphera.net/learn/pulse/definition-list',
+  'dequeuniversity.com/rules/axe/4.11/dlitem': 'https://ciphera.net/learn/pulse/dlitem',
+  'dequeuniversity.com/rules/axe/4.11/list': 'https://ciphera.net/learn/pulse/list',
+  'dequeuniversity.com/rules/axe/4.11/listitem': 'https://ciphera.net/learn/pulse/listitem',
+  'dequeuniversity.com/rules/axe/4.11/td-headers-attr': 'https://ciphera.net/learn/pulse/td-headers-attr',
+  'dequeuniversity.com/rules/axe/4.11/th-has-data-cells': 'https://ciphera.net/learn/pulse/th-has-data-cells',
+  'dequeuniversity.com/rules/axe/4.11/meta-refresh': 'https://ciphera.net/learn/pulse/meta-refresh',
+  'dequeuniversity.com/rules/axe/4.11/meta-viewport': 'https://ciphera.net/learn/pulse/meta-viewport',
+  'dequeuniversity.com/rules/axe/4.11/target-size': 'https://ciphera.net/learn/pulse/target-size',
+  'dequeuniversity.com/rules/axe/4.11/empty-heading': 'https://ciphera.net/learn/pulse/empty-heading',
+  'dequeuniversity.com/rules/axe/4.11/html-has-lang': 'https://ciphera.net/learn/pulse/html-has-lang',
+  'dequeuniversity.com/rules/axe/4.11/html-lang-valid': 'https://ciphera.net/learn/pulse/html-lang-valid',
+  'dequeuniversity.com/rules/axe/4.11/html-xml-lang-mismatch': 'https://ciphera.net/learn/pulse/html-xml-lang-mismatch',
+  'dequeuniversity.com/rules/axe/4.11/valid-lang': 'https://ciphera.net/learn/pulse/valid-lang',
+  'dequeuniversity.com/rules/axe/4.11/video-caption': 'https://ciphera.net/learn/pulse/video-caption',
 }
 
 function normalizeUrl(url: string): string {
-- 
2.49.1


From 80ee2fb614cfecbd9ba2cf317c137a43cecb8c92 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 18:23:40 +0100
Subject: [PATCH 394/428] fix: preserve referrer for ciphera.net learn links,
 keep noreferrer for external

---
 app/sites/[id]/pagespeed/page.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index c0eade6..f7ea5a6 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -786,12 +786,14 @@ function AuditDescription({ text }: { text: string }) {
       {parts.map((part, i) => {
         const match = part.match(/^\[([^\]]+)\]\(([^)]+)\)$/)
         if (match) {
+          const href = remapLearnUrl(match[2])
+          const isCiphera = href.startsWith('https://ciphera.net')
           return (
             <a
               key={i}
-              href={remapLearnUrl(match[2])}
+              href={href}
               target="_blank"
-              rel="noopener noreferrer"
+              rel={isCiphera ? 'noopener' : 'noopener noreferrer'}
               className="text-brand-orange hover:underline"
             >
               {match[1]}
-- 
2.49.1


From c2b448672c9723db03e45f59e85a262fdb35fca6 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 18:24:15 +0100
Subject: [PATCH 395/428] fix: also preserve referrer for pulse and
 pulse-staging domains

---
 app/sites/[id]/pagespeed/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/sites/[id]/pagespeed/page.tsx b/app/sites/[id]/pagespeed/page.tsx
index f7ea5a6..b216829 100644
--- a/app/sites/[id]/pagespeed/page.tsx
+++ b/app/sites/[id]/pagespeed/page.tsx
@@ -787,13 +787,13 @@ function AuditDescription({ text }: { text: string }) {
         const match = part.match(/^\[([^\]]+)\]\(([^)]+)\)$/)
         if (match) {
           const href = remapLearnUrl(match[2])
-          const isCiphera = href.startsWith('https://ciphera.net')
+          const isInternal = href.startsWith('https://ciphera.net') || href.startsWith('https://pulse.ciphera.net') || href.startsWith('https://pulse-staging.ciphera.net')
           return (
             <a
               key={i}
               href={href}
               target="_blank"
-              rel={isCiphera ? 'noopener' : 'noopener noreferrer'}
+              rel={isInternal ? 'noopener' : 'noopener noreferrer'}
               className="text-brand-orange hover:underline"
             >
               {match[1]}
-- 
2.49.1


From a9cf1484fd2b067ba1985bb21e73e6ceb6f356d4 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 21:50:16 +0100
Subject: [PATCH 396/428] fix: always show table-style price breakdown on
 checkout, even without country selected

---
 components/checkout/PlanSummary.tsx | 35 ++++++++++++++++-------------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/components/checkout/PlanSummary.tsx b/components/checkout/PlanSummary.tsx
index aa11707..e8fbc20 100644
--- a/components/checkout/PlanSummary.tsx
+++ b/components/checkout/PlanSummary.tsx
@@ -186,20 +186,7 @@ export default function PlanSummary({ plan, interval, limit, country, vatId, onC
 
       {/* Price breakdown */}
       <div className="pt-2 border-t border-neutral-800">
-        {!country ? (
-          <div className="flex items-baseline gap-2 flex-wrap">
-            <span className="text-3xl font-bold tracking-tight text-white">
-              &euro;{isYearly ? (baseDisplay / 12).toFixed(2) : baseDisplay.toFixed(0)}
-            </span>
-            <span className="text-neutral-400 text-sm">/mo</span>
-            <span className="text-neutral-500 text-sm">excl. VAT &middot; {tierLabel} pageviews</span>
-            {isYearly && (
-              <span className="rounded-full bg-brand-orange/15 px-2.5 py-0.5 text-xs font-medium text-brand-orange">
-                Save 1 month
-              </span>
-            )}
-          </div>
-        ) : vatLoading && !vatResult ? (
+        {vatLoading && !vatResult ? (
           <div className="flex items-center gap-2 text-sm text-neutral-400">
             <div className="h-4 w-4 animate-spin rounded-full border-2 border-neutral-600 border-t-white" />
             Calculating VAT...
@@ -229,7 +216,25 @@ export default function PlanSummary({ plan, interval, limit, country, vatId, onC
               <p className="text-xs text-neutral-500">&euro;{(parseFloat(vatResult.total_amount) / 12).toFixed(2)}/mo</p>
             )}
           </div>
-        ) : null}
+        ) : (
+          <div className="space-y-1.5 text-sm">
+            <div className="flex justify-between text-neutral-400">
+              <span>Subtotal ({tierLabel} pageviews)</span>
+              <span>&euro;{isYearly ? baseDisplay.toFixed(2) : baseDisplay.toFixed(2)}</span>
+            </div>
+            <div className="flex justify-between text-neutral-500 text-xs">
+              <span>VAT</span>
+              <span>Select country</span>
+            </div>
+            <div className="flex justify-between font-semibold text-white pt-1 border-t border-neutral-800">
+              <span>Total {isYearly ? '/year' : '/mo'} <span className="font-normal text-neutral-500 text-xs">excl. VAT</span></span>
+              <span>&euro;{isYearly ? baseDisplay.toFixed(2) : baseDisplay.toFixed(2)}</span>
+            </div>
+            {isYearly && (
+              <p className="text-xs text-neutral-500">&euro;{(baseDisplay / 12).toFixed(2)}/mo &middot; Save 1 month</p>
+            )}
+          </div>
+        )}
       </div>
     </div>
   )
-- 
2.49.1


From 6aea24f01834f28374378888e60ad13b7113cb92 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 22:04:09 +0100
Subject: [PATCH 397/428] =?UTF-8?q?fix:=20checkout=20UX=20=E2=80=94=20no?=
 =?UTF-8?q?=20auto-select=20payment=20method,=20stable=20price=20table=20d?=
 =?UTF-8?q?uring=20loading,=20add=20spacing=20before=20submit=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/checkout/PaymentForm.tsx | 11 ++++++++---
 components/checkout/PlanSummary.tsx | 15 +++++----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx
index 2fd49f3..039ead8 100644
--- a/components/checkout/PaymentForm.tsx
+++ b/components/checkout/PaymentForm.tsx
@@ -57,7 +57,7 @@ const mollieFieldBase =
 export default function PaymentForm({ plan, interval, limit, country, vatId }: PaymentFormProps) {
   const router = useRouter()
 
-  const [selectedMethod, setSelectedMethod] = useState('card')
+  const [selectedMethod, setSelectedMethod] = useState('')
   const [mollieReady, setMollieReady] = useState(false)
   const [mollieError, setMollieError] = useState(false)
   const [formError, setFormError] = useState<string | null>(null)
@@ -141,6 +141,11 @@ export default function PaymentForm({ plan, interval, limit, country, vatId }: P
     setSubmitted(true)
     setFormError(null)
 
+    if (!selectedMethod) {
+      setFormError('Please select a payment method')
+      return
+    }
+
     if (!country) {
       setFormError('Please select your country')
       return
@@ -319,8 +324,8 @@ export default function PaymentForm({ plan, interval, limit, country, vatId }: P
         {/* Submit */}
         <button
           type="submit"
-          disabled={submitting || (isCard && !mollieReady && !mollieError)}
-          className="w-full rounded-lg bg-brand-orange px-4 py-3 text-sm font-semibold text-white transition-colors hover:bg-brand-orange/90 disabled:opacity-50 disabled:cursor-not-allowed"
+          disabled={submitting || !selectedMethod || (isCard && !mollieReady && !mollieError)}
+          className="mt-4 w-full rounded-lg bg-brand-orange px-4 py-3 text-sm font-semibold text-white transition-colors hover:bg-brand-orange/90 disabled:opacity-50 disabled:cursor-not-allowed"
         >
           {submitting ? 'Processing...' : 'Start free trial'}
         </button>
diff --git a/components/checkout/PlanSummary.tsx b/components/checkout/PlanSummary.tsx
index e8fbc20..ac7ee97 100644
--- a/components/checkout/PlanSummary.tsx
+++ b/components/checkout/PlanSummary.tsx
@@ -185,13 +185,8 @@ export default function PlanSummary({ plan, interval, limit, country, vatId, onC
       </div>
 
       {/* Price breakdown */}
-      <div className="pt-2 border-t border-neutral-800">
-        {vatLoading && !vatResult ? (
-          <div className="flex items-center gap-2 text-sm text-neutral-400">
-            <div className="h-4 w-4 animate-spin rounded-full border-2 border-neutral-600 border-t-white" />
-            Calculating VAT...
-          </div>
-        ) : vatResult ? (
+      <div className={`pt-2 border-t border-neutral-800 transition-opacity duration-200 ${vatLoading ? 'opacity-50' : 'opacity-100'}`}>
+        {vatResult ? (
           <div className="space-y-1.5 text-sm">
             <div className="flex justify-between text-neutral-400">
               <span>Subtotal ({tierLabel} pageviews)</span>
@@ -220,15 +215,15 @@ export default function PlanSummary({ plan, interval, limit, country, vatId, onC
           <div className="space-y-1.5 text-sm">
             <div className="flex justify-between text-neutral-400">
               <span>Subtotal ({tierLabel} pageviews)</span>
-              <span>&euro;{isYearly ? baseDisplay.toFixed(2) : baseDisplay.toFixed(2)}</span>
+              <span>&euro;{baseDisplay.toFixed(2)}</span>
             </div>
             <div className="flex justify-between text-neutral-500 text-xs">
               <span>VAT</span>
-              <span>Select country</span>
+              <span>{vatLoading ? 'Calculating...' : 'Select country'}</span>
             </div>
             <div className="flex justify-between font-semibold text-white pt-1 border-t border-neutral-800">
               <span>Total {isYearly ? '/year' : '/mo'} <span className="font-normal text-neutral-500 text-xs">excl. VAT</span></span>
-              <span>&euro;{isYearly ? baseDisplay.toFixed(2) : baseDisplay.toFixed(2)}</span>
+              <span>&euro;{baseDisplay.toFixed(2)}</span>
             </div>
             {isYearly && (
               <p className="text-xs text-neutral-500">&euro;{(baseDisplay / 12).toFixed(2)}/mo &middot; Save 1 month</p>
-- 
2.49.1


From 23132a5194517662fbe16ff8d1d415bc87028685 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 22:12:29 +0100
Subject: [PATCH 398/428] fix: hide redirect text when no payment method is
 selected

---
 components/checkout/PaymentForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx
index 039ead8..baf8405 100644
--- a/components/checkout/PaymentForm.tsx
+++ b/components/checkout/PaymentForm.tsx
@@ -294,7 +294,7 @@ export default function PaymentForm({ plan, interval, limit, country, vatId }: P
 
         {/* Non-card info */}
         <AnimatePresence>
-          {!isCard && (
+          {selectedMethod && !isCard && (
             <motion.p
               initial={{ opacity: 0, height: 0 }}
               animate={{ opacity: 1, height: 'auto' }}
-- 
2.49.1


From 00423ee59965e23f95826d7ee209ca223c678200 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 22:17:04 +0100
Subject: [PATCH 399/428] fix: auto-scroll to submit button when card payment
 is selected

---
 components/checkout/PaymentForm.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx
index baf8405..87f3df0 100644
--- a/components/checkout/PaymentForm.tsx
+++ b/components/checkout/PaymentForm.tsx
@@ -65,6 +65,7 @@ export default function PaymentForm({ plan, interval, limit, country, vatId }: P
   const [submitted, setSubmitted] = useState(false)
   const [submitting, setSubmitting] = useState(false)
 
+  const submitRef = useRef<HTMLButtonElement>(null)
   const componentsRef = useRef<Record<string, MollieComponent | null>>({
     cardHolder: null,
     cardNumber: null,
@@ -223,7 +224,13 @@ export default function PaymentForm({ plan, interval, limit, country, vatId }: P
               <button
                 key={method.id}
                 type="button"
-                onClick={() => { setSelectedMethod(method.id); setFormError(null) }}
+                onClick={() => {
+                  setSelectedMethod(method.id)
+                  setFormError(null)
+                  if (method.id === 'card') {
+                    setTimeout(() => submitRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' }), 350)
+                  }
+                }}
                 className={`flex items-center justify-center rounded-xl border h-[44px] transition-all duration-200 ${
                   isSelected
                     ? 'border-brand-orange bg-brand-orange/5'
@@ -323,6 +330,7 @@ export default function PaymentForm({ plan, interval, limit, country, vatId }: P
 
         {/* Submit */}
         <button
+          ref={submitRef}
           type="submit"
           disabled={submitting || !selectedMethod || (isCard && !mollieReady && !mollieError)}
           className="mt-4 w-full rounded-lg bg-brand-orange px-4 py-3 text-sm font-semibold text-white transition-colors hover:bg-brand-orange/90 disabled:opacity-50 disabled:cursor-not-allowed"
-- 
2.49.1


From 0af290dc0b685df38a78bf66e44a3e2e1db467a5 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 23:16:57 +0100
Subject: [PATCH 400/428] feat: add 22 URL map entries for remaining Lighthouse
 audits

---
 lib/learn-links.ts | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/lib/learn-links.ts b/lib/learn-links.ts
index f99ea61..ad99867 100644
--- a/lib/learn-links.ts
+++ b/lib/learn-links.ts
@@ -133,6 +133,36 @@ const LEARN_URL_MAP: Record<string, string> = {
   'dequeuniversity.com/rules/axe/4.11/html-xml-lang-mismatch': 'https://ciphera.net/learn/pulse/html-xml-lang-mismatch',
   'dequeuniversity.com/rules/axe/4.11/valid-lang': 'https://ciphera.net/learn/pulse/valid-lang',
   'dequeuniversity.com/rules/axe/4.11/video-caption': 'https://ciphera.net/learn/pulse/video-caption',
+
+  // Best Practices General (batch 2)
+  'developer.chrome.com/docs/lighthouse/best-practices/trusted-types-xss': 'https://ciphera.net/learn/pulse/trusted-types-xss',
+  'developer.chrome.com/docs/lighthouse/best-practices/deprecations': 'https://ciphera.net/learn/pulse/deprecations',
+  'developer.chrome.com/docs/lighthouse/best-practices/errors-in-console': 'https://ciphera.net/learn/pulse/errors-in-console',
+  'developer.chrome.com/docs/lighthouse/best-practices/js-libraries': 'https://ciphera.net/learn/pulse/js-libraries',
+  'developer.chrome.com/docs/devtools/javascript/source-maps': 'https://ciphera.net/learn/pulse/valid-source-maps',
+
+  // Accessibility Best Practices (batch 2)
+  'dequeuniversity.com/rules/axe/4.11/aria-allowed-role': 'https://ciphera.net/learn/pulse/aria-allowed-role',
+  'dequeuniversity.com/rules/axe/4.11/identical-links-same-purpose': 'https://ciphera.net/learn/pulse/identical-links-same-purpose',
+  'dequeuniversity.com/rules/axe/4.11/landmark-one-main': 'https://ciphera.net/learn/pulse/landmark-one-main',
+  'dequeuniversity.com/rules/axe/4.11/table-duplicate-name': 'https://ciphera.net/learn/pulse/table-duplicate-name',
+
+  // Accessibility Experimental (batch 2)
+  'dequeuniversity.com/rules/axe/4.11/label-content-name-mismatch': 'https://ciphera.net/learn/pulse/label-content-name-mismatch',
+  'dequeuniversity.com/rules/axe/4.11/table-fake-caption': 'https://ciphera.net/learn/pulse/table-fake-caption',
+  'dequeuniversity.com/rules/axe/4.11/td-has-header': 'https://ciphera.net/learn/pulse/td-has-header',
+
+  // Accessibility Manual Audits
+  'developer.chrome.com/docs/lighthouse/accessibility/focusable-controls': 'https://ciphera.net/learn/pulse/focusable-controls',
+  'developer.chrome.com/docs/lighthouse/accessibility/interactive-element-affordance': 'https://ciphera.net/learn/pulse/interactive-element-affordance',
+  'developer.chrome.com/docs/lighthouse/accessibility/logical-tab-order': 'https://ciphera.net/learn/pulse/logical-tab-order',
+  'developer.chrome.com/docs/lighthouse/accessibility/visual-order-follows-dom': 'https://ciphera.net/learn/pulse/visual-order-follows-dom',
+  'developer.chrome.com/docs/lighthouse/accessibility/focus-traps': 'https://ciphera.net/learn/pulse/focus-traps',
+  'developer.chrome.com/docs/lighthouse/accessibility/managed-focus': 'https://ciphera.net/learn/pulse/managed-focus',
+  'developer.chrome.com/docs/lighthouse/accessibility/use-landmarks': 'https://ciphera.net/learn/pulse/use-landmarks',
+  'developer.chrome.com/docs/lighthouse/accessibility/offscreen-content-hidden': 'https://ciphera.net/learn/pulse/offscreen-content-hidden',
+  'developer.chrome.com/docs/lighthouse/accessibility/custom-controls-labels': 'https://ciphera.net/learn/pulse/custom-controls-labels',
+  'developer.chrome.com/docs/lighthouse/accessibility/custom-control-roles': 'https://ciphera.net/learn/pulse/custom-controls-roles',
 }
 
 function normalizeUrl(url: string): string {
-- 
2.49.1


From 94f9db9e5180c0457d0685100876c9788653e0fe Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 28 Mar 2026 00:05:51 +0100
Subject: [PATCH 401/428] =?UTF-8?q?feat:=20add=20Pulse=20to=20referrer=20r?=
 =?UTF-8?q?egistry=20=E2=80=94=20shows=20'Pulse'=20with=20logo=20for=20pul?=
 =?UTF-8?q?se.ciphera.net=20and=20pulse-staging.ciphera.net?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/utils/icons.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/lib/utils/icons.tsx b/lib/utils/icons.tsx
index 71b1f28..c768d64 100644
--- a/lib/utils/icons.tsx
+++ b/lib/utils/icons.tsx
@@ -174,6 +174,9 @@ const REFERRER_REGISTRY: Record<string, ReferrerEntry> = {
 
   // ── Browsers as referrers ──
   googlechrome: { display: 'Google Chrome', icon: () => <img src="/icons/browsers/chrome.svg" alt="Chrome" width={16} height={16} className="inline-block" />, hostnames: ['googlechrome.github.io'] },
+
+  // ── Ciphera products ──
+  pulse:       { display: 'Pulse',        icon: () => <img src="/pulse_icon_no_margins.png" alt="Pulse" width={16} height={16} className="inline-block" />, hostnames: ['pulse.ciphera.net', 'pulse-staging.ciphera.net'] },
 }
 
 // ── Derived lookup maps (built once at module load) ──
-- 
2.49.1


From 8c0700f40646eeb8563bd210a476f6442a9d5f49 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 28 Mar 2026 00:24:04 +0100
Subject: [PATCH 402/428] fix: filter by all merged referrers when clicking a
 group (e.g. Pulse covers both prod and staging)

---
 components/dashboard/TopReferrers.tsx | 2 +-
 lib/utils/icons.tsx                   | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/components/dashboard/TopReferrers.tsx b/components/dashboard/TopReferrers.tsx
index 7fb325f..44c0569 100644
--- a/components/dashboard/TopReferrers.tsx
+++ b/components/dashboard/TopReferrers.tsx
@@ -125,7 +125,7 @@ export default function TopReferrers({ referrers, collectReferrers = true, siteI
                 return (
                   <div
                     key={ref.referrer}
-                    onClick={() => onFilter?.({ dimension: 'referrer', operator: 'is', values: [ref.referrer] })}
+                    onClick={() => onFilter?.({ dimension: 'referrer', operator: 'is', values: ref.allReferrers ?? [ref.referrer] })}
                     className={`relative flex items-center justify-between h-9 group hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 rounded-lg px-2 -mx-2 transition-colors${onFilter ? ' cursor-pointer' : ''}`}
                   >
                     <div
diff --git a/lib/utils/icons.tsx b/lib/utils/icons.tsx
index c768d64..f2c39b7 100644
--- a/lib/utils/icons.tsx
+++ b/lib/utils/icons.tsx
@@ -322,15 +322,16 @@ export function getReferrerFavicon(referrer: string): string | null {
  */
 export function mergeReferrersByDisplayName(
   items: Array<{ referrer: string; pageviews: number }>
-): Array<{ referrer: string; pageviews: number }> {
-  const byDisplayName = new Map<string, { referrer: string; pageviews: number; maxSingle: number }>()
+): Array<{ referrer: string; pageviews: number; allReferrers: string[] }> {
+  const byDisplayName = new Map<string, { referrer: string; pageviews: number; maxSingle: number; allReferrers: Set<string> }>()
   for (const ref of items) {
     const name = getReferrerDisplayName(ref.referrer)
     const existing = byDisplayName.get(name)
     if (!existing) {
-      byDisplayName.set(name, { referrer: ref.referrer, pageviews: ref.pageviews, maxSingle: ref.pageviews })
+      byDisplayName.set(name, { referrer: ref.referrer, pageviews: ref.pageviews, maxSingle: ref.pageviews, allReferrers: new Set([ref.referrer]) })
     } else {
       existing.pageviews += ref.pageviews
+      existing.allReferrers.add(ref.referrer)
       if (ref.pageviews > existing.maxSingle) {
         existing.maxSingle = ref.pageviews
         existing.referrer = ref.referrer
@@ -338,6 +339,6 @@ export function mergeReferrersByDisplayName(
     }
   }
   return Array.from(byDisplayName.values())
-    .map(({ referrer, pageviews }) => ({ referrer, pageviews }))
+    .map(({ referrer, pageviews, allReferrers }) => ({ referrer, pageviews, allReferrers: Array.from(allReferrers) }))
     .sort((a, b) => b.pageviews - a.pageviews)
 }
-- 
2.49.1


From 07401a4ce230faeaebecf23b874d9c96ab247a0b Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 28 Mar 2026 00:48:05 +0100
Subject: [PATCH 403/428] fix: use accessible button color tokens for WCAG AA
 contrast

Swap bg-brand-orange to bg-brand-orange-button on all interactive
buttons with white text. Decorative uses unchanged. Bumps
@ciphera-net/ui to 0.3.6.
---
 app/integrations/page.tsx                  | 6 +++---
 app/sites/[id]/cdn/page.tsx                | 2 +-
 app/sites/[id]/search/page.tsx             | 2 +-
 components/checkout/PaymentForm.tsx        | 2 +-
 components/dashboard/AddFilterDropdown.tsx | 4 ++--
 components/dashboard/Chart.tsx             | 2 +-
 components/dashboard/EventProperties.tsx   | 2 +-
 components/dashboard/FilterBar.tsx         | 2 +-
 components/funnels/BreakdownDrawer.tsx     | 2 +-
 components/funnels/FunnelForm.tsx          | 6 +++---
 package-lock.json                          | 8 ++++----
 package.json                               | 2 +-
 12 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/app/integrations/page.tsx b/app/integrations/page.tsx
index 8582f22..dccc121 100644
--- a/app/integrations/page.tsx
+++ b/app/integrations/page.tsx
@@ -188,7 +188,7 @@ export default function IntegrationsPage() {
             onClick={() => handleCategoryClick('all')}
             className={`px-4 py-1.5 rounded-full text-sm font-medium transition-all ${
               activeCategory === 'all'
-                ? 'bg-brand-orange text-white shadow-sm'
+                ? 'bg-brand-orange-button text-white shadow-sm'
                 : 'bg-neutral-800 text-neutral-400 hover:bg-neutral-700'
             }`}
           >
@@ -200,7 +200,7 @@ export default function IntegrationsPage() {
               onClick={() => handleCategoryClick(cat)}
               className={`px-4 py-1.5 rounded-full text-sm font-medium transition-all ${
                 activeCategory === cat
-                  ? 'bg-brand-orange text-white shadow-sm'
+                  ? 'bg-brand-orange-button text-white shadow-sm'
                   : 'bg-neutral-800 text-neutral-400 hover:bg-neutral-700'
               }`}
             >
@@ -335,7 +335,7 @@ export default function IntegrationsPage() {
               </p>
               <a
                 href="mailto:support@ciphera.net"
-                className="inline-flex items-center gap-2 px-5 py-2.5 bg-brand-orange text-white font-medium rounded-lg hover:bg-brand-orange/90 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
+                className="inline-flex items-center gap-2 px-5 py-2.5 bg-brand-orange-button text-white font-medium rounded-lg hover:bg-brand-orange/90 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
               >
                 Request Integration
               </a>
diff --git a/app/sites/[id]/cdn/page.tsx b/app/sites/[id]/cdn/page.tsx
index 25e2e68..7b97e37 100644
--- a/app/sites/[id]/cdn/page.tsx
+++ b/app/sites/[id]/cdn/page.tsx
@@ -187,7 +187,7 @@ export default function CDNPage() {
           </p>
           <button
             onClick={() => openUnifiedSettings({ context: 'site', tab: 'integrations' })}
-            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-brand-orange hover:bg-brand-orange/90 text-white text-sm font-medium transition-colors cursor-pointer"
+            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-brand-orange-button hover:bg-brand-orange-button-hover text-white text-sm font-medium transition-colors cursor-pointer"
           >
             Connect in Settings
             <ArrowSquareOut size={16} weight="bold" />
diff --git a/app/sites/[id]/search/page.tsx b/app/sites/[id]/search/page.tsx
index 4f1dd5f..65f15a8 100644
--- a/app/sites/[id]/search/page.tsx
+++ b/app/sites/[id]/search/page.tsx
@@ -175,7 +175,7 @@ export default function SearchConsolePage() {
           </p>
           <button
             onClick={() => openUnifiedSettings({ context: 'site', tab: 'integrations' })}
-            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-brand-orange hover:bg-brand-orange/90 text-white text-sm font-medium transition-colors cursor-pointer"
+            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-brand-orange-button hover:bg-brand-orange-button-hover text-white text-sm font-medium transition-colors cursor-pointer"
           >
             Connect in Settings
             <ArrowSquareOut size={16} weight="bold" />
diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx
index 87f3df0..069d341 100644
--- a/components/checkout/PaymentForm.tsx
+++ b/components/checkout/PaymentForm.tsx
@@ -333,7 +333,7 @@ export default function PaymentForm({ plan, interval, limit, country, vatId }: P
           ref={submitRef}
           type="submit"
           disabled={submitting || !selectedMethod || (isCard && !mollieReady && !mollieError)}
-          className="mt-4 w-full rounded-lg bg-brand-orange px-4 py-3 text-sm font-semibold text-white transition-colors hover:bg-brand-orange/90 disabled:opacity-50 disabled:cursor-not-allowed"
+          className="mt-4 w-full rounded-lg bg-brand-orange-button px-4 py-3 text-sm font-semibold text-white transition-colors hover:bg-brand-orange-button-hover disabled:opacity-50 disabled:cursor-not-allowed"
         >
           {submitting ? 'Processing...' : 'Start free trial'}
         </button>
diff --git a/components/dashboard/AddFilterDropdown.tsx b/components/dashboard/AddFilterDropdown.tsx
index 74c835c..4840d46 100644
--- a/components/dashboard/AddFilterDropdown.tsx
+++ b/components/dashboard/AddFilterDropdown.tsx
@@ -164,7 +164,7 @@ export default function AddFilterDropdown({ onAdd, suggestions = {}, onFetchSugg
                     onClick={() => setOperator(op)}
                     className={`px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors cursor-pointer ${
                       operator === op
-                        ? 'bg-brand-orange text-white'
+                        ? 'bg-brand-orange-button text-white'
                         : 'bg-neutral-800 text-neutral-400 hover:bg-neutral-700'
                     }`}
                   >
@@ -219,7 +219,7 @@ export default function AddFilterDropdown({ onAdd, suggestions = {}, onFetchSugg
                 <div className="px-3 py-3 border-t border-neutral-800">
                   <button
                     onClick={handleSubmitCustom}
-                    className="w-full px-3 py-2 text-sm font-medium bg-brand-orange text-white rounded-lg hover:bg-brand-orange/90 transition-colors cursor-pointer"
+                    className="w-full px-3 py-2 text-sm font-medium bg-brand-orange-button text-white rounded-lg hover:bg-brand-orange/90 transition-colors cursor-pointer"
                   >
                     Filter by &ldquo;{search.trim()}&rdquo;
                   </button>
diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index 700caa6..0a11cb9 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -674,7 +674,7 @@ export default function Chart({
                   type="button"
                   disabled={!annotationForm.text.trim() || !annotationForm.date || saving}
                   onClick={handleSaveAnnotation}
-                  className="px-3 py-1.5 text-xs font-medium text-white bg-brand-orange hover:bg-brand-orange/90 rounded-lg disabled:opacity-50 cursor-pointer"
+                  className="px-3 py-1.5 text-xs font-medium text-white bg-brand-orange-button hover:bg-brand-orange-button-hover rounded-lg disabled:opacity-50 cursor-pointer"
                 >
                   {saving ? 'Saving...' : annotationForm.editingId ? 'Save' : 'Add'}
                 </button>
diff --git a/components/dashboard/EventProperties.tsx b/components/dashboard/EventProperties.tsx
index 3d8033e..1a74f86 100644
--- a/components/dashboard/EventProperties.tsx
+++ b/components/dashboard/EventProperties.tsx
@@ -70,7 +70,7 @@ export default function EventProperties({ siteId, eventName, dateRange, onClose
                 onClick={() => setSelectedKey(k.key)}
                 className={`px-3 py-1 text-xs font-medium rounded-full transition-colors cursor-pointer ${
                   selectedKey === k.key
-                    ? 'bg-brand-orange text-white'
+                    ? 'bg-brand-orange-button text-white'
                     : 'bg-neutral-800 text-neutral-400 hover:bg-neutral-700'
                 }`}
               >
diff --git a/components/dashboard/FilterBar.tsx b/components/dashboard/FilterBar.tsx
index 697396d..fd408ee 100644
--- a/components/dashboard/FilterBar.tsx
+++ b/components/dashboard/FilterBar.tsx
@@ -17,7 +17,7 @@ export default function FilterBar({ filters, onRemove, onClear }: FilterBarProps
         <button
           key={`${f.dimension}-${f.operator}-${f.values.join(',')}`}
           onClick={() => onRemove(i)}
-          className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg bg-brand-orange text-white hover:bg-brand-orange/80 transition-colors cursor-pointer group"
+          className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg bg-brand-orange-button text-white hover:bg-brand-orange-button-hover transition-colors cursor-pointer group"
           title={`Remove filter: ${filterLabel(f)}`}
         >
           <span>{filterLabel(f)}</span>
diff --git a/components/funnels/BreakdownDrawer.tsx b/components/funnels/BreakdownDrawer.tsx
index 1f8bbe1..0e6ce43 100644
--- a/components/funnels/BreakdownDrawer.tsx
+++ b/components/funnels/BreakdownDrawer.tsx
@@ -68,7 +68,7 @@ export default function BreakdownDrawer({ siteId, funnelId, stepIndex, stepName,
               onClick={() => setActiveDimension(dim)}
               className={`px-3 py-1.5 text-xs font-medium rounded-lg whitespace-nowrap transition-colors ${
                 activeDimension === dim
-                  ? 'bg-brand-orange text-white'
+                  ? 'bg-brand-orange-button text-white'
                   : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-500 hover:bg-neutral-200 dark:hover:bg-neutral-700'
               }`}
             >
diff --git a/components/funnels/FunnelForm.tsx b/components/funnels/FunnelForm.tsx
index a755e21..1b8b864 100644
--- a/components/funnels/FunnelForm.tsx
+++ b/components/funnels/FunnelForm.tsx
@@ -296,7 +296,7 @@ export default function FunnelForm({ siteId, initialData, onSubmit, submitLabel,
                         onClick={() => handleUpdateStep(index, 'category', 'page')}
                         className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ${
                           category === 'page'
-                            ? 'bg-brand-orange text-white'
+                            ? 'bg-brand-orange-button text-white'
                             : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
                         }`}
                       >
@@ -307,7 +307,7 @@ export default function FunnelForm({ siteId, initialData, onSubmit, submitLabel,
                         onClick={() => handleUpdateStep(index, 'category', 'event')}
                         className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ${
                           category === 'event'
-                            ? 'bg-brand-orange text-white'
+                            ? 'bg-brand-orange-button text-white'
                             : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
                         }`}
                       >
@@ -470,7 +470,7 @@ export default function FunnelForm({ siteId, initialData, onSubmit, submitLabel,
                 }}
                 className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ${
                   windowValue === preset.value && windowUnit === preset.unit
-                    ? 'bg-brand-orange text-white'
+                    ? 'bg-brand-orange-button text-white'
                     : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
                 }`}
               >
diff --git a/package-lock.json b/package-lock.json
index dcbd66e..5436332 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "pulse-frontend",
       "version": "0.15.0-alpha",
       "dependencies": {
-        "@ciphera-net/ui": "^0.3.4",
+        "@ciphera-net/ui": "^0.3.6",
         "@ducanh2912/next-pwa": "^10.2.9",
         "@icons-pack/react-simple-icons": "^13.13.0",
         "@phosphor-icons/react": "^2.1.10",
@@ -1682,9 +1682,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.3.4",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.3.4/22dd1c925f48fe78dbe286a714aed7c209dd2034",
-      "integrity": "sha512-TwDelE6naZvKhy6Id+IMinXn7R4WLBsN8CyScpOcOgNSmbSwdHNbkHE4kKUK8iIH/dlppRZzI2cCfwLOgfg9sg==",
+      "version": "0.3.6",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.3.6/886a376c94508da1c8b499404e9bf97ea37c9ba3",
+      "integrity": "sha512-Utio35+w3/Yso3d/6ebobmWJOvF7VFS3GQRq7/FbpEYqWxpI2VrxUPoa0zQ9x5aCgXKabdQj+88Og+0pixQVJw==",
       "dependencies": {
         "@phosphor-icons/react": "^2.1.10",
         "class-variance-authority": "^0.7.1",
diff --git a/package.json b/package.json
index edc16f7..6fa2eb7 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.3.4",
+    "@ciphera-net/ui": "^0.3.6",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@icons-pack/react-simple-icons": "^13.13.0",
     "@phosphor-icons/react": "^2.1.10",
-- 
2.49.1


From 9c5a47ff3ab20ccb401ba4d1af59b47c84d86cac Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 28 Mar 2026 14:45:02 +0100
Subject: [PATCH 404/428] feat(billing): update invoice list with real data,
 PDF download, and VAT breakdown

---
 .../unified/tabs/WorkspaceBillingTab.tsx      | 43 ++++++++++++-------
 lib/api/billing.ts                            | 27 ++++++++++--
 2 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/components/settings/unified/tabs/WorkspaceBillingTab.tsx b/components/settings/unified/tabs/WorkspaceBillingTab.tsx
index 93f5ab7..1785d90 100644
--- a/components/settings/unified/tabs/WorkspaceBillingTab.tsx
+++ b/components/settings/unified/tabs/WorkspaceBillingTab.tsx
@@ -3,9 +3,9 @@
 import { useState, useEffect } from 'react'
 import Link from 'next/link'
 import { Button, toast, Spinner, Modal } from '@ciphera-net/ui'
-import { CreditCard, ArrowSquareOut } from '@phosphor-icons/react'
+import { CreditCard, ArrowSquareOut, DownloadSimple } from '@phosphor-icons/react'
 import { useSubscription } from '@/lib/swr/dashboard'
-import { updatePaymentMethod, cancelSubscription, resumeSubscription, getOrders, type Order } from '@/lib/api/billing'
+import { updatePaymentMethod, cancelSubscription, resumeSubscription, getInvoices, downloadInvoicePDF, type Invoice } from '@/lib/api/billing'
 import { formatDateLong, formatDate } from '@/lib/utils/formatDate'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
 
@@ -13,16 +13,12 @@ export default function WorkspaceBillingTab() {
   const { data: subscription, isLoading, mutate } = useSubscription()
   const [cancelling, setCancelling] = useState(false)
   const [showCancelConfirm, setShowCancelConfirm] = useState(false)
-  const [orders, setOrders] = useState<Order[]>([])
+  const [invoices, setInvoices] = useState<Invoice[]>([])
 
   useEffect(() => {
-    getOrders().then(setOrders).catch(() => {})
+    getInvoices().then(setInvoices).catch(() => {})
   }, [])
 
-  const formatAmount = (amount: string, currency: string) => {
-    return new Intl.NumberFormat('en-GB', { style: 'currency', currency: currency || 'EUR' }).format(parseFloat(amount))
-  }
-
   const handleManageBilling = async () => {
     try {
       const { url } = await updatePaymentMethod()
@@ -197,19 +193,34 @@ export default function WorkspaceBillingTab() {
       </Modal>
 
       {/* Recent Invoices */}
-      {orders.length > 0 && (
+      {invoices.length > 0 && (
         <div className="space-y-2 pt-6 border-t border-neutral-800">
           <h4 className="text-sm font-medium text-neutral-300">Recent Invoices</h4>
           <div className="space-y-1">
-            {orders.map(order => (
-              <div key={order.id} className="flex items-center justify-between p-3 rounded-lg border border-neutral-800 text-sm">
+            {invoices.map(invoice => (
+              <div key={invoice.id} className="flex items-center justify-between p-3 rounded-lg border border-neutral-800 text-sm">
                 <div className="flex items-center gap-3">
-                  <span className="text-neutral-300">{formatDate(new Date(order.created_at))}</span>
-                  <span className="text-white font-medium">{formatAmount(order.amount, order.currency)}</span>
+                  <span className="text-neutral-400 font-mono text-xs">{invoice.invoice_number ?? '—'}</span>
+                  <span className="text-neutral-300">{formatDate(new Date(invoice.created_at))}</span>
+                  <span className="text-white font-medium">
+                    {new Intl.NumberFormat('en-GB', { style: 'currency', currency: invoice.currency || 'EUR' }).format(invoice.total_cents / 100)}
+                  </span>
+                  <span className="text-neutral-500 text-xs">
+                    (incl. {new Intl.NumberFormat('en-GB', { style: 'currency', currency: invoice.currency || 'EUR' }).format(invoice.vat_cents / 100)} VAT)
+                  </span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className={`text-xs px-2 py-0.5 rounded-full ${invoice.status === 'sent' ? 'bg-green-900/30 text-green-400' : 'bg-neutral-800 text-neutral-400'}`}>
+                    {invoice.status === 'sent' ? 'Paid' : invoice.status}
+                  </span>
+                  <button
+                    onClick={() => downloadInvoicePDF(invoice.id).catch(() => toast.error('PDF not available yet'))}
+                    className="p-1.5 rounded-md hover:bg-neutral-800 text-neutral-400 hover:text-white transition-colors"
+                    title="Download PDF"
+                  >
+                    <DownloadSimple size={16} />
+                  </button>
                 </div>
-                <span className={`text-xs px-2 py-0.5 rounded-full ${order.status === 'paid' ? 'bg-green-900/30 text-green-400' : 'bg-neutral-800 text-neutral-400'}`}>
-                  {order.status === 'paid' ? 'Paid' : order.status}
-                </span>
               </div>
             ))}
           </div>
diff --git a/lib/api/billing.ts b/lib/api/billing.ts
index 48f3ed7..6dc3572 100644
--- a/lib/api/billing.ts
+++ b/lib/api/billing.ts
@@ -91,16 +91,35 @@ export async function updatePaymentMethod(): Promise<{ url: string }> {
   })
 }
 
-export interface Order {
+export interface Invoice {
   id: string
-  amount: string
+  invoice_number: string | null
+  amount_cents: number
+  vat_cents: number
+  total_cents: number
   currency: string
+  description: string
   status: string
   created_at: string
 }
 
-export async function getOrders(): Promise<Order[]> {
-  return apiRequest<Order[]>('/api/billing/invoices')
+export async function getInvoices(): Promise<Invoice[]> {
+  const res = await apiRequest<{ invoices: Invoice[] }>('/api/billing/invoices')
+  return res.invoices ?? []
+}
+
+export async function downloadInvoicePDF(invoiceId: string): Promise<void> {
+  const res = await fetch('/api/billing/invoices/' + invoiceId + '/pdf', {
+    credentials: 'include',
+  })
+  if (!res.ok) throw new Error('Failed to download invoice PDF')
+  const blob = await res.blob()
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = 'invoice.pdf'
+  a.click()
+  URL.revokeObjectURL(url)
 }
 
 export interface VATResult {
-- 
2.49.1


From 05d183fe2c38cf77a40a7a0d259054ba5737ac18 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 28 Mar 2026 15:53:50 +0100
Subject: [PATCH 405/428] fix(billing): use full API_URL for PDF download
 endpoint

---
 lib/api/billing.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/lib/api/billing.ts b/lib/api/billing.ts
index 6dc3572..f915673 100644
--- a/lib/api/billing.ts
+++ b/lib/api/billing.ts
@@ -109,7 +109,8 @@ export async function getInvoices(): Promise<Invoice[]> {
 }
 
 export async function downloadInvoicePDF(invoiceId: string): Promise<void> {
-  const res = await fetch('/api/billing/invoices/' + invoiceId + '/pdf', {
+  const { API_URL } = await import('./client')
+  const res = await fetch(API_URL + '/api/billing/invoices/' + invoiceId + '/pdf', {
     credentials: 'include',
   })
   if (!res.ok) throw new Error('Failed to download invoice PDF')
-- 
2.49.1


From 07546576c18788af81567081ece36ad441cfc4fb Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 28 Mar 2026 18:57:57 +0100
Subject: [PATCH 406/428] fix(pricing): default slider to first tier (10k)
 instead of third (100k)

---
 components/PricingSection.tsx | 2 +-
 lib/plans.ts                  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/PricingSection.tsx b/components/PricingSection.tsx
index 053f94b..3047dd7 100644
--- a/components/PricingSection.tsx
+++ b/components/PricingSection.tsx
@@ -105,7 +105,7 @@ export default function PricingSection() {
   const searchParams = useSearchParams()
   const router = useRouter()
   const [isYearly, setIsYearly] = useState(false)
-  const [sliderIndex, setSliderIndex] = useState(2) // Default to 100k (index 2)
+  const [sliderIndex, setSliderIndex] = useState(0) // Default to 10k (index 0)
   const [loadingPlan, setLoadingPlan] = useState<string | null>(null)
   const { user } = useAuth()
 
diff --git a/lib/plans.ts b/lib/plans.ts
index 0707111..1056804 100644
--- a/lib/plans.ts
+++ b/lib/plans.ts
@@ -33,11 +33,11 @@ export const TRAFFIC_TIERS = [
 
 export function getTierIndexForLimit(limit: number): number {
   const idx = TRAFFIC_TIERS.findIndex((t) => t.value === limit)
-  return idx >= 0 ? idx : 2
+  return idx >= 0 ? idx : 0
 }
 
 export function getLimitForTierIndex(index: number): number {
-  if (index < 0 || index >= TRAFFIC_TIERS.length) return 100000
+  if (index < 0 || index >= TRAFFIC_TIERS.length) return 10000
   return TRAFFIC_TIERS[index].value
 }
 
-- 
2.49.1


From a6054469eec62564bd215978679f588f27e0e6f6 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 28 Mar 2026 19:12:45 +0100
Subject: [PATCH 407/428] feat: wrap home page in DashboardShell, remove stat
 cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Home page now uses the same sidebar layout as dashboard pages.
Sidebar shows simplified home mode (logo, app switcher, profile)
without site-specific nav groups. Stat cards removed — plan info
lives in settings, site count is self-evident from the list.
---
 app/layout-content.tsx                  |  5 +-
 app/page.tsx                            | 94 +++----------------------
 components/dashboard/DashboardShell.tsx | 15 ++--
 components/dashboard/Sidebar.tsx        | 54 +++++++-------
 4 files changed, 49 insertions(+), 119 deletions(-)

diff --git a/app/layout-content.tsx b/app/layout-content.tsx
index 745e0e9..c321a0c 100644
--- a/app/layout-content.tsx
+++ b/app/layout-content.tsx
@@ -95,6 +95,7 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
   const showOfflineBar = Boolean(auth.user && !isOnline)
   // Site pages use DashboardShell with full sidebar — no Header needed
   const isSitePage = pathname.startsWith('/sites/') && pathname !== '/sites/new'
+  const isHomePage = pathname === '/'
   // Checkout page has its own minimal layout — no app header/footer
   const isCheckoutPage = pathname.startsWith('/checkout')
 
@@ -103,13 +104,13 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
   }
 
   // While auth is loading on a site or checkout page, render nothing to prevent flash of public header
-  if (auth.loading && (isSitePage || isCheckoutPage)) {
+  if (auth.loading && (isSitePage || isCheckoutPage || isHomePage)) {
     return null
   }
 
   // Authenticated site pages: full sidebar layout
   // DashboardShell inside children handles everything
-  if (isAuthenticated && isSitePage) {
+  if (isAuthenticated && (isSitePage || isHomePage)) {
     return (
       <>
         {showOfflineBar && <OfflineBanner isOnline={isOnline} />}
diff --git a/app/page.tsx b/app/page.tsx
index 22c4b7c..bd565ac 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -23,19 +23,16 @@ import PulseFAQ from '@/components/marketing/PulseFAQ'
 import { toast } from '@ciphera-net/ui'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { getSitesLimitForPlan } from '@/lib/plans'
-import { formatDate } from '@/lib/utils/formatDate'
-import { useUnifiedSettings } from '@/lib/unified-settings-context'
+import DashboardShell from '@/components/dashboard/DashboardShell'
 
 type SiteStatsMap = Record<string, { stats: Stats }>
 
 export default function HomePage() {
   const { user, loading: authLoading } = useAuth()
-  const { openUnifiedSettings } = useUnifiedSettings()
   const [sites, setSites] = useState<Site[]>([])
   const [sitesLoading, setSitesLoading] = useState(true)
   const [siteStats, setSiteStats] = useState<SiteStatsMap>({})
   const [subscription, setSubscription] = useState<SubscriptionDetails | null>(null)
-  const [subscriptionLoading, setSubscriptionLoading] = useState(false)
   const [showFinishSetupBanner, setShowFinishSetupBanner] = useState(true)
   const [deleteModalSite, setDeleteModalSite] = useState<Site | null>(null)
   const [deletedSites, setDeletedSites] = useState<Site[]>([])
@@ -116,13 +113,10 @@ export default function HomePage() {
 
   const loadSubscription = async () => {
     try {
-      setSubscriptionLoading(true)
       const sub = await getSubscription()
       setSubscription(sub)
     } catch {
       setSubscription(null)
-    } finally {
-      setSubscriptionLoading(false)
     }
   }
 
@@ -236,7 +230,8 @@ export default function HomePage() {
   }
 
   return (
-    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
+    <DashboardShell siteId={null}>
+      <div className="px-6">
       {showFinishSetupBanner && (
         <div className="mb-6 flex items-center justify-between gap-4 rounded-2xl border border-brand-orange/30 bg-brand-orange/10 px-4 py-3">
           <p className="text-sm text-neutral-300">
@@ -263,10 +258,10 @@ export default function HomePage() {
         </div>
       )}
 
-      <div className="mb-8 flex items-center justify-between">
+      <div className="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-bold text-white">Your Sites</h1>
-          <p className="mt-1 text-sm text-neutral-400">Manage your analytics sites and view insights.</p>
+          <h1 className="text-lg font-semibold text-neutral-200 mb-1">Your Sites</h1>
+          <p className="text-sm text-neutral-400">Manage your analytics sites and view insights.</p>
         </div>
         {(() => {
           const siteLimit = getSitesLimitForPlan(subscription?.plan_id)
@@ -299,80 +294,6 @@ export default function HomePage() {
         )}
       </div>
 
-      {/* * Global Overview - min-h ensures no layout shift when Plan & usage loads */}
-      <div className="mb-8 grid grid-cols-1 gap-4 sm:grid-cols-3">
-        <div className="flex min-h-[100px] sm:min-h-[160px] flex-col rounded-2xl border border-neutral-800 bg-neutral-900 p-4">
-          <p className="text-sm text-neutral-400">Total Sites</p>
-          <p className="text-2xl font-bold text-white">{sites.length}</p>
-        </div>
-        <div className="flex min-h-[100px] sm:min-h-[160px] flex-col rounded-2xl border border-neutral-800 bg-neutral-900 p-4">
-          <p className="text-sm text-neutral-400">Total Visitors (24h)</p>
-          <p className="text-2xl font-bold text-white">
-            {sites.length === 0 || Object.keys(siteStats).length < sites.length
-              ? '--'
-              : Object.values(siteStats).reduce((sum, { stats }) => sum + (stats?.visitors ?? 0), 0).toLocaleString()}
-          </p>
-        </div>
-        <div className="flex min-h-[160px] flex-col rounded-2xl border border-neutral-800 bg-brand-orange/10 p-4">
-          <p className="text-sm text-brand-orange">Plan & usage</p>
-          {subscriptionLoading ? (
-            <div className="animate-pulse space-y-2">
-              <div className="h-6 w-24 rounded bg-brand-orange/20" />
-              <div className="h-4 w-full rounded bg-brand-orange/20" />
-              <div className="h-4 w-3/4 rounded bg-brand-orange/20" />
-              <div className="h-4 w-20 rounded bg-brand-orange/20 pt-2" />
-            </div>
-          ) : subscription ? (
-            <>
-              <p className="text-lg font-bold text-brand-orange">
-                {(() => {
-                  const raw =
-                    subscription.plan_id?.startsWith('price_')
-                      ? 'Pro'
-                      : subscription.plan_id === 'free' || !subscription.plan_id
-                        ? 'Free'
-                        : subscription.plan_id
-                  const label = raw === 'Free' || raw === 'Pro' ? raw : raw.charAt(0).toUpperCase() + raw.slice(1)
-                  return `${label} Plan`
-                })()}
-              </p>
-              {(typeof subscription.sites_count === 'number' || (subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number') || (!subscription.cancel_at_period_end && (subscription.subscription_status === 'active' || subscription.subscription_status === 'trialing'))) && (
-                <p className="text-sm text-neutral-400 mt-1">
-                  {typeof subscription.sites_count === 'number' && (
-                    <span>Sites: {(() => {
-                      const limit = getSitesLimitForPlan(subscription.plan_id)
-                      return limit != null && typeof subscription.sites_count === 'number' ? `${subscription.sites_count}/${limit}` : subscription.sites_count
-                    })()}</span>
-                  )}
-                  {typeof subscription.sites_count === 'number' && (subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number') && ' · '}
-                  {subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number' && (
-                    <span>Pageviews: {subscription.pageview_usage.toLocaleString()}/{subscription.pageview_limit.toLocaleString()}</span>
-                  )}
-                  {!subscription.cancel_at_period_end && (subscription.subscription_status === 'active' || subscription.subscription_status === 'trialing') && subscription.current_period_end && (
-                    <span className="block mt-1">
-                      Renews {formatDate(new Date(subscription.current_period_end))}
-                    </span>
-                  )}
-                </p>
-              )}
-              <div className="mt-2 flex gap-2">
-                {subscription.has_payment_method ? (
-                  <button onClick={() => openUnifiedSettings({ context: 'workspace', tab: 'billing' })} className="text-sm font-medium text-brand-orange hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:rounded cursor-pointer">
-                    Manage billing
-                  </button>
-                ) : (
-                  <Link href="/pricing" className="text-sm font-medium text-brand-orange hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:rounded">
-                    Upgrade
-                  </Link>
-                )}
-              </div>
-            </>
-          ) : (
-            <p className="text-lg font-bold text-brand-orange">Free Plan</p>
-          )}
-        </div>
-      </div>
-
       {!sitesLoading && sites.length === 0 && (
         <div className="mb-8 rounded-2xl border-2 border-dashed border-brand-orange/30 bg-brand-orange/10 p-8 text-center flex flex-col items-center">
           <img
@@ -452,6 +373,7 @@ export default function HomePage() {
           </div>
         </div>
       )}
-    </div>
+      </div>
+    </DashboardShell>
   )
 }
diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 20b36db..579a15a 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -41,15 +41,15 @@ const Sidebar = dynamic(() => import('./Sidebar'), {
   ),
 })
 
-function GlassTopBar({ siteId }: { siteId: string }) {
+function GlassTopBar({ siteId }: { siteId: string | null }) {
   const { collapsed, toggle } = useSidebar()
-  const { data: realtime } = useRealtime(siteId)
+  const { data: realtime } = useRealtime(siteId ?? '')
   const lastUpdatedRef = useRef<number | null>(null)
   const [, setTick] = useState(0)
 
   useEffect(() => {
-    if (realtime) lastUpdatedRef.current = Date.now()
-  }, [realtime])
+    if (siteId && realtime) lastUpdatedRef.current = Date.now()
+  }, [siteId, realtime])
 
   useEffect(() => {
     if (lastUpdatedRef.current == null) return
@@ -57,7 +57,8 @@ function GlassTopBar({ siteId }: { siteId: string }) {
     return () => clearInterval(timer)
   }, [realtime])
 
-  const pageTitle = usePageTitle()
+  const dashboardTitle = usePageTitle()
+  const pageTitle = siteId ? dashboardTitle : 'Your Sites'
 
   return (
     <div className="hidden md:flex items-center justify-between shrink-0 px-3 pt-1.5 pb-1">
@@ -74,7 +75,7 @@ function GlassTopBar({ siteId }: { siteId: string }) {
       </div>
 
       {/* Realtime indicator */}
-      {lastUpdatedRef.current != null && (
+      {siteId && lastUpdatedRef.current != null && (
         <div className="flex items-center gap-1.5 text-xs text-neutral-500">
           <span className="relative flex h-1.5 w-1.5">
             <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75" />
@@ -91,7 +92,7 @@ export default function DashboardShell({
   siteId,
   children,
 }: {
-  siteId: string
+  siteId: string | null
   children: React.ReactNode
 }) {
   const [mobileOpen, setMobileOpen] = useState(false)
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 52153e4..cdd057d 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -364,7 +364,7 @@ function SettingsButton({
 interface SidebarContentProps {
   isMobile: boolean
   collapsed: boolean
-  siteId: string
+  siteId: string | null
   sites: Site[]
   canEdit: boolean
   pendingHref: string | null
@@ -414,32 +414,38 @@ function SidebarContent({
       </Link>
 
       {/* Site Picker */}
-      <SitePicker sites={sites} siteId={siteId} collapsed={c} onExpand={onExpand} onCollapse={onCollapse} wasCollapsed={wasCollapsed} pickerOpenCallback={pickerOpenCallbackRef} />
+      {siteId && (
+        <SitePicker sites={sites} siteId={siteId} collapsed={c} onExpand={onExpand} onCollapse={onCollapse} wasCollapsed={wasCollapsed} pickerOpenCallback={pickerOpenCallbackRef} />
+      )}
 
       {/* Nav Groups */}
-      <nav className="flex-1 overflow-y-auto overflow-x-hidden px-2 space-y-4">
-        {NAV_GROUPS.map((group) => (
-          <div key={group.label}>
-            {c ? (
-              <div className="mx-3 my-2 border-t border-white/[0.04]" />
-            ) : (
-              <div className="h-5 flex items-center overflow-hidden">
-                <p className="px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap">
-                  {group.label}
-                </p>
-              </div>
-            )}
-            <div className="space-y-0.5">
-              {group.items.map((item) => (
-                <NavLink key={item.label} item={item} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={onNavigate} />
-              ))}
-              {group.label === 'Infrastructure' && canEdit && (
-                <SettingsButton item={SETTINGS_ITEM} collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
+      {siteId ? (
+        <nav className="flex-1 overflow-y-auto overflow-x-hidden px-2 space-y-4">
+          {NAV_GROUPS.map((group) => (
+            <div key={group.label}>
+              {c ? (
+                <div className="mx-3 my-2 border-t border-white/[0.04]" />
+              ) : (
+                <div className="h-5 flex items-center overflow-hidden">
+                  <p className="px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap">
+                    {group.label}
+                  </p>
+                </div>
               )}
+              <div className="space-y-0.5">
+                {group.items.map((item) => (
+                  <NavLink key={item.label} item={item} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={onNavigate} />
+                ))}
+                {group.label === 'Infrastructure' && canEdit && (
+                  <SettingsButton item={SETTINGS_ITEM} collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
+                )}
+              </div>
             </div>
-          </div>
-        ))}
-      </nav>
+          ))}
+        </nav>
+      ) : (
+        <div className="flex-1" />
+      )}
 
       {/* Bottom — utility items */}
       <div className="border-t border-white/[0.06] px-2 py-3 shrink-0">
@@ -488,7 +494,7 @@ function SidebarContent({
 export default function Sidebar({
   siteId, mobileOpen, onMobileClose, onMobileOpen,
 }: {
-  siteId: string; mobileOpen: boolean; onMobileClose: () => void; onMobileOpen: () => void
+  siteId: string | null; mobileOpen: boolean; onMobileClose: () => void; onMobileOpen: () => void
 }) {
   const auth = useAuth()
   const { user } = auth
-- 
2.49.1


From 9413fb2a0788373fec7346906698a6a463219cb6 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 28 Mar 2026 19:15:33 +0100
Subject: [PATCH 408/428] fix: match home page max-width to dashboard
 (max-w-7xl)

---
 app/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/page.tsx b/app/page.tsx
index bd565ac..c5c0e8e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -231,7 +231,7 @@ export default function HomePage() {
 
   return (
     <DashboardShell siteId={null}>
-      <div className="px-6">
+      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
       {showFinishSetupBanner && (
         <div className="mb-6 flex items-center justify-between gap-4 rounded-2xl border border-brand-orange/30 bg-brand-orange/10 px-4 py-3">
           <p className="text-sm text-neutral-300">
-- 
2.49.1


From 45c518b3ba439e341b7f5b5b2f2de42ddcc3203b Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 28 Mar 2026 19:24:41 +0100
Subject: [PATCH 409/428] feat: add home sidebar nav (sites list, workspace,
 resources)

Three nav groups in home mode:
- Your Sites: each site with favicon, Add New Site
- Workspace: Integrations, Pricing, Workspace Settings
- Resources: Documentation (external link)

Same styling as site dashboard sidebar nav items.
---
 components/dashboard/Sidebar.tsx | 141 +++++++++++++++++++++++++++++--
 1 file changed, 136 insertions(+), 5 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index cdd057d..70662ba 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -14,7 +14,7 @@ import { getUserOrganizations, switchContext, type OrganizationMember } from '@/
 import { setSessionAction } from '@/app/actions/auth'
 import { logger } from '@/lib/utils/logger'
 import { FAVICON_SERVICE_URL } from '@/lib/utils/favicon'
-import { Gauge as GaugeIcon } from '@phosphor-icons/react'
+import { Gauge as GaugeIcon, Plugs as PlugsIcon, Tag as TagIcon } from '@phosphor-icons/react'
 import {
   LayoutDashboardIcon,
   PathIcon,
@@ -27,6 +27,7 @@ import {
   ChevronUpDownIcon,
   PlusIcon,
   XIcon,
+  BookOpenIcon,
   AppLauncher,
   UserMenu,
   type CipheraApp,
@@ -330,9 +331,9 @@ function NavLink({
 // ─── Settings Button (opens unified modal instead of navigating) ─────
 
 function SettingsButton({
-  item, collapsed, onClick,
+  item, collapsed, onClick, settingsContext = 'site',
 }: {
-  item: NavItem; collapsed: boolean; onClick?: () => void
+  item: NavItem; collapsed: boolean; onClick?: () => void; settingsContext?: 'site' | 'workspace'
 }) {
   const { openUnifiedSettings } = useUnifiedSettings()
 
@@ -340,7 +341,7 @@ function SettingsButton({
     <div className="relative group/nav">
       <button
         onClick={() => {
-          openUnifiedSettings({ context: 'site', tab: 'general' })
+          openUnifiedSettings({ context: settingsContext, tab: 'general' })
           onClick?.()
         }}
         className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5 w-full cursor-pointer"
@@ -359,6 +360,83 @@ function SettingsButton({
   )
 }
 
+// ─── Home Nav Link (static href, no siteId) ───────────────
+
+function HomeNavLink({
+  href, icon: Icon, label, collapsed, onClick, external,
+}: {
+  href: string; icon: React.ComponentType<{ className?: string; weight?: IconWeight }>
+  label: string; collapsed: boolean; onClick?: () => void; external?: boolean
+}) {
+  const pathname = usePathname()
+  const active = !external && pathname === href
+
+  return (
+    <div className="relative group/nav">
+      <Link
+        href={href}
+        onClick={onClick}
+        {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+        className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 ${
+          active
+            ? 'bg-brand-orange/10 text-brand-orange'
+            : 'text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5'
+        }`}
+      >
+        <span className="w-7 h-7 flex items-center justify-center shrink-0">
+          <Icon className="w-[18px] h-[18px]" weight={active ? 'fill' : 'regular'} />
+        </span>
+        <Label collapsed={collapsed}>{label}</Label>
+      </Link>
+      {collapsed && (
+        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/nav:opacity-100 transition-opacity duration-150 delay-150 z-50">
+          {label}
+        </span>
+      )}
+    </div>
+  )
+}
+
+// ─── Home Site Link (favicon + name) ───────────────────────
+
+function HomeSiteLink({
+  site, collapsed, onClick,
+}: {
+  site: Site; collapsed: boolean; onClick?: () => void
+}) {
+  const pathname = usePathname()
+  const href = `/sites/${site.id}`
+  const active = pathname.startsWith(href)
+
+  return (
+    <div className="relative group/nav">
+      <Link
+        href={href}
+        onClick={onClick}
+        className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 ${
+          active
+            ? 'bg-brand-orange/10 text-brand-orange'
+            : 'text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5'
+        }`}
+      >
+        <span className="w-7 h-7 rounded-md bg-white/[0.04] flex items-center justify-center shrink-0 overflow-hidden">
+          <img
+            src={`${FAVICON_SERVICE_URL}?domain=${site.domain}&sz=64`}
+            alt=""
+            className="w-[18px] h-[18px] rounded object-contain"
+          />
+        </span>
+        <Label collapsed={collapsed}>{site.name}</Label>
+      </Link>
+      {collapsed && (
+        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/nav:opacity-100 transition-opacity duration-150 delay-150 z-50">
+          {site.name}
+        </span>
+      )}
+    </div>
+  )
+}
+
 // ─── Sidebar Content ────────────────────────────────────────
 
 interface SidebarContentProps {
@@ -444,7 +522,60 @@ function SidebarContent({
           ))}
         </nav>
       ) : (
-        <div className="flex-1" />
+        <nav className="flex-1 overflow-y-auto overflow-x-hidden px-2 space-y-4">
+          {/* Your Sites */}
+          <div>
+            {c ? (
+              <div className="mx-3 my-2 border-t border-white/[0.04]" />
+            ) : (
+              <div className="h-5 flex items-center overflow-hidden">
+                <p className="px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap">
+                  Your Sites
+                </p>
+              </div>
+            )}
+            <div className="space-y-0.5">
+              {sites.map((site) => (
+                <HomeSiteLink key={site.id} site={site} collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
+              ))}
+              <HomeNavLink href="/sites/new" icon={PlusIcon} label="Add New Site" collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
+            </div>
+          </div>
+
+          {/* Workspace */}
+          <div>
+            {c ? (
+              <div className="mx-3 my-2 border-t border-white/[0.04]" />
+            ) : (
+              <div className="h-5 flex items-center overflow-hidden">
+                <p className="px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap">
+                  Workspace
+                </p>
+              </div>
+            )}
+            <div className="space-y-0.5">
+              <HomeNavLink href="/integrations" icon={PlugsIcon} label="Integrations" collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
+              <HomeNavLink href="/pricing" icon={TagIcon} label="Pricing" collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
+              <SettingsButton item={{ label: 'Workspace Settings', href: () => '', icon: SettingsIcon, matchPrefix: false }} collapsed={c} onClick={isMobile ? onMobileClose : undefined} settingsContext="workspace" />
+            </div>
+          </div>
+
+          {/* Resources */}
+          <div>
+            {c ? (
+              <div className="mx-3 my-2 border-t border-white/[0.04]" />
+            ) : (
+              <div className="h-5 flex items-center overflow-hidden">
+                <p className="px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap">
+                  Resources
+                </p>
+              </div>
+            )}
+            <div className="space-y-0.5">
+              <HomeNavLink href="https://docs.ciphera.net" icon={BookOpenIcon} label="Documentation" collapsed={c} onClick={isMobile ? onMobileClose : undefined} external />
+            </div>
+          </div>
+        </nav>
       )}
 
       {/* Bottom — utility items */}
-- 
2.49.1


From c36c1b069689080d1ab92a538d246853cd5ed1be Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 28 Mar 2026 19:35:23 +0100
Subject: [PATCH 410/428] feat: wrap all authenticated pages in DashboardShell,
 fix site card actions

- Move DashboardShell wrapping to layout-content.tsx for all dashboard
  pages (home, integrations, pricing) instead of per-page
- GlassTopBar derives page title from pathname (Integrations, Pricing)
- Site card: gear icon now opens site settings, separate trash icon for delete
---
 app/layout-content.tsx                  | 22 +++++++++++++++++-----
 app/page.tsx                            |  3 ---
 components/dashboard/DashboardShell.tsx | 15 ++++++++++++++-
 components/sites/SiteList.tsx           | 11 +++++++++--
 4 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/app/layout-content.tsx b/app/layout-content.tsx
index c321a0c..18a988b 100644
--- a/app/layout-content.tsx
+++ b/app/layout-content.tsx
@@ -17,6 +17,7 @@ import { LoadingOverlay } from '@ciphera-net/ui'
 import { useRouter } from 'next/navigation'
 import { UnifiedSettingsProvider, useUnifiedSettings } from '@/lib/unified-settings-context'
 import UnifiedSettingsModal from '@/components/settings/unified/UnifiedSettingsModal'
+import DashboardShell from '@/components/dashboard/DashboardShell'
 
 const ORG_SWITCH_KEY = 'pulse_switching_org'
 
@@ -95,7 +96,8 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
   const showOfflineBar = Boolean(auth.user && !isOnline)
   // Site pages use DashboardShell with full sidebar — no Header needed
   const isSitePage = pathname.startsWith('/sites/') && pathname !== '/sites/new'
-  const isHomePage = pathname === '/'
+  // Pages that use DashboardShell with home sidebar (no site context)
+  const isDashboardPage = pathname === '/' || pathname.startsWith('/integrations') || pathname === '/pricing'
   // Checkout page has its own minimal layout — no app header/footer
   const isCheckoutPage = pathname.startsWith('/checkout')
 
@@ -104,13 +106,12 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
   }
 
   // While auth is loading on a site or checkout page, render nothing to prevent flash of public header
-  if (auth.loading && (isSitePage || isCheckoutPage || isHomePage)) {
+  if (auth.loading && (isSitePage || isCheckoutPage || isDashboardPage)) {
     return null
   }
 
-  // Authenticated site pages: full sidebar layout
-  // DashboardShell inside children handles everything
-  if (isAuthenticated && (isSitePage || isHomePage)) {
+  // Authenticated site pages: DashboardShell provided by sites layout
+  if (isAuthenticated && isSitePage) {
     return (
       <>
         {showOfflineBar && <OfflineBanner isOnline={isOnline} />}
@@ -120,6 +121,17 @@ function LayoutInner({ children }: { children: React.ReactNode }) {
     )
   }
 
+  // Authenticated dashboard pages (home, integrations, pricing): wrap in DashboardShell
+  if (isAuthenticated && isDashboardPage) {
+    return (
+      <>
+        {showOfflineBar && <OfflineBanner isOnline={isOnline} />}
+        <DashboardShell siteId={null}>{children}</DashboardShell>
+        <UnifiedSettingsModal />
+      </>
+    )
+  }
+
   // Checkout page: render children only (has its own layout)
   if (isAuthenticated && isCheckoutPage) {
     return <>{children}</>
diff --git a/app/page.tsx b/app/page.tsx
index c5c0e8e..c506644 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -23,7 +23,6 @@ import PulseFAQ from '@/components/marketing/PulseFAQ'
 import { toast } from '@ciphera-net/ui'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
 import { getSitesLimitForPlan } from '@/lib/plans'
-import DashboardShell from '@/components/dashboard/DashboardShell'
 
 type SiteStatsMap = Record<string, { stats: Stats }>
 
@@ -230,7 +229,6 @@ export default function HomePage() {
   }
 
   return (
-    <DashboardShell siteId={null}>
       <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 pb-8">
       {showFinishSetupBanner && (
         <div className="mb-6 flex items-center justify-between gap-4 rounded-2xl border border-brand-orange/30 bg-brand-orange/10 px-4 py-3">
@@ -374,6 +372,5 @@ export default function HomePage() {
         </div>
       )}
       </div>
-    </DashboardShell>
   )
 }
diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 579a15a..c2c40b3 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -28,6 +28,18 @@ function usePageTitle() {
   return PAGE_TITLES[segment] ?? (segment ? segment.charAt(0).toUpperCase() + segment.slice(1) : 'Dashboard')
 }
 
+const HOME_PAGE_TITLES: Record<string, string> = {
+  '': 'Your Sites',
+  integrations: 'Integrations',
+  pricing: 'Pricing',
+}
+
+function useHomePageTitle() {
+  const pathname = usePathname()
+  const segment = pathname.split('/').filter(Boolean)[0] ?? ''
+  return HOME_PAGE_TITLES[segment] ?? (segment ? segment.charAt(0).toUpperCase() + segment.slice(1) : 'Your Sites')
+}
+
 // Load sidebar only on the client — prevents SSR flash
 const Sidebar = dynamic(() => import('./Sidebar'), {
   ssr: false,
@@ -58,7 +70,8 @@ function GlassTopBar({ siteId }: { siteId: string | null }) {
   }, [realtime])
 
   const dashboardTitle = usePageTitle()
-  const pageTitle = siteId ? dashboardTitle : 'Your Sites'
+  const homeTitle = useHomePageTitle()
+  const pageTitle = siteId ? dashboardTitle : homeTitle
 
   return (
     <div className="hidden md:flex items-center justify-between shrink-0 px-3 pt-1.5 pb-1">
diff --git a/components/sites/SiteList.tsx b/components/sites/SiteList.tsx
index a0d2d70..8065672 100644
--- a/components/sites/SiteList.tsx
+++ b/components/sites/SiteList.tsx
@@ -5,7 +5,7 @@ import Image from 'next/image'
 import { Site } from '@/lib/api/sites'
 import type { Stats } from '@/lib/api/stats'
 import { formatNumber } from '@ciphera-net/ui'
-import { BarChartIcon, SettingsIcon, BookOpenIcon, ExternalLinkIcon, Button } from '@ciphera-net/ui'
+import { BarChartIcon, SettingsIcon, TrashIcon, BookOpenIcon, ExternalLinkIcon, Button } from '@ciphera-net/ui'
 import { useAuth } from '@/lib/auth/context'
 import { FAVICON_SERVICE_URL } from '@/lib/utils/favicon'
 
@@ -104,6 +104,13 @@ function SiteCard({ site, stats, statsLoading, onDelete, canDelete }: SiteCardPr
             View Dashboard
           </Button>
         </Link>
+        <Link
+          href={`/sites/${site.id}/settings`}
+          className="flex items-center justify-center rounded-lg border border-neutral-200 px-3 hover:bg-neutral-50 dark:border-neutral-700 dark:hover:bg-neutral-800 text-neutral-500 hover:text-neutral-300 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
+          title="Site Settings"
+        >
+          <SettingsIcon className="h-4 w-4" />
+        </Link>
         {canDelete && (
           <button
             type="button"
@@ -111,7 +118,7 @@ function SiteCard({ site, stats, statsLoading, onDelete, canDelete }: SiteCardPr
             className="flex items-center justify-center rounded-lg border border-neutral-200 px-3 hover:bg-neutral-50 dark:border-neutral-700 dark:hover:bg-neutral-800 text-neutral-500 hover:text-red-600 dark:hover:text-red-400 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2"
             title="Delete Site"
           >
-            <SettingsIcon className="h-4 w-4" />
+            <TrashIcon className="h-4 w-4" />
           </button>
         )}
       </div>
-- 
2.49.1


From 663abc9b9e5d294364fcc9a3c50313b138c8ec5a Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 28 Mar 2026 19:42:42 +0100
Subject: [PATCH 411/428] feat: DashboardShell for all auth pages, site
 settings modal from home

- layout-content wraps integrations/pricing in DashboardShell
- GlassTopBar derives title per page (Integrations, Pricing, etc.)
- Site card gear icon opens settings modal with siteId context
- Removed delete button from site cards (accessible via site settings)
- Extended InitialTab to accept optional siteId for cross-page use
---
 app/page.tsx                                  | 17 +--------
 .../settings/unified/UnifiedSettingsModal.tsx |  6 +++-
 components/sites/SiteList.tsx                 | 35 ++++++-------------
 lib/unified-settings-context.tsx              |  2 +-
 4 files changed, 17 insertions(+), 43 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index c506644..8df1ad6 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -33,7 +33,6 @@ export default function HomePage() {
   const [siteStats, setSiteStats] = useState<SiteStatsMap>({})
   const [subscription, setSubscription] = useState<SubscriptionDetails | null>(null)
   const [showFinishSetupBanner, setShowFinishSetupBanner] = useState(true)
-  const [deleteModalSite, setDeleteModalSite] = useState<Site | null>(null)
   const [deletedSites, setDeletedSites] = useState<Site[]>([])
   const [permanentDeleteSiteModal, setPermanentDeleteSiteModal] = useState<Site | null>(null)
 
@@ -119,11 +118,6 @@ export default function HomePage() {
     }
   }
 
-  const handleDelete = (id: string) => {
-    const site = sites.find((s) => s.id === id)
-    if (site) setDeleteModalSite(site)
-  }
-
   const handleRestore = async (id: string) => {
     try {
       await restoreSite(id)
@@ -312,18 +306,9 @@ export default function HomePage() {
       )}
 
       {(sitesLoading || sites.length > 0) && (
-        <SiteList sites={sites} siteStats={siteStats} loading={sitesLoading} onDelete={handleDelete} />
+        <SiteList sites={sites} siteStats={siteStats} loading={sitesLoading} />
       )}
 
-      <DeleteSiteModal
-        open={!!deleteModalSite}
-        onClose={() => setDeleteModalSite(null)}
-        onDeleted={loadSites}
-        siteName={deleteModalSite?.name || ''}
-        siteDomain={deleteModalSite?.domain || ''}
-        siteId={deleteModalSite?.id || ''}
-      />
-
       <DeleteSiteModal
         open={!!permanentDeleteSiteModal}
         onClose={() => setPermanentDeleteSiteModal(null)}
diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index 4cbee82..5b44988 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -303,7 +303,11 @@ export default function UnifiedSettingsModal() {
   useEffect(() => {
     if (!isOpen || !user?.org_id) return
 
-    if (typeof window !== 'undefined') {
+    if (initTab?.siteId) {
+      // Site ID passed explicitly (e.g. from home page site card)
+      setActiveSiteId(initTab.siteId)
+      if (!initTab?.context) setContext('site')
+    } else if (typeof window !== 'undefined') {
       const match = window.location.pathname.match(/\/sites\/([a-f0-9-]+)/)
       if (match) {
         setActiveSiteId(match[1])
diff --git a/components/sites/SiteList.tsx b/components/sites/SiteList.tsx
index 8065672..c5344a8 100644
--- a/components/sites/SiteList.tsx
+++ b/components/sites/SiteList.tsx
@@ -5,8 +5,8 @@ import Image from 'next/image'
 import { Site } from '@/lib/api/sites'
 import type { Stats } from '@/lib/api/stats'
 import { formatNumber } from '@ciphera-net/ui'
-import { BarChartIcon, SettingsIcon, TrashIcon, BookOpenIcon, ExternalLinkIcon, Button } from '@ciphera-net/ui'
-import { useAuth } from '@/lib/auth/context'
+import { BarChartIcon, SettingsIcon, BookOpenIcon, ExternalLinkIcon, Button } from '@ciphera-net/ui'
+import { useUnifiedSettings } from '@/lib/unified-settings-context'
 import { FAVICON_SERVICE_URL } from '@/lib/utils/favicon'
 
 export type SiteStatsMap = Record<string, { stats: Stats }>
@@ -15,18 +15,16 @@ interface SiteListProps {
   sites: Site[]
   siteStats: SiteStatsMap
   loading: boolean
-  onDelete: (id: string) => void
 }
 
 interface SiteCardProps {
   site: Site
   stats: Stats | null
   statsLoading: boolean
-  onDelete: (id: string) => void
-  canDelete: boolean
 }
 
-function SiteCard({ site, stats, statsLoading, onDelete, canDelete }: SiteCardProps) {
+function SiteCard({ site, stats, statsLoading }: SiteCardProps) {
+  const { openUnifiedSettings } = useUnifiedSettings()
   const visitors24h = stats?.visitors ?? 0
   const pageviews = stats?.pageviews ?? 0
 
@@ -104,31 +102,20 @@ function SiteCard({ site, stats, statsLoading, onDelete, canDelete }: SiteCardPr
             View Dashboard
           </Button>
         </Link>
-        <Link
-          href={`/sites/${site.id}/settings`}
-          className="flex items-center justify-center rounded-lg border border-neutral-200 px-3 hover:bg-neutral-50 dark:border-neutral-700 dark:hover:bg-neutral-800 text-neutral-500 hover:text-neutral-300 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
+        <button
+          type="button"
+          onClick={() => openUnifiedSettings({ context: 'site', tab: 'general', siteId: site.id })}
+          className="flex items-center justify-center rounded-lg border border-neutral-200 px-3 hover:bg-neutral-50 dark:border-neutral-700 dark:hover:bg-neutral-800 text-neutral-500 hover:text-neutral-300 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 cursor-pointer"
           title="Site Settings"
         >
           <SettingsIcon className="h-4 w-4" />
-        </Link>
-        {canDelete && (
-          <button
-            type="button"
-            onClick={() => onDelete(site.id)}
-            className="flex items-center justify-center rounded-lg border border-neutral-200 px-3 hover:bg-neutral-50 dark:border-neutral-700 dark:hover:bg-neutral-800 text-neutral-500 hover:text-red-600 dark:hover:text-red-400 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2"
-            title="Delete Site"
-          >
-            <TrashIcon className="h-4 w-4" />
-          </button>
-        )}
+        </button>
       </div>
     </div>
   )
 }
 
-export default function SiteList({ sites, siteStats, loading, onDelete }: SiteListProps) {
-  const { user } = useAuth()
-  const canDelete = user?.role === 'owner' || user?.role === 'admin'
+export default function SiteList({ sites, siteStats, loading }: SiteListProps) {
 
   if (loading) {
     return (
@@ -172,8 +159,6 @@ export default function SiteList({ sites, siteStats, loading, onDelete }: SiteLi
             site={site}
             stats={data?.stats ?? null}
             statsLoading={!data}
-            onDelete={onDelete}
-            canDelete={canDelete}
           />
         )
       })}
diff --git a/lib/unified-settings-context.tsx b/lib/unified-settings-context.tsx
index 5711314..fafacc3 100644
--- a/lib/unified-settings-context.tsx
+++ b/lib/unified-settings-context.tsx
@@ -2,7 +2,7 @@
 
 import { createContext, useContext, useState, useCallback } from 'react'
 
-type InitialTab = { context?: 'site' | 'workspace' | 'account'; tab?: string } | null
+type InitialTab = { context?: 'site' | 'workspace' | 'account'; tab?: string; siteId?: string } | null
 
 interface UnifiedSettingsContextType {
   isOpen: boolean
-- 
2.49.1


From 9feffa5cc605ca33637a09ca6b9c0fd38b5291c9 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 28 Mar 2026 20:04:51 +0100
Subject: [PATCH 412/428] feat: add breadcrumb navigation to GlassTopBar

Site pages show: Your Sites > site-name > Page Title
Each segment is clickable for navigation back.
Home/non-site pages show plain title as before.
---
 components/dashboard/DashboardShell.tsx | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index c2c40b3..76d023c 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -2,11 +2,13 @@
 
 import { useState, useCallback, useEffect, useRef } from 'react'
 import dynamic from 'next/dynamic'
+import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { formatUpdatedAgo } from '@ciphera-net/ui'
-import { SidebarSimple } from '@phosphor-icons/react'
+import { CaretRight, SidebarSimple } from '@phosphor-icons/react'
 import { SidebarProvider, useSidebar } from '@/lib/sidebar-context'
 import { useRealtime } from '@/lib/swr/dashboard'
+import { getSite } from '@/lib/api/sites'
 import ContentHeader from './ContentHeader'
 
 const PAGE_TITLES: Record<string, string> = {
@@ -58,6 +60,7 @@ function GlassTopBar({ siteId }: { siteId: string | null }) {
   const { data: realtime } = useRealtime(siteId ?? '')
   const lastUpdatedRef = useRef<number | null>(null)
   const [, setTick] = useState(0)
+  const [siteName, setSiteName] = useState<string | null>(null)
 
   useEffect(() => {
     if (siteId && realtime) lastUpdatedRef.current = Date.now()
@@ -69,13 +72,18 @@ function GlassTopBar({ siteId }: { siteId: string | null }) {
     return () => clearInterval(timer)
   }, [realtime])
 
+  useEffect(() => {
+    if (!siteId) { setSiteName(null); return }
+    getSite(siteId).then((s) => setSiteName(s.name)).catch(() => {})
+  }, [siteId])
+
   const dashboardTitle = usePageTitle()
   const homeTitle = useHomePageTitle()
   const pageTitle = siteId ? dashboardTitle : homeTitle
 
   return (
     <div className="hidden md:flex items-center justify-between shrink-0 px-3 pt-1.5 pb-1">
-      {/* Left: collapse toggle + page title */}
+      {/* Left: collapse toggle + breadcrumbs */}
       <div className="flex items-center gap-1.5">
         <button
           onClick={toggle}
@@ -84,7 +92,17 @@ function GlassTopBar({ siteId }: { siteId: string | null }) {
         >
           <SidebarSimple className="w-[18px] h-[18px]" weight={collapsed ? 'regular' : 'fill'} />
         </button>
-        <span className="text-sm text-neutral-400 font-medium">{pageTitle}</span>
+        {siteId && siteName ? (
+          <nav className="flex items-center gap-1 text-sm font-medium">
+            <Link href="/" className="text-neutral-500 hover:text-neutral-300 transition-colors">Your Sites</Link>
+            <CaretRight className="w-3 h-3 text-neutral-600" />
+            <Link href={`/sites/${siteId}`} className="text-neutral-500 hover:text-neutral-300 transition-colors truncate max-w-[160px]">{siteName}</Link>
+            <CaretRight className="w-3 h-3 text-neutral-600" />
+            <span className="text-neutral-400">{pageTitle}</span>
+          </nav>
+        ) : (
+          <span className="text-sm text-neutral-400 font-medium">{pageTitle}</span>
+        )}
       </div>
 
       {/* Realtime indicator */}
-- 
2.49.1


From 2113ee348a9456adc11d70a1f765d969a0cd5bba Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 28 Mar 2026 20:14:14 +0100
Subject: [PATCH 413/428] feat: add site switcher dropdown to breadcrumbs

Site name in breadcrumbs is now clickable with a dropdown showing
all sites with favicons. Selecting a site navigates to the same
section on that site. Lazy-loads site list on first open.
---
 components/dashboard/DashboardShell.tsx | 77 +++++++++++++++++++++++--
 1 file changed, 73 insertions(+), 4 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 76d023c..a128f29 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -3,12 +3,13 @@
 import { useState, useCallback, useEffect, useRef } from 'react'
 import dynamic from 'next/dynamic'
 import Link from 'next/link'
-import { usePathname } from 'next/navigation'
+import { usePathname, useRouter } from 'next/navigation'
 import { formatUpdatedAgo } from '@ciphera-net/ui'
-import { CaretRight, SidebarSimple } from '@phosphor-icons/react'
+import { CaretDown, CaretRight, SidebarSimple } from '@phosphor-icons/react'
 import { SidebarProvider, useSidebar } from '@/lib/sidebar-context'
 import { useRealtime } from '@/lib/swr/dashboard'
-import { getSite } from '@/lib/api/sites'
+import { getSite, listSites, type Site } from '@/lib/api/sites'
+import { FAVICON_SERVICE_URL } from '@/lib/utils/favicon'
 import ContentHeader from './ContentHeader'
 
 const PAGE_TITLES: Record<string, string> = {
@@ -55,6 +56,74 @@ const Sidebar = dynamic(() => import('./Sidebar'), {
   ),
 })
 
+// ─── Breadcrumb Site Picker ────────────────────────────────
+
+function BreadcrumbSitePicker({ currentSiteId, currentSiteName }: { currentSiteId: string; currentSiteName: string }) {
+  const [open, setOpen] = useState(false)
+  const [sites, setSites] = useState<Site[]>([])
+  const ref = useRef<HTMLDivElement>(null)
+  const pathname = usePathname()
+  const router = useRouter()
+
+  useEffect(() => {
+    if (open && sites.length === 0) {
+      listSites().then(setSites).catch(() => {})
+    }
+  }, [open, sites.length])
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [])
+
+  const switchSite = (id: string) => {
+    // Navigate to same section on the new site
+    router.push(`/sites/${id}${pathname.replace(/^\/sites\/[^/]+/, '')}`)
+    setOpen(false)
+  }
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-0.5 text-neutral-500 hover:text-neutral-300 transition-colors truncate max-w-[160px] cursor-pointer"
+      >
+        <span className="truncate">{currentSiteName}</span>
+        <CaretDown className="w-3 h-3 shrink-0" />
+      </button>
+      {open && (
+        <div className="absolute top-full left-0 mt-1 z-50 w-[220px] bg-neutral-900/90 backdrop-blur-2xl border border-white/[0.08] rounded-xl shadow-xl shadow-black/20 overflow-hidden">
+          <div className="max-h-64 overflow-y-auto py-1">
+            {sites.map((site) => (
+              <button
+                key={site.id}
+                onClick={() => switchSite(site.id)}
+                className={`w-full flex items-center gap-2.5 px-3 py-2 text-sm text-left transition-colors ${
+                  site.id === currentSiteId
+                    ? 'bg-brand-orange/10 text-brand-orange font-medium'
+                    : 'text-neutral-300 hover:bg-white/[0.06]'
+                }`}
+              >
+                <img
+                  src={`${FAVICON_SERVICE_URL}?domain=${site.domain}&sz=64`}
+                  alt=""
+                  className="w-4 h-4 rounded object-contain shrink-0"
+                />
+                <span className="truncate">{site.name}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ─── Glass Top Bar ─────────────────────────────────────────
+
 function GlassTopBar({ siteId }: { siteId: string | null }) {
   const { collapsed, toggle } = useSidebar()
   const { data: realtime } = useRealtime(siteId ?? '')
@@ -96,7 +165,7 @@ function GlassTopBar({ siteId }: { siteId: string | null }) {
           <nav className="flex items-center gap-1 text-sm font-medium">
             <Link href="/" className="text-neutral-500 hover:text-neutral-300 transition-colors">Your Sites</Link>
             <CaretRight className="w-3 h-3 text-neutral-600" />
-            <Link href={`/sites/${siteId}`} className="text-neutral-500 hover:text-neutral-300 transition-colors truncate max-w-[160px]">{siteName}</Link>
+            <BreadcrumbSitePicker currentSiteId={siteId} currentSiteName={siteName} />
             <CaretRight className="w-3 h-3 text-neutral-600" />
             <span className="text-neutral-400">{pageTitle}</span>
           </nav>
-- 
2.49.1


From ff256a59867fd3f95df3ea1a609142a2433a10b8 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 28 Mar 2026 20:23:08 +0100
Subject: [PATCH 414/428] fix: center breadcrumb caret, remove dropdown padding
 gaps

---
 components/dashboard/DashboardShell.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index a128f29..5b97278 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -89,14 +89,14 @@ function BreadcrumbSitePicker({ currentSiteId, currentSiteName }: { currentSiteI
     <div className="relative" ref={ref}>
       <button
         onClick={() => setOpen(!open)}
-        className="flex items-center gap-0.5 text-neutral-500 hover:text-neutral-300 transition-colors truncate max-w-[160px] cursor-pointer"
+        className="inline-flex items-center gap-1 text-neutral-500 hover:text-neutral-300 transition-colors max-w-[160px] cursor-pointer"
       >
         <span className="truncate">{currentSiteName}</span>
-        <CaretDown className="w-3 h-3 shrink-0" />
+        <CaretDown className="w-3 h-3 shrink-0 translate-y-px" />
       </button>
       {open && (
         <div className="absolute top-full left-0 mt-1 z-50 w-[220px] bg-neutral-900/90 backdrop-blur-2xl border border-white/[0.08] rounded-xl shadow-xl shadow-black/20 overflow-hidden">
-          <div className="max-h-64 overflow-y-auto py-1">
+          <div className="max-h-64 overflow-y-auto">
             {sites.map((site) => (
               <button
                 key={site.id}
-- 
2.49.1


From 48320c4db3635c2f42768664bdbe08289473a518 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 28 Mar 2026 20:57:29 +0100
Subject: [PATCH 415/428] feat: move site picker from sidebar to breadcrumbs

Replaced simple breadcrumb dropdown with the full sidebar-style
site picker (search, favicons, name+domain, add new site, animation).
Removed SitePicker from sidebar and cleaned up unused props.
---
 components/dashboard/DashboardShell.tsx | 112 ++++++++++---
 components/dashboard/Sidebar.tsx        | 211 +-----------------------
 2 files changed, 95 insertions(+), 228 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 5b97278..4369ef8 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -1,10 +1,12 @@
 'use client'
 
 import { useState, useCallback, useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import { motion, AnimatePresence } from 'framer-motion'
 import dynamic from 'next/dynamic'
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
-import { formatUpdatedAgo } from '@ciphera-net/ui'
+import { formatUpdatedAgo, PlusIcon } from '@ciphera-net/ui'
 import { CaretDown, CaretRight, SidebarSimple } from '@phosphor-icons/react'
 import { SidebarProvider, useSidebar } from '@/lib/sidebar-context'
 import { useRealtime } from '@/lib/swr/dashboard'
@@ -60,8 +62,12 @@ const Sidebar = dynamic(() => import('./Sidebar'), {
 
 function BreadcrumbSitePicker({ currentSiteId, currentSiteName }: { currentSiteId: string; currentSiteName: string }) {
   const [open, setOpen] = useState(false)
+  const [search, setSearch] = useState('')
   const [sites, setSites] = useState<Site[]>([])
   const ref = useRef<HTMLDivElement>(null)
+  const panelRef = useRef<HTMLDivElement>(null)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const [fixedPos, setFixedPos] = useState<{ left: number; top: number } | null>(null)
   const pathname = usePathname()
   const router = useRouter()
 
@@ -71,37 +77,79 @@ function BreadcrumbSitePicker({ currentSiteId, currentSiteName }: { currentSiteI
     }
   }, [open, sites.length])
 
+  const updatePosition = useCallback(() => {
+    if (buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect()
+      let top = rect.bottom + 4
+      if (panelRef.current) {
+        const maxTop = window.innerHeight - panelRef.current.offsetHeight - 8
+        top = Math.min(top, Math.max(8, maxTop))
+      }
+      setFixedPos({ left: rect.left, top })
+    }
+  }, [])
+
   useEffect(() => {
     const handler = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+      const target = e.target as Node
+      if (
+        ref.current && !ref.current.contains(target) &&
+        (!panelRef.current || !panelRef.current.contains(target))
+      ) {
+        if (open) { setOpen(false); setSearch('') }
+      }
     }
     document.addEventListener('mousedown', handler)
     return () => document.removeEventListener('mousedown', handler)
-  }, [])
+  }, [open])
+
+  useEffect(() => {
+    if (open) {
+      updatePosition()
+      requestAnimationFrame(() => updatePosition())
+    }
+  }, [open, updatePosition])
+
+  const closePicker = () => { setOpen(false); setSearch('') }
 
   const switchSite = (id: string) => {
-    // Navigate to same section on the new site
     router.push(`/sites/${id}${pathname.replace(/^\/sites\/[^/]+/, '')}`)
-    setOpen(false)
+    closePicker()
   }
 
-  return (
-    <div className="relative" ref={ref}>
-      <button
-        onClick={() => setOpen(!open)}
-        className="inline-flex items-center gap-1 text-neutral-500 hover:text-neutral-300 transition-colors max-w-[160px] cursor-pointer"
-      >
-        <span className="truncate">{currentSiteName}</span>
-        <CaretDown className="w-3 h-3 shrink-0 translate-y-px" />
-      </button>
+  const filtered = sites.filter(
+    (s) => s.name.toLowerCase().includes(search.toLowerCase()) || s.domain.toLowerCase().includes(search.toLowerCase())
+  )
+
+  const dropdown = (
+    <AnimatePresence>
       {open && (
-        <div className="absolute top-full left-0 mt-1 z-50 w-[220px] bg-neutral-900/90 backdrop-blur-2xl border border-white/[0.08] rounded-xl shadow-xl shadow-black/20 overflow-hidden">
+        <motion.div
+          ref={panelRef}
+          initial={{ opacity: 0, y: 10, scale: 0.95 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          exit={{ opacity: 0, y: 10, scale: 0.95 }}
+          transition={{ duration: 0.15 }}
+          className="fixed z-50 w-[240px] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-xl shadow-xl shadow-black/20 overflow-hidden origin-top-left"
+          style={fixedPos ? { left: fixedPos.left, top: fixedPos.top } : undefined}
+        >
+          <div className="p-2">
+            <input
+              type="text"
+              placeholder="Search sites..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              onKeyDown={(e) => { if (e.key === 'Escape') closePicker() }}
+              className="w-full px-3 py-1.5 text-sm bg-white/[0.04] border border-white/[0.08] rounded-lg outline-none focus:ring-2 focus:ring-brand-orange/40 text-white placeholder:text-neutral-400"
+              autoFocus
+            />
+          </div>
           <div className="max-h-64 overflow-y-auto">
-            {sites.map((site) => (
+            {filtered.map((site) => (
               <button
                 key={site.id}
                 onClick={() => switchSite(site.id)}
-                className={`w-full flex items-center gap-2.5 px-3 py-2 text-sm text-left transition-colors ${
+                className={`w-full flex items-center gap-2.5 px-4 py-2 text-sm text-left ${
                   site.id === currentSiteId
                     ? 'bg-brand-orange/10 text-brand-orange font-medium'
                     : 'text-neutral-300 hover:bg-white/[0.06]'
@@ -110,14 +158,38 @@ function BreadcrumbSitePicker({ currentSiteId, currentSiteName }: { currentSiteI
                 <img
                   src={`${FAVICON_SERVICE_URL}?domain=${site.domain}&sz=64`}
                   alt=""
-                  className="w-4 h-4 rounded object-contain shrink-0"
+                  className="w-5 h-5 rounded object-contain shrink-0"
                 />
-                <span className="truncate">{site.name}</span>
+                <span className="flex flex-col min-w-0">
+                  <span className="truncate">{site.name}</span>
+                  <span className="text-xs text-neutral-400 truncate">{site.domain}</span>
+                </span>
               </button>
             ))}
+            {filtered.length === 0 && <p className="px-4 py-3 text-sm text-neutral-400">No sites found</p>}
           </div>
-        </div>
+          <div className="border-t border-white/[0.06] p-2">
+            <Link href="/sites/new" onClick={() => closePicker()} className="flex items-center gap-2 px-3 py-1.5 text-sm text-brand-orange hover:bg-white/[0.06] rounded-lg">
+              <PlusIcon className="w-4 h-4" />
+              Add new site
+            </Link>
+          </div>
+        </motion.div>
       )}
+    </AnimatePresence>
+  )
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        ref={buttonRef}
+        onClick={() => setOpen(!open)}
+        className="inline-flex items-center gap-1 text-neutral-500 hover:text-neutral-300 transition-colors max-w-[160px] cursor-pointer"
+      >
+        <span className="truncate">{currentSiteName}</span>
+        <CaretDown className="w-3 h-3 shrink-0 translate-y-px" />
+      </button>
+      {typeof document !== 'undefined' ? createPortal(dropdown, document.body) : dropdown}
     </div>
   )
 }
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 70662ba..5214f48 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -1,8 +1,6 @@
 'use client'
 
 import { useState, useEffect, useRef, useCallback } from 'react'
-import { createPortal } from 'react-dom'
-import { motion, AnimatePresence } from 'framer-motion'
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
 import { listSites, type Site } from '@/lib/api/sites'
@@ -24,7 +22,6 @@ import {
   CloudUploadIcon,
   HeartbeatIcon,
   SettingsIcon,
-  ChevronUpDownIcon,
   PlusIcon,
   XIcon,
   BookOpenIcon,
@@ -112,183 +109,6 @@ function Label({ children, collapsed }: { children: React.ReactNode; collapsed:
   )
 }
 
-// ─── Site Picker ────────────────────────────────────────────
-
-function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollapsed, pickerOpenCallback }: {
-  sites: Site[]; siteId: string; collapsed: boolean
-  onExpand: () => void; onCollapse: () => void; wasCollapsed: React.MutableRefObject<boolean>
-  pickerOpenCallback: React.MutableRefObject<(() => void) | null>
-}) {
-  const [open, setOpen] = useState(false)
-  const [search, setSearch] = useState('')
-  const [faviconFailed, setFaviconFailed] = useState(false)
-  const [faviconLoaded, setFaviconLoaded] = useState(false)
-  const ref = useRef<HTMLDivElement>(null)
-  const panelRef = useRef<HTMLDivElement>(null)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-  const [fixedPos, setFixedPos] = useState<{ left: number; top: number } | null>(null)
-  const pathname = usePathname()
-  const router = useRouter()
-  const currentSite = sites.find((s) => s.id === siteId)
-  const faviconUrl = currentSite?.domain ? `${FAVICON_SERVICE_URL}?domain=${currentSite.domain}&sz=64` : null
-
-  const updatePosition = useCallback(() => {
-    if (buttonRef.current) {
-      const rect = buttonRef.current.getBoundingClientRect()
-      if (collapsed) {
-        // Collapsed: open to the right, like AppLauncher/UserMenu/Notifications
-        let top = rect.top
-        if (panelRef.current) {
-          const maxTop = window.innerHeight - panelRef.current.offsetHeight - 8
-          top = Math.min(top, Math.max(8, maxTop))
-        }
-        setFixedPos({ left: rect.right + 8, top })
-      } else {
-        // Expanded: open below the button
-        let top = rect.bottom + 4
-        if (panelRef.current) {
-          const maxTop = window.innerHeight - panelRef.current.offsetHeight - 8
-          top = Math.min(top, Math.max(8, maxTop))
-        }
-        setFixedPos({ left: rect.left, top })
-      }
-    }
-  }, [collapsed])
-
-  useEffect(() => {
-    const handler = (e: MouseEvent) => {
-      const target = e.target as Node
-      if (
-        ref.current && !ref.current.contains(target) &&
-        (!panelRef.current || !panelRef.current.contains(target))
-      ) {
-        if (open) {
-          setOpen(false); setSearch('')
-        }
-      }
-    }
-    document.addEventListener('mousedown', handler)
-    return () => document.removeEventListener('mousedown', handler)
-  }, [open, onCollapse, wasCollapsed])
-
-  useEffect(() => {
-    if (open) {
-      updatePosition()
-      requestAnimationFrame(() => updatePosition())
-    }
-  }, [open, updatePosition])
-
-  const closePicker = () => {
-    setOpen(false); setSearch('')
-  }
-
-  const switchSite = (id: string) => {
-    router.push(`/sites/${id}${pathname.replace(/^\/sites\/[^/]+/, '')}`)
-    closePicker()
-  }
-
-  const filtered = sites.filter(
-    (s) => s.name.toLowerCase().includes(search.toLowerCase()) || s.domain.toLowerCase().includes(search.toLowerCase())
-  )
-
-  const dropdown = (
-    <AnimatePresence>
-      {open && (
-        <motion.div
-          ref={panelRef}
-          initial={{ opacity: 0, y: 10, scale: 0.95 }}
-          animate={{ opacity: 1, y: 0, scale: 1 }}
-          exit={{ opacity: 0, y: 10, scale: 0.95 }}
-          transition={{ duration: 0.15 }}
-          className="fixed z-50 w-[240px] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-xl shadow-xl shadow-black/20 overflow-hidden origin-top-left"
-          style={fixedPos ? { left: fixedPos.left, top: fixedPos.top } : undefined}
-        >
-          <div className="p-2">
-            <input
-              type="text"
-              placeholder="Search sites..."
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === 'Escape') closePicker()
-              }}
-              className="w-full px-3 py-1.5 text-sm bg-white/[0.04] border border-white/[0.08] rounded-lg outline-none focus:ring-2 focus:ring-brand-orange/40 text-white placeholder:text-neutral-400"
-              autoFocus
-            />
-          </div>
-          <div className="max-h-64 overflow-y-auto">
-            {filtered.map((site) => (
-              <button
-                key={site.id}
-                onClick={() => switchSite(site.id)}
-                className={`w-full flex items-center gap-2.5 px-4 py-2 text-sm text-left ${
-                  site.id === siteId
-                    ? 'bg-brand-orange/10 text-brand-orange font-medium'
-                    : 'text-neutral-300 hover:bg-white/[0.06]'
-                }`}
-              >
-                <img
-                  src={`${FAVICON_SERVICE_URL}?domain=${site.domain}&sz=64`}
-                  alt=""
-                  className="w-5 h-5 rounded object-contain shrink-0"
-                />
-                <span className="flex flex-col min-w-0">
-                  <span className="truncate">{site.name}</span>
-                  <span className="text-xs text-neutral-400 truncate">{site.domain}</span>
-                </span>
-              </button>
-            ))}
-            {filtered.length === 0 && <p className="px-4 py-3 text-sm text-neutral-400">No sites found</p>}
-          </div>
-          <div className="border-t border-white/[0.06] p-2">
-            <Link href="/sites/new" onClick={() => closePicker()} className="flex items-center gap-2 px-3 py-1.5 text-sm text-brand-orange hover:bg-white/[0.06] rounded-lg">
-              <PlusIcon className="w-4 h-4" />
-              Add new site
-            </Link>
-          </div>
-        </motion.div>
-      )}
-    </AnimatePresence>
-  )
-
-  return (
-    <div className="relative mb-4 px-2" ref={ref}>
-      <button
-        ref={buttonRef}
-        onClick={() => setOpen(!open)}
-        className="w-full flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-200 hover:bg-white/[0.06] overflow-hidden"
-      >
-        <span className="w-7 h-7 rounded-md bg-brand-orange/10 flex items-center justify-center shrink-0 overflow-hidden">
-          {faviconUrl && !faviconFailed ? (
-            <>
-              {!faviconLoaded && <span className="w-5 h-5 rounded animate-pulse bg-neutral-800" />}
-              <img
-                src={faviconUrl}
-                alt=""
-                className={`w-5 h-5 object-contain ${faviconLoaded ? '' : 'hidden'}`}
-                onLoad={() => setFaviconLoaded(true)}
-                onError={() => setFaviconFailed(true)}
-              />
-            </>
-          ) : (
-            <span className="text-xs font-bold text-brand-orange">
-              {currentSite?.name?.charAt(0).toUpperCase() || '?'}
-            </span>
-          )}
-        </span>
-        <Label collapsed={collapsed}>
-          <span className="flex items-center gap-1">
-            <span className="truncate">{currentSite?.name || ''}</span>
-            <ChevronUpDownIcon className="w-4 h-4 text-neutral-400 shrink-0" />
-          </span>
-        </Label>
-      </button>
-
-      {typeof document !== 'undefined' ? createPortal(dropdown, document.body) : dropdown}
-    </div>
-  )
-}
-
 // ─── Nav Item ───────────────────────────────────────────────
 
 function NavLink({
@@ -448,11 +268,7 @@ interface SidebarContentProps {
   pendingHref: string | null
   onNavigate: (href: string) => void
   onMobileClose: () => void
-  onExpand: () => void
-  onCollapse: () => void
   onToggle: () => void
-  wasCollapsed: React.MutableRefObject<boolean>
-  pickerOpenCallbackRef: React.MutableRefObject<(() => void) | null>
   auth: ReturnType<typeof useAuth>
   orgs: OrganizationMember[]
   onSwitchOrganization: (orgId: string | null) => Promise<void>
@@ -462,8 +278,8 @@ interface SidebarContentProps {
 
 function SidebarContent({
   isMobile, collapsed, siteId, sites, canEdit, pendingHref,
-  onNavigate, onMobileClose, onExpand, onCollapse, onToggle,
-  wasCollapsed, pickerOpenCallbackRef, auth, orgs, onSwitchOrganization, openSettings, openOrgSettings,
+  onNavigate, onMobileClose, onToggle,
+  auth, orgs, onSwitchOrganization, openSettings, openOrgSettings,
 }: SidebarContentProps) {
   const router = useRouter()
   const c = isMobile ? false : collapsed
@@ -491,11 +307,6 @@ function SidebarContent({
         </span>
       </Link>
 
-      {/* Site Picker */}
-      {siteId && (
-        <SitePicker sites={sites} siteId={siteId} collapsed={c} onExpand={onExpand} onCollapse={onCollapse} wasCollapsed={wasCollapsed} pickerOpenCallback={pickerOpenCallbackRef} />
-      )}
-
       {/* Nav Groups */}
       {siteId ? (
         <nav className="flex-1 overflow-y-auto overflow-x-hidden px-2 space-y-4">
@@ -637,9 +448,7 @@ export default function Sidebar({
   const [orgs, setOrgs] = useState<OrganizationMember[]>([])
   const [pendingHref, setPendingHref] = useState<string | null>(null)
   const [mobileClosing, setMobileClosing] = useState(false)
-  const wasCollapsedRef = useRef(false)
-  const pickerOpenCallbackRef = useRef<(() => void) | null>(null)
-  const { collapsed, toggle, expand, collapse } = useSidebar()
+  const { collapsed, toggle } = useSidebar()
 
   useEffect(() => { listSites().then(setSites).catch(() => {}) }, [])
   useEffect(() => {
@@ -679,12 +488,6 @@ export default function Sidebar({
       <aside
         className="hidden md:flex flex-col shrink-0 bg-transparent overflow-hidden relative z-10"
         style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
-        onTransitionEnd={(e) => {
-          if (e.propertyName === 'width' && pickerOpenCallbackRef.current) {
-            pickerOpenCallbackRef.current()
-            pickerOpenCallbackRef.current = null
-          }
-        }}
       >
         <SidebarContent
           isMobile={false}
@@ -695,11 +498,7 @@ export default function Sidebar({
           pendingHref={pendingHref}
           onNavigate={handleNavigate}
           onMobileClose={onMobileClose}
-          onExpand={expand}
-          onCollapse={collapse}
           onToggle={toggle}
-          wasCollapsed={wasCollapsedRef}
-          pickerOpenCallbackRef={pickerOpenCallbackRef}
           auth={auth}
           orgs={orgs}
           onSwitchOrganization={handleSwitchOrganization}
@@ -739,11 +538,7 @@ export default function Sidebar({
               pendingHref={pendingHref}
               onNavigate={handleNavigate}
               onMobileClose={handleMobileClose}
-              onExpand={expand}
-              onCollapse={collapse}
               onToggle={toggle}
-              wasCollapsed={wasCollapsedRef}
-              pickerOpenCallbackRef={pickerOpenCallbackRef}
               auth={auth}
               orgs={orgs}
               onSwitchOrganization={handleSwitchOrganization}
-- 
2.49.1


From 4c1f70655aff7da766bf874895ad573ceef795f9 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 28 Mar 2026 21:20:09 +0100
Subject: [PATCH 416/428] feat: move app switcher from sidebar to breadcrumbs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Breadcrumbs now show: Pulse ▾ > Your Sites > site ▾ > Page
"Pulse ▾" opens the Ciphera apps dropdown (Drop, Auth).
Removed AppLauncher and CIPHERA label from sidebar top.
---
 components/dashboard/DashboardShell.tsx | 131 ++++++++++++++++++++++--
 components/dashboard/Sidebar.tsx        |  39 -------
 2 files changed, 120 insertions(+), 50 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 4369ef8..c328b8a 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -6,7 +6,7 @@ import { motion, AnimatePresence } from 'framer-motion'
 import dynamic from 'next/dynamic'
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
-import { formatUpdatedAgo, PlusIcon } from '@ciphera-net/ui'
+import { formatUpdatedAgo, PlusIcon, ExternalLinkIcon, type CipheraApp } from '@ciphera-net/ui'
 import { CaretDown, CaretRight, SidebarSimple } from '@phosphor-icons/react'
 import { SidebarProvider, useSidebar } from '@/lib/sidebar-context'
 import { useRealtime } from '@/lib/swr/dashboard'
@@ -14,6 +14,12 @@ import { getSite, listSites, type Site } from '@/lib/api/sites'
 import { FAVICON_SERVICE_URL } from '@/lib/utils/favicon'
 import ContentHeader from './ContentHeader'
 
+const CIPHERA_APPS: CipheraApp[] = [
+  { id: 'pulse', name: 'Pulse', description: 'Your current app — Privacy-first analytics', icon: 'https://ciphera.net/pulse_icon_no_margins.png', href: 'https://pulse.ciphera.net', isAvailable: false },
+  { id: 'drop', name: 'Drop', description: 'Secure file sharing', icon: 'https://ciphera.net/drop_icon_no_margins.png', href: 'https://drop.ciphera.net', isAvailable: true },
+  { id: 'auth', name: 'Auth', description: 'Your Ciphera account settings', icon: 'https://ciphera.net/auth_icon_no_margins.png', href: 'https://auth.ciphera.net', isAvailable: true },
+]
+
 const PAGE_TITLES: Record<string, string> = {
   '': 'Dashboard',
   journeys: 'Journeys',
@@ -58,6 +64,105 @@ const Sidebar = dynamic(() => import('./Sidebar'), {
   ),
 })
 
+// ─── Breadcrumb App Switcher ───────────────────────────────
+
+function BreadcrumbAppSwitcher() {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  const panelRef = useRef<HTMLDivElement>(null)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const [fixedPos, setFixedPos] = useState<{ left: number; top: number } | null>(null)
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      const target = e.target as Node
+      if (
+        ref.current && !ref.current.contains(target) &&
+        (!panelRef.current || !panelRef.current.contains(target))
+      ) setOpen(false)
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [])
+
+  useEffect(() => {
+    if (open && buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect()
+      let top = rect.bottom + 4
+      if (panelRef.current) {
+        const maxTop = window.innerHeight - panelRef.current.offsetHeight - 8
+        top = Math.min(top, Math.max(8, maxTop))
+      }
+      setFixedPos({ left: rect.left, top })
+      requestAnimationFrame(() => {
+        if (buttonRef.current) {
+          const r = buttonRef.current.getBoundingClientRect()
+          setFixedPos({ left: r.left, top: r.bottom + 4 })
+        }
+      })
+    }
+  }, [open])
+
+  const dropdown = (
+    <AnimatePresence>
+      {open && (
+        <motion.div
+          ref={panelRef}
+          initial={{ opacity: 0, y: 10, scale: 0.95 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          exit={{ opacity: 0, y: 10, scale: 0.95 }}
+          transition={{ duration: 0.15 }}
+          className="fixed z-50 w-72 bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-xl shadow-xl shadow-black/20 overflow-hidden origin-top-left"
+          style={fixedPos ? { left: fixedPos.left, top: fixedPos.top } : undefined}
+        >
+          <div className="p-4">
+            <div className="text-xs font-medium text-neutral-400 tracking-wider mb-3">Ciphera Apps</div>
+            <div className="grid grid-cols-3 gap-3">
+              {CIPHERA_APPS.map((app) => {
+                const isCurrent = app.id === 'pulse'
+                return (
+                  <a
+                    key={app.id}
+                    href={app.href}
+                    onClick={(e) => { if (isCurrent) { e.preventDefault(); setOpen(false) } else setOpen(false) }}
+                    className={`group flex flex-col items-center gap-2 p-3 rounded-xl transition-all ${
+                      isCurrent ? 'bg-neutral-800/50 cursor-default' : 'hover:bg-neutral-800/50'
+                    }`}
+                  >
+                    <div className="w-10 h-10 flex items-center justify-center shrink-0">
+                      <img src={app.icon} alt={app.name} className="w-8 h-8 object-contain" />
+                    </div>
+                    <span className="text-xs font-medium text-white text-center">{app.name}</span>
+                  </a>
+                )
+              })}
+            </div>
+            <div className="h-px bg-white/[0.06] my-3" />
+            <a href="https://ciphera.net/products" target="_blank" rel="noopener noreferrer" className="flex items-center justify-center gap-1 text-xs text-brand-orange hover:underline">
+              View all products
+              <ExternalLinkIcon className="h-3 w-3" />
+            </a>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        ref={buttonRef}
+        onClick={() => setOpen(!open)}
+        className="inline-flex items-center gap-1 text-neutral-500 hover:text-neutral-300 transition-colors cursor-pointer"
+      >
+        <span>Pulse</span>
+        <CaretDown className="w-3 h-3 shrink-0 translate-y-px" />
+      </button>
+      {typeof document !== 'undefined' ? createPortal(dropdown, document.body) : dropdown}
+    </div>
+  )
+}
+
 // ─── Breadcrumb Site Picker ────────────────────────────────
 
 function BreadcrumbSitePicker({ currentSiteId, currentSiteName }: { currentSiteId: string; currentSiteName: string }) {
@@ -233,17 +338,21 @@ function GlassTopBar({ siteId }: { siteId: string | null }) {
         >
           <SidebarSimple className="w-[18px] h-[18px]" weight={collapsed ? 'regular' : 'fill'} />
         </button>
-        {siteId && siteName ? (
-          <nav className="flex items-center gap-1 text-sm font-medium">
-            <Link href="/" className="text-neutral-500 hover:text-neutral-300 transition-colors">Your Sites</Link>
-            <CaretRight className="w-3 h-3 text-neutral-600" />
-            <BreadcrumbSitePicker currentSiteId={siteId} currentSiteName={siteName} />
-            <CaretRight className="w-3 h-3 text-neutral-600" />
+        <nav className="flex items-center gap-1 text-sm font-medium">
+          <BreadcrumbAppSwitcher />
+          <CaretRight className="w-3 h-3 text-neutral-600" />
+          {siteId && siteName ? (
+            <>
+              <Link href="/" className="text-neutral-500 hover:text-neutral-300 transition-colors">Your Sites</Link>
+              <CaretRight className="w-3 h-3 text-neutral-600" />
+              <BreadcrumbSitePicker currentSiteId={siteId} currentSiteName={siteName} />
+              <CaretRight className="w-3 h-3 text-neutral-600" />
+              <span className="text-neutral-400">{pageTitle}</span>
+            </>
+          ) : (
             <span className="text-neutral-400">{pageTitle}</span>
-          </nav>
-        ) : (
-          <span className="text-sm text-neutral-400 font-medium">{pageTitle}</span>
-        )}
+          )}
+        </nav>
       </div>
 
       {/* Realtime indicator */}
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 5214f48..dca4d4b 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -25,39 +25,10 @@ import {
   PlusIcon,
   XIcon,
   BookOpenIcon,
-  AppLauncher,
   UserMenu,
-  type CipheraApp,
 } from '@ciphera-net/ui'
 import NotificationCenter from '@/components/notifications/NotificationCenter'
 
-const CIPHERA_APPS: CipheraApp[] = [
-  {
-    id: 'pulse',
-    name: 'Pulse',
-    description: 'Your current app — Privacy-first analytics',
-    icon: 'https://ciphera.net/pulse_icon_no_margins.png',
-    href: 'https://pulse.ciphera.net',
-    isAvailable: false,
-  },
-  {
-    id: 'drop',
-    name: 'Drop',
-    description: 'Secure file sharing',
-    icon: 'https://ciphera.net/drop_icon_no_margins.png',
-    href: 'https://drop.ciphera.net',
-    isAvailable: true,
-  },
-  {
-    id: 'auth',
-    name: 'Auth',
-    description: 'Your Ciphera account settings',
-    icon: 'https://ciphera.net/auth_icon_no_margins.png',
-    href: 'https://auth.ciphera.net',
-    isAvailable: true,
-  },
-]
-
 const EXPANDED = 256
 const COLLAPSED = 64
 
@@ -287,16 +258,6 @@ function SidebarContent({
 
   return (
     <div className="flex flex-col h-full overflow-hidden">
-      {/* App Switcher — top of sidebar (scope-level switch) */}
-      <div className="flex items-center gap-2.5 px-[14px] pt-1.5 pb-1 shrink-0 overflow-hidden">
-        <span className="w-9 h-9 flex items-center justify-center shrink-0">
-          <AppLauncher apps={CIPHERA_APPS} currentAppId="pulse" anchor="right" />
-        </span>
-        <Label collapsed={c}>
-          <span className="text-xs font-medium text-neutral-400 dark:text-neutral-500 uppercase tracking-wider">Ciphera</span>
-        </Label>
-      </div>
-
       {/* Logo — fixed layout, text fades */}
       <Link href="/" className="flex items-center gap-3 px-[14px] py-4 shrink-0 group overflow-hidden">
         <span className="w-9 h-9 flex items-center justify-center shrink-0">
-- 
2.49.1


From 9053004e25c1d06750bfa67d5a5db3416d9b6ed1 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 28 Mar 2026 21:26:28 +0100
Subject: [PATCH 417/428] fix(search): show skeleton until overview data loads,
 not just GSC status

---
 app/sites/[id]/search/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/sites/[id]/search/page.tsx b/app/sites/[id]/search/page.tsx
index 65f15a8..7375799 100644
--- a/app/sites/[id]/search/page.tsx
+++ b/app/sites/[id]/search/page.tsx
@@ -64,7 +64,7 @@ export default function SearchConsolePage() {
   const { data: topPages, isLoading: pagesLoading } = useGSCTopPages(siteId, dateRange.start, dateRange.end, PAGE_SIZE, pagePage * PAGE_SIZE)
   const { data: newQueries } = useGSCNewQueries(siteId, dateRange.start, dateRange.end)
 
-  const showSkeleton = useMinimumLoading(!gscStatus)
+  const showSkeleton = useMinimumLoading(!gscStatus || (gscStatus?.connected && !overview))
   const fadeClass = useSkeletonFade(showSkeleton)
 
   // Document title
-- 
2.49.1


From 24fb5258d5618afdc2a86602d0f3b3684a994bc0 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 28 Mar 2026 22:21:49 +0100
Subject: [PATCH 418/428] feat: double sidebar with icon rail + nav panel

Rail (always visible, 56px): Pulse logo, home icon, site favicons
with quick switch, add site, notifications, profile.
Panel (collapsible, 200px): context-specific nav groups.
Site favicons in rail show ring highlight for active site.
Collapse toggle hides panel, rail stays visible.
---
 components/dashboard/DashboardShell.tsx |   8 +-
 components/dashboard/Sidebar.tsx        | 569 +++++++++++-------------
 2 files changed, 258 insertions(+), 319 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index c328b8a..765bc43 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -57,7 +57,7 @@ const Sidebar = dynamic(() => import('./Sidebar'), {
   loading: () => (
     <div
       className="hidden md:block shrink-0 bg-transparent overflow-hidden relative"
-      style={{ width: 64 }}
+      style={{ width: 56 }}
     >
       <div className="absolute inset-0 bg-gradient-to-r from-transparent via-neutral-800/10 to-transparent animate-shimmer" />
     </div>
@@ -340,13 +340,13 @@ function GlassTopBar({ siteId }: { siteId: string | null }) {
         </button>
         <nav className="flex items-center gap-1 text-sm font-medium">
           <BreadcrumbAppSwitcher />
-          <CaretRight className="w-3 h-3 text-neutral-600" />
+          <CaretRight className="w-3.5 h-3.5 text-neutral-600" weight="bold" />
           {siteId && siteName ? (
             <>
               <Link href="/" className="text-neutral-500 hover:text-neutral-300 transition-colors">Your Sites</Link>
-              <CaretRight className="w-3 h-3 text-neutral-600" />
+              <CaretRight className="w-3.5 h-3.5 text-neutral-600" weight="bold" />
               <BreadcrumbSitePicker currentSiteId={siteId} currentSiteName={siteName} />
-              <CaretRight className="w-3 h-3 text-neutral-600" />
+              <CaretRight className="w-3.5 h-3.5 text-neutral-600" weight="bold" />
               <span className="text-neutral-400">{pageTitle}</span>
             </>
           ) : (
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index dca4d4b..c643a2c 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -1,18 +1,17 @@
 'use client'
 
-import { useState, useEffect, useRef, useCallback } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
 import { listSites, type Site } from '@/lib/api/sites'
 import { useAuth } from '@/lib/auth/context'
 import { useUnifiedSettings } from '@/lib/unified-settings-context'
 import { useSidebar } from '@/lib/sidebar-context'
-// `,` shortcut handled globally by UnifiedSettingsModal
 import { getUserOrganizations, switchContext, type OrganizationMember } from '@/lib/api/organization'
 import { setSessionAction } from '@/app/actions/auth'
 import { logger } from '@/lib/utils/logger'
 import { FAVICON_SERVICE_URL } from '@/lib/utils/favicon'
-import { Gauge as GaugeIcon, Plugs as PlugsIcon, Tag as TagIcon } from '@phosphor-icons/react'
+import { Gauge as GaugeIcon, Plugs as PlugsIcon, Tag as TagIcon, House as HomeIcon } from '@phosphor-icons/react'
 import {
   LayoutDashboardIcon,
   PathIcon,
@@ -29,8 +28,8 @@ import {
 } from '@ciphera-net/ui'
 import NotificationCenter from '@/components/notifications/NotificationCenter'
 
-const EXPANDED = 256
-const COLLAPSED = 64
+const RAIL_WIDTH = 56
+const PANEL_WIDTH = 200
 
 type IconWeight = 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'
 
@@ -68,24 +67,132 @@ const SETTINGS_ITEM: NavItem = {
   label: 'Site Settings', href: (id) => `/sites/${id}/settings`, icon: SettingsIcon, matchPrefix: true,
 }
 
-// Label that fades with the sidebar — always in the DOM, never removed
-function Label({ children, collapsed }: { children: React.ReactNode; collapsed: boolean }) {
+// ─── Rail ──────────────────────────────────────────────────
+
+function SidebarRail({
+  sites, currentSiteId, auth, orgs, onSwitchOrganization, openSettings, openOrgSettings, onMobileClose, isMobile,
+}: {
+  sites: Site[]; currentSiteId: string | null
+  auth: ReturnType<typeof useAuth>; orgs: OrganizationMember[]
+  onSwitchOrganization: (orgId: string | null) => Promise<void>
+  openSettings: () => void; openOrgSettings: () => void
+  onMobileClose?: () => void; isMobile?: boolean
+}) {
+  const pathname = usePathname()
+  const router = useRouter()
+  const { user } = auth
+  const isHome = !currentSiteId
+
   return (
-    <span
-      className="whitespace-nowrap overflow-hidden transition-opacity duration-150"
-      style={{ opacity: collapsed ? 0 : 1 }}
-    >
-      {children}
-    </span>
+    <div className="w-14 flex flex-col items-center shrink-0 border-r border-white/[0.06] py-2 gap-1">
+      {/* Pulse logo */}
+      <Link href="/" className="w-9 h-9 flex items-center justify-center shrink-0 group mb-1" onClick={isMobile ? onMobileClose : undefined}>
+        <img src="/pulse_icon_no_margins.png" alt="Pulse" className="w-7 h-7 object-contain group-hover:scale-110 transition-transform duration-200" />
+      </Link>
+
+      <div className="w-7 border-t border-white/[0.06] my-1" />
+
+      {/* Home */}
+      <div className="relative group/rail">
+        <Link
+          href="/"
+          onClick={isMobile ? onMobileClose : undefined}
+          className={`w-9 h-9 flex items-center justify-center rounded-lg transition-all duration-150 ${
+            isHome
+              ? 'bg-brand-orange/10 text-brand-orange'
+              : 'text-neutral-500 hover:text-white hover:bg-white/[0.06]'
+          }`}
+        >
+          <HomeIcon className="w-[18px] h-[18px]" weight={isHome ? 'fill' : 'regular'} />
+        </Link>
+        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/rail:opacity-100 transition-opacity duration-150 delay-150 z-50">
+          Your Sites
+        </span>
+      </div>
+
+      {/* Site favicons */}
+      <div className="flex-1 overflow-y-auto overflow-x-hidden flex flex-col items-center gap-1 py-1 min-h-0">
+        {sites.map((site) => {
+          const isActive = currentSiteId === site.id
+          const siteSection = pathname.replace(/^\/sites\/[^/]+/, '')
+          return (
+            <div key={site.id} className="relative group/rail shrink-0">
+              <Link
+                href={`/sites/${site.id}${siteSection || ''}`}
+                onClick={isMobile ? onMobileClose : undefined}
+                className={`w-9 h-9 flex items-center justify-center rounded-lg overflow-hidden transition-all duration-150 ${
+                  isActive
+                    ? 'ring-2 ring-brand-orange/60 ring-offset-1 ring-offset-neutral-900'
+                    : 'hover:bg-white/[0.06]'
+                }`}
+              >
+                <img
+                  src={`${FAVICON_SERVICE_URL}?domain=${site.domain}&sz=64`}
+                  alt={site.name}
+                  className="w-5 h-5 rounded object-contain"
+                />
+              </Link>
+              <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/rail:opacity-100 transition-opacity duration-150 delay-150 z-50">
+                {site.name}
+              </span>
+            </div>
+          )
+        })}
+
+        {/* Add new site */}
+        <div className="relative group/rail shrink-0">
+          <Link
+            href="/sites/new"
+            onClick={isMobile ? onMobileClose : undefined}
+            className="w-9 h-9 flex items-center justify-center rounded-lg text-neutral-600 hover:text-brand-orange hover:bg-white/[0.06] transition-all duration-150"
+          >
+            <PlusIcon className="w-4 h-4" />
+          </Link>
+          <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/rail:opacity-100 transition-opacity duration-150 delay-150 z-50">
+            Add new site
+          </span>
+        </div>
+      </div>
+
+      <div className="w-7 border-t border-white/[0.06] my-1" />
+
+      {/* Bottom: Notifications + Profile */}
+      <div className="flex flex-col items-center gap-1">
+        <div className="relative group/rail">
+          <NotificationCenter anchor="right" variant="sidebar" />
+          <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/rail:opacity-100 transition-opacity duration-150 delay-150 z-50">
+            Notifications
+          </span>
+        </div>
+        <div className="relative group/rail">
+          <UserMenu
+            auth={auth}
+            LinkComponent={Link}
+            orgs={orgs}
+            activeOrgId={auth.user?.org_id}
+            onSwitchOrganization={onSwitchOrganization}
+            onCreateOrganization={() => router.push('/onboarding')}
+            allowPersonalOrganization={false}
+            onOpenSettings={openSettings}
+            onOpenOrgSettings={openOrgSettings}
+            compact
+            anchor="right"
+          />
+          <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/rail:opacity-100 transition-opacity duration-150 delay-150 z-50">
+            {user?.display_name?.trim() || 'Profile'}
+          </span>
+        </div>
+      </div>
+    </div>
   )
 }
 
-// ─── Nav Item ───────────────────────────────────────────────
+// ─── Panel Nav Link ────────────────────────────────────────
 
 function NavLink({
-  item, siteId, collapsed, onClick, pendingHref, onNavigate,
+  item, siteId, onClick, pendingHref, onNavigate,
 }: {
-  item: NavItem; siteId: string; collapsed: boolean; onClick?: () => void
+  item: NavItem; siteId: string; onClick?: () => void
   pendingHref: string | null; onNavigate: (href: string) => void
 }) {
   const pathname = usePathname()
@@ -95,304 +202,146 @@ function NavLink({
   const active = matchesPathname || matchesPending
 
   return (
-    <div className="relative group/nav">
-      <Link
-        href={href}
-        onClick={() => { onNavigate(href); onClick?.() }}
-        className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 ${
-          active
-            ? 'bg-brand-orange/10 text-brand-orange'
-            : 'text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5'
-        }`}
-      >
-        <span className="w-7 h-7 flex items-center justify-center shrink-0">
-          <item.icon className="w-[18px] h-[18px]" weight={active ? 'fill' : 'regular'} />
-        </span>
-        <Label collapsed={collapsed}>{item.label}</Label>
-      </Link>
-      {collapsed && (
-        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/nav:opacity-100 transition-opacity duration-150 delay-150 z-50">
-          {item.label}
-        </span>
-      )}
-    </div>
+    <Link
+      href={href}
+      onClick={() => { onNavigate(href); onClick?.() }}
+      className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium transition-all duration-150 ${
+        active
+          ? 'bg-brand-orange/10 text-brand-orange'
+          : 'text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5'
+      }`}
+    >
+      <span className="w-5 h-5 flex items-center justify-center shrink-0">
+        <item.icon className="w-[16px] h-[16px]" weight={active ? 'fill' : 'regular'} />
+      </span>
+      <span className="whitespace-nowrap overflow-hidden">{item.label}</span>
+    </Link>
   )
 }
 
-// ─── Settings Button (opens unified modal instead of navigating) ─────
+// ─── Panel Settings Button ─────────────────────────────────
 
 function SettingsButton({
-  item, collapsed, onClick, settingsContext = 'site',
+  item, onClick, settingsContext = 'site',
 }: {
-  item: NavItem; collapsed: boolean; onClick?: () => void; settingsContext?: 'site' | 'workspace'
+  item: NavItem; onClick?: () => void; settingsContext?: 'site' | 'workspace'
 }) {
   const { openUnifiedSettings } = useUnifiedSettings()
 
   return (
-    <div className="relative group/nav">
-      <button
-        onClick={() => {
-          openUnifiedSettings({ context: settingsContext, tab: 'general' })
-          onClick?.()
-        }}
-        className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5 w-full cursor-pointer"
-      >
-        <span className="w-7 h-7 flex items-center justify-center shrink-0">
-          <item.icon className="w-[18px] h-[18px]" weight="regular" />
-        </span>
-        <Label collapsed={collapsed}>{item.label}</Label>
-      </button>
-      {collapsed && (
-        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/nav:opacity-100 transition-opacity duration-150 delay-150 z-50">
-          {item.label}
-        </span>
-      )}
-    </div>
+    <button
+      onClick={() => { openUnifiedSettings({ context: settingsContext, tab: 'general' }); onClick?.() }}
+      className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium transition-all duration-150 text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5 w-full cursor-pointer"
+    >
+      <span className="w-5 h-5 flex items-center justify-center shrink-0">
+        <item.icon className="w-[16px] h-[16px]" weight="regular" />
+      </span>
+      <span className="whitespace-nowrap overflow-hidden">{item.label}</span>
+    </button>
   )
 }
 
-// ─── Home Nav Link (static href, no siteId) ───────────────
+// ─── Panel Home Nav Link ───────────────────────────────────
 
 function HomeNavLink({
-  href, icon: Icon, label, collapsed, onClick, external,
+  href, icon: Icon, label, onClick, external,
 }: {
   href: string; icon: React.ComponentType<{ className?: string; weight?: IconWeight }>
-  label: string; collapsed: boolean; onClick?: () => void; external?: boolean
+  label: string; onClick?: () => void; external?: boolean
 }) {
   const pathname = usePathname()
   const active = !external && pathname === href
 
   return (
-    <div className="relative group/nav">
-      <Link
-        href={href}
-        onClick={onClick}
-        {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
-        className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 ${
-          active
-            ? 'bg-brand-orange/10 text-brand-orange'
-            : 'text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5'
-        }`}
-      >
-        <span className="w-7 h-7 flex items-center justify-center shrink-0">
-          <Icon className="w-[18px] h-[18px]" weight={active ? 'fill' : 'regular'} />
-        </span>
-        <Label collapsed={collapsed}>{label}</Label>
-      </Link>
-      {collapsed && (
-        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/nav:opacity-100 transition-opacity duration-150 delay-150 z-50">
-          {label}
-        </span>
-      )}
+    <Link
+      href={href}
+      onClick={onClick}
+      {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+      className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium transition-all duration-150 ${
+        active
+          ? 'bg-brand-orange/10 text-brand-orange'
+          : 'text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5'
+      }`}
+    >
+      <span className="w-5 h-5 flex items-center justify-center shrink-0">
+        <Icon className="w-[16px] h-[16px]" weight={active ? 'fill' : 'regular'} />
+      </span>
+      <span className="whitespace-nowrap overflow-hidden">{label}</span>
+    </Link>
+  )
+}
+
+// ─── Panel ─────────────────────────────────────────────────
+
+function GroupLabel({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="h-5 flex items-center overflow-hidden">
+      <p className="px-2.5 text-[11px] font-semibold text-neutral-500 uppercase tracking-wider whitespace-nowrap">
+        {children}
+      </p>
     </div>
   )
 }
 
-// ─── Home Site Link (favicon + name) ───────────────────────
-
-function HomeSiteLink({
-  site, collapsed, onClick,
+function SidebarPanel({
+  collapsed, siteId, sites, canEdit, pendingHref, onNavigate, onMobileClose, isMobile,
 }: {
-  site: Site; collapsed: boolean; onClick?: () => void
+  collapsed: boolean; siteId: string | null; sites: Site[]; canEdit: boolean
+  pendingHref: string | null; onNavigate: (href: string) => void
+  onMobileClose?: () => void; isMobile?: boolean
 }) {
-  const pathname = usePathname()
-  const href = `/sites/${site.id}`
-  const active = pathname.startsWith(href)
-
-  return (
-    <div className="relative group/nav">
-      <Link
-        href={href}
-        onClick={onClick}
-        className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 ${
-          active
-            ? 'bg-brand-orange/10 text-brand-orange'
-            : 'text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5'
-        }`}
-      >
-        <span className="w-7 h-7 rounded-md bg-white/[0.04] flex items-center justify-center shrink-0 overflow-hidden">
-          <img
-            src={`${FAVICON_SERVICE_URL}?domain=${site.domain}&sz=64`}
-            alt=""
-            className="w-[18px] h-[18px] rounded object-contain"
-          />
-        </span>
-        <Label collapsed={collapsed}>{site.name}</Label>
-      </Link>
-      {collapsed && (
-        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/nav:opacity-100 transition-opacity duration-150 delay-150 z-50">
-          {site.name}
-        </span>
-      )}
-    </div>
-  )
-}
-
-// ─── Sidebar Content ────────────────────────────────────────
-
-interface SidebarContentProps {
-  isMobile: boolean
-  collapsed: boolean
-  siteId: string | null
-  sites: Site[]
-  canEdit: boolean
-  pendingHref: string | null
-  onNavigate: (href: string) => void
-  onMobileClose: () => void
-  onToggle: () => void
-  auth: ReturnType<typeof useAuth>
-  orgs: OrganizationMember[]
-  onSwitchOrganization: (orgId: string | null) => Promise<void>
-  openSettings: () => void
-  openOrgSettings: () => void
-}
-
-function SidebarContent({
-  isMobile, collapsed, siteId, sites, canEdit, pendingHref,
-  onNavigate, onMobileClose, onToggle,
-  auth, orgs, onSwitchOrganization, openSettings, openOrgSettings,
-}: SidebarContentProps) {
-  const router = useRouter()
   const c = isMobile ? false : collapsed
-  const { user } = auth
+  const mobileClick = isMobile ? onMobileClose : undefined
 
   return (
-    <div className="flex flex-col h-full overflow-hidden">
-      {/* Logo — fixed layout, text fades */}
-      <Link href="/" className="flex items-center gap-3 px-[14px] py-4 shrink-0 group overflow-hidden">
-        <span className="w-9 h-9 flex items-center justify-center shrink-0">
-          <img src="/pulse_icon_no_margins.png" alt="Pulse" className="w-9 h-9 shrink-0 object-contain group-hover:scale-105 transition-transform duration-200" />
-        </span>
-        <span className={`text-xl font-bold text-white tracking-tight group-hover:text-brand-orange whitespace-nowrap transition-opacity duration-150 ${c ? 'opacity-0' : 'opacity-100'}`}>
-          Pulse
-        </span>
-      </Link>
-
-      {/* Nav Groups */}
-      {siteId ? (
-        <nav className="flex-1 overflow-y-auto overflow-x-hidden px-2 space-y-4">
-          {NAV_GROUPS.map((group) => (
-            <div key={group.label}>
-              {c ? (
-                <div className="mx-3 my-2 border-t border-white/[0.04]" />
-              ) : (
-                <div className="h-5 flex items-center overflow-hidden">
-                  <p className="px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap">
-                    {group.label}
-                  </p>
+    <div
+      className="overflow-hidden shrink-0 transition-all duration-200"
+      style={{ width: c ? 0 : PANEL_WIDTH }}
+    >
+      <div className="h-full flex flex-col overflow-hidden" style={{ width: PANEL_WIDTH }}>
+        {/* Panel nav content */}
+        <nav className="flex-1 overflow-y-auto overflow-x-hidden px-2 py-3 space-y-4">
+          {siteId ? (
+            /* Site context: Analytics + Infrastructure */
+            NAV_GROUPS.map((group) => (
+              <div key={group.label}>
+                <GroupLabel>{group.label}</GroupLabel>
+                <div className="space-y-0.5">
+                  {group.items.map((item) => (
+                    <NavLink key={item.label} item={item} siteId={siteId} onClick={mobileClick} pendingHref={pendingHref} onNavigate={onNavigate} />
+                  ))}
+                  {group.label === 'Infrastructure' && canEdit && (
+                    <SettingsButton item={SETTINGS_ITEM} onClick={mobileClick} />
+                  )}
                 </div>
-              )}
-              <div className="space-y-0.5">
-                {group.items.map((item) => (
-                  <NavLink key={item.label} item={item} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={onNavigate} />
-                ))}
-                {group.label === 'Infrastructure' && canEdit && (
-                  <SettingsButton item={SETTINGS_ITEM} collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
-                )}
               </div>
-            </div>
-          ))}
+            ))
+          ) : (
+            /* Home context: Workspace + Resources */
+            <>
+              <div>
+                <GroupLabel>Workspace</GroupLabel>
+                <div className="space-y-0.5">
+                  <HomeNavLink href="/integrations" icon={PlugsIcon} label="Integrations" onClick={mobileClick} />
+                  <HomeNavLink href="/pricing" icon={TagIcon} label="Pricing" onClick={mobileClick} />
+                  <SettingsButton item={{ label: 'Workspace Settings', href: () => '', icon: SettingsIcon, matchPrefix: false }} onClick={mobileClick} settingsContext="workspace" />
+                </div>
+              </div>
+              <div>
+                <GroupLabel>Resources</GroupLabel>
+                <div className="space-y-0.5">
+                  <HomeNavLink href="https://docs.ciphera.net" icon={BookOpenIcon} label="Documentation" onClick={mobileClick} external />
+                </div>
+              </div>
+            </>
+          )}
         </nav>
-      ) : (
-        <nav className="flex-1 overflow-y-auto overflow-x-hidden px-2 space-y-4">
-          {/* Your Sites */}
-          <div>
-            {c ? (
-              <div className="mx-3 my-2 border-t border-white/[0.04]" />
-            ) : (
-              <div className="h-5 flex items-center overflow-hidden">
-                <p className="px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap">
-                  Your Sites
-                </p>
-              </div>
-            )}
-            <div className="space-y-0.5">
-              {sites.map((site) => (
-                <HomeSiteLink key={site.id} site={site} collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
-              ))}
-              <HomeNavLink href="/sites/new" icon={PlusIcon} label="Add New Site" collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
-            </div>
-          </div>
-
-          {/* Workspace */}
-          <div>
-            {c ? (
-              <div className="mx-3 my-2 border-t border-white/[0.04]" />
-            ) : (
-              <div className="h-5 flex items-center overflow-hidden">
-                <p className="px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap">
-                  Workspace
-                </p>
-              </div>
-            )}
-            <div className="space-y-0.5">
-              <HomeNavLink href="/integrations" icon={PlugsIcon} label="Integrations" collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
-              <HomeNavLink href="/pricing" icon={TagIcon} label="Pricing" collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
-              <SettingsButton item={{ label: 'Workspace Settings', href: () => '', icon: SettingsIcon, matchPrefix: false }} collapsed={c} onClick={isMobile ? onMobileClose : undefined} settingsContext="workspace" />
-            </div>
-          </div>
-
-          {/* Resources */}
-          <div>
-            {c ? (
-              <div className="mx-3 my-2 border-t border-white/[0.04]" />
-            ) : (
-              <div className="h-5 flex items-center overflow-hidden">
-                <p className="px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap">
-                  Resources
-                </p>
-              </div>
-            )}
-            <div className="space-y-0.5">
-              <HomeNavLink href="https://docs.ciphera.net" icon={BookOpenIcon} label="Documentation" collapsed={c} onClick={isMobile ? onMobileClose : undefined} external />
-            </div>
-          </div>
-        </nav>
-      )}
-
-      {/* Bottom — utility items */}
-      <div className="border-t border-white/[0.06] px-2 py-3 shrink-0">
-        {/* Notifications, Profile — same layout as nav items */}
-        <div className="space-y-0.5 mb-1">
-          <div className="relative group/notif">
-            <NotificationCenter anchor="right" variant="sidebar">
-              <Label collapsed={c}>Notifications</Label>
-            </NotificationCenter>
-            {c && (
-              <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/notif:opacity-100 transition-opacity duration-150 delay-150 z-50">
-                Notifications
-              </span>
-            )}
-          </div>
-          <div className="relative group/user">
-            <UserMenu
-              auth={auth}
-              LinkComponent={Link}
-              orgs={orgs}
-              activeOrgId={auth.user?.org_id}
-              onSwitchOrganization={onSwitchOrganization}
-              onCreateOrganization={() => router.push('/onboarding')}
-              allowPersonalOrganization={false}
-              onOpenSettings={openSettings}
-              onOpenOrgSettings={openOrgSettings}
-              compact
-              anchor="right"
-            >
-              <Label collapsed={c}>{user?.display_name?.trim() || 'Profile'}</Label>
-            </UserMenu>
-            {c && (
-              <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/user:opacity-100 transition-opacity duration-150 delay-150 z-50">
-                {user?.display_name?.trim() || 'Profile'}
-              </span>
-            )}
-          </div>
-        </div>
       </div>
     </div>
   )
 }
 
-// ─── Main Sidebar ───────────────────────────────────────────
+// ─── Main Sidebar ──────────────────────────────────────────
 
 export default function Sidebar({
   siteId, mobileOpen, onMobileClose, onMobileOpen,
@@ -435,37 +384,38 @@ export default function Sidebar({
 
   const handleMobileClose = useCallback(() => {
     setMobileClosing(true)
-    setTimeout(() => {
-      setMobileClosing(false)
-      onMobileClose()
-    }, 200)
+    setTimeout(() => { setMobileClosing(false); onMobileClose() }, 200)
   }, [onMobileClose])
 
   const handleNavigate = useCallback((href: string) => { setPendingHref(href) }, [])
 
+  const railProps = {
+    sites,
+    currentSiteId: siteId,
+    auth,
+    orgs,
+    onSwitchOrganization: handleSwitchOrganization,
+    openSettings: () => openUnifiedSettings({ context: 'account', tab: 'profile' }),
+    openOrgSettings: () => openUnifiedSettings({ context: 'workspace', tab: 'general' }),
+  }
+
+  const panelProps = {
+    siteId,
+    sites,
+    canEdit,
+    pendingHref,
+    onNavigate: handleNavigate,
+  }
+
   return (
     <>
-      {/* Desktop — ssr:false means this only renders on client, no hydration flash */}
+      {/* Desktop */}
       <aside
-        className="hidden md:flex flex-col shrink-0 bg-transparent overflow-hidden relative z-10"
-        style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
+        className="hidden md:flex shrink-0 bg-transparent overflow-hidden relative z-10"
+        style={{ width: collapsed ? RAIL_WIDTH : RAIL_WIDTH + PANEL_WIDTH, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
       >
-        <SidebarContent
-          isMobile={false}
-          collapsed={collapsed}
-          siteId={siteId}
-          sites={sites}
-          canEdit={canEdit}
-          pendingHref={pendingHref}
-          onNavigate={handleNavigate}
-          onMobileClose={onMobileClose}
-          onToggle={toggle}
-          auth={auth}
-          orgs={orgs}
-          onSwitchOrganization={handleSwitchOrganization}
-          openSettings={() => openUnifiedSettings({ context: 'account', tab: 'profile' })}
-          openOrgSettings={() => openUnifiedSettings({ context: 'workspace', tab: 'general' })}
-        />
+        <SidebarRail {...railProps} />
+        <SidebarPanel {...panelProps} collapsed={collapsed} />
       </aside>
 
       {/* Mobile overlay */}
@@ -478,11 +428,12 @@ export default function Sidebar({
             onClick={handleMobileClose}
           />
           <aside
-            className={`fixed inset-y-0 left-0 z-50 w-72 bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border-r border-white/[0.08] shadow-xl shadow-black/20 md:hidden ${
+            className={`fixed inset-y-0 left-0 z-50 bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border-r border-white/[0.08] shadow-xl shadow-black/20 md:hidden ${
               mobileClosing
                 ? 'animate-out slide-out-to-left duration-200 fill-mode-forwards'
                 : 'animate-in slide-in-from-left duration-200'
             }`}
+            style={{ width: RAIL_WIDTH + PANEL_WIDTH }}
           >
             <div className="flex items-center justify-between px-4 py-3 border-b border-white/[0.06]">
               <span className="text-sm font-semibold text-white">Navigation</span>
@@ -490,22 +441,10 @@ export default function Sidebar({
                 <XIcon className="w-5 h-5" />
               </button>
             </div>
-            <SidebarContent
-              isMobile={true}
-              collapsed={collapsed}
-              siteId={siteId}
-              sites={sites}
-              canEdit={canEdit}
-              pendingHref={pendingHref}
-              onNavigate={handleNavigate}
-              onMobileClose={handleMobileClose}
-              onToggle={toggle}
-              auth={auth}
-              orgs={orgs}
-              onSwitchOrganization={handleSwitchOrganization}
-              openSettings={() => openUnifiedSettings({ context: 'account', tab: 'profile' })}
-              openOrgSettings={() => openUnifiedSettings({ context: 'workspace', tab: 'general' })}
-            />
+            <div className="flex h-[calc(100%-49px)]">
+              <SidebarRail {...railProps} onMobileClose={handleMobileClose} isMobile />
+              <SidebarPanel {...panelProps} collapsed={false} onMobileClose={handleMobileClose} isMobile />
+            </div>
           </aside>
         </>
       )}
-- 
2.49.1


From 62df9b3521e64a0eca708e4d27a7f2ab674d6b3f Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 28 Mar 2026 22:27:15 +0100
Subject: [PATCH 419/428] Revert "feat: double sidebar with icon rail + nav
 panel"

This reverts commit 24fb5258d5618afdc2a86602d0f3b3684a994bc0.
---
 components/dashboard/DashboardShell.tsx |   8 +-
 components/dashboard/Sidebar.tsx        | 571 +++++++++++++-----------
 2 files changed, 320 insertions(+), 259 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 765bc43..c328b8a 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -57,7 +57,7 @@ const Sidebar = dynamic(() => import('./Sidebar'), {
   loading: () => (
     <div
       className="hidden md:block shrink-0 bg-transparent overflow-hidden relative"
-      style={{ width: 56 }}
+      style={{ width: 64 }}
     >
       <div className="absolute inset-0 bg-gradient-to-r from-transparent via-neutral-800/10 to-transparent animate-shimmer" />
     </div>
@@ -340,13 +340,13 @@ function GlassTopBar({ siteId }: { siteId: string | null }) {
         </button>
         <nav className="flex items-center gap-1 text-sm font-medium">
           <BreadcrumbAppSwitcher />
-          <CaretRight className="w-3.5 h-3.5 text-neutral-600" weight="bold" />
+          <CaretRight className="w-3 h-3 text-neutral-600" />
           {siteId && siteName ? (
             <>
               <Link href="/" className="text-neutral-500 hover:text-neutral-300 transition-colors">Your Sites</Link>
-              <CaretRight className="w-3.5 h-3.5 text-neutral-600" weight="bold" />
+              <CaretRight className="w-3 h-3 text-neutral-600" />
               <BreadcrumbSitePicker currentSiteId={siteId} currentSiteName={siteName} />
-              <CaretRight className="w-3.5 h-3.5 text-neutral-600" weight="bold" />
+              <CaretRight className="w-3 h-3 text-neutral-600" />
               <span className="text-neutral-400">{pageTitle}</span>
             </>
           ) : (
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index c643a2c..dca4d4b 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -1,17 +1,18 @@
 'use client'
 
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect, useRef, useCallback } from 'react'
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
 import { listSites, type Site } from '@/lib/api/sites'
 import { useAuth } from '@/lib/auth/context'
 import { useUnifiedSettings } from '@/lib/unified-settings-context'
 import { useSidebar } from '@/lib/sidebar-context'
+// `,` shortcut handled globally by UnifiedSettingsModal
 import { getUserOrganizations, switchContext, type OrganizationMember } from '@/lib/api/organization'
 import { setSessionAction } from '@/app/actions/auth'
 import { logger } from '@/lib/utils/logger'
 import { FAVICON_SERVICE_URL } from '@/lib/utils/favicon'
-import { Gauge as GaugeIcon, Plugs as PlugsIcon, Tag as TagIcon, House as HomeIcon } from '@phosphor-icons/react'
+import { Gauge as GaugeIcon, Plugs as PlugsIcon, Tag as TagIcon } from '@phosphor-icons/react'
 import {
   LayoutDashboardIcon,
   PathIcon,
@@ -28,8 +29,8 @@ import {
 } from '@ciphera-net/ui'
 import NotificationCenter from '@/components/notifications/NotificationCenter'
 
-const RAIL_WIDTH = 56
-const PANEL_WIDTH = 200
+const EXPANDED = 256
+const COLLAPSED = 64
 
 type IconWeight = 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'
 
@@ -67,132 +68,24 @@ const SETTINGS_ITEM: NavItem = {
   label: 'Site Settings', href: (id) => `/sites/${id}/settings`, icon: SettingsIcon, matchPrefix: true,
 }
 
-// ─── Rail ──────────────────────────────────────────────────
-
-function SidebarRail({
-  sites, currentSiteId, auth, orgs, onSwitchOrganization, openSettings, openOrgSettings, onMobileClose, isMobile,
-}: {
-  sites: Site[]; currentSiteId: string | null
-  auth: ReturnType<typeof useAuth>; orgs: OrganizationMember[]
-  onSwitchOrganization: (orgId: string | null) => Promise<void>
-  openSettings: () => void; openOrgSettings: () => void
-  onMobileClose?: () => void; isMobile?: boolean
-}) {
-  const pathname = usePathname()
-  const router = useRouter()
-  const { user } = auth
-  const isHome = !currentSiteId
-
+// Label that fades with the sidebar — always in the DOM, never removed
+function Label({ children, collapsed }: { children: React.ReactNode; collapsed: boolean }) {
   return (
-    <div className="w-14 flex flex-col items-center shrink-0 border-r border-white/[0.06] py-2 gap-1">
-      {/* Pulse logo */}
-      <Link href="/" className="w-9 h-9 flex items-center justify-center shrink-0 group mb-1" onClick={isMobile ? onMobileClose : undefined}>
-        <img src="/pulse_icon_no_margins.png" alt="Pulse" className="w-7 h-7 object-contain group-hover:scale-110 transition-transform duration-200" />
-      </Link>
-
-      <div className="w-7 border-t border-white/[0.06] my-1" />
-
-      {/* Home */}
-      <div className="relative group/rail">
-        <Link
-          href="/"
-          onClick={isMobile ? onMobileClose : undefined}
-          className={`w-9 h-9 flex items-center justify-center rounded-lg transition-all duration-150 ${
-            isHome
-              ? 'bg-brand-orange/10 text-brand-orange'
-              : 'text-neutral-500 hover:text-white hover:bg-white/[0.06]'
-          }`}
-        >
-          <HomeIcon className="w-[18px] h-[18px]" weight={isHome ? 'fill' : 'regular'} />
-        </Link>
-        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/rail:opacity-100 transition-opacity duration-150 delay-150 z-50">
-          Your Sites
-        </span>
-      </div>
-
-      {/* Site favicons */}
-      <div className="flex-1 overflow-y-auto overflow-x-hidden flex flex-col items-center gap-1 py-1 min-h-0">
-        {sites.map((site) => {
-          const isActive = currentSiteId === site.id
-          const siteSection = pathname.replace(/^\/sites\/[^/]+/, '')
-          return (
-            <div key={site.id} className="relative group/rail shrink-0">
-              <Link
-                href={`/sites/${site.id}${siteSection || ''}`}
-                onClick={isMobile ? onMobileClose : undefined}
-                className={`w-9 h-9 flex items-center justify-center rounded-lg overflow-hidden transition-all duration-150 ${
-                  isActive
-                    ? 'ring-2 ring-brand-orange/60 ring-offset-1 ring-offset-neutral-900'
-                    : 'hover:bg-white/[0.06]'
-                }`}
-              >
-                <img
-                  src={`${FAVICON_SERVICE_URL}?domain=${site.domain}&sz=64`}
-                  alt={site.name}
-                  className="w-5 h-5 rounded object-contain"
-                />
-              </Link>
-              <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/rail:opacity-100 transition-opacity duration-150 delay-150 z-50">
-                {site.name}
-              </span>
-            </div>
-          )
-        })}
-
-        {/* Add new site */}
-        <div className="relative group/rail shrink-0">
-          <Link
-            href="/sites/new"
-            onClick={isMobile ? onMobileClose : undefined}
-            className="w-9 h-9 flex items-center justify-center rounded-lg text-neutral-600 hover:text-brand-orange hover:bg-white/[0.06] transition-all duration-150"
-          >
-            <PlusIcon className="w-4 h-4" />
-          </Link>
-          <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/rail:opacity-100 transition-opacity duration-150 delay-150 z-50">
-            Add new site
-          </span>
-        </div>
-      </div>
-
-      <div className="w-7 border-t border-white/[0.06] my-1" />
-
-      {/* Bottom: Notifications + Profile */}
-      <div className="flex flex-col items-center gap-1">
-        <div className="relative group/rail">
-          <NotificationCenter anchor="right" variant="sidebar" />
-          <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/rail:opacity-100 transition-opacity duration-150 delay-150 z-50">
-            Notifications
-          </span>
-        </div>
-        <div className="relative group/rail">
-          <UserMenu
-            auth={auth}
-            LinkComponent={Link}
-            orgs={orgs}
-            activeOrgId={auth.user?.org_id}
-            onSwitchOrganization={onSwitchOrganization}
-            onCreateOrganization={() => router.push('/onboarding')}
-            allowPersonalOrganization={false}
-            onOpenSettings={openSettings}
-            onOpenOrgSettings={openOrgSettings}
-            compact
-            anchor="right"
-          />
-          <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/rail:opacity-100 transition-opacity duration-150 delay-150 z-50">
-            {user?.display_name?.trim() || 'Profile'}
-          </span>
-        </div>
-      </div>
-    </div>
+    <span
+      className="whitespace-nowrap overflow-hidden transition-opacity duration-150"
+      style={{ opacity: collapsed ? 0 : 1 }}
+    >
+      {children}
+    </span>
   )
 }
 
-// ─── Panel Nav Link ────────────────────────────────────────
+// ─── Nav Item ───────────────────────────────────────────────
 
 function NavLink({
-  item, siteId, onClick, pendingHref, onNavigate,
+  item, siteId, collapsed, onClick, pendingHref, onNavigate,
 }: {
-  item: NavItem; siteId: string; onClick?: () => void
+  item: NavItem; siteId: string; collapsed: boolean; onClick?: () => void
   pendingHref: string | null; onNavigate: (href: string) => void
 }) {
   const pathname = usePathname()
@@ -202,146 +95,304 @@ function NavLink({
   const active = matchesPathname || matchesPending
 
   return (
-    <Link
-      href={href}
-      onClick={() => { onNavigate(href); onClick?.() }}
-      className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium transition-all duration-150 ${
-        active
-          ? 'bg-brand-orange/10 text-brand-orange'
-          : 'text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5'
-      }`}
-    >
-      <span className="w-5 h-5 flex items-center justify-center shrink-0">
-        <item.icon className="w-[16px] h-[16px]" weight={active ? 'fill' : 'regular'} />
-      </span>
-      <span className="whitespace-nowrap overflow-hidden">{item.label}</span>
-    </Link>
+    <div className="relative group/nav">
+      <Link
+        href={href}
+        onClick={() => { onNavigate(href); onClick?.() }}
+        className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 ${
+          active
+            ? 'bg-brand-orange/10 text-brand-orange'
+            : 'text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5'
+        }`}
+      >
+        <span className="w-7 h-7 flex items-center justify-center shrink-0">
+          <item.icon className="w-[18px] h-[18px]" weight={active ? 'fill' : 'regular'} />
+        </span>
+        <Label collapsed={collapsed}>{item.label}</Label>
+      </Link>
+      {collapsed && (
+        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/nav:opacity-100 transition-opacity duration-150 delay-150 z-50">
+          {item.label}
+        </span>
+      )}
+    </div>
   )
 }
 
-// ─── Panel Settings Button ─────────────────────────────────
+// ─── Settings Button (opens unified modal instead of navigating) ─────
 
 function SettingsButton({
-  item, onClick, settingsContext = 'site',
+  item, collapsed, onClick, settingsContext = 'site',
 }: {
-  item: NavItem; onClick?: () => void; settingsContext?: 'site' | 'workspace'
+  item: NavItem; collapsed: boolean; onClick?: () => void; settingsContext?: 'site' | 'workspace'
 }) {
   const { openUnifiedSettings } = useUnifiedSettings()
 
   return (
-    <button
-      onClick={() => { openUnifiedSettings({ context: settingsContext, tab: 'general' }); onClick?.() }}
-      className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium transition-all duration-150 text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5 w-full cursor-pointer"
-    >
-      <span className="w-5 h-5 flex items-center justify-center shrink-0">
-        <item.icon className="w-[16px] h-[16px]" weight="regular" />
-      </span>
-      <span className="whitespace-nowrap overflow-hidden">{item.label}</span>
-    </button>
+    <div className="relative group/nav">
+      <button
+        onClick={() => {
+          openUnifiedSettings({ context: settingsContext, tab: 'general' })
+          onClick?.()
+        }}
+        className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5 w-full cursor-pointer"
+      >
+        <span className="w-7 h-7 flex items-center justify-center shrink-0">
+          <item.icon className="w-[18px] h-[18px]" weight="regular" />
+        </span>
+        <Label collapsed={collapsed}>{item.label}</Label>
+      </button>
+      {collapsed && (
+        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/nav:opacity-100 transition-opacity duration-150 delay-150 z-50">
+          {item.label}
+        </span>
+      )}
+    </div>
   )
 }
 
-// ─── Panel Home Nav Link ───────────────────────────────────
+// ─── Home Nav Link (static href, no siteId) ───────────────
 
 function HomeNavLink({
-  href, icon: Icon, label, onClick, external,
+  href, icon: Icon, label, collapsed, onClick, external,
 }: {
   href: string; icon: React.ComponentType<{ className?: string; weight?: IconWeight }>
-  label: string; onClick?: () => void; external?: boolean
+  label: string; collapsed: boolean; onClick?: () => void; external?: boolean
 }) {
   const pathname = usePathname()
   const active = !external && pathname === href
 
   return (
-    <Link
-      href={href}
-      onClick={onClick}
-      {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
-      className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium transition-all duration-150 ${
-        active
-          ? 'bg-brand-orange/10 text-brand-orange'
-          : 'text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5'
-      }`}
-    >
-      <span className="w-5 h-5 flex items-center justify-center shrink-0">
-        <Icon className="w-[16px] h-[16px]" weight={active ? 'fill' : 'regular'} />
-      </span>
-      <span className="whitespace-nowrap overflow-hidden">{label}</span>
-    </Link>
-  )
-}
-
-// ─── Panel ─────────────────────────────────────────────────
-
-function GroupLabel({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="h-5 flex items-center overflow-hidden">
-      <p className="px-2.5 text-[11px] font-semibold text-neutral-500 uppercase tracking-wider whitespace-nowrap">
-        {children}
-      </p>
+    <div className="relative group/nav">
+      <Link
+        href={href}
+        onClick={onClick}
+        {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+        className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 ${
+          active
+            ? 'bg-brand-orange/10 text-brand-orange'
+            : 'text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5'
+        }`}
+      >
+        <span className="w-7 h-7 flex items-center justify-center shrink-0">
+          <Icon className="w-[18px] h-[18px]" weight={active ? 'fill' : 'regular'} />
+        </span>
+        <Label collapsed={collapsed}>{label}</Label>
+      </Link>
+      {collapsed && (
+        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/nav:opacity-100 transition-opacity duration-150 delay-150 z-50">
+          {label}
+        </span>
+      )}
     </div>
   )
 }
 
-function SidebarPanel({
-  collapsed, siteId, sites, canEdit, pendingHref, onNavigate, onMobileClose, isMobile,
+// ─── Home Site Link (favicon + name) ───────────────────────
+
+function HomeSiteLink({
+  site, collapsed, onClick,
 }: {
-  collapsed: boolean; siteId: string | null; sites: Site[]; canEdit: boolean
-  pendingHref: string | null; onNavigate: (href: string) => void
-  onMobileClose?: () => void; isMobile?: boolean
+  site: Site; collapsed: boolean; onClick?: () => void
 }) {
-  const c = isMobile ? false : collapsed
-  const mobileClick = isMobile ? onMobileClose : undefined
+  const pathname = usePathname()
+  const href = `/sites/${site.id}`
+  const active = pathname.startsWith(href)
 
   return (
-    <div
-      className="overflow-hidden shrink-0 transition-all duration-200"
-      style={{ width: c ? 0 : PANEL_WIDTH }}
-    >
-      <div className="h-full flex flex-col overflow-hidden" style={{ width: PANEL_WIDTH }}>
-        {/* Panel nav content */}
-        <nav className="flex-1 overflow-y-auto overflow-x-hidden px-2 py-3 space-y-4">
-          {siteId ? (
-            /* Site context: Analytics + Infrastructure */
-            NAV_GROUPS.map((group) => (
-              <div key={group.label}>
-                <GroupLabel>{group.label}</GroupLabel>
-                <div className="space-y-0.5">
-                  {group.items.map((item) => (
-                    <NavLink key={item.label} item={item} siteId={siteId} onClick={mobileClick} pendingHref={pendingHref} onNavigate={onNavigate} />
-                  ))}
-                  {group.label === 'Infrastructure' && canEdit && (
-                    <SettingsButton item={SETTINGS_ITEM} onClick={mobileClick} />
-                  )}
+    <div className="relative group/nav">
+      <Link
+        href={href}
+        onClick={onClick}
+        className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 ${
+          active
+            ? 'bg-brand-orange/10 text-brand-orange'
+            : 'text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5'
+        }`}
+      >
+        <span className="w-7 h-7 rounded-md bg-white/[0.04] flex items-center justify-center shrink-0 overflow-hidden">
+          <img
+            src={`${FAVICON_SERVICE_URL}?domain=${site.domain}&sz=64`}
+            alt=""
+            className="w-[18px] h-[18px] rounded object-contain"
+          />
+        </span>
+        <Label collapsed={collapsed}>{site.name}</Label>
+      </Link>
+      {collapsed && (
+        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/nav:opacity-100 transition-opacity duration-150 delay-150 z-50">
+          {site.name}
+        </span>
+      )}
+    </div>
+  )
+}
+
+// ─── Sidebar Content ────────────────────────────────────────
+
+interface SidebarContentProps {
+  isMobile: boolean
+  collapsed: boolean
+  siteId: string | null
+  sites: Site[]
+  canEdit: boolean
+  pendingHref: string | null
+  onNavigate: (href: string) => void
+  onMobileClose: () => void
+  onToggle: () => void
+  auth: ReturnType<typeof useAuth>
+  orgs: OrganizationMember[]
+  onSwitchOrganization: (orgId: string | null) => Promise<void>
+  openSettings: () => void
+  openOrgSettings: () => void
+}
+
+function SidebarContent({
+  isMobile, collapsed, siteId, sites, canEdit, pendingHref,
+  onNavigate, onMobileClose, onToggle,
+  auth, orgs, onSwitchOrganization, openSettings, openOrgSettings,
+}: SidebarContentProps) {
+  const router = useRouter()
+  const c = isMobile ? false : collapsed
+  const { user } = auth
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      {/* Logo — fixed layout, text fades */}
+      <Link href="/" className="flex items-center gap-3 px-[14px] py-4 shrink-0 group overflow-hidden">
+        <span className="w-9 h-9 flex items-center justify-center shrink-0">
+          <img src="/pulse_icon_no_margins.png" alt="Pulse" className="w-9 h-9 shrink-0 object-contain group-hover:scale-105 transition-transform duration-200" />
+        </span>
+        <span className={`text-xl font-bold text-white tracking-tight group-hover:text-brand-orange whitespace-nowrap transition-opacity duration-150 ${c ? 'opacity-0' : 'opacity-100'}`}>
+          Pulse
+        </span>
+      </Link>
+
+      {/* Nav Groups */}
+      {siteId ? (
+        <nav className="flex-1 overflow-y-auto overflow-x-hidden px-2 space-y-4">
+          {NAV_GROUPS.map((group) => (
+            <div key={group.label}>
+              {c ? (
+                <div className="mx-3 my-2 border-t border-white/[0.04]" />
+              ) : (
+                <div className="h-5 flex items-center overflow-hidden">
+                  <p className="px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap">
+                    {group.label}
+                  </p>
                 </div>
+              )}
+              <div className="space-y-0.5">
+                {group.items.map((item) => (
+                  <NavLink key={item.label} item={item} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={onNavigate} />
+                ))}
+                {group.label === 'Infrastructure' && canEdit && (
+                  <SettingsButton item={SETTINGS_ITEM} collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
+                )}
               </div>
-            ))
-          ) : (
-            /* Home context: Workspace + Resources */
-            <>
-              <div>
-                <GroupLabel>Workspace</GroupLabel>
-                <div className="space-y-0.5">
-                  <HomeNavLink href="/integrations" icon={PlugsIcon} label="Integrations" onClick={mobileClick} />
-                  <HomeNavLink href="/pricing" icon={TagIcon} label="Pricing" onClick={mobileClick} />
-                  <SettingsButton item={{ label: 'Workspace Settings', href: () => '', icon: SettingsIcon, matchPrefix: false }} onClick={mobileClick} settingsContext="workspace" />
-                </div>
-              </div>
-              <div>
-                <GroupLabel>Resources</GroupLabel>
-                <div className="space-y-0.5">
-                  <HomeNavLink href="https://docs.ciphera.net" icon={BookOpenIcon} label="Documentation" onClick={mobileClick} external />
-                </div>
-              </div>
-            </>
-          )}
+            </div>
+          ))}
         </nav>
+      ) : (
+        <nav className="flex-1 overflow-y-auto overflow-x-hidden px-2 space-y-4">
+          {/* Your Sites */}
+          <div>
+            {c ? (
+              <div className="mx-3 my-2 border-t border-white/[0.04]" />
+            ) : (
+              <div className="h-5 flex items-center overflow-hidden">
+                <p className="px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap">
+                  Your Sites
+                </p>
+              </div>
+            )}
+            <div className="space-y-0.5">
+              {sites.map((site) => (
+                <HomeSiteLink key={site.id} site={site} collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
+              ))}
+              <HomeNavLink href="/sites/new" icon={PlusIcon} label="Add New Site" collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
+            </div>
+          </div>
+
+          {/* Workspace */}
+          <div>
+            {c ? (
+              <div className="mx-3 my-2 border-t border-white/[0.04]" />
+            ) : (
+              <div className="h-5 flex items-center overflow-hidden">
+                <p className="px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap">
+                  Workspace
+                </p>
+              </div>
+            )}
+            <div className="space-y-0.5">
+              <HomeNavLink href="/integrations" icon={PlugsIcon} label="Integrations" collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
+              <HomeNavLink href="/pricing" icon={TagIcon} label="Pricing" collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
+              <SettingsButton item={{ label: 'Workspace Settings', href: () => '', icon: SettingsIcon, matchPrefix: false }} collapsed={c} onClick={isMobile ? onMobileClose : undefined} settingsContext="workspace" />
+            </div>
+          </div>
+
+          {/* Resources */}
+          <div>
+            {c ? (
+              <div className="mx-3 my-2 border-t border-white/[0.04]" />
+            ) : (
+              <div className="h-5 flex items-center overflow-hidden">
+                <p className="px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap">
+                  Resources
+                </p>
+              </div>
+            )}
+            <div className="space-y-0.5">
+              <HomeNavLink href="https://docs.ciphera.net" icon={BookOpenIcon} label="Documentation" collapsed={c} onClick={isMobile ? onMobileClose : undefined} external />
+            </div>
+          </div>
+        </nav>
+      )}
+
+      {/* Bottom — utility items */}
+      <div className="border-t border-white/[0.06] px-2 py-3 shrink-0">
+        {/* Notifications, Profile — same layout as nav items */}
+        <div className="space-y-0.5 mb-1">
+          <div className="relative group/notif">
+            <NotificationCenter anchor="right" variant="sidebar">
+              <Label collapsed={c}>Notifications</Label>
+            </NotificationCenter>
+            {c && (
+              <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/notif:opacity-100 transition-opacity duration-150 delay-150 z-50">
+                Notifications
+              </span>
+            )}
+          </div>
+          <div className="relative group/user">
+            <UserMenu
+              auth={auth}
+              LinkComponent={Link}
+              orgs={orgs}
+              activeOrgId={auth.user?.org_id}
+              onSwitchOrganization={onSwitchOrganization}
+              onCreateOrganization={() => router.push('/onboarding')}
+              allowPersonalOrganization={false}
+              onOpenSettings={openSettings}
+              onOpenOrgSettings={openOrgSettings}
+              compact
+              anchor="right"
+            >
+              <Label collapsed={c}>{user?.display_name?.trim() || 'Profile'}</Label>
+            </UserMenu>
+            {c && (
+              <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/user:opacity-100 transition-opacity duration-150 delay-150 z-50">
+                {user?.display_name?.trim() || 'Profile'}
+              </span>
+            )}
+          </div>
+        </div>
       </div>
     </div>
   )
 }
 
-// ─── Main Sidebar ──────────────────────────────────────────
+// ─── Main Sidebar ───────────────────────────────────────────
 
 export default function Sidebar({
   siteId, mobileOpen, onMobileClose, onMobileOpen,
@@ -384,38 +435,37 @@ export default function Sidebar({
 
   const handleMobileClose = useCallback(() => {
     setMobileClosing(true)
-    setTimeout(() => { setMobileClosing(false); onMobileClose() }, 200)
+    setTimeout(() => {
+      setMobileClosing(false)
+      onMobileClose()
+    }, 200)
   }, [onMobileClose])
 
   const handleNavigate = useCallback((href: string) => { setPendingHref(href) }, [])
 
-  const railProps = {
-    sites,
-    currentSiteId: siteId,
-    auth,
-    orgs,
-    onSwitchOrganization: handleSwitchOrganization,
-    openSettings: () => openUnifiedSettings({ context: 'account', tab: 'profile' }),
-    openOrgSettings: () => openUnifiedSettings({ context: 'workspace', tab: 'general' }),
-  }
-
-  const panelProps = {
-    siteId,
-    sites,
-    canEdit,
-    pendingHref,
-    onNavigate: handleNavigate,
-  }
-
   return (
     <>
-      {/* Desktop */}
+      {/* Desktop — ssr:false means this only renders on client, no hydration flash */}
       <aside
-        className="hidden md:flex shrink-0 bg-transparent overflow-hidden relative z-10"
-        style={{ width: collapsed ? RAIL_WIDTH : RAIL_WIDTH + PANEL_WIDTH, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
+        className="hidden md:flex flex-col shrink-0 bg-transparent overflow-hidden relative z-10"
+        style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
       >
-        <SidebarRail {...railProps} />
-        <SidebarPanel {...panelProps} collapsed={collapsed} />
+        <SidebarContent
+          isMobile={false}
+          collapsed={collapsed}
+          siteId={siteId}
+          sites={sites}
+          canEdit={canEdit}
+          pendingHref={pendingHref}
+          onNavigate={handleNavigate}
+          onMobileClose={onMobileClose}
+          onToggle={toggle}
+          auth={auth}
+          orgs={orgs}
+          onSwitchOrganization={handleSwitchOrganization}
+          openSettings={() => openUnifiedSettings({ context: 'account', tab: 'profile' })}
+          openOrgSettings={() => openUnifiedSettings({ context: 'workspace', tab: 'general' })}
+        />
       </aside>
 
       {/* Mobile overlay */}
@@ -428,12 +478,11 @@ export default function Sidebar({
             onClick={handleMobileClose}
           />
           <aside
-            className={`fixed inset-y-0 left-0 z-50 bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border-r border-white/[0.08] shadow-xl shadow-black/20 md:hidden ${
+            className={`fixed inset-y-0 left-0 z-50 w-72 bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border-r border-white/[0.08] shadow-xl shadow-black/20 md:hidden ${
               mobileClosing
                 ? 'animate-out slide-out-to-left duration-200 fill-mode-forwards'
                 : 'animate-in slide-in-from-left duration-200'
             }`}
-            style={{ width: RAIL_WIDTH + PANEL_WIDTH }}
           >
             <div className="flex items-center justify-between px-4 py-3 border-b border-white/[0.06]">
               <span className="text-sm font-semibold text-white">Navigation</span>
@@ -441,10 +490,22 @@ export default function Sidebar({
                 <XIcon className="w-5 h-5" />
               </button>
             </div>
-            <div className="flex h-[calc(100%-49px)]">
-              <SidebarRail {...railProps} onMobileClose={handleMobileClose} isMobile />
-              <SidebarPanel {...panelProps} collapsed={false} onMobileClose={handleMobileClose} isMobile />
-            </div>
+            <SidebarContent
+              isMobile={true}
+              collapsed={collapsed}
+              siteId={siteId}
+              sites={sites}
+              canEdit={canEdit}
+              pendingHref={pendingHref}
+              onNavigate={handleNavigate}
+              onMobileClose={handleMobileClose}
+              onToggle={toggle}
+              auth={auth}
+              orgs={orgs}
+              onSwitchOrganization={handleSwitchOrganization}
+              openSettings={() => openUnifiedSettings({ context: 'account', tab: 'profile' })}
+              openOrgSettings={() => openUnifiedSettings({ context: 'workspace', tab: 'general' })}
+            />
           </aside>
         </>
       )}
-- 
2.49.1


From c7f26004607405dc730763e0134b26c019333c5c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 28 Mar 2026 22:48:30 +0100
Subject: [PATCH 420/428] fix: portal-based sidebar tooltips, visible when
 collapsed

Old tooltips were clipped by overflow-hidden on the aside.
New SidebarTooltip renders via createPortal with fixed positioning,
100ms delay, rounded-lg glass styling with border and shadow.
---
 components/dashboard/Sidebar.tsx | 248 ++++++++++++++++++-------------
 1 file changed, 143 insertions(+), 105 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index dca4d4b..d852bd1 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { useState, useEffect, useRef, useCallback } from 'react'
+import { createPortal } from 'react-dom'
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
 import { listSites, type Site } from '@/lib/api/sites'
@@ -80,6 +81,45 @@ function Label({ children, collapsed }: { children: React.ReactNode; collapsed:
   )
 }
 
+// ─── Sidebar Tooltip (portal-based, escapes overflow-hidden) ──
+
+function SidebarTooltip({ children, label }: { children: React.ReactNode; label: string }) {
+  const [show, setShow] = useState(false)
+  const [pos, setPos] = useState({ x: 0, y: 0 })
+  const ref = useRef<HTMLDivElement>(null)
+  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined)
+
+  const handleEnter = () => {
+    timerRef.current = setTimeout(() => {
+      if (ref.current) {
+        const rect = ref.current.getBoundingClientRect()
+        setPos({ x: rect.right + 8, y: rect.top + rect.height / 2 })
+        setShow(true)
+      }
+    }, 100)
+  }
+
+  const handleLeave = () => {
+    clearTimeout(timerRef.current)
+    setShow(false)
+  }
+
+  return (
+    <div ref={ref} onMouseEnter={handleEnter} onMouseLeave={handleLeave}>
+      {children}
+      {show && typeof document !== 'undefined' && createPortal(
+        <span
+          className="fixed z-[100] px-2.5 py-1.5 rounded-lg bg-neutral-800 border border-white/[0.08] text-white text-xs font-medium whitespace-nowrap pointer-events-none shadow-lg shadow-black/20 -translate-y-1/2"
+          style={{ left: pos.x, top: pos.y }}
+        >
+          {label}
+        </span>,
+        document.body
+      )}
+    </div>
+  )
+}
+
 // ─── Nav Item ───────────────────────────────────────────────
 
 function NavLink({
@@ -94,29 +134,25 @@ function NavLink({
   const matchesPending = pendingHref !== null && (item.matchPrefix ? pendingHref.startsWith(href) : pendingHref === href)
   const active = matchesPathname || matchesPending
 
-  return (
-    <div className="relative group/nav">
-      <Link
-        href={href}
-        onClick={() => { onNavigate(href); onClick?.() }}
-        className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 ${
-          active
-            ? 'bg-brand-orange/10 text-brand-orange'
-            : 'text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5'
-        }`}
-      >
-        <span className="w-7 h-7 flex items-center justify-center shrink-0">
-          <item.icon className="w-[18px] h-[18px]" weight={active ? 'fill' : 'regular'} />
-        </span>
-        <Label collapsed={collapsed}>{item.label}</Label>
-      </Link>
-      {collapsed && (
-        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/nav:opacity-100 transition-opacity duration-150 delay-150 z-50">
-          {item.label}
-        </span>
-      )}
-    </div>
+  const link = (
+    <Link
+      href={href}
+      onClick={() => { onNavigate(href); onClick?.() }}
+      className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 ${
+        active
+          ? 'bg-brand-orange/10 text-brand-orange'
+          : 'text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5'
+      }`}
+    >
+      <span className="w-7 h-7 flex items-center justify-center shrink-0">
+        <item.icon className="w-[18px] h-[18px]" weight={active ? 'fill' : 'regular'} />
+      </span>
+      <Label collapsed={collapsed}>{item.label}</Label>
+    </Link>
   )
+
+  if (collapsed) return <SidebarTooltip label={item.label}>{link}</SidebarTooltip>
+  return link
 }
 
 // ─── Settings Button (opens unified modal instead of navigating) ─────
@@ -128,27 +164,23 @@ function SettingsButton({
 }) {
   const { openUnifiedSettings } = useUnifiedSettings()
 
-  return (
-    <div className="relative group/nav">
-      <button
-        onClick={() => {
-          openUnifiedSettings({ context: settingsContext, tab: 'general' })
-          onClick?.()
-        }}
-        className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5 w-full cursor-pointer"
-      >
-        <span className="w-7 h-7 flex items-center justify-center shrink-0">
-          <item.icon className="w-[18px] h-[18px]" weight="regular" />
-        </span>
-        <Label collapsed={collapsed}>{item.label}</Label>
-      </button>
-      {collapsed && (
-        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/nav:opacity-100 transition-opacity duration-150 delay-150 z-50">
-          {item.label}
-        </span>
-      )}
-    </div>
+  const btn = (
+    <button
+      onClick={() => {
+        openUnifiedSettings({ context: settingsContext, tab: 'general' })
+        onClick?.()
+      }}
+      className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5 w-full cursor-pointer"
+    >
+      <span className="w-7 h-7 flex items-center justify-center shrink-0">
+        <item.icon className="w-[18px] h-[18px]" weight="regular" />
+      </span>
+      <Label collapsed={collapsed}>{item.label}</Label>
+    </button>
   )
+
+  if (collapsed) return <SidebarTooltip label={item.label}>{btn}</SidebarTooltip>
+  return btn
 }
 
 // ─── Home Nav Link (static href, no siteId) ───────────────
@@ -162,30 +194,26 @@ function HomeNavLink({
   const pathname = usePathname()
   const active = !external && pathname === href
 
-  return (
-    <div className="relative group/nav">
-      <Link
-        href={href}
-        onClick={onClick}
-        {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
-        className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 ${
-          active
-            ? 'bg-brand-orange/10 text-brand-orange'
-            : 'text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5'
-        }`}
-      >
-        <span className="w-7 h-7 flex items-center justify-center shrink-0">
-          <Icon className="w-[18px] h-[18px]" weight={active ? 'fill' : 'regular'} />
-        </span>
-        <Label collapsed={collapsed}>{label}</Label>
-      </Link>
-      {collapsed && (
-        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/nav:opacity-100 transition-opacity duration-150 delay-150 z-50">
-          {label}
-        </span>
-      )}
-    </div>
+  const link = (
+    <Link
+      href={href}
+      onClick={onClick}
+      {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+      className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 ${
+        active
+          ? 'bg-brand-orange/10 text-brand-orange'
+          : 'text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5'
+      }`}
+    >
+      <span className="w-7 h-7 flex items-center justify-center shrink-0">
+        <Icon className="w-[18px] h-[18px]" weight={active ? 'fill' : 'regular'} />
+      </span>
+      <Label collapsed={collapsed}>{label}</Label>
+    </Link>
   )
+
+  if (collapsed) return <SidebarTooltip label={label}>{link}</SidebarTooltip>
+  return link
 }
 
 // ─── Home Site Link (favicon + name) ───────────────────────
@@ -199,33 +227,29 @@ function HomeSiteLink({
   const href = `/sites/${site.id}`
   const active = pathname.startsWith(href)
 
-  return (
-    <div className="relative group/nav">
-      <Link
-        href={href}
-        onClick={onClick}
-        className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 ${
-          active
-            ? 'bg-brand-orange/10 text-brand-orange'
-            : 'text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5'
-        }`}
-      >
-        <span className="w-7 h-7 rounded-md bg-white/[0.04] flex items-center justify-center shrink-0 overflow-hidden">
-          <img
-            src={`${FAVICON_SERVICE_URL}?domain=${site.domain}&sz=64`}
-            alt=""
-            className="w-[18px] h-[18px] rounded object-contain"
-          />
-        </span>
-        <Label collapsed={collapsed}>{site.name}</Label>
-      </Link>
-      {collapsed && (
-        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/nav:opacity-100 transition-opacity duration-150 delay-150 z-50">
-          {site.name}
-        </span>
-      )}
-    </div>
+  const link = (
+    <Link
+      href={href}
+      onClick={onClick}
+      className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 ${
+        active
+          ? 'bg-brand-orange/10 text-brand-orange'
+          : 'text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5'
+      }`}
+    >
+      <span className="w-7 h-7 rounded-md bg-white/[0.04] flex items-center justify-center shrink-0 overflow-hidden">
+        <img
+          src={`${FAVICON_SERVICE_URL}?domain=${site.domain}&sz=64`}
+          alt=""
+          className="w-[18px] h-[18px] rounded object-contain"
+        />
+      </span>
+      <Label collapsed={collapsed}>{site.name}</Label>
+    </Link>
   )
+
+  if (collapsed) return <SidebarTooltip label={site.name}>{link}</SidebarTooltip>
+  return link
 }
 
 // ─── Sidebar Content ────────────────────────────────────────
@@ -354,17 +378,36 @@ function SidebarContent({
       <div className="border-t border-white/[0.06] px-2 py-3 shrink-0">
         {/* Notifications, Profile — same layout as nav items */}
         <div className="space-y-0.5 mb-1">
-          <div className="relative group/notif">
+          {c ? (
+            <SidebarTooltip label="Notifications">
+              <NotificationCenter anchor="right" variant="sidebar">
+                <Label collapsed={c}>Notifications</Label>
+              </NotificationCenter>
+            </SidebarTooltip>
+          ) : (
             <NotificationCenter anchor="right" variant="sidebar">
               <Label collapsed={c}>Notifications</Label>
             </NotificationCenter>
-            {c && (
-              <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/notif:opacity-100 transition-opacity duration-150 delay-150 z-50">
-                Notifications
-              </span>
-            )}
-          </div>
-          <div className="relative group/user">
+          )}
+          {c ? (
+            <SidebarTooltip label={user?.display_name?.trim() || 'Profile'}>
+              <UserMenu
+                auth={auth}
+                LinkComponent={Link}
+                orgs={orgs}
+                activeOrgId={auth.user?.org_id}
+                onSwitchOrganization={onSwitchOrganization}
+                onCreateOrganization={() => router.push('/onboarding')}
+                allowPersonalOrganization={false}
+                onOpenSettings={openSettings}
+                onOpenOrgSettings={openOrgSettings}
+                compact
+                anchor="right"
+              >
+                <Label collapsed={c}>{user?.display_name?.trim() || 'Profile'}</Label>
+              </UserMenu>
+            </SidebarTooltip>
+          ) : (
             <UserMenu
               auth={auth}
               LinkComponent={Link}
@@ -380,12 +423,7 @@ function SidebarContent({
             >
               <Label collapsed={c}>{user?.display_name?.trim() || 'Profile'}</Label>
             </UserMenu>
-            {c && (
-              <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/user:opacity-100 transition-opacity duration-150 delay-150 z-50">
-                {user?.display_name?.trim() || 'Profile'}
-              </span>
-            )}
-          </div>
+          )}
         </div>
       </div>
     </div>
-- 
2.49.1


From 16fd913351534e31b0429448bc3ce952769ecdbc Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 28 Mar 2026 22:52:12 +0100
Subject: [PATCH 421/428] fix: increase sidebar tooltip delay to 400ms

---
 components/dashboard/Sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index d852bd1..b420244 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -96,7 +96,7 @@ function SidebarTooltip({ children, label }: { children: React.ReactNode; label:
         setPos({ x: rect.right + 8, y: rect.top + rect.height / 2 })
         setShow(true)
       }
-    }, 100)
+    }, 400)
   }
 
   const handleLeave = () => {
-- 
2.49.1


From 3067101feca9f6cdd78b5c3d396bb95edb020cdb Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 28 Mar 2026 22:53:25 +0100
Subject: [PATCH 422/428] fix: tooltip uses content panel bg (neutral-950) +
 100ms delay

---
 components/dashboard/Sidebar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index b420244..f3747f4 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -96,7 +96,7 @@ function SidebarTooltip({ children, label }: { children: React.ReactNode; label:
         setPos({ x: rect.right + 8, y: rect.top + rect.height / 2 })
         setShow(true)
       }
-    }, 400)
+    }, 100)
   }
 
   const handleLeave = () => {
@@ -109,7 +109,7 @@ function SidebarTooltip({ children, label }: { children: React.ReactNode; label:
       {children}
       {show && typeof document !== 'undefined' && createPortal(
         <span
-          className="fixed z-[100] px-2.5 py-1.5 rounded-lg bg-neutral-800 border border-white/[0.08] text-white text-xs font-medium whitespace-nowrap pointer-events-none shadow-lg shadow-black/20 -translate-y-1/2"
+          className="fixed z-[100] px-2.5 py-1.5 rounded-lg bg-neutral-950 border border-neutral-800/60 text-white text-xs font-medium whitespace-nowrap pointer-events-none shadow-lg shadow-black/20 -translate-y-1/2"
           style={{ left: pos.x, top: pos.y }}
         >
           {label}
-- 
2.49.1


From ef1cb32c5122d35ce39d5f954ea551de8d800a34 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 28 Mar 2026 22:54:47 +0100
Subject: [PATCH 423/428] fix: consistent group header height prevents icon
 shift on toggle

---
 components/dashboard/Sidebar.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index f3747f4..9db9766 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -297,15 +297,15 @@ function SidebarContent({
         <nav className="flex-1 overflow-y-auto overflow-x-hidden px-2 space-y-4">
           {NAV_GROUPS.map((group) => (
             <div key={group.label}>
-              {c ? (
-                <div className="mx-3 my-2 border-t border-white/[0.04]" />
-              ) : (
-                <div className="h-5 flex items-center overflow-hidden">
+              <div className="h-5 flex items-center overflow-hidden">
+                {c ? (
+                  <div className="mx-1 w-full border-t border-white/[0.04]" />
+                ) : (
                   <p className="px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap">
                     {group.label}
                   </p>
-                </div>
-              )}
+                )}
+              </div>
               <div className="space-y-0.5">
                 {group.items.map((item) => (
                   <NavLink key={item.label} item={item} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={onNavigate} />
-- 
2.49.1


From 20d7bdd48205c4f4a16131b9227f3a0a5bf7c3a2 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 28 Mar 2026 22:56:57 +0100
Subject: [PATCH 424/428] fix: larger sidebar tooltips (text-sm, more padding)

---
 components/dashboard/Sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index 9db9766..ac93598 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -109,7 +109,7 @@ function SidebarTooltip({ children, label }: { children: React.ReactNode; label:
       {children}
       {show && typeof document !== 'undefined' && createPortal(
         <span
-          className="fixed z-[100] px-2.5 py-1.5 rounded-lg bg-neutral-950 border border-neutral-800/60 text-white text-xs font-medium whitespace-nowrap pointer-events-none shadow-lg shadow-black/20 -translate-y-1/2"
+          className="fixed z-[100] px-3 py-2 rounded-lg bg-neutral-950 border border-neutral-800/60 text-white text-sm font-medium whitespace-nowrap pointer-events-none shadow-lg shadow-black/20 -translate-y-1/2"
           style={{ left: pos.x, top: pos.y }}
         >
           {label}
-- 
2.49.1


From 066f1288f100728e197a371d6101d80f4826f310 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 29 Mar 2026 00:28:47 +0100
Subject: [PATCH 425/428] feat: trim integration pages from 75 to 25 + migrate
 to MDX
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add dedicatedPage flag to integration registry (25 true, 50 false)
- Delete hardcoded nextjs/react/vue/wordpress route pages (wrong metadata)
- Hub page routes non-dedicated integrations to /integrations/script-tag
- Add 301 redirects for 50 removed slugs → /integrations/script-tag
- Migrate guide content from TSX to MDX (content/integrations/*.mdx)
- Add gray-matter, next-mdx-remote, remark-gfm dependencies
- Add content loader (lib/integration-content.ts) matching ciphera-website pattern
- Add prebuild script for integration guide index generation
- Sitemap reduced from 83 to 35 URLs with real lastmod dates
- Remove seoDescription from registry (now in MDX frontmatter)
---
 .gitignore                           |    3 +
 app/integrations/[slug]/page.tsx     |   54 +-
 app/integrations/nextjs/page.tsx     |  128 -
 app/integrations/page.tsx            |    4 +-
 app/integrations/react/page.tsx      |  118 -
 app/integrations/script-tag/page.tsx |  147 ++
 app/integrations/vue/page.tsx        |  112 -
 app/integrations/wordpress/page.tsx  |   80 -
 app/sitemap.ts                       |   43 +-
 content/integrations/angular.mdx     |   39 +
 content/integrations/astro.mdx       |   48 +
 content/integrations/django.mdx      |   42 +
 content/integrations/drupal.mdx      |   45 +
 content/integrations/eleventy.mdx    |   38 +
 content/integrations/express.mdx     |   61 +
 content/integrations/flask.mdx       |   40 +
 content/integrations/framer.mdx      |   25 +
 content/integrations/gatsby.mdx      |   52 +
 content/integrations/ghost.mdx       |   27 +
 content/integrations/gtm.mdx         |   39 +
 content/integrations/hugo.mdx        |   44 +
 content/integrations/laravel.mdx     |   41 +
 content/integrations/nextjs.mdx      |   68 +
 content/integrations/nuxt.mdx        |   49 +
 content/integrations/rails.mdx       |   42 +
 content/integrations/react.mdx       |   56 +
 content/integrations/remix.mdx       |   50 +
 content/integrations/script-tag.mdx  |   45 +
 content/integrations/shopify.mdx     |   32 +
 content/integrations/squarespace.mdx |   27 +
 content/integrations/svelte.mdx      |   53 +
 content/integrations/vue.mdx         |   39 +
 content/integrations/webflow.mdx     |   27 +
 content/integrations/wix.mdx         |   27 +
 content/integrations/wordpress.mdx   |   27 +
 lib/integration-content.ts           |   63 +
 lib/integration-guides.tsx           | 3606 --------------------------
 lib/integrations.tsx                 |  229 +-
 next.config.ts                       |   19 +
 package-lock.json                    | 1010 +++++++-
 package.json                         |    5 +
 scripts/generate-integrations.ts     |   44 +
 42 files changed, 2515 insertions(+), 4233 deletions(-)
 delete mode 100644 app/integrations/nextjs/page.tsx
 delete mode 100644 app/integrations/react/page.tsx
 create mode 100644 app/integrations/script-tag/page.tsx
 delete mode 100644 app/integrations/vue/page.tsx
 delete mode 100644 app/integrations/wordpress/page.tsx
 create mode 100644 content/integrations/angular.mdx
 create mode 100644 content/integrations/astro.mdx
 create mode 100644 content/integrations/django.mdx
 create mode 100644 content/integrations/drupal.mdx
 create mode 100644 content/integrations/eleventy.mdx
 create mode 100644 content/integrations/express.mdx
 create mode 100644 content/integrations/flask.mdx
 create mode 100644 content/integrations/framer.mdx
 create mode 100644 content/integrations/gatsby.mdx
 create mode 100644 content/integrations/ghost.mdx
 create mode 100644 content/integrations/gtm.mdx
 create mode 100644 content/integrations/hugo.mdx
 create mode 100644 content/integrations/laravel.mdx
 create mode 100644 content/integrations/nextjs.mdx
 create mode 100644 content/integrations/nuxt.mdx
 create mode 100644 content/integrations/rails.mdx
 create mode 100644 content/integrations/react.mdx
 create mode 100644 content/integrations/remix.mdx
 create mode 100644 content/integrations/script-tag.mdx
 create mode 100644 content/integrations/shopify.mdx
 create mode 100644 content/integrations/squarespace.mdx
 create mode 100644 content/integrations/svelte.mdx
 create mode 100644 content/integrations/vue.mdx
 create mode 100644 content/integrations/webflow.mdx
 create mode 100644 content/integrations/wix.mdx
 create mode 100644 content/integrations/wordpress.mdx
 create mode 100644 lib/integration-content.ts
 delete mode 100644 lib/integration-guides.tsx
 create mode 100644 scripts/generate-integrations.ts

diff --git a/.gitignore b/.gitignore
index dc822ba..691a4c4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# auto-generated
+/lib/integration-guides.gen.ts
+
 # dependencies
 /node_modules
 /.pnp
diff --git a/app/integrations/[slug]/page.tsx b/app/integrations/[slug]/page.tsx
index f9ce901..089b038 100644
--- a/app/integrations/[slug]/page.tsx
+++ b/app/integrations/[slug]/page.tsx
@@ -1,46 +1,56 @@
 /**
  * @file Dynamic route for individual integration guide pages.
  *
- * Handles all 50 integration routes via [slug].
+ * Renders MDX content from content/integrations/*.mdx via next-mdx-remote.
  * Exports generateStaticParams for static generation and
  * generateMetadata for per-page SEO (title, description, OG, JSON-LD).
  */
 
 import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
+import { MDXRemote } from 'next-mdx-remote/rsc'
+import remarkGfm from 'remark-gfm'
+import { CodeBlock } from '@ciphera-net/ui'
 import { integrations, getIntegration } from '@/lib/integrations'
-import { getGuideContent } from '@/lib/integration-guides'
+import { getIntegrationGuide } from '@/lib/integration-content'
 import { IntegrationGuide } from '@/components/IntegrationGuide'
 
-// * ─── Static Params ───────────────────────────────────────────────
-export function generateStaticParams() {
-  return integrations.map((i) => ({ slug: i.id }))
+// * ─── MDX Components ────────────────────────────────────────────
+const mdxComponents = {
+  CodeBlock,
 }
 
-// * ─── SEO Metadata ────────────────────────────────────────────────
+// * ─── Static Params ─────────────────────────────────────────────
+export function generateStaticParams() {
+  return integrations
+    .filter((i) => i.dedicatedPage)
+    .map((i) => ({ slug: i.id }))
+}
+
+// * ─── SEO Metadata ──────────────────────────────────────────────
 interface PageProps {
   params: Promise<{ slug: string }>
 }
 
 export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
   const { slug } = await params
-  const integration = getIntegration(slug)
-  if (!integration) return {}
+  const guide = getIntegrationGuide(slug)
+  if (!guide) return {}
 
-  const title = `How to Add Pulse Analytics to ${integration.name} | Pulse by Ciphera`
-  const description = integration.seoDescription
-  const url = `https://pulse.ciphera.net/integrations/${integration.id}`
+  const title = `How to Add Pulse Analytics to ${guide.title} | Pulse by Ciphera`
+  const description = guide.description
+  const url = `https://pulse.ciphera.net/integrations/${guide.slug}`
 
   return {
     title,
     description,
     keywords: [
-      `${integration.name} analytics`,
-      `${integration.name} Pulse`,
+      `${guide.title} analytics`,
+      `${guide.title} Pulse`,
       'privacy-first analytics',
       'website analytics',
       'Ciphera Pulse',
-      integration.name,
+      guide.title,
     ],
     alternates: { canonical: url },
     openGraph: {
@@ -58,21 +68,19 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
   }
 }
 
-// * ─── Page Component ──────────────────────────────────────────────
+// * ─── Page Component ────────────────────────────────────────────
 export default async function IntegrationPage({ params }: PageProps) {
   const { slug } = await params
   const integration = getIntegration(slug)
-  if (!integration) return notFound()
-
-  const content = getGuideContent(slug)
-  if (!content) return notFound()
+  const guide = getIntegrationGuide(slug)
+  if (!integration || !guide) return notFound()
 
   // * HowTo JSON-LD for rich search snippets
   const jsonLd = {
     '@context': 'https://schema.org',
     '@type': 'HowTo',
     name: `How to Add Pulse Analytics to ${integration.name}`,
-    description: integration.seoDescription,
+    description: guide.description,
     step: [
       {
         '@type': 'HowToStep',
@@ -104,7 +112,11 @@ export default async function IntegrationPage({ params }: PageProps) {
         dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
       />
       <IntegrationGuide integration={integration}>
-        {content}
+        <MDXRemote
+          source={guide.content}
+          components={mdxComponents}
+          options={{ mdxOptions: { remarkPlugins: [remarkGfm] } }}
+        />
       </IntegrationGuide>
     </>
   )
diff --git a/app/integrations/nextjs/page.tsx b/app/integrations/nextjs/page.tsx
deleted file mode 100644
index 96ced7e..0000000
--- a/app/integrations/nextjs/page.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { ArrowLeftIcon } from '@ciphera-net/ui'
-
-export default function NextJsIntegrationPage() {
-  return (
-    <div className="relative min-h-screen flex flex-col overflow-hidden">
-      {/* * --- ATMOSPHERE (Background) --- */}
-      <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
-        <div 
-          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
-          style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
-        />
-      </div>
-
-      <div className="flex-grow w-full max-w-4xl mx-auto px-4 pt-20 pb-10 z-10">
-        <Link 
-          href="/integrations" 
-          className="inline-flex items-center text-sm text-neutral-500 hover:text-brand-orange mb-8 transition-colors"
-        >
-          <ArrowLeftIcon className="w-4 h-4 mr-2" />
-          Back to Integrations
-        </Link>
-
-        <div className="flex items-center gap-4 mb-8">
-          <div className="p-3 bg-neutral-800 rounded-xl">
-            <svg viewBox="0 0 128 128" className="w-10 h-10 invert">
-              <path d="M64 0C28.7 0 0 28.7 0 64s28.7 64 64 64 64-28.7 64-64S99.3 0 64 0zm27.6 93.9c-.8.9-2.2 1-3.1.2L42.8 52.8V88c0 1.3-1.1 2.3-2.3 2.3h-7.4c-1.3 0-2.3-1.1-2.3-2.3V40c0-1.3 1.1-2.3 2.3-2.3h7.4c1 0 1.9.6 2.2 1.5l48.6 44.8V40c0-1.3 1.1-2.3 2.3-2.3h7.4c1.3 0 2.3 1.1 2.3 2.3v48c0 1.3-1.1 2.3-2.3 2.3h-6.8c-.9 0-1.7-.5-2.1-1.3z" />
-            </svg>
-          </div>
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white">
-            Next.js Integration
-          </h1>
-        </div>
-
-        <div className="prose prose-invert max-w-none">
-          <p className="lead text-xl text-neutral-400">
-            The best way to add Pulse to your Next.js application is using the built-in <code>next/script</code> component.
-          </p>
-
-          <hr className="my-8 border-neutral-800" />
-
-          <h3>Using App Router (Recommended)</h3>
-          <p>
-            Add the script to your root layout file (usually <code>app/layout.tsx</code> or <code>app/layout.js</code>).
-          </p>
-
-          <div className="bg-neutral-900 rounded-xl overflow-hidden border border-neutral-800 my-6">
-            <div className="flex items-center px-4 py-2 bg-neutral-800 border-b border-neutral-800">
-              <span className="text-xs text-neutral-400 font-mono">app/layout.tsx</span>
-            </div>
-            <div className="p-4 overflow-x-auto">
-              <pre className="text-sm font-mono text-neutral-300">
-{`import Script from 'next/script'
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <html lang="en">
-      <head>
-        <Script
-          defer
-          src="https://pulse.ciphera.net/script.js"
-          data-domain="your-site.com"
-          strategy="afterInteractive"
-        />
-      </head>
-      <body>{children}</body>
-    </html>
-  )
-}`}
-              </pre>
-            </div>
-          </div>
-
-          <h3>Using Pages Router</h3>
-          <p>
-            If you are using the older Pages Router, add the script to your custom <code>_app.tsx</code> or <code>_document.tsx</code>.
-          </p>
-
-          <div className="bg-neutral-900 rounded-xl overflow-hidden border border-neutral-800 my-6">
-            <div className="flex items-center px-4 py-2 bg-neutral-800 border-b border-neutral-800">
-              <span className="text-xs text-neutral-400 font-mono">pages/_app.tsx</span>
-            </div>
-            <div className="p-4 overflow-x-auto">
-              <pre className="text-sm font-mono text-neutral-300">
-{`import Script from 'next/script'
-import type { AppProps } from 'next/app'
-
-export default function App({ Component, pageProps }: AppProps) {
-  return (
-    <>
-      <Script
-        defer
-        src="https://pulse.ciphera.net/script.js"
-        data-domain="your-site.com"
-        strategy="afterInteractive"
-      />
-      <Component {...pageProps} />
-    </>
-  )
-}`}
-              </pre>
-            </div>
-          </div>
-
-          <h3>Configuration Options</h3>
-          <ul>
-            <li>
-              <strong>data-domain</strong>: The domain name you added to your Pulse dashboard (e.g., <code>example.com</code>).
-            </li>
-            <li>
-              <strong>src</strong>: The URL of our tracking script: <code>https://pulse.ciphera.net/script.js</code>
-            </li>
-            <li>
-              <strong>strategy</strong>: We recommend <code>afterInteractive</code> to ensure it loads quickly without blocking hydration.
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/app/integrations/page.tsx b/app/integrations/page.tsx
index dccc121..7aff088 100644
--- a/app/integrations/page.tsx
+++ b/app/integrations/page.tsx
@@ -244,7 +244,7 @@ export default function IntegrationsPage() {
                         transition={{ duration: 0.4, delay: i * 0.05 }}
                       >
                         <Link
-                          href={`/integrations/${integration!.id}`}
+                          href={integration!.dedicatedPage ? `/integrations/${integration!.id}` : '/integrations/script-tag'}
                           className="group flex items-center gap-3 p-4 bg-neutral-900/50 backdrop-blur-sm border border-neutral-800 rounded-xl hover:border-brand-orange/50 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg h-full"
                         >
                           <div className="p-2 bg-neutral-800 rounded-lg shrink-0 group-hover:scale-110 transition-transform duration-300 [&_svg]:w-6 [&_svg]:h-6">
@@ -283,7 +283,7 @@ export default function IntegrationsPage() {
                         transition={{ duration: 0.5, delay: i * 0.05 }}
                       >
                         <Link
-                          href={`/integrations/${integration.id}`}
+                          href={integration.dedicatedPage ? `/integrations/${integration.id}` : '/integrations/script-tag'}
                           className="group relative p-6 bg-neutral-900/50 backdrop-blur-sm border border-neutral-800 rounded-2xl hover:border-brand-orange/50 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl block h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
                         >
                           <div className="flex items-start justify-between mb-6">
diff --git a/app/integrations/react/page.tsx b/app/integrations/react/page.tsx
deleted file mode 100644
index a783174..0000000
--- a/app/integrations/react/page.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { ArrowLeftIcon } from '@ciphera-net/ui'
-
-export default function ReactIntegrationPage() {
-  return (
-    <div className="relative min-h-screen flex flex-col overflow-hidden">
-      {/* * --- ATMOSPHERE (Background) --- */}
-      <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
-        <div 
-          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
-          style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
-        />
-      </div>
-
-      <div className="flex-grow w-full max-w-4xl mx-auto px-4 pt-20 pb-10 z-10">
-        <Link 
-          href="/integrations" 
-          className="inline-flex items-center text-sm text-neutral-500 hover:text-brand-orange mb-8 transition-colors"
-        >
-          <ArrowLeftIcon className="w-4 h-4 mr-2" />
-          Back to Integrations
-        </Link>
-
-        <div className="flex items-center gap-4 mb-8">
-          <div className="p-3 bg-neutral-800 rounded-xl">
-            <svg viewBox="0 0 128 128" className="w-10 h-10 text-[#61DAFB] fill-current">
-              <path d="M64 10.6c18.4 0 34.6 5.8 44.6 14.8 6.4 5.8 10.2 12.8 10.2 20.6 0 21.6-28.6 41.2-64 41.2-1.6 0-3.2-.1-4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8 13.6-1.6 26.2-5.4 37.4-11 11.2-5.6 20.2-13 26.2-21.4-6.4-5.8-15.4-10-25.6-12.2-10.2-2.2-21.4-3.4-33-3.4-1.6 0-3.2.1-4.8.2 1.2-10.8 6.2-20.2 13.8-27.6 8.8-8.6 20.6-13.4 33.2-13.4 2.2 0 4.4.2 6.4.4-10.2 12.8-15.6 29.2-15.6 46.2 0 2.6.2 5.2.4 7.8-13.6 1.6-26.2 5.4-37.4 11-11.2 5.6-20.2 13-26.2 21.4 6.4 5.8 15.4 10 25.6 12.2 10.2 2.2 21.4 3.4 33 3.4 1.6 0 3.2-.1 4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8 13.6-1.6 26.2-5.4 37.4-11zm-33.4 62c-11.2 5.6-20.2 13-26.2 21.4 6.4 5.8 15.4 10 25.6 12.2 10.2 2.2 21.4 3.4 33 3.4 1.6 0 3.2-.1 4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8 13.6-1.6 26.2-5.4 37.4-11zm-15.2-16.6c-6.4-5.8-10.2-12.8-10.2-20.6 0-21.6 28.6-41.2 64-41.2 1.6 0 3.2.1 4.8.2 1.2-10.8 6.2-20.2 13.8-27.6 8.8-8.6 20.6-13.4 33.2-13.4 2.2 0 4.4.2 6.4.4-10.2 12.8-15.6 29.2-15.6 46.2 0 2.6.2 5.2.4 7.8-13.6 1.6-26.2 5.4-37.4 11-11.2 5.6-20.2 13-26.2 21.4 6.4 5.8 15.4 10 25.6 12.2 10.2 2.2 21.4 3.4 33 3.4 1.6 0 3.2-.1 4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8z" />
-              <circle cx="64" cy="64" r="10.6" />
-            </svg>
-          </div>
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white">
-            React Integration
-          </h1>
-        </div>
-
-        <div className="prose prose-invert max-w-none">
-          <p className="lead text-xl text-neutral-400">
-            For standard React SPAs (Create React App, Vite, etc.), you can simply add the script tag to your <code>index.html</code>.
-          </p>
-
-          <hr className="my-8 border-neutral-800" />
-
-          <h3>Method 1: index.html (Recommended)</h3>
-          <p>
-            The simplest way is to add the script tag directly to the <code>&lt;head&gt;</code> of your <code>index.html</code> file.
-          </p>
-
-          <div className="bg-neutral-900 rounded-xl overflow-hidden border border-neutral-800 my-6">
-            <div className="flex items-center px-4 py-2 bg-neutral-800 border-b border-neutral-800">
-              <span className="text-xs text-neutral-400 font-mono">public/index.html</span>
-            </div>
-            <div className="p-4 overflow-x-auto">
-              <pre className="text-sm font-mono text-neutral-300">
-{`<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    
-    <!-- Pulse Analytics -->
-    <script 
-      defer 
-      data-domain="your-site.com" 
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-    
-    <title>My React App</title>
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>`}
-              </pre>
-            </div>
-          </div>
-
-          <h3>Method 2: Programmatic Injection</h3>
-          <p>
-            If you need to load the script dynamically (e.g., only in production), you can use a <code>useEffect</code> hook in your main App component.
-          </p>
-
-          <div className="bg-neutral-900 rounded-xl overflow-hidden border border-neutral-800 my-6">
-            <div className="flex items-center px-4 py-2 bg-neutral-800 border-b border-neutral-800">
-              <span className="text-xs text-neutral-400 font-mono">src/App.tsx</span>
-            </div>
-            <div className="p-4 overflow-x-auto">
-              <pre className="text-sm font-mono text-neutral-300">
-{`import { useEffect } from 'react'
-
-function App() {
-  useEffect(() => {
-    // Only load in production
-    if (process.env.NODE_ENV === 'production') {
-      const script = document.createElement('script')
-      script.defer = true
-      script.setAttribute('data-domain', 'your-site.com')
-      script.src = 'https://pulse.ciphera.net/script.js'
-      document.head.appendChild(script)
-    }
-  }, [])
-
-  return (
-    <div className="App">
-      <h1>Hello World</h1>
-    </div>
-  )
-}`}
-              </pre>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/app/integrations/script-tag/page.tsx b/app/integrations/script-tag/page.tsx
new file mode 100644
index 0000000..8200b6c
--- /dev/null
+++ b/app/integrations/script-tag/page.tsx
@@ -0,0 +1,147 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { ArrowLeftIcon } from '@ciphera-net/ui'
+import { CodeBlock } from '@ciphera-net/ui'
+
+export const metadata: Metadata = {
+  title: 'Add Pulse Analytics to Any Website | Pulse by Ciphera',
+  description: 'Add privacy-first analytics to any website with a single script tag. Works with any platform, CMS, or framework.',
+  alternates: { canonical: 'https://pulse.ciphera.net/integrations/script-tag' },
+  openGraph: {
+    title: 'Add Pulse Analytics to Any Website | Pulse by Ciphera',
+    description: 'Add privacy-first analytics to any website with a single script tag.',
+    url: 'https://pulse.ciphera.net/integrations/script-tag',
+    siteName: 'Pulse by Ciphera',
+    type: 'article',
+  },
+}
+
+export default function ScriptTagPage() {
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'HowTo',
+    name: 'How to Add Pulse Analytics to Any Website',
+    description: 'Add privacy-first analytics to any website with a single script tag.',
+    step: [
+      {
+        '@type': 'HowToStep',
+        name: 'Copy the script tag',
+        text: 'Copy the Pulse tracking script with your domain.',
+      },
+      {
+        '@type': 'HowToStep',
+        name: 'Paste into your HTML head',
+        text: 'Add the script tag inside the <head> section of your website.',
+      },
+      {
+        '@type': 'HowToStep',
+        name: 'Deploy and verify',
+        text: 'Deploy your site and check the Pulse dashboard for incoming data.',
+      },
+    ],
+    tool: {
+      '@type': 'HowToTool',
+      name: 'Pulse by Ciphera',
+      url: 'https://pulse.ciphera.net',
+    },
+  }
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+      <div className="relative min-h-screen flex flex-col overflow-hidden">
+        <div className="absolute inset-0 -z-10 pointer-events-none">
+          <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
+          <div
+            className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
+            style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
+          />
+        </div>
+
+        <div className="flex-grow w-full max-w-4xl mx-auto px-4 pt-20 pb-10 z-10">
+          <Link
+            href="/integrations"
+            className="inline-flex items-center text-sm text-neutral-500 hover:text-brand-orange mb-8 transition-colors"
+          >
+            <ArrowLeftIcon className="w-4 h-4 mr-2" />
+            Back to Integrations
+          </Link>
+
+          <div className="flex items-center gap-4 mb-8">
+            <div className="p-3 bg-neutral-800 rounded-xl">
+              <svg className="w-10 h-10 text-brand-orange" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" />
+              </svg>
+            </div>
+            <h1 className="text-4xl md:text-5xl font-bold text-white">
+              Script Tag Integration
+            </h1>
+          </div>
+
+          <div className="prose prose-invert max-w-none">
+            <p className="lead text-xl text-neutral-400">
+              Add Pulse to any website by pasting a single script tag into your HTML.
+              This works with any platform, CMS, or static site.
+            </p>
+
+            <hr className="my-8 border-neutral-800" />
+
+            <h2>Installation</h2>
+            <p>
+              Add the following script tag inside the <code>&lt;head&gt;</code> section of your website:
+            </p>
+
+            <CodeBlock filename="index.html">{`<head>
+  <!-- ... other head elements ... -->
+  <script
+    defer
+    src="https://pulse.ciphera.net/script.js"
+    data-domain="your-site.com"
+  ></script>
+</head>`}</CodeBlock>
+
+            <h2>Configuration</h2>
+            <ul>
+              <li><code>data-domain</code> &mdash; your site&apos;s domain as shown in your Pulse dashboard (e.g. <code>example.com</code>), without <code>https://</code></li>
+              <li><code>defer</code> &mdash; loads the script without blocking page rendering</li>
+            </ul>
+
+            <h2>Where to paste the script</h2>
+            <p>
+              Most platforms have a &ldquo;Custom Code&rdquo;, &ldquo;Code Injection&rdquo;, or &ldquo;Header Scripts&rdquo;
+              section in their settings. Look for one of these:
+            </p>
+            <ul>
+              <li><strong>Squarespace:</strong> Settings &rarr; Developer Tools &rarr; Code Injection &rarr; Header</li>
+              <li><strong>Wix:</strong> Settings &rarr; Custom Code &rarr; Head</li>
+              <li><strong>Webflow:</strong> Project Settings &rarr; Custom Code &rarr; Head Code</li>
+              <li><strong>Ghost:</strong> Settings &rarr; Code Injection &rarr; Site Header</li>
+              <li><strong>Any HTML site:</strong> Paste directly into your <code>&lt;head&gt;</code> tag</li>
+            </ul>
+
+            <h2>Verify installation</h2>
+            <p>
+              After deploying, visit your site and check the Pulse dashboard. You should
+              see your first page view within a few seconds.
+            </p>
+
+            <hr className="my-8 border-neutral-800" />
+            <h3>Optional: Frustration Tracking</h3>
+            <p>
+              Detect rage clicks and dead clicks by adding the frustration tracking
+              add-on after the core script:
+            </p>
+            <CodeBlock filename="index.html">{`<script defer src="https://pulse.ciphera.net/script.frustration.js"></script>`}</CodeBlock>
+            <p>
+              No extra configuration needed. Add <code>data-no-rage</code> or{' '}
+              <code>data-no-dead</code> to disable individual signals.
+            </p>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/app/integrations/vue/page.tsx b/app/integrations/vue/page.tsx
deleted file mode 100644
index 013f6b9..0000000
--- a/app/integrations/vue/page.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { ArrowLeftIcon } from '@ciphera-net/ui'
-
-export default function VueIntegrationPage() {
-  return (
-    <div className="relative min-h-screen flex flex-col overflow-hidden">
-      {/* * --- ATMOSPHERE (Background) --- */}
-      <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
-        <div 
-          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
-          style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
-        />
-      </div>
-
-      <div className="flex-grow w-full max-w-4xl mx-auto px-4 pt-20 pb-10 z-10">
-        <Link 
-          href="/integrations" 
-          className="inline-flex items-center text-sm text-neutral-500 hover:text-brand-orange mb-8 transition-colors"
-        >
-          <ArrowLeftIcon className="w-4 h-4 mr-2" />
-          Back to Integrations
-        </Link>
-
-        <div className="flex items-center gap-4 mb-8">
-          <div className="p-3 bg-neutral-800 rounded-xl">
-            <svg viewBox="0 0 128 128" className="w-10 h-10 text-[#4FC08D] fill-current">
-              <path d="M82.8 24.6h27.8L64 103.4 17.4 24.6h27.8L64 59.4l18.8-34.8z" />
-              <path d="M64 24.6H39L64 67.4l25-42.8H64z" fill="#35495E" />
-            </svg>
-          </div>
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white">
-            Vue.js Integration
-          </h1>
-        </div>
-
-        <div className="prose prose-invert max-w-none">
-          <p className="lead text-xl text-neutral-400">
-            Integrating Pulse with Vue.js is straightforward. You can add the script to your <code>index.html</code> file.
-          </p>
-
-          <hr className="my-8 border-neutral-800" />
-
-          <h3>Method 1: index.html (Recommended)</h3>
-          <p>
-            Add the script tag to the <code>&lt;head&gt;</code> section of your <code>index.html</code> file. This works for both Vue 2 and Vue 3 projects created with Vue CLI or Vite.
-          </p>
-
-          <div className="bg-neutral-900 rounded-xl overflow-hidden border border-neutral-800 my-6">
-            <div className="flex items-center px-4 py-2 bg-neutral-800 border-b border-neutral-800">
-              <span className="text-xs text-neutral-400 font-mono">index.html</span>
-            </div>
-            <div className="p-4 overflow-x-auto">
-              <pre className="text-sm font-mono text-neutral-300">
-{`<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    
-    <!-- Pulse Analytics -->
-    <script 
-      defer 
-      data-domain="your-site.com" 
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-    
-    <title>My Vue App</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>`}
-              </pre>
-            </div>
-          </div>
-
-          <h3>Method 2: Nuxt.js</h3>
-          <p>
-            For Nuxt.js applications, you should add the script to your <code>nuxt.config.js</code> or <code>nuxt.config.ts</code> file.
-          </p>
-
-          <div className="bg-neutral-900 rounded-xl overflow-hidden border border-neutral-800 my-6">
-            <div className="flex items-center px-4 py-2 bg-neutral-800 border-b border-neutral-800">
-              <span className="text-xs text-neutral-400 font-mono">nuxt.config.ts</span>
-            </div>
-            <div className="p-4 overflow-x-auto">
-              <pre className="text-sm font-mono text-neutral-300">
-{`export default defineNuxtConfig({
-  app: {
-    head: {
-      script: [
-        {
-          src: 'https://pulse.ciphera.net/script.js',
-          defer: true,
-          'data-domain': 'your-site.com'
-        }
-      ]
-    }
-  }
-})`}
-              </pre>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/app/integrations/wordpress/page.tsx b/app/integrations/wordpress/page.tsx
deleted file mode 100644
index 98f9f6f..0000000
--- a/app/integrations/wordpress/page.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { ArrowLeftIcon } from '@ciphera-net/ui'
-
-export default function WordPressIntegrationPage() {
-  return (
-    <div className="relative min-h-screen flex flex-col overflow-hidden">
-      {/* * --- ATMOSPHERE (Background) --- */}
-      <div className="absolute inset-0 -z-10 pointer-events-none">
-        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
-        <div 
-          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
-          style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
-        />
-      </div>
-
-      <div className="flex-grow w-full max-w-4xl mx-auto px-4 pt-20 pb-10 z-10">
-        <Link 
-          href="/integrations" 
-          className="inline-flex items-center text-sm text-neutral-500 hover:text-brand-orange mb-8 transition-colors"
-        >
-          <ArrowLeftIcon className="w-4 h-4 mr-2" />
-          Back to Integrations
-        </Link>
-
-        <div className="flex items-center gap-4 mb-8">
-          <div className="p-3 bg-neutral-800 rounded-xl">
-            <svg viewBox="0 0 128 128" className="w-10 h-10 text-[#21759B] fill-current">
-              <path d="M116.6 64c0-19.2-10.4-36-26-45.2l28.6 78.4c-1 3.2-2.2 6.2-3.6 9.2-11.4 12.4-27.8 20.2-46 20.2-6.2 0-12.2-.8-17.8-2.4l26.2-76.4c1.2.2 2.4.4 3.6.4 5.4 0 13.8-.8 13.8-.8 2.8-.2 3.2 4 .4 4.2 0 0-2.8.2-6 .4l19 56.6 5.4-18c2.4-7.4 4.2-12.8 4.2-17.4 0-6-2.2-10.2-7.6-12.6-2.8-1.2-2.2-5.4 1.4-5.4h4.4zM64 121.2c-15.8 0-30.2-6.4-40.8-16.8L46.6 36.8c-2.8-.2-5.8-.4-5.8-.4-2.8-.2-2.4-4.4.4-4.2 0 0 8.4.8 13.6.8 5.4 0 13.6-.8 13.6-.8 2.8-.2 3.2 4 .4 4.2 0 0-2.8.2-5.8.4l18.2 54.4 10.6-31.8L64 121.2zM11.4 64c0 17 8.2 32.2 20.8 41.8L18.8 66.8c-.8-3.4-1.2-6.6-1.2-9.2 0-6.8 2.6-13 6.2-17.8C15.6 47.4 11.4 55.2 11.4 64zM64 6.8c16.2 0 30.8 6.8 41.4 17.6-1.4-.2-2.8-.2-4.2-.2-7.8 0-14.2 1.4-14.2 1.4-2.8.6-2.2 4.8.6 4.2 0 0 5-1 10.6-1 2.2 0 4.6.2 6.6.4L88.2 53 71.4 6.8h-7.4z" />
-            </svg>
-          </div>
-          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white">
-            WordPress Integration
-          </h1>
-        </div>
-
-        <div className="prose prose-invert max-w-none">
-          <p className="lead text-xl text-neutral-400">
-            You can add Pulse to your WordPress site without installing any heavy plugins, or by using a simple code snippet plugin.
-          </p>
-
-          <hr className="my-8 border-neutral-800" />
-
-          <h3>Method 1: Using a Plugin (Easiest)</h3>
-          <ol>
-            <li>Install a plugin like "Insert Headers and Footers" (WPCode).</li>
-            <li>Go to the plugin settings and find the "Scripts in Header" section.</li>
-            <li>Paste the following code snippet:</li>
-          </ol>
-
-          <div className="bg-neutral-900 rounded-xl overflow-hidden border border-neutral-800 my-6">
-            <div className="flex items-center px-4 py-2 bg-neutral-800 border-b border-neutral-800">
-              <span className="text-xs text-neutral-400 font-mono">Header Script</span>
-            </div>
-            <div className="p-4 overflow-x-auto">
-              <pre className="text-sm font-mono text-neutral-300">
-{`<script 
-  defer 
-  data-domain="your-site.com" 
-  src="https://pulse.ciphera.net/script.js"
-></script>`}
-              </pre>
-            </div>
-          </div>
-
-          <h3>Method 2: Edit Theme Files (Advanced)</h3>
-          <p>
-            If you are comfortable editing your theme files, you can add the script directly to your <code>header.php</code> file.
-          </p>
-          <ol>
-            <li>Go to Appearance &gt; Theme File Editor.</li>
-            <li>Select <code>header.php</code> from the right sidebar.</li>
-            <li>Paste the script tag just before the closing <code>&lt;/head&gt;</code> tag.</li>
-          </ol>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/app/sitemap.ts b/app/sitemap.ts
index d70f475..c6b0bf9 100644
--- a/app/sitemap.ts
+++ b/app/sitemap.ts
@@ -1,9 +1,13 @@
 import type { MetadataRoute } from 'next'
 import { integrations } from '@/lib/integrations'
+import { getIntegrationGuides } from '@/lib/integration-content'
 
 const BASE_URL = 'https://pulse.ciphera.net'
 
 export default function sitemap(): MetadataRoute.Sitemap {
+  const guides = getIntegrationGuides()
+  const guidesBySlug = new Map(guides.map((g) => [g.slug, g]))
+
   const publicRoutes = [
     { url: '', priority: 1.0, changeFrequency: 'weekly' as const },
     { url: '/about', priority: 0.8, changeFrequency: 'monthly' as const },
@@ -13,20 +17,33 @@ export default function sitemap(): MetadataRoute.Sitemap {
     { url: '/changelog', priority: 0.6, changeFrequency: 'weekly' as const },
     { url: '/installation', priority: 0.8, changeFrequency: 'monthly' as const },
     { url: '/integrations', priority: 0.8, changeFrequency: 'monthly' as const },
+    { url: '/integrations/script-tag', priority: 0.6, changeFrequency: 'monthly' as const },
   ]
 
-  const integrationRoutes = integrations.map((i) => ({
-    url: `/integrations/${i.id}`,
-    priority: 0.7,
-    changeFrequency: 'monthly' as const,
-  }))
+  const integrationRoutes = integrations
+    .filter((i) => i.dedicatedPage)
+    .map((i) => {
+      const guide = guidesBySlug.get(i.id)
+      return {
+        url: `/integrations/${i.id}`,
+        priority: 0.7,
+        changeFrequency: 'monthly' as const,
+        lastModified: guide?.date ? new Date(guide.date) : new Date('2026-03-28'),
+      }
+    })
 
-  const allRoutes = [...publicRoutes, ...integrationRoutes]
-
-  return allRoutes.map((route) => ({
-    url: `${BASE_URL}${route.url}`,
-    lastModified: new Date(),
-    changeFrequency: route.changeFrequency,
-    priority: route.priority,
-  }))
+  return [
+    ...publicRoutes.map((route) => ({
+      url: `${BASE_URL}${route.url}`,
+      lastModified: new Date('2026-03-28'),
+      changeFrequency: route.changeFrequency,
+      priority: route.priority,
+    })),
+    ...integrationRoutes.map((route) => ({
+      url: `${BASE_URL}${route.url}`,
+      lastModified: route.lastModified,
+      changeFrequency: route.changeFrequency,
+      priority: route.priority,
+    })),
+  ]
 }
diff --git a/content/integrations/angular.mdx b/content/integrations/angular.mdx
new file mode 100644
index 0000000..6531696
--- /dev/null
+++ b/content/integrations/angular.mdx
@@ -0,0 +1,39 @@
+---
+title: "Angular"
+description: "Add Pulse analytics to your Angular application. Simple index.html setup for all Angular versions."
+category: "framework"
+brandColor: "#0F0F11"
+officialUrl: "https://angular.dev"
+relatedIds: ["react", "vue"]
+date: "2026-03-28"
+---
+
+Add the script to your `src/index.html` — the single entry point for all Angular applications.
+
+---
+
+## Add the Pulse script to index.html
+
+Place the Pulse script inside the `<head>` tag of your Angular app's `src/index.html`.
+
+<CodeBlock filename="src/index.html">{`<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <script
+    defer
+    data-domain="your-site.com"
+    src="https://pulse.ciphera.net/script.js"
+  ></script>
+
+  <title>My Angular App</title>
+  <base href="/">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>`}</CodeBlock>
+
+For more details, see the [Angular docs](https://angular.dev/guide/components).
diff --git a/content/integrations/astro.mdx b/content/integrations/astro.mdx
new file mode 100644
index 0000000..974815f
--- /dev/null
+++ b/content/integrations/astro.mdx
@@ -0,0 +1,48 @@
+---
+title: "Astro"
+description: "Integrate Pulse analytics with Astro. Add the script to your base layout for all pages."
+category: "framework"
+brandColor: "#BC52EE"
+officialUrl: "https://docs.astro.build"
+relatedIds: ["svelte", "hugo", "eleventy"]
+date: "2026-03-28"
+---
+
+Add the Pulse script to your base layout so it's included on every page of your Astro site.
+
+---
+
+## Add to your base layout
+
+Place the Pulse script in the `<head>` of your shared layout component.
+
+<CodeBlock filename="src/layouts/BaseLayout.astro">{`---
+interface Props {
+  title: string
+}
+
+const { title } = Astro.props
+---
+
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <script
+      defer
+      data-domain="your-site.com"
+      src="https://pulse.ciphera.net/script.js"
+    ></script>
+
+    <title>{title}</title>
+</head>
+<body>
+    <slot />
+</body>
+</html>`}</CodeBlock>
+
+If you're using Astro's View Transitions, the script will persist across navigations by default since it's in the `<head>`.
+
+For more details, see the [Astro scripts docs](https://docs.astro.build/en/guides/client-side-scripts/).
diff --git a/content/integrations/django.mdx b/content/integrations/django.mdx
new file mode 100644
index 0000000..063008e
--- /dev/null
+++ b/content/integrations/django.mdx
@@ -0,0 +1,42 @@
+---
+title: "Django"
+description: "Add Pulse analytics to your Django app. Template-based integration for all Django versions."
+category: "backend"
+brandColor: "#092E20"
+officialUrl: "https://docs.djangoproject.com"
+relatedIds: ["flask", "laravel", "htmx"]
+date: "2026-03-28"
+---
+
+Add the Pulse script to your base template with a debug guard.
+
+---
+
+## Add to your base template
+
+Use Django's template tags to only load the script when `DEBUG` is `False`.
+
+<CodeBlock filename="templates/base.html">{`<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    {% if not debug %}
+    <script
+      defer
+      data-domain="your-site.com"
+      src="https://pulse.ciphera.net/script.js"
+    ></script>
+    {% endif %}
+
+    <title>{% block title %}My Django App{% endblock %}</title>
+</head>
+<body>
+    {% block content %}{% endblock %}
+</body>
+</html>`}</CodeBlock>
+
+Make sure to pass `debug` to the template context via `settings.DEBUG`, or use a context processor to make it available globally.
+
+For more details, see the [Django template docs](https://docs.djangoproject.com/en/stable/ref/templates/builtins/).
diff --git a/content/integrations/drupal.mdx b/content/integrations/drupal.mdx
new file mode 100644
index 0000000..5661548
--- /dev/null
+++ b/content/integrations/drupal.mdx
@@ -0,0 +1,45 @@
+---
+title: "Drupal"
+description: "Add Pulse analytics to your Drupal site using a module or theme template."
+category: "cms"
+brandColor: "#0678BE"
+officialUrl: "https://www.drupal.org/docs"
+relatedIds: ["wordpress", "joomla"]
+date: "2026-03-28"
+---
+
+Add the Pulse script via a contributed module or by editing your theme's Twig template.
+
+---
+
+## Method 1: Using Asset Injector module
+
+Install the [Asset Injector](https://www.drupal.org/project/asset_injector) module and create a new JS injector with the Pulse script. Set it to load on all pages in the header region.
+
+## Method 2: Edit html.html.twig
+
+Add the script directly to your theme's `html.html.twig` template in the head area.
+
+<CodeBlock filename="templates/html.html.twig">{`<!DOCTYPE html>
+<html{{ html_attributes }}>
+<head>
+    <head-placeholder token="{{ placeholder_token }}">
+    <title>{{ head_title|safe_join(' | ') }}</title>
+    <css-placeholder token="{{ placeholder_token }}">
+    <js-placeholder token="{{ placeholder_token }}">
+
+    <script
+      defer
+      data-domain="your-site.com"
+      src="https://pulse.ciphera.net/script.js"
+    ></script>
+</head>
+<body{{ attributes }}>
+    {{ page_top }}
+    {{ page }}
+    {{ page_bottom }}
+    <js-bottom-placeholder token="{{ placeholder_token }}">
+</body>
+</html>`}</CodeBlock>
+
+For more details, see the [Drupal theming docs](https://www.drupal.org/docs/theming-drupal).
diff --git a/content/integrations/eleventy.mdx b/content/integrations/eleventy.mdx
new file mode 100644
index 0000000..2ad4e5d
--- /dev/null
+++ b/content/integrations/eleventy.mdx
@@ -0,0 +1,38 @@
+---
+title: "Eleventy"
+description: "Add Pulse analytics to your Eleventy (11ty) site. Template-based integration."
+category: "ssg"
+brandColor: "#222222"
+officialUrl: "https://www.11ty.dev/docs"
+relatedIds: ["hugo", "jekyll", "astro"]
+date: "2026-03-28"
+---
+
+Add the Pulse script to your base Nunjucks or Liquid layout.
+
+---
+
+## Add to your base layout
+
+Place the Pulse script inside the `<head>` of your shared base template.
+
+<CodeBlock filename="src/_includes/base.njk">{`<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <script
+      defer
+      data-domain="your-site.com"
+      src="https://pulse.ciphera.net/script.js"
+    ></script>
+
+    <title>{{ title }}</title>
+</head>
+<body>
+    {{ content | safe }}
+</body>
+</html>`}</CodeBlock>
+
+For more details, see the [Eleventy layouts docs](https://www.11ty.dev/docs/layouts/).
diff --git a/content/integrations/express.mdx b/content/integrations/express.mdx
new file mode 100644
index 0000000..5e7d9ed
--- /dev/null
+++ b/content/integrations/express.mdx
@@ -0,0 +1,61 @@
+---
+title: "Express"
+description: "Serve Pulse analytics from your Express.js app. Middleware or template-based setup."
+category: "backend"
+brandColor: "#000000"
+officialUrl: "https://expressjs.com"
+relatedIds: ["flask", "nextjs", "react"]
+date: "2026-03-28"
+---
+
+Add the Pulse script to your template engine's layout (EJS, Pug, Handlebars) or serve it via static HTML.
+
+---
+
+## Method 1: EJS template
+
+If you use EJS as your template engine, add the script to your layout with a production guard.
+
+<CodeBlock filename="views/layout.ejs">{`<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <% if (process.env.NODE_ENV === 'production') { %>
+    <script
+      defer
+      data-domain="your-site.com"
+      src="https://pulse.ciphera.net/script.js"
+    ></script>
+    <% } %>
+
+    <title><%= title %></title>
+</head>
+<body>
+    <%- body %>
+</body>
+</html>`}</CodeBlock>
+
+## Method 2: Static HTML
+
+If you serve static HTML files via Express, add the script directly.
+
+<CodeBlock filename="public/index.html">{`<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <script
+      defer
+      data-domain="your-site.com"
+      src="https://pulse.ciphera.net/script.js"
+    ></script>
+
+    <title>My Express App</title>
+</head>
+<body>
+    <h1>Hello World</h1>
+</body>
+</html>`}</CodeBlock>
diff --git a/content/integrations/flask.mdx b/content/integrations/flask.mdx
new file mode 100644
index 0000000..140872a
--- /dev/null
+++ b/content/integrations/flask.mdx
@@ -0,0 +1,40 @@
+---
+title: "Flask"
+description: "Add Pulse analytics to your Flask app. Jinja2 template integration."
+category: "backend"
+brandColor: "#3BABC3"
+officialUrl: "https://flask.palletsprojects.com"
+relatedIds: ["django", "htmx", "express"]
+date: "2026-03-28"
+---
+
+Add the Pulse script to your Jinja2 base template with a debug guard.
+
+---
+
+## Add to your base template
+
+Use Jinja2's conditional to only load the script when `DEBUG` is off.
+
+<CodeBlock filename="templates/base.html">{`<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    {% if not config.DEBUG %}
+    <script
+      defer
+      data-domain="your-site.com"
+      src="https://pulse.ciphera.net/script.js"
+    ></script>
+    {% endif %}
+
+    <title>{% block title %}My Flask App{% endblock %}</title>
+</head>
+<body>
+    {% block content %}{% endblock %}
+</body>
+</html>`}</CodeBlock>
+
+For more details, see the [Flask template docs](https://flask.palletsprojects.com/en/stable/patterns/templateinheritance/).
diff --git a/content/integrations/framer.mdx b/content/integrations/framer.mdx
new file mode 100644
index 0000000..aec9208
--- /dev/null
+++ b/content/integrations/framer.mdx
@@ -0,0 +1,25 @@
+---
+title: "Framer"
+description: "Add Pulse analytics to your Framer site via custom code settings."
+category: "platform"
+brandColor: "#0055FF"
+officialUrl: "https://www.framer.com/help"
+relatedIds: ["webflow", "squarespace", "wix"]
+date: "2026-03-28"
+---
+
+Add the Pulse script to your Framer project's custom code settings.
+
+---
+
+## Add via Project Settings
+
+Go to **Project Settings -> General -> Custom Code -> Head** and paste the Pulse script.
+
+<CodeBlock filename="Project Settings -> Head">{`<script
+  defer
+  data-domain="your-site.com"
+  src="https://pulse.ciphera.net/script.js"
+></script>`}</CodeBlock>
+
+For more details, see the [Framer custom code docs](https://www.framer.com/help/articles/custom-code/).
diff --git a/content/integrations/gatsby.mdx b/content/integrations/gatsby.mdx
new file mode 100644
index 0000000..2c83a7f
--- /dev/null
+++ b/content/integrations/gatsby.mdx
@@ -0,0 +1,52 @@
+---
+title: "Gatsby"
+description: "Add Pulse analytics to your Gatsby site using gatsby-ssr or the Gatsby Head API."
+category: "ssg"
+brandColor: "#663399"
+officialUrl: "https://www.gatsbyjs.com/docs"
+relatedIds: ["react", "nextjs", "hugo"]
+date: "2026-03-28"
+---
+
+Use the Gatsby SSR API or the Gatsby Head API to add Pulse to your site.
+
+---
+
+## Method 1: gatsby-ssr.js
+
+Use the `onRenderBody` hook to inject the Pulse script into every page's `<head>`.
+
+<CodeBlock filename="gatsby-ssr.js">{`import React from "react"
+
+export const onRenderBody = ({ setHeadComponents }) => {
+  setHeadComponents([
+    <script
+      key="pulse-analytics"
+      defer
+      data-domain="your-site.com"
+      src="https://pulse.ciphera.net/script.js"
+    />,
+  ])
+}`}</CodeBlock>
+
+## Method 2: Gatsby Head API (v4.19+)
+
+If you're on Gatsby 4.19 or later, you can use the Head export in any page or template component.
+
+<CodeBlock filename="src/pages/index.tsx">{`import React from "react"
+
+export function Head() {
+  return (
+    <script
+      defer
+      data-domain="your-site.com"
+      src="https://pulse.ciphera.net/script.js"
+    />
+  )
+}
+
+export default function IndexPage() {
+  return <h1>Hello World</h1>
+}`}</CodeBlock>
+
+For more details, see the [Gatsby Head API docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/).
diff --git a/content/integrations/ghost.mdx b/content/integrations/ghost.mdx
new file mode 100644
index 0000000..9a1f01f
--- /dev/null
+++ b/content/integrations/ghost.mdx
@@ -0,0 +1,27 @@
+---
+title: "Ghost"
+description: "Add Pulse analytics to your Ghost blog via Code Injection settings."
+category: "cms"
+brandColor: "#15171A"
+officialUrl: "https://ghost.org/docs"
+relatedIds: ["wordpress", "blogger"]
+date: "2026-03-28"
+---
+
+Use Ghost's built-in Code Injection feature to add the Pulse script — no theme editing required.
+
+---
+
+## Add via Code Injection
+
+Go to **Settings -> Code injection -> Site Header** and paste the Pulse script.
+
+<CodeBlock filename="Settings -> Code injection -> Site Header">{`<script
+  defer
+  data-domain="your-site.com"
+  src="https://pulse.ciphera.net/script.js"
+></script>`}</CodeBlock>
+
+Alternatively, you can add the script directly to your theme's `default.hbs` template file.
+
+For more details, see the [Ghost themes docs](https://ghost.org/docs/themes/).
diff --git a/content/integrations/gtm.mdx b/content/integrations/gtm.mdx
new file mode 100644
index 0000000..e3206c7
--- /dev/null
+++ b/content/integrations/gtm.mdx
@@ -0,0 +1,39 @@
+---
+title: "Google Tag Manager"
+description: "Add Pulse analytics via Google Tag Manager. Works with any site using GTM."
+category: "platform"
+brandColor: "#246FDB"
+officialUrl: "https://tagmanager.google.com"
+relatedIds: ["wordpress", "shopify", "webflow"]
+date: "2026-03-28"
+---
+
+Add Pulse via Google Tag Manager — works with any site that already has GTM installed.
+
+---
+
+## Create a Custom HTML tag
+
+Follow these steps to add Pulse through GTM:
+
+1. Go to **Tags -> New -> Custom HTML**
+2. Paste the snippet below
+3. Set the trigger to **All Pages**
+4. Publish your container
+
+<CodeBlock filename="GTM -> Custom HTML Tag">{`<script defer src="https://pulse.ciphera.net/script.js"></script>`}</CodeBlock>
+
+That's it. Pulse auto-detects the domain from the page, so no extra configuration is needed.
+
+<details>
+<summary className="cursor-pointer text-sm text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300">Advanced: override domain or configure options</summary>
+
+If your site is registered under a different domain than the page hostname, or you need custom options (API endpoint, storage mode, etc.), use `pulseConfig`:
+
+<CodeBlock filename="GTM -> Custom HTML Tag (with config)">{`<script>
+  window.pulseConfig = { domain: "your-site.com" };
+</script>
+<script defer src="https://pulse.ciphera.net/script.js"></script>`}</CodeBlock>
+</details>
+
+For more details, see the [GTM Custom HTML tag docs](https://support.google.com/tagmanager/answer/6103696).
diff --git a/content/integrations/hugo.mdx b/content/integrations/hugo.mdx
new file mode 100644
index 0000000..8d0e4a5
--- /dev/null
+++ b/content/integrations/hugo.mdx
@@ -0,0 +1,44 @@
+---
+title: "Hugo"
+description: "Add Pulse analytics to your Hugo site via a partial or base template."
+category: "ssg"
+brandColor: "#FF4088"
+officialUrl: "https://gohugo.io/documentation"
+relatedIds: ["jekyll", "eleventy", "astro"]
+date: "2026-03-28"
+---
+
+Add the Pulse script via a Hugo partial or directly in your base template.
+
+---
+
+## Method 1: Create a partial
+
+Create an analytics partial with a production guard using Hugo's `.Site.IsServer` flag.
+
+<CodeBlock filename="layouts/partials/analytics.html">{`{{ if not .Site.IsServer }}
+<script
+  defer
+  data-domain="your-site.com"
+  src="https://pulse.ciphera.net/script.js"
+></script>
+{{ end }}`}</CodeBlock>
+
+## Method 2: Include the partial in your base layout
+
+Add the partial to your `baseof.html` layout.
+
+<CodeBlock filename="layouts/_default/baseof.html">{`<!DOCTYPE html>
+<html lang="{{ .Site.Language }}">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    {{ partial "analytics.html" . }}
+    <title>{{ .Title }}</title>
+</head>
+<body>
+    {{ block "main" . }}{{ end }}
+</body>
+</html>`}</CodeBlock>
+
+For more details, see the [Hugo partials docs](https://gohugo.io/templates/partials/).
diff --git a/content/integrations/laravel.mdx b/content/integrations/laravel.mdx
new file mode 100644
index 0000000..9364a2a
--- /dev/null
+++ b/content/integrations/laravel.mdx
@@ -0,0 +1,41 @@
+---
+title: "Laravel"
+description: "Add Pulse analytics to your Laravel app. Blade template integration for all Laravel versions."
+category: "backend"
+brandColor: "#FF2D20"
+officialUrl: "https://laravel.com/docs"
+relatedIds: ["django", "rails", "wordpress"]
+date: "2026-03-28"
+---
+
+Add the Pulse script to your Blade layout template with a production guard.
+
+---
+
+## Add to your Blade layout
+
+Use Laravel's `@production` directive to only load the script in production.
+
+<CodeBlock filename="resources/views/layouts/app.blade.php">{`<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    @production
+    <script
+      defer
+      data-domain="your-site.com"
+      src="https://pulse.ciphera.net/script.js"
+    ></script>
+    @endproduction
+
+    <title>@yield('title')</title>
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
+</head>
+<body>
+    @yield('content')
+</body>
+</html>`}</CodeBlock>
+
+For more details, see the [Laravel @production docs](https://laravel.com/docs/blade#the-production-directive).
diff --git a/content/integrations/nextjs.mdx b/content/integrations/nextjs.mdx
new file mode 100644
index 0000000..0f8db65
--- /dev/null
+++ b/content/integrations/nextjs.mdx
@@ -0,0 +1,68 @@
+---
+title: "Next.js"
+description: "Step-by-step guide to adding Pulse privacy-first analytics to your Next.js app with next/script. Covers App Router and Pages Router."
+category: "framework"
+brandColor: "#000000"
+officialUrl: "https://nextjs.org/docs"
+relatedIds: ["react", "vercel", "nuxt"]
+date: "2026-03-28"
+---
+
+The best way to add Pulse to your Next.js application is using the built-in `next/script` component.
+
+---
+
+## Method 1: App Router
+
+Add the Pulse script to your root layout so it loads on every page.
+
+<CodeBlock filename="app/layout.tsx">{`import Script from 'next/script'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <Script
+          defer
+          src="https://pulse.ciphera.net/script.js"
+          data-domain="your-site.com"
+          strategy="afterInteractive"
+        />
+      </head>
+      <body>{children}</body>
+    </html>
+  )
+}`}</CodeBlock>
+
+## Method 2: Pages Router
+
+If you're using the Pages Router, add the script to your custom `_app.tsx`.
+
+<CodeBlock filename="pages/_app.tsx">{`import Script from 'next/script'
+import type { AppProps } from 'next/app'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <>
+      <Script
+        defer
+        src="https://pulse.ciphera.net/script.js"
+        data-domain="your-site.com"
+        strategy="afterInteractive"
+      />
+      <Component {...pageProps} />
+    </>
+  )
+}`}</CodeBlock>
+
+## Configuration options
+
+- `data-domain` — your site's domain (without `https://`)
+- `src` — the Pulse script URL
+- `strategy="afterInteractive"` — loads the script after the page becomes interactive
+
+For more details, see the [Next.js Script docs](https://nextjs.org/docs/app/api-reference/components/script).
diff --git a/content/integrations/nuxt.mdx b/content/integrations/nuxt.mdx
new file mode 100644
index 0000000..68701a2
--- /dev/null
+++ b/content/integrations/nuxt.mdx
@@ -0,0 +1,49 @@
+---
+title: "Nuxt"
+description: "Configure Pulse analytics in Nuxt 2 or Nuxt 3 via nuxt.config. Simple, framework-native setup."
+category: "framework"
+brandColor: "#00DC82"
+officialUrl: "https://nuxt.com/docs"
+relatedIds: ["vue", "nextjs", "vitepress"]
+date: "2026-03-28"
+---
+
+Configure Pulse analytics in your `nuxt.config` for a framework-native setup.
+
+---
+
+## Method 1: Nuxt 3
+
+Add the Pulse script via the `app.head` option in your Nuxt 3 config.
+
+<CodeBlock filename="nuxt.config.ts">{`export default defineNuxtConfig({
+  app: {
+    head: {
+      script: [
+        {
+          defer: true,
+          'data-domain': 'your-site.com',
+          src: 'https://pulse.ciphera.net/script.js',
+        },
+      ],
+    },
+  },
+})`}</CodeBlock>
+
+## Method 2: Nuxt 2
+
+In Nuxt 2, use the `head` property in your config.
+
+<CodeBlock filename="nuxt.config.js">{`export default {
+  head: {
+    script: [
+      {
+        defer: true,
+        'data-domain': 'your-site.com',
+        src: 'https://pulse.ciphera.net/script.js',
+      },
+    ],
+  },
+}`}</CodeBlock>
+
+For more details, see the [Nuxt head config docs](https://nuxt.com/docs/api/nuxt-config#head).
diff --git a/content/integrations/rails.mdx b/content/integrations/rails.mdx
new file mode 100644
index 0000000..6282942
--- /dev/null
+++ b/content/integrations/rails.mdx
@@ -0,0 +1,42 @@
+---
+title: "Ruby on Rails"
+description: "Add Pulse analytics to your Ruby on Rails app. ERB layout integration."
+category: "backend"
+brandColor: "#D30001"
+officialUrl: "https://guides.rubyonrails.org"
+relatedIds: ["laravel", "django", "jekyll"]
+date: "2026-03-28"
+---
+
+Add the Pulse script to your application layout with a production environment guard.
+
+---
+
+## Add to your application layout
+
+Use an `if` guard to only load the script in production.
+
+<CodeBlock filename="app/views/layouts/application.html.erb">{`<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <% if Rails.env.production? %>
+  <script
+    defer
+    data-domain="your-site.com"
+    src="https://pulse.ciphera.net/script.js"
+  ></script>
+  <% end %>
+
+  <title><%= yield(:title) || "My Rails App" %></title>
+  <%= csrf_meta_tags %>
+  <%= stylesheet_link_tag "application" %>
+</head>
+<body>
+  <%= yield %>
+</body>
+</html>`}</CodeBlock>
+
+For more details, see the [Rails layout docs](https://guides.rubyonrails.org/layouts_and_rendering.html).
diff --git a/content/integrations/react.mdx b/content/integrations/react.mdx
new file mode 100644
index 0000000..fd8c566
--- /dev/null
+++ b/content/integrations/react.mdx
@@ -0,0 +1,56 @@
+---
+title: "React"
+description: "Integrate Pulse analytics with any React SPA — Create React App, Vite, or custom setups. Two easy methods."
+category: "framework"
+brandColor: "#61DAFB"
+officialUrl: "https://react.dev"
+relatedIds: ["nextjs", "remix", "gatsby", "preact"]
+date: "2026-03-28"
+---
+
+For standard React SPAs, add the script to your `index.html`.
+
+---
+
+## Method 1: index.html (Recommended)
+
+The simplest approach is to add the Pulse script directly to your HTML entry point.
+
+<CodeBlock filename="public/index.html">{`<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <script
+      defer
+      data-domain="your-site.com"
+      src="https://pulse.ciphera.net/script.js"
+    ></script>
+
+    <title>My React App</title>
+</head>
+<body>
+    <div id="root"></div>
+</body>
+</html>`}</CodeBlock>
+
+## Method 2: Programmatic injection via useEffect
+
+If you prefer to inject the script programmatically (e.g. only in production), use a `useEffect` hook.
+
+<CodeBlock filename="src/App.tsx">{`import { useEffect } from 'react'
+
+function App() {
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'production') {
+      const script = document.createElement('script')
+      script.defer = true
+      script.setAttribute('data-domain', 'your-site.com')
+      script.src = 'https://pulse.ciphera.net/script.js'
+      document.head.appendChild(script)
+    }
+  }, [])
+
+  return <div className="App"><h1>Hello World</h1></div>
+}`}</CodeBlock>
diff --git a/content/integrations/remix.mdx b/content/integrations/remix.mdx
new file mode 100644
index 0000000..9a5f56c
--- /dev/null
+++ b/content/integrations/remix.mdx
@@ -0,0 +1,50 @@
+---
+title: "Remix"
+description: "Add Pulse analytics to your Remix application via the root route. Simple script tag in app/root.tsx."
+category: "framework"
+brandColor: "#000000"
+officialUrl: "https://remix.run/docs"
+relatedIds: ["react", "nextjs"]
+date: "2026-03-28"
+---
+
+Add the Pulse script to your `app/root.tsx` so it's included on every route.
+
+---
+
+## Add script to app/root.tsx
+
+The root route is the top-level layout in Remix. Add the Pulse script inside the `<head>` section.
+
+<CodeBlock filename="app/root.tsx">{`import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from '@remix-run/react'
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+        <script
+          defer
+          data-domain="your-site.com"
+          src="https://pulse.ciphera.net/script.js"
+        />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  )
+}`}</CodeBlock>
+
+For more details, see the [Remix root docs](https://remix.run/docs/en/main/file-conventions/root).
diff --git a/content/integrations/script-tag.mdx b/content/integrations/script-tag.mdx
new file mode 100644
index 0000000..6fb4163
--- /dev/null
+++ b/content/integrations/script-tag.mdx
@@ -0,0 +1,45 @@
+---
+title: "Script Tag"
+description: "Add privacy-first analytics to any website with a single script tag. Works with any platform, CMS, or framework."
+category: "platform"
+brandColor: "#F97316"
+officialUrl: "https://pulse.ciphera.net"
+relatedIds: []
+date: "2026-03-28"
+---
+
+Add Pulse to any website by pasting a single script tag into your HTML. This works with any platform, CMS, or static site.
+
+---
+
+## Installation
+
+Add the following script tag inside the `<head>` section of your website:
+
+<CodeBlock filename="index.html">{`<head>
+  <!-- ... other head elements ... -->
+  <script
+    defer
+    src="https://pulse.ciphera.net/script.js"
+    data-domain="your-site.com"
+  ></script>
+</head>`}</CodeBlock>
+
+## Configuration
+
+- `data-domain` — your site's domain as shown in your Pulse dashboard (e.g. `example.com`), without `https://`
+- `defer` — loads the script without blocking page rendering
+
+## Where to paste the script
+
+Most platforms have a "Custom Code", "Code Injection", or "Header Scripts" section in their settings. Look for one of these:
+
+- **Squarespace:** Settings -> Developer Tools -> Code Injection -> Header
+- **Wix:** Settings -> Custom Code -> Head
+- **Webflow:** Project Settings -> Custom Code -> Head Code
+- **Ghost:** Settings -> Code Injection -> Site Header
+- **Any HTML site:** Paste directly into your `<head>` tag
+
+## Verify installation
+
+After deploying, visit your site and check the Pulse dashboard. You should see your first page view within a few seconds.
diff --git a/content/integrations/shopify.mdx b/content/integrations/shopify.mdx
new file mode 100644
index 0000000..1e0defd
--- /dev/null
+++ b/content/integrations/shopify.mdx
@@ -0,0 +1,32 @@
+---
+title: "Shopify"
+description: "Add Pulse privacy-first analytics to your Shopify store via the theme editor."
+category: "ecommerce"
+brandColor: "#7AB55C"
+officialUrl: "https://shopify.dev/docs"
+relatedIds: ["woocommerce", "bigcommerce", "prestashop"]
+date: "2026-03-28"
+---
+
+Add the Pulse script via the Shopify theme editor — no app needed.
+
+---
+
+## Method 1: Edit theme code
+
+Go to **Online Store -> Themes -> Edit code** and open `layout/theme.liquid`. Add the Pulse script before the closing `</head>` tag.
+
+<CodeBlock filename="layout/theme.liquid">{`<!-- Add before </head> -->
+<script
+  defer
+  data-domain="your-site.com"
+  src="https://pulse.ciphera.net/script.js"
+></script>`}</CodeBlock>
+
+## Method 2: Shopify Plus — Customer Events
+
+If you're on Shopify Plus, you can add the Pulse script via **Settings -> Customer Events -> Custom Pixels**.
+
+Use your custom domain or `.myshopify.com` domain as the `data-domain` value.
+
+For more details, see the [Shopify theme docs](https://shopify.dev/docs/storefronts/themes/architecture/layouts).
diff --git a/content/integrations/squarespace.mdx b/content/integrations/squarespace.mdx
new file mode 100644
index 0000000..1229a86
--- /dev/null
+++ b/content/integrations/squarespace.mdx
@@ -0,0 +1,27 @@
+---
+title: "Squarespace"
+description: "Add Pulse analytics to your Squarespace site via the Code Injection panel."
+category: "platform"
+brandColor: "#000000"
+officialUrl: "https://support.squarespace.com"
+relatedIds: ["webflow", "wix", "carrd"]
+date: "2026-03-28"
+---
+
+Use Squarespace's Code Injection feature to add the Pulse script.
+
+---
+
+## Add via Code Injection
+
+Go to **Settings -> Developer Tools -> Code Injection -> Header** and paste the Pulse script.
+
+<CodeBlock filename="Settings -> Code Injection -> Header">{`<script
+  defer
+  data-domain="your-site.com"
+  src="https://pulse.ciphera.net/script.js"
+></script>`}</CodeBlock>
+
+**Note:** Code Injection requires a Business or Commerce plan.
+
+For more details, see the [Squarespace code injection docs](https://support.squarespace.com/hc/en-us/articles/205815928).
diff --git a/content/integrations/svelte.mdx b/content/integrations/svelte.mdx
new file mode 100644
index 0000000..8f64611
--- /dev/null
+++ b/content/integrations/svelte.mdx
@@ -0,0 +1,53 @@
+---
+title: "Svelte"
+description: "Add Pulse analytics to Svelte or SvelteKit. Simple setup for both Vite-based Svelte and SvelteKit applications."
+category: "framework"
+brandColor: "#FF3E00"
+officialUrl: "https://svelte.dev"
+relatedIds: ["astro", "vue"]
+date: "2026-03-28"
+---
+
+Add the script to your `index.html` for Vite-based Svelte, or use `<svelte:head>` in SvelteKit.
+
+---
+
+## Method 1: Svelte (Vite)
+
+For standard Svelte projects using Vite, add the Pulse script to your `index.html`.
+
+<CodeBlock filename="index.html">{`<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <script
+      defer
+      data-domain="your-site.com"
+      src="https://pulse.ciphera.net/script.js"
+    ></script>
+
+    <title>My Svelte App</title>
+</head>
+<body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+</body>
+</html>`}</CodeBlock>
+
+## Method 2: SvelteKit
+
+In SvelteKit, use `<svelte:head>` in your root layout to add the script to every page.
+
+<CodeBlock filename="src/routes/+layout.svelte">{`<svelte:head>
+  <script
+    defer
+    data-domain="your-site.com"
+    src="https://pulse.ciphera.net/script.js"
+  ></script>
+</svelte:head>
+
+<slot />`}</CodeBlock>
+
+Alternatively, you can add the script directly to `src/app.html` in your SvelteKit project.
diff --git a/content/integrations/vue.mdx b/content/integrations/vue.mdx
new file mode 100644
index 0000000..2d3df51
--- /dev/null
+++ b/content/integrations/vue.mdx
@@ -0,0 +1,39 @@
+---
+title: "Vue.js"
+description: "Add Pulse privacy-first analytics to your Vue.js app. Works with Vue 2, Vue 3, Vue CLI, and Vite."
+category: "framework"
+brandColor: "#4FC08D"
+officialUrl: "https://vuejs.org"
+relatedIds: ["nuxt", "vitepress"]
+date: "2026-03-28"
+---
+
+Add the script to your `index.html` — works for both Vue CLI and Vite-based projects.
+
+---
+
+## Add the Pulse script to index.html
+
+Both Vue CLI and Vite use an `index.html` as the entry point. Simply add the Pulse script inside the `<head>` tag.
+
+<CodeBlock filename="index.html">{`<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <script
+      defer
+      data-domain="your-site.com"
+      src="https://pulse.ciphera.net/script.js"
+    ></script>
+
+    <title>My Vue App</title>
+</head>
+<body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+</body>
+</html>`}</CodeBlock>
+
+Looking for Nuxt? Check the dedicated [Nuxt guide](/integrations/nuxt).
diff --git a/content/integrations/webflow.mdx b/content/integrations/webflow.mdx
new file mode 100644
index 0000000..91239bf
--- /dev/null
+++ b/content/integrations/webflow.mdx
@@ -0,0 +1,27 @@
+---
+title: "Webflow"
+description: "Add Pulse analytics to your Webflow site via project custom code settings."
+category: "platform"
+brandColor: "#146EF5"
+officialUrl: "https://university.webflow.com"
+relatedIds: ["squarespace", "wix", "framer"]
+date: "2026-03-28"
+---
+
+Paste the Pulse script into your Webflow project's custom code settings.
+
+---
+
+## Add via Project Settings
+
+Go to **Project Settings -> Custom Code -> Head Code** and paste the Pulse script.
+
+<CodeBlock filename="Project Settings -> Head Code">{`<script
+  defer
+  data-domain="your-site.com"
+  src="https://pulse.ciphera.net/script.js"
+></script>`}</CodeBlock>
+
+**Note:** Custom code requires a paid Webflow site plan. The script won't appear in the Designer preview — publish your site to see it in action.
+
+For more details, see the [Webflow custom code docs](https://university.webflow.com/lesson/custom-code-in-the-head-and-body-tag).
diff --git a/content/integrations/wix.mdx b/content/integrations/wix.mdx
new file mode 100644
index 0000000..1ab7977
--- /dev/null
+++ b/content/integrations/wix.mdx
@@ -0,0 +1,27 @@
+---
+title: "Wix"
+description: "Add Pulse analytics to your Wix site via Custom Code settings."
+category: "platform"
+brandColor: "#0C6EFC"
+officialUrl: "https://support.wix.com"
+relatedIds: ["webflow", "squarespace", "framer"]
+date: "2026-03-28"
+---
+
+Use Wix's Custom Code settings to add the Pulse script.
+
+---
+
+## Add via Custom Code
+
+Go to **Settings -> Custom Code -> Add Custom Code**. Set the placement to **Head** and apply it to **All pages**.
+
+<CodeBlock filename="Custom Code Snippet">{`<script
+  defer
+  data-domain="your-site.com"
+  src="https://pulse.ciphera.net/script.js"
+></script>`}</CodeBlock>
+
+**Note:** Custom Code requires a Wix Premium plan.
+
+For more details, see the [Wix custom code docs](https://support.wix.com/en/article/embedding-custom-code-on-your-site).
diff --git a/content/integrations/wordpress.mdx b/content/integrations/wordpress.mdx
new file mode 100644
index 0000000..1223536
--- /dev/null
+++ b/content/integrations/wordpress.mdx
@@ -0,0 +1,27 @@
+---
+title: "WordPress"
+description: "Add Pulse analytics to your WordPress site via a plugin or theme header code."
+category: "cms"
+brandColor: "#21759B"
+officialUrl: "https://wordpress.org/documentation"
+relatedIds: ["ghost", "drupal", "woocommerce"]
+date: "2026-03-28"
+---
+
+Add the Pulse script via a plugin or by editing your theme's header file directly.
+
+---
+
+## Method 1: Using a plugin (Recommended)
+
+The easiest way is to use the [WPCode (Insert Headers and Footers)](https://wordpress.org/plugins/insert-headers-and-footers/) plugin. Install it, then go to **Code Snippets -> Header & Footer** and paste the Pulse script into the Header section.
+
+<CodeBlock filename="Header Script">{`<script
+  defer
+  data-domain="your-site.com"
+  src="https://pulse.ciphera.net/script.js"
+></script>`}</CodeBlock>
+
+## Method 2: Edit header.php directly
+
+Go to **Appearance -> Theme File Editor** and edit `header.php`. Add the Pulse script before the closing `</head>` tag.
diff --git a/lib/integration-content.ts b/lib/integration-content.ts
new file mode 100644
index 0000000..12940fe
--- /dev/null
+++ b/lib/integration-content.ts
@@ -0,0 +1,63 @@
+import fs from 'fs'
+import path from 'path'
+import matter from 'gray-matter'
+
+const CONTENT_DIR = path.join(process.cwd(), 'content', 'integrations')
+
+export interface IntegrationGuideMeta {
+  slug: string
+  title: string
+  description: string
+  category: string
+  brandColor: string
+  officialUrl: string
+  relatedIds: string[]
+  date: string
+}
+
+export interface IntegrationGuideArticle extends IntegrationGuideMeta {
+  content: string
+}
+
+export function getIntegrationGuides(): IntegrationGuideMeta[] {
+  if (!fs.existsSync(CONTENT_DIR)) return []
+
+  const files = fs.readdirSync(CONTENT_DIR).filter((f) => f.endsWith('.mdx'))
+
+  return files.map((filename) => {
+    const slug = filename.replace(/\.mdx$/, '')
+    const raw = fs.readFileSync(path.join(CONTENT_DIR, filename), 'utf-8')
+    const { data } = matter(raw)
+
+    return {
+      slug,
+      title: data.title,
+      description: data.description,
+      category: data.category,
+      brandColor: data.brandColor,
+      officialUrl: data.officialUrl,
+      relatedIds: data.relatedIds || [],
+      date: data.date,
+    }
+  })
+}
+
+export function getIntegrationGuide(slug: string): IntegrationGuideArticle | null {
+  const filePath = path.join(CONTENT_DIR, `${slug}.mdx`)
+  if (!fs.existsSync(filePath)) return null
+
+  const raw = fs.readFileSync(filePath, 'utf-8')
+  const { data, content } = matter(raw)
+
+  return {
+    slug,
+    title: data.title,
+    description: data.description,
+    category: data.category,
+    brandColor: data.brandColor,
+    officialUrl: data.officialUrl,
+    relatedIds: data.relatedIds || [],
+    date: data.date,
+    content,
+  }
+}
diff --git a/lib/integration-guides.tsx b/lib/integration-guides.tsx
deleted file mode 100644
index d72993d..0000000
--- a/lib/integration-guides.tsx
+++ /dev/null
@@ -1,3606 +0,0 @@
-/**
- * @file Integration guide content — full JSX guide for every supported platform.
- *
- * Each guide is keyed by the integration slug and rendered on the
- * `/integrations/[slug]` page.
- *
- * * 75 guides across 7 categories.
- */
-
-import { type ReactNode } from 'react'
-import { CodeBlock } from '@ciphera-net/ui'
-
-// * ─── Guide registry ─────────────────────────────────────────────────────────
-
-const guides: Record<string, ReactNode> = {
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 1. Next.js
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'nextjs': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        The best way to add Pulse to your Next.js application is using the
-        built-in <code>next/script</code> component.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Method 1: App Router</h3>
-      <p>
-        Add the Pulse script to your root layout so it loads on every page.
-      </p>
-      <CodeBlock filename="app/layout.tsx">{`import Script from 'next/script'
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <html lang="en">
-      <head>
-        <Script
-          defer
-          src="https://pulse.ciphera.net/script.js"
-          data-domain="your-site.com"
-          strategy="afterInteractive"
-        />
-      </head>
-      <body>{children}</body>
-    </html>
-  )
-}`}</CodeBlock>
-
-      <h3>Method 2: Pages Router</h3>
-      <p>
-        If you&apos;re using the Pages Router, add the script to your custom{' '}
-        <code>_app.tsx</code>.
-      </p>
-      <CodeBlock filename="pages/_app.tsx">{`import Script from 'next/script'
-import type { AppProps } from 'next/app'
-
-export default function App({ Component, pageProps }: AppProps) {
-  return (
-    <>
-      <Script
-        defer
-        src="https://pulse.ciphera.net/script.js"
-        data-domain="your-site.com"
-        strategy="afterInteractive"
-      />
-      <Component {...pageProps} />
-    </>
-  )
-}`}</CodeBlock>
-
-      <h3>Configuration options</h3>
-      <ul>
-        <li><code>data-domain</code> &mdash; your site&apos;s domain (without <code>https://</code>)</li>
-        <li><code>src</code> &mdash; the Pulse script URL</li>
-        <li><code>strategy=&quot;afterInteractive&quot;</code> &mdash; loads the script after the page becomes interactive</li>
-      </ul>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://nextjs.org/docs/app/api-reference/components/script" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Next.js Script docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/react" className="text-brand-orange hover:underline">React</a>,{' '}
-        <a href="/integrations/vercel" className="text-brand-orange hover:underline">Vercel</a>,{' '}
-        <a href="/integrations/nuxt" className="text-brand-orange hover:underline">Nuxt</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 2. React
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'react': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        For standard React SPAs, add the script to your <code>index.html</code>.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Method 1: index.html (Recommended)</h3>
-      <p>
-        The simplest approach is to add the Pulse script directly to your HTML
-        entry point.
-      </p>
-      <CodeBlock filename="public/index.html">{`<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-
-    <title>My React App</title>
-</head>
-<body>
-    <div id="root"></div>
-</body>
-</html>`}</CodeBlock>
-
-      <h3>Method 2: Programmatic injection via useEffect</h3>
-      <p>
-        If you prefer to inject the script programmatically (e.g. only in
-        production), use a <code>useEffect</code> hook.
-      </p>
-      <CodeBlock filename="src/App.tsx">{`import { useEffect } from 'react'
-
-function App() {
-  useEffect(() => {
-    if (process.env.NODE_ENV === 'production') {
-      const script = document.createElement('script')
-      script.defer = true
-      script.setAttribute('data-domain', 'your-site.com')
-      script.src = 'https://pulse.ciphera.net/script.js'
-      document.head.appendChild(script)
-    }
-  }, [])
-
-  return <div className="App"><h1>Hello World</h1></div>
-}`}</CodeBlock>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/nextjs" className="text-brand-orange hover:underline">Next.js</a>,{' '}
-        <a href="/integrations/remix" className="text-brand-orange hover:underline">Remix</a>,{' '}
-        <a href="/integrations/gatsby" className="text-brand-orange hover:underline">Gatsby</a>,{' '}
-        <a href="/integrations/preact" className="text-brand-orange hover:underline">Preact</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 3. Vue.js
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'vue': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the script to your <code>index.html</code> — works for both Vue CLI
-        and Vite-based projects.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add the Pulse script to index.html</h3>
-      <p>
-        Both Vue CLI and Vite use an <code>index.html</code> as the entry point.
-        Simply add the Pulse script inside the <code>&lt;head&gt;</code> tag.
-      </p>
-      <CodeBlock filename="index.html">{`<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-
-    <title>My Vue App</title>
-</head>
-<body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-</body>
-</html>`}</CodeBlock>
-
-      <p>
-        Looking for Nuxt? Check the dedicated{' '}
-        <a href="/integrations/nuxt" className="text-brand-orange hover:underline">Nuxt guide</a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/nuxt" className="text-brand-orange hover:underline">Nuxt</a>,{' '}
-        <a href="/integrations/vitepress" className="text-brand-orange hover:underline">VitePress</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 4. Angular
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'angular': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the script to your <code>src/index.html</code> — the single entry
-        point for all Angular applications.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add the Pulse script to index.html</h3>
-      <p>
-        Place the Pulse script inside the <code>&lt;head&gt;</code> tag of your
-        Angular app&apos;s <code>src/index.html</code>.
-      </p>
-      <CodeBlock filename="src/index.html">{`<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-
-  <script
-    defer
-    data-domain="your-site.com"
-    src="https://pulse.ciphera.net/script.js"
-  ></script>
-
-  <title>My Angular App</title>
-  <base href="/">
-</head>
-<body>
-  <app-root></app-root>
-</body>
-</html>`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://angular.dev/guide/components" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Angular docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/react" className="text-brand-orange hover:underline">React</a>,{' '}
-        <a href="/integrations/vue" className="text-brand-orange hover:underline">Vue.js</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 5. Svelte
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'svelte': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the script to your <code>index.html</code> for Vite-based Svelte, or
-        use <code>&lt;svelte:head&gt;</code> in SvelteKit.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Method 1: Svelte (Vite)</h3>
-      <p>
-        For standard Svelte projects using Vite, add the Pulse script to your{' '}
-        <code>index.html</code>.
-      </p>
-      <CodeBlock filename="index.html">{`<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-
-    <title>My Svelte App</title>
-</head>
-<body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-</body>
-</html>`}</CodeBlock>
-
-      <h3>Method 2: SvelteKit</h3>
-      <p>
-        In SvelteKit, use <code>&lt;svelte:head&gt;</code> in your root layout
-        to add the script to every page.
-      </p>
-      <CodeBlock filename="src/routes/+layout.svelte">{`<svelte:head>
-  <script
-    defer
-    data-domain="your-site.com"
-    src="https://pulse.ciphera.net/script.js"
-  ></script>
-</svelte:head>
-
-<slot />`}</CodeBlock>
-
-      <p>
-        Alternatively, you can add the script directly to{' '}
-        <code>src/app.html</code> in your SvelteKit project.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/astro" className="text-brand-orange hover:underline">Astro</a>,{' '}
-        <a href="/integrations/vue" className="text-brand-orange hover:underline">Vue.js</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 6. Nuxt
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'nuxt': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Configure Pulse analytics in your <code>nuxt.config</code> for a
-        framework-native setup.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Method 1: Nuxt 3</h3>
-      <p>
-        Add the Pulse script via the <code>app.head</code> option in your Nuxt 3
-        config.
-      </p>
-      <CodeBlock filename="nuxt.config.ts">{`export default defineNuxtConfig({
-  app: {
-    head: {
-      script: [
-        {
-          defer: true,
-          'data-domain': 'your-site.com',
-          src: 'https://pulse.ciphera.net/script.js',
-        },
-      ],
-    },
-  },
-})`}</CodeBlock>
-
-      <h3>Method 2: Nuxt 2</h3>
-      <p>
-        In Nuxt 2, use the <code>head</code> property in your config.
-      </p>
-      <CodeBlock filename="nuxt.config.js">{`export default {
-  head: {
-    script: [
-      {
-        defer: true,
-        'data-domain': 'your-site.com',
-        src: 'https://pulse.ciphera.net/script.js',
-      },
-    ],
-  },
-}`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://nuxt.com/docs/api/nuxt-config#head" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Nuxt head config docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/vue" className="text-brand-orange hover:underline">Vue.js</a>,{' '}
-        <a href="/integrations/nextjs" className="text-brand-orange hover:underline">Next.js</a>,{' '}
-        <a href="/integrations/vitepress" className="text-brand-orange hover:underline">VitePress</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 7. Remix
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'remix': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script to your <code>app/root.tsx</code> so it&apos;s
-        included on every route.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add script to app/root.tsx</h3>
-      <p>
-        The root route is the top-level layout in Remix. Add the Pulse script
-        inside the <code>&lt;head&gt;</code> section.
-      </p>
-      <CodeBlock filename="app/root.tsx">{`import {
-  Links,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-} from '@remix-run/react'
-
-export default function App() {
-  return (
-    <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <Meta />
-        <Links />
-        <script
-          defer
-          data-domain="your-site.com"
-          src="https://pulse.ciphera.net/script.js"
-        />
-      </head>
-      <body>
-        <Outlet />
-        <ScrollRestoration />
-        <Scripts />
-      </body>
-    </html>
-  )
-}`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://remix.run/docs/en/main/file-conventions/root" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Remix root docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/react" className="text-brand-orange hover:underline">React</a>,{' '}
-        <a href="/integrations/nextjs" className="text-brand-orange hover:underline">Next.js</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 8. Astro
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'astro': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script to your base layout so it&apos;s included on every
-        page of your Astro site.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add to your base layout</h3>
-      <p>
-        Place the Pulse script in the <code>&lt;head&gt;</code> of your shared
-        layout component.
-      </p>
-      <CodeBlock filename="src/layouts/BaseLayout.astro">{`---
-interface Props {
-  title: string
-}
-
-const { title } = Astro.props
----
-
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-
-    <title>{title}</title>
-</head>
-<body>
-    <slot />
-</body>
-</html>`}</CodeBlock>
-
-      <p>
-        If you&apos;re using Astro&apos;s View Transitions, the script will
-        persist across navigations by default since it&apos;s in the{' '}
-        <code>&lt;head&gt;</code>.
-      </p>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://docs.astro.build/en/guides/client-side-scripts/" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Astro scripts docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/svelte" className="text-brand-orange hover:underline">Svelte</a>,{' '}
-        <a href="/integrations/hugo" className="text-brand-orange hover:underline">Hugo</a>,{' '}
-        <a href="/integrations/eleventy" className="text-brand-orange hover:underline">Eleventy</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 9. Solid.js
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'solidjs': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script to your <code>index.html</code> like any Vite-based
-        project.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add the Pulse script to index.html</h3>
-      <p>
-        Solid.js uses Vite under the hood, so simply add the Pulse script to
-        your HTML entry file.
-      </p>
-      <CodeBlock filename="index.html">{`<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-
-    <title>My Solid App</title>
-</head>
-<body>
-    <div id="root"></div>
-    <script type="module" src="/src/index.tsx"></script>
-</body>
-</html>`}</CodeBlock>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/react" className="text-brand-orange hover:underline">React</a>,{' '}
-        <a href="/integrations/qwik" className="text-brand-orange hover:underline">Qwik</a>,{' '}
-        <a href="/integrations/preact" className="text-brand-orange hover:underline">Preact</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 10. Qwik
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'qwik': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script to your root entry component so it loads on every
-        page.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add to src/root.tsx</h3>
-      <p>
-        In Qwik, add the Pulse script to the <code>&lt;head&gt;</code> section
-        of your root component.
-      </p>
-      <CodeBlock filename="src/root.tsx">{`import { component$ } from '@builder.io/qwik'
-import { QwikCityProvider, RouterOutlet } from '@builder.io/qwik-city'
-
-export default component$(() => {
-  return (
-    <QwikCityProvider>
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <script
-          defer
-          data-domain="your-site.com"
-          src="https://pulse.ciphera.net/script.js"
-        />
-      </head>
-      <body>
-        <RouterOutlet />
-      </body>
-    </QwikCityProvider>
-  )
-})`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://qwik.dev/docs/advanced/containers/" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Qwik docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/react" className="text-brand-orange hover:underline">React</a>,{' '}
-        <a href="/integrations/solidjs" className="text-brand-orange hover:underline">Solid.js</a>,{' '}
-        <a href="/integrations/astro" className="text-brand-orange hover:underline">Astro</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 11. Preact
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'preact': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script to your <code>index.html</code> like any Vite or
-        HTML project.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add the Pulse script to index.html</h3>
-      <p>
-        Preact&apos;s setup is identical to any Vite-based project. Add the
-        script to your entry HTML file.
-      </p>
-      <CodeBlock filename="index.html">{`<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-
-    <title>My Preact App</title>
-</head>
-<body>
-    <div id="app"></div>
-    <script type="module" src="/src/index.tsx"></script>
-</body>
-</html>`}</CodeBlock>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/react" className="text-brand-orange hover:underline">React</a>,{' '}
-        <a href="/integrations/solidjs" className="text-brand-orange hover:underline">Solid.js</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 12. HTMX
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'htmx': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Since HTMX is used with server-rendered HTML, add the Pulse script to
-        your server&apos;s base template.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add to your base HTML template</h3>
-      <p>
-        HTMX works with any backend — Django, Flask, Laravel, Rails, Express,
-        and more. Add the Pulse script to whichever base template your server
-        renders.
-      </p>
-      <CodeBlock filename="base.html">{`<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-
-    <script src="https://unpkg.com/htmx.org"></script>
-    <title>My HTMX App</title>
-</head>
-<body>
-    <!-- Your HTMX-powered content -->
-</body>
-</html>`}</CodeBlock>
-
-      <p>
-        See the backend-specific guides for template syntax details:{' '}
-        <a href="/integrations/django" className="text-brand-orange hover:underline">Django</a>,{' '}
-        <a href="/integrations/flask" className="text-brand-orange hover:underline">Flask</a>,{' '}
-        <a href="/integrations/laravel" className="text-brand-orange hover:underline">Laravel</a>,{' '}
-        <a href="/integrations/rails" className="text-brand-orange hover:underline">Rails</a>,{' '}
-        <a href="/integrations/express" className="text-brand-orange hover:underline">Express</a>.
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 13. Ember.js
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'ember': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script to your <code>app/index.html</code>.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add the Pulse script to index.html</h3>
-      <p>
-        Ember uses <code>app/index.html</code> as its entry point. Add the
-        script inside the <code>&lt;head&gt;</code> tag.
-      </p>
-      <CodeBlock filename="app/index.html">{`<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-
-    <title>My Ember App</title>
-
-    {{content-for "head"}}
-    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/app.css">
-</head>
-<body>
-    {{content-for "body"}}
-    <script src="{{rootURL}}assets/vendor.js"></script>
-    <script src="{{rootURL}}assets/app.js"></script>
-</body>
-</html>`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://guides.emberjs.com/release/" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Ember docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/react" className="text-brand-orange hover:underline">React</a>,{' '}
-        <a href="/integrations/angular" className="text-brand-orange hover:underline">Angular</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 14. Laravel
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'laravel': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script to your Blade layout template with a production
-        guard.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add to your Blade layout</h3>
-      <p>
-        Use Laravel&apos;s <code>@production</code> directive to only load the
-        script in production.
-      </p>
-      <CodeBlock filename="resources/views/layouts/app.blade.php">{`<!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    @production
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-    @endproduction
-
-    <title>@yield('title')</title>
-    @vite(['resources/css/app.css', 'resources/js/app.js'])
-</head>
-<body>
-    @yield('content')
-</body>
-</html>`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://laravel.com/docs/blade#the-production-directive" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Laravel @production docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/django" className="text-brand-orange hover:underline">Django</a>,{' '}
-        <a href="/integrations/rails" className="text-brand-orange hover:underline">Rails</a>,{' '}
-        <a href="/integrations/wordpress" className="text-brand-orange hover:underline">WordPress</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 15. Django
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'django': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script to your base template with a debug guard.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add to your base template</h3>
-      <p>
-        Use Django&apos;s template tags to only load the script when{' '}
-        <code>DEBUG</code> is <code>False</code>.
-      </p>
-      <CodeBlock filename="templates/base.html">{`<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    {% if not debug %}
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-    {% endif %}
-
-    <title>{% block title %}My Django App{% endblock %}</title>
-</head>
-<body>
-    {% block content %}{% endblock %}
-</body>
-</html>`}</CodeBlock>
-
-      <p>
-        Make sure to pass <code>debug</code> to the template context via{' '}
-        <code>settings.DEBUG</code>, or use a context processor to make it
-        available globally.
-      </p>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://docs.djangoproject.com/en/stable/ref/templates/builtins/" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Django template docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/flask" className="text-brand-orange hover:underline">Flask</a>,{' '}
-        <a href="/integrations/laravel" className="text-brand-orange hover:underline">Laravel</a>,{' '}
-        <a href="/integrations/htmx" className="text-brand-orange hover:underline">HTMX</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 16. Ruby on Rails
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'rails': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script to your application layout with a production
-        environment guard.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add to your application layout</h3>
-      <p>
-        Use an <code>if</code> guard to only load the script in production.
-      </p>
-      <CodeBlock filename="app/views/layouts/application.html.erb">{`<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-
-  <% if Rails.env.production? %>
-  <script
-    defer
-    data-domain="your-site.com"
-    src="https://pulse.ciphera.net/script.js"
-  ></script>
-  <% end %>
-
-  <title><%= yield(:title) || "My Rails App" %></title>
-  <%= csrf_meta_tags %>
-  <%= stylesheet_link_tag "application" %>
-</head>
-<body>
-  <%= yield %>
-</body>
-</html>`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://guides.rubyonrails.org/layouts_and_rendering.html" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Rails layout docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/laravel" className="text-brand-orange hover:underline">Laravel</a>,{' '}
-        <a href="/integrations/django" className="text-brand-orange hover:underline">Django</a>,{' '}
-        <a href="/integrations/jekyll" className="text-brand-orange hover:underline">Jekyll</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 17. Flask
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'flask': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script to your Jinja2 base template with a debug guard.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add to your base template</h3>
-      <p>
-        Use Jinja2&apos;s conditional to only load the script when{' '}
-        <code>DEBUG</code> is off.
-      </p>
-      <CodeBlock filename="templates/base.html">{`<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    {% if not config.DEBUG %}
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-    {% endif %}
-
-    <title>{% block title %}My Flask App{% endblock %}</title>
-</head>
-<body>
-    {% block content %}{% endblock %}
-</body>
-</html>`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://flask.palletsprojects.com/en/stable/patterns/templateinheritance/" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Flask template docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/django" className="text-brand-orange hover:underline">Django</a>,{' '}
-        <a href="/integrations/htmx" className="text-brand-orange hover:underline">HTMX</a>,{' '}
-        <a href="/integrations/express" className="text-brand-orange hover:underline">Express</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 18. Express
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'express': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script to your template engine&apos;s layout (EJS, Pug,
-        Handlebars) or serve it via static HTML.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Method 1: EJS template</h3>
-      <p>
-        If you use EJS as your template engine, add the script to your layout
-        with a production guard.
-      </p>
-      <CodeBlock filename="views/layout.ejs">{`<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <% if (process.env.NODE_ENV === 'production') { %>
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-    <% } %>
-
-    <title><%= title %></title>
-</head>
-<body>
-    <%- body %>
-</body>
-</html>`}</CodeBlock>
-
-      <h3>Method 2: Static HTML</h3>
-      <p>
-        If you serve static HTML files via Express, add the script directly.
-      </p>
-      <CodeBlock filename="public/index.html">{`<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-
-    <title>My Express App</title>
-</head>
-<body>
-    <h1>Hello World</h1>
-</body>
-</html>`}</CodeBlock>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/flask" className="text-brand-orange hover:underline">Flask</a>,{' '}
-        <a href="/integrations/nextjs" className="text-brand-orange hover:underline">Next.js</a>,{' '}
-        <a href="/integrations/react" className="text-brand-orange hover:underline">React</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 19. Gatsby
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'gatsby': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Use the Gatsby SSR API or the Gatsby Head API to add Pulse to your site.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Method 1: gatsby-ssr.js</h3>
-      <p>
-        Use the <code>onRenderBody</code> hook to inject the Pulse script into
-        every page&apos;s <code>&lt;head&gt;</code>.
-      </p>
-      <CodeBlock filename="gatsby-ssr.js">{`import React from "react"
-
-export const onRenderBody = ({ setHeadComponents }) => {
-  setHeadComponents([
-    <script
-      key="pulse-analytics"
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    />,
-  ])
-}`}</CodeBlock>
-
-      <h3>Method 2: Gatsby Head API (v4.19+)</h3>
-      <p>
-        If you&apos;re on Gatsby 4.19 or later, you can use the Head export in
-        any page or template component.
-      </p>
-      <CodeBlock filename="src/pages/index.tsx">{`import React from "react"
-
-export function Head() {
-  return (
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    />
-  )
-}
-
-export default function IndexPage() {
-  return <h1>Hello World</h1>
-}`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Gatsby Head API docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/react" className="text-brand-orange hover:underline">React</a>,{' '}
-        <a href="/integrations/nextjs" className="text-brand-orange hover:underline">Next.js</a>,{' '}
-        <a href="/integrations/hugo" className="text-brand-orange hover:underline">Hugo</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 20. Hugo
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'hugo': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script via a Hugo partial or directly in your base
-        template.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Method 1: Create a partial</h3>
-      <p>
-        Create an analytics partial with a production guard using Hugo&apos;s{' '}
-        <code>.Site.IsServer</code> flag.
-      </p>
-      <CodeBlock filename="layouts/partials/analytics.html">{`{{ if not .Site.IsServer }}
-<script
-  defer
-  data-domain="your-site.com"
-  src="https://pulse.ciphera.net/script.js"
-></script>
-{{ end }}`}</CodeBlock>
-
-      <h3>Method 2: Include the partial in your base layout</h3>
-      <p>
-        Add the partial to your <code>baseof.html</code> layout.
-      </p>
-      <CodeBlock filename="layouts/_default/baseof.html">{`<!DOCTYPE html>
-<html lang="{{ .Site.Language }}">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    {{ partial "analytics.html" . }}
-    <title>{{ .Title }}</title>
-</head>
-<body>
-    {{ block "main" . }}{{ end }}
-</body>
-</html>`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://gohugo.io/templates/partials/" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Hugo partials docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/jekyll" className="text-brand-orange hover:underline">Jekyll</a>,{' '}
-        <a href="/integrations/eleventy" className="text-brand-orange hover:underline">Eleventy</a>,{' '}
-        <a href="/integrations/astro" className="text-brand-orange hover:underline">Astro</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 21. Eleventy
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'eleventy': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script to your base Nunjucks or Liquid layout.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add to your base layout</h3>
-      <p>
-        Place the Pulse script inside the <code>&lt;head&gt;</code> of your
-        shared base template.
-      </p>
-      <CodeBlock filename="src/_includes/base.njk">{`<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-
-    <title>{{ title }}</title>
-</head>
-<body>
-    {{ content | safe }}
-</body>
-</html>`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://www.11ty.dev/docs/layouts/" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Eleventy layouts docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/hugo" className="text-brand-orange hover:underline">Hugo</a>,{' '}
-        <a href="/integrations/jekyll" className="text-brand-orange hover:underline">Jekyll</a>,{' '}
-        <a href="/integrations/astro" className="text-brand-orange hover:underline">Astro</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 22. Jekyll
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'jekyll': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script to your default layout or an <code>_includes</code>{' '}
-        partial.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Method 1: Create an analytics include</h3>
-      <p>
-        Create a reusable include with a production environment guard.
-      </p>
-      <CodeBlock filename="_includes/analytics.html">{`{% if jekyll.environment == "production" %}
-<script
-  defer
-  data-domain="your-site.com"
-  src="https://pulse.ciphera.net/script.js"
-></script>
-{% endif %}`}</CodeBlock>
-
-      <h3>Method 2: Include in your default layout</h3>
-      <p>
-        Reference the include in your default layout&apos;s{' '}
-        <code>&lt;head&gt;</code>.
-      </p>
-      <CodeBlock filename="_layouts/default.html">{`<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    {% include analytics.html %}
-    <title>{{ page.title }}</title>
-</head>
-<body>
-    {{ content }}
-</body>
-</html>`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://jekyllrb.com/docs/includes/" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Jekyll includes docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/hugo" className="text-brand-orange hover:underline">Hugo</a>,{' '}
-        <a href="/integrations/eleventy" className="text-brand-orange hover:underline">Eleventy</a>,{' '}
-        <a href="/integrations/github-pages" className="text-brand-orange hover:underline">GitHub Pages</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 23. Docusaurus
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'docusaurus': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script via the <code>scripts</code> array in your
-        Docusaurus config.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Configure in docusaurus.config.js</h3>
-      <p>
-        Docusaurus supports a <code>scripts</code> config option that injects
-        script tags into every page.
-      </p>
-      <CodeBlock filename="docusaurus.config.js">{`module.exports = {
-  scripts: [
-    {
-      src: 'https://pulse.ciphera.net/script.js',
-      defer: true,
-      'data-domain': 'your-site.com',
-    },
-  ],
-  // ... rest of config
-}`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://docusaurus.io/docs/api/docusaurus-config#scripts" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Docusaurus scripts config docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/vitepress" className="text-brand-orange hover:underline">VitePress</a>,{' '}
-        <a href="/integrations/mkdocs" className="text-brand-orange hover:underline">MkDocs</a>,{' '}
-        <a href="/integrations/gatsby" className="text-brand-orange hover:underline">Gatsby</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 24. VitePress
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'vitepress': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script via VitePress&apos;s <code>head</code> config
-        option.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Configure in .vitepress/config.ts</h3>
-      <p>
-        VitePress lets you inject tags into the <code>&lt;head&gt;</code> of
-        every page via the <code>head</code> array.
-      </p>
-      <CodeBlock filename=".vitepress/config.ts">{`import { defineConfig } from 'vitepress'
-
-export default defineConfig({
-  head: [
-    [
-      'script',
-      {
-        defer: '',
-        'data-domain': 'your-site.com',
-        src: 'https://pulse.ciphera.net/script.js',
-      },
-    ],
-  ],
-})`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://vitepress.dev/reference/site-config#head" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          VitePress head config docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/docusaurus" className="text-brand-orange hover:underline">Docusaurus</a>,{' '}
-        <a href="/integrations/vue" className="text-brand-orange hover:underline">Vue.js</a>,{' '}
-        <a href="/integrations/nuxt" className="text-brand-orange hover:underline">Nuxt</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 25. Hexo
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'hexo': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script to your Hexo theme&apos;s layout file.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Edit your theme&apos;s layout</h3>
-      <p>
-        Open the layout file for your active theme and add the Pulse script
-        inside the <code>&lt;head&gt;</code>.
-      </p>
-      <CodeBlock filename="themes/your-theme/layout/layout.ejs">{`<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-
-    <title><%= config.title %></title>
-    <%- css('css/style') %>
-</head>
-<body>
-    <%- body %>
-    <%- js('js/script') %>
-</body>
-</html>`}</CodeBlock>
-
-      <p>
-        Alternatively, you can use Hexo&apos;s <code>after_render</code> filter
-        to inject the script programmatically.
-      </p>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://hexo.io/docs/templates" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Hexo templates docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/hugo" className="text-brand-orange hover:underline">Hugo</a>,{' '}
-        <a href="/integrations/jekyll" className="text-brand-orange hover:underline">Jekyll</a>,{' '}
-        <a href="/integrations/eleventy" className="text-brand-orange hover:underline">Eleventy</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 26. MkDocs
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'mkdocs': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script to your MkDocs site using a custom template
-        override.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Step 1: Create a custom template override</h3>
-      <p>
-        To include the <code>data-domain</code> attribute, create a template
-        override file.
-      </p>
-      <CodeBlock filename="overrides/main.html">{`{% extends "base.html" %}
-
-{% block extrahead %}
-<script
-  defer
-  data-domain="your-site.com"
-  src="https://pulse.ciphera.net/script.js"
-></script>
-{% endblock %}`}</CodeBlock>
-
-      <h3>Step 2: Configure mkdocs.yml</h3>
-      <p>
-        Set the <code>custom_dir</code> to your overrides folder in your
-        MkDocs configuration.
-      </p>
-      <CodeBlock filename="mkdocs.yml">{`theme:
-  name: material
-  custom_dir: overrides`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://www.mkdocs.org/user-guide/customizing-your-theme/" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          MkDocs customization docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/docusaurus" className="text-brand-orange hover:underline">Docusaurus</a>,{' '}
-        <a href="/integrations/vitepress" className="text-brand-orange hover:underline">VitePress</a>,{' '}
-        <a href="/integrations/django" className="text-brand-orange hover:underline">Django</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 27. WordPress
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'wordpress': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script via a plugin or by editing your theme&apos;s header
-        file directly.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Method 1: Using a plugin (Recommended)</h3>
-      <p>
-        The easiest way is to use the{' '}
-        <a href="https://wordpress.org/plugins/insert-headers-and-footers/" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          WPCode (Insert Headers and Footers)
-        </a>{' '}
-        plugin. Install it, then go to <strong>Code Snippets &rarr; Header &amp; Footer</strong>{' '}
-        and paste the Pulse script into the Header section.
-      </p>
-      <CodeBlock filename="Header Script">{`<script
-  defer
-  data-domain="your-site.com"
-  src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
-
-      <h3>Method 2: Edit header.php directly</h3>
-      <p>
-        Go to <strong>Appearance &rarr; Theme File Editor</strong> and edit{' '}
-        <code>header.php</code>. Add the Pulse script before the closing{' '}
-        <code>&lt;/head&gt;</code> tag.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/ghost" className="text-brand-orange hover:underline">Ghost</a>,{' '}
-        <a href="/integrations/drupal" className="text-brand-orange hover:underline">Drupal</a>,{' '}
-        <a href="/integrations/woocommerce" className="text-brand-orange hover:underline">WooCommerce</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 28. Ghost
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'ghost': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Use Ghost&apos;s built-in Code Injection feature to add the Pulse
-        script — no theme editing required.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add via Code Injection</h3>
-      <p>
-        Go to <strong>Settings &rarr; Code injection &rarr; Site Header</strong>{' '}
-        and paste the Pulse script.
-      </p>
-      <CodeBlock filename="Settings → Code injection → Site Header">{`<script
-  defer
-  data-domain="your-site.com"
-  src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
-
-      <p>
-        Alternatively, you can add the script directly to your theme&apos;s{' '}
-        <code>default.hbs</code> template file.
-      </p>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://ghost.org/docs/themes/" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Ghost themes docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/wordpress" className="text-brand-orange hover:underline">WordPress</a>,{' '}
-        <a href="/integrations/blogger" className="text-brand-orange hover:underline">Blogger</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 29. Drupal
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'drupal': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script via a contributed module or by editing your
-        theme&apos;s Twig template.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Method 1: Using Asset Injector module</h3>
-      <p>
-        Install the{' '}
-        <a href="https://www.drupal.org/project/asset_injector" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Asset Injector
-        </a>{' '}
-        module and create a new JS injector with the Pulse script. Set it to
-        load on all pages in the header region.
-      </p>
-
-      <h3>Method 2: Edit html.html.twig</h3>
-      <p>
-        Add the script directly to your theme&apos;s{' '}
-        <code>html.html.twig</code> template in the head area.
-      </p>
-      <CodeBlock filename="templates/html.html.twig">{`<!DOCTYPE html>
-<html{{ html_attributes }}>
-<head>
-    <head-placeholder token="{{ placeholder_token }}">
-    <title>{{ head_title|safe_join(' | ') }}</title>
-    <css-placeholder token="{{ placeholder_token }}">
-    <js-placeholder token="{{ placeholder_token }}">
-
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-</head>
-<body{{ attributes }}>
-    {{ page_top }}
-    {{ page }}
-    {{ page_bottom }}
-    <js-bottom-placeholder token="{{ placeholder_token }}">
-</body>
-</html>`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://www.drupal.org/docs/theming-drupal" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Drupal theming docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/wordpress" className="text-brand-orange hover:underline">WordPress</a>,{' '}
-        <a href="/integrations/joomla" className="text-brand-orange hover:underline">Joomla</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 30. Joomla
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'joomla': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script via your Joomla template or a custom HTML module.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Method 1: Edit template index.php</h3>
-      <p>
-        Go to <strong>Extensions &rarr; Templates &rarr; Your Template</strong>{' '}
-        and edit <code>index.php</code>. Add the Pulse script before the
-        closing <code>&lt;/head&gt;</code> tag.
-      </p>
-      <CodeBlock filename="templates/your-template/index.php">{`<?php defined('_JEXEC') or die; ?>
-<!DOCTYPE html>
-<html lang="<?php echo $this->language; ?>">
-<head>
-    <jdoc:include type="head" />
-
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-</head>
-<body>
-    <jdoc:include type="component" />
-</body>
-</html>`}</CodeBlock>
-
-      <h3>Method 2: Custom HTML module</h3>
-      <p>
-        Create a &ldquo;Custom HTML&rdquo; module and assign it to the head
-        position of your template. Paste the Pulse script as the content.
-      </p>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://docs.joomla.org/J4.x:Template_Layouts" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Joomla template docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/wordpress" className="text-brand-orange hover:underline">WordPress</a>,{' '}
-        <a href="/integrations/drupal" className="text-brand-orange hover:underline">Drupal</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 31. Strapi
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'strapi': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Strapi is a headless CMS — add Pulse to the <strong>frontend</strong>{' '}
-        that consumes your Strapi API, not to Strapi itself.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Where to add the script</h3>
-      <p>
-        Since Strapi is an API-only backend, the analytics script belongs in
-        your frontend application. Follow the guide for whichever framework
-        you&apos;re using to render your Strapi content:
-      </p>
-      <ul>
-        <li><a href="/integrations/nextjs" className="text-brand-orange hover:underline">Next.js</a></li>
-        <li><a href="/integrations/gatsby" className="text-brand-orange hover:underline">Gatsby</a></li>
-        <li><a href="/integrations/nuxt" className="text-brand-orange hover:underline">Nuxt</a></li>
-        <li><a href="/integrations/react" className="text-brand-orange hover:underline">React</a></li>
-        <li><a href="/integrations/vue" className="text-brand-orange hover:underline">Vue.js</a></li>
-      </ul>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/contentful" className="text-brand-orange hover:underline">Contentful</a>,{' '}
-        <a href="/integrations/sanity" className="text-brand-orange hover:underline">Sanity</a>,{' '}
-        <a href="/integrations/nextjs" className="text-brand-orange hover:underline">Next.js</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 32. Sanity
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'sanity': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Sanity is a headless CMS — add Pulse to the <strong>frontend</strong>{' '}
-        that renders your Sanity content, not to Sanity Studio.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Where to add the script</h3>
-      <p>
-        Since Sanity is a headless content platform, the analytics script
-        belongs in your frontend application. Follow the guide for whichever
-        framework you&apos;re using:
-      </p>
-      <ul>
-        <li><a href="/integrations/nextjs" className="text-brand-orange hover:underline">Next.js</a></li>
-        <li><a href="/integrations/gatsby" className="text-brand-orange hover:underline">Gatsby</a></li>
-        <li><a href="/integrations/nuxt" className="text-brand-orange hover:underline">Nuxt</a></li>
-        <li><a href="/integrations/remix" className="text-brand-orange hover:underline">Remix</a></li>
-        <li><a href="/integrations/react" className="text-brand-orange hover:underline">React</a></li>
-      </ul>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/strapi" className="text-brand-orange hover:underline">Strapi</a>,{' '}
-        <a href="/integrations/contentful" className="text-brand-orange hover:underline">Contentful</a>,{' '}
-        <a href="/integrations/nextjs" className="text-brand-orange hover:underline">Next.js</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 33. Contentful
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'contentful': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Contentful is a headless CMS — add Pulse to the{' '}
-        <strong>frontend</strong> that displays your Contentful content.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Where to add the script</h3>
-      <p>
-        Since Contentful is an API-first content platform, the analytics script
-        belongs in your frontend application. Follow the guide for your
-        framework:
-      </p>
-      <ul>
-        <li><a href="/integrations/nextjs" className="text-brand-orange hover:underline">Next.js</a></li>
-        <li><a href="/integrations/gatsby" className="text-brand-orange hover:underline">Gatsby</a></li>
-        <li><a href="/integrations/nuxt" className="text-brand-orange hover:underline">Nuxt</a></li>
-        <li><a href="/integrations/react" className="text-brand-orange hover:underline">React</a></li>
-        <li><a href="/integrations/astro" className="text-brand-orange hover:underline">Astro</a></li>
-      </ul>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/strapi" className="text-brand-orange hover:underline">Strapi</a>,{' '}
-        <a href="/integrations/sanity" className="text-brand-orange hover:underline">Sanity</a>,{' '}
-        <a href="/integrations/nextjs" className="text-brand-orange hover:underline">Next.js</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 34. Payload CMS
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'payload': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Payload CMS is a headless CMS — add Pulse to the{' '}
-        <strong>frontend</strong> application that renders your content.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Where to add the script</h3>
-      <p>
-        Since Payload is a headless CMS, the analytics script belongs in your
-        frontend. Payload is most commonly used with Next.js, so the{' '}
-        <a href="/integrations/nextjs" className="text-brand-orange hover:underline">Next.js guide</a>{' '}
-        is the best starting point.
-      </p>
-      <ul>
-        <li><a href="/integrations/nextjs" className="text-brand-orange hover:underline">Next.js</a> (most common with Payload)</li>
-        <li><a href="/integrations/react" className="text-brand-orange hover:underline">React</a></li>
-        <li><a href="/integrations/nuxt" className="text-brand-orange hover:underline">Nuxt</a></li>
-        <li><a href="/integrations/astro" className="text-brand-orange hover:underline">Astro</a></li>
-      </ul>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/strapi" className="text-brand-orange hover:underline">Strapi</a>,{' '}
-        <a href="/integrations/contentful" className="text-brand-orange hover:underline">Contentful</a>,{' '}
-        <a href="/integrations/nextjs" className="text-brand-orange hover:underline">Next.js</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 35. Shopify
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'shopify': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script via the Shopify theme editor — no app needed.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Method 1: Edit theme code</h3>
-      <p>
-        Go to <strong>Online Store &rarr; Themes &rarr; Edit code</strong> and
-        open <code>layout/theme.liquid</code>. Add the Pulse script before the
-        closing <code>&lt;/head&gt;</code> tag.
-      </p>
-      <CodeBlock filename="layout/theme.liquid">{`<!-- Add before </head> -->
-<script
-  defer
-  data-domain="your-site.com"
-  src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
-
-      <h3>Method 2: Shopify Plus — Customer Events</h3>
-      <p>
-        If you&apos;re on Shopify Plus, you can add the Pulse script via{' '}
-        <strong>Settings &rarr; Customer Events &rarr; Custom Pixels</strong>.
-      </p>
-
-      <p>
-        Use your custom domain or <code>.myshopify.com</code> domain as the{' '}
-        <code>data-domain</code> value.
-      </p>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://shopify.dev/docs/storefronts/themes/architecture/layouts" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Shopify theme docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/woocommerce" className="text-brand-orange hover:underline">WooCommerce</a>,{' '}
-        <a href="/integrations/bigcommerce" className="text-brand-orange hover:underline">BigCommerce</a>,{' '}
-        <a href="/integrations/prestashop" className="text-brand-orange hover:underline">PrestaShop</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 36. WooCommerce
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'woocommerce': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        WooCommerce runs on WordPress. Use WordPress methods to add the Pulse
-        script.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Method 1: Using a plugin (Recommended)</h3>
-      <p>
-        Install the{' '}
-        <a href="https://wordpress.org/plugins/insert-headers-and-footers/" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          WPCode plugin
-        </a>{' '}
-        and paste the Pulse script into the Header section.
-      </p>
-      <CodeBlock filename="Header Script">{`<script
-  defer
-  data-domain="your-site.com"
-  src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
-
-      <h3>Method 2: Edit header.php</h3>
-      <p>
-        Go to <strong>Appearance &rarr; Theme File Editor</strong> and add the
-        Pulse script to your theme&apos;s <code>header.php</code> before{' '}
-        <code>&lt;/head&gt;</code>.
-      </p>
-
-      <p>
-        Use the same domain you track your main WordPress site with.
-      </p>
-
-      <p>
-        For the full WordPress setup, see the{' '}
-        <a href="/integrations/wordpress" className="text-brand-orange hover:underline">WordPress guide</a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/shopify" className="text-brand-orange hover:underline">Shopify</a>,{' '}
-        <a href="/integrations/wordpress" className="text-brand-orange hover:underline">WordPress</a>,{' '}
-        <a href="/integrations/bigcommerce" className="text-brand-orange hover:underline">BigCommerce</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 37. BigCommerce
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'bigcommerce': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script via BigCommerce&apos;s Script Manager.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add via Script Manager</h3>
-      <p>
-        Go to <strong>Storefront &rarr; Script Manager &rarr; Create a Script</strong>{' '}
-        and configure it as follows:
-      </p>
-      <ul>
-        <li><strong>Placement:</strong> Head</li>
-        <li><strong>Location:</strong> All Pages</li>
-        <li><strong>Script type:</strong> Script tag</li>
-      </ul>
-      <CodeBlock filename="Script Manager → Head">{`<script
-  defer
-  data-domain="your-site.com"
-  src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://developer.bigcommerce.com/docs/integrations/scripts" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          BigCommerce Script Manager docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/shopify" className="text-brand-orange hover:underline">Shopify</a>,{' '}
-        <a href="/integrations/woocommerce" className="text-brand-orange hover:underline">WooCommerce</a>,{' '}
-        <a href="/integrations/prestashop" className="text-brand-orange hover:underline">PrestaShop</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 38. PrestaShop
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'prestashop': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script to your PrestaShop theme template.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Edit your theme&apos;s head template</h3>
-      <p>
-        Open the head partial for your active theme and add the Pulse script.
-      </p>
-      <CodeBlock filename="themes/your-theme/templates/_partials/head.tpl">{`{block name='head_seo'}
-  <title>{$page.meta.title}</title>
-  <meta name="description" content="{$page.meta.description}">
-{/block}
-
-<script
-  defer
-  data-domain="your-site.com"
-  src="https://pulse.ciphera.net/script.js"
-></script>
-
-{block name='head_stylesheets'}
-  {include file='_partials/stylesheets.tpl'}
-{/block}`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://devdocs.prestashop-project.org/8/themes/" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          PrestaShop theme docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/shopify" className="text-brand-orange hover:underline">Shopify</a>,{' '}
-        <a href="/integrations/woocommerce" className="text-brand-orange hover:underline">WooCommerce</a>,{' '}
-        <a href="/integrations/bigcommerce" className="text-brand-orange hover:underline">BigCommerce</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 39. Webflow
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'webflow': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Paste the Pulse script into your Webflow project&apos;s custom code
-        settings.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add via Project Settings</h3>
-      <p>
-        Go to <strong>Project Settings &rarr; Custom Code &rarr; Head Code</strong>{' '}
-        and paste the Pulse script.
-      </p>
-      <CodeBlock filename="Project Settings → Head Code">{`<script
-  defer
-  data-domain="your-site.com"
-  src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
-
-      <p>
-        <strong>Note:</strong> Custom code requires a paid Webflow site plan. The
-        script won&apos;t appear in the Designer preview — publish your site to
-        see it in action.
-      </p>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://university.webflow.com/lesson/custom-code-in-the-head-and-body-tag" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Webflow custom code docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/squarespace" className="text-brand-orange hover:underline">Squarespace</a>,{' '}
-        <a href="/integrations/wix" className="text-brand-orange hover:underline">Wix</a>,{' '}
-        <a href="/integrations/framer" className="text-brand-orange hover:underline">Framer</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 40. Squarespace
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'squarespace': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Use Squarespace&apos;s Code Injection feature to add the Pulse script.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add via Code Injection</h3>
-      <p>
-        Go to <strong>Settings &rarr; Developer Tools &rarr; Code Injection &rarr; Header</strong>{' '}
-        and paste the Pulse script.
-      </p>
-      <CodeBlock filename="Settings → Code Injection → Header">{`<script
-  defer
-  data-domain="your-site.com"
-  src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
-
-      <p>
-        <strong>Note:</strong> Code Injection requires a Business or Commerce
-        plan.
-      </p>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://support.squarespace.com/hc/en-us/articles/205815928" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Squarespace code injection docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/webflow" className="text-brand-orange hover:underline">Webflow</a>,{' '}
-        <a href="/integrations/wix" className="text-brand-orange hover:underline">Wix</a>,{' '}
-        <a href="/integrations/carrd" className="text-brand-orange hover:underline">Carrd</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 41. Wix
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'wix': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Use Wix&apos;s Custom Code settings to add the Pulse script.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add via Custom Code</h3>
-      <p>
-        Go to <strong>Settings &rarr; Custom Code &rarr; Add Custom Code</strong>.
-        Set the placement to <strong>Head</strong> and apply it to{' '}
-        <strong>All pages</strong>.
-      </p>
-      <CodeBlock filename="Custom Code Snippet">{`<script
-  defer
-  data-domain="your-site.com"
-  src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
-
-      <p>
-        <strong>Note:</strong> Custom Code requires a Wix Premium plan.
-      </p>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://support.wix.com/en/article/embedding-custom-code-on-your-site" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Wix custom code docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/webflow" className="text-brand-orange hover:underline">Webflow</a>,{' '}
-        <a href="/integrations/squarespace" className="text-brand-orange hover:underline">Squarespace</a>,{' '}
-        <a href="/integrations/framer" className="text-brand-orange hover:underline">Framer</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 42. Framer
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'framer': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script to your Framer project&apos;s custom code settings.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add via Project Settings</h3>
-      <p>
-        Go to <strong>Project Settings &rarr; General &rarr; Custom Code &rarr; Head</strong>{' '}
-        and paste the Pulse script.
-      </p>
-      <CodeBlock filename="Project Settings → Head">{`<script
-  defer
-  data-domain="your-site.com"
-  src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://www.framer.com/help/articles/custom-code/" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Framer custom code docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/webflow" className="text-brand-orange hover:underline">Webflow</a>,{' '}
-        <a href="/integrations/squarespace" className="text-brand-orange hover:underline">Squarespace</a>,{' '}
-        <a href="/integrations/wix" className="text-brand-orange hover:underline">Wix</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 43. Carrd
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'carrd': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script to your Carrd site&apos;s head code section.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add via Settings</h3>
-      <p>
-        Open your site&apos;s <strong>Settings</strong> panel and navigate to the{' '}
-        <strong>Head</strong> section. Paste the Pulse script there.
-      </p>
-      <CodeBlock filename="Settings → Head">{`<script
-  defer
-  data-domain="your-site.com"
-  src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
-
-      <p>
-        <strong>Note:</strong> Custom code requires a Carrd Pro plan.
-      </p>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://carrd.co/docs/settings/head" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Carrd head settings docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/framer" className="text-brand-orange hover:underline">Framer</a>,{' '}
-        <a href="/integrations/webflow" className="text-brand-orange hover:underline">Webflow</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 44. Blogger
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'blogger': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script via Blogger&apos;s Theme HTML editor.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Edit your theme HTML</h3>
-      <p>
-        Go to <strong>Theme &rarr; Edit HTML</strong> and paste the Pulse script
-        before the closing <code>&lt;/head&gt;</code> tag.
-      </p>
-      <CodeBlock filename="Theme → Edit HTML">{`<!-- Add before </head> -->
-<script
-  defer
-  data-domain="your-site.com"
-  src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://support.google.com/blogger/answer/46995" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Blogger HTML editing docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/wordpress" className="text-brand-orange hover:underline">WordPress</a>,{' '}
-        <a href="/integrations/ghost" className="text-brand-orange hover:underline">Ghost</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 45. Google Tag Manager
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'gtm': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add Pulse via Google Tag Manager — works with any site that already has
-        GTM installed.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Create a Custom HTML tag</h3>
-      <p>Follow these steps to add Pulse through GTM:</p>
-      <ol>
-        <li>Go to <strong>Tags &rarr; New &rarr; Custom HTML</strong></li>
-        <li>Paste the snippet below</li>
-        <li>Set the trigger to <strong>All Pages</strong></li>
-        <li>Publish your container</li>
-      </ol>
-      <CodeBlock filename="GTM → Custom HTML Tag">{`<script defer src="https://pulse.ciphera.net/script.js"></script>`}</CodeBlock>
-
-      <p>
-        That&apos;s it. Pulse auto-detects the domain from the page, so no extra
-        configuration is needed.
-      </p>
-
-      <details>
-        <summary className="cursor-pointer text-sm text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300">
-          Advanced: override domain or configure options
-        </summary>
-        <p className="mt-3 text-sm text-neutral-600 dark:text-neutral-400">
-          If your site is registered under a different domain than the page
-          hostname, or you need custom options (API endpoint, storage mode, etc.),
-          use <code>pulseConfig</code>:
-        </p>
-        <CodeBlock filename="GTM → Custom HTML Tag (with config)">{`<script>
-  window.pulseConfig = { domain: "your-site.com" };
-</script>
-<script defer src="https://pulse.ciphera.net/script.js"></script>`}</CodeBlock>
-      </details>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://support.google.com/tagmanager/answer/6103696" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          GTM Custom HTML tag docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/wordpress" className="text-brand-orange hover:underline">WordPress</a>,{' '}
-        <a href="/integrations/shopify" className="text-brand-orange hover:underline">Shopify</a>,{' '}
-        <a href="/integrations/webflow" className="text-brand-orange hover:underline">Webflow</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 46. Notion
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'notion': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Notion itself doesn&apos;t support custom scripts, but tools like{' '}
-        <a href="https://super.so" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">Super.so</a>,{' '}
-        <a href="https://potion.so" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">Potion</a>, and{' '}
-        <a href="https://feather.so" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">Feather</a>{' '}
-        let you turn Notion pages into websites with custom code support.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Super.so</h3>
-      <p>
-        Go to <strong>Site Settings &rarr; Code &rarr; Head</strong> and paste
-        the Pulse script.
-      </p>
-      <CodeBlock filename="Super.so → Site Settings → Head">{`<script
-  defer
-  data-domain="your-site.com"
-  src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
-
-      <h3>Potion</h3>
-      <p>
-        Go to <strong>Project Settings &rarr; Custom Code &rarr; Head</strong>{' '}
-        and paste the Pulse script.
-      </p>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://super.so/docs" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Super.so docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/webflow" className="text-brand-orange hover:underline">Webflow</a>,{' '}
-        <a href="/integrations/framer" className="text-brand-orange hover:underline">Framer</a>,{' '}
-        <a href="/integrations/carrd" className="text-brand-orange hover:underline">Carrd</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 47. Cloudflare Pages
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'cloudflare-pages': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add Pulse to your project&apos;s HTML or follow your framework&apos;s
-        guide.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Method 1: Framework-based setup (Recommended)</h3>
-      <p>
-        If you&apos;re deploying a framework (Next.js, Astro, Nuxt, etc.) to
-        Cloudflare Pages, follow that framework&apos;s integration guide:
-      </p>
-      <ul>
-        <li><a href="/integrations/nextjs" className="text-brand-orange hover:underline">Next.js</a></li>
-        <li><a href="/integrations/astro" className="text-brand-orange hover:underline">Astro</a></li>
-        <li><a href="/integrations/nuxt" className="text-brand-orange hover:underline">Nuxt</a></li>
-        <li><a href="/integrations/remix" className="text-brand-orange hover:underline">Remix</a></li>
-      </ul>
-
-      <h3>Method 2: Static HTML</h3>
-      <p>
-        For static HTML sites, add the Pulse script directly to your{' '}
-        <code>index.html</code>.
-      </p>
-      <CodeBlock filename="index.html">{`<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-
-    <title>My Site</title>
-</head>
-<body>
-    <h1>Hello World</h1>
-</body>
-</html>`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://developers.cloudflare.com/pages/configuration/headers/" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Cloudflare Pages docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/netlify" className="text-brand-orange hover:underline">Netlify</a>,{' '}
-        <a href="/integrations/vercel" className="text-brand-orange hover:underline">Vercel</a>,{' '}
-        <a href="/integrations/github-pages" className="text-brand-orange hover:underline">GitHub Pages</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 48. Netlify
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'netlify': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add Pulse via your framework&apos;s setup or Netlify&apos;s snippet
-        injection feature.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Method 1: Framework guide (Recommended)</h3>
-      <p>
-        The best approach is to follow your framework&apos;s integration guide.
-        Netlify deploys framework projects, so the script setup happens in your
-        source code:
-      </p>
-      <ul>
-        <li><a href="/integrations/nextjs" className="text-brand-orange hover:underline">Next.js</a></li>
-        <li><a href="/integrations/astro" className="text-brand-orange hover:underline">Astro</a></li>
-        <li><a href="/integrations/gatsby" className="text-brand-orange hover:underline">Gatsby</a></li>
-        <li><a href="/integrations/hugo" className="text-brand-orange hover:underline">Hugo</a></li>
-        <li><a href="/integrations/eleventy" className="text-brand-orange hover:underline">Eleventy</a></li>
-      </ul>
-
-      <h3>Method 2: Snippet injection (via Netlify UI)</h3>
-      <p>
-        Go to <strong>Site settings &rarr; Build &amp; deploy &rarr; Post processing &rarr; Snippet injection</strong>{' '}
-        and add the Pulse script to the <strong>&lt;head&gt;</strong> of your
-        pages.
-      </p>
-      <CodeBlock filename="Netlify Snippet Injection → Head">{`<script
-  defer
-  data-domain="your-site.com"
-  src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://docs.netlify.com/site-deploys/post-processing/snippet-injection/" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Netlify snippet injection docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/cloudflare-pages" className="text-brand-orange hover:underline">Cloudflare Pages</a>,{' '}
-        <a href="/integrations/vercel" className="text-brand-orange hover:underline">Vercel</a>,{' '}
-        <a href="/integrations/github-pages" className="text-brand-orange hover:underline">GitHub Pages</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 49. Vercel
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'vercel': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add Pulse via your framework&apos;s setup. Vercel deploys framework
-        projects, so the script is added in your source code.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Follow your framework&apos;s guide</h3>
-      <p>
-        Vercel is a deployment platform — it doesn&apos;t have a built-in
-        mechanism for injecting scripts. Add the Pulse script following
-        your framework&apos;s integration guide:
-      </p>
-      <ul>
-        <li><a href="/integrations/nextjs" className="text-brand-orange hover:underline">Next.js</a> (most common on Vercel)</li>
-        <li><a href="/integrations/remix" className="text-brand-orange hover:underline">Remix</a></li>
-        <li><a href="/integrations/astro" className="text-brand-orange hover:underline">Astro</a></li>
-        <li><a href="/integrations/nuxt" className="text-brand-orange hover:underline">Nuxt</a></li>
-        <li><a href="/integrations/svelte" className="text-brand-orange hover:underline">SvelteKit</a></li>
-      </ul>
-
-      <p>
-        <strong>Note:</strong> Vercel&apos;s Edge Middleware cannot inject
-        scripts by design. Use the framework-level approach instead.
-      </p>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://vercel.com/docs/frameworks" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Vercel frameworks docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/netlify" className="text-brand-orange hover:underline">Netlify</a>,{' '}
-        <a href="/integrations/cloudflare-pages" className="text-brand-orange hover:underline">Cloudflare Pages</a>,{' '}
-        <a href="/integrations/nextjs" className="text-brand-orange hover:underline">Next.js</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 50. GitHub Pages
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'github-pages': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add the Pulse script to your static site&apos;s HTML template on GitHub
-        Pages.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Method 1: Jekyll (default for GitHub Pages)</h3>
-      <p>
-        Create an analytics include with a production guard and reference it in
-        your default layout.
-      </p>
-      <CodeBlock filename="_includes/analytics.html">{`{% if jekyll.environment == "production" %}
-<script
-  defer
-  data-domain="your-site.com"
-  src="https://pulse.ciphera.net/script.js"
-></script>
-{% endif %}`}</CodeBlock>
-
-      <p>
-        Then include it in your layout&apos;s <code>&lt;head&gt;</code>:
-      </p>
-      <CodeBlock filename="_layouts/default.html">{`<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    {% include analytics.html %}
-    <title>{{ page.title }}</title>
-</head>
-<body>
-    {{ content }}
-</body>
-</html>`}</CodeBlock>
-
-      <h3>Method 2: Plain HTML</h3>
-      <p>
-        For simple static sites, add the Pulse script directly to your{' '}
-        <code>index.html</code>.
-      </p>
-      <CodeBlock filename="index.html">{`<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-
-    <title>My Site</title>
-</head>
-<body>
-    <h1>Hello World</h1>
-</body>
-</html>`}</CodeBlock>
-
-      <h3>Method 3: Hugo on GitHub Pages</h3>
-      <p>
-        If you&apos;re using Hugo with GitHub Pages, follow the{' '}
-        <a href="/integrations/hugo" className="text-brand-orange hover:underline">Hugo guide</a>.
-      </p>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          GitHub Pages docs
-        </a>.
-      </p>
-
-      <p>
-        <strong>Related Integrations:</strong>{' '}
-        <a href="/integrations/jekyll" className="text-brand-orange hover:underline">Jekyll</a>,{' '}
-        <a href="/integrations/hugo" className="text-brand-orange hover:underline">Hugo</a>,{' '}
-        <a href="/integrations/netlify" className="text-brand-orange hover:underline">Netlify</a>
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 51. Craft CMS
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'craftcms': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add Pulse to your Craft CMS site by editing your Twig layout template.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add the Pulse Script to Your Layout</h3>
-      <p>
-        Edit your main Twig layout template at{' '}
-        <code>templates/_layout.twig</code> and add the Pulse script inside the{' '}
-        <code>&lt;head&gt;</code> section.
-      </p>
-      <CodeBlock filename="templates/_layout.twig">{`<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-
-    <title>{{ siteName }}</title>
-</head>
-<body>
-    {% block content %}{% endblock %}
-</body>
-</html>`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://craftcms.com/docs/5.x/system/elements.html" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Craft CMS docs
-        </a>.
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 52. Statamic
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'statamic': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Statamic is a Laravel-based CMS. Add Pulse to your Antlers or Blade
-        layout.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add the Pulse Script to Your Layout</h3>
-      <p>
-        Edit your Antlers layout at{' '}
-        <code>resources/views/layout.antlers.html</code> and add the Pulse
-        script inside the <code>&lt;head&gt;</code> section.
-      </p>
-      <CodeBlock filename="resources/views/layout.antlers.html">{`<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-
-    <title>{{ title }}</title>
-</head>
-<body>
-    {{ template_content }}
-</body>
-</html>`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://statamic.dev/views" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Statamic views docs
-        </a>.
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 53. TYPO3
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'typo3': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add Pulse to your TYPO3 site via TypoScript setup.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add the Pulse Script via TypoScript</h3>
-      <p>
-        Add the following to your <code>setup.typoscript</code> file to inject
-        the Pulse script into the page header.
-      </p>
-      <CodeBlock filename="setup.typoscript">{`page.headerData.999 = TEXT
-page.headerData.999.value = <script defer data-domain="your-site.com" src="https://pulse.ciphera.net/script.js"></script>`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          TypoScript reference
-        </a>.
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 54. Kirby
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'kirby': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add Pulse to your Kirby site via a PHP snippet.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add the Pulse Script to Your Header Snippet</h3>
-      <p>
-        Edit <code>site/snippets/header.php</code> or{' '}
-        <code>site/templates/default.php</code> and add the Pulse script before
-        the closing <code>&lt;/head&gt;</code> tag.
-      </p>
-      <CodeBlock filename="site/snippets/header.php">{`<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-
-    <title><?= $page->title() ?></title>
-</head>`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://getkirby.com/docs/guide/templates/snippets" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Kirby snippets docs
-        </a>.
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 55. Grav
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'grav': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add Pulse to your Grav site via Twig templates.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add the Pulse Script to Your Base Template</h3>
-      <p>
-        Edit your theme&apos;s base template at{' '}
-        <code>templates/partials/base.html.twig</code> and add the Pulse script
-        inside the head block.
-      </p>
-      <CodeBlock filename="templates/partials/base.html.twig">{`<!DOCTYPE html>
-<html lang="en">
-<head>
-    {% block head %}
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-
-    <title>{{ page.title }}</title>
-    {% endblock %}
-</head>
-<body>
-    {% block content %}{% endblock %}
-</body>
-</html>`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://learn.getgrav.org/17/themes/twig-primer" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Grav Twig docs
-        </a>.
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 56. Umbraco
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'umbraco': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add Pulse to your Umbraco site via a Razor layout view.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add the Pulse Script to Your Layout</h3>
-      <p>
-        Edit <code>Views/Shared/_Layout.cshtml</code> and add the Pulse script
-        before the closing <code>&lt;/head&gt;</code> tag. Use an environment
-        tag guard to only load in production.
-      </p>
-      <CodeBlock filename="Views/Shared/_Layout.cshtml">{`<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <environment include="Production">
-        <script
-          defer
-          data-domain="your-site.com"
-          src="https://pulse.ciphera.net/script.js"
-        ></script>
-    </environment>
-
-    <title>@ViewData["Title"]</title>
-</head>
-<body>
-    @RenderBody()
-</body>
-</html>`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://docs.umbraco.com/umbraco-cms/fundamentals/design/templates" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Umbraco templates docs
-        </a>.
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 57. Storyblok
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'storyblok': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Storyblok is a headless CMS — add Pulse to the frontend that renders
-        your Storyblok content.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add Pulse to Your Frontend</h3>
-      <p>
-        Since Storyblok is a headless CMS, the analytics script goes in your
-        frontend framework. Follow the guide for your framework:
-      </p>
-      <ul>
-        <li><a href="/integrations/nextjs" className="text-brand-orange hover:underline">Next.js</a></li>
-        <li><a href="/integrations/nuxt" className="text-brand-orange hover:underline">Nuxt</a></li>
-        <li><a href="/integrations/gatsby" className="text-brand-orange hover:underline">Gatsby</a></li>
-        <li><a href="/integrations/astro" className="text-brand-orange hover:underline">Astro</a></li>
-        <li><a href="/integrations/svelte" className="text-brand-orange hover:underline">SvelteKit</a></li>
-      </ul>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://www.storyblok.com/docs/guide/introduction" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Storyblok docs
-        </a>.
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 58. Prismic
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'prismic': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Prismic is a headless CMS — add Pulse to the frontend that displays
-        your Prismic content.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add Pulse to Your Frontend</h3>
-      <p>
-        Since Prismic is a headless CMS, the analytics script goes in your
-        frontend framework. Follow the guide for your framework:
-      </p>
-      <ul>
-        <li><a href="/integrations/nextjs" className="text-brand-orange hover:underline">Next.js</a></li>
-        <li><a href="/integrations/nuxt" className="text-brand-orange hover:underline">Nuxt</a></li>
-        <li><a href="/integrations/gatsby" className="text-brand-orange hover:underline">Gatsby</a></li>
-        <li><a href="/integrations/astro" className="text-brand-orange hover:underline">Astro</a></li>
-        <li><a href="/integrations/svelte" className="text-brand-orange hover:underline">SvelteKit</a></li>
-      </ul>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://prismic.io/docs" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Prismic docs
-        </a>.
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 59. Shopware
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'shopware': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add Pulse to your Shopware 6 store via theme template.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add the Pulse Script to Your Theme</h3>
-      <p>
-        Edit{' '}
-        <code>Resources/views/storefront/layout/meta.html.twig</code> in your
-        theme and add the Pulse script in the <code>base_header</code> block.
-      </p>
-      <CodeBlock filename="Resources/views/storefront/layout/meta.html.twig">{`{% sw_extends '@Storefront/storefront/layout/meta.html.twig' %}
-
-{% block base_header %}
-    {{ parent() }}
-
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-{% endblock %}`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://developer.shopware.com/docs/guides/plugins/themes/" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Shopware themes docs
-        </a>.
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 60. Magento / Adobe Commerce
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'magento': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add Pulse to your Magento / Adobe Commerce store via layout XML.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Method 1: Layout XML</h3>
-      <p>
-        Add the Pulse script to your theme&apos;s layout XML at{' '}
-        <code>app/design/frontend/YOUR_THEME/default/Magento_Theme/layout/default_head_blocks.xml</code>.
-      </p>
-      <CodeBlock filename="default_head_blocks.xml">{`<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
-    <head>
-        <script src="https://pulse.ciphera.net/script.js"
-                src_type="url"
-                defer="true" />
-    </head>
-</page>`}</CodeBlock>
-
-      <h3>Method 2: Admin Panel</h3>
-      <p>
-        Go to <strong>Content &rarr; Design &rarr; Configuration &rarr; HTML
-        Head &rarr; Scripts and Style Sheets</strong> and paste the Pulse
-        script.
-      </p>
-      <CodeBlock filename="Admin → HTML Head">{`<script
-  defer
-  data-domain="your-site.com"
-  src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://developer.adobe.com/commerce/frontend-core/guide/layouts/" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Magento layout docs
-        </a>.
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 61. Bubble
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'bubble': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add Pulse to your Bubble app via the SEO / Meta tags section.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add the Pulse Script via Settings</h3>
-      <p>
-        Go to <strong>Settings &rarr; SEO / Metatags &rarr; Script/meta tags in
-        header</strong> and paste the Pulse script.
-      </p>
-      <CodeBlock filename="Bubble → SEO / Metatags → Header">{`<script
-  defer
-  data-domain="your-site.com"
-  src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://manual.bubble.io/help-guides/getting-started/application-settings" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Bubble settings docs
-        </a>.
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 62. Discourse
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'discourse': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add Pulse to your Discourse forum via admin customization.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add the Pulse Script via Theme Customization</h3>
-      <p>
-        Go to <strong>Admin &rarr; Customize &rarr; Themes &rarr; Edit
-        CSS/HTML</strong> and add the Pulse script in the{' '}
-        <code>&lt;/head&gt;</code> section.
-      </p>
-      <CodeBlock filename="Discourse → Theme → </head>">{`<script
-  defer
-  data-domain="your-site.com"
-  src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Discourse themes guide
-        </a>.
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 63. HubSpot
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'hubspot': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add Pulse to your HubSpot-hosted pages via site settings.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add the Pulse Script via Site Settings</h3>
-      <p>
-        Go to <strong>Settings &rarr; Website &rarr; Pages &rarr; Site Header
-        HTML</strong> and paste the Pulse script.
-      </p>
-      <CodeBlock filename="HubSpot → Site Header HTML">{`<script
-  defer
-  data-domain="your-site.com"
-  src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
-
-      <p>
-        Works for HubSpot CMS Free, Starter, Pro, and Enterprise.
-      </p>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://knowledge.hubspot.com/website-pages/add-code-snippets-to-the-head-and-footer-html-of-your-pages" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          HubSpot header code docs
-        </a>.
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 64. Substack
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'substack': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Substack supports custom domains. Add Pulse tracking for your custom
-        domain.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Track Your Substack via a Custom Domain</h3>
-      <p>
-        Substack doesn&apos;t allow custom scripts directly. You can track your
-        Substack via your custom domain by configuring Pulse to track the custom
-        domain.
-      </p>
-      <ol>
-        <li>Set up your custom domain in Substack.</li>
-        <li>Add your custom domain in the Pulse dashboard.</li>
-        <li>Pulse will automatically track page views on your custom domain.</li>
-      </ol>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://support.substack.com/hc/en-us/articles/360037645932-How-do-I-set-up-a-custom-domain-" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Substack custom domain docs
-        </a>.
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 65. Linktree
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'linktree': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add Pulse to your Linktree page via custom code (Business plan
-        required).
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add the Pulse Script via Custom Meta Tags</h3>
-      <p>
-        Go to <strong>Settings &rarr; SEO &rarr; Custom Meta Tags</strong> and
-        add the Pulse script to the head.
-      </p>
-      <CodeBlock filename="Linktree → SEO → Head">{`<script
-  defer
-  data-domain="your-site.com"
-  src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
-
-      <p>
-        <strong>Note:</strong> Requires Linktree Business or Enterprise plan.
-      </p>
-
-      <p>
-        For more details, see{' '}
-        <a href="https://linktr.ee/s/business/" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Linktree Business
-        </a>.
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 66. Weebly
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'weebly': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add Pulse to your Weebly site via the header code settings.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add the Pulse Script via SEO Settings</h3>
-      <p>
-        Go to <strong>Settings &rarr; SEO &rarr; Header Code</strong> and paste
-        the Pulse script.
-      </p>
-      <CodeBlock filename="Weebly → SEO → Header Code">{`<script
-  defer
-  data-domain="your-site.com"
-  src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://www.weebly.com/app/help/us/en/topics/descriptions-and-keywords" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Weebly SEO docs
-        </a>.
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 67. GitBook
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'gitbook': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add Pulse to your GitBook documentation site.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add the Pulse Script via Custom Scripts</h3>
-      <p>
-        GitBook supports custom header integrations. Go to{' '}
-        <strong>Space settings &rarr; Integrations &rarr; Custom
-        scripts</strong> and add the Pulse script.
-      </p>
-      <CodeBlock filename="GitBook → Custom Scripts">{`<script
-  defer
-  data-domain="your-site.com"
-  src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://docs.gitbook.com/published-documentation/customization/space-customization" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          GitBook customization docs
-        </a>.
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 68. Gridsome
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'gridsome': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add Pulse to your Gridsome site via the HTML template or a plugin.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Method 1: HTML Template</h3>
-      <p>
-        Edit <code>src/index.html</code> and add the Pulse script to the head
-        section.
-      </p>
-      <CodeBlock filename="src/index.html">{`<!DOCTYPE html>
-<html \${htmlAttrs}>
-<head>
-    \${head}
-
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-</head>
-<body \${bodyAttrs}>
-    \${app}
-</body>
-</html>`}</CodeBlock>
-
-      <h3>Method 2: Server Configuration</h3>
-      <p>
-        Use <code>gridsome.server.js</code> to inject the script
-        programmatically.
-      </p>
-      <CodeBlock filename="gridsome.server.js">{`module.exports = function (api) {
-  api.afterBuild(({ queue }) => {
-    // Script injection logic
-  })
-}`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://gridsome.org/docs/head/" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Gridsome head management docs
-        </a>.
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 69. Read the Docs
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'readthedocs': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add Pulse to your Read the Docs documentation.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add the Pulse Script via Sphinx Configuration</h3>
-      <p>
-        Create a custom template override. In your Sphinx{' '}
-        <code>conf.py</code>, add the Pulse script as a JavaScript file.
-      </p>
-      <CodeBlock filename="conf.py">{`html_js_files = [
-    ('https://pulse.ciphera.net/script.js', {'defer': 'defer', 'data-domain': 'your-site.com'}),
-]`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://docs.readthedocs.io/en/stable/guides/adding-custom-css.html" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Read the Docs customization
-        </a>.
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 70. Sphinx
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'sphinx': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add Pulse to your Sphinx documentation via <code>conf.py</code>.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add the Pulse Script via Configuration</h3>
-      <p>
-        In your <code>conf.py</code>, add the Pulse script using{' '}
-        <code>html_js_files</code>.
-      </p>
-      <CodeBlock filename="conf.py">{`html_js_files = [
-    ('https://pulse.ciphera.net/script.js', {'defer': 'defer', 'data-domain': 'your-site.com'}),
-]`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://www.sphinx-doc.org/en/master/usage/configuration.html#confval-html_js_files" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Sphinx html_js_files docs
-        </a>.
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 71. ReadMe
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'readme': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add Pulse to your ReadMe API documentation portal.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add the Pulse Script via Custom JavaScript</h3>
-      <p>
-        Go to <strong>Project Settings &rarr; Custom JavaScript</strong> and
-        paste the Pulse script.
-      </p>
-      <CodeBlock filename="ReadMe → Custom JavaScript">{`<script
-  defer
-  data-domain="your-site.com"
-  src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://docs.readme.com/main/docs/custom-javascript" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          ReadMe custom JavaScript docs
-        </a>.
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 72. Flutter Web
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'flutter': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add Pulse to your Flutter web application via{' '}
-        <code>web/index.html</code>.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add the Pulse Script to Your HTML Template</h3>
-      <p>
-        Edit <code>web/index.html</code> in your Flutter project and add the
-        Pulse script to the <code>&lt;head&gt;</code> section.
-      </p>
-      <CodeBlock filename="web/index.html">{`<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-
-    <title>My Flutter App</title>
-</head>
-<body>
-    <script src="main.dart.js" type="application/javascript"></script>
-</body>
-</html>`}</CodeBlock>
-
-      <p>
-        <strong>Note:</strong> This only applies to Flutter Web. For Flutter
-        mobile apps, Pulse tracks web views only.
-      </p>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://docs.flutter.dev/platform-integration/web/building" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Flutter Web docs
-        </a>.
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 73. Render
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'render': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add Pulse via your framework setup. Render deploys framework projects.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Follow Your Framework&apos;s Guide</h3>
-      <p>
-        The analytics script goes in your source code, not in Render&apos;s
-        dashboard. Follow your framework&apos;s integration guide:
-      </p>
-      <ul>
-        <li><a href="/integrations/nextjs" className="text-brand-orange hover:underline">Next.js</a></li>
-        <li><a href="/integrations/astro" className="text-brand-orange hover:underline">Astro</a></li>
-        <li><a href="/integrations/remix" className="text-brand-orange hover:underline">Remix</a></li>
-        <li><a href="/integrations/gatsby" className="text-brand-orange hover:underline">Gatsby</a></li>
-        <li><a href="/integrations/eleventy" className="text-brand-orange hover:underline">Eleventy</a></li>
-      </ul>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://docs.render.com/deploy-an-app" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Render deployment docs
-        </a>.
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 74. Firebase Hosting
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'firebase': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add Pulse to sites deployed on Firebase Hosting.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add the Pulse Script to Your Source Code</h3>
-      <p>
-        Follow your framework&apos;s integration guide. The analytics script
-        goes in your source code. Firebase Hosting serves static files, so add
-        the script to your <code>index.html</code> or framework layout.
-      </p>
-      <CodeBlock filename="public/index.html">{`<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <script
-      defer
-      data-domain="your-site.com"
-      src="https://pulse.ciphera.net/script.js"
-    ></script>
-
-    <title>My App</title>
-</head>
-<body>
-    <div id="app"></div>
-</body>
-</html>`}</CodeBlock>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://firebase.google.com/docs/hosting" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          Firebase Hosting docs
-        </a>.
-      </p>
-    </>
-  ),
-
-  /* ────────────────────────────────────────────────────────────────────────────
-   * 75. AMP
-   * ──────────────────────────────────────────────────────────────────────────── */
-  'amp': (
-    <>
-      <p className="lead text-xl text-neutral-600 dark:text-neutral-400">
-        Add Pulse to your AMP pages using the <code>amp-analytics</code>{' '}
-        component.
-      </p>
-
-      <hr className="my-8 border-neutral-200 dark:border-neutral-800" />
-
-      <h3>Add Pulse via amp-analytics</h3>
-      <p>
-        AMP pages have restrictions on JavaScript. The{' '}
-        <code>amp-analytics</code> component is the standard way to add
-        analytics. Add the following to your AMP page.
-      </p>
-      <CodeBlock filename="amp-page.html">{`<amp-analytics>
-  <script type="application/json">
-  {
-    "requests": {
-      "pageview": "https://pulse.ciphera.net/api/event"
-    },
-    "triggers": {
-      "trackPageview": {
-        "on": "visible",
-        "request": "pageview",
-        "extraUrlParams": {
-          "domain": "your-site.com",
-          "name": "pageview",
-          "url": "\${canonicalUrl}"
-        }
-      }
-    }
-  }
-  </script>
-</amp-analytics>`}</CodeBlock>
-
-      <p>
-        <strong>Note:</strong> AMP pages have restrictions on JavaScript. The{' '}
-        <code>amp-analytics</code> component is the standard way to add
-        analytics.
-      </p>
-
-      <p>
-        For more details, see the{' '}
-        <a href="https://amp.dev/documentation/components/amp-analytics/" target="_blank" rel="noopener noreferrer" className="text-brand-orange hover:underline">
-          amp-analytics docs
-        </a>.
-      </p>
-    </>
-  ),
-}
-
-// * ─── Public API ─────────────────────────────────────────────────────────────
-
-export function getGuideContent(slug: string): ReactNode | undefined {
-  return guides[slug]
-}
diff --git a/lib/integrations.tsx b/lib/integrations.tsx
index 0c6c8fc..79b1345 100644
--- a/lib/integrations.tsx
+++ b/lib/integrations.tsx
@@ -34,10 +34,10 @@ export interface Integration {
   icon: ReactNode
   /** URL to official documentation / website */
   officialUrl: string
-  /** SEO meta description for this integration's guide page */
-  seoDescription: string
   /** Related integration IDs for cross-linking */
   relatedIds: string[]
+  /** Whether this integration has a dedicated guide page */
+  dedicatedPage: boolean
 }
 
 // * ─── Category labels (for UI grouping) ──────────────────────────────────────
@@ -79,9 +79,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://nextjs.org/docs',
-    seoDescription:
-      'Step-by-step guide to adding Pulse privacy-first analytics to your Next.js app with next/script. Covers App Router and Pages Router.',
     relatedIds: ['react', 'vercel', 'nuxt'],
+    dedicatedPage: true,
   },
   {
     id: 'react',
@@ -95,9 +94,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://react.dev',
-    seoDescription:
-      'Integrate Pulse analytics with any React SPA — Create React App, Vite, or custom setups. Two easy methods.',
     relatedIds: ['nextjs', 'remix', 'gatsby', 'preact'],
+    dedicatedPage: true,
   },
   {
     id: 'vue',
@@ -111,9 +109,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://vuejs.org',
-    seoDescription:
-      'Add Pulse privacy-first analytics to your Vue.js app. Works with Vue 2, Vue 3, Vue CLI, and Vite.',
     relatedIds: ['nuxt', 'vitepress'],
+    dedicatedPage: true,
   },
   {
     id: 'angular',
@@ -128,9 +125,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://angular.dev',
-    seoDescription:
-      'Add Pulse analytics to your Angular application. Simple index.html setup for all Angular versions.',
     relatedIds: ['react', 'vue'],
+    dedicatedPage: true,
   },
   {
     id: 'svelte',
@@ -144,9 +140,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://svelte.dev',
-    seoDescription:
-      'Add Pulse analytics to Svelte or SvelteKit. Simple setup for both Vite-based Svelte and SvelteKit applications.',
     relatedIds: ['astro', 'vue'],
+    dedicatedPage: true,
   },
   {
     id: 'nuxt',
@@ -160,9 +155,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://nuxt.com/docs',
-    seoDescription:
-      'Configure Pulse analytics in Nuxt 2 or Nuxt 3 via nuxt.config. Simple, framework-native setup.',
     relatedIds: ['vue', 'nextjs', 'vitepress'],
+    dedicatedPage: true,
   },
   {
     id: 'remix',
@@ -177,9 +171,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://remix.run/docs',
-    seoDescription:
-      'Add Pulse analytics to your Remix application via the root route. Simple script tag in app/root.tsx.',
     relatedIds: ['react', 'nextjs'],
+    dedicatedPage: true,
   },
   {
     id: 'astro',
@@ -193,9 +186,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://docs.astro.build',
-    seoDescription:
-      'Integrate Pulse analytics with Astro. Add the script to your base layout for all pages.',
     relatedIds: ['svelte', 'hugo', 'eleventy'],
+    dedicatedPage: true,
   },
   {
     id: 'solidjs',
@@ -209,9 +201,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://www.solidjs.com/docs',
-    seoDescription:
-      'Add Pulse analytics to your Solid.js application. Simple index.html script tag setup.',
     relatedIds: ['react', 'qwik', 'preact'],
+    dedicatedPage: false,
   },
   {
     id: 'qwik',
@@ -225,9 +216,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://qwik.dev/docs',
-    seoDescription:
-      'Integrate Pulse analytics with Qwik. Add the script to your root entry file.',
     relatedIds: ['react', 'solidjs', 'astro'],
+    dedicatedPage: false,
   },
   {
     id: 'preact',
@@ -241,9 +231,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://preactjs.com/guide',
-    seoDescription:
-      'Add Pulse analytics to your Preact application. Same simple setup as any Vite or HTML project.',
     relatedIds: ['react', 'solidjs'],
+    dedicatedPage: false,
   },
   {
     id: 'htmx',
@@ -257,9 +246,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://htmx.org/docs',
-    seoDescription:
-      'Add Pulse analytics to your HTMX-powered site. Works with any backend serving HTML.',
     relatedIds: ['django', 'flask', 'laravel', 'rails'],
+    dedicatedPage: false,
   },
   {
     id: 'ember',
@@ -273,9 +261,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://guides.emberjs.com',
-    seoDescription:
-      'Add Pulse analytics to your Ember.js app. Simple index.html script tag setup.',
     relatedIds: ['react', 'angular'],
+    dedicatedPage: false,
   },
 
   // * ─── Backend Frameworks ───────────────────────────────────────────────────
@@ -291,9 +278,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://laravel.com/docs',
-    seoDescription:
-      'Add Pulse analytics to your Laravel app. Blade template integration for all Laravel versions.',
     relatedIds: ['django', 'rails', 'wordpress'],
+    dedicatedPage: true,
   },
   {
     id: 'django',
@@ -307,9 +293,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://docs.djangoproject.com',
-    seoDescription:
-      'Add Pulse analytics to your Django app. Template-based integration for all Django versions.',
     relatedIds: ['flask', 'laravel', 'htmx'],
+    dedicatedPage: true,
   },
   {
     id: 'rails',
@@ -323,9 +308,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://guides.rubyonrails.org',
-    seoDescription:
-      'Add Pulse analytics to your Ruby on Rails app. ERB layout integration.',
     relatedIds: ['laravel', 'django', 'jekyll'],
+    dedicatedPage: true,
   },
   {
     id: 'flask',
@@ -339,9 +323,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://flask.palletsprojects.com',
-    seoDescription:
-      'Add Pulse analytics to your Flask app. Jinja2 template integration.',
     relatedIds: ['django', 'htmx', 'express'],
+    dedicatedPage: true,
   },
   {
     id: 'express',
@@ -356,9 +339,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://expressjs.com',
-    seoDescription:
-      'Serve Pulse analytics from your Express.js app. Middleware or template-based setup.',
     relatedIds: ['flask', 'nextjs', 'react'],
+    dedicatedPage: true,
   },
 
   // * ─── Static Sites & Documentation ─────────────────────────────────────────
@@ -374,9 +356,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://www.gatsbyjs.com/docs',
-    seoDescription:
-      'Add Pulse analytics to your Gatsby site using gatsby-ssr or the Gatsby Head API.',
     relatedIds: ['react', 'nextjs', 'hugo'],
+    dedicatedPage: true,
   },
   {
     id: 'hugo',
@@ -390,9 +371,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://gohugo.io/documentation',
-    seoDescription:
-      'Add Pulse analytics to your Hugo site via a partial or base template.',
     relatedIds: ['jekyll', 'eleventy', 'astro'],
+    dedicatedPage: true,
   },
   {
     id: 'eleventy',
@@ -407,9 +387,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://www.11ty.dev/docs',
-    seoDescription:
-      'Add Pulse analytics to your Eleventy (11ty) site. Template-based integration.',
     relatedIds: ['hugo', 'jekyll', 'astro'],
+    dedicatedPage: true,
   },
   {
     id: 'jekyll',
@@ -423,9 +402,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://jekyllrb.com/docs',
-    seoDescription:
-      'Add Pulse analytics to your Jekyll site. Liquid template integration for GitHub Pages and beyond.',
     relatedIds: ['hugo', 'eleventy', 'github-pages'],
+    dedicatedPage: false,
   },
   {
     id: 'docusaurus',
@@ -439,9 +417,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://docusaurus.io/docs',
-    seoDescription:
-      'Add Pulse analytics to your Docusaurus documentation site via docusaurus.config.js.',
     relatedIds: ['vitepress', 'mkdocs', 'gatsby'],
+    dedicatedPage: false,
   },
   {
     id: 'vitepress',
@@ -455,9 +432,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://vitepress.dev',
-    seoDescription:
-      'Add Pulse analytics to your VitePress documentation site via config.',
     relatedIds: ['docusaurus', 'vue', 'nuxt'],
+    dedicatedPage: false,
   },
   {
     id: 'hexo',
@@ -471,9 +447,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://hexo.io/docs',
-    seoDescription:
-      'Add Pulse analytics to your Hexo blog or documentation site.',
     relatedIds: ['hugo', 'jekyll', 'eleventy'],
+    dedicatedPage: false,
   },
   {
     id: 'mkdocs',
@@ -487,9 +462,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://www.mkdocs.org',
-    seoDescription:
-      'Add Pulse analytics to your MkDocs documentation site.',
     relatedIds: ['docusaurus', 'vitepress', 'django'],
+    dedicatedPage: false,
   },
 
   // * ─── CMS & Blogging ──────────────────────────────────────────────────────
@@ -505,9 +479,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://wordpress.org/documentation',
-    seoDescription:
-      'Add Pulse analytics to your WordPress site via a plugin or theme header code.',
     relatedIds: ['ghost', 'drupal', 'woocommerce'],
+    dedicatedPage: true,
   },
   {
     id: 'ghost',
@@ -522,9 +495,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://ghost.org/docs',
-    seoDescription:
-      'Add Pulse analytics to your Ghost blog via Code Injection settings.',
     relatedIds: ['wordpress', 'blogger'],
+    dedicatedPage: true,
   },
   {
     id: 'drupal',
@@ -538,9 +510,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://www.drupal.org/docs',
-    seoDescription:
-      'Add Pulse analytics to your Drupal site using a module or theme template.',
     relatedIds: ['wordpress', 'joomla'],
+    dedicatedPage: true,
   },
   {
     id: 'joomla',
@@ -554,9 +525,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://docs.joomla.org',
-    seoDescription:
-      'Add Pulse analytics to your Joomla site via template or extension.',
     relatedIds: ['wordpress', 'drupal'],
+    dedicatedPage: false,
   },
   {
     id: 'strapi',
@@ -570,9 +540,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://docs.strapi.io',
-    seoDescription:
-      'Add Pulse analytics to your Strapi-powered frontend.',
     relatedIds: ['contentful', 'sanity', 'nextjs'],
+    dedicatedPage: false,
   },
   {
     id: 'sanity',
@@ -587,9 +556,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://www.sanity.io/docs',
-    seoDescription:
-      'Add Pulse analytics to your Sanity-powered frontend application.',
     relatedIds: ['strapi', 'contentful', 'nextjs'],
+    dedicatedPage: false,
   },
   {
     id: 'contentful',
@@ -603,9 +571,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://www.contentful.com/developers/docs',
-    seoDescription:
-      'Add Pulse analytics to your Contentful-powered frontend.',
     relatedIds: ['strapi', 'sanity', 'nextjs'],
+    dedicatedPage: false,
   },
   {
     id: 'payload',
@@ -620,9 +587,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://payloadcms.com/docs',
-    seoDescription:
-      'Add Pulse analytics to your Payload CMS frontend application.',
     relatedIds: ['strapi', 'contentful', 'nextjs'],
+    dedicatedPage: false,
   },
 
   // * ─── eCommerce ────────────────────────────────────────────────────────────
@@ -638,9 +604,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://shopify.dev/docs',
-    seoDescription:
-      'Add Pulse privacy-first analytics to your Shopify store via the theme editor.',
     relatedIds: ['woocommerce', 'bigcommerce', 'prestashop'],
+    dedicatedPage: true,
   },
   {
     id: 'woocommerce',
@@ -654,9 +619,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://woocommerce.com/documentation',
-    seoDescription:
-      'Add Pulse analytics to your WooCommerce store. WordPress-based setup.',
     relatedIds: ['shopify', 'wordpress', 'bigcommerce'],
+    dedicatedPage: false,
   },
   {
     id: 'bigcommerce',
@@ -671,9 +635,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://developer.bigcommerce.com/docs',
-    seoDescription:
-      'Add Pulse analytics to your BigCommerce store via Script Manager.',
     relatedIds: ['shopify', 'woocommerce', 'prestashop'],
+    dedicatedPage: false,
   },
   {
     id: 'prestashop',
@@ -687,9 +650,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://devdocs.prestashop-project.org',
-    seoDescription:
-      'Add Pulse analytics to your PrestaShop store via theme template.',
     relatedIds: ['shopify', 'woocommerce', 'bigcommerce'],
+    dedicatedPage: false,
   },
 
   // * ─── Platforms & Tools ────────────────────────────────────────────────────
@@ -705,9 +667,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://university.webflow.com',
-    seoDescription:
-      'Add Pulse analytics to your Webflow site via project custom code settings.',
     relatedIds: ['squarespace', 'wix', 'framer'],
+    dedicatedPage: true,
   },
   {
     id: 'squarespace',
@@ -722,9 +683,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://support.squarespace.com',
-    seoDescription:
-      'Add Pulse analytics to your Squarespace site via the Code Injection panel.',
     relatedIds: ['webflow', 'wix', 'carrd'],
+    dedicatedPage: true,
   },
   {
     id: 'wix',
@@ -738,9 +698,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://support.wix.com',
-    seoDescription:
-      'Add Pulse analytics to your Wix site via Custom Code settings.',
     relatedIds: ['webflow', 'squarespace', 'framer'],
+    dedicatedPage: true,
   },
   {
     id: 'framer',
@@ -754,9 +713,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://www.framer.com/help',
-    seoDescription:
-      'Add Pulse analytics to your Framer site via custom code settings.',
     relatedIds: ['webflow', 'squarespace', 'wix'],
+    dedicatedPage: true,
   },
   {
     id: 'carrd',
@@ -770,9 +728,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://carrd.co/docs',
-    seoDescription:
-      'Add Pulse analytics to your Carrd one-page site via head code.',
     relatedIds: ['framer', 'webflow'],
+    dedicatedPage: false,
   },
   {
     id: 'blogger',
@@ -786,9 +743,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://support.google.com/blogger',
-    seoDescription:
-      'Add Pulse analytics to your Blogger blog via theme HTML editor.',
     relatedIds: ['wordpress', 'ghost'],
+    dedicatedPage: false,
   },
   {
     id: 'gtm',
@@ -802,9 +758,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://tagmanager.google.com',
-    seoDescription:
-      'Add Pulse analytics via Google Tag Manager. Works with any site using GTM.',
     relatedIds: ['wordpress', 'shopify', 'webflow'],
+    dedicatedPage: true,
   },
   {
     id: 'notion',
@@ -819,9 +774,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://www.notion.so',
-    seoDescription:
-      'Add Pulse analytics to Notion-powered websites using Super.so, Potion, or similar tools.',
     relatedIds: ['webflow', 'framer', 'carrd'],
+    dedicatedPage: false,
   },
 
   // * ─── Hosting & Deployment ─────────────────────────────────────────────────
@@ -837,9 +791,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://developers.cloudflare.com/pages',
-    seoDescription:
-      'Deploy with Pulse analytics on Cloudflare Pages. Works with any framework.',
     relatedIds: ['netlify', 'vercel', 'github-pages'],
+    dedicatedPage: false,
   },
   {
     id: 'netlify',
@@ -853,9 +806,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://docs.netlify.com',
-    seoDescription:
-      'Add Pulse analytics to sites deployed on Netlify. Snippet injection and build-based methods.',
     relatedIds: ['cloudflare-pages', 'vercel', 'github-pages'],
+    dedicatedPage: false,
   },
   {
     id: 'vercel',
@@ -870,9 +822,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://vercel.com/docs',
-    seoDescription:
-      'Add Pulse analytics to sites deployed on Vercel. Works with any framework.',
     relatedIds: ['netlify', 'cloudflare-pages', 'nextjs'],
+    dedicatedPage: false,
   },
   {
     id: 'github-pages',
@@ -887,9 +838,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://docs.github.com/en/pages',
-    seoDescription:
-      'Add Pulse analytics to your GitHub Pages site. Works with Jekyll, Hugo, or plain HTML.',
     relatedIds: ['jekyll', 'hugo', 'netlify'],
+    dedicatedPage: false,
   },
 
   // * ─── CMS & Blogging (continued) ──────────────────────────────────────────
@@ -905,9 +855,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://craftcms.com/docs',
-    seoDescription:
-      'Add Pulse analytics to your Craft CMS site via Twig templates. Simple installation.',
     relatedIds: ['wordpress', 'statamic', 'drupal'],
+    dedicatedPage: false,
   },
   {
     id: 'statamic',
@@ -921,9 +870,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://statamic.dev/docs',
-    seoDescription:
-      'Add Pulse analytics to your Statamic site. Antlers template integration.',
     relatedIds: ['craftcms', 'laravel', 'wordpress'],
+    dedicatedPage: false,
   },
   {
     id: 'typo3',
@@ -937,9 +885,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://docs.typo3.org',
-    seoDescription:
-      'Add Pulse analytics to your TYPO3 CMS site. TypoScript and Fluid template integration.',
     relatedIds: ['wordpress', 'drupal', 'joomla'],
+    dedicatedPage: false,
   },
   {
     id: 'kirby',
@@ -954,9 +901,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://getkirby.com/docs',
-    seoDescription:
-      'Add Pulse analytics to your Kirby CMS site. Simple PHP snippet integration.',
     relatedIds: ['craftcms', 'statamic', 'grav'],
+    dedicatedPage: false,
   },
   {
     id: 'grav',
@@ -971,9 +917,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://learn.getgrav.org',
-    seoDescription:
-      'Add Pulse analytics to your Grav flat-file CMS. Twig template integration.',
     relatedIds: ['kirby', 'craftcms', 'hugo'],
+    dedicatedPage: false,
   },
   {
     id: 'umbraco',
@@ -987,9 +932,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://docs.umbraco.com',
-    seoDescription:
-      'Add Pulse analytics to your Umbraco CMS site. Razor view integration for .NET.',
     relatedIds: ['wordpress', 'drupal', 'typo3'],
+    dedicatedPage: false,
   },
   {
     id: 'storyblok',
@@ -1003,9 +947,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://www.storyblok.com/docs',
-    seoDescription:
-      'Add Pulse analytics to your Storyblok-powered frontend application.',
     relatedIds: ['contentful', 'prismic', 'nextjs'],
+    dedicatedPage: false,
   },
   {
     id: 'prismic',
@@ -1019,9 +962,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://prismic.io/docs',
-    seoDescription:
-      'Add Pulse analytics to your Prismic-powered frontend application.',
     relatedIds: ['contentful', 'storyblok', 'nextjs'],
+    dedicatedPage: false,
   },
 
   // * ─── eCommerce (continued) ───────────────────────────────────────────────
@@ -1037,9 +979,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://developer.shopware.com/docs',
-    seoDescription:
-      'Add Pulse analytics to your Shopware 6 store via theme template.',
     relatedIds: ['shopify', 'woocommerce', 'magento'],
+    dedicatedPage: false,
   },
   {
     id: 'magento',
@@ -1053,9 +994,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://developer.adobe.com/commerce',
-    seoDescription:
-      'Add Pulse analytics to your Magento or Adobe Commerce store via layout XML.',
     relatedIds: ['shopify', 'woocommerce', 'shopware'],
+    dedicatedPage: false,
   },
 
   // * ─── Platforms & Tools (continued) ───────────────────────────────────────
@@ -1072,9 +1012,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://manual.bubble.io',
-    seoDescription:
-      'Add Pulse analytics to your Bubble no-code app via the SEO/Meta tags section.',
     relatedIds: ['webflow', 'framer', 'wix'],
+    dedicatedPage: false,
   },
   {
     id: 'discourse',
@@ -1089,9 +1028,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://meta.discourse.org/docs',
-    seoDescription:
-      'Add Pulse analytics to your Discourse forum via admin customization.',
     relatedIds: ['wordpress', 'ghost'],
+    dedicatedPage: false,
   },
   {
     id: 'hubspot',
@@ -1105,9 +1043,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://knowledge.hubspot.com',
-    seoDescription:
-      'Add Pulse analytics to HubSpot landing pages and website via Settings.',
     relatedIds: ['wordpress', 'webflow'],
+    dedicatedPage: false,
   },
   {
     id: 'substack',
@@ -1121,9 +1058,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://substack.com',
-    seoDescription:
-      'Add Pulse analytics to your Substack publication using custom domain settings.',
     relatedIds: ['ghost', 'blogger', 'wordpress'],
+    dedicatedPage: false,
   },
   {
     id: 'linktree',
@@ -1137,9 +1073,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://linktr.ee',
-    seoDescription:
-      'Add Pulse analytics to your Linktree link-in-bio page.',
     relatedIds: ['carrd', 'framer', 'webflow'],
+    dedicatedPage: false,
   },
   {
     id: 'weebly',
@@ -1153,9 +1088,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://www.weebly.com',
-    seoDescription:
-      'Add Pulse analytics to your Weebly website via the header code settings.',
     relatedIds: ['squarespace', 'wix', 'webflow'],
+    dedicatedPage: false,
   },
 
   // * ─── Static Sites & Documentation (continued) ───────────────────────────
@@ -1171,9 +1105,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://docs.gitbook.com',
-    seoDescription:
-      'Add Pulse analytics to your GitBook-hosted documentation.',
     relatedIds: ['docusaurus', 'readme', 'readthedocs'],
+    dedicatedPage: false,
   },
   {
     id: 'gridsome',
@@ -1187,9 +1120,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://gridsome.org/docs',
-    seoDescription:
-      'Add Pulse analytics to your Gridsome Vue-based static site.',
     relatedIds: ['gatsby', 'vue', 'nuxt'],
+    dedicatedPage: false,
   },
   {
     id: 'readthedocs',
@@ -1204,9 +1136,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://docs.readthedocs.io',
-    seoDescription:
-      'Add Pulse analytics to your Read the Docs documentation site.',
     relatedIds: ['sphinx', 'mkdocs', 'docusaurus'],
+    dedicatedPage: false,
   },
   {
     id: 'sphinx',
@@ -1221,9 +1152,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://www.sphinx-doc.org',
-    seoDescription:
-      'Add Pulse analytics to your Sphinx-generated documentation.',
     relatedIds: ['readthedocs', 'mkdocs', 'docusaurus'],
+    dedicatedPage: false,
   },
   {
     id: 'readme',
@@ -1237,9 +1167,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://docs.readme.com',
-    seoDescription:
-      'Add Pulse analytics to your ReadMe API documentation portal.',
     relatedIds: ['gitbook', 'docusaurus', 'readthedocs'],
+    dedicatedPage: false,
   },
 
   // * ─── JavaScript Frameworks (continued) ───────────────────────────────────
@@ -1255,9 +1184,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://docs.flutter.dev',
-    seoDescription:
-      'Add Pulse analytics to your Flutter web app via web/index.html.',
     relatedIds: ['react', 'angular', 'preact'],
+    dedicatedPage: false,
   },
 
   // * ─── Hosting & Deployment (continued) ────────────────────────────────────
@@ -1274,9 +1202,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://docs.render.com',
-    seoDescription:
-      'Add Pulse analytics to sites deployed on Render. Works with any framework.',
     relatedIds: ['netlify', 'vercel', 'cloudflare-pages'],
+    dedicatedPage: false,
   },
   {
     id: 'firebase',
@@ -1290,9 +1217,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://firebase.google.com/docs/hosting',
-    seoDescription:
-      'Add Pulse analytics to sites deployed on Firebase Hosting.',
     relatedIds: ['netlify', 'vercel', 'render'],
+    dedicatedPage: false,
   },
 
   // * ─── Platforms & Tools (continued) ───────────────────────────────────────
@@ -1308,9 +1234,8 @@ export const integrations: Integration[] = [
       </svg>
     ),
     officialUrl: 'https://amp.dev/documentation',
-    seoDescription:
-      'Add Pulse analytics to Google AMP pages using amp-analytics.',
     relatedIds: ['gtm', 'wordpress', 'webflow'],
+    dedicatedPage: false,
   },
 ]
 
diff --git a/next.config.ts b/next.config.ts
index 1070da7..cb46ba9 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -76,12 +76,31 @@ const nextConfig: NextConfig = {
     ]
   },
   async redirects() {
+    const removedIntegrations = [
+      'solidjs', 'qwik', 'preact', 'htmx', 'ember',
+      'jekyll', 'docusaurus', 'vitepress', 'hexo', 'mkdocs',
+      'joomla', 'strapi', 'sanity', 'contentful', 'payload',
+      'craftcms', 'statamic', 'typo3', 'kirby', 'grav', 'umbraco',
+      'storyblok', 'prismic', 'shopware', 'magento',
+      'woocommerce', 'bigcommerce', 'prestashop',
+      'blogger', 'substack', 'linktree', 'weebly', 'gitbook',
+      'gridsome', 'readthedocs', 'sphinx', 'readme',
+      'bubble', 'discourse', 'hubspot', 'notion',
+      'cloudflare-pages', 'netlify', 'vercel', 'github-pages',
+      'firebase', 'render', 'flutter', 'amp', 'carrd',
+    ]
+
     return [
       {
         source: '/dashboard',
         destination: '/',
         permanent: false,
       },
+      ...removedIntegrations.map((slug) => ({
+        source: `/integrations/${slug}`,
+        destination: '/integrations/script-tag',
+        permanent: true,
+      })),
     ]
   },
   async rewrites() {
diff --git a/package-lock.json b/package-lock.json
index 5436332..11d2877 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,18 +33,21 @@
         "d3-array": "^3.2.4",
         "d3-scale": "^4.0.2",
         "framer-motion": "^12.23.26",
+        "gray-matter": "^4.0.3",
         "html-to-image": "^1.11.13",
         "iso-3166-2": "^1.0.0",
         "jspdf": "^4.0.0",
         "jspdf-autotable": "^5.0.7",
         "lucide-react": "^0.577.0",
         "next": "^16.1.1",
+        "next-mdx-remote": "^6.0.0",
         "radix-ui": "^1.4.3",
         "react": "^19.2.3",
         "react-dom": "^19.2.3",
         "react-markdown": "^10.1.0",
         "react-use-measure": "^2.1.7",
         "recharts": "^2.15.0",
+        "remark-gfm": "^4.0.1",
         "sonner": "^2.0.7",
         "svg-dotted-map": "^2.0.1",
         "swr": "^2.3.3",
@@ -3119,6 +3122,78 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mdx-js/mdx": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-3.1.1.tgz",
+      "integrity": "sha512-f6ZO2ifpwAQIpzGWaBQT2TXxPv6z3RBzQKpVftEWN78Vl/YweF1uwussDx8ECAXVtr3Rs89fKyG9YlzUs9DyGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdx": "^2.0.0",
+        "acorn": "^8.0.0",
+        "collapse-white-space": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "estree-util-scope": "^1.0.0",
+        "estree-walker": "^3.0.0",
+        "hast-util-to-jsx-runtime": "^2.0.0",
+        "markdown-extensions": "^2.0.0",
+        "recma-build-jsx": "^1.0.0",
+        "recma-jsx": "^1.0.0",
+        "recma-stringify": "^1.0.0",
+        "rehype-recma": "^1.0.0",
+        "remark-mdx": "^3.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.0.0",
+        "source-map": "^0.7.0",
+        "unified": "^11.0.0",
+        "unist-util-position-from-estree": "^2.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/mdx/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/@mdx-js/mdx/node_modules/source-map": {
+      "version": "0.7.6",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz",
+      "integrity": "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/@mdx-js/react": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.1.tgz",
+      "integrity": "sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdx": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16",
+        "react": ">=16"
+      }
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "0.2.12",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
@@ -6085,6 +6160,12 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/mdx": {
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.13.tgz",
+      "integrity": "sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==",
+      "license": "MIT"
+    },
     "node_modules/@types/ms": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
@@ -7191,7 +7272,6 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
@@ -7491,6 +7571,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/astring": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/astring/-/astring-1.9.0.tgz",
+      "integrity": "sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==",
+      "license": "MIT",
+      "bin": {
+        "astring": "bin/astring"
+      }
+    },
     "node_modules/async": {
       "version": "3.2.6",
       "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
@@ -8040,6 +8129,16 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/collapse-white-space": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-2.1.0.tgz",
+      "integrity": "sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -9184,6 +9283,38 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/esast-util-from-estree": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/esast-util-from-estree/-/esast-util-from-estree-2.0.0.tgz",
+      "integrity": "sha512-4CyanoAudUSBAn5K13H4JhsMH6L9ZP7XbLVe/dKybkxMO7eDyLsT8UHl9TRNrU2Gr9nz+FovfSIjuXWJ81uVwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-visit": "^2.0.0",
+        "unist-util-position-from-estree": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/esast-util-from-js": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/esast-util-from-js/-/esast-util-from-js-2.0.1.tgz",
+      "integrity": "sha512-8Ja+rNJ0Lt56Pcf3TAmpBZjmx8ZcK5Ts4cAzIOjsjevg9oSXJnl6SUQ2EevU8tv3h6ZLWmoKL5H4fgWvdvfETw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "acorn": "^8.0.0",
+        "esast-util-from-estree": "^2.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.27.3",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.3.tgz",
@@ -9652,6 +9783,19 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/esquery": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
@@ -9688,6 +9832,44 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-util-attach-comments": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-attach-comments/-/estree-util-attach-comments-3.0.0.tgz",
+      "integrity": "sha512-cKUwm/HUcTDsYh/9FgnuFqpfquUbwIqwKM26BVCGDPVgvaCl/nDCCjUfiLlx6lsEZ3Z4RFxNbOQ60pkaEwFxGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/estree-util-build-jsx": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/estree-util-build-jsx/-/estree-util-build-jsx-3.0.1.tgz",
+      "integrity": "sha512-8U5eiL6BTrPxp/CHbs2yMgP8ftMhR5ww1eIKoWRMlqvltHF8fZn5LRDvTKuxD3DUn+shRbLGqXemcP51oFCsGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "estree-walker": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/estree-util-build-jsx/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
     "node_modules/estree-util-is-identifier-name": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
@@ -9698,6 +9880,58 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/estree-util-scope": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-scope/-/estree-util-scope-1.0.0.tgz",
+      "integrity": "sha512-2CAASclonf+JFWBNJPndcOpA8EMJwa0Q8LUFJEKqXLW6+qBvbFZuF5gItbQOs/umBUkjviCSDCbBwU2cXbmrhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "devlop": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/estree-util-to-js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-to-js/-/estree-util-to-js-2.0.0.tgz",
+      "integrity": "sha512-WDF+xj5rRWmD5tj6bIqRi6CkLIXbbNQUcxQHzGysQzvHmdYG2G7p/Tf0J0gpxGgkeMZNTIjT/AoSvC9Xehcgdg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "astring": "^1.8.0",
+        "source-map": "^0.7.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/estree-util-to-js/node_modules/source-map": {
+      "version": "0.7.6",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz",
+      "integrity": "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/estree-util-visit": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-visit/-/estree-util-visit-2.0.0.tgz",
+      "integrity": "sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
@@ -9735,6 +9969,18 @@
       "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
       "license": "MIT"
     },
+    "node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+      "license": "MIT",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -10245,6 +10491,43 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "license": "ISC"
     },
+    "node_modules/gray-matter": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz",
+      "integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-yaml": "^3.13.1",
+        "kind-of": "^6.0.2",
+        "section-matter": "^1.0.0",
+        "strip-bom-string": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/gray-matter/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "license": "MIT",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/gray-matter/node_modules/js-yaml": {
+      "version": "3.14.2",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.2.tgz",
+      "integrity": "sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/has-bigints": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
@@ -10333,6 +10616,34 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-to-estree": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/hast-util-to-estree/-/hast-util-to-estree-3.1.3.tgz",
+      "integrity": "sha512-48+B/rJWAp0jamNbAAf9M7Uf//UVqAoMmgXhBdxTDJLGKY+LRnZ99qcG+Qjl5HfMpYNzS5v4EAwVEF34LeAj7w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-attach-comments": "^3.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "style-to-js": "^1.0.0",
+        "unist-util-position": "^5.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-to-jsx-runtime": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
@@ -10775,6 +11086,15 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -11365,6 +11685,15 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/language-subtag-registry": {
       "version": "0.3.23",
       "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
@@ -11528,6 +11857,28 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "node_modules/markdown-extensions": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-2.0.0.tgz",
+      "integrity": "sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/markdown-table": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
+      "integrity": "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -11537,6 +11888,34 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/mdast-util-find-and-replace": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.2.tgz",
+      "integrity": "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "escape-string-regexp": "^5.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-find-and-replace/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/mdast-util-from-markdown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.2.tgz",
@@ -11561,6 +11940,124 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdast-util-gfm": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.1.0.tgz",
+      "integrity": "sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==",
+      "license": "MIT",
+      "dependencies": {
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-gfm-autolink-literal": "^2.0.0",
+        "mdast-util-gfm-footnote": "^2.0.0",
+        "mdast-util-gfm-strikethrough": "^2.0.0",
+        "mdast-util-gfm-table": "^2.0.0",
+        "mdast-util-gfm-task-list-item": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-autolink-literal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.1.tgz",
+      "integrity": "sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-find-and-replace": "^3.0.0",
+        "micromark-util-character": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-strikethrough": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-2.0.0.tgz",
+      "integrity": "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-table": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-2.0.0.tgz",
+      "integrity": "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "markdown-table": "^3.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-task-list-item": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-2.0.0.tgz",
+      "integrity": "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx/-/mdast-util-mdx-3.0.0.tgz",
+      "integrity": "sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==",
+      "license": "MIT",
+      "dependencies": {
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdast-util-mdx-expression": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
@@ -11775,6 +12272,229 @@
         "micromark-util-types": "^2.0.0"
       }
     },
+    "node_modules/micromark-extension-gfm": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
+      "integrity": "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-extension-gfm-autolink-literal": "^2.0.0",
+        "micromark-extension-gfm-footnote": "^2.0.0",
+        "micromark-extension-gfm-strikethrough": "^2.0.0",
+        "micromark-extension-gfm-table": "^2.0.0",
+        "micromark-extension-gfm-tagfilter": "^2.0.0",
+        "micromark-extension-gfm-task-list-item": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-autolink-literal": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz",
+      "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-strikethrough": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.1.0.tgz",
+      "integrity": "sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-table": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.1.tgz",
+      "integrity": "sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-tagfilter": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-2.0.0.tgz",
+      "integrity": "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-task-list-item": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.1.0.tgz",
+      "integrity": "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-mdx-expression": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdx-expression/-/micromark-extension-mdx-expression-3.0.1.tgz",
+      "integrity": "sha512-dD/ADLJ1AeMvSAKBwO22zG22N4ybhe7kFIZ3LsDI0GlsNr2A3KYxb0LdC1u5rj4Nw+CHKY0RVdnHX8vj8ejm4Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-factory-mdx-expression": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-events-to-acorn": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-mdx-jsx": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdx-jsx/-/micromark-extension-mdx-jsx-3.0.2.tgz",
+      "integrity": "sha512-e5+q1DjMh62LZAJOnDraSSbDMvGJ8x3cbjygy2qFEi7HCeUT4BDKCvMozPozcD6WmOt6sVvYDNBKhFSz3kjOVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "micromark-factory-mdx-expression": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-events-to-acorn": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-mdx-md": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdx-md/-/micromark-extension-mdx-md-2.0.0.tgz",
+      "integrity": "sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-mdxjs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdxjs/-/micromark-extension-mdxjs-3.0.0.tgz",
+      "integrity": "sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.0.0",
+        "acorn-jsx": "^5.0.0",
+        "micromark-extension-mdx-expression": "^3.0.0",
+        "micromark-extension-mdx-jsx": "^3.0.0",
+        "micromark-extension-mdx-md": "^2.0.0",
+        "micromark-extension-mdxjs-esm": "^3.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-mdxjs-esm": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdxjs-esm/-/micromark-extension-mdxjs-esm-3.0.0.tgz",
+      "integrity": "sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-events-to-acorn": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unist-util-position-from-estree": "^2.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/micromark-factory-destination": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
@@ -11818,6 +12538,33 @@
         "micromark-util-types": "^2.0.0"
       }
     },
+    "node_modules/micromark-factory-mdx-expression": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/micromark-factory-mdx-expression/-/micromark-factory-mdx-expression-2.0.3.tgz",
+      "integrity": "sha512-kQnEtA3vzucU2BkrIa8/VaSAsP+EJ3CKOvhMuJgOEGg9KDC6OAY6nSnNDVRiVNRqj7Y4SlSzcStaH/5jge8JdQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-events-to-acorn": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unist-util-position-from-estree": "^2.0.0",
+        "vfile-message": "^4.0.0"
+      }
+    },
     "node_modules/micromark-factory-space": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz",
@@ -12019,6 +12766,31 @@
       ],
       "license": "MIT"
     },
+    "node_modules/micromark-util-events-to-acorn": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/micromark-util-events-to-acorn/-/micromark-util-events-to-acorn-2.0.3.tgz",
+      "integrity": "sha512-jmsiEIiZ1n7X1Rr5k8wVExBQCg5jy4UXVADItHmNk1zkwEVhBuIUKRu3fqv+hs4nxLISi2DQGlqIOGiFxgbfHg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/unist": "^3.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-visit": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "vfile-message": "^4.0.0"
+      }
+    },
     "node_modules/micromark-util-html-tag-name": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz",
@@ -12320,6 +13092,28 @@
         }
       }
     },
+    "node_modules/next-mdx-remote": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/next-mdx-remote/-/next-mdx-remote-6.0.0.tgz",
+      "integrity": "sha512-cJEpEZlgD6xGjB4jL8BnI8FaYdN9BzZM4NwadPe1YQr7pqoWjg9EBCMv3nXBkuHqMRfv2y33SzUsuyNh9LFAQQ==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "@babel/code-frame": "^7.23.5",
+        "@mdx-js/mdx": "^3.0.1",
+        "@mdx-js/react": "^3.0.1",
+        "unist-util-remove": "^4.0.0",
+        "unist-util-visit": "^5.1.0",
+        "vfile": "^6.0.1",
+        "vfile-matter": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=7"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -13406,6 +14200,73 @@
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
       "license": "MIT"
     },
+    "node_modules/recma-build-jsx": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/recma-build-jsx/-/recma-build-jsx-1.0.0.tgz",
+      "integrity": "sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-util-build-jsx": "^3.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/recma-jsx": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/recma-jsx/-/recma-jsx-1.0.1.tgz",
+      "integrity": "sha512-huSIy7VU2Z5OLv6oFLosQGGDqPqdO1iq6bWNAdhzMxSJP7RAso4fCZ1cKu8j9YHCZf3TPrq4dw3okhrylgcd7w==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn-jsx": "^5.0.0",
+        "estree-util-to-js": "^2.0.0",
+        "recma-parse": "^1.0.0",
+        "recma-stringify": "^1.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/recma-parse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/recma-parse/-/recma-parse-1.0.0.tgz",
+      "integrity": "sha512-OYLsIGBB5Y5wjnSnQW6t3Xg7q3fQ7FWbw/vcXtORTnyaSFscOtABg+7Pnz6YZ6c27fG1/aN8CjfwoUEUIdwqWQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "esast-util-from-js": "^2.0.0",
+        "unified": "^11.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/recma-stringify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/recma-stringify/-/recma-stringify-1.0.0.tgz",
+      "integrity": "sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-util-to-js": "^2.0.0",
+        "unified": "^11.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -13522,6 +14383,53 @@
         "regjsparser": "bin/parser"
       }
     },
+    "node_modules/rehype-recma": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-recma/-/rehype-recma-1.0.0.tgz",
+      "integrity": "sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "hast-util-to-estree": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-gfm": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz",
+      "integrity": "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-gfm": "^3.0.0",
+        "micromark-extension-gfm": "^3.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-stringify": "^11.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-mdx": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-3.1.1.tgz",
+      "integrity": "sha512-Pjj2IYlUY3+D8x00UJsIOg5BEvfMyeI+2uLPn9VO9Wg4MEtN/VTIq2NEJQfde9PnX15KgtHyl9S0BcTnWrIuWg==",
+      "license": "MIT",
+      "dependencies": {
+        "mdast-util-mdx": "^3.0.0",
+        "micromark-extension-mdxjs": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-parse": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
@@ -13555,6 +14463,21 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-stringify": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
+      "integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -13771,6 +14694,19 @@
       "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
       "license": "MIT"
     },
+    "node_modules/section-matter": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
+      "integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==",
+      "license": "MIT",
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/semver": {
       "version": "7.6.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
@@ -14068,6 +15004,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/ssf": {
       "version": "0.11.2",
       "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
@@ -14271,6 +15213,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/strip-bom-string": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
+      "integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/strip-comments": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/strip-comments/-/strip-comments-2.0.1.tgz",
@@ -15052,6 +16003,34 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/unist-util-position-from-estree": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position-from-estree/-/unist-util-position-from-estree-2.0.0.tgz",
+      "integrity": "sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-remove": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-remove/-/unist-util-remove-4.0.0.tgz",
+      "integrity": "sha512-b4gokeGId57UVRX/eVKej5gXqGlc9+trkORhFJpu9raqZkZhU0zm8Doi05+HaiBsMEIJowL+2WtQ5ItjsngPXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/unist-util-stringify-position": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
@@ -15271,6 +16250,20 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/vfile-matter": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/vfile-matter/-/vfile-matter-5.0.1.tgz",
+      "integrity": "sha512-o6roP82AiX0XfkyTHyRCMXgHfltUNlXSEqCIS80f+mbAyiQBE2fxtDVMtseyytGx75sihiJFo/zR6r/4LTs2Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "vfile": "^6.0.0",
+        "yaml": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/vfile-message": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
@@ -16174,6 +17167,21 @@
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
       "license": "ISC"
     },
+    "node_modules/yaml": {
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.3.tgz",
+      "integrity": "sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg==",
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index 6fa2eb7..c3ce286 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,8 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
+    "generate:integrations": "npx tsx scripts/generate-integrations.ts",
+    "prebuild": "npm run generate:integrations",
     "build": "next build --webpack",
     "start": "next start",
     "lint": "next lint",
@@ -37,18 +39,21 @@
     "d3-array": "^3.2.4",
     "d3-scale": "^4.0.2",
     "framer-motion": "^12.23.26",
+    "gray-matter": "^4.0.3",
     "html-to-image": "^1.11.13",
     "iso-3166-2": "^1.0.0",
     "jspdf": "^4.0.0",
     "jspdf-autotable": "^5.0.7",
     "lucide-react": "^0.577.0",
     "next": "^16.1.1",
+    "next-mdx-remote": "^6.0.0",
     "radix-ui": "^1.4.3",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "react-markdown": "^10.1.0",
     "react-use-measure": "^2.1.7",
     "recharts": "^2.15.0",
+    "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
     "svg-dotted-map": "^2.0.1",
     "swr": "^2.3.3",
diff --git a/scripts/generate-integrations.ts b/scripts/generate-integrations.ts
new file mode 100644
index 0000000..3e256a1
--- /dev/null
+++ b/scripts/generate-integrations.ts
@@ -0,0 +1,44 @@
+import fs from 'fs'
+import path from 'path'
+import matter from 'gray-matter'
+
+const CONTENT_DIR = path.join(process.cwd(), 'content', 'integrations')
+const OUTPUT_PATH = path.join(process.cwd(), 'lib', 'integration-guides.gen.ts')
+
+const files = fs.existsSync(CONTENT_DIR)
+  ? fs.readdirSync(CONTENT_DIR).filter((f) => f.endsWith('.mdx'))
+  : []
+
+const guides: { slug: string; title: string; description: string; category: string; date: string }[] = []
+
+for (const filename of files) {
+  const slug = filename.replace(/\.mdx$/, '')
+  const raw = fs.readFileSync(path.join(CONTENT_DIR, filename), 'utf-8')
+  const { data } = matter(raw)
+  guides.push({
+    slug,
+    title: data.title as string,
+    description: data.description as string,
+    category: data.category as string,
+    date: data.date as string,
+  })
+}
+
+guides.sort((a, b) => a.title.localeCompare(b.title))
+
+const output = `// Auto-generated from content/integrations/*.mdx — do not edit manually
+// Run: npm run generate:integrations
+
+export interface IntegrationGuideSummary {
+  slug: string
+  title: string
+  description: string
+  category: string
+  date: string
+}
+
+export const integrationGuides: IntegrationGuideSummary[] = ${JSON.stringify(guides, null, 2)}
+`
+
+fs.writeFileSync(OUTPUT_PATH, output, 'utf-8')
+console.log(`Generated ${guides.length} integration guides → lib/integration-guides.gen.ts`)
-- 
2.49.1


From 627613dc13a7df8f85c1654637fbf8c6edc0827e Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 29 Mar 2026 01:01:56 +0100
Subject: [PATCH 426/428] fix: code blocks rendering + consistent styling with
 ciphera-website /learn

- Convert MDX CodeBlock components to standard markdown code fences
- Add rehype-mdx-code-props to pass filename meta to code components
- Custom pre/code MDX components map fences to CodeBlock
- Add brand color badges (product + category) matching /learn layout
- Match prose styling: orange inline code, orange links, white strong
- Remove brand color background glow (not in /learn)
---
 app/integrations/[slug]/page.tsx     | 24 ++++++++++++--
 components/IntegrationGuide.tsx      | 39 ++++++++++++++++------
 content/integrations/angular.mdx     |  6 ++--
 content/integrations/astro.mdx       |  6 ++--
 content/integrations/django.mdx      |  6 ++--
 content/integrations/drupal.mdx      |  6 ++--
 content/integrations/eleventy.mdx    |  6 ++--
 content/integrations/express.mdx     | 12 ++++---
 content/integrations/flask.mdx       |  6 ++--
 content/integrations/framer.mdx      |  6 ++--
 content/integrations/gatsby.mdx      | 12 ++++---
 content/integrations/ghost.mdx       |  6 ++--
 content/integrations/gtm.mdx         | 10 ++++--
 content/integrations/hugo.mdx        | 12 ++++---
 content/integrations/laravel.mdx     |  6 ++--
 content/integrations/nextjs.mdx      | 12 ++++---
 content/integrations/nuxt.mdx        | 12 ++++---
 content/integrations/rails.mdx       |  6 ++--
 content/integrations/react.mdx       | 12 ++++---
 content/integrations/remix.mdx       |  6 ++--
 content/integrations/script-tag.mdx  |  6 ++--
 content/integrations/shopify.mdx     |  6 ++--
 content/integrations/squarespace.mdx |  6 ++--
 content/integrations/svelte.mdx      | 12 ++++---
 content/integrations/vue.mdx         |  6 ++--
 content/integrations/webflow.mdx     |  6 ++--
 content/integrations/wix.mdx         |  6 ++--
 content/integrations/wordpress.mdx   |  6 ++--
 package-lock.json                    | 48 ++++++++++++++++++++++++++++
 package.json                         |  1 +
 30 files changed, 235 insertions(+), 79 deletions(-)

diff --git a/app/integrations/[slug]/page.tsx b/app/integrations/[slug]/page.tsx
index 089b038..62dc7e8 100644
--- a/app/integrations/[slug]/page.tsx
+++ b/app/integrations/[slug]/page.tsx
@@ -10,14 +10,34 @@ import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 import { MDXRemote } from 'next-mdx-remote/rsc'
 import remarkGfm from 'remark-gfm'
+import rehypeMdxCodeProps from 'rehype-mdx-code-props'
 import { CodeBlock } from '@ciphera-net/ui'
 import { integrations, getIntegration } from '@/lib/integrations'
 import { getIntegrationGuide } from '@/lib/integration-content'
 import { IntegrationGuide } from '@/components/IntegrationGuide'
 
 // * ─── MDX Components ────────────────────────────────────────────
+// Maps markdown code fences to CodeBlock. The `filename` meta is passed
+// as a prop via rehype-mdx-code-props (e.g. ```tsx filename="app.tsx").
 const mdxComponents = {
-  CodeBlock,
+  pre: ({ children }: { children: React.ReactNode }) => children,
+  code: ({ children, className, filename, ...props }: {
+    children: React.ReactNode
+    className?: string
+    filename?: string
+    [key: string]: unknown
+  }) => {
+    // Block code (inside <pre>) has className like "language-tsx"
+    if (className?.startsWith('language-') || filename) {
+      return (
+        <CodeBlock filename={filename || 'code'}>
+          {String(children).replace(/\n$/, '')}
+        </CodeBlock>
+      )
+    }
+    // Inline code
+    return <code className={className} {...props}>{children}</code>
+  },
 }
 
 // * ─── Static Params ─────────────────────────────────────────────
@@ -115,7 +135,7 @@ export default async function IntegrationPage({ params }: PageProps) {
         <MDXRemote
           source={guide.content}
           components={mdxComponents}
-          options={{ mdxOptions: { remarkPlugins: [remarkGfm] } }}
+          options={{ mdxOptions: { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeMdxCodeProps] } }}
         />
       </IntegrationGuide>
     </>
diff --git a/components/IntegrationGuide.tsx b/components/IntegrationGuide.tsx
index 390ce92..22f0f5c 100644
--- a/components/IntegrationGuide.tsx
+++ b/components/IntegrationGuide.tsx
@@ -2,13 +2,14 @@
  * @file Shared layout component for individual integration guide pages.
  *
  * Provides the background atmosphere, back-link, header (logo + title),
- * prose-styled content area, and a related integrations section.
+ * category badge, prose-styled content area, and a related integrations section.
+ * Styling matches ciphera-website /learn article layout for consistency.
  */
 
 import Link from 'next/link'
 import { ArrowLeftIcon, ArrowRightIcon } from '@ciphera-net/ui'
 import { type ReactNode } from 'react'
-import { type Integration, getIntegration } from '@/lib/integrations'
+import { type Integration, getIntegration, categoryLabels } from '@/lib/integrations'
 
 interface IntegrationGuideProps {
   /** Integration metadata (name, icon, etc.) */
@@ -35,6 +36,8 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
     .filter((i): i is Integration => i !== undefined)
     .slice(0, 4)
 
+  const categoryLabel = categoryLabels[integration.category]
+
   return (
     <div className="relative min-h-screen flex flex-col overflow-hidden">
       {/* * --- ATMOSPHERE (Background) --- */}
@@ -47,6 +50,7 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
       </div>
 
       <div className="flex-grow w-full max-w-4xl mx-auto px-4 pt-20 pb-10 z-10">
+        {/* * --- Back link --- */}
         <Link
           href="/integrations"
           className="inline-flex items-center text-sm text-neutral-500 hover:text-brand-orange mb-8 transition-colors"
@@ -55,16 +59,31 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
           Back to Integrations
         </Link>
 
-        <div className="flex items-center gap-4 mb-8">
-          <div className="p-3 bg-neutral-800 rounded-xl">
-            {headerIcon}
-          </div>
-          <h1 className="text-4xl md:text-5xl font-bold text-white">
-            {integration.name} Integration
-          </h1>
+        {/* * --- Category + Official site badges --- */}
+        <div className="flex items-center gap-2 mb-4">
+          <span
+            className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium border"
+            style={{
+              color: integration.brandColor,
+              borderColor: `${integration.brandColor}33`,
+              backgroundColor: `${integration.brandColor}15`,
+            }}
+          >
+            <div className="[&_svg]:w-3.5 [&_svg]:h-3.5">{integration.icon}</div>
+            {integration.name}
+          </span>
+          <span className="inline-flex items-center px-3 py-1 rounded-full border border-neutral-700 bg-neutral-800 text-xs text-neutral-400">
+            {categoryLabel}
+          </span>
         </div>
 
-        <div className="prose prose-invert max-w-none">
+        {/* * --- Title --- */}
+        <h1 className="text-3xl sm:text-4xl font-bold text-white leading-tight mb-8">
+          {integration.name} Integration
+        </h1>
+
+        {/* * --- Prose content (matches ciphera-website /learn styling) --- */}
+        <div className="prose prose-invert prose-neutral max-w-none prose-headings:text-white prose-a:text-brand-orange prose-a:no-underline hover:prose-a:underline prose-strong:text-white prose-code:text-brand-orange prose-code:bg-neutral-800 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none">
           {children}
 
           <hr className="my-8 border-neutral-800" />
diff --git a/content/integrations/angular.mdx b/content/integrations/angular.mdx
index 6531696..96e3b4e 100644
--- a/content/integrations/angular.mdx
+++ b/content/integrations/angular.mdx
@@ -16,7 +16,8 @@ Add the script to your `src/index.html` — the single entry point for all Angul
 
 Place the Pulse script inside the `<head>` tag of your Angular app's `src/index.html`.
 
-<CodeBlock filename="src/index.html">{`<!doctype html>
+```html filename="src/index.html"
+<!doctype html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
@@ -34,6 +35,7 @@ Place the Pulse script inside the `<head>` tag of your Angular app's `src/index.
 <body>
   <app-root></app-root>
 </body>
-</html>`}</CodeBlock>
+</html>
+```
 
 For more details, see the [Angular docs](https://angular.dev/guide/components).
diff --git a/content/integrations/astro.mdx b/content/integrations/astro.mdx
index 974815f..650c18e 100644
--- a/content/integrations/astro.mdx
+++ b/content/integrations/astro.mdx
@@ -16,7 +16,8 @@ Add the Pulse script to your base layout so it's included on every page of your
 
 Place the Pulse script in the `<head>` of your shared layout component.
 
-<CodeBlock filename="src/layouts/BaseLayout.astro">{`---
+```html filename="src/layouts/BaseLayout.astro"
+---
 interface Props {
   title: string
 }
@@ -41,7 +42,8 @@ const { title } = Astro.props
 <body>
     <slot />
 </body>
-</html>`}</CodeBlock>
+</html>
+```
 
 If you're using Astro's View Transitions, the script will persist across navigations by default since it's in the `<head>`.
 
diff --git a/content/integrations/django.mdx b/content/integrations/django.mdx
index 063008e..60b5f26 100644
--- a/content/integrations/django.mdx
+++ b/content/integrations/django.mdx
@@ -16,7 +16,8 @@ Add the Pulse script to your base template with a debug guard.
 
 Use Django's template tags to only load the script when `DEBUG` is `False`.
 
-<CodeBlock filename="templates/base.html">{`<!DOCTYPE html>
+```html filename="templates/base.html"
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -35,7 +36,8 @@ Use Django's template tags to only load the script when `DEBUG` is `False`.
 <body>
     {% block content %}{% endblock %}
 </body>
-</html>`}</CodeBlock>
+</html>
+```
 
 Make sure to pass `debug` to the template context via `settings.DEBUG`, or use a context processor to make it available globally.
 
diff --git a/content/integrations/drupal.mdx b/content/integrations/drupal.mdx
index 5661548..3cc23f2 100644
--- a/content/integrations/drupal.mdx
+++ b/content/integrations/drupal.mdx
@@ -20,7 +20,8 @@ Install the [Asset Injector](https://www.drupal.org/project/asset_injector) modu
 
 Add the script directly to your theme's `html.html.twig` template in the head area.
 
-<CodeBlock filename="templates/html.html.twig">{`<!DOCTYPE html>
+```twig filename="templates/html.html.twig"
+<!DOCTYPE html>
 <html{{ html_attributes }}>
 <head>
     <head-placeholder token="{{ placeholder_token }}">
@@ -40,6 +41,7 @@ Add the script directly to your theme's `html.html.twig` template in the head ar
     {{ page_bottom }}
     <js-bottom-placeholder token="{{ placeholder_token }}">
 </body>
-</html>`}</CodeBlock>
+</html>
+```
 
 For more details, see the [Drupal theming docs](https://www.drupal.org/docs/theming-drupal).
diff --git a/content/integrations/eleventy.mdx b/content/integrations/eleventy.mdx
index 2ad4e5d..5517483 100644
--- a/content/integrations/eleventy.mdx
+++ b/content/integrations/eleventy.mdx
@@ -16,7 +16,8 @@ Add the Pulse script to your base Nunjucks or Liquid layout.
 
 Place the Pulse script inside the `<head>` of your shared base template.
 
-<CodeBlock filename="src/_includes/base.njk">{`<!DOCTYPE html>
+```html filename="src/_includes/base.njk"
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -33,6 +34,7 @@ Place the Pulse script inside the `<head>` of your shared base template.
 <body>
     {{ content | safe }}
 </body>
-</html>`}</CodeBlock>
+</html>
+```
 
 For more details, see the [Eleventy layouts docs](https://www.11ty.dev/docs/layouts/).
diff --git a/content/integrations/express.mdx b/content/integrations/express.mdx
index 5e7d9ed..7b29768 100644
--- a/content/integrations/express.mdx
+++ b/content/integrations/express.mdx
@@ -16,7 +16,8 @@ Add the Pulse script to your template engine's layout (EJS, Pug, Handlebars) or
 
 If you use EJS as your template engine, add the script to your layout with a production guard.
 
-<CodeBlock filename="views/layout.ejs">{`<!DOCTYPE html>
+```html filename="views/layout.ejs"
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -35,13 +36,15 @@ If you use EJS as your template engine, add the script to your layout with a pro
 <body>
     <%- body %>
 </body>
-</html>`}</CodeBlock>
+</html>
+```
 
 ## Method 2: Static HTML
 
 If you serve static HTML files via Express, add the script directly.
 
-<CodeBlock filename="public/index.html">{`<!DOCTYPE html>
+```html filename="public/index.html"
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -58,4 +61,5 @@ If you serve static HTML files via Express, add the script directly.
 <body>
     <h1>Hello World</h1>
 </body>
-</html>`}</CodeBlock>
+</html>
+```
diff --git a/content/integrations/flask.mdx b/content/integrations/flask.mdx
index 140872a..b72e34b 100644
--- a/content/integrations/flask.mdx
+++ b/content/integrations/flask.mdx
@@ -16,7 +16,8 @@ Add the Pulse script to your Jinja2 base template with a debug guard.
 
 Use Jinja2's conditional to only load the script when `DEBUG` is off.
 
-<CodeBlock filename="templates/base.html">{`<!DOCTYPE html>
+```html filename="templates/base.html"
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -35,6 +36,7 @@ Use Jinja2's conditional to only load the script when `DEBUG` is off.
 <body>
     {% block content %}{% endblock %}
 </body>
-</html>`}</CodeBlock>
+</html>
+```
 
 For more details, see the [Flask template docs](https://flask.palletsprojects.com/en/stable/patterns/templateinheritance/).
diff --git a/content/integrations/framer.mdx b/content/integrations/framer.mdx
index aec9208..0d67b55 100644
--- a/content/integrations/framer.mdx
+++ b/content/integrations/framer.mdx
@@ -16,10 +16,12 @@ Add the Pulse script to your Framer project's custom code settings.
 
 Go to **Project Settings -> General -> Custom Code -> Head** and paste the Pulse script.
 
-<CodeBlock filename="Project Settings -> Head">{`<script
+```html filename="Project Settings -> Head"
+<script
   defer
   data-domain="your-site.com"
   src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
+></script>
+```
 
 For more details, see the [Framer custom code docs](https://www.framer.com/help/articles/custom-code/).
diff --git a/content/integrations/gatsby.mdx b/content/integrations/gatsby.mdx
index 2c83a7f..3cdc0d4 100644
--- a/content/integrations/gatsby.mdx
+++ b/content/integrations/gatsby.mdx
@@ -16,7 +16,8 @@ Use the Gatsby SSR API or the Gatsby Head API to add Pulse to your site.
 
 Use the `onRenderBody` hook to inject the Pulse script into every page's `<head>`.
 
-<CodeBlock filename="gatsby-ssr.js">{`import React from "react"
+```jsx filename="gatsby-ssr.js"
+import React from "react"
 
 export const onRenderBody = ({ setHeadComponents }) => {
   setHeadComponents([
@@ -27,13 +28,15 @@ export const onRenderBody = ({ setHeadComponents }) => {
       src="https://pulse.ciphera.net/script.js"
     />,
   ])
-}`}</CodeBlock>
+}
+```
 
 ## Method 2: Gatsby Head API (v4.19+)
 
 If you're on Gatsby 4.19 or later, you can use the Head export in any page or template component.
 
-<CodeBlock filename="src/pages/index.tsx">{`import React from "react"
+```tsx filename="src/pages/index.tsx"
+import React from "react"
 
 export function Head() {
   return (
@@ -47,6 +50,7 @@ export function Head() {
 
 export default function IndexPage() {
   return <h1>Hello World</h1>
-}`}</CodeBlock>
+}
+```
 
 For more details, see the [Gatsby Head API docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/).
diff --git a/content/integrations/ghost.mdx b/content/integrations/ghost.mdx
index 9a1f01f..2d98533 100644
--- a/content/integrations/ghost.mdx
+++ b/content/integrations/ghost.mdx
@@ -16,11 +16,13 @@ Use Ghost's built-in Code Injection feature to add the Pulse script — no theme
 
 Go to **Settings -> Code injection -> Site Header** and paste the Pulse script.
 
-<CodeBlock filename="Settings -> Code injection -> Site Header">{`<script
+```html filename="Settings -> Code injection -> Site Header"
+<script
   defer
   data-domain="your-site.com"
   src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
+></script>
+```
 
 Alternatively, you can add the script directly to your theme's `default.hbs` template file.
 
diff --git a/content/integrations/gtm.mdx b/content/integrations/gtm.mdx
index e3206c7..1d2ece0 100644
--- a/content/integrations/gtm.mdx
+++ b/content/integrations/gtm.mdx
@@ -21,7 +21,9 @@ Follow these steps to add Pulse through GTM:
 3. Set the trigger to **All Pages**
 4. Publish your container
 
-<CodeBlock filename="GTM -> Custom HTML Tag">{`<script defer src="https://pulse.ciphera.net/script.js"></script>`}</CodeBlock>
+```html filename="GTM -> Custom HTML Tag"
+<script defer src="https://pulse.ciphera.net/script.js"></script>
+```
 
 That's it. Pulse auto-detects the domain from the page, so no extra configuration is needed.
 
@@ -30,10 +32,12 @@ That's it. Pulse auto-detects the domain from the page, so no extra configuratio
 
 If your site is registered under a different domain than the page hostname, or you need custom options (API endpoint, storage mode, etc.), use `pulseConfig`:
 
-<CodeBlock filename="GTM -> Custom HTML Tag (with config)">{`<script>
+```html filename="GTM -> Custom HTML Tag (with config)"
+<script>
   window.pulseConfig = { domain: "your-site.com" };
 </script>
-<script defer src="https://pulse.ciphera.net/script.js"></script>`}</CodeBlock>
+<script defer src="https://pulse.ciphera.net/script.js"></script>
+```
 </details>
 
 For more details, see the [GTM Custom HTML tag docs](https://support.google.com/tagmanager/answer/6103696).
diff --git a/content/integrations/hugo.mdx b/content/integrations/hugo.mdx
index 8d0e4a5..268cf4c 100644
--- a/content/integrations/hugo.mdx
+++ b/content/integrations/hugo.mdx
@@ -16,19 +16,22 @@ Add the Pulse script via a Hugo partial or directly in your base template.
 
 Create an analytics partial with a production guard using Hugo's `.Site.IsServer` flag.
 
-<CodeBlock filename="layouts/partials/analytics.html">{`{{ if not .Site.IsServer }}
+```html filename="layouts/partials/analytics.html"
+{{ if not .Site.IsServer }}
 <script
   defer
   data-domain="your-site.com"
   src="https://pulse.ciphera.net/script.js"
 ></script>
-{{ end }}`}</CodeBlock>
+{{ end }}
+```
 
 ## Method 2: Include the partial in your base layout
 
 Add the partial to your `baseof.html` layout.
 
-<CodeBlock filename="layouts/_default/baseof.html">{`<!DOCTYPE html>
+```html filename="layouts/_default/baseof.html"
+<!DOCTYPE html>
 <html lang="{{ .Site.Language }}">
 <head>
     <meta charset="utf-8">
@@ -39,6 +42,7 @@ Add the partial to your `baseof.html` layout.
 <body>
     {{ block "main" . }}{{ end }}
 </body>
-</html>`}</CodeBlock>
+</html>
+```
 
 For more details, see the [Hugo partials docs](https://gohugo.io/templates/partials/).
diff --git a/content/integrations/laravel.mdx b/content/integrations/laravel.mdx
index 9364a2a..89d77f2 100644
--- a/content/integrations/laravel.mdx
+++ b/content/integrations/laravel.mdx
@@ -16,7 +16,8 @@ Add the Pulse script to your Blade layout template with a production guard.
 
 Use Laravel's `@production` directive to only load the script in production.
 
-<CodeBlock filename="resources/views/layouts/app.blade.php">{`<!DOCTYPE html>
+```php filename="resources/views/layouts/app.blade.php"
+<!DOCTYPE html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 <head>
     <meta charset="utf-8">
@@ -36,6 +37,7 @@ Use Laravel's `@production` directive to only load the script in production.
 <body>
     @yield('content')
 </body>
-</html>`}</CodeBlock>
+</html>
+```
 
 For more details, see the [Laravel @production docs](https://laravel.com/docs/blade#the-production-directive).
diff --git a/content/integrations/nextjs.mdx b/content/integrations/nextjs.mdx
index 0f8db65..8c3a166 100644
--- a/content/integrations/nextjs.mdx
+++ b/content/integrations/nextjs.mdx
@@ -16,7 +16,8 @@ The best way to add Pulse to your Next.js application is using the built-in `nex
 
 Add the Pulse script to your root layout so it loads on every page.
 
-<CodeBlock filename="app/layout.tsx">{`import Script from 'next/script'
+```tsx filename="app/layout.tsx"
+import Script from 'next/script'
 
 export default function RootLayout({
   children,
@@ -36,13 +37,15 @@ export default function RootLayout({
       <body>{children}</body>
     </html>
   )
-}`}</CodeBlock>
+}
+```
 
 ## Method 2: Pages Router
 
 If you're using the Pages Router, add the script to your custom `_app.tsx`.
 
-<CodeBlock filename="pages/_app.tsx">{`import Script from 'next/script'
+```tsx filename="pages/_app.tsx"
+import Script from 'next/script'
 import type { AppProps } from 'next/app'
 
 export default function App({ Component, pageProps }: AppProps) {
@@ -57,7 +60,8 @@ export default function App({ Component, pageProps }: AppProps) {
       <Component {...pageProps} />
     </>
   )
-}`}</CodeBlock>
+}
+```
 
 ## Configuration options
 
diff --git a/content/integrations/nuxt.mdx b/content/integrations/nuxt.mdx
index 68701a2..34a0387 100644
--- a/content/integrations/nuxt.mdx
+++ b/content/integrations/nuxt.mdx
@@ -16,7 +16,8 @@ Configure Pulse analytics in your `nuxt.config` for a framework-native setup.
 
 Add the Pulse script via the `app.head` option in your Nuxt 3 config.
 
-<CodeBlock filename="nuxt.config.ts">{`export default defineNuxtConfig({
+```tsx filename="nuxt.config.ts"
+export default defineNuxtConfig({
   app: {
     head: {
       script: [
@@ -28,13 +29,15 @@ Add the Pulse script via the `app.head` option in your Nuxt 3 config.
       ],
     },
   },
-})`}</CodeBlock>
+})
+```
 
 ## Method 2: Nuxt 2
 
 In Nuxt 2, use the `head` property in your config.
 
-<CodeBlock filename="nuxt.config.js">{`export default {
+```jsx filename="nuxt.config.js"
+export default {
   head: {
     script: [
       {
@@ -44,6 +47,7 @@ In Nuxt 2, use the `head` property in your config.
       },
     ],
   },
-}`}</CodeBlock>
+}
+```
 
 For more details, see the [Nuxt head config docs](https://nuxt.com/docs/api/nuxt-config#head).
diff --git a/content/integrations/rails.mdx b/content/integrations/rails.mdx
index 6282942..edeac3d 100644
--- a/content/integrations/rails.mdx
+++ b/content/integrations/rails.mdx
@@ -16,7 +16,8 @@ Add the Pulse script to your application layout with a production environment gu
 
 Use an `if` guard to only load the script in production.
 
-<CodeBlock filename="app/views/layouts/application.html.erb">{`<!DOCTYPE html>
+```erb filename="app/views/layouts/application.html.erb"
+<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
@@ -37,6 +38,7 @@ Use an `if` guard to only load the script in production.
 <body>
   <%= yield %>
 </body>
-</html>`}</CodeBlock>
+</html>
+```
 
 For more details, see the [Rails layout docs](https://guides.rubyonrails.org/layouts_and_rendering.html).
diff --git a/content/integrations/react.mdx b/content/integrations/react.mdx
index fd8c566..cf25fc1 100644
--- a/content/integrations/react.mdx
+++ b/content/integrations/react.mdx
@@ -16,7 +16,8 @@ For standard React SPAs, add the script to your `index.html`.
 
 The simplest approach is to add the Pulse script directly to your HTML entry point.
 
-<CodeBlock filename="public/index.html">{`<!DOCTYPE html>
+```html filename="public/index.html"
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8" />
@@ -33,13 +34,15 @@ The simplest approach is to add the Pulse script directly to your HTML entry poi
 <body>
     <div id="root"></div>
 </body>
-</html>`}</CodeBlock>
+</html>
+```
 
 ## Method 2: Programmatic injection via useEffect
 
 If you prefer to inject the script programmatically (e.g. only in production), use a `useEffect` hook.
 
-<CodeBlock filename="src/App.tsx">{`import { useEffect } from 'react'
+```tsx filename="src/App.tsx"
+import { useEffect } from 'react'
 
 function App() {
   useEffect(() => {
@@ -53,4 +56,5 @@ function App() {
   }, [])
 
   return <div className="App"><h1>Hello World</h1></div>
-}`}</CodeBlock>
+}
+```
diff --git a/content/integrations/remix.mdx b/content/integrations/remix.mdx
index 9a5f56c..938548c 100644
--- a/content/integrations/remix.mdx
+++ b/content/integrations/remix.mdx
@@ -16,7 +16,8 @@ Add the Pulse script to your `app/root.tsx` so it's included on every route.
 
 The root route is the top-level layout in Remix. Add the Pulse script inside the `<head>` section.
 
-<CodeBlock filename="app/root.tsx">{`import {
+```tsx filename="app/root.tsx"
+import {
   Links,
   Meta,
   Outlet,
@@ -45,6 +46,7 @@ export default function App() {
       </body>
     </html>
   )
-}`}</CodeBlock>
+}
+```
 
 For more details, see the [Remix root docs](https://remix.run/docs/en/main/file-conventions/root).
diff --git a/content/integrations/script-tag.mdx b/content/integrations/script-tag.mdx
index 6fb4163..8b34e1a 100644
--- a/content/integrations/script-tag.mdx
+++ b/content/integrations/script-tag.mdx
@@ -16,14 +16,16 @@ Add Pulse to any website by pasting a single script tag into your HTML. This wor
 
 Add the following script tag inside the `<head>` section of your website:
 
-<CodeBlock filename="index.html">{`<head>
+```html filename="index.html"
+<head>
   <!-- ... other head elements ... -->
   <script
     defer
     src="https://pulse.ciphera.net/script.js"
     data-domain="your-site.com"
   ></script>
-</head>`}</CodeBlock>
+</head>
+```
 
 ## Configuration
 
diff --git a/content/integrations/shopify.mdx b/content/integrations/shopify.mdx
index 1e0defd..1f5327a 100644
--- a/content/integrations/shopify.mdx
+++ b/content/integrations/shopify.mdx
@@ -16,12 +16,14 @@ Add the Pulse script via the Shopify theme editor — no app needed.
 
 Go to **Online Store -> Themes -> Edit code** and open `layout/theme.liquid`. Add the Pulse script before the closing `</head>` tag.
 
-<CodeBlock filename="layout/theme.liquid">{`<!-- Add before </head> -->
+```liquid filename="layout/theme.liquid"
+<!-- Add before </head> -->
 <script
   defer
   data-domain="your-site.com"
   src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
+></script>
+```
 
 ## Method 2: Shopify Plus — Customer Events
 
diff --git a/content/integrations/squarespace.mdx b/content/integrations/squarespace.mdx
index 1229a86..f42eaeb 100644
--- a/content/integrations/squarespace.mdx
+++ b/content/integrations/squarespace.mdx
@@ -16,11 +16,13 @@ Use Squarespace's Code Injection feature to add the Pulse script.
 
 Go to **Settings -> Developer Tools -> Code Injection -> Header** and paste the Pulse script.
 
-<CodeBlock filename="Settings -> Code Injection -> Header">{`<script
+```html filename="Settings -> Code Injection -> Header"
+<script
   defer
   data-domain="your-site.com"
   src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
+></script>
+```
 
 **Note:** Code Injection requires a Business or Commerce plan.
 
diff --git a/content/integrations/svelte.mdx b/content/integrations/svelte.mdx
index 8f64611..3877ff3 100644
--- a/content/integrations/svelte.mdx
+++ b/content/integrations/svelte.mdx
@@ -16,7 +16,8 @@ Add the script to your `index.html` for Vite-based Svelte, or use `<svelte:head>
 
 For standard Svelte projects using Vite, add the Pulse script to your `index.html`.
 
-<CodeBlock filename="index.html">{`<!DOCTYPE html>
+```html filename="index.html"
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8" />
@@ -34,13 +35,15 @@ For standard Svelte projects using Vite, add the Pulse script to your `index.htm
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
 </body>
-</html>`}</CodeBlock>
+</html>
+```
 
 ## Method 2: SvelteKit
 
 In SvelteKit, use `<svelte:head>` in your root layout to add the script to every page.
 
-<CodeBlock filename="src/routes/+layout.svelte">{`<svelte:head>
+```svelte filename="src/routes/+layout.svelte"
+<svelte:head>
   <script
     defer
     data-domain="your-site.com"
@@ -48,6 +51,7 @@ In SvelteKit, use `<svelte:head>` in your root layout to add the script to every
   ></script>
 </svelte:head>
 
-<slot />`}</CodeBlock>
+<slot />
+```
 
 Alternatively, you can add the script directly to `src/app.html` in your SvelteKit project.
diff --git a/content/integrations/vue.mdx b/content/integrations/vue.mdx
index 2d3df51..fba88cc 100644
--- a/content/integrations/vue.mdx
+++ b/content/integrations/vue.mdx
@@ -16,7 +16,8 @@ Add the script to your `index.html` — works for both Vue CLI and Vite-based pr
 
 Both Vue CLI and Vite use an `index.html` as the entry point. Simply add the Pulse script inside the `<head>` tag.
 
-<CodeBlock filename="index.html">{`<!DOCTYPE html>
+```html filename="index.html"
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8" />
@@ -34,6 +35,7 @@ Both Vue CLI and Vite use an `index.html` as the entry point. Simply add the Pul
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
 </body>
-</html>`}</CodeBlock>
+</html>
+```
 
 Looking for Nuxt? Check the dedicated [Nuxt guide](/integrations/nuxt).
diff --git a/content/integrations/webflow.mdx b/content/integrations/webflow.mdx
index 91239bf..6409569 100644
--- a/content/integrations/webflow.mdx
+++ b/content/integrations/webflow.mdx
@@ -16,11 +16,13 @@ Paste the Pulse script into your Webflow project's custom code settings.
 
 Go to **Project Settings -> Custom Code -> Head Code** and paste the Pulse script.
 
-<CodeBlock filename="Project Settings -> Head Code">{`<script
+```html filename="Project Settings -> Head Code"
+<script
   defer
   data-domain="your-site.com"
   src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
+></script>
+```
 
 **Note:** Custom code requires a paid Webflow site plan. The script won't appear in the Designer preview — publish your site to see it in action.
 
diff --git a/content/integrations/wix.mdx b/content/integrations/wix.mdx
index 1ab7977..15a01ed 100644
--- a/content/integrations/wix.mdx
+++ b/content/integrations/wix.mdx
@@ -16,11 +16,13 @@ Use Wix's Custom Code settings to add the Pulse script.
 
 Go to **Settings -> Custom Code -> Add Custom Code**. Set the placement to **Head** and apply it to **All pages**.
 
-<CodeBlock filename="Custom Code Snippet">{`<script
+```html filename="Custom Code Snippet"
+<script
   defer
   data-domain="your-site.com"
   src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
+></script>
+```
 
 **Note:** Custom Code requires a Wix Premium plan.
 
diff --git a/content/integrations/wordpress.mdx b/content/integrations/wordpress.mdx
index 1223536..d4043f2 100644
--- a/content/integrations/wordpress.mdx
+++ b/content/integrations/wordpress.mdx
@@ -16,11 +16,13 @@ Add the Pulse script via a plugin or by editing your theme's header file directl
 
 The easiest way is to use the [WPCode (Insert Headers and Footers)](https://wordpress.org/plugins/insert-headers-and-footers/) plugin. Install it, then go to **Code Snippets -> Header & Footer** and paste the Pulse script into the Header section.
 
-<CodeBlock filename="Header Script">{`<script
+```html filename="Header Script"
+<script
   defer
   data-domain="your-site.com"
   src="https://pulse.ciphera.net/script.js"
-></script>`}</CodeBlock>
+></script>
+```
 
 ## Method 2: Edit header.php directly
 
diff --git a/package-lock.json b/package-lock.json
index 11d2877..ed21384 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,6 +47,7 @@
         "react-markdown": "^10.1.0",
         "react-use-measure": "^2.1.7",
         "recharts": "^2.15.0",
+        "rehype-mdx-code-props": "^3.0.1",
         "remark-gfm": "^4.0.1",
         "sonner": "^2.0.7",
         "svg-dotted-map": "^2.0.1",
@@ -9918,6 +9919,18 @@
         "node": ">= 12"
       }
     },
+    "node_modules/estree-util-value-to-estree": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/estree-util-value-to-estree/-/estree-util-value-to-estree-3.5.0.tgz",
+      "integrity": "sha512-aMV56R27Gv3QmfmF1MY12GWkGzzeAezAX+UplqHVASfjc9wNzI/X6hC0S9oxq61WT4aQesLGslWP9tKk6ghRZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/remcohaszing"
+      }
+    },
     "node_modules/estree-util-visit": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/estree-util-visit/-/estree-util-visit-2.0.0.tgz",
@@ -10616,6 +10629,23 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-properties-to-mdx-jsx-attributes": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/hast-util-properties-to-mdx-jsx-attributes/-/hast-util-properties-to-mdx-jsx-attributes-1.1.1.tgz",
+      "integrity": "sha512-MMrAoGgvhYULEqMB/r6AlcVz1D3Cyml/9cMB2NIqZsIsEJ+XEXPMqH0gjba8dVs9AnQUYvPReAS+OIYx4ip+Ug==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "estree-util-value-to-estree": "^3.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "property-information": "^7.0.0",
+        "style-to-js": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/remcohaszing"
+      }
+    },
     "node_modules/hast-util-to-estree": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/hast-util-to-estree/-/hast-util-to-estree-3.1.3.tgz",
@@ -14383,6 +14413,24 @@
         "regjsparser": "bin/parser"
       }
     },
+    "node_modules/rehype-mdx-code-props": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/rehype-mdx-code-props/-/rehype-mdx-code-props-3.0.1.tgz",
+      "integrity": "sha512-BWWKn0N6r7/qd7lbLgv5J8of7imz1l1PyCNoY7BH0AOR9JdJlQIfA9cKqTZVEb2h2GPKh473qrBajF0i01fq3A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-properties-to-mdx-jsx-attributes": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-mdx": "^3.0.0",
+        "micromark-extension-mdxjs": "^3.0.0",
+        "unified": "^11.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/remcohaszing"
+      }
+    },
     "node_modules/rehype-recma": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/rehype-recma/-/rehype-recma-1.0.0.tgz",
diff --git a/package.json b/package.json
index c3ce286..0260841 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "react-markdown": "^10.1.0",
     "react-use-measure": "^2.1.7",
     "recharts": "^2.15.0",
+    "rehype-mdx-code-props": "^3.0.1",
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
     "svg-dotted-map": "^2.0.1",
-- 
2.49.1


From b1ed7518b1d9364d5a8e59c194d7d4170a32bc49 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 29 Mar 2026 01:07:21 +0100
Subject: [PATCH 427/428] fix: code block filename not showing, consistent code
 block styling

---
 app/integrations/[slug]/page.tsx | 19 ++++++++-----------
 components/IntegrationGuide.tsx  |  4 ++--
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/app/integrations/[slug]/page.tsx b/app/integrations/[slug]/page.tsx
index 62dc7e8..822493d 100644
--- a/app/integrations/[slug]/page.tsx
+++ b/app/integrations/[slug]/page.tsx
@@ -17,26 +17,23 @@ import { getIntegrationGuide } from '@/lib/integration-content'
 import { IntegrationGuide } from '@/components/IntegrationGuide'
 
 // * ─── MDX Components ────────────────────────────────────────────
-// Maps markdown code fences to CodeBlock. The `filename` meta is passed
-// as a prop via rehype-mdx-code-props (e.g. ```tsx filename="app.tsx").
+// rehype-mdx-code-props passes meta (e.g. filename="app.tsx") as props
+// on the <pre> element. We intercept <pre> to extract filename and render CodeBlock.
 const mdxComponents = {
-  pre: ({ children }: { children: React.ReactNode }) => children,
-  code: ({ children, className, filename, ...props }: {
-    children: React.ReactNode
-    className?: string
+  pre: ({ children, filename, ...props }: {
+    children: React.ReactElement
     filename?: string
     [key: string]: unknown
   }) => {
-    // Block code (inside <pre>) has className like "language-tsx"
-    if (className?.startsWith('language-') || filename) {
+    const code = children?.props?.children
+    if (typeof code === 'string') {
       return (
         <CodeBlock filename={filename || 'code'}>
-          {String(children).replace(/\n$/, '')}
+          {code.replace(/\n$/, '')}
         </CodeBlock>
       )
     }
-    // Inline code
-    return <code className={className} {...props}>{children}</code>
+    return <pre {...props}>{children}</pre>
   },
 }
 
diff --git a/components/IntegrationGuide.tsx b/components/IntegrationGuide.tsx
index 22f0f5c..516e49f 100644
--- a/components/IntegrationGuide.tsx
+++ b/components/IntegrationGuide.tsx
@@ -7,7 +7,7 @@
  */
 
 import Link from 'next/link'
-import { ArrowLeftIcon, ArrowRightIcon } from '@ciphera-net/ui'
+import { ArrowLeftIcon, ArrowRightIcon, CodeBlock } from '@ciphera-net/ui'
 import { type ReactNode } from 'react'
 import { type Integration, getIntegration, categoryLabels } from '@/lib/integrations'
 
@@ -92,7 +92,7 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
             Detect rage clicks and dead clicks by adding the frustration tracking
             add-on after the core script:
           </p>
-          <pre><code>{`<script defer src="https://pulse.ciphera.net/script.frustration.js"></script>`}</code></pre>
+          <CodeBlock filename="index.html">{`<script defer src="https://pulse.ciphera.net/script.frustration.js"></script>`}</CodeBlock>
           <p>
             No extra configuration needed. Add <code>data-no-rage</code> or{' '}
             <code>data-no-dead</code> to disable individual signals.
-- 
2.49.1


From 6c73fd1dbc6b74c12a78efe9af2aa6d0c57ab8dd Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 29 Mar 2026 01:09:30 +0100
Subject: [PATCH 428/428] fix: type error on pre component children.props
 access

---
 app/integrations/[slug]/page.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/app/integrations/[slug]/page.tsx b/app/integrations/[slug]/page.tsx
index 822493d..99efefc 100644
--- a/app/integrations/[slug]/page.tsx
+++ b/app/integrations/[slug]/page.tsx
@@ -19,12 +19,9 @@ import { IntegrationGuide } from '@/components/IntegrationGuide'
 // * ─── MDX Components ────────────────────────────────────────────
 // rehype-mdx-code-props passes meta (e.g. filename="app.tsx") as props
 // on the <pre> element. We intercept <pre> to extract filename and render CodeBlock.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const mdxComponents = {
-  pre: ({ children, filename, ...props }: {
-    children: React.ReactElement
-    filename?: string
-    [key: string]: unknown
-  }) => {
+  pre: ({ children, filename, ...props }: any) => {
     const code = children?.props?.children
     if (typeof code === 'string') {
       return (
-- 
2.49.1