railswatch 1.0.0

data/app/views/railswatch/railswatch/_overview.html.erb

@@ -0,0 +1,124 @@
+<section class="rm-overview-grid">
+  <div class="rm-surface rm-overview-panel rm-overview-panel--metrics">
+    <div class="rm-section-heading">
+      <div>
+        <p class="rm-section-heading__eyebrow">Snapshot</p>
+        <h2 class="rm-section-heading__title">Health at a glance</h2>
+      </div>
+      <p class="rm-section-heading__meta">
+        <% if @overview[:latest_request_at].present? %>
+          Last sample <%= format_rm_datetime(@overview[:latest_request_at]) %>
+        <% else %>
+          Waiting for incoming traffic
+        <% end %>
+      </p>
+    </div>
+
+    <div class="rm-kpi-grid">
+      <article class="rm-kpi-card" data-tone="neutral">
+        <span class="rm-kpi-card__label">Total requests</span>
+        <strong class="rm-kpi-card__value"><%= compact_number(@overview[:total_requests]) %></strong>
+        <span class="rm-kpi-card__meta">Requests captured in scope</span>
+      </article>
+
+      <article class="rm-kpi-card" data-tone="healthy">
+        <span class="rm-kpi-card__label">Average response</span>
+        <strong class="rm-kpi-card__value"><%= ms(@overview[:average_duration]) %></strong>
+        <span class="rm-kpi-card__meta">Mean request runtime</span>
+      </article>
+
+      <article class="rm-kpi-card" data-tone="<%= health_tone(@overview[:error_rate]) %>">
+        <span class="rm-kpi-card__label">Error rate</span>
+        <strong class="rm-kpi-card__value"><%= percentage(@overview[:error_rate]) %></strong>
+        <span class="rm-kpi-card__meta">5xx share of observed traffic</span>
+      </article>
+
+      <article class="rm-kpi-card" data-tone="<%= @overview[:slow_requests].positive? ? 'warning' : 'healthy' %>">
+        <span class="rm-kpi-card__label">Slow requests</span>
+        <strong class="rm-kpi-card__value"><%= compact_number(@overview[:slow_requests]) %></strong>
+        <span class="rm-kpi-card__meta">Above <%= Railswatch.slow_requests_threshold %> ms</span>
+      </article>
+
+      <article class="rm-kpi-card" data-tone="neutral">
+        <span class="rm-kpi-card__label">Unique endpoints</span>
+        <strong class="rm-kpi-card__value"><%= compact_number(@overview[:unique_endpoints]) %></strong>
+        <span class="rm-kpi-card__meta">Controllers and actions in window</span>
+      </article>
+    </div>
+  </div>
+
+  <div class="rm-surface rm-overview-panel">
+    <div class="rm-section-heading">
+      <div>
+        <p class="rm-section-heading__eyebrow">Insights</p>
+        <h2 class="rm-section-heading__title">Primary signals</h2>
+      </div>
+    </div>
+
+    <div class="rm-insight-list">
+      <article class="rm-insight-item">
+        <span class="rm-insight-item__label">Busiest endpoint</span>
+        <strong class="rm-insight-item__value"><%= @overview.dig(:busiest_endpoint, :name) || 'No data yet' %></strong>
+        <span class="rm-insight-item__meta"><%= compact_number(@overview.dig(:busiest_endpoint, :count)) %> requests</span>
+      </article>
+
+      <article class="rm-insight-item">
+        <span class="rm-insight-item__label">Slowest p95 endpoint</span>
+        <strong class="rm-insight-item__value"><%= @overview.dig(:slowest_endpoint, :name) || 'No data yet' %></strong>
+        <span class="rm-insight-item__meta"><%= ms(@overview.dig(:slowest_endpoint, :p95_duration)) %> at p95</span>
+      </article>
+    </div>
+  </div>
+
+  <div class="rm-surface rm-overview-panel">
+    <div class="rm-section-heading">
+      <div>
+        <p class="rm-section-heading__eyebrow">Traffic leaders</p>
+        <h2 class="rm-section-heading__title">Most active endpoints</h2>
+      </div>
+    </div>
+
+    <div class="rm-ranking-list">
+      <% if @traffic_leaders.empty? %>
+        <p class="rm-empty-state">No request volume yet.</p>
+      <% else %>
+        <% @traffic_leaders.each_with_index do |row, index| %>
+          <article class="rm-ranking-item">
+            <span class="rm-ranking-item__index"><%= index + 1 %></span>
+            <div class="rm-ranking-item__body">
+              <strong class="rm-ranking-item__title"><%= row[:group] %></strong>
+              <span class="rm-ranking-item__meta"><%= compact_number(row[:count]) %> requests</span>
+            </div>
+            <span class="rm-ranking-item__value"><%= ms(row[:p95_duration]) %></span>
+          </article>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+
+  <div class="rm-surface rm-overview-panel">
+    <div class="rm-section-heading">
+      <div>
+        <p class="rm-section-heading__eyebrow">Latency leaders</p>
+        <h2 class="rm-section-heading__title">Highest p95 endpoints</h2>
+      </div>
+    </div>
+
+    <div class="rm-ranking-list">
+      <% if @latency_leaders.empty? %>
+        <p class="rm-empty-state">No latency data yet.</p>
+      <% else %>
+        <% @latency_leaders.each_with_index do |row, index| %>
+          <article class="rm-ranking-item">
+            <span class="rm-ranking-item__index"><%= index + 1 %></span>
+            <div class="rm-ranking-item__body">
+              <strong class="rm-ranking-item__title"><%= row[:group] %></strong>
+              <span class="rm-ranking-item__meta"><%= compact_number(row[:count]) %> requests</span>
+            </div>
+            <span class="rm-ranking-item__value"><%= ms(row[:p95_duration]) %></span>
+          </article>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+</section>

data/app/views/railswatch/railswatch/_rake_tasks_table_content.html.erb

@@ -0,0 +1,25 @@
+<table class="<%= table.table_classes %>">
+  <thead>
+    <tr>
+      <th data-sort="string">Datetime</th>
+      <th data-sort="string">Details</th>
+      <th data-sort="float">Duration</th>
+      <th data-sort="string">Status</th>
+    </tr>
+  </thead>
+  <tbody>
+    <% if table.data.empty? %>
+      <tr>
+        <td colspan="4"><%= table.empty_message %></td>
+      </tr>
+    <% end %>
+    <% table.data.each do |e| %>
+      <tr>
+        <td><%= format_rm_datetime e[:datetime] %></td>
+        <td>[<%= e[:task].join(" ") %>]</td>
+        <td class="nowrap"><%= ms e[:duration] %></td>
+        <td><%= status_tag e[:status] %></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

data/app/views/railswatch/railswatch/_recent_requests_table_content.html.erb

@@ -0,0 +1,28 @@
+<table id="<%= table.table_id %>" class="<%= table.table_classes %>">
+  <thead>
+    <tr>
+      <th data-sort="string"></th>
+      <th data-sort="string">Datetime</th>
+      <th data-sort="string">Controller#action</th>
+      <th data-sort="string">Method</th>
+      <th data-sort="string">Format</th>
+      <th></th>
+      <th data-sort="string">Path</th>
+      <th data-sort="string">Status</th>
+      <th data-sort="float">Duration</th>
+      <th data-sort="float">Views</th>
+      <th data-sort="float">DB</th>
+      <th></th>
+    </tr>
+  </thead>
+  <tbody>
+    <% if table.data.empty? %>
+      <tr>
+        <td colspan="12"><%= table.empty_message %></td>
+      </tr>
+    <% end %>
+    <% table.data.each do |e| %>
+      <%= render 'recent_row', e: e %>
+    <% end %>
+  </tbody>
+</table>

data/app/views/railswatch/railswatch/_recent_row.html.erb

@@ -0,0 +1,41 @@
+<tr from_timei="<%= e[:datetimei] %>">
+  <td>
+    <% if e[:request_id].present? %>
+      <%= link_to railswatch.railswatch_trace_path(id: e[:request_id]), remote: true do %>
+        <span class="stats_icon_max"><%= icon 'activity' %></span>
+      <% end %>
+    <% end %>
+  </td>
+  <td><%= format_rm_datetime e[:datetime] %></td>
+  <td>
+    <% controller_action_info = e[:controller] + '#' + e[:action]%>
+    <%= link_to railswatch.railswatch_summary_path({controller_eq: e[:controller], action_eq: e[:action]}), remote: true, title: controller_action_info do %>
+      <span class="details_icon">
+        <%= icon 'details' %>
+      </span>
+      <%= truncate(controller_action_info, length: 40) %>
+    <% end %>
+  </td>
+  <td><%= e[:method] %></td>
+  <td><%= e[:format] %></td>
+  <td><%= bot_icon e["user_agent"] %></td>
+  <td>
+    <span class="with_external_icon">
+      <%= link_to_path(e) %>
+      <span class="icon external_icon">
+        <%= icon('external') %>
+      </span>
+    </span>
+  </td>
+  <td><%= status_tag e[:status] %></td>
+  <td class="nowrap"><%= ms e[:duration] %></td>
+  <td class="nowrap"><%= ms e[:view_runtime] %></td>
+  <td class="nowrap"><%= ms e[:db_runtime] %></td>
+  <td>
+    <% if e[:request_id].present? %>
+      <%= link_to railswatch.railswatch_trace_path(id: e[:request_id]), remote: true do %>
+        <span class="stats_icon_max"><%= icon 'activity' %></span>
+      <% end %>
+    <% end %>
+  </td>
+</tr>

data/app/views/railswatch/railswatch/_requests_table_content.html.erb

@@ -0,0 +1,51 @@
+<table class="<%= table.table_classes %>">
+  <thead>
+    <tr>
+      <th colspan='3'>Name</th>
+      <th colspan='3' class="attention">Percentile</th>
+      <th colspan='3'>Average</th>
+      <th colspan='3'>Slowest</th>
+    </tr>
+    <tr>
+      <th data-sort="string">Controller#action</th>
+      <th data-sort="string">Format</th>
+      <th data-sort="int">Requests</th>
+      <th data-sort="float" class="attention">P50</th>
+      <th data-sort="float" class="attention">P95</th>
+      <th data-sort="float" class="attention">P99</th>
+      <th data-sort="float">Duration</th>
+      <th data-sort="float">Views</th>
+      <th data-sort="float">DB</th>
+      <th data-sort="float">Duration</th>
+      <th data-sort="float">Views</th>
+      <th data-sort="float">DB</th>
+    </tr>
+  </thead>
+  <tbody>
+    <% table.data.each do |e| %>
+      <% groups = e[:group].split("|") %>
+      <% c, a = groups[0].split("#") %>
+      <tr>
+        <td>
+          <%= link_to railswatch.railswatch_summary_path({controller_eq: c, action_eq: a}), remote: true do %>
+            <span class="details_icon">
+              <%= icon 'details' %>
+            </span>
+            <%= groups[0] %>
+          <% end %>
+        </td>
+        <td><%= link_to groups[1].try(:upcase),  railswatch.railswatch_summary_path({controller_eq: c, action_eq: a, format_eq: groups[1]}), remote: true %></td>
+        <td><%= e[:count] %></td>
+        <td class="nowrap attention"><%= ms e[:p50_duration] %></td>
+        <td class="nowrap attention"><%= ms e[:p95_duration] %></td>
+        <td class="nowrap attention"><%= ms e[:p99_duration] %></td>
+        <td class="nowrap"><%= ms e[:duration_average] %></td>
+        <td class="nowrap"><%= ms e[:view_runtime_average] %></td>
+        <td class="nowrap"><%= ms e[:db_runtime_average] %></td>
+        <td class="nowrap"><%= ms e[:duration_slowest] %></td>
+        <td class="nowrap"><%= ms e[:view_runtime_slowest] %></td>
+        <td class="nowrap"><%= ms e[:db_runtime_slowest] %></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

data/app/views/railswatch/railswatch/_sidekiq_jobs_table_content.html.erb

@@ -0,0 +1,50 @@
+<table class="<%= table.table_classes %>">
+  <thead>
+    <tr>
+      <th data-sort="string">Datetime</th>
+      <th data-sort="string">Queue</th>
+      <th data-sort="string">Worker</th>
+      <th data-sort="string">Job ID</th>
+      <th data-sort="string">Status</th>
+      <th data-sort="float">Duration</th>
+      <th>Args</th>
+      <th>Message / Backtrace</th>
+    </tr>
+  </thead>
+  <tbody>
+    <% if table.data.empty? %>
+      <tr>
+        <td colspan="8"><%= table.empty_message %></td>
+      </tr>
+    <% end %>
+    <% table.data.each do |e| %>
+      <tr>
+        <td><%= format_rm_datetime e[:datetime] %></td>
+        <td><%= e[:queue] %></td>
+        <td><%= e[:worker] %></td>
+        <td><%= e[:jid] %></td>
+        <td><%= status_tag e[:status] %></td>
+        <td class="nowrap"><%= ms e[:duration] %></td>
+        <td class="very-small-text">
+          <% args = e[:job_args] %>
+          <% if args.present? %>
+            <%= args.is_a?(Array) ? args.map(&:inspect).join(', ') : args.inspect %>
+          <% else %>
+            -
+          <% end %>
+        </td>
+        <td>
+          <% if e[:message].present? %>
+            <div><%= e[:message] %></div>
+          <% end %>
+          <% if e[:error_backtrace].present? %>
+            <pre class="rm-backtrace rm-backtrace-inline"><%= e[:error_backtrace] %></pre>
+          <% end %>
+          <% if e[:message].blank? && e[:error_backtrace].blank? %>
+            -
+          <% end %>
+        </td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

data/app/views/railswatch/railswatch/_summary.html.erb

@@ -0,0 +1,50 @@
+<h2 class="rm-panel-section-title">Throughput</h2>
+<railswatch-chart id="throughput_report_chart_mini" type="TIR" legend="RPM" units="rpm" class="chart_mini">
+  <%= raw @throughput_report_data.to_json %>
+</railswatch-chart>
+
+<h2 class="rm-panel-section-title">Average Response Time</h2>
+<railswatch-chart id="response_time_report_chart_mini" type="RT" legend="Response Time" class="chart_mini">
+  <%= raw @response_time_report_data.to_json %>
+</railswatch-chart>
+
+<h2 class="rm-panel-section-title"><%= title %></h2>
+<div class="rm-table-shell">
+  <table class="table is-fullwidth is-hoverable is-narrow is-size-8">
+    <thead>
+      <tr>
+        <th data-sort="string">Datetime</th>
+        <th data-sort="string">Method</th>
+        <th></th>
+        <th data-sort="string">Path</th>
+        <th data-sort="string">Format</th>
+        <th data-sort="int">Status</th>
+        <th data-sort="float">Duration</th>
+        <th data-sort="float">Views</th>
+        <th data-sort="float">DB</th>
+      </tr>
+    </thead>
+    <tbody>
+      <% @data.each do |e| %>
+        <tr>
+          <td><%= format_rm_datetime e[:datetime] %></td>
+          <td><%= e[:method] %></td>
+          <td><%= bot_icon e["user_agent"] %></td>
+          <td>
+            <span class="with_external_icon">
+              <%= link_to_path(e) %>
+              <span class="icon external_icon">
+                <%= icon('external') %>
+              </span>
+            </span>
+          </td>
+          <td><%= e[:format] %></td>
+          <td><%= status_tag e[:status] %></td>
+          <td class="nowrap"><%= ms e[:duration] %></td>
+          <td class="nowrap"><%= ms e[:view_runtime] %></td>
+          <td class="nowrap"><%= ms e[:db_runtime] %></td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>

data/app/views/railswatch/railswatch/_table.html.erb

@@ -0,0 +1,30 @@
+<section class="rm-surface rm-widget-card rm-widget-card--table">
+  <header class="rm-widget-card__header">
+    <div>
+      <h2 class="rm-widget-card__title"><%= table.subtitle %></h2>
+    </div>
+
+    <div class="rm-widget-card__actions">
+      <% if table.show_export? %>
+        <%= render "export" %>
+      <% end %>
+    </div>
+  </header>
+
+  <div class="rm-widget-card__body">
+    <% if table.auto_update_interval %>
+      <div class="rm-widget-card__toolbar">
+        <railswatch-autoupdate interval="<%= table.auto_update_interval %>">
+          <label class="rm-toggle">
+            <input type="checkbox" />
+            <span>Auto-update</span>
+          </label>
+        </railswatch-autoupdate>
+      </div>
+    <% end %>
+
+    <div class="rm-table-shell">
+      <%= render table.content_partial_path, table: table %>
+    </div>
+  </div>
+</section>

data/app/views/railswatch/railswatch/_trace.html.erb

@@ -0,0 +1,78 @@
+<% ctx = @record&.request_context.presence %>
+<% bt = @record&.backtrace.presence %>
+
+<% if ctx.present? %>
+  <h2 class="rm-panel-section-title">Request Context</h2>
+  <div class="rm-context-grid">
+    <% if ctx['ip'].present? %>
+      <div class="rm-context-row">
+        <span class="rm-context-label">IP</span>
+        <span class="rm-context-value"><%= ctx['ip'] %></span>
+      </div>
+    <% end %>
+    <% if ctx['user_agent'].present? %>
+      <div class="rm-context-row">
+        <span class="rm-context-label">User Agent</span>
+        <span class="rm-context-value rm-context-ua"><%= ctx['user_agent'] %></span>
+      </div>
+    <% end %>
+    <% if ctx['user'].present? %>
+      <div class="rm-context-row">
+        <span class="rm-context-label">User</span>
+        <span class="rm-context-value">
+          <% ctx['user'].each do |k, v| %>
+            <span class="rm-context-kv"><strong><%= k %>:</strong> <%= v %></span>
+          <% end %>
+        </span>
+      </div>
+    <% end %>
+    <% if ctx['params'].present? %>
+      <div class="rm-context-row">
+        <span class="rm-context-label">Params</span>
+        <span class="rm-context-value">
+          <% ctx['params'].each do |k, v| %>
+            <span class="rm-context-kv"><strong><%= k %>:</strong> <%= v %></span>
+          <% end %>
+        </span>
+      </div>
+    <% end %>
+  </div>
+<% end %>
+
+<% if bt.present? %>
+  <h2 class="rm-panel-section-title">Exception Backtrace</h2>
+  <pre class="rm-backtrace"><%= bt.join("\n") %></pre>
+<% end %>
+
+<h2 class="rm-panel-section-title">Trace</h2>
+<div class="rm-table-shell">
+  <table class="table is-fullwidth is-hoverable is-narrow is-size-7">
+    <tbody>
+      <% @data.each do |e| %>
+        <tr>
+          <% if e["group"] == 'db' %>
+            <td class="nowrap has-text-right <%= duration_alert_class(e['duration']) %>">
+              <%= e["duration"] %> ms
+            </td>
+            <td>
+              <%= e["sql"] %>
+            </td>
+          <% elsif e["group"] == 'view' %>
+            <td class="nowrap has-text-right <%= duration_alert_class(extract_duration(e['message'])) %>">
+              <%= extract_duration(e["message"]) %>
+            </td>
+            <td>
+              <%= e["message"] %>
+            </td>
+          <% end %>
+        </tr>
+      <% end %>
+
+      <% if @data.empty? %>
+        <tr>
+          <td>Nothing to show here. Perhaps details about the request already expired. Setting "slow_requests_time_window" equal to "duration" helps keep traces available.</td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>

data/app/views/railswatch/railswatch/crashes.html.erb

@@ -0,0 +1,2 @@
+<%= render 'railswatch/shared/page_header', **page_meta(:crashes) %>
+<%= render @table %>

data/app/views/railswatch/railswatch/custom.html.erb

@@ -0,0 +1,6 @@
+<%= render 'railswatch/shared/page_header', **page_meta(:custom) %>
+<div class="rm-widget-stack">
+  <% @widgets.each do |widget| %>
+    <%= render widget %>
+  <% end %>
+</div>

data/app/views/railswatch/railswatch/delayed_job.html.erb

@@ -0,0 +1,6 @@
+<%= render 'railswatch/shared/page_header', **page_meta(:delayed_job) %>
+<div class="rm-widget-stack">
+  <% @widgets.each do |widget| %>
+    <%= render widget %>
+  <% end %>
+</div>

data/app/views/railswatch/railswatch/grape.html.erb

@@ -0,0 +1,6 @@
+<%= render 'railswatch/shared/page_header', **page_meta(:grape) %>
+<div class="rm-widget-stack">
+  <% @widgets.each do |widget| %>
+    <%= render widget %>
+  <% end %>
+</div>

data/app/views/railswatch/railswatch/index.html.erb

@@ -0,0 +1,9 @@
+<%= render 'railswatch/shared/page_header', **page_meta(:index), autoupdate_interval: '10s' %>
+
+<%= render 'overview' %>
+
+<% @widgets.each do |row| %>
+  <div class="row rm-widget-row">
+    <%= render row %>
+  </div>
+<% end %>

data/app/views/railswatch/railswatch/rake.html.erb

@@ -0,0 +1,6 @@
+<%= render 'railswatch/shared/page_header', **page_meta(:rake) %>
+<div class="rm-widget-stack">
+  <% @widgets.each do |widget| %>
+    <%= render widget %>
+  <% end %>
+</div>

data/app/views/railswatch/railswatch/recent.html.erb

@@ -0,0 +1,2 @@
+<%= render 'railswatch/shared/page_header', **page_meta(:recent), autoupdate_interval: '10s' %>
+<%= render @table %>

data/app/views/railswatch/railswatch/requests.html.erb

@@ -0,0 +1,2 @@
+<%= render 'railswatch/shared/page_header', **page_meta(:requests) %>
+<%= render @table %>

data/app/views/railswatch/railswatch/resources.html.erb

@@ -0,0 +1,28 @@
+<%= render 'railswatch/shared/page_header', **page_meta(:resources), autoupdate_interval: '10s' %>
+
+<% @resources_report.servers.each do |server| %>
+  <section class="rm-resource-group">
+    <div class="rm-resource-group__header">
+      <p class="rm-section-heading__eyebrow">Server</p>
+      <h2 class="rm-resource-group__title"><%= server.name %></h2>
+    </div>
+
+    <div class="rm-resource-grid">
+      <% server.charts.each do |chart| %>
+        <section class="rm-surface rm-widget-card">
+          <header class="rm-widget-card__header">
+            <div>
+              <h3 class="rm-widget-card__title"><%= chart.subtitle %></h3>
+            </div>
+          </header>
+          <div class="rm-widget-card__body">
+            <railswatch-chart id="<%= chart.id %>" type="<%= chart.type %>" legend="<%= chart.legend %>" class="chart">
+              <%= raw chart.data.to_json %>
+            </railswatch-chart>
+            <p class="rm-widget-card__description"><%= chart.description %></p>
+          </div>
+        </section>
+      <% end %>
+    </div>
+  </section>
+<% end %>

data/app/views/railswatch/railswatch/sidekiq.html.erb

@@ -0,0 +1,6 @@
+<%= render 'railswatch/shared/page_header', **page_meta(:sidekiq) %>
+<div class="rm-widget-stack">
+  <% @widgets.each do |widget| %>
+    <%= render widget %>
+  <% end %>
+</div>

data/app/views/railswatch/railswatch/slow.html.erb

@@ -0,0 +1,2 @@
+<%= render 'railswatch/shared/page_header', **page_meta(:slow) %>
+<%= render @table %>

data/app/views/railswatch/railswatch/summary.js.erb

@@ -0,0 +1,3 @@
+window.panel.header.html('<%= j report_name(@datasource.query) %>' + window.panel.close);
+window.panel.content.html("<%= j render '/railswatch/railswatch/summary', title: "Requests" %>");
+showPanel();

data/app/views/railswatch/railswatch/trace.js.erb

@@ -0,0 +1,9 @@
+<% if @record %>
+  window.panel.header.html("<%= j report_name(@record.record_hash.with_indifferent_access.except(*Railswatch.ignore_trace_headers)) %>" + window.panel.close);
+<% else %>
+  window.panel.header.html(window.panel.close);
+<% end %>
+
+window.panel.content.html("<%= j render '/railswatch/railswatch/trace' %>");
+
+showPanel();

data/app/views/railswatch/shared/_header.html.erb

@@ -0,0 +1,39 @@
+<header class="rm-topbar" data-skip-autoupdate>
+  <div class="rm-topbar__brand">
+    <%= link_to railswatch.railswatch_url, class: "rm-brand" do %>
+      <span class="rm-brand__mark">RM</span>
+      <span class="rm-brand__copy">
+        <strong>Railswatch</strong>
+        <small>Observe performance without leaving your app</small>
+      </span>
+    <% end %>
+  </div>
+
+  <div class="rm-topbar__controls">
+    <button type="button" class="rm-icon-button rm-mobile-nav-toggle" data-nav-toggle aria-expanded="false" aria-controls="railswatch-nav">
+      <span class="rm-mobile-nav-toggle__line"></span>
+      <span class="rm-mobile-nav-toggle__line"></span>
+      <span class="rm-mobile-nav-toggle__line"></span>
+      <span class="is-sr-only">Toggle navigation</span>
+    </button>
+
+    <button type="button" class="rm-icon-button" data-theme-toggle aria-label="Toggle color theme">
+      <span class="rm-theme-toggle__icon rm-theme-toggle__icon--sun"><%= icon('sun') %></span>
+      <span class="rm-theme-toggle__icon rm-theme-toggle__icon--moon"><%= icon('moon') %></span>
+      <span class="rm-theme-toggle__label" data-theme-label>Theme</span>
+    </button>
+
+    <%= link_to Railswatch.home_link, class: "rm-icon-button", aria: { label: 'Application home' } do %>
+      <span class="home_icon"><%= icon('home') %></span>
+      <span>Home</span>
+    <% end %>
+  </div>
+
+  <nav id="railswatch-nav" class="rm-nav" aria-label="Primary">
+    <% navigation_items.each do |item| %>
+      <%= link_to item[:path], class: "rm-nav__link #{active?(item[:section])}" do %>
+        <span><%= item[:label] %></span>
+      <% end %>
+    <% end %>
+  </nav>
+</header>