catpm 0.10.3 → 0.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c4147059f707d6d81dfc82021c4c56344701560054f5f11b1fb5411b58d94f2e
-  data.tar.gz: ce4180ae0fde1b5300d67d4919ff7883204ea61bcc2fe4b13d23fc8471abef2a
+  metadata.gz: cbcb0cbcfd4662600eb1cda7d1c0021eeef517a6793f5d0fcd661a56791b3703
+  data.tar.gz: 5dd4eb9d6ed12d8188efd6b1e7c70d87e412bbbe86a309bd174c7df54f4f3bad
 SHA512:
-  metadata.gz: 39314b333fefeab949b3cb10948e8efa5dd09fd51bf77194e7cc0542e159d1a693d83fea4fdbd7272e0968915154d68387a0e49bc0c28f10e0eb33d2934ae3db
-  data.tar.gz: ff02750df626ada2511ba6ead16311d8ea5afe42835b25a031328e765a432c7839dabdacc336e4a07ba0d69fffcac07b0795b767ca7905de4b8cc36cc2f81a11
+  metadata.gz: 8c72142f20072efae7ea12647c284fca8d264a38ac7241d6bec1c85c435adf4ffabf57a70022039f1451d96dcd8fd7273183f59aa217003b1089e38e41c9494f
+  data.tar.gz: 83a87862d28da06b7fe10c3306663a9e6b7ee117a4020e75b7f9c0ed9a13fe8239ce138a5ebd537d030aa4f9ec72e193edd11ee1cfd4de3e09a353b36bd01ad8

data/README.md

@@ -1,5 +1,5 @@
 gem build catpm.gemspec
-gem push catpm-0.10.2.gem
+gem push catpm-0.10.4.gem
 
 # Catpm
 

data/app/helpers/catpm/application_helper.rb

@@ -7,21 +7,23 @@ module Catpm
       'sql' => '#b8e4c6', 'view' => '#e4d4f4', 'cache' => '#fdd8b5',
       'http' => '#f9c4c0', 'mailer' => '#e4d4f4', 'storage' => '#fdd8b5',
       'custom' => '#dde2e8', 'code' => '#c8daf0', 'gem' => '#f0e0f0', 'other' => '#e8e8e8', 'controller' => '#b6d9f7',
-      'middleware' => '#f0dfa0', 'request' => '#b6d9f7', 'error' => '#fca5a5'
+      'middleware' => '#f0dfa0', 'request' => '#b6d9f7', 'job' => '#d4c5f9', 'error' => '#fca5a5'
     }.freeze
 
     SEGMENT_TEXT_COLORS = {
       'sql' => '#1a7f37', 'view' => '#6639a6', 'cache' => '#953800',
       'http' => '#a1110a', 'mailer' => '#6639a6', 'storage' => '#953800',
       'custom' => '#4b5563', 'code' => '#3b5998', 'gem' => '#7b3f9e', 'other' => '#9ca3af', 'controller' => '#0550ae',
-      'middleware' => '#7c5c00', 'request' => '#0550ae', 'error' => '#991b1b'
+      'middleware' => '#7c5c00', 'request' => '#0550ae', 'job' => '#6639a6', 'error' => '#991b1b'
     }.freeze
 
     BADGE_CLASSES = {
       'http' => 'badge-http', 'job' => 'badge-job', 'custom' => 'badge-custom',
       'sql' => 'badge-sql', 'view' => 'badge-view', 'cache' => 'badge-cache',
       'mailer' => 'badge-mailer', 'storage' => 'badge-storage',
-      'error' => 'badge-error', 'slow' => 'badge-slow', 'random' => 'badge-random'
+      'error' => 'badge-error', 'slow' => 'badge-slow', 'random' => 'badge-random',
+      'controller' => 'badge-controller', 'middleware' => 'badge-middleware',
+      'request' => 'badge-request', 'code' => 'badge-code', 'gem' => 'badge-gem'
     }.freeze
 
     SAMPLE_TYPE_LABELS = {

data/app/views/catpm/errors/show.html.erb

@@ -72,7 +72,7 @@
   <h2>Backtrace</h2>
   <%= section_description("All occurrences share the same fingerprint and backtrace.") %>
   <div style="border:1px solid var(--border); border-radius:var(--radius); padding:14px; margin-bottom:12px; position:relative">
-    <button class="copy-btn" style="position:absolute; top:8px; right:8px" onclick="copyText(this)">Copy</button>
+    <button class="copy-btn" style="position:absolute; top:8px; right:8px">Copy</button>
     <% preview_lines = first_bt.first(10) %>
     <% remaining_lines = first_bt.drop(10) %>
     <pre class="mono" style="font-size:12px; white-space:pre-wrap; margin:0; line-height:1.8"><% preview_lines.each do |line| %><span class="<%= line.match?(%r{/(gems|ruby|vendor|bundle)/}) ? 'backtrace-lib' : 'backtrace-app' %>"><%= line %></span>

data/app/views/catpm/samples/show.html.erb

@@ -88,7 +88,7 @@
   <div style="display:flex; height:32px; border-radius:4px; overflow:hidden; margin-bottom:4px; border:1px solid var(--border)">
     <% breakdown.each do |label, dur, color, _, text| %>
       <% if dur > 0 && total > 0 %>
-        <div title="<%= label %> — <%= format_duration(dur) %> (<%= "%.0f" % (dur/total*100) %>%)" style="flex:<%= dur %>; background:<%= color %>; display:flex; align-items:center; justify-content:center; color:<%= text %>; font-size:11px; font-weight:500; overflow:hidden; white-space:nowrap; padding:0 4px;">
+        <div title="<%= label %> — <%= format_duration(dur) %> (<%= "%.0f" % (dur/total*100) %>%)" style="flex:<%= dur / total * 100 %>; background:<%= color %>; display:flex; align-items:center; justify-content:center; color:<%= text %>; font-size:11px; font-weight:500; overflow:hidden; white-space:nowrap; padding:0 4px;">
           <% if dur / total > 0.08 %><%= label %><% end %>
         </div>
       <% end %>
@@ -101,7 +101,21 @@
   </div>
 <% end %>
 
-<%# ─── Segments Waterfall (full width, no title) ─── %>
+<%# ─── Segments View Toggle ─── %>
 <% if @segments.any? %>
-  <%= render "catpm/shared/segments_waterfall", segments: @segments, total_duration: @sample.duration, segments_capped: @context["segments_capped"] || @context[:segments_capped], segments_filtered: @context["segments_filtered"] || @context[:segments_filtered] || 0, table_id: "segments-table" %>
+  <div style="display:flex; align-items:center; justify-content:space-between; margin-top:28px; margin-bottom:8px">
+    <h2 style="margin:0">Segments</h2>
+    <div class="seg-view-tabs">
+      <button type="button" class="seg-view-tab active" data-view="table">Table</button>
+      <button type="button" class="seg-view-tab" data-view="timeline">Timeline</button>
+    </div>
+  </div>
+
+  <div id="seg-view-table">
+    <%= render "catpm/shared/segments_waterfall", segments: @segments, total_duration: @sample.duration, segments_capped: @context["segments_capped"] || @context[:segments_capped], segments_filtered: @context["segments_filtered"] || @context[:segments_filtered] || 0, table_id: "segments-table" %>
+  </div>
+
+  <div id="seg-view-timeline" style="display:none">
+    <%= render "catpm/shared/segments_timeline", segments: @segments, total_duration: @sample.duration, segments_capped: @context["segments_capped"] || @context[:segments_capped], segments_filtered: @context["segments_filtered"] || @context[:segments_filtered] || 0, container_id: "tl2-container" %>
+  </div>
 <% end %>

data/app/views/catpm/shared/_segments_timeline.html.erb

@@ -0,0 +1,155 @@
+<%# Locals: segments, total_duration, segments_capped, segments_filtered, container_id %>
+
+<% if segments.any? %>
+  <% total_dur = total_duration.to_f %>
+  <% total_dur = 1.0 if total_dur == 0 %>
+
+  <%
+    # Build tree structure
+    children = Hash.new { |h, k| h[k] = [] }
+    roots = []
+    segments.each_with_index do |seg, i|
+      pi = seg["parent_index"] || seg[:parent_index]
+      if pi.nil?
+        roots << i
+      else
+        children[pi.to_i] << i
+      end
+    end
+
+    children.each_value do |kids|
+      kids.sort_by! { |i| (segments[i]["offset"] || segments[i][:offset] || 0).to_f }
+    end
+
+    depth_map = {}
+    ordered = []
+    build_order = ->(indices, depth) {
+      indices.each do |i|
+        depth_map[i] = depth
+        ordered << i
+        build_order.call(children.fetch(i, []), depth + 1)
+      end
+    }
+    build_order.call(roots, 0)
+    segments.each_index { |i| unless depth_map.key?(i); depth_map[i] = 0; ordered << i; end }
+
+    has_children = Set.new
+    children.each { |pi, _| has_children << pi }
+
+    collapsed_set = Set.new
+    starts_collapsed = Set.new
+    segments.each_with_index do |s, i|
+      if s["collapsed"] || s[:collapsed]
+        collapsed_set << i
+        pi = s["parent_index"] || s[:parent_index]
+        starts_collapsed << pi.to_i if pi
+      end
+    end
+
+    # Count descendant depth for each node
+    max_descendant_depth = {}
+    calc_max_depth = ->(idx, base_depth) {
+      kids = children.fetch(idx, [])
+      return base_depth if kids.empty?
+      kids.map { |k| calc_max_depth.call(k, base_depth + 1) }.max
+    }
+    ordered.each do |idx|
+      d = depth_map[idx]
+      max_descendant_depth[idx] = calc_max_depth.call(idx, d) - d
+    end
+  %>
+
+  <div class="tl2" id="<%= container_id %>">
+    <div class="tl2-inner">
+    <% ordered.each do |seg_idx| %>
+      <% seg = segments[seg_idx] %>
+      <% type = (seg["type"] || seg[:type]).to_s %>
+      <% dur = (seg["duration"] || seg[:duration] || 0).to_f %>
+      <% offset = (seg["offset"] || seg[:offset] || 0).to_f %>
+      <% detail = (seg["detail"] || seg[:detail]).to_s %>
+      <% source = seg["source"] || seg[:source] %>
+      <% bar_color = segment_colors[type] || "#484f58" %>
+      <% left_pct = (offset / total_dur * 100).clamp(0, 99) %>
+      <% width_pct = (dur / total_dur * 100).clamp(0.3, 100 - left_pct) %>
+      <% depth = depth_map[seg_idx] %>
+      <% is_parent = has_children.include?(seg_idx) %>
+      <% is_collapsed = collapsed_set.include?(seg_idx) %>
+      <% parent_starts_collapsed = starts_collapsed.include?(seg_idx) %>
+      <% desc_depth = max_descendant_depth[seg_idx] || 0 %>
+      <% indent_px = depth * 16 %>
+      <% pi = seg["parent_index"] || seg[:parent_index] %>
+
+      <div class="tl2-row"
+           data-seg="<%= seg_idx %>"
+           data-depth="<%= depth %>"
+           <%= " data-parent=\"#{pi}\"" if pi %>
+           <%= " data-has-children" if is_parent %>
+           style="<%= is_collapsed ? "display:none;" : "" %>">
+
+        <%# Line 1: toggle + badge + duration + @offset + depth badge %>
+        <div class="tl2-meta" style="padding-left:<%= 12 + indent_px %>px">
+          <% if is_parent %>
+            <span class="tl2-toggle" data-seg="<%= seg_idx %>"><%= parent_starts_collapsed ? "▸" : "▾" %></span>
+          <% end %>
+          <%= type_badge(type) %>
+          <span class="tl2-dur"><%= "%.1f" % dur %>ms</span>
+          <span class="tl2-offset">@ <%= format_duration(offset) %></span>
+          <% if is_parent && desc_depth > 2 %>
+            <span class="tl2-depth-badge"><%= desc_depth %> deep</span>
+          <% end %>
+        </div>
+
+        <%# Line 2: detail text %>
+        <div class="tl2-detail-line" style="padding-left:<%= 12 + indent_px %>px">
+          <% if type == "sql" && detail.length > 60 %>
+            <span class="tl2-sql-wrap"><span class="tl2-sql-toggle">&#x25B8;</span><span class="tl2-detail"><%= detail %></span></span>
+          <% else %>
+            <span class="tl2-detail <%= 'tl2-detail-capped' unless type == 'sql' %>"><%= detail %></span>
+          <% end %>
+        </div>
+
+        <% if source %>
+          <%# Line 3: source location %>
+          <div class="tl2-source-line" style="padding-left:<%= 12 + indent_px %>px">
+            <span class="tl2-source"><%= source %></span>
+          </div>
+        <% end %>
+
+        <%# Timeline bar — same width for all rows %>
+        <div class="tl2-bar-wrap">
+          <% if pi %>
+            <% parent_seg = segments[pi.to_i] %>
+            <% if parent_seg %>
+              <% p_type = (parent_seg["type"] || parent_seg[:type]).to_s %>
+              <% p_color = segment_text_colors[p_type] || "#4b5563" %>
+              <% p_offset = (parent_seg["offset"] || parent_seg[:offset] || 0).to_f %>
+              <% p_dur = (parent_seg["duration"] || parent_seg[:duration] || 0).to_f %>
+              <% p_left = (p_offset / total_dur * 100).clamp(0, 99) %>
+              <% p_right = ((p_offset + p_dur) / total_dur * 100).clamp(0, 100) %>
+              <div class="tl2-bar-parent-edge" style="left:<%= p_left %>%;border-color:<%= p_color %>"></div>
+              <div class="tl2-bar-parent-edge" style="left:<%= p_right %>%;border-color:<%= p_color %>"></div>
+            <% end %>
+          <% end %>
+          <% if type == 'error' %>
+            <div class="tl2-error-marker" style="left:<%= left_pct %>%"></div>
+          <% else %>
+            <div class="tl2-bar" style="left:<%= left_pct %>%;width:<%= width_pct %>%;background:<%= bar_color %>"></div>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+
+    <% filtered = segments_filtered.to_i %>
+    <% if filtered > 0 %>
+      <div class="tl2-footer">
+        <%= filtered %> segment<%= filtered == 1 ? '' : 's' %> below <%= Catpm.config.min_segment_duration %>ms not shown (counted in Time Breakdown)
+      </div>
+    <% end %>
+    </div>
+  </div>
+<% else %>
+  <div class="empty-state">
+    <div class="empty-title">No segments captured</div>
+    <div class="empty-hint">Segments appear when SQL queries, view renders, or HTTP calls are instrumented.</div>
+  </div>
+<% end %>

data/app/views/catpm/shared/_segments_waterfall.html.erb

@@ -81,15 +81,15 @@
     end
   %>
 
-  <style>tr[data-collapsed] { display: none; }</style>
-  <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:8px; overflow:hidden">
-    <table style="margin:0" id="<%= table_id %>">
+  <div style="border:1px solid var(--border); border-radius:8px; overflow:hidden" id="<%= table_id %>">
+    <div class="wf-scroll">
+    <table class="wf-table">
       <thead>
         <tr>
-          <th style="width:55px">Type</th>
-          <th style="width:70px">Duration</th>
+          <th class="wf-sticky-l0">Type</th>
+          <th class="wf-sticky-l1">Duration</th>
           <th>Detail</th>
-          <th style="width:35%">Timeline</th>
+          <th class="wf-sticky-r">Timeline</th>
         </tr>
       </thead>
       <tbody>
@@ -110,18 +110,18 @@
           <% is_collapsed = collapsed_set.include?(seg_idx) %>
           <% parent_starts_collapsed = starts_collapsed.include?(seg_idx) %>
 
-          <tr data-seg="<%= seg_idx %>" data-depth="<%= depth %>"<%= " data-parent=\"#{pi}\"" if pi %><%= " data-has-children" if is_parent %><%= " data-collapsed" if is_collapsed %>>
-            <td><%= type_badge(type) %></td>
-            <td class="mono" style="text-align:right"><%= "%.2f" % dur %>ms</td>
+          <tr data-seg="<%= seg_idx %>" data-depth="<%= depth %>"<%= " data-parent=\"#{pi}\"" if pi %><%= " data-has-children" if is_parent %><%= is_collapsed ? " style=\"display:none\"" : "" %>>
+            <td class="wf-sticky-l0"><%= type_badge(type) %></td>
+            <td class="wf-sticky-l1 mono" style="text-align:right"><%= "%.2f" % dur %>ms</td>
             <td>
-              <div style="padding-left:<%= depth * 20 %>px">
+              <div class="wf-detail" style="padding-left:<%= depth * 16 %>px">
                 <% if is_parent %>
-                  <span class="seg-toggle" data-seg="<%= seg_idx %>" onclick="toggleSegment(this)" title="Collapse/Expand"><%= parent_starts_collapsed ? "▸" : "▾" %></span>
+                  <span class="seg-toggle" data-seg="<%= seg_idx %>" title="Collapse/Expand"><%= parent_starts_collapsed ? "▸" : "▾" %></span>
                 <% end %>
                 <% if depth > 0 %><span class="tree-indent"><%= prefix %></span><% end %>
                 <% if type == "sql" && detail.length > 60 %>
-                  <div class="sql-wrap" onclick="event.stopPropagation()">
-                    <span class="sql-toggle" onclick="var w=this.parentElement;w.classList.toggle('open');this.textContent=w.classList.contains('open')?'\u25BE':'\u25B8'">&#x25B8;</span>
+                  <div class="sql-wrap">
+                    <span class="sql-toggle">&#x25B8;</span>
                     <span class="sql-text"><%= detail %></span>
                   </div>
                 <% elsif type == "sql" %>
@@ -134,7 +134,7 @@
                 <% end %>
               </div>
             </td>
-            <td>
+            <td class="wf-sticky-r">
               <div class="bar-container">
                 <% if type == 'error' %>
                   <div style="position:absolute; left:<%= left_pct %>%; top:2px; bottom:2px; width:3px; background:#dc2626; border-radius:2px"></div>
@@ -147,6 +147,7 @@
         <% end %>
       </tbody>
     </table>
+    </div>
     <% filtered = segments_filtered.to_i %>
     <% if filtered > 0 %>
       <div style="padding:6px 12px; font-size:12px; color:var(--text-2); border-top:1px solid var(--border)">

data/app/views/catpm/status/index.html.erb

@@ -16,11 +16,11 @@
   <span style="margin-left:auto; font-size:12px; color:var(--text-2)">
     Updated <%= Time.current.strftime("%H:%M:%S") %> ·
     <span id="refresh-status">Refreshing in <span id="refresh-countdown">30</span>s</span>
-    <a href="#" id="refresh-toggle" onclick="toggleAutoRefresh(event)" style="margin-left:4px; color:var(--text-2)">Pause</a>
+    <a href="#" id="refresh-toggle" style="margin-left:4px; color:var(--text-2)">Pause</a>
   </span>
 </div>
 
-<script>
+<script<%= " nonce=\"#{content_security_policy_nonce}\"".html_safe if content_security_policy_nonce %>>
   (function() {
     var seconds = 30, paused = false, timer;
     var countdownEl = document.getElementById('refresh-countdown');
@@ -34,7 +34,7 @@
       timer = setTimeout(tick, 1000);
     }
     timer = setTimeout(tick, 1000);
-    window.toggleAutoRefresh = function(e) {
+    toggleEl.addEventListener('click', function(e) {
       e.preventDefault();
       paused = !paused;
       if (paused) {
@@ -47,7 +47,7 @@
         toggleEl.textContent = 'Pause';
         timer = setTimeout(tick, 1000);
       }
-    };
+    });
   })();
 </script>
 

data/app/views/catpm/system/pipeline.html.erb

@@ -32,7 +32,7 @@
   </div>
 </div>
 
-<script>
+<script<%= " nonce=\"#{content_security_policy_nonce}\"".html_safe if content_security_policy_nonce %>>
 (function() {
   var el = document.querySelector('.pipeline');
   if (!el) return;

data/app/views/layouts/catpm/application.html.erb

@@ -137,7 +137,12 @@
     .badge-error   { background: #ffebe9; color: var(--red); }
     .badge-slow    { background: #fff8c5; color: var(--yellow); }
     .badge-random  { background: var(--bg-2); color: var(--text-1); }
-    .badge-event   { background: #e8f0fe; color: #1967d2; }
+    .badge-event      { background: #e8f0fe; color: #1967d2; }
+    .badge-controller { background: #ddf4ff; color: #0550ae; }
+    .badge-middleware { background: #fff8c5; color: #7c5c00; }
+    .badge-request    { background: #ddf4ff; color: #0550ae; }
+    .badge-code       { background: #dae5f4; color: #3b5998; }
+    .badge-gem        { background: #f5e6f8; color: #7b3f9e; }
 
     /* ─── Status Dot ─── */
     .status-dot { font-size: 13px; color: var(--text-1); display: inline-flex; align-items: center; gap: 6px; }
@@ -249,11 +254,55 @@
     /* ─── Waterfall ─── */
     .bar-container { position: relative; height: 18px; background: var(--bg-2); border-radius: 3px; overflow: hidden; margin: 3px 0; }
     .bar-fill { height: 100%; border-radius: 3px; display: flex; align-items: center; padding-left: 6px; font-size: 10px; color: var(--text-0); min-width: fit-content; }
+    .wf-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
+    .wf-table { margin: 0; white-space: nowrap; table-layout: auto; }
+    .wf-table td, .wf-table th { vertical-align: middle; }
+    .wf-table thead th { background: var(--bg-1); }
+    .wf-sticky-l0 { position: sticky; left: 0; z-index: 2; background: var(--bg-0); }
+    .wf-sticky-l1 { position: sticky; left: 85px; z-index: 2; background: var(--bg-0); }
+    .wf-sticky-r  { position: sticky; right: 0; z-index: 2; background: var(--bg-1); min-width: 180px; }
+    thead .wf-sticky-l0, thead .wf-sticky-l1 { background: var(--bg-1); }
+    thead .wf-sticky-r { background: var(--bg-1); }
     .tree-indent { display: inline-block; color: var(--border); font-family: monospace; white-space: pre; user-select: none; }
     .seg-toggle { display: inline-block; width: 16px; cursor: pointer; color: var(--text-2); font-size: 12px; user-select: none; text-align: center; vertical-align: middle; }
     .seg-toggle:hover { color: var(--text-0); }
     .seg-leaf { display: inline-block; width: 16px; }
 
+    /* ─── Timeline v2 ─── */
+    .tl2 { border: 1px solid var(--border); border-radius: 8px; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
+    .tl2-row { border-bottom: 1px solid var(--bg-2); padding: 0; transition: background 0.1s; }
+    .tl2-row:last-child { border-bottom: none; }
+    .tl2-row[data-depth="0"] { background: var(--bg-1); }
+    .tl2-meta { display: flex; align-items: baseline; gap: 6px; padding: 6px 12px 0; }
+    .tl2-toggle { flex-shrink: 0; width: 14px; cursor: pointer; color: var(--text-2); font-size: 11px; user-select: none; text-align: center; }
+    .tl2-toggle:hover { color: var(--text-0); }
+    .tl2-dur { font-family: var(--font-mono); font-size: 11px; color: var(--text-0); font-weight: 500; white-space: nowrap; }
+    .tl2-offset { font-family: var(--font-mono); font-size: 10px; color: var(--text-2); white-space: nowrap; }
+    .tl2-depth-badge { font-size: 10px; color: var(--text-2); background: var(--bg-2); border-radius: 3px; padding: 0 4px; flex-shrink: 0; }
+    .tl2-inner { min-width: 100%; display: inline-block; }
+    .tl2-detail-line { padding: 2px 12px 0; white-space: nowrap; }
+    .tl2-detail { font-family: var(--font-mono); font-size: 12px; color: var(--text-0); }
+    .tl2-detail-capped { display: inline-block; max-width: 700px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
+    .tl2-sql-wrap { display: inline; }
+    .tl2-sql-toggle { cursor: pointer; color: var(--text-2); font-size: 11px; user-select: none; }
+    .tl2-sql-toggle:hover { color: var(--text-0); }
+    .tl2-sql-wrap .tl2-detail { display: inline-block; max-width: 700px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
+    .tl2-sql-wrap.open .tl2-detail { max-width: none; white-space: pre-wrap; word-break: break-all; overflow: visible; }
+    .tl2-source-line { padding: 0 12px 0; white-space: nowrap; }
+    .tl2-source { font-family: var(--font-mono); font-size: 10px; color: var(--text-2); }
+    .tl2-bar-wrap { position: relative; height: 20px; margin: 3px 12px 6px; background: var(--bg-2); border-radius: 3px; overflow: visible; }
+    .tl2-bar-wrap > .tl2-bar { overflow: hidden; }
+    .tl2-bar-parent-edge { position: absolute; top: -2px; bottom: -2px; width: 0; border-left: 1px dashed; opacity: 0.5; z-index: 2; }
+    .tl2-bar { position: absolute; top: 0; height: 100%; border-radius: 3px; min-width: 2px; z-index: 1; }
+    .tl2-error-marker { position: absolute; top: 2px; bottom: 2px; width: 3px; background: #dc2626; border-radius: 2px; }
+    .tl2-footer { padding: 6px 12px; font-size: 12px; color: var(--text-2); border-top: 1px solid var(--border); }
+
+    /* ─── Segment View Tabs ─── */
+    .seg-view-tabs { display: flex; gap: 2px; background: var(--bg-2); border-radius: 5px; padding: 2px; }
+    .seg-view-tab { background: none; border: none; padding: 4px 12px; font-size: 12px; font-weight: 500; color: var(--text-2); border-radius: 4px; cursor: pointer; font-family: var(--font-sans); }
+    .seg-view-tab:hover { color: var(--text-1); }
+    .seg-view-tab.active { background: var(--bg-0); color: var(--text-0); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
+
     /* ─── Bar Chart ─── */
     .bar-chart-wrap { position: relative; }
     .bar-chart-max { position: absolute; top: 2px; left: 4px; font-size: 11px; color: var(--text-2); font-family: var(--font-sans); pointer-events: none; line-height: 1; }
@@ -372,7 +421,7 @@
 
   <div class="footer">catpm v<%= Catpm::VERSION %></div>
 
-  <script>
+  <script<%= " nonce=\"#{content_security_policy_nonce}\"".html_safe if content_security_policy_nonce %>>
     function toggleSegment(btn) {
       var segId = btn.getAttribute('data-seg');
       var isCollapsed = btn.textContent.trim() === '\u25B8';
@@ -388,15 +437,13 @@
         var d = parseInt(row.getAttribute('data-depth'));
         if (d <= segDepth) break;
         if (isCollapsed) {
-          // Expanding: show direct children, skip nested collapsed subtrees
           if (skipBelow >= 0 && d > skipBelow) continue;
           skipBelow = -1;
-          row.removeAttribute('data-collapsed');
+          row.style.display = '';
           var t = row.querySelector('.seg-toggle');
           if (t && t.textContent.trim() === '\u25B8') skipBelow = d;
         } else {
-          // Collapsing: hide all descendants, preserve their toggles
-          row.setAttribute('data-collapsed', '');
+          row.style.display = 'none';
         }
       }
     }
@@ -646,6 +693,100 @@
         });
       });
     });
+
+    /* ─── Timeline v2 toggle ─── */
+    function tl2Toggle(btn) {
+      var segId = btn.getAttribute('data-seg');
+      var isCollapsed = btn.textContent.trim() === '\u25B8';
+      btn.textContent = isCollapsed ? '\u25BE' : '\u25B8';
+      var container = btn.closest('.tl2');
+      var rows = container.querySelectorAll('.tl2-row');
+      var segDepth = null, found = false;
+      var skipBelow = -1;
+      for (var i = 0; i < rows.length; i++) {
+        var row = rows[i];
+        if (row.getAttribute('data-seg') === segId) { found = true; segDepth = parseInt(row.getAttribute('data-depth')); continue; }
+        if (!found) continue;
+        var d = parseInt(row.getAttribute('data-depth'));
+        if (d <= segDepth) break;
+        if (isCollapsed) {
+          if (skipBelow >= 0 && d > skipBelow) continue;
+          skipBelow = -1;
+          row.style.display = '';
+          var t = row.querySelector('.tl2-toggle');
+          if (t && t.textContent.trim() === '\u25B8') skipBelow = d;
+        } else {
+          row.style.display = 'none';
+        }
+      }
+    }
+
+    /* ─── Segment view tab switcher ─── */
+    function switchSegView(tab) {
+      var view = tab.dataset.view;
+      var tabs = tab.parentElement.querySelectorAll('.seg-view-tab');
+      tabs.forEach(function(t) { t.classList.toggle('active', t === tab); });
+      var timeline = document.getElementById('seg-view-timeline');
+      var table = document.getElementById('seg-view-table');
+      if (timeline) timeline.style.display = view === 'timeline' ? '' : 'none';
+      if (table) table.style.display = view === 'table' ? '' : 'none';
+      try { localStorage.setItem('catpm:seg-view', view); } catch(e) {}
+    }
+
+    /* ─── Restore preferred view on load ─── */
+    document.addEventListener('DOMContentLoaded', function() {
+      try {
+        var saved = localStorage.getItem('catpm:seg-view');
+        if (saved) {
+          var tab = document.querySelector('.seg-view-tab[data-view="' + saved + '"]');
+          if (tab && !tab.classList.contains('active')) switchSegView(tab);
+        }
+      } catch(e) {}
+    });
+
+    /* ─── Delegated handlers (CSP-safe, replaces inline onclick) ─── */
+    document.addEventListener('click', function(e) {
+      /* Segment tree toggle (v1 waterfall) */
+      var segToggle = e.target.closest('.seg-toggle');
+      if (segToggle) { e.stopPropagation(); toggleSegment(segToggle); return; }
+
+      /* Timeline v2 tree toggle */
+      var tl2ToggleBtn = e.target.closest('.tl2-toggle');
+      if (tl2ToggleBtn) { e.stopPropagation(); tl2Toggle(tl2ToggleBtn); return; }
+
+      /* Timeline v2 SQL expand */
+      var tl2SqlToggle = e.target.closest('.tl2-sql-toggle');
+      if (tl2SqlToggle) {
+        e.stopPropagation();
+        var w = tl2SqlToggle.parentElement;
+        w.classList.toggle('open');
+        tl2SqlToggle.innerHTML = w.classList.contains('open') ? '\u25BE' : '\u25B8';
+        return;
+      }
+
+      /* Segment view tab switch */
+      var viewTab = e.target.closest('.seg-view-tab');
+      if (viewTab) { e.preventDefault(); e.stopPropagation(); switchSegView(viewTab); return; }
+
+      /* SQL expand/collapse */
+      var sqlToggle = e.target.closest('.sql-toggle');
+      if (sqlToggle) {
+        e.stopPropagation();
+        var w = sqlToggle.parentElement;
+        w.classList.toggle('open');
+        sqlToggle.textContent = w.classList.contains('open') ? '\u25BE' : '\u25B8';
+        return;
+      }
+
+      /* Prevent sql-wrap clicks from bubbling to row */
+      if (e.target.closest('.sql-wrap')) { e.stopPropagation(); }
+
+      /* Copy button */
+      var copyBtn = e.target.closest('.copy-btn');
+      if (copyBtn) { e.stopPropagation(); copyText(copyBtn); return; }
+    });
+
+
   </script>
 </body>
 </html>