sentiero 1.0.0.alpha1

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

@@ -0,0 +1,25 @@
+<form method="get" action="<%= view.h(view.base_path) %>/issues">
+  <input type="hidden" name="source" value="client">
+  <div class="card mb-4">
+    <div class="flex flex-wrap items-end gap-3 px-4 py-3">
+      <div class="shrink-0">
+        <label for="search" class="label">Search</label>
+        <input type="text" name="search" id="search" class="input w-56"
+               value="<%= view.h(search) %>" placeholder="Error message…">
+      </div>
+      <div class="shrink-0">
+        <label for="sort_by" class="label">Sort by</label>
+        <select name="sort_by" id="sort_by" class="select w-36">
+          <option value="count"   <%= "selected" if sort_by == "count" %>>Count</option>
+          <option value="recency" <%= "selected" if sort_by == "recency" %>>Recency</option>
+        </select>
+      </div>
+      <%= view.render_partial("_date_range.html.erb", since: since_param, until_str: until_param) %>
+      <div class="shrink-0 flex items-center gap-1.5">
+        <input type="hidden" name="per_page" value="<%= per_page %>">
+        <button type="submit" class="btn btn-primary">Filter</button>
+        <a href="<%= view.h(view.base_path) %>/issues?source=client" class="btn btn-secondary">Clear</a>
+      </div>
+    </div>
+  </div>
+</form>

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

@@ -0,0 +1,36 @@
+<form method="get" action="<%= view.h(view.base_path) %>/issues">
+  <div class="card mb-4">
+    <div class="flex flex-wrap items-end gap-3 px-4 py-3">
+      <div class="shrink-0">
+        <label for="search" class="label">Search</label>
+        <input type="text" name="search" id="search" class="input w-56"
+               value="<%= view.h(search) %>" placeholder="Exception class or title…">
+      </div>
+      <div class="shrink-0">
+        <label for="status" class="label">Status</label>
+        <select name="status" id="status" class="select w-36">
+          <option value=""         <%= "selected" if status.empty? %>>All</option>
+          <option value="open"     <%= "selected" if status == "open" %>>Open</option>
+          <option value="resolved" <%= "selected" if status == "resolved" %>>Resolved</option>
+          <option value="ignored"  <%= "selected" if status == "ignored" %>>Ignored</option>
+        </select>
+      </div>
+      <div class="shrink-0">
+        <label for="sort_by" class="label">Sort by</label>
+        <select name="sort_by" id="sort_by" class="select w-36">
+          <option value="last_seen"  <%= "selected" if sort_by == "last_seen" %>>Last seen</option>
+          <option value="first_seen" <%= "selected" if sort_by == "first_seen" %>>First seen</option>
+          <option value="count"      <%= "selected" if sort_by == "count" %>>Count</option>
+        </select>
+      </div>
+      <%= view.render_partial("_date_range.html.erb",
+        since: since_param, until_str: until_param,
+        from_label: "Last seen from", to_label: "Last seen to") %>
+      <div class="shrink-0 flex items-center gap-1.5">
+        <input type="hidden" name="per_page" value="<%= per_page %>">
+        <button type="submit" class="btn btn-primary">Filter</button>
+        <a href="<%= view.h(view.base_path) %>/issues" class="btn btn-secondary">Clear</a>
+      </div>
+    </div>
+  </div>
+</form>

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

@@ -0,0 +1,18 @@
+<form method="get" action="<%= view.h(view.base_path) %>/custom-events">
+  <input type="hidden" name="source" value="browser">
+  <div class="card mb-4">
+    <div class="flex flex-wrap items-end gap-3 px-4 py-3">
+      <div class="shrink-0">
+        <label for="search" class="label">Search</label>
+        <input type="text" name="search" id="search" class="input w-56"
+               value="<%= view.h(search) %>" placeholder="Event name…">
+      </div>
+      <%= view.render_partial("_date_range.html.erb", since: since_param, until_str: until_param) %>
+      <div class="shrink-0 flex items-center gap-1.5">
+        <input type="hidden" name="per_page" value="<%= per_page %>">
+        <button type="submit" class="btn btn-primary">Filter</button>
+        <a href="<%= view.h(view.base_path) %>/custom-events?source=browser" class="btn btn-secondary">Clear</a>
+      </div>
+    </div>
+  </div>
+</form>

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

@@ -0,0 +1,39 @@
+<form method="get" action="<%= view.h(view.base_path) %>/custom-events">
+  <div class="card mb-4">
+    <div class="flex flex-wrap items-end gap-3 px-4 py-3">
+      <div class="shrink-0">
+        <label for="search" class="label">Search</label>
+        <input type="text" name="search" id="search" class="input w-56"
+               value="<%= view.h(search) %>" placeholder="Event name…">
+      </div>
+      <div class="shrink-0">
+        <label for="level" class="label">Level</label>
+        <select name="level" id="level" class="select w-36">
+          <option value=""      <%= "selected" if level.empty? %>>All</option>
+          <option value="debug" <%= "selected" if level == "debug" %>>debug</option>
+          <option value="info"  <%= "selected" if level == "info" %>>info</option>
+          <option value="warn"  <%= "selected" if level == "warn" %>>warn</option>
+          <option value="error" <%= "selected" if level == "error" %>>error</option>
+        </select>
+      </div>
+      <% if projects && !projects.empty? -%>
+        <div class="shrink-0">
+          <label for="project" class="label">Project</label>
+          <select name="project" id="project" class="select w-40">
+            <option value="" <%= "selected" if project.empty? %>>All</option>
+            <% projects.each do |proj| -%>
+              <option value="<%= view.h(proj) %>" <%= "selected" if project == proj %>><%= view.h(proj) %></option>
+            <% end -%>
+          </select>
+        </div>
+      <% end -%>
+      <%= view.render_partial("_date_range.html.erb",
+        since: since_param, until_str: until_param) %>
+      <div class="shrink-0 flex items-center gap-1.5">
+        <input type="hidden" name="per_page" value="<%= per_page %>">
+        <button type="submit" class="btn btn-primary">Filter</button>
+        <a href="<%= view.h(view.base_path) %>/custom-events" class="btn btn-secondary">Clear</a>
+      </div>
+    </div>
+  </div>
+</form>

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

@@ -0,0 +1,14 @@
+<%
+  prev_qs = Rack::Utils.build_query(params.merge("page" => (page - 1).to_s))
+  next_qs = Rack::Utils.build_query(params.merge("page" => (page + 1).to_s))
+-%>
+<nav aria-label="Pagination" class="mt-3">
+  <ul class="pagination">
+    <li class="<%= "page-disabled" if page <= 1 %>">
+      <a class="page-link" href="<%= view.h(base_href) %>?<%= prev_qs %>">Previous</a>
+    </li>
+    <li class="<%= "page-disabled" unless has_next %>">
+      <a class="page-link" href="<%= view.h(base_href) %>?<%= next_qs %>">Next</a>
+    </li>
+  </ul>
+</nav>

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

@@ -0,0 +1,62 @@
+<%# Numeric payload metrics, offered when the filters narrowed the
+    fetched rows to one event name; computed over those same rows. Shared by
+    the server and browser tabs of the events index — `hidden_params` carries
+    the active tab's filter state into the metric-key form (incl.
+    source=browser on the browser tab) so choosing a key stays on the tab. -%>
+<% if single_name && !metric_keys.empty? -%>
+  <div class="card mb-4">
+    <div class="card-body">
+      <h6 class="text-xs font-semibold text-gray-800 uppercase tracking-wider mb-3">Payload Metrics
+        <span class="font-normal normal-case tracking-normal text-gray-400">&mdash;
+          <code class="font-mono normal-case"><%= view.h(single_name) %></code>, numeric payload keys by UTC day</span>
+      </h6>
+
+      <form method="get" action="<%= view.h(view.base_path) %>/custom-events" class="flex items-end gap-2 mb-3">
+        <% hidden_params.reject { |_key, value| value.to_s.empty? }.each do |key, value| -%>
+          <input type="hidden" name="<%= view.h(key) %>" value="<%= view.h(value) %>">
+        <% end -%>
+        <div class="shrink-0">
+          <label for="metric_key" class="label">Payload key</label>
+          <select name="metric_key" id="metric_key" class="select" style="width:12rem">
+            <option value="">Choose a key&hellip;</option>
+            <% metric_keys.each do |key| -%>
+              <option value="<%= view.h(key) %>" <%= (metric_key == key) ? "selected" : "" %>><%= view.h(key) %></option>
+            <% end -%>
+          </select>
+        </div>
+        <button type="submit" class="btn btn-sm btn-secondary">Show</button>
+      </form>
+
+      <% if metric_key -%>
+        <% if metric_days.empty? -%>
+          <p class="text-gray-400 text-xs py-2">No values recorded for this key in the filtered rows.</p>
+        <% else -%>
+          <table class="w-full text-xs">
+            <tr class="border-b border-gray-100">
+              <% %w[Day Count Sum Avg Min Max].each_with_index do |label, i| -%>
+                <th class="py-1 text-[10px] font-medium text-gray-400 uppercase tracking-wider <%= i.zero? ? "text-left" : "text-right" %>"><%= label %></th>
+              <% end -%>
+            </tr>
+            <% metric_days.each do |date, m| -%>
+              <% avg = (m[:count] > 0) ? (m[:sum] / m[:count]).round(2) : nil -%>
+              <tr class="border-b border-gray-100 last:border-0" data-metric-day="<%= view.h(date) %>">
+                <td class="py-1 text-gray-700 tabular-nums"><%= view.h(date) %></td>
+                <td class="py-1 text-right text-gray-500 tabular-nums" data-metric-count="<%= m[:count] %>"><%= m[:count] %></td>
+                <td class="py-1 text-right text-gray-700 tabular-nums font-medium" data-metric-sum="<%= m[:sum].round(2) %>"><%= m[:sum].round(2) %></td>
+                <td class="py-1 text-right text-gray-500 tabular-nums" data-metric-avg="<%= avg %>"><%= avg || "&mdash;" %></td>
+                <td class="py-1 text-right text-gray-500 tabular-nums" data-metric-min="<%= m[:min]&.round(2) %>"><%= m[:min] ? m[:min].round(2) : "&mdash;" %></td>
+                <td class="py-1 text-right text-gray-500 tabular-nums" data-metric-max="<%= m[:max]&.round(2) %>"><%= m[:max] ? m[:max].round(2) : "&mdash;" %></td>
+              </tr>
+            <% end -%>
+          </table>
+          <% skipped = metric_days.sum { |_date, m| m[:non_numeric] } -%>
+          <% if skipped > 0 -%>
+            <p class="text-[10px] text-gray-400 mt-2">
+              Skipped <%= skipped %> non-numeric value<%= skipped == 1 ? "" : "s" %> for this key.
+            </p>
+          <% end -%>
+        <% end -%>
+      <% end -%>
+    </div>
+  </div>
+<% end -%>

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

@@ -0,0 +1,42 @@
+<% meta = s[:metadata] || {} -%>
+<tr>
+  <% if selectable -%>
+    <td class="w-8 text-center"><input type="checkbox" name="session_ids[]" value="<%= view.h(s[:session_id]) %>" class="checkbox session-checkbox"></td>
+  <% end -%>
+  <td>
+    <% if s[:window_ids] && !s[:window_ids].empty? -%>
+      <a href="<%= view.h(view.base_path) %>/sessions/<%= view.h(s[:session_id]) %>" class="session-id font-medium text-blue-600 hover:text-blue-800">
+        <%= view.h(s[:session_id][0, 8]) %>
+      </a>
+    <% else -%>
+      <span class="session-id"><%= view.h(s[:session_id][0, 8]) %></span>
+    <% end -%>
+    <% if meta["has_errors"] -%>
+      <span class="badge badge-danger ml-1">errors</span>
+    <% end -%>
+  </td>
+  <td class="metadata-url text-gray-400" title="<%= view.h(meta["url"].to_s) %>">
+    <% if meta["url"] -%>
+      <% path = begin; URI.parse(meta["url"]).path; rescue; meta["url"]; end -%>
+      <%= view.h(path.to_s) %>
+    <% end -%>
+  </td>
+  <td>
+    <% if meta["userAgent"] -%>
+      <span class="text-gray-500" title="<%= view.h(meta["userAgent"]) %>"><%= view.h(view.parse_browser(meta["userAgent"]).to_s) %></span>
+      <% device = view.parse_device(meta["userAgent"]) -%>
+      <% if device == "Mobile" -%>
+        <span class="badge badge-warning ml-1">Mobile</span>
+      <% end -%>
+    <% end -%>
+  </td>
+  <td class="text-gray-500 tabular-nums"><%= s[:window_ids]&.size || 0 %></td>
+  <td class="text-gray-500 tabular-nums"><%= s[:event_count] || 0 %></td>
+  <td class="text-gray-500"><%= view.h(view.format_duration(s[:first_event_at], s[:last_event_at])) %></td>
+  <td class="text-gray-400 text-[10px]"><%= s[:updated_at] ? Time.at(s[:updated_at]).utc.strftime("%b %d, %H:%M") : "N/A" %></td>
+  <% if selectable -%>
+    <td class="text-right">
+      <button type="button" class="btn btn-xs btn-ghost-danger" data-action="delete-session" data-session-id="<%= view.h(s[:session_id]) %>" data-csrf-token="<%= view.h(csrf_token) %>" data-base-path="<%= view.h(view.base_path) %>">Delete</button>
+    </td>
+  <% end -%>
+</tr>

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

@@ -0,0 +1,6 @@
+<% if sibling && sibling[:count] > 0 -%>
+  <span class="block mt-1">
+    <a href="<%= view.h(href) %>" class="text-blue-600 hover:text-blue-800"
+       data-sibling-count="<%= sibling[:count] %>"><%= sibling[:count] %><%= sibling[:capped] ? "+" : "" %> <%= view.h((sibling[:count] == 1 && !sibling[:capped]) ? noun : "#{noun}s") %> &rarr;</a>
+  </span>
+<% end -%>

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

@@ -0,0 +1,10 @@
+<nav class="tabs" aria-label="Section tabs">
+  <% tabs.each do |t| -%>
+    <a href="<%= view.h(t[:href]) %>"
+       class="tab <%= t[:active] ? "tab-active" : "" %>"
+       <%= t[:active] ? 'aria-current="page"' : "" %>>
+      <%= view.h(t[:label]) %>
+      <% if t[:count] -%><span class="tab-count"><%= t[:count] %></span><% end -%>
+    </a>
+  <% end -%>
+</nav>

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

@@ -0,0 +1,19 @@
+<%# Warning shown when an analytics session scan was cut short by the
+    analytics_max_scan_sessions cap (or an accumulation bound), so the figures
+    on the page may be incomplete. `noun` names what may be missing (default
+    "data"); pass `scanned` to report the exact number of sessions scanned. %>
+<% if was_truncated -%>
+  <% noun = (defined?(noun) && noun) ? noun : "data" -%>
+  <% scanned = (defined?(scanned) && scanned) ? scanned : nil -%>
+  <div class="banner-warning">
+    <% if scanned -%>
+      <span><strong>Results are incomplete.</strong> Only the first <%= scanned %>
+        sessions were scanned (the <code class="font-mono">analytics_max_scan_sessions</code>
+        cap), so some <%= view.h(noun) %> may not be reflected below.</span>
+    <% else -%>
+      <span><strong>Results may be incomplete.</strong> The session scan hit the
+        <code class="font-mono">analytics_max_scan_sessions</code> cap or an
+        accumulation bound, so some <%= view.h(noun) %> may not be reflected below.</span>
+    <% end -%>
+  </div>
+<% end -%>

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

@@ -0,0 +1,5 @@
+<a href="<%= view.h(view.base_path) %>/sessions/<%= view.h(session_id) %>/windows/<%= view.h(window[:window_id]) %>"
+   class="<%= view.h(css_class) %>"
+   title="<%= view.h(window[:window_id]) %>">
+  Tab <%= tab_num %> &middot; <%= window[:event_count] %> events
+</a>

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

@@ -0,0 +1,94 @@
+<%= view.render_partial("_analytics_nav.html.erb", active: :conversions, since: view.since, until_str: view.until_str) %>
+<div class="flex items-center justify-between mb-5">
+  <h1 class="page-title mb-0">Conversions</h1>
+
+  <form method="get" action="<%= view.h(view.base_path) %>/analytics/conversions" class="flex items-end gap-2">
+    <div class="shrink-0">
+      <label for="tag" class="label">Conversion event</label>
+      <select name="tag" id="tag" class="select" style="width:12rem">
+        <option value="">&mdash;</option>
+        <% view.tags.each do |tag| -%>
+          <option value="<%= view.h(tag) %>" <%= (view.selected_tag == tag) ? "selected" : "" %>><%= view.h(tag) %></option>
+        <% end -%>
+      </select>
+    </div>
+    <%= 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.selected_tag.nil? -%>
+  <div class="card">
+    <div class="text-center py-10 px-6 text-gray-400 text-xs">
+      Pick a conversion event tag to see how each acquisition source converts.
+      Tags are the custom-event tags your site records via
+      <code class="font-mono">Sentiero.track(tag)</code>; a session counts as a
+      conversion when that tag fires at least once anywhere in the session.
+    </div>
+  </div>
+<% else -%>
+  <% view.facets.each do |title, dimension, rows, kind| -%>
+    <div class="card mb-3">
+      <div class="card-body">
+        <div class="flex items-center justify-between mb-2">
+          <span class="text-sm font-medium text-gray-900"><%= view.h(title) %></span>
+          <% if kind == :utm -%>
+            <span class="text-[10px] text-gray-400">only campaign-tagged sessions appear; untagged traffic is omitted</span>
+          <% end -%>
+        </div>
+        <% if rows.empty? -%>
+          <div class="text-center py-6 px-6 text-gray-400 text-xs">
+            No <%= view.h(dimension) %> data for this tag in range.
+          </div>
+        <% else -%>
+          <table class="w-full text-xs">
+            <thead>
+              <tr class="text-[10px] font-medium text-gray-400 uppercase tracking-wider text-left">
+                <th class="py-1"><%= view.h(dimension) %></th>
+                <th class="py-1 text-right">Sessions</th>
+                <th class="py-1 text-right">Conversions</th>
+                <th class="py-1 text-right">Rate</th>
+                <th class="py-1 text-right">Examples</th>
+              </tr>
+            </thead>
+            <tbody>
+              <% rows.each do |row| -%>
+                <tr data-conv-key="<%= view.h(row[:key].to_s) %>"
+                    data-conv-sessions="<%= row[:sessions] %>"
+                    data-conv-conversions="<%= row[:conversions] %>"
+                    data-conv-rate="<%= row[:conversion_rate] %>">
+                  <td class="py-1 font-mono break-all text-gray-700"><%= view.h(row[:key].to_s) %></td>
+                  <td class="py-1 text-right tabular-nums"><%= row[:sessions] %></td>
+                  <td class="py-1 text-right tabular-nums"><%= row[:conversions] %></td>
+                  <td class="py-1 text-right tabular-nums">
+                    <% if row[:conversion_rate].nil? -%>
+                      <span class="text-gray-400">&mdash;</span>
+                    <% elsif row[:low_volume] -%>
+                      <span class="text-gray-400"><%= row[:conversion_rate] %>% (low volume)</span>
+                    <% else -%>
+                      <%= row[:conversion_rate] %>%
+                    <% end -%>
+                  </td>
+                  <td class="py-1 text-right whitespace-nowrap">
+                    <% if row[:converting_example] -%>
+                      <a class="text-blue-600 hover:text-blue-800" href="<%= view.player_link(row[:converting_example]) %>">converting &rarr;</a>
+                    <% end -%>
+                    <% if row[:non_converting_example] -%>
+                      <a class="text-blue-600 hover:text-blue-800 ml-2" href="<%= view.player_link(row[:non_converting_example]) %>">non-converting &rarr;</a>
+                    <% end -%>
+                  </td>
+                </tr>
+              <% end -%>
+            </tbody>
+          </table>
+        <% end -%>
+      </div>
+    </div>
+  <% end -%>
+<% 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/analytics_engagement.html.erb

@@ -0,0 +1,101 @@
+<%= view.render_partial("_analytics_nav.html.erb", active: :engagement, since: view.since, until_str: view.until_str) %>
+<div class="flex items-center justify-between mb-5">
+  <h1 class="page-title mb-0">Engagement Scoring</h1>
+
+  <form method="get" action="<%= view.h(view.base_path) %>/analytics/engagement" class="flex items-end gap-2">
+    <%= view.render_partial("_date_range.html.erb", since: view.since, until_str: view.until_str) %>
+    <input type="hidden" name="sort" value="<%= view.h(view.sort) %>">
+    <button type="submit" class="btn btn-sm btn-secondary">Apply</button>
+  </form>
+</div>
+
+<p class="text-xs text-gray-500 mb-3">
+  This is a per-session <strong>struggle score (higher = more friction)</strong>
+  &mdash; a heuristic, not a verdict. It blends eight behavioural signals by fixed
+  weights: <strong>rage clicks</strong> (20%), <strong>dead clicks</strong> (15%),
+  <strong>nav churn</strong> (15%), <strong>idle ratio</strong> (10%),
+  <strong>thrashing scroll</strong> (10%), <strong>quick bounce</strong> (10%),
+  <strong>form refills</strong> (10%), and <strong>error abandonment</strong> (10%).
+</p>
+<p class="text-[10px] text-gray-400 mb-4">
+  Dead-click counts here are raw (pre-refinement) and may exceed the Frustration
+  page; a session can register both a dead click and error-abandonment for the
+  same crash.
+</p>
+
+<%= view.render_partial("_truncation_warning.html.erb", was_truncated: view.was_truncated, noun: "sessions") %>
+
+<div class="card mb-4">
+  <div class="card-body">
+    <h6 class="text-xs font-semibold text-gray-800 uppercase tracking-wider mb-2">Score Distribution</h6>
+    <svg viewBox="0 0 <%= view.svg_width %> <%= view.svg_height %>" width="100%" style="max-width:<%= view.svg_width %>px" role="img" aria-label="Struggle score distribution across sessions">
+      <line x1="0" y1="<%= view.axis_y %>" x2="<%= view.svg_width %>" y2="<%= view.axis_y %>" stroke="#e5e7eb" stroke-width="1" />
+      <% view.distribution.each_with_index do |(label, count), i| -%>
+        <rect x="<%= view.bar_x(i) %>" y="<%= view.bar_y(count) %>" width="<%= view.bar_width %>" height="<%= view.bar_h(count) %>" fill="#2563eb" rx="2" />
+        <text x="<%= view.bar_x(i) + view.bar_width / 2 %>" y="<%= (view.bar_y(count) - 4).round(1) %>" text-anchor="middle" font-size="10" fill="#374151"><%= count %></text>
+        <text x="<%= view.bar_x(i) + view.bar_width / 2 %>" y="<%= view.axis_y + 14 %>" text-anchor="middle" font-size="9" fill="#6b7280"><%= view.h(label) %></text>
+      <% end -%>
+    </svg>
+  </div>
+</div>
+
+<% if view.sorted_sessions.empty? -%>
+  <div class="card">
+    <div class="text-center py-10 px-6 text-gray-400 text-xs">
+      No sessions scored yet. Once sessions are recorded, the highest-struggle
+      ones rank here.
+    </div>
+  </div>
+<% else -%>
+  <div class="table-wrap mb-4">
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>
+            <a class="<%= view.sort == "score" ? "font-semibold text-gray-900" : "text-blue-600 hover:text-blue-800" %>"
+               href="<%= view.h(view.sort_link("score")) %>">Score<%= view.sort == "score" ? " ↓" : "" %></a>
+          </th>
+          <th>Page</th>
+          <th class="text-right">
+            <a class="<%= view.sort == "duration" ? "font-semibold text-gray-900" : "text-blue-600 hover:text-blue-800" %>"
+               href="<%= view.h(view.sort_link("duration")) %>">Duration<%= view.sort == "duration" ? " ↓" : "" %></a>
+          </th>
+          <th>Signals</th>
+          <th class="text-right">Replay</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% view.sorted_sessions.each do |row| -%>
+          <tr>
+            <td class="tabular-nums"><span class="<%= view.badge_class(row[:score]) %>"><%= row[:score] %></span></td>
+            <td class="break-words max-w-xs"><%= row[:url] ? view.h(row[:url]) : "&mdash;" %></td>
+            <td class="text-right tabular-nums"><%= (row[:duration_ms] / 1000.0).round(1) %>s</td>
+            <td>
+              <% if view.chips(row[:signals]).empty? -%>
+                <span class="text-gray-400 text-xs">&mdash;</span>
+              <% else -%>
+                <% view.chips(row[:signals]).each do |chip| -%>
+                  <span class="badge badge-neutral mr-1 mb-1"><%= chip %></span>
+                <% end -%>
+              <% end -%>
+            </td>
+            <td class="text-right">
+              <a class="text-blue-600 hover:text-blue-800"
+                 href="<%= view.h(view.base_path) %>/sessions/<%= view.h(row[:session_id].to_s) %>/windows/<%= view.h(row[:window_id].to_s) %>?t=0">Open in player &rarr;</a>
+            </td>
+          </tr>
+        <% end -%>
+      </tbody>
+    </table>
+  </div>
+
+  <% if view.scanned > view.sorted_sessions.size -%>
+    <p class="text-[10px] text-gray-400 mb-4">
+      Showing top <%= view.sorted_sessions.size %> of <%= view.scanned %> scanned sessions.
+    </p>
+  <% end -%>
+<% 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/analytics_frustration.html.erb

@@ -0,0 +1,135 @@
+<%= view.render_partial("_analytics_nav.html.erb", active: :frustration, since: view.since, until_str: view.until_str) %>
+<div class="flex items-center justify-between mb-5">
+  <h1 class="page-title mb-0">Frustration Signals</h1>
+
+  <form method="get" action="<%= view.h(view.base_path) %>/analytics/frustration" 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: "incidents") %>
+
+<% if view.sorted_pages.empty? -%>
+  <div class="card">
+    <div class="text-center py-10 px-6 text-gray-400 text-xs">
+      No frustration signals detected yet. Rage clicks are bursts of 3+ clicks
+      at the same spot within 500ms; dead clicks get no page response within 500ms.
+    </div>
+  </div>
+<% else -%>
+  <p class="text-xs text-gray-500 mb-3">
+    <strong>Rage clicks</strong> are bursts of 3+ clicks at the same spot within
+    500ms; <strong>dead clicks</strong> are clicks the page never responds to
+    within 500ms. Element attribution needs the recorder&rsquo;s
+    <code class="font-mono">capture_clicks</code> annotations.
+  </p>
+
+  <div class="table-wrap mb-4">
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Page</th>
+          <th class="text-right">Rage clicks</th>
+          <th class="text-right">Dead clicks</th>
+          <th class="text-right">Sessions affected</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% view.sorted_pages.each do |url, page| -%>
+          <tr>
+            <td class="break-words max-w-xs"><%= view.h(url) %></td>
+            <td class="text-right tabular-nums">
+              <% if page[:rage_count] > 0 -%>
+                <span class="badge badge-danger"><%= page[:rage_count] %></span>
+              <% else -%>
+                <span class="text-gray-400">0</span>
+              <% end -%>
+            </td>
+            <td class="text-right tabular-nums">
+              <% if page[:dead_count] > 0 -%>
+                <span class="badge badge-warning"><%= page[:dead_count] %></span>
+              <% else -%>
+                <span class="text-gray-400">0</span>
+              <% end -%>
+            </td>
+            <td class="text-right tabular-nums"><%= page[:sessions_affected] %></td>
+          </tr>
+        <% end -%>
+      </tbody>
+    </table>
+  </div>
+
+  <% view.sorted_pages.each do |url, page| -%>
+    <div class="card mb-3">
+      <div class="card-body">
+        <div class="text-sm font-medium text-gray-900 break-words mb-3"><%= view.h(url) %></div>
+
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+          <div>
+            <h6 class="text-xs font-semibold text-gray-800 uppercase tracking-wider mb-2">Top Rage-Clicked Elements</h6>
+            <% if page[:top_selectors].empty? -%>
+              <p class="text-xs text-gray-400">No selector-attributed rage clicks.</p>
+            <% else -%>
+              <table class="w-full text-xs">
+                <tbody>
+                  <% page[:top_selectors].each do |element| -%>
+                    <tr>
+                      <td class="py-1 font-mono break-all"><%= view.h(element[:selector]) %></td>
+                      <td class="py-1 text-right tabular-nums text-gray-500"><%= element[:count] %></td>
+                    </tr>
+                  <% end -%>
+                </tbody>
+              </table>
+            <% end -%>
+          </div>
+
+          <div>
+            <h6 class="text-xs font-semibold text-gray-800 uppercase tracking-wider mb-2">Incidents</h6>
+            <table class="w-full text-xs">
+              <tbody>
+                <% page[:incidents].each do |incident| -%>
+                  <tr>
+                    <td class="py-1">
+                      <% if incident[:subtype] == "rage_click" -%>
+                        <span class="badge badge-danger">rage &times;<%= incident[:count].to_i %></span>
+                        <% if incident[:selector] -%>
+                          <span class="font-mono text-gray-500 ml-1"><%= view.h(incident[:selector]) %></span>
+                        <% end -%>
+                      <% elsif incident[:kind] == "error" -%>
+                        <%# C4: the A4 analyzer tags dead clicks whose response
+                            window contains a JS error custom — the page
+                            crashed instead of responding. Older incident
+                            shapes without :kind fall through to plain dead. -%>
+                        <a href="<%= view.h(view.base_path) %>/issues?source=client"
+                           class="badge badge-danger" data-incident-kind="error"
+                           title="A JS error fired within this click's response window — open client JS errors">dead + JS error</a>
+                      <% else -%>
+                        <span class="badge badge-warning">dead</span>
+                      <% end -%>
+                    </td>
+                    <td class="py-1 text-gray-400 tabular-nums">+<%= (incident[:offset_ms].to_f / 1000).round(1) %>s</td>
+                    <td class="py-1 text-right">
+                      <a class="text-blue-600 hover:text-blue-800"
+                         href="<%= view.h(view.base_path) %>/sessions/<%= view.h(incident[:session_id].to_s) %>/windows/<%= view.h(incident[:window_id].to_s) %>?t=<%= incident[:offset_ms].to_i %>">Open in player &rarr;</a>
+                    </td>
+                  </tr>
+                <% end -%>
+              </tbody>
+            </table>
+            <% if page[:rage_count] + page[:dead_count] > page[:incidents].size -%>
+              <p class="text-[10px] text-gray-400 mt-2">
+                Showing the first <%= page[:incidents].size %> of
+                <%= page[:rage_count] + page[:dead_count] %> incidents.
+              </p>
+            <% end -%>
+          </div>
+        </div>
+      </div>
+    </div>
+  <% end -%>
+<% 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>