sentiero 1.0.0.alpha1

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

@@ -0,0 +1,39 @@
+<div class="flex items-center justify-between mb-5">
+  <h1 class="page-title mb-0">Import Replay</h1>
+  <a href="<%= view.h(view.base_path) %>/analytics/export" class="btn btn-sm btn-secondary">&larr; Back to Export</a>
+</div>
+
+<div class="card mb-4">
+  <div class="card-body">
+    <p class="text-xs text-gray-500 mb-4">
+      Paste a session events JSON file below, or drag and drop one onto the box.
+      The replay runs entirely in your browser &mdash; nothing is uploaded.
+    </p>
+
+    <div id="import-dropzone" class="border-2 border-dashed border-gray-200 rounded p-4 transition-colors">
+      <label for="import-textarea" class="label">Events JSON</label>
+      <textarea id="import-textarea" class="select w-full font-mono text-xs" rows="6"
+        placeholder='[{"type":4,"timestamp":...}, ...]'></textarea>
+
+      <div class="flex items-center gap-2 mt-3">
+        <button id="import-replay" type="button" class="btn btn-sm btn-secondary">Replay</button>
+        <input id="import-file" type="file" accept="application/json,.json" class="text-xs">
+      </div>
+    </div>
+
+    <p id="import-status" class="text-xs text-gray-400 mt-3" role="status" aria-live="polite"></p>
+  </div>
+</div>
+
+<div class="card">
+  <div class="card-body">
+    <h6 class="text-xs font-semibold text-gray-800 uppercase tracking-wider mb-3">Replay</h6>
+    <div class="player-frame">
+      <div id="import-player"></div>
+    </div>
+  </div>
+</div>
+
+<link rel="stylesheet" href="<%= view.built_asset('rrweb-player-css') %>">
+<script src="<%= view.built_asset('rrweb-player') %>"></script>
+<script src="<%= view.built_asset('import') %>" defer></script>

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

@@ -0,0 +1,200 @@
+<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" 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.problem[:exception_class].to_s) %></span>
+    <% case view.problem[:status]
+       when "resolved" -%>
+      <span class="badge badge-success shrink-0">resolved</span>
+    <% when "ignored" -%>
+      <span class="badge badge-neutral shrink-0">ignored</span>
+    <% else -%>
+      <span class="badge badge-danger shrink-0">open</span>
+    <% end -%>
+    <span class="badge badge-neutral shrink-0"><%= view.problem[:count] %> occurrence<%= view.problem[:count] == 1 ? "" : "s" %></span>
+  </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.problem[:title].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.problem[:project].to_s) %></div>
+
+      <div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider pt-0.5">First seen</div>
+      <div class="text-xs text-gray-600"><%= view.problem[:first_seen] ? Time.at(view.problem[:first_seen]).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">Last seen</div>
+      <div class="text-xs text-gray-600"><%= view.problem[:last_seen] ? Time.at(view.problem[:last_seen]).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">Fingerprint</div>
+      <div class="text-xs text-gray-600 font-mono"><%= view.h(view.problem[:id].to_s) %></div>
+
+      <% if view.problem[:resolved_at] -%>
+        <div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider pt-0.5">Resolved at</div>
+        <div class="text-xs text-gray-600"><%= Time.at(view.problem[:resolved_at]).utc.strftime("%b %d, %Y %H:%M UTC") %></div>
+      <% end -%>
+    </div>
+
+    <hr class="my-4 border-gray-100">
+    <h6 class="text-xs font-semibold text-gray-700 mb-3 uppercase tracking-wider">Update Status</h6>
+    <form method="post" action="<%= view.h(view.base_path) %>/issues/<%= view.h(view.problem[:id]) %>/status" class="flex gap-2 flex-wrap">
+      <input type="hidden" name="csrf_token" value="<%= view.h(view.csrf_token) %>">
+      <% unless view.problem[:status] == "open" -%>
+        <button type="submit" name="status" value="open" class="btn btn-sm btn-secondary">Reopen</button>
+      <% end -%>
+      <% unless view.problem[:status] == "resolved" -%>
+        <button type="submit" name="status" value="resolved" class="btn btn-sm btn-primary">Resolve</button>
+      <% end -%>
+      <% unless view.problem[:status] == "ignored" -%>
+        <button type="submit" name="status" value="ignored" class="btn btn-sm btn-secondary">Ignore</button>
+      <% end -%>
+    </form>
+  </div>
+</div>
+
+<% unless view.session_summaries.empty? -%>
+  <div class="card mb-3">
+    <div class="card-body">
+      <h6 class="text-xs font-semibold text-gray-800 mb-3 uppercase tracking-wider">Sessions Affected (<%= view.session_summaries.size %>)</h6>
+      <ul class="space-y-2">
+        <% view.session_summaries.each do |s| -%>
+          <li class="flex items-center gap-3 text-xs">
+            <a href="<%= view.replay_href(s) %>" class="text-blue-600 hover:text-blue-800 font-mono shrink-0"><%= view.h(s[:session_id]) %></a>
+            <% if s[:last_event_at] && s[:first_event_at] -%>
+              <span class="text-gray-400 shrink-0"><%= view.h(view.format_duration(s[:first_event_at], s[:last_event_at])) %></span>
+            <% end -%>
+            <% if s[:browser] -%>
+              <span class="text-gray-500 truncate"><%= view.h(s[:browser]) %></span>
+            <% end -%>
+          </li>
+        <% end -%>
+      </ul>
+    </div>
+  </div>
+<% end -%>
+
+<%# B4 occurrence trend: exact 24h/7d/30d counts + a per-UTC-day sparkline
+    over the occurrences fetched for this page. -%>
+<div class="card mb-3">
+  <div class="card-body">
+    <h6 class="text-xs font-semibold text-gray-800 mb-3 uppercase tracking-wider">Occurrence Trend</h6>
+    <div class="flex items-center gap-2 mb-3 flex-wrap">
+      <span class="badge badge-neutral">24h&nbsp;<span class="tabular-nums" data-trend-24h="<%= view.trend[:last_24h] %>"><%= view.trend[:last_24h] %></span></span>
+      <span class="badge badge-neutral">7d&nbsp;<span class="tabular-nums" data-trend-7d="<%= view.trend[:last_7d] %>"><%= view.trend[:last_7d] %></span></span>
+      <span class="badge badge-neutral">30d&nbsp;<span class="tabular-nums" data-trend-30d="<%= view.trend[:last_30d] %>"><%= view.trend[:last_30d] %></span></span>
+    </div>
+    <% if view.spark_max == 0 -%>
+      <p class="text-gray-400 text-xs py-4 text-center">No occurrences in the last 30 days.</p>
+    <% else -%>
+      <div class="stats-chart">
+        <% view.trend[:series].each do |day| -%>
+          <div class="stats-chart-col">
+            <div class="stats-chart-bar-wrapper">
+              <div class="stats-chart-bar" style="height: <%= (day[:count].to_f / view.spark_max * 100).round %>%" title="<%= view.h(day[:date]) %>: <%= day[:count] %> occurrence<%= day[:count] == 1 ? "" : "s" %>" data-spark-count="<%= day[:count] %>"></div>
+            </div>
+            <div class="stats-chart-label"><%= view.h(day[:date][-5..]) %></div>
+          </div>
+        <% end -%>
+      </div>
+      <div class="text-[10px] text-gray-400 mt-1">By UTC day &mdash; latest <%= view.trend[:sample_size] %> occurrences.</div>
+    <% end -%>
+  </div>
+</div>
+
+<% if view.has_facets? -%>
+  <div class="card mb-3" data-problem-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; latest <%= view.facets[:sample_size] %> occurrences</span>
+      </h6>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <% view.facet_groups.each do |title, rows| -%>
+          <% next if rows.empty? -%>
+          <div>
+            <div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-1.5"><%= view.h(title) %></div>
+            <table class="w-full text-xs">
+              <% rows.each do |value, count| -%>
+                <tr class="border-b border-gray-100 last:border-0">
+                  <td class="py-1 text-gray-700 truncate max-w-0 w-full"><%= view.h(value) %></td>
+                  <td class="py-1 pl-2 text-right text-gray-500 tabular-nums" data-facet-count="<%= count %>"><%= count %></td>
+                </tr>
+              <% end -%>
+            </table>
+          </div>
+        <% end -%>
+        <% unless view.facets[:releases].empty? -%>
+          <div>
+            <div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-1.5">Releases</div>
+            <table class="w-full text-xs">
+              <% view.facets[:releases].each do |release, info| -%>
+                <tr class="border-b border-gray-100 last:border-0">
+                  <td class="py-1 text-gray-700 truncate max-w-0 w-full">
+                    <%= view.h(release) %>
+                    <% if info[:first_seen] -%>
+                      <span class="text-[10px] text-gray-400">&middot; first seen <%= Time.at(info[:first_seen]).utc.strftime("%b %d, %H:%M") %></span>
+                    <% end -%>
+                  </td>
+                  <td class="py-1 pl-2 text-right text-gray-500 tabular-nums" data-facet-count="<%= info[:count] %>"><%= info[:count] %></td>
+                </tr>
+              <% end -%>
+            </table>
+          </div>
+        <% end -%>
+      </div>
+    </div>
+  </div>
+<% end -%>
+
+<% unless view.occurrences.empty? -%>
+  <div class="card">
+    <div class="card-body">
+      <h6 class="text-xs font-semibold text-gray-800 mb-3 uppercase tracking-wider">Recent Occurrences</h6>
+      <div class="space-y-4">
+        <% view.occurrences.each do |occ| -%>
+          <div class="border border-gray-100 rounded p-3">
+            <div class="flex items-start justify-between gap-2 mb-2">
+              <div class="text-xs text-gray-700 font-medium flex-1"><%= view.h(occ["message"].to_s) %></div>
+              <div class="text-[10px] text-gray-400 shrink-0 tabular-nums">
+                <%= occ["timestamp"] ? Time.at(occ["timestamp"].to_f).utc.strftime("%b %d, %H:%M:%S") : "N/A" %>
+              </div>
+            </div>
+            <% if occ["session_id"] && !occ["session_id"].empty? -%>
+              <div class="text-[10px] text-gray-400 mb-2">
+                Session:
+                <% if occ["window_id"] && !occ["window_id"].empty? -%>
+                  <a href="<%= view.h(view.base_path) %>/sessions/<%= view.h(occ["session_id"]) %>/windows/<%= view.h(occ["window_id"]) %>?t=<%= (occ["timestamp"].to_f * 1000).to_i %>" class="text-blue-500 hover:text-blue-700 font-mono"><%= view.h(occ["session_id"]) %></a>
+                <% else -%>
+                  <a href="<%= view.h(view.base_path) %>/sessions/<%= view.h(occ["session_id"]) %>" class="text-blue-500 hover:text-blue-700 font-mono"><%= view.h(occ["session_id"]) %></a>
+                <% end -%>
+              </div>
+            <% end -%>
+            <% if occ["backtrace"] && !occ["backtrace"].empty? -%>
+              <pre class="text-[10px] text-gray-500 bg-gray-50 rounded p-2 overflow-x-auto whitespace-pre-wrap"><%= view.h(Array(occ["backtrace"]).first(20).join("\n")) %></pre>
+            <% end -%>
+            <% ctx = occ["context"]
+               if ctx.is_a?(Hash) && !ctx.empty? -%>
+              <details class="mt-2">
+                <summary class="text-[10px] font-medium text-gray-500 cursor-pointer select-none">Context</summary>
+                <div class="grid grid-cols-[140px_1fr] gap-x-3 gap-y-0.5 mt-1.5 bg-gray-50 rounded p-2">
+                  <% ctx.each do |k, v| -%>
+                    <% if v.is_a?(Hash) -%>
+                      <% v.each do |sk, sv| -%>
+                        <div class="text-[10px] text-gray-400 font-mono pt-0.5 truncate"><%= view.h("#{k}.#{sk}") %></div>
+                        <div class="text-[10px] text-gray-700 break-all"><%= view.h(sv.is_a?(Hash) || sv.is_a?(Array) ? sv.to_json : sv.to_s) %></div>
+                      <% end -%>
+                    <% else -%>
+                      <div class="text-[10px] text-gray-400 font-mono pt-0.5 truncate"><%= view.h(k.to_s) %></div>
+                      <div class="text-[10px] text-gray-700 break-all"><%= view.h(v.is_a?(Hash) || v.is_a?(Array) ? v.to_json : v.to_s) %></div>
+                    <% end -%>
+                  <% end -%>
+                </div>
+              </details>
+            <% end -%>
+          </div>
+        <% end -%>
+      </div>
+    </div>
+  </div>
+<% end -%>

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

@@ -0,0 +1,114 @@
+<%= view.render_partial("_analytics_nav.html.erb", active: :segments, since: view.filters[:since_param].to_s, until_str: view.filters[:until_param].to_s) %>
+<h1 class="page-title">Segments</h1>
+
+<form method="get" action="<%= view.h(view.base_path) %>/analytics/segments">
+  <div class="card mb-4">
+    <div class="card-body">
+      <div class="flex items-end gap-3 flex-wrap">
+        <div class="shrink-0">
+          <label for="browser" class="label">Browser</label>
+          <select name="browser" id="browser" class="select" style="width:8rem">
+            <option value="">Any</option>
+            <% view.browser_options.each do |b| -%>
+              <option value="<%= view.h(b) %>" <%= view.filters[:browser] == b ? "selected" : "" %>><%= view.h(b) %></option>
+            <% end -%>
+          </select>
+        </div>
+        <div class="shrink-0">
+          <label for="device" class="label">Device</label>
+          <select name="device" id="device" class="select" style="width:8rem">
+            <option value="">Any</option>
+            <% view.device_options.each do |d| -%>
+              <option value="<%= view.h(d) %>" <%= view.filters[:device] == d ? "selected" : "" %>><%= view.h(d) %></option>
+            <% end -%>
+          </select>
+        </div>
+        <div class="shrink-0">
+          <label for="url_pattern" class="label">URL pattern</label>
+          <input type="text" name="url_pattern" id="url_pattern" class="input" style="width:12rem" value="<%= view.h(view.filters[:url_pattern].to_s) %>" placeholder="substring or *glob*">
+        </div>
+      </div>
+
+      <div class="flex items-end gap-3 flex-wrap mt-3">
+        <div class="shrink-0">
+          <label for="metadata_key" class="label">Metadata key</label>
+          <input type="text" name="metadata_key" id="metadata_key" class="input" style="width:9rem" value="<%= view.h(view.filters[:metadata_key].to_s) %>">
+        </div>
+        <div class="shrink-0">
+          <label for="metadata_value" class="label">Metadata value</label>
+          <input type="text" name="metadata_value" id="metadata_value" class="input" style="width:9rem" value="<%= view.h(view.filters[:metadata_value].to_s) %>">
+        </div>
+        <div class="shrink-0">
+          <label for="metadata_match" class="label">Match</label>
+          <select name="metadata_match" id="metadata_match" class="select" style="width:7rem">
+            <option value="exact" <%= view.filters[:metadata_match] == "exact" ? "selected" : "" %>>exact</option>
+            <option value="contains" <%= view.filters[:metadata_match] == "contains" ? "selected" : "" %>>contains</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="flex items-end gap-3 flex-wrap mt-3">
+        <%= view.render_partial("_date_range.html.erb",
+          since: view.filters[:since_param].to_s, until_str: view.filters[:until_param].to_s) %>
+        <div class="shrink-0">
+          <label for="min_duration" class="label">Min duration (s)</label>
+          <input type="number" min="0" name="min_duration" id="min_duration" class="input" style="width:8rem" value="<%= view.filters[:min_duration_ms] ? view.filters[:min_duration_ms] / 1000 : "" %>">
+        </div>
+        <div class="shrink-0">
+          <label for="max_duration" class="label">Max duration (s)</label>
+          <input type="number" min="0" name="max_duration" id="max_duration" class="input" style="width:8rem" value="<%= view.filters[:max_duration_ms] ? view.filters[:max_duration_ms] / 1000 : "" %>">
+        </div>
+        <div class="shrink-0 flex items-center gap-1.5 self-end pb-1.5">
+          <input type="checkbox" name="has_errors" id="has_errors" value="true" class="checkbox" <%= view.filters[:has_errors] ? "checked" : "" %>>
+          <label for="has_errors" class="label mb-0">Has errors</label>
+        </div>
+        <div class="shrink-0 flex items-center gap-1.5">
+          <button type="submit" class="btn btn-primary">Filter</button>
+          <a href="<%= view.h(view.base_path) %>/analytics/segments" class="btn btn-secondary">Clear</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+
+<%= view.render_partial("_truncation_warning.html.erb", was_truncated: view.was_truncated, noun: "matching sessions") %>
+
+<% if view.sessions.empty? -%>
+  <div class="card">
+    <div class="text-center py-10 px-6 text-gray-400 text-xs">
+      No sessions matched this filter.
+    </div>
+  </div>
+<% else -%>
+  <div class="table-wrap">
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>Session ID</th>
+          <th>Page</th>
+          <th>Device</th>
+          <th>Windows</th>
+          <th>Events</th>
+          <th>Duration</th>
+          <th>Last Activity</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% view.sessions.each do |s| -%>
+          <%= view.render_session_row(s, false) %>
+        <% end -%>
+      </tbody>
+    </table>
+  </div>
+
+  <nav aria-label="Segment pagination" class="mt-3">
+    <ul class="pagination">
+      <li class="<%= 'page-disabled' if view.page <= 1 %>">
+        <a class="page-link" href="<%= view.h(view.base_path) %>/analytics/segments?<%= view.h(view.filter_query) %>&amp;per_page=<%= view.per_page %>&amp;page=<%= view.page - 1 %>">Previous</a>
+      </li>
+      <li class="<%= 'page-disabled' unless view.has_next %>">
+        <a class="page-link" href="<%= view.h(view.base_path) %>/analytics/segments?<%= view.h(view.filter_query) %>&amp;per_page=<%= view.per_page %>&amp;page=<%= view.page + 1 %>">Next</a>
+      </li>
+    </ul>
+  </nav>
+<% end -%>

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

@@ -0,0 +1,195 @@
+<div class="card mb-3">
+  <div class="flex items-center gap-2 px-4 py-2.5">
+    <a href="<%= view.h(view.base_path) %>/" class="btn btn-sm btn-secondary shrink-0">&larr; Back</a>
+    <div class="w-px h-4 bg-gray-200 shrink-0"></div>
+    <% if view.meta && view.meta["userAgent"] -%>
+      <span class="badge badge-neutral shrink-0"><%= view.h(view.parse_browser(view.meta["userAgent"]).to_s) %></span>
+      <span class="badge badge-neutral shrink-0"><%= view.h(view.parse_device(view.meta["userAgent"]).to_s) %></span>
+    <% end -%>
+    <span id="viewport-info" class="badge badge-info shrink-0" style="display:none"></span>
+    <span id="scroll-depth-info" class="badge badge-info shrink-0" style="display:none"></span>
+    <span class="badge badge-neutral shrink-0"><%= view.h(view.duration_str) %></span>
+    <span class="badge badge-neutral shrink-0"><%= view.total_events %> events</span>
+    <span id="web-vitals-badges" class="items-center gap-2 shrink-0" style="display:none"></span>
+    <div class="flex-1"></div>
+    <button id="toggle-clicks-btn" class="btn btn-sm btn-secondary shrink-0" data-action="toggle-clicks" aria-pressed="false">Clicks</button>
+    <button id="copy-link-btn" class="btn btn-sm btn-secondary shrink-0" data-action="copy-link">Copy Link</button>
+    <button class="btn btn-sm btn-secondary shrink-0" data-action="download-json">Download JSON</button>
+    <% if view.shareable_replays -%>
+      <a class="btn btn-sm btn-secondary shrink-0" href="<%= view.h(view.base_path) %>/analytics/share/<%= view.h(view.session_id) %>">Download HTML</a>
+    <% end -%>
+  </div>
+</div>
+
+<% if view.multi_window? -%>
+  <div class="window-switcher">
+    <span class="window-switcher-label">Tabs</span>
+    <div class="flex items-center gap-1 flex-wrap">
+      <% view.tabs[:visible].each do |tab| -%>
+        <%= view.render_partial("_window_tab.html.erb", session_id: view.session_id,
+              window: tab[:window], tab_num: tab[:tab_num],
+              css_class: (tab[:window][:window_id] == view.window_id) ? "btn btn-sm btn-active" : "btn btn-sm btn-secondary") %>
+      <% end -%>
+      <% unless view.tabs[:overflow].empty? -%>
+        <details class="window-overflow">
+          <summary class="btn btn-sm btn-secondary">+<%= view.tabs[:overflow].size %> more</summary>
+          <div class="window-overflow-menu">
+            <% view.tabs[:overflow].each do |tab| -%>
+              <%= view.render_partial("_window_tab.html.erb", session_id: view.session_id,
+                    window: tab[:window], tab_num: tab[:tab_num],
+                    css_class: (tab[:window][:window_id] == view.window_id) ? "active" : "") %>
+            <% end -%>
+          </div>
+        </details>
+      <% end -%>
+    </div>
+  </div>
+<% end -%>
+
+<div class="grid grid-cols-1 lg:grid-cols-[1fr_280px] gap-3">
+  <div>
+    <div class="player-frame">
+      <div id="event-markers" style="display:none"></div>
+      <div id="replayer"></div>
+    </div>
+  </div>
+  <div>
+    <div id="activity-sidebar" style="display:none">
+      <h6 class="text-xs font-semibold text-gray-700 mb-2 flex items-center gap-1.5">Activity <span id="activity-count" class="badge badge-neutral"></span></h6>
+      <div id="activity-list"></div>
+    </div>
+  </div>
+</div>
+
+<div class="card mt-4">
+  <div class="card-body">
+    <h6 class="text-xs font-semibold text-gray-800 mb-3 uppercase tracking-wider">Session Details</h6>
+    <div class="grid grid-cols-[100px_1fr] gap-x-4 gap-y-2">
+      <div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider pt-0.5">Session ID</div>
+      <div class="session-id"><%= view.h(view.session_id) %></div>
+
+      <div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider pt-0.5">Duration</div>
+      <div class="text-xs text-gray-600"><%= view.h(view.duration_str) %> <span id="active-time" class="text-gray-400" style="display:none"></span></div>
+
+      <div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider pt-0.5">Started</div>
+      <div class="text-xs text-gray-600"><%= view.session[:created_at] ? Time.at(view.session[:created_at]).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">Tabs</div>
+      <div class="text-xs text-gray-600"><%= view.session[:windows]&.size || 0 %></div>
+
+      <div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider pt-0.5">Total Events</div>
+      <div class="text-xs text-gray-600"><%= view.total_events %></div>
+
+      <% if view.multi_window? -%>
+        <div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider pt-0.5">Per tab</div>
+        <div class="text-xs text-gray-600">
+          <% view.tabs[:all].each_with_index do |tab, i| -%>
+            Tab <%= tab[:tab_num] %>: <%= tab[:window][:event_count] %> events<%= i < view.tabs[:all].size - 1 ? ", " : "" %>
+          <% end -%>
+        </div>
+      <% end -%>
+
+      <% if view.meta -%>
+        <% if view.meta["url"] -%>
+          <div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider pt-0.5">Page URL</div>
+          <div class="text-xs text-gray-600 break-all"><%= view.h(view.meta["url"]) %></div>
+        <% end -%>
+
+        <% if view.meta["referrer"] && !view.meta["referrer"].empty? -%>
+          <div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider pt-0.5">Referrer</div>
+          <div class="text-xs text-gray-600 break-all"><%= view.h(view.meta["referrer"]) %></div>
+        <% end -%>
+
+        <% if view.meta["userAgent"] -%>
+          <div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider pt-0.5">Browser</div>
+          <div class="text-xs text-gray-600"><%= view.h(view.parse_browser(view.meta["userAgent"]).to_s) %> (<%= view.h(view.parse_device(view.meta["userAgent"]).to_s) %>)</div>
+        <% end -%>
+
+        <% if view.meta["viewport"] -%>
+          <div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider pt-0.5">Viewport</div>
+          <div class="text-xs text-gray-600"><%= view.h(view.meta["viewport"]) %></div>
+        <% end -%>
+
+        <% unless view.custom_keys.empty? -%>
+          <% view.custom_keys.each do |key| -%>
+            <div class="text-[10px] font-medium text-gray-400 uppercase tracking-wider pt-0.5"><%= view.h(key) %></div>
+            <div class="text-xs text-gray-600"><%= view.h(view.meta[key].to_s) %></div>
+          <% end -%>
+        <% end -%>
+      <% end -%>
+    </div>
+
+    <hr class="my-4 border-gray-100">
+    <form method="post" action="<%= view.h(view.base_path) %>/sessions/<%= view.h(view.session_id) %>/windows/<%= view.h(view.window_id) %>?_method=delete" class="inline">
+      <input type="hidden" name="csrf_token" value="<%= view.h(view.csrf_token) %>">
+      <button type="submit" class="btn btn-sm btn-ghost-danger" data-action="confirm-delete" data-confirm="<%= view.multi_window? ? "Delete this tab recording? This cannot be undone." : "Delete this recording and its session? This cannot be undone." %>">
+        <%= view.multi_window? ? "Delete this tab" : "Delete recording" %>
+      </button>
+    </form>
+  </div>
+</div>
+
+<% if view.server_activity && !view.server_activity.empty? -%>
+<div id="server-activity" class="card mt-4">
+  <div class="card-body">
+    <div class="flex items-center gap-3 mb-3 flex-wrap">
+      <h6 class="text-xs font-semibold text-gray-800 uppercase tracking-wider">Server Activity</h6>
+      <div class="flex items-center gap-1" data-activity-filter-type>
+        <button type="button" class="btn btn-sm btn-active" data-filter-type="all">All</button>
+        <button type="button" class="btn btn-sm btn-secondary" data-filter-type="exception">Exceptions</button>
+        <button type="button" class="btn btn-sm btn-secondary" data-filter-type="event">Events</button>
+      </div>
+      <select class="select" style="width:7rem" data-activity-filter-level>
+        <option value="">All levels</option>
+        <option value="info">info</option>
+        <option value="warn">warn</option>
+        <option value="error">error</option>
+        <option value="debug">debug</option>
+      </select>
+    </div>
+    <% view.server_activity.each do |item| -%>
+      <% if item[:kind] == "exception" -%>
+        <%- occ = item[:occurrence] -%>
+        <div class="flex items-start gap-2 py-1.5 border-l-2 border-red-400 bg-red-50 rounded mb-1 px-2" data-activity-row data-activity-kind="exception">
+          <span class="text-[10px] text-gray-400 shrink-0 tabular-nums font-mono pt-0.5">
+            <%= item[:timestamp] > 0 ? Time.at(item[:timestamp]).utc.strftime("%H:%M:%S") : "" %>
+          </span>
+          <span class="badge badge-danger shrink-0 text-[10px]">EXCEPTION</span>
+          <span class="badge badge-neutral shrink-0 text-[10px]"><%= view.h(occ["exception_class"].to_s) %></span>
+          <a href="<%= view.h(view.base_path) %>/issues/<%= view.h(occ["fingerprint"].to_s) %>" class="text-xs text-red-700 hover:text-red-900 flex-1 truncate">
+            <%= view.h(occ["message"].to_s[0, 100]) %>
+          </a>
+        </div>
+      <% else -%>
+        <%- event = item[:event] -%>
+        <div class="flex items-start gap-2 py-1.5 border-l-2 border-indigo-400 bg-indigo-50 rounded mb-1 px-2" data-activity-row data-activity-kind="event" data-activity-level="<%= view.h(event["level"].to_s) %>">
+          <span class="text-[10px] text-gray-400 shrink-0 tabular-nums font-mono pt-0.5">
+            <%= item[:timestamp] > 0 ? Time.at(item[:timestamp]).utc.strftime("%H:%M:%S") : "" %>
+          </span>
+          <span class="badge badge-info shrink-0 text-[10px]">EVENT</span>
+          <span class="badge badge-neutral shrink-0 text-[10px]"><%= view.h(event["level"].to_s) %></span>
+          <span class="text-xs text-indigo-700 flex-1">
+            <% if event["id"] -%>
+              <a href="<%= view.h(view.base_path) %>/custom-events/<%= view.h(event["id"].to_s) %>" class="text-indigo-700 hover:text-indigo-900 hover:underline"><%= view.h(event["name"].to_s) %></a>
+            <% else -%>
+              <%= view.h(event["name"].to_s) %>
+            <% end -%>
+            <% if event["payload"].is_a?(Hash) && !event["payload"].empty? -%>
+              <details class="inline-block align-middle ml-1">
+                <summary class="text-[10px] text-indigo-400 cursor-pointer select-none">payload</summary>
+                <div class="text-[10px] text-gray-600 bg-indigo-50 rounded p-1 mt-0.5 font-mono break-all"><%= view.h(event["payload"].to_json) %></div>
+              </details>
+            <% end -%>
+          </span>
+        </div>
+      <% end -%>
+    <% end -%>
+  </div>
+</div>
+<% end -%>
+
+<script type="application/json" id="sentiero-player-config"><%= view.escape_json(JSON.generate({eventsUrl: "#{view.base_path}/api/sessions/#{view.session_id}/windows/#{view.window_id}/events"})) %></script>
+<script type="application/json" id="server-activity-markers"><%= view.escape_json(JSON.generate(view.server_markers || [])) %></script>
+<link rel="stylesheet" href="<%= view.built_asset('rrweb-player-css') %>">
+<script src="<%= view.built_asset('rrweb-player') %>"></script>
+<script src="<%= view.built_asset('dashboard') %>"></script>