sentiero 1.0.0.alpha1

data/lib/sentiero/web/templates/errors_index.html.erb

@@ -0,0 +1,149 @@
+<h1 class="page-title mb-1">Errors</h1>
+<%= view.render_partial("_tabs.html.erb", tabs: [
+  {label: "Server exceptions", href: "#{view.base_path}/issues", active: view.source == "server"},
+  {label: "Client JS errors", href: "#{view.base_path}/issues?source=client", active: view.source == "client"}
+]) %>
+
+<% if view.source == "client" -%>
+  <%= view.render_partial("_truncation_warning.html.erb", was_truncated: view.was_truncated, noun: "entries") %>
+
+  <%= view.render_partial("_errors_client_filter.html.erb", search: view.search, sort_by: view.sort_by, per_page: view.per_page,
+    since_param: view.since_param, until_param: view.until_param) %>
+
+  <% if view.groups.empty? -%>
+    <div class="card"><div class="text-center py-10 px-6 text-gray-400 text-xs">
+      <% if !view.search.empty? -%>
+        No results match your filters.
+        <a href="<%= view.h(view.base_path) %>/issues?source=client" class="text-blue-600 hover:text-blue-800">Clear filters</a>
+      <% else -%>
+        No client JS errors captured yet.
+        <%= view.render_partial("_sibling_tab_hint.html.erb",
+          sibling: view.sibling, noun: "server exception", href: "#{view.base_path}/issues") %>
+      <% end -%>
+    </div></div>
+  <% else -%>
+    <div class="table-wrap">
+      <table class="data-table">
+        <thead><tr><th>Error</th><th class="w-24">Browser</th><th class="w-20">Count</th><th class="w-32">Last seen</th></tr></thead>
+        <tbody>
+          <% view.groups.each do |group| -%>
+            <tr>
+              <td>
+                <a href="<%= view.h(view.base_path) %>/issues/client/<%= view.h(group[:id]) %>" class="block font-medium text-blue-600 hover:text-blue-800 break-words"><%= view.h(group[:message]) %></a>
+                <span class="block text-[11px] text-gray-400 mt-0.5">
+                  <% if group[:source] -%>
+                    <span class="font-mono"><%= view.h(group[:source]) %><%= group[:line] ? ":#{group[:line]}" : "" %></span>
+                  <% else -%>Unknown source<% end -%>
+                  · <%= group[:count] %> occurrence<%= group[:count] == 1 ? "" : "s" %>
+                </span>
+              </td>
+              <td class="text-xs text-gray-600">
+                <% browsers = group[:browsers] || {} -%>
+                <% dominant = browsers.max_by { |_browser, count| count } -%>
+                <% if dominant -%>
+                  <span data-dominant-browser="<%= view.h(dominant.first) %>"><%= view.h(dominant.first) %></span>
+                  <% if browsers.size > 1 -%>
+                    <span class="text-gray-400" data-browser-others="<%= browsers.size - 1 %>">+<%= browsers.size - 1 %></span>
+                  <% end -%>
+                <% else -%>
+                  <span class="text-gray-400">&mdash;</span>
+                <% end -%>
+              </td>
+              <td><span class="badge badge-danger tabular-nums"><%= group[:count] %>&times;</span></td>
+              <td class="text-gray-400 text-[10px] tabular-nums">
+                <%= group[:last_seen_at] ? Time.at(group[:last_seen_at].to_f / 1000).utc.strftime("%b %d, %H:%M") : "—" %>
+              </td>
+            </tr>
+          <% end -%>
+        </tbody>
+      </table>
+    </div>
+
+    <%= view.render_partial("_pagination.html.erb",
+      base_href: "#{view.base_path}/issues", page: view.page, has_next: view.has_next,
+      params: {"source" => "client", "search" => view.search, "sort_by" => view.sort_by,
+               "since" => view.since_param, "until" => view.until_param, "per_page" => view.per_page.to_s}) %>
+  <% end -%>
+<% else -%>
+  <%= view.render_partial("_errors_server_filter.html.erb", search: view.search, status: view.status, sort_by: view.sort_by, per_page: view.per_page,
+    since_param: view.since_param, until_param: view.until_param) %>
+
+  <% if view.problems.empty? -%>
+    <div class="card"><div class="text-center py-10 px-6 text-gray-400 text-xs">
+      <% if !view.search.empty? || !view.status.empty? || !view.since_param.empty? || !view.until_param.empty? -%>
+        No results match your filters.
+        <a href="<%= view.h(view.base_path) %>/issues" class="text-blue-600 hover:text-blue-800">Clear filters</a>
+      <% else -%>
+        No problems recorded yet.
+        <%= view.render_partial("_sibling_tab_hint.html.erb",
+          sibling: view.sibling, noun: "client JS error", href: "#{view.base_path}/issues?source=client") %>
+      <% end -%>
+    </div></div>
+  <% else -%>
+    <div class="table-wrap">
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th>Title</th>
+            <th>Project</th>
+            <th>Count</th>
+            <th>Status</th>
+            <th>First Seen</th>
+            <th>Last Seen</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <% view.problems.each do |p| -%>
+            <tr>
+              <td>
+                <a href="<%= view.h(view.base_path) %>/issues/<%= view.h(p[:id]) %>" class="font-medium text-blue-600 hover:text-blue-800">
+                  <span class="text-gray-500 text-xs mr-1"><%= view.h(p[:exception_class]) %></span>
+                  <%= view.h(p[:message].to_s[0, 120]) %>
+                </a>
+                <% if view.new_since && p[:first_seen] && p[:first_seen] >= view.new_since -%>
+                  <span class="badge badge-info">new</span>
+                <% end -%>
+              </td>
+              <td class="text-gray-500 text-xs"><%= view.h(p[:project].to_s) %></td>
+              <td>
+                <span class="badge badge-neutral tabular-nums"><%= p[:count] %></span>
+              </td>
+              <td>
+                <% case p[:status]
+                   when "resolved" -%>
+                  <span class="badge badge-success">resolved</span>
+                <% when "ignored" -%>
+                  <span class="badge badge-neutral">ignored</span>
+                <% else -%>
+                  <span class="badge badge-danger">open</span>
+                <% end -%>
+              </td>
+              <td class="text-gray-400 text-[10px]"><%= p[:first_seen] ? Time.at(p[:first_seen]).utc.strftime("%b %d, %H:%M") : "N/A" %></td>
+              <td class="text-gray-400 text-[10px]"><%= p[:last_seen] ? Time.at(p[:last_seen]).utc.strftime("%b %d, %H:%M") : "N/A" %></td>
+              <td class="text-right">
+                <form method="post" action="<%= view.h(view.base_path) %>/issues/<%= view.h(p[:id]) %>/status" class="inline-flex gap-1">
+                  <input type="hidden" name="csrf_token" value="<%= view.h(view.csrf_token) %>">
+                  <% unless p[:status] == "resolved" -%>
+                    <button type="submit" name="status" value="resolved" class="btn btn-sm btn-primary">Resolve</button>
+                  <% end -%>
+                  <% unless p[:status] == "ignored" -%>
+                    <button type="submit" name="status" value="ignored" class="btn btn-sm btn-secondary">Ignore</button>
+                  <% end -%>
+                  <% unless p[:status] == "open" -%>
+                    <button type="submit" name="status" value="open" class="btn btn-sm btn-secondary">Reopen</button>
+                  <% end -%>
+                </form>
+              </td>
+            </tr>
+          <% end -%>
+        </tbody>
+      </table>
+    </div>
+
+    <%= view.render_partial("_pagination.html.erb",
+      base_href: "#{view.base_path}/issues", page: view.page, has_next: view.has_next,
+      params: {"search" => view.search, "status" => view.status, "sort_by" => view.sort_by,
+               "since" => view.since_param, "until" => view.until_param, "per_page" => view.per_page.to_s}) %>
+  <% end -%>
+<% end -%>

data/lib/sentiero/web/templates/event_show.html.erb

@@ -0,0 +1,52 @@
+<div class="card mb-3">
+  <div class="flex items-center gap-2 px-4 py-2.5">
+    <a href="<%= view.h(view.base_path) %>/custom-events" class="btn btn-sm btn-secondary shrink-0">&larr; Back</a>
+    <div class="w-px h-4 bg-gray-200 shrink-0"></div>
+    <span class="badge badge-neutral shrink-0"><%= view.h(view.event["name"].to_s) %></span>
+    <% case view.event["level"]
+       when "error" -%>
+      <span class="badge badge-danger shrink-0"><%= view.h(view.event["level"].to_s) %></span>
+    <% when "warn" -%>
+      <span class="badge badge-warning shrink-0"><%= view.h(view.event["level"].to_s) %></span>
+    <% when "info" -%>
+      <span class="badge badge-info shrink-0"><%= view.h(view.event["level"].to_s) %></span>
+    <% else -%>
+      <span class="badge badge-neutral shrink-0"><%= view.h(view.event["level"].to_s) %></span>
+    <% end -%>
+  </div>
+</div>
+
+<div class="card mb-3">
+  <div class="card-body">
+    <h5 class="text-sm font-semibold text-gray-800 mb-2"><%= view.h(view.event["name"].to_s) %></h5>
+    <div class="grid grid-cols-[100px_1fr] gap-x-4 gap-y-2 mt-3">
+      <div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider pt-0.5">Project</div>
+      <div class="text-xs text-gray-600"><%= view.h(view.event["project"].to_s) %></div>
+
+      <div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider pt-0.5">Level</div>
+      <div class="text-xs text-gray-600"><%= view.h(view.event["level"].to_s) %></div>
+
+      <div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider pt-0.5">Time</div>
+      <div class="text-xs text-gray-600"><%= view.event["timestamp"] ? Time.at(view.event["timestamp"].to_f).utc.strftime("%b %d, %Y %H:%M:%S UTC") : "N/A" %></div>
+
+      <div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider pt-0.5">Event ID</div>
+      <div class="text-xs text-gray-600 font-mono"><%= view.h(view.event["id"].to_s) %></div>
+
+      <% if view.event["session_id"] && !view.event["session_id"].to_s.empty? -%>
+        <div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider pt-0.5">Session</div>
+        <div class="text-xs text-gray-600">
+          <a href="<%= view.h(view.base_path) %>/sessions/<%= view.h(view.event["session_id"]) %>" class="text-blue-600 hover:text-blue-800 font-mono"><%= view.h(view.event["session_id"].to_s) %></a>
+        </div>
+      <% end -%>
+    </div>
+  </div>
+</div>
+
+<% if view.event["payload"] -%>
+<div class="card">
+  <div class="card-body">
+    <h6 class="text-xs font-semibold text-gray-800 mb-3 uppercase tracking-wider">Payload</h6>
+    <pre class="text-[11px] text-gray-600 bg-gray-50 rounded p-3 overflow-x-auto whitespace-pre-wrap font-mono"><%= view.h(JSON.pretty_generate(view.event["payload"])) %></pre>
+  </div>
+</div>
+<% end -%>

data/lib/sentiero/web/templates/events_index.html.erb

@@ -0,0 +1,177 @@
+<h1 class="page-title mb-1">Events</h1>
+<%= view.render_partial("_tabs.html.erb", tabs: [
+  {label: "Server events", href: "#{view.base_path}/custom-events", active: view.source != "browser"},
+  {label: "Browser events", href: "#{view.base_path}/custom-events?source=browser", active: view.source == "browser"}
+]) %>
+
+<% if view.source == "browser" -%>
+  <%= view.render_partial("_truncation_warning.html.erb", was_truncated: view.was_truncated, noun: "entries") %>
+
+  <%= view.render_partial("_events_browser_filter.html.erb", search: view.search, per_page: view.per_page,
+    since_param: view.since_param, until_param: view.until_param) %>
+
+  <%# C1: same payload-metrics card as the server tab, fed by the browser
+      rows (computed over the full filtered list, not just this page). -%>
+  <%= view.render_partial("_payload_metrics.html.erb",
+    single_name: view.single_name, metric_keys: view.metric_keys, metric_key: view.metric_key,
+    metric_days: view.metric_days,
+    hidden_params: {"source" => "browser", "search" => view.search,
+                    "since" => view.since_param, "until" => view.until_param,
+                    "per_page" => view.per_page.to_s}) %>
+
+  <% if view.browser_rows.empty? -%>
+    <div class="card"><div class="text-center py-10 px-6 text-gray-400 text-xs">
+      <% if !view.search.empty? -%>
+        No results match your filters.
+        <a href="<%= view.h(view.base_path) %>/custom-events?source=browser" class="text-blue-600 hover:text-blue-800">Clear filters</a>
+      <% else -%>
+        No browser events captured yet.
+        <%= view.render_partial("_sibling_tab_hint.html.erb",
+          sibling: view.sibling, noun: "server event", href: "#{view.base_path}/custom-events") %>
+      <% end -%>
+    </div></div>
+  <% else -%>
+    <div class="table-wrap">
+      <table class="data-table">
+        <thead><tr><th>Name</th><th>Session</th><th>Window</th><th class="w-24">Time</th><th>Replay</th></tr></thead>
+        <tbody>
+          <% view.browser_rows.each do |r| -%>
+            <tr>
+              <td class="font-medium"><%= view.h(r[:name]) %>
+                <% if r[:payload] && !r[:payload].empty? -%>
+                  <details class="inline-block align-middle ml-1"><summary class="text-[10px] text-gray-400 cursor-pointer select-none">payload</summary><div class="text-[10px] text-gray-600 bg-gray-50 rounded p-1 mt-0.5 font-mono break-all"><%= view.h(r[:payload].to_json) %></div></details>
+                <% end -%>
+              </td>
+              <td class="font-mono text-xs"><%= view.h(r[:session_id].to_s[0, 12]) %></td>
+              <td class="font-mono text-xs"><%= view.h(r[:window_id].to_s[0, 8]) %></td>
+              <td class="text-gray-400 text-[10px] tabular-nums"><%= r[:offset_ms] ? "+#{(r[:offset_ms].to_f / 1000).round}s" : "—" %></td>
+              <td><a class="text-blue-600 hover:text-blue-800" href="<%= view.h(view.base_path) %>/sessions/<%= view.h(r[:session_id]) %>/windows/<%= view.h(r[:window_id]) %>?t=<%= r[:offset_ms] %>">Open at event &rarr;</a></td>
+            </tr>
+          <% end -%>
+        </tbody>
+      </table>
+    </div>
+
+    <%= view.render_partial("_pagination.html.erb",
+      base_href: "#{view.base_path}/custom-events", page: view.page, has_next: view.has_next,
+      params: {"source" => "browser", "search" => view.search,
+               "since" => view.since_param, "until" => view.until_param, "per_page" => view.per_page.to_s}) %>
+  <% end -%>
+<% else -%>
+  <%= view.render_partial("_events_server_filter.html.erb",
+    search: view.search, level: view.level, project: view.project, projects: view.projects, per_page: view.per_page,
+    since_param: view.since_param, until_param: view.until_param) %>
+
+  <% unless view.level_mix.empty? -%>
+    <div class="card mb-4">
+      <div class="card-body">
+        <h6 class="text-xs font-semibold text-gray-800 uppercase tracking-wider mb-3">
+          <%= view.volume_scaled? ? "Volume per Day" : "Level Mix per Day" %>
+          <span class="font-normal normal-case tracking-normal text-gray-400">&mdash; filtered events, by UTC day<%= view.volume_scaled? ? "; bar length is the day's share of the busiest day" : "" %></span>
+        </h6>
+        <% level_colors = {"debug" => "#9ca3af", "info" => "#3b82f6", "warn" => "#f59e0b"} -%>
+        <% view.level_mix.each do |date, counts| -%>
+          <% total = counts.values.sum -%>
+          <% volume_pct = (total.to_f / view.mix_max * 100).round(1) -%>
+          <div class="flex items-center gap-2 mb-1.5" data-level-day="<%= view.h(date) %>">
+            <div class="text-[10px] text-gray-500 w-16 shrink-0 tabular-nums"><%= view.h(date) %></div>
+            <div class="flex-1">
+              <% if view.volume_scaled? -%>
+                <div class="flex h-3 rounded overflow-hidden bg-gray-100" style="width:<%= volume_pct %>%" data-volume-pct="<%= volume_pct %>">
+              <% else -%>
+                <div class="flex h-3 rounded overflow-hidden bg-gray-100">
+              <% end -%>
+                <% level_colors.each do |lvl, color| -%>
+                  <% count = counts[lvl] -%>
+                  <% next if count == 0 -%>
+                  <div style="width:<%= (count.to_f / total * 100).round(1) %>%;background:<%= color %>" title="<%= count %> <%= lvl %> on <%= view.h(date) %>" data-level-seg="<%= lvl %>"></div>
+                <% end -%>
+                <% if counts["error"] > 0 -%>
+                  <a href="<%= view.h(view.base_path) %>/custom-events?<%= view.h(view.error_query(date)) %>" style="width:<%= (counts["error"].to_f / total * 100).round(1) %>%;background:#dc2626" title="<%= counts["error"] %> error<%= counts["error"] == 1 ? "" : "s" %> on <%= view.h(date) %> (click to filter)" data-level-seg="error"></a>
+                <% end -%>
+              </div>
+            </div>
+            <div class="text-[10px] text-gray-400 w-8 text-right tabular-nums"><%= total %></div>
+          </div>
+        <% end -%>
+      </div>
+    </div>
+  <% end -%>
+
+  <%# C5(c): numeric payload metrics, offered when the filters narrowed the
+      fetched rows to one event name; computed over those same rows. -%>
+  <%= view.render_partial("_payload_metrics.html.erb",
+    single_name: view.single_name, metric_keys: view.metric_keys, metric_key: view.metric_key,
+    metric_days: view.metric_days,
+    hidden_params: {"search" => view.search, "level" => view.level, "project" => view.project,
+                    "since" => view.since_param, "until" => view.until_param,
+                    "per_page" => view.per_page.to_s}) %>
+
+  <% if view.events.empty? -%>
+    <div class="card"><div class="text-center py-10 px-6 text-gray-400 text-xs">
+      <% if !view.search.empty? || !view.level.empty? || !view.project.empty? || !view.since_param.empty? || !view.until_param.empty? -%>
+        No results match your filters.
+        <a href="<%= view.h(view.base_path) %>/custom-events" class="text-blue-600 hover:text-blue-800">Clear filters</a>
+      <% else -%>
+        No events recorded yet.
+        <%= view.render_partial("_sibling_tab_hint.html.erb",
+          sibling: view.sibling, noun: "browser event", href: "#{view.base_path}/custom-events?source=browser") %>
+      <% end -%>
+    </div></div>
+  <% else -%>
+    <div class="table-wrap">
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Project</th>
+            <th>Level</th>
+            <th>Session</th>
+            <th>Time</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% view.events.each do |e| -%>
+            <tr>
+              <td class="font-medium">
+                <a href="<%= view.h(view.base_path) %>/custom-events/<%= view.h(e["id"].to_s) %>" class="text-blue-600 hover:text-blue-800"><%= view.h(e["name"].to_s) %></a>
+                <% if e["payload"].is_a?(Hash) && !e["payload"].empty? -%>
+                  <details class="inline-block align-middle ml-1">
+                    <summary class="text-[10px] text-gray-400 cursor-pointer select-none">payload</summary>
+                    <div class="text-[10px] text-gray-600 bg-gray-50 rounded p-1 mt-0.5 font-mono break-all"><%= view.h(e["payload"].to_json) %></div>
+                  </details>
+                <% end -%>
+              </td>
+              <td class="text-xs text-gray-600"><%= view.h(e["project"].to_s) %></td>
+              <td>
+                <% case e["level"]
+                   when "error" -%>
+                  <span class="badge badge-danger"><%= view.h(e["level"].to_s) %></span>
+                <% when "warn" -%>
+                  <span class="badge badge-warning"><%= view.h(e["level"].to_s) %></span>
+                <% when "info" -%>
+                  <span class="badge badge-info"><%= view.h(e["level"].to_s) %></span>
+                <% else -%>
+                  <span class="badge badge-neutral"><%= view.h(e["level"].to_s) %></span>
+                <% end -%>
+              </td>
+              <td>
+                <% if e["session_id"] && !e["session_id"].empty? -%>
+                  <a href="<%= view.h(view.base_path) %>/sessions/<%= view.h(e["session_id"]) %>" class="text-blue-600 hover:text-blue-800 text-xs font-mono"><%= view.h(e["session_id"].to_s[0, 16]) %>&hellip;</a>
+                <% else -%>
+                  <span class="text-gray-400">&mdash;</span>
+                <% end -%>
+              </td>
+              <td class="text-gray-400 text-[10px] tabular-nums"><%= e["timestamp"] ? Time.at(e["timestamp"].to_f).utc.strftime("%b %d, %H:%M:%S") : "N/A" %></td>
+            </tr>
+          <% end -%>
+        </tbody>
+      </table>
+    </div>
+
+    <%= view.render_partial("_pagination.html.erb",
+      base_href: "#{view.base_path}/custom-events", page: view.page, has_next: view.has_next,
+      params: {"search" => view.search, "level" => view.level, "project" => view.project,
+               "since" => view.since_param, "until" => view.until_param, "per_page" => view.per_page.to_s}) %>
+  <% end -%>
+<% end -%>

data/lib/sentiero/web/templates/export_index.html.erb

@@ -0,0 +1,69 @@
+<%= view.render_partial("_analytics_nav.html.erb", active: :export, since: view.since, until_str: view.until_str) %>
+<h1 class="page-title">Export</h1>
+
+<p class="text-xs text-gray-500 mb-4">
+  Download analytics datasets as CSV or JSON. Exports are bounded by the
+  <code>analytics_max_scan_sessions</code> cap, so very large stores may be
+  truncated.
+  <%# C2 (P2.2): attribution semantics, so exported per-URL numbers can't be
+      misread as something more exact than they are. -%>
+  Per-URL rows attribute each event to the page on screen when the event
+  happened (derived from the recording&rsquo;s page-load markers); entry pages
+  are the first page seen in the recording.
+</p>
+
+<%# The range is set via this GET form (no-JS friendly) and carried into
+    every dataset's POST form below as hidden fields. Empty = all data. -%>
+<form method="get" action="<%= view.h(view.base_path) %>/analytics/export">
+  <div class="card mb-4">
+    <div class="flex items-end gap-3 px-4 py-3">
+      <%= view.render_partial("_date_range.html.erb", since: view.since, until_str: view.until_str) %>
+      <div class="shrink-0 flex items-center gap-1.5">
+        <button type="submit" class="btn btn-primary">Set range</button>
+        <a href="<%= view.h(view.base_path) %>/analytics/export" class="btn btn-secondary">Clear</a>
+      </div>
+      <div class="shrink-0 pb-1.5 text-[10px] text-gray-400">
+        Empty = all data. The range is stamped into the download filename.
+      </div>
+    </div>
+  </div>
+</form>
+
+<div class="card">
+  <div class="table-wrap">
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Dataset</th>
+          <th>Download</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% view.datasets.each do |key, label| -%>
+          <tr>
+            <td class="text-sm text-gray-900"><%= view.h(label) %></td>
+            <td>
+              <div class="flex gap-2">
+                <% %w[csv json].each do |format| -%>
+                  <form method="post" action="<%= view.h(view.base_path) %>/analytics/export/<%= view.h(key) %>.<%= format %>">
+                    <input type="hidden" name="csrf_token" value="<%= view.h(view.csrf_token) %>">
+                    <input type="hidden" name="since" value="<%= view.h(view.since) %>">
+                    <input type="hidden" name="until" value="<%= view.h(view.until_str) %>">
+                    <button type="submit" class="btn btn-sm btn-secondary">Download <%= format.upcase %></button>
+                  </form>
+                <% end -%>
+              </div>
+            </td>
+          </tr>
+        <% end -%>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<div class="mt-4 flex items-center gap-2">
+  <% if view.shareable_replays -%>
+    <a href="<%= view.h(view.base_path) %>/analytics/import" class="btn btn-sm btn-secondary">Import replay</a>
+  <% end -%>
+  <a href="<%= view.h(view.base_path) %>/analytics" class="btn btn-sm btn-secondary">&larr; Back to Analytics</a>
+</div>

data/lib/sentiero/web/templates/forms.html.erb

@@ -0,0 +1,105 @@
+<%= view.render_partial("_analytics_nav.html.erb", active: :forms, since: view.since, until_str: view.until_str) %>
+<div class="flex items-center justify-between mb-5">
+  <h1 class="page-title mb-0">Form Analytics</h1>
+
+  <form method="get" action="<%= view.h(view.base_path) %>/analytics/forms" class="flex items-end gap-2">
+    <%= view.render_partial("_date_range.html.erb", since: view.since, until_str: view.until_str) %>
+    <button type="submit" class="btn btn-sm btn-secondary">Apply</button>
+  </form>
+</div>
+
+<%= view.render_partial("_truncation_warning.html.erb", was_truncated: view.was_truncated, noun: "sessions") %>
+
+<% if view.sessions_started == 0 -%>
+  <div class="card">
+    <div class="text-center py-10 px-6 text-gray-400 text-xs">
+      No form interactions recorded yet.
+    </div>
+  </div>
+<% else -%>
+  <p class="text-xs text-gray-500 mb-3">
+    Fields are identified by interaction patterns only &mdash; no values are ever
+    read, so this works with masked inputs. Submits are <em>real</em> submit
+    events captured by the recorder (<code>track_forms</code>), attributed to the
+    page they happened on: a session counts as submitted only when every page it
+    typed on was also submitted there. <strong>Capture note:</strong> sessions
+    recorded before submit capture existed (or with <code>track_forms</code>
+    off) contain no submit events and show zero submits.
+  </p>
+
+  <div class="grid grid-cols-1 sm:grid-cols-4 gap-3 mb-5">
+    <div class="card">
+      <div class="px-5 py-4">
+        <div class="text-2xl font-bold text-gray-900 tracking-tight"><%= view.sessions_started %></div>
+        <div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider mt-1">Sessions Interacting</div>
+      </div>
+    </div>
+    <div class="card">
+      <div class="px-5 py-4">
+        <div class="text-2xl font-bold text-gray-900 tracking-tight"><%= view.sessions_completed %></div>
+        <div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider mt-1">Sessions Submitted</div>
+      </div>
+    </div>
+    <div class="card">
+      <div class="px-5 py-4">
+        <div class="text-2xl font-bold text-gray-900 tracking-tight"><%= (view.completion_rate * 100).round %>%</div>
+        <div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider mt-1">Completion Rate</div>
+      </div>
+    </div>
+    <div class="card">
+      <div class="px-5 py-4">
+        <div class="text-2xl font-bold text-gray-900 tracking-tight"><%= view.total_submits %></div>
+        <div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider mt-1">Form Submits</div>
+      </div>
+    </div>
+  </div>
+
+  <div class="card mb-4">
+    <div class="card-body">
+      <h6 class="text-xs font-semibold text-gray-800 uppercase tracking-wider mb-3">Per-Field Metrics</h6>
+      <table class="w-full text-xs">
+        <thead>
+          <tr class="text-gray-500 border-b border-gray-200">
+            <th class="py-1 text-left font-medium">Field</th>
+            <th class="py-1 text-right font-medium">Completion</th>
+            <th class="py-1 text-right font-medium">Avg Time to Fill</th>
+            <th class="py-1 text-right font-medium">Re-fills</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% view.fields.each do |field| -%>
+            <tr class="border-b border-gray-100 last:border-0">
+              <td class="py-1 text-gray-700"><%= view.h(field[:label] || "Field ##{field[:field_id]}") %><% if field[:url] %> <span class="text-gray-400">on <%= view.h(field[:url]) %></span><% end %></td>
+              <td class="py-1 text-right text-gray-500 tabular-nums"><%= (field[:completion_rate] * 100).round %>%</td>
+              <td class="py-1 text-right text-gray-500 tabular-nums"><%= (field[:avg_time_to_fill_ms] / 1000.0).round(1) %>s</td>
+              <td class="py-1 text-right text-gray-500 tabular-nums"><%= field[:total_refills] %></td>
+            </tr>
+          <% end -%>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <div class="card mb-4">
+    <div class="card-body">
+      <h6 class="text-xs font-semibold text-gray-800 uppercase tracking-wider mb-3">Top Drop-off Fields</h6>
+      <% if view.drop_off_fields.empty? -%>
+        <p class="text-gray-400 text-xs py-4 text-center">No abandoned forms &mdash; every interacting session submitted.</p>
+      <% else -%>
+        <p class="text-[10px] text-gray-400 mb-2">The last field touched before the session left without submitting.</p>
+        <table class="w-full text-xs">
+          <% view.drop_off_fields.each do |field| -%>
+            <tr class="border-b border-gray-100 last:border-0">
+              <td class="py-1 text-gray-700"><%= view.h(field[:label] || "Field ##{field[:field_id]}") %><% if field[:url] %> <span class="text-gray-400">on <%= view.h(field[:url]) %></span><% end %></td>
+              <td class="py-1 text-right text-gray-500 tabular-nums"><%= field[:count] %> drop-off<%= field[:count] == 1 ? "" : "s" %></td>
+            </tr>
+          <% end -%>
+        </table>
+      <% end -%>
+    </div>
+  </div>
+<% end -%>
+
+<div class="mt-4">
+  <a href="<%= view.h(view.base_path) %>/analytics" class="btn btn-sm btn-secondary">&larr; Back to Analytics</a>
+</div>

data/lib/sentiero/web/templates/heatmap.html.erb

@@ -0,0 +1,76 @@
+<%= view.render_partial("_analytics_nav.html.erb", active: :heatmap, since: view.since, until_str: view.until_str) %>
+<div class="flex items-center justify-between mb-5">
+  <div class="flex items-center gap-3">
+    <h1 class="page-title mb-0">Click Heatmaps</h1>
+    <% if view.selected_url && !view.selected_url.to_s.empty? -%>
+      <a class="text-blue-600 hover:text-blue-800 text-xs" href="<%= view.h(view.page_report_href) %>">Page report &rarr;</a>
+    <% end -%>
+  </div>
+
+  <form method="get" action="<%= view.h(view.base_path) %>/analytics/heatmap" class="flex items-end gap-2">
+    <%= view.render_partial("_date_range.html.erb", since: view.since, until_str: view.until_str) %>
+    <div class="shrink-0">
+      <label for="url" class="label">Page</label>
+      <select name="url" id="url" class="select" style="width:22rem" data-heatmap-url>
+        <% if view.urls.empty? -%>
+          <option value="">No recorded pages</option>
+        <% end -%>
+        <% view.urls.each do |u| -%>
+          <option value="<%= view.h(u) %>" <%= u == view.selected_url ? "selected" : "" %>><%= view.h(u) %></option>
+        <% end -%>
+      </select>
+    </div>
+    <button type="submit" class="btn btn-sm btn-secondary" data-heatmap-apply>Apply</button>
+  </form>
+</div>
+
+<%= view.render_partial("_truncation_warning.html.erb", was_truncated: view.was_truncated, noun: "sessions") %>
+
+<% if view.urls.empty? -%>
+  <div class="card">
+    <div class="text-center py-10 px-6 text-gray-400 text-xs">
+      No recorded pages with clicks yet.
+    </div>
+  </div>
+<% else -%>
+  <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+    <div class="card lg:col-span-2">
+      <div class="card-body">
+        <h6 class="text-xs font-semibold text-gray-800 uppercase tracking-wider mb-3">Click Density</h6>
+        <div id="heatmap-status" class="text-xs text-gray-400 mb-2">Loading&hellip;</div>
+        <div id="heatmap-canvas-wrapper" class="inline-block max-w-full overflow-auto border border-gray-100 rounded bg-gray-50">
+          <canvas id="heatmap-canvas"></canvas>
+        </div>
+        <p class="text-[10px] text-gray-400 mt-2">
+          Clicks are placed at their position on the <em>page</em> (click + scroll offset),
+          aggregated across sessions on this page. Vertical position is normalized to an
+          estimated page height &mdash; the deepest recorded scroll plus the viewport &mdash;
+          so below-the-fold clicks land where they happened; horizontal position is
+          normalized by viewport width.
+          <%# C2 (P2.2): estimation caveat extending the A2 caption. -%>
+          The height is an estimate: pages that were never scrolled fall back to
+          viewport height, and under-scrolled pages can read taller than recorded,
+          so vertical positions are approximate.
+        </p>
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="card-body">
+        <h6 class="text-xs font-semibold text-gray-800 uppercase tracking-wider mb-3">Top Clicked Elements</h6>
+        <table class="w-full text-xs">
+          <tbody id="heatmap-top-elements">
+            <tr><td class="py-2 text-gray-400 text-center">Loading&hellip;</td></tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+<% end -%>
+
+<div class="mt-4">
+  <a href="<%= view.h(view.base_path) %>/analytics" class="btn btn-sm btn-secondary">&larr; Back to Analytics</a>
+</div>
+
+<script type="application/json" id="heatmap-config"><%= view.escape_json(view.config_json) %></script>
+<script src="<%= view.built_asset('heatmap') %>" defer></script>