Can I vibecode Hotjar?

You are building a production-ready software product named “Warmtrail”, a deliberately focused alternative to Hotjar. Build a complete, usable vertical slice—not a landing page, static mockup, or disconnected collection of components.

WORKING AGREEMENT
Before writing implementation code, produce a short technical plan that names the routes or pages, server actions or endpoints, data tables, important state transitions, authorization boundaries, background jobs, and external adapters. Resolve contradictions in favor of the narrow audience and non-goals below. Prefer a small, legible architecture over speculative abstraction, but do not omit persistence, validation, error handling, or tests.

PRODUCT BRIEF
Primary user: a product team improving one public marketing or onboarding flow.
Primary outcome: understand clicks, scroll depth, and obvious friction while protecting visitor privacy.
Product principle: optimize the exact workflow below instead of copying the full breadth of Hotjar. A first-time user should understand what to do from the interface itself, without a tour or documentation.

END-TO-END USER JOURNEYS
Implement all of these flows through the real interface and persistent data layer:
1. The product owner registers a site, copies the first-party script, sets a sampling rate and excluded routes, then verifies a test pageview from the installation screen.
2. A sampled visitor moves through the public flow while the script records page transitions, normalized clicks, scroll buckets, and structural interaction events without capturing entered content.
3. The product owner filters a page by device and date, studies aggregate click and scroll maps, opens a structural session timeline, and identifies repeated rage clicks on one control.

SCREENS AND INFORMATION ARCHITECTURE
Build these as coherent responsive views. Each screen must specify its primary action, secondary actions, visible status, validation feedback, empty state, loading or pending state, success confirmation, and recoverable failure state.
1. Site setup: script snippet, allowed origins, sampling percentage, excluded route patterns, installation status, privacy checklist, and send-test-event action.
2. Overview: sampled sessions, pageviews, top pages, device mix, friction-event counts, date comparison, and clear sampling context beside totals.
3. Page insights: responsive page outline, click-density overlay, scroll-depth distribution, device selector, minimum-sample warning, and element-level click ranking.
4. Session and friction explorer: privacy-safe event timeline, navigation and viewport changes, dead or rage clicks, filters, retained-data notice, and no video playback.

CORE CAPABILITIES
1. small first-party event script with explicit sampling
2. page-level click coordinate aggregation
3. scroll-depth buckets and rage-click detection
4. session timeline using structural events rather than video
5. dashboard filters by page, device class, and date

DETAILED BEHAVIOR AND BUSINESS RULES
Treat these as server-enforced product requirements, not interface suggestions:
1. The collector must reject unapproved origins and excluded routes, apply explicit sampling before event collection, and cap events per session and request.
2. Never collect form values, keystrokes, selected text, DOM text, accessibility labels containing user data, or events originating from password and contenteditable fields.
3. Normalize click coordinates relative to the target element and viewport bucket so events from different screen sizes can be aggregated without storing a page screenshot.
4. Classify rage clicks from a documented time, distance, and count threshold; discard full IP addresses after coarse request handling and expire raw structural events on schedule.

DATA MODEL AND LIFECYCLE
Design a small relational schema centered on Site, Session, PageView, InteractionEvent, HeatmapBucket. Before implementing it, document:
1. Each table’s purpose, primary key, ownership or tenant ...