sentiero 1.0.0.alpha1

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

@@ -0,0 +1,287 @@
+<%= view.render_partial("_analytics_nav.html.erb", active: :pages, since: view.since, until_str: view.until_str) %>
+<div class="flex items-center justify-between mb-5">
+  <h1 class="page-title mb-0">Page Report</h1>
+
+  <form method="get" action="<%= view.h(view.base_path) %>/analytics/page" 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">
+        <option value="">Select a page&hellip;</option>
+        <% 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">Apply</button>
+  </form>
+</div>
+
+<%= view.render_partial("_truncation_warning.html.erb", was_truncated: view.was_truncated) %>
+
+<% if view.report.nil? -%>
+  <div class="card">
+    <div class="text-center py-10 px-6 text-gray-400 text-xs">
+      <% if view.urls.empty? -%>
+        No recorded pages yet.
+      <% else -%>
+        Pick a page above to see its per-URL report &mdash; time on page,
+        entries/exits, clicks, scroll depth, form completion, Web Vitals,
+        errors, frustration signals and custom events for that single URL.
+      <% end -%>
+    </div>
+  </div>
+<% elsif view.report[:page_views].zero? -%>
+  <div class="card">
+    <div class="text-center py-10 px-6 text-gray-400 text-xs">
+      No data recorded for <code class="font-mono"><%= view.h(view.report[:url]) %></code> in this range.
+    </div>
+  </div>
+<% else -%>
+  <div class="flex items-center justify-between mb-3">
+    <h2 class="text-sm font-medium text-gray-900 break-words"><%= view.h(view.report[:url]) %></h2>
+    <a class="text-blue-600 hover:text-blue-800 text-xs" href="<%= view.h(view.heatmap_href) %>">Open full heatmap &rarr;</a>
+  </div>
+
+  <%# ── summary cards ── -%>
+  <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 mb-5">
+    <div class="card"><div class="card-body">
+      <div class="text-[10px] uppercase tracking-wider text-gray-400">Sessions</div>
+      <div class="text-xl font-semibold tabular-nums"><%= view.report[:sessions] %></div>
+    </div></div>
+    <div class="card"><div class="card-body">
+      <div class="text-[10px] uppercase tracking-wider text-gray-400">Page views</div>
+      <div class="text-xl font-semibold tabular-nums"><%= view.report[:page_views] %></div>
+    </div></div>
+    <div class="card"><div class="card-body">
+      <div class="text-[10px] uppercase tracking-wider text-gray-400">Time on page (mean)</div>
+      <div class="text-xl font-semibold tabular-nums"><%= view.secs(view.time_on_page[:mean_ms]) %></div>
+      <div class="text-[10px] text-gray-400">median <%= view.secs(view.time_on_page[:median_ms]) %>, n=<%= view.time_on_page[:samples] %></div>
+    </div></div>
+    <div class="card"><div class="card-body">
+      <div class="text-[10px] uppercase tracking-wider text-gray-400">Bounce rate</div>
+      <div class="text-xl font-semibold tabular-nums"><%= view.pct(view.entry_exit[:bounce_rate]) %></div>
+    </div></div>
+    <div class="card"><div class="card-body">
+      <div class="text-[10px] uppercase tracking-wider text-gray-400">Entries</div>
+      <div class="text-xl font-semibold tabular-nums"><%= view.entry_exit[:entries] %></div>
+    </div></div>
+    <div class="card"><div class="card-body">
+      <div class="text-[10px] uppercase tracking-wider text-gray-400">Exits</div>
+      <div class="text-xl font-semibold tabular-nums"><%= view.entry_exit[:exits] %></div>
+    </div></div>
+  </div>
+
+  <%# ── heatmap ── -%>
+  <div class="card mb-3"><div class="card-body">
+    <div class="flex items-center justify-between mb-2">
+      <h6 class="text-xs font-semibold text-gray-800 uppercase tracking-wider">Heatmap</h6>
+      <a class="text-blue-600 hover:text-blue-800 text-xs" href="<%= view.h(view.heatmap_href) %>">Open full heatmap &rarr;</a>
+    </div>
+    <% if view.report[:heatmap][:total_clicks].zero? -%>
+      <p class="text-xs text-gray-400">No clicks recorded on this page.</p>
+    <% else -%>
+      <p class="text-xs text-gray-500 mb-2"><%= view.report[:heatmap][:total_clicks] %> total clicks.</p>
+      <table class="w-full text-xs">
+        <thead><tr><th class="text-left py-1 text-gray-500">Element</th><th class="text-right py-1 text-gray-500">Clicks</th></tr></thead>
+        <tbody>
+          <% view.report[:heatmap][:top_elements].each do |el| -%>
+            <tr>
+              <td class="py-1 font-mono break-all"><%= view.h(el[:selector]) %></td>
+              <td class="py-1 text-right tabular-nums text-gray-500"><%= el[:count] %></td>
+            </tr>
+          <% end -%>
+        </tbody>
+      </table>
+    <% end -%>
+  </div></div>
+
+  <%# ── scroll ── -%>
+  <div class="card mb-3"><div class="card-body">
+    <h6 class="text-xs font-semibold text-gray-800 uppercase tracking-wider mb-2">Scroll Depth</h6>
+    <% if view.scroll.nil? -%>
+      <p class="text-xs text-gray-400">No scroll recorded on this page.</p>
+    <% else -%>
+      <div class="text-xs text-gray-500 mb-3">
+        <%= view.scroll[:session_count] %> session<%= view.scroll[:session_count] == 1 ? "" : "s" %>,
+        avg depth <%= view.scroll[:avg_depth_px].round %>px<%
+          if view.scroll[:avg_depth_pct] %> (~<%= view.scroll[:avg_depth_pct].round %>% of the page)<% end %><%
+          if view.scroll[:page_height_px] %>, est. page height <%= view.scroll[:page_height_px].round %>px<% end %>.
+      </div>
+      <table class="w-full text-xs">
+        <tbody>
+          <tr><td class="py-1 text-gray-500">50th percentile</td><td class="py-1 text-right tabular-nums"><%= view.scroll[:fold_lines][:p50] ? "#{view.scroll[:fold_lines][:p50].round}% of page" : "&mdash;" %></td></tr>
+          <tr><td class="py-1 text-gray-500">75th percentile</td><td class="py-1 text-right tabular-nums"><%= view.scroll[:fold_lines][:p75] ? "#{view.scroll[:fold_lines][:p75].round}% of page" : "&mdash;" %></td></tr>
+          <tr><td class="py-1 text-gray-500">90th percentile</td><td class="py-1 text-right tabular-nums"><%= view.scroll[:fold_lines][:p90] ? "#{view.scroll[:fold_lines][:p90].round}% of page" : "&mdash;" %></td></tr>
+        </tbody>
+      </table>
+      <table class="w-full text-xs mt-2">
+        <thead><tr><th class="text-left py-1 text-gray-500">Depth bin</th><th class="text-right py-1 text-gray-500">Sessions</th></tr></thead>
+        <tbody>
+          <% view.scroll[:distribution].each do |label, count| -%>
+            <tr><td class="py-1"><%= view.h(label) %>%</td><td class="py-1 text-right tabular-nums text-gray-500"><%= count %></td></tr>
+          <% end -%>
+        </tbody>
+      </table>
+    <% end -%>
+  </div></div>
+
+  <%# ── forms ── -%>
+  <div class="card mb-3"><div class="card-body">
+    <h6 class="text-xs font-semibold text-gray-800 uppercase tracking-wider mb-2">Forms</h6>
+    <% if view.forms[:started].zero? && view.forms[:total_submits].zero? -%>
+      <p class="text-xs text-gray-400">No form activity recorded on this page.</p>
+    <% else -%>
+      <p class="text-xs text-gray-500 mb-2">
+        <%= view.forms[:started] %> session<%= view.forms[:started] == 1 ? "" : "s" %> started,
+        <%= view.forms[:completed] %> completed (<%= view.pct(view.forms[:completion_rate]) %>),
+        <%= view.forms[:total_submits] %> submit<%= view.forms[:total_submits] == 1 ? "" : "s" %> in total.
+        <span class="text-gray-400">Started/completed are per-session.</span>
+      </p>
+      <% unless view.forms[:fields].empty? -%>
+        <table class="w-full text-xs mb-2">
+          <thead><tr><th class="text-left py-1 text-gray-500">Field</th><th class="text-right py-1 text-gray-500">Sessions</th><th class="text-right py-1 text-gray-500">Avg fill</th><th class="text-right py-1 text-gray-500">Refills</th></tr></thead>
+          <tbody>
+            <% view.forms[:fields].each do |field| -%>
+              <tr>
+                <td class="py-1 font-mono">#<%= field[:field_id] %></td>
+                <td class="py-1 text-right tabular-nums text-gray-500"><%= field[:sessions] %></td>
+                <td class="py-1 text-right tabular-nums text-gray-500"><%= view.secs(field[:avg_time_to_fill_ms]) %></td>
+                <td class="py-1 text-right tabular-nums text-gray-500"><%= field[:total_refills] %></td>
+              </tr>
+            <% end -%>
+          </tbody>
+        </table>
+      <% end -%>
+      <% unless view.forms[:drop_off_fields].empty? -%>
+        <div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-1">Drop-off fields</div>
+        <table class="w-full text-xs">
+          <tbody>
+            <% view.forms[:drop_off_fields].each do |field| -%>
+              <tr><td class="py-1 font-mono">#<%= field[:field_id] %></td><td class="py-1 text-right tabular-nums text-gray-500"><%= field[:count] %></td></tr>
+            <% end -%>
+          </tbody>
+        </table>
+      <% end -%>
+    <% end -%>
+  </div></div>
+
+  <%# ── web vitals ── -%>
+  <div class="card mb-3"><div class="card-body">
+    <h6 class="text-xs font-semibold text-gray-800 uppercase tracking-wider mb-2">Web Vitals</h6>
+    <% if view.report[:vitals][:sample_count].zero? -%>
+      <p class="text-xs text-gray-400">No Web Vitals recorded on this page.</p>
+    <% else -%>
+      <table class="w-full text-xs">
+        <thead><tr><th class="text-left py-1 text-gray-500">Metric</th><th class="text-right py-1 text-gray-500">p50</th><th class="text-right py-1 text-gray-500">p75</th><th class="text-right py-1 text-gray-500">p90</th><th class="text-right py-1 text-gray-500">n</th><th class="text-right py-1 text-gray-500">Slowest</th></tr></thead>
+        <tbody>
+          <% view.report[:vitals][:metrics].sort.each do |metric, m| -%>
+            <tr>
+              <td class="py-1 font-mono"><%= view.h(metric) %></td>
+              <td class="py-1 text-right tabular-nums"><%= view.h(view.format_vital(metric, m[:p50])) %></td>
+              <td class="py-1 text-right tabular-nums"><%= view.h(view.format_vital(metric, m[:p75])) %></td>
+              <td class="py-1 text-right tabular-nums"><%= view.h(view.format_vital(metric, m[:p90])) %></td>
+              <td class="py-1 text-right tabular-nums text-gray-400"><%= m[:samples] %></td>
+              <td class="py-1 text-right">
+                <% if m[:worst] -%>
+                  <a class="text-blue-600 hover:text-blue-800"
+                     href="<%= view.h(view.base_path) %>/sessions/<%= view.h(m[:worst][:session_id].to_s) %>/windows/<%= view.h(m[:worst][:window_id].to_s) %>?t=<%= m[:worst][:offset_ms].to_i %>">Open in player &rarr;</a>
+                <% else -%>
+                  <span class="text-gray-400">&mdash;</span>
+                <% end -%>
+              </td>
+            </tr>
+          <% end -%>
+        </tbody>
+      </table>
+    <% end -%>
+  </div></div>
+
+  <%# ── errors ── -%>
+  <div class="card mb-3"><div class="card-body">
+    <h6 class="text-xs font-semibold text-gray-800 uppercase tracking-wider mb-2">Errors</h6>
+    <% if view.report[:errors][:total].zero? -%>
+      <p class="text-xs text-gray-400">No errors recorded on this page.</p>
+    <% else -%>
+      <p class="text-xs text-gray-500 mb-2"><%= view.report[:errors][:total] %> total.</p>
+      <% view.report[:errors][:groups].each do |group| -%>
+        <div class="mb-3">
+          <div class="flex items-center gap-2 mb-1">
+            <span class="badge badge-danger"><%= group[:count] %></span>
+            <span class="text-xs font-mono text-gray-700 break-all"><%= view.h(group[:message]) %></span>
+          </div>
+          <table class="w-full text-xs">
+            <tbody>
+              <% group[:occurrences].each do |occ| -%>
+                <tr>
+                  <td class="py-1 text-gray-400 tabular-nums">+<%= (occ[: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(occ[:session_id].to_s) %>/windows/<%= view.h(occ[:window_id].to_s) %>?t=<%= occ[:offset_ms].to_i %>">Open in player &rarr;</a>
+                  </td>
+                </tr>
+              <% end -%>
+            </tbody>
+          </table>
+        </div>
+      <% end -%>
+    <% end -%>
+  </div></div>
+
+  <%# ── frustration ── -%>
+  <div class="card mb-3"><div class="card-body">
+    <h6 class="text-xs font-semibold text-gray-800 uppercase tracking-wider mb-2">Frustration Signals</h6>
+    <% if view.frustration[:rage_count].zero? && view.frustration[:dead_count].zero? -%>
+      <p class="text-xs text-gray-400">No frustration signals recorded on this page.</p>
+    <% else -%>
+      <p class="text-xs text-gray-500 mb-1">
+        <% if view.frustration[:rage_count] > 0 -%>
+          <span class="badge badge-danger"><%= view.frustration[:rage_count] %></span> rage clicks,
+        <% else -%>
+          0 rage clicks,
+        <% end -%>
+        <% if view.frustration[:dead_count] > 0 -%>
+          <span class="badge badge-warning"><%= view.frustration[:dead_count] %></span>
+        <% else -%>
+          0
+        <% end -%>
+        dead clicks <span class="text-gray-400">(raw, pre-filter)</span>.
+      </p>
+      <p class="text-[10px] text-gray-400 mb-2">
+        The dead-click count here is the raw, pre-filter total and may exceed
+        the Frustration page, which applies an additional de-noise pass.
+      </p>
+      <% unless view.frustration[:top_selectors].empty? -%>
+        <table class="w-full text-xs">
+          <thead><tr><th class="text-left py-1 text-gray-500">Rage-clicked element</th><th class="text-right py-1 text-gray-500">Count</th></tr></thead>
+          <tbody>
+            <% view.frustration[:top_selectors].each do |el| -%>
+              <tr><td class="py-1 font-mono break-all"><%= view.h(el[:selector]) %></td><td class="py-1 text-right tabular-nums text-gray-500"><%= el[:count] %></td></tr>
+            <% end -%>
+          </tbody>
+        </table>
+      <% end -%>
+    <% end -%>
+  </div></div>
+
+  <%# ── custom events ── -%>
+  <div class="card mb-3"><div class="card-body">
+    <h6 class="text-xs font-semibold text-gray-800 uppercase tracking-wider mb-2">Custom Events</h6>
+    <% if view.report[:custom_events].empty? -%>
+      <p class="text-xs text-gray-400">No custom events recorded on this page.</p>
+    <% else -%>
+      <table class="w-full text-xs">
+        <thead><tr><th class="text-left py-1 text-gray-500">Tag</th><th class="text-right py-1 text-gray-500">Count</th></tr></thead>
+        <tbody>
+          <% view.report[:custom_events].each do |ev| -%>
+            <tr><td class="py-1 font-mono break-all"><%= view.h(ev[:tag]) %></td><td class="py-1 text-right tabular-nums text-gray-500"><%= ev[:count] %></td></tr>
+          <% end -%>
+        </tbody>
+      </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/analytics_scroll.html.erb

@@ -0,0 +1,94 @@
+<%= view.render_partial("_analytics_nav.html.erb", active: :scroll, since: view.since, until_str: view.until_str) %>
+<div class="flex items-center justify-between mb-5">
+  <h1 class="page-title mb-0">Scroll Depth</h1>
+
+  <form method="get" action="<%= view.h(view.base_path) %>/analytics/scroll" 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.sorted_pages.empty? -%>
+  <div class="card">
+    <div class="text-center py-10 px-6 text-gray-400 text-xs">
+      No scroll data recorded yet.
+    </div>
+  </div>
+<% else -%>
+  <p class="text-xs text-gray-500 mb-3">
+    Depth is the absolute percentage of the page each session reached. The page
+    height is <em>estimated</em> per page as the deepest recorded scroll plus the
+    viewport &mdash; exact whenever a session read to the end, a lower bound
+    otherwise. The histogram bins sessions by that page percentage.
+  </p>
+
+  <% view.sorted_pages.each do |url, page| -%>
+    <%
+      folds = page[:fold_lines]
+      dist = page[:distribution]
+    -%>
+    <div class="card mb-3">
+      <div class="card-body">
+        <div class="flex items-center justify-between mb-1">
+          <div class="text-sm font-medium text-gray-900 break-words"><%= view.h(url) %></div>
+          <a class="text-blue-600 hover:text-blue-800 text-xs shrink-0 ml-3" href="<%= view.h(view.page_report_href(url)) %>">Page report &rarr;</a>
+        </div>
+        <div class="text-xs text-gray-500 mb-3">
+          <%= page[:session_count] %> session<%= page[:session_count] == 1 ? "" : "s" %>,
+          avg depth <%= page[:avg_depth_px].round %>px<%
+            if page[:avg_depth_pct] %> (~<%= page[:avg_depth_pct].round %>% of the page)<% end %><%
+            if page[:page_height_px] %>, est. page height <%= page[:page_height_px].round %>px<% end %>.
+        </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">Depth 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="Scroll depth distribution">
+              <line x1="0" y1="<%= view.axis_y %>" x2="<%= view.svg_width %>" y2="<%= view.axis_y %>" stroke="#e5e7eb" stroke-width="1" />
+              <% dist.each_with_index do |(label, count), i| -%>
+                <%
+                  bar_h = (count.to_f / view.max_count(dist) * (view.axis_y - view.chart_top)).round(1)
+                  x = view.bar_gap + i * (view.bar_width + view.bar_gap)
+                  y = (view.axis_y - bar_h).round(1)
+                -%>
+                <rect x="<%= x %>" y="<%= y %>" width="<%= view.bar_width %>" height="<%= bar_h %>" fill="#2563eb" rx="2" />
+                <text x="<%= x + view.bar_width / 2 %>" y="<%= (y - 4).round(1) %>" text-anchor="middle" font-size="10" fill="#374151"><%= count %></text>
+                <text x="<%= x + 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>
+            <h6 class="text-xs font-semibold text-gray-800 uppercase tracking-wider mb-2">Fold Lines</h6>
+            <table class="w-full text-xs">
+              <tbody>
+                <tr>
+                  <td class="py-1 text-gray-500">50th percentile</td>
+                  <td class="py-1 text-right tabular-nums"><%= folds[:p50] ? "#{folds[:p50].round}% of page" : "&mdash;" %></td>
+                </tr>
+                <tr>
+                  <td class="py-1 text-gray-500">75th percentile</td>
+                  <td class="py-1 text-right tabular-nums"><%= folds[:p75] ? "#{folds[:p75].round}% of page" : "&mdash;" %></td>
+                </tr>
+                <tr>
+                  <td class="py-1 text-gray-500">90th percentile</td>
+                  <td class="py-1 text-right tabular-nums"><%= folds[:p90] ? "#{folds[:p90].round}% of page" : "&mdash;" %></td>
+                </tr>
+              </tbody>
+            </table>
+            <p class="text-[10px] text-gray-400 mt-2">
+              The page depth that this fraction of sessions reached or exceeded
+              (of the estimated page height).
+            </p>
+          </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>

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

@@ -0,0 +1,91 @@
+<%= view.render_partial("_analytics_nav.html.erb", active: :vitals, since: view.since, until_str: view.until_str) %>
+<div class="flex items-center justify-between mb-5">
+  <h1 class="page-title mb-0">Web Vitals</h1>
+
+  <form method="get" action="<%= view.h(view.base_path) %>/analytics/vitals" 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: "samples") %>
+
+<% if view.sorted_pages.empty? -%>
+  <div class="card">
+    <div class="text-center py-10 px-6 text-gray-400 text-xs">
+      No Web Vitals recorded yet. Enable <code class="font-mono">capture_web_vitals</code>
+      in the recorder config to start collecting LCP, INP and CLS.
+    </div>
+  </div>
+<% else -%>
+  <p class="text-xs text-gray-500 mb-3">
+    p75 of each metric per page, from the ratings the browser reported
+    (good / needs-improvement / poor). One sample is one page view &mdash; the
+    metric&rsquo;s final report on that page &mdash; measured by the
+    <code class="font-mono">web-vitals</code> library running in visitors&rsquo; browsers.
+  </p>
+
+  <div class="table-wrap">
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Page</th>
+          <th class="text-right">LCP p75</th>
+          <th class="text-right">INP p75</th>
+          <th class="text-right">CLS p75</th>
+          <th>Rating mix</th>
+          <th>Slowest session</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% view.sorted_pages.each do |url, page| -%>
+          <% mix = view.page_rating_mix(page); mix_total = mix.values.sum; worst = view.slowest(page) -%>
+          <tr>
+            <td class="break-words max-w-xs">
+              <div><%= view.h(url) %></div>
+              <a class="text-blue-600 hover:text-blue-800 text-[10px]" href="<%= view.h(view.page_report_href(url)) %>">Page report &rarr;</a>
+            </td>
+            <% %w[LCP INP CLS].each do |metric| -%>
+              <% m = page[:metrics][metric] -%>
+              <td class="text-right tabular-nums">
+                <% if m -%>
+                  <span class="badge <%= view.rating_class(view.dominant_rating(m[:ratings])) %>">
+                    <%= view.h(view.format_vital(metric, m[:p75])) %>
+                  </span>
+                  <span class="text-[10px] text-gray-400 whitespace-nowrap">n=<%= m[:samples] %></span>
+                <% else -%>
+                  <span class="text-gray-400" title="The browser never reported this metric in range">&mdash; <span class="text-[10px]">(no reports)</span></span>
+                <% end -%>
+              </td>
+            <% end -%>
+            <td>
+              <% if mix_total > 0 -%>
+                <div class="flex h-2 w-24 rounded overflow-hidden" role="img"
+                     aria-label="<%= mix.map { |rating, count| "#{count} #{rating}" }.join(", ") %>">
+                  <% mix.each do |rating, count| -%>
+                    <% next if count == 0 -%>
+                    <div style="width:<%= (count.to_f / mix_total * 100).round(1) %>%;background:<%= view.rating_colors[rating] %>" title="<%= view.h(rating) %>: <%= count %>"></div>
+                  <% end -%>
+                </div>
+              <% else -%>
+                <span class="text-gray-400">&mdash;</span>
+              <% end -%>
+            </td>
+            <td>
+              <% if worst -%>
+                <a class="text-blue-600 hover:text-blue-800"
+                   href="<%= view.h(view.base_path) %>/sessions/<%= view.h(worst[:session_id].to_s) %>/windows/<%= view.h(worst[:window_id].to_s) %>?t=<%= worst[:offset_ms].to_i %>">Open in player &rarr;</a>
+              <% else -%>
+                <span class="text-gray-400">&mdash;</span>
+              <% end -%>
+            </td>
+          </tr>
+        <% end -%>
+      </tbody>
+    </table>
+  </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/client_error_show.html.erb

@@ -0,0 +1,73 @@
+<div class="card mb-3">
+  <div class="flex items-center gap-2 px-4 py-2.5">
+    <a href="<%= view.h(view.base_path) %>/issues?source=client" 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-danger shrink-0"><%= view.group[:count] %> occurrence<%= view.group[:count] == 1 ? "" : "s" %></span>
+  </div>
+</div>
+
+<%= view.render_partial("_truncation_warning.html.erb", was_truncated: view.was_truncated, noun: "occurrences") %>
+
+<div class="card mb-3">
+  <div class="card-body">
+    <h5 class="text-sm font-semibold text-gray-800 mb-2 break-words"><%= view.h(view.group[:message].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">Source</div>
+      <div class="text-xs text-gray-600 font-mono">
+        <% if view.group[:source] -%>
+          <%= view.h(view.group[:source]) %><%= view.group[:line] ? ":#{view.group[:line]}" : "" %>
+        <% else -%>Unknown source<% end -%>
+      </div>
+
+      <div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider pt-0.5">Last seen</div>
+      <div class="text-xs text-gray-600">
+        <%= view.group[:last_seen_at] ? Time.at(view.group[:last_seen_at].to_f / 1000).utc.strftime("%b %d, %Y %H:%M:%S UTC") : "N/A" %>
+      </div>
+    </div>
+  </div>
+</div>
+
+<% if view.facet_chips.any? { |_title, counts| counts.any? } -%>
+  <div class="card mb-3" data-client-error-facets>
+    <div class="card-body">
+      <h6 class="text-xs font-semibold text-gray-800 mb-3 uppercase tracking-wider">Facets
+        <span class="font-normal normal-case tracking-normal text-gray-400">&mdash; per occurrence</span>
+      </h6>
+      <% view.facet_chips.each do |title, counts| -%>
+        <% next if counts.empty? -%>
+        <div class="flex items-center gap-2 mb-1.5 flex-wrap">
+          <span class="text-[10px] font-medium text-gray-400 uppercase tracking-wider w-16 shrink-0"><%= view.h(title) %></span>
+          <% counts.sort_by { |_value, count| -count }.first(8).each do |value, count| -%>
+            <span class="badge badge-neutral"><%= view.h(value) %>&nbsp;<span class="tabular-nums">&times;<%= count %></span></span>
+          <% end -%>
+        </div>
+      <% end -%>
+    </div>
+  </div>
+<% end -%>
+
+<div class="card">
+  <div class="card-body">
+    <h6 class="text-xs font-semibold text-gray-800 mb-3 uppercase tracking-wider">Occurrences (<%= view.group[:occurrences].size %>)</h6>
+    <div class="table-wrap">
+      <table class="data-table">
+        <thead><tr><th>Session</th><th>Window</th><th class="w-32">Time</th><th class="w-32">Replay</th></tr></thead>
+        <tbody>
+          <% view.group[:occurrences].each do |occ| -%>
+            <tr>
+              <td class="font-mono text-gray-500"><%= view.h(occ[:session_id].to_s) %></td>
+              <td class="font-mono text-gray-400"><%= view.h(occ[:window_id].to_s) %></td>
+              <td class="text-gray-400 text-[10px] tabular-nums">
+                <%= occ[:timestamp] ? Time.at(occ[:timestamp].to_f / 1000).utc.strftime("%b %d, %H:%M:%S") : "—" %>
+              </td>
+              <td>
+                <a class="text-blue-600 hover:text-blue-800"
+                   href="<%= view.h(view.base_path) %>/sessions/<%= view.h(occ[:session_id].to_s) %>/windows/<%= view.h(occ[:window_id].to_s) %>?t=<%= occ[:offset_ms].to_i %>">Open in player &rarr;</a>
+              </td>
+            </tr>
+          <% end -%>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Sentiero Dashboard</title>
+  <link href="<%= view.built_asset('style') %>" rel="stylesheet">
+</head>
+<body>
+  <div class="s-layout">
+    <aside class="s-sidebar">
+      <%= view.render_partial("_brand.html.erb") %>
+      <ul class="s-sidebar-nav">
+        <li>
+          <a class="s-nav-item <%= request_path == '/' || request_path.start_with?('/sessions') ? 'active' : '' %>" href="<%= view.h(view.base_path) %>/">
+            <svg class="s-nav-icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25a2.25 2.25 0 0 1-2.25-2.25v-2.25Z" /></svg>
+            Sessions
+          </a>
+        </li>
+        <li>
+          <a class="s-nav-item <%= request_path.start_with?('/issues') ? 'active' : '' %>" href="<%= view.h(view.base_path) %>/issues">
+            <svg class="s-nav-icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="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>
+            Errors
+          </a>
+        </li>
+        <li>
+          <a class="s-nav-item <%= request_path.start_with?('/custom-events') ? 'active' : '' %>" href="<%= view.h(view.base_path) %>/custom-events">
+            <svg class="s-nav-icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" /></svg>
+            Events
+          </a>
+        </li>
+        <li>
+          <a class="s-nav-item <%= request_path.start_with?('/analytics') ? 'active' : '' %>" href="<%= view.h(view.base_path) %>/analytics">
+            <svg class="s-nav-icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" /></svg>
+            Analytics
+          </a>
+        </li>
+      </ul>
+    </aside>
+
+    <header class="s-mobile-header">
+      <%= view.render_partial("_brand.html.erb") %>
+      <nav class="flex gap-1">
+        <a class="s-nav-item <%= request_path == '/' || request_path.start_with?('/sessions') ? 'active' : '' %>" href="<%= view.h(view.base_path) %>/">Sessions</a>
+        <a class="s-nav-item <%= request_path.start_with?('/issues') ? 'active' : '' %>" href="<%= view.h(view.base_path) %>/issues">Errors</a>
+        <a class="s-nav-item <%= request_path.start_with?('/custom-events') ? 'active' : '' %>" href="<%= view.h(view.base_path) %>/custom-events">Events</a>
+        <a class="s-nav-item <%= request_path.start_with?('/analytics') ? 'active' : '' %>" href="<%= view.h(view.base_path) %>/analytics">Analytics</a>
+      </nav>
+    </header>
+
+    <main class="s-main">
+      <%= content %>
+    </main>
+  </div>
+</body>
+</html>