[Release] Funnels, Journeys, Behavior, Search and CDN rebuilds + filter builder + settings polish

CHANGELOG.md

@@ -27,6 +27,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ### Improved
 
+- **The Behavior page now tells you where the frustration is.** Click any row in "Frustration by page" to focus the whole page on it — the rage click and dead click tables instantly narrow to that page's elements, and the filter lives in the URL so you can share a link straight to "here's what's broken on /pricing". The old donut chart is replaced by a real day-by-day trend of rage and dead clicks, and scroll depth is now four clean bars instead of a radar chart. Stat changes versus the previous period only appear when there's enough history to compare against, so you'll no longer see a meaningless "-100%" on a brand-new site.
+- **The Search page is now the full Search Console experience.** Alongside top queries and pages you can now browse clicks by country, by device, and — most usefully — an Opportunities view: queries ranking just off the first page where a better title or snippet could win real clicks, with the potential shown next to each. Expanding a query now also charts how its ranking position moved over the period. Clicks and impressions finally get their own scales on the traffic chart, so clicks no longer flatline against the impression counts. A "new queries" chip lists exactly which searches appeared this period, the page shows when your data last synced, and the view, page number, and expanded row all live in the URL.
+- **The CDN page now shows what your cache is actually doing.** The bandwidth chart splits traffic into "served from cache" versus "fetched from your origin", with the cache hit rate for each day in the tooltip — so you can see your CDN earning its keep (or not). Requests get the same cached/uncached split, a new chart tracks your origin's response time over the period, error bars now use honest colors (redirects are no longer painted as errors), and the geographic breakdown is a ranked list of datacenters with their real share of traffic.
+- **Funnels got a full page of their own.** Every funnel now opens as a real page with its own link you can share or bookmark. The list shows compact summary rows — the actual pages and events in each funnel, the conversion rate with a comparison to the previous period, and a small trend line — instead of expanding accordions. The detail page has a stats band (conversion, visitors, converted, biggest drop-off, median time), a visual funnel canvas where each step is a column filled to its conversion level with connecting bands between steps, and everything — date range, filters, selected step — lives in the URL so a refresh or a shared link lands exactly where you were.
+- **Funnel editing no longer resets your conversion window.** Editing a funnel used to silently rewrite its conversion window to 30 days no matter what you had configured. The create/edit dialog now has a real window control (with 24h, 72h, 7d, 14d and 30d presets) that saves exactly what it shows.
+- **Funnel steps suggest your real pages and events.** When building a funnel, the path field now suggests your most-visited pages and the event field suggests your tracked events — with visit counts — so you don't have to remember exact paths. Free text still works.
+- **Journeys controls got out of the data's way.** The oversized control block is now one compact row — steppers for depth and paths, a searchable entry-point picker, and a Columns/Flow switch. Connections between steps are always visible as subtle ribbons, and hovering any page lights up its full path through the site.
+- **Pin and share a journey path.** Clicking a page in either journeys view pins it as a "lens" — the whole chain through that page highlights, an exit card shows where people left, and the selection lives in the URL so you can share exactly what you're looking at. From a pinned lens you can create a funnel of that path in one click, and funnel steps link back to journeys starting from that page.
+- **No more flashing while journeys and funnels load.** Changing depth, entry point, or date range used to swap the entire page to a loading skeleton on every tweak. Now the data stays visible and morphs to the new values, with a small "Updating…" chip when a fetch takes longer than usual. Failed loads show a clear error with a Retry button instead of pretending you have no data, and an entry filter with no matches says so instead of showing the generic empty state.
 - **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.

app/about/page.tsx

@@ -3,7 +3,12 @@
 import { motion } from 'framer-motion'
 import { CheckCircleIcon, XIcon } from '@ciphera-net/facet'
 
-function ComparisonTable({ title, competitors }: { title: string, competitors: { name: string, isPulse: boolean, features: Record<string, boolean | string> }[] }) {
+// * Boolean cells render ✓/✗ and assume true = good. Where the raw boolean would invert
+// * sentiment (e.g. "Cookie Banner Required" — false is the win), use { text, good } so
+// * the colour follows the meaning, not the boolean.
+type FeatureValue = boolean | string | { text: string; good: boolean }
+
+function ComparisonTable({ title, competitors }: { title: string, competitors: { name: string, isPulse: boolean, features: Record<string, FeatureValue> }[] }) {
   const allFeatures = [
     "Cookie Banner Required",
     "GDPR Compliant",
@@ -36,7 +41,9 @@ function ComparisonTable({ title, competitors }: { title: string, competitors: {
                   const val = comp.features[feature]
                   return (
                     <td key={comp.name} className="p-4 sm:p-6 text-sm sm:text-base">
-                      {val === true ? (
+                      {typeof val === 'object' ? (
+                        <span className={`font-medium ${val.good ? 'text-green-500' : 'text-red-500'}`}>{val.text}</span>
+                      ) : val === true ? (
                         <CheckCircleIcon className="w-5 h-5 text-green-500" />
                       ) : val === false ? (
                         <XIcon className="w-5 h-5 text-red-500" />
@@ -103,7 +110,7 @@ export default function AboutPage() {
               name: "Pulse",
               isPulse: true,
               features: {
-                "Cookie Banner Required": false,
+                "Cookie Banner Required": { text: "None", good: true },
                 "GDPR Compliant": true,
                 "Script Size": "< 1 KB",
                 "Data Ownership": "Yours",
@@ -115,7 +122,7 @@ export default function AboutPage() {
               name: "Google Analytics 4",
               isPulse: false,
               features: {
-                "Cookie Banner Required": true,
+                "Cookie Banner Required": { text: "Required", good: false },
                 "GDPR Compliant": "Complex",
                 "Script Size": "45 KB+",
                 "Data Ownership": "Google's",
@@ -134,7 +141,7 @@ export default function AboutPage() {
               name: "Pulse",
               isPulse: true,
               features: {
-                "Cookie Banner Required": false,
+                "Cookie Banner Required": { text: "None", good: true },
                 "GDPR Compliant": true,
                 "Script Size": "< 1 KB",
                 "Data Ownership": "Yours",
@@ -146,7 +153,7 @@ export default function AboutPage() {
               name: "Plausible",
               isPulse: false,
               features: {
-                "Cookie Banner Required": false,
+                "Cookie Banner Required": { text: "None", good: true },
                 "GDPR Compliant": true,
                 "Script Size": "< 1 KB",
                 "Data Ownership": "Yours",

app/admin/orgs/[id]/page.tsx

@@ -136,14 +136,14 @@ export default function AdminOrgDetailPage() {
 
               <span className="text-neutral-500">Period End:</span>
               <span className="font-medium">
-                {org.current_period_end ? formatDateTime(new Date(org.current_period_end)) : '-'}
+                {org.current_period_end ? formatDateTime(new Date(org.current_period_end)) : '—'}
               </span>
 
               <span className="text-neutral-500">Customer ID:</span>
-              <span className="font-mono text-xs">{org.billing_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>
+              <span className="font-mono text-xs">{org.billing_subscription_id || '—'}</span>
           </div>
         </div>
 
@@ -207,21 +207,21 @@ export default function AdminOrgDetailPage() {
                   <button
                     type="button"
                     onClick={() => setPeriodEnd(addMonths(new Date(), 1).toISOString().slice(0, 16))}
-                    className="text-xs text-blue-500 hover:underline"
+                    className="text-xs text-brand-orange hover:underline"
                   >
                     +1 Month
                   </button>
                   <button
                     type="button"
                     onClick={() => setPeriodEnd(addYears(new Date(), 1).toISOString().slice(0, 16))}
-                    className="text-xs text-blue-500 hover:underline"
+                    className="text-xs text-brand-orange hover:underline"
                   >
                     +1 Year
                   </button>
                   <button
                     type="button"
                     onClick={() => setPeriodEnd(addYears(new Date(), 100).toISOString().slice(0, 16))}
-                    className="text-xs text-blue-500 hover:underline"
+                    className="text-xs text-brand-orange hover:underline"
                   >
                     Forever
                   </button>

app/admin/orgs/page.tsx

@@ -82,7 +82,7 @@ export default function AdminOrgsPage() {
                       </span>
                     </td>
                     <td className="px-4 py-3 text-neutral-300">
-                      {org.subscription_status || '-'}
+                      {org.subscription_status || '—'}
                     </td>
                     <td className="px-4 py-3 text-neutral-300">
                       {new Intl.NumberFormat().format(org.pageview_limit)}

app/admin/page.tsx

@@ -7,7 +7,7 @@ export default function AdminDashboard() {
     <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
       <Link
         href="/admin/orgs"
-        className="block bg-card border border-border transition-transform hover:scale-[1.02] rounded-none p-6 ease-apple"
+        className="group block bg-card border border-border transition-all hover:scale-[1.02] hover:border-neutral-600 rounded-none p-6 ease-apple"
       >
         <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>
@@ -17,7 +17,7 @@ export default function AdminDashboard() {
       </Link>
       <Link
         href="/admin/quarantine"
-        className="block bg-card border border-border transition-transform hover:scale-[1.02] rounded-none p-6 ease-apple"
+        className="group block bg-card border border-border transition-all hover:scale-[1.02] hover:border-neutral-600 rounded-none p-6 ease-apple"
       >
         <h3 className="text-lg font-semibold text-white">Quarantine & Reputation</h3>
         <p className="text-sm text-neutral-400 mt-1">Monitor quarantined traffic and domain reputation</p>

app/admin/quarantine/page.tsx

@@ -275,7 +275,7 @@ function EventsTab() {
                       {ev.path}
                     </td>
                     <td className="px-4 py-3 text-xs text-neutral-400 max-w-[180px] truncate">
-                      {ev.referrer || '-'}
+                      {ev.referrer || '—'}
                     </td>
                     <td className="px-4 py-3">
                       <Badge label={REASON_LABELS[ev.detection_reason] || ev.detection_reason} colorClass={REASON_COLORS[ev.detection_reason]} />
@@ -568,7 +568,7 @@ export default function AdminQuarantinePage() {
             onClick={() => setTab(t.key)}
             className={`px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px ${
               tab === t.key
-                ? 'border-white text-white'
+                ? 'border-brand-orange text-white'
                 : 'border-transparent text-neutral-400 hover:text-neutral-200'
             } ease-apple`}
           >

app/api/favicon/route.ts

@@ -0,0 +1,60 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+/**
+ * Same-origin favicon proxy.
+ *
+ * Browsers previously loaded favicons straight from Google's s2 service,
+ * which sent every referrer/page domain — plus the user's IP — to Google
+ * from inside the authenticated app. The upstream fetch now happens
+ * server-side, so the only party that ever contacts Google is our origin
+ * on a CDN cache miss; the user's browser only talks to Pulse. CSP has
+ * dropped the google/gstatic allowances, so a regression fails loudly.
+ */
+
+const UPSTREAM = 'https://www.google.com/s2/favicons'
+
+// * Sizes actually used by the app (see FAVICON_SERVICE_URL consumers).
+const ALLOWED_SIZES = new Set(['16', '32', '64', '128'])
+
+// * Bare hostname only — no scheme, port, path, or IP-literal shapes beyond
+// * dotted labels. Anything else 400s and the <img> falls back to its icon.
+const DOMAIN_RE = /^(?=.{4,253}$)[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?(\.[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?)+$/
+
+export async function GET(request: NextRequest) {
+  const domain = request.nextUrl.searchParams.get('domain')?.trim().toLowerCase() ?? ''
+  const sz = request.nextUrl.searchParams.get('sz') ?? '32'
+
+  if (!DOMAIN_RE.test(domain) || !ALLOWED_SIZES.has(sz)) {
+    return new NextResponse(null, { status: 400 })
+  }
+
+  try {
+    const upstream = await fetch(`${UPSTREAM}?domain=${encodeURIComponent(domain)}&sz=${sz}`, {
+      signal: AbortSignal.timeout(4000),
+      // * The CDN caches via the response headers below; keep Next's data
+      // * cache out of the way so misses don't accumulate on disk.
+      cache: 'no-store',
+    })
+    const contentType = upstream.headers.get('content-type') ?? ''
+    if (!upstream.ok || !contentType.startsWith('image/')) {
+      return new NextResponse(null, {
+        status: 404,
+        headers: { 'Cache-Control': 'public, max-age=3600' },
+      })
+    }
+    const body = await upstream.arrayBuffer()
+    return new NextResponse(body, {
+      headers: {
+        'Content-Type': contentType,
+        'Cache-Control': 'public, max-age=86400, s-maxage=604800, stale-while-revalidate=604800',
+        'X-Content-Type-Options': 'nosniff',
+      },
+    })
+  } catch {
+    // * Upstream unreachable/timed out — short-cache the miss to absorb storms.
+    return new NextResponse(null, {
+      status: 404,
+      headers: { 'Cache-Control': 'public, max-age=300' },
+    })
+  }
+}

app/auth/callback/page.tsx

@@ -76,7 +76,12 @@ function AuthCallbackContent() {
     if (processedRef.current && !isRetrying) return
 
     const code = searchParams.get('code')
-    if (!code) return
+    if (!code) {
+      // * No code param (stale link, prefetch, or a direct visit) — without an
+      // * error the loading overlay would spin forever.
+      setError('This sign-in link is missing its code — it may have expired. Please log in again.')
+      return
+    }
 
     const state = searchParams.get('state')
     const storedState = localStorage.getItem('oauth_state')