good_pipeline 0.4.0 → 0.6.0

data/app/views/good_pipeline/pipelines/_steps_table.html.erb

@@ -1,33 +1,46 @@
-<header><h3>Steps</h3></header>
-<table>
-  <thead>
-    <tr>
-      <th>Key</th>
-      <th>Job Class</th>
-      <th>Status</th>
-      <th>Duration</th>
-      <th>Error</th>
-    </tr>
-  </thead>
-  <tbody>
-    <% pipeline.steps.each do |step| %>
-      <tr>
-        <td>
-          <% if (url = good_job_step_url(step)) %>
-            <%= link_to step.key, url, target: "_blank", rel: "noopener" %>
-          <% else %>
-            <%= step.key %>
-          <% end %>
-        </td>
-        <td><%= step.job_class %></td>
-        <td><%= status_badge(step.coordination_status) %></td>
-        <td><%= step.duration ? "#{step.duration.round(2)}s" : "\u2014" %></td>
-        <td>
-          <% if step.error_class %>
-            <small><%= step.error_class %>: <%= step.error_message %></small>
-          <% end %>
-        </td>
-      </tr>
-    <% end %>
-  </tbody>
-</table>
+<%
+  steps = Array(local_assigns[:steps] || pipeline.steps)
+  timings = local_assigns[:timings] || {}
+  status_meta = {
+    "pending" => ["○", "pending"], "running" => ["●", "running"], "enqueued" => ["●", "enqueued"],
+    "succeeded" => ["✓", "succeeded"], "failed" => ["✗", "failed"], "halted" => ["⊘", "halted"],
+    "canceled" => ["⊘", "canceled"], "skipped" => ["⊘", "skipped"],
+    "skipped_by_branch" => ["⊘", "skipped·br"]
+  }.freeze
+  duration = lambda do |seconds|
+    next "—" if seconds.nil?
+    value = seconds.to_f.to_i
+    if value < 60 then "#{value}s"
+    elsif value < 3_600 then "#{value / 60}m #{value % 60}s"
+    else "#{value / 3_600}h #{(value % 3_600) / 60}m"
+    end
+  end
+  priority = { "failed" => 0, "halted" => 1, "enqueued" => 2, "running" => 2, "pending" => 3, "canceled" => 4 }.freeze
+  ordered_steps = steps.length > 12 ? steps.sort_by { |step| [priority.fetch(step.coordination_status.to_s, 9), step.created_at, step.id.to_s] } : steps
+%>
+<h3 class="gp-section-heading">steps <span class="gp-heading-meta"><%= steps.length %> total</span></h3>
+<div class="gp-scroll-steps">
+  <table class="gp-compact-table">
+    <thead class="gp-sr-only"><tr><th>Key</th><th>Job class</th><th>Status</th><th>Duration</th><th>Error</th></tr></thead>
+    <tbody>
+      <% ordered_steps.each do |step| %>
+        <%
+          step_status = step.coordination_status.to_s
+          glyph, label = status_meta.fetch(step_status, ["○", step_status])
+          timing = timings[step.good_job_id] || timings[step.good_job_id.to_s] || timings[step.id] || timings[step.id.to_s]
+          performed_at, finished_at = timing.is_a?(Array) ? timing : [timing&.respond_to?(:performed_at) && timing.performed_at, timing&.respond_to?(:finished_at) && timing.finished_at]
+          step_duration = performed_at && finished_at ? finished_at - performed_at : nil
+          error_text = [step.error_class, step.error_message].compact.join(": ")
+          good_job_url = timing.present? ? good_job_step_url(step) : nil
+        %>
+        <tr>
+          <td class="gp-step-key"><% if good_job_url %><%= link_to step_display_key(step), good_job_url, target: "_blank", rel: "noopener" %><% else %><%= step_display_key(step) %><% end %></td>
+          <td class="gp-job-class" title="<%= step.job_class %>"><%= step.job_class %></td>
+          <td><span class="gp-status gp-status--<%= step_status %>"><%= glyph %> <%= label %></span></td>
+          <td class="gp-step-duration"><%= duration.call(step_duration) %></td>
+          <td class="gp-error" title="<%= error_text %>"><%= error_text %></td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>

data/app/views/good_pipeline/pipelines/_table.html.erb

@@ -0,0 +1,33 @@
+<%
+  pipelines = Array(local_assigns[:pipelines] || @pipelines)
+  filters = local_assigns[:filters] || @filters
+  steps_by_pipeline = local_assigns[:steps_by_pipeline] || @steps_by_pipeline || {}
+%>
+<div class="gp-table-wrap">
+  <table class="gp-table">
+    <thead>
+      <tr>
+        <th class="gp-th-expand"><span class="gp-sr-only">Expand</span></th>
+        <th class="gp-th-started">started</th>
+        <th>execution</th>
+        <th class="gp-th-steps">steps</th>
+        <th class="gp-th-status">status</th>
+        <th class="gp-th-duration">duration</th>
+        <th>params</th>
+      </tr>
+    </thead>
+    <tbody>
+      <% pipelines.each do |pipeline| %>
+        <% steps = steps_by_pipeline[pipeline.id] || steps_by_pipeline[pipeline.id.to_s] || [] %>
+        <%= render "row", pipeline: pipeline, steps: steps, filters: filters %>
+      <% end %>
+    </tbody>
+  </table>
+  <% if pipelines.empty? %>
+    <div class="gp-table-empty">
+      <div class="gp-empty-mark">∅</div>
+      <div class="gp-empty-title">no executions match these filters</div>
+      <div class="gp-empty-sub">good_pipeline_pipelines returned 0 rows for the active query</div>
+    </div>
+  <% end %>
+</div>

data/app/views/good_pipeline/pipelines/_timeline.html.erb

@@ -0,0 +1,55 @@
+<%
+  lanes = Array(local_assigns[:lanes])
+  get = lambda do |object, key|
+    if object.respond_to?(key)
+      object.public_send(key)
+    elsif object.respond_to?(:[])
+      object[key] || object[key.to_s]
+    end
+  rescue NameError, IndexError, KeyError, TypeError
+    nil
+  end
+  status_name = ->(value) { value.to_s == "enqueued" ? "running" : value.to_s.start_with?("skipped") ? "skipped" : value.to_s }
+  duration = lambda do |seconds|
+    next "—" if seconds.nil?
+    value = seconds.to_f.to_i
+    if value < 60 then "#{value}s"
+    elsif value < 3_600 then "#{value / 60}m #{value % 60}s"
+    else "#{value / 3_600}h #{(value % 3_600) / 60}m"
+    end
+  end
+%>
+<div class="gp-timeline">
+  <% lanes.each do |lane| %>
+    <%
+      label = get.call(lane, :label) || get.call(lane, :stage)
+      worst = (get.call(lane, :worst) || get.call(lane, :status) || "pending").to_s
+      t0 = get.call(lane, :t0)
+      t1 = get.call(lane, :t1)
+      lane_duration = get.call(lane, :dur_s) || get.call(lane, :duration) || get.call(lane, :duration_seconds)
+      counts = get.call(lane, :counts) || {}
+      count = (get.call(lane, :n) || get.call(lane, :count) || 1).to_i
+      provided_note = get.call(lane, :note)
+      open_ended = !!get.call(lane, :open_ended)
+      note = if provided_note.present?
+        provided_note
+      elsif t0.nil? || t1.nil?
+        worst == "skipped_by_branch" ? "skipped·br" : worst
+      elsif count > 1 && counts.respond_to?(:map)
+        counts.map { |key, value| "#{value} #{key.to_s.sub('_by_branch', '·br')}" }.first(2).join(", ")
+      else
+        duration.call(lane_duration)
+      end
+    %>
+    <div class="gp-lane">
+      <span class="gp-lane-label" title="<%= label %>"><%= label %></span>
+      <span class="gp-lane-track">
+        <% unless t0.nil? || t1.nil? %>
+          <span class="gp-lane-bar <%= 'is-running' if open_ended %>" style="--gp-left:<%= (t0.to_f.clamp(0, 1) * 100).round(2) %>%;--gp-width:<%= ([(t1.to_f.clamp(0, 1) - t0.to_f.clamp(0, 1)) * 100, 1.5].max).round(2) %>%;--gp-status:var(--st-<%= status_name.call(worst) %>)"></span>
+        <% end %>
+      </span>
+      <span class="gp-lane-note" title="<%= note %>"><%= note %></span>
+    </div>
+  <% end %>
+  <% if lanes.empty? %><div class="gp-empty-sub">No step timing data is available.</div><% end %>
+</div>

data/app/views/good_pipeline/pipelines/_topbar.html.erb

@@ -0,0 +1,54 @@
+<%
+  section = local_assigns.fetch(:section, "executions")
+  active = local_assigns[:active]
+  meta = local_assigns[:meta]
+  back = local_assigns[:back]
+  connection = local_assigns[:connection] || @connection_info
+  now = local_assigns[:now] || @now || Time.current
+  value_for = lambda do |object, key|
+    if object.respond_to?(key)
+      object.public_send(key)
+    elsif object.respond_to?(:[])
+      object[key] || object[key.to_s]
+    end
+  rescue NameError, IndexError, KeyError, TypeError
+    nil
+  end
+  database = value_for.call(connection, :database) || value_for.call(connection, :database_name) || "database"
+  pg_version = value_for.call(connection, :version) || value_for.call(connection, :server_version)
+  theme = %w[dark light].include?(cookies[:good_pipeline_theme]) ? cookies[:good_pipeline_theme] : "dark"
+%>
+<header class="gp-topbar">
+  <div class="gp-crumbs">
+    <% if back %>
+      <%= link_to "← #{back[:label]}", back[:href], class: "gp-back" %>
+    <% end %>
+    <span class="gp-crumb">good_pipeline</span>
+    <span class="gp-crumb-sep">/</span>
+    <% if section == "executions" %>
+      <%= link_to "executions", pipelines_path, class: "gp-crumb" %>
+      <% unless back %>
+        <span class="gp-crumb-sep">/</span>
+        <%= link_to "definitions", definitions_pipelines_path, class: "gp-crumb", title: "Pipeline definitions catalog" %>
+      <% end %>
+    <% else %>
+      <%= link_to "definitions", definitions_pipelines_path, class: "gp-crumb" %>
+    <% end %>
+    <% if active.present? %>
+      <span class="gp-crumb-sep">/</span>
+      <span class="gp-crumb gp-crumb--active" data-gp-active-crumb><%= active %></span>
+    <% end %>
+    <% if meta.present? %>
+      <span class="gp-crumb-meta" data-gp-active-meta><%= meta %></span>
+    <% end %>
+  </div>
+  <div class="gp-topbar-right">
+    <button class="gp-theme-btn" type="button" title="Toggle theme" aria-label="Toggle color theme" data-gp-theme-toggle><%= theme == "dark" ? "◐" : "◑" %></button>
+    <span class="gp-connection" title="Dashboard database connection">
+      <span class="gp-connection-dot"></span>
+      <span><%= database %></span>
+      <% if pg_version.present? %><span class="gp-connection-version"><%= pg_version %></span><% end %>
+    </span>
+    <time class="gp-clock" datetime="<%= now.utc.iso8601 %>"><%= now.utc.strftime("%Y-%m-%d %H:%M:%SZ") %></time>
+  </div>
+</header>

data/app/views/good_pipeline/pipelines/definitions.html.erb

@@ -1,61 +1,94 @@
-<h1 class="page-title">Pipeline Definitions</h1>
+<%
+  pipelines = Array(@pipelines)
+  run_counts = @run_counts || {}
+  definition_stages = @definition_stages_by_pipeline || @definition_stages || {}
+  get_count = ->(type) { (run_counts[type] || run_counts[type.to_s] || 0).to_i }
+  sidebar_entries = pipelines.map do |pipeline|
+    steps = pipeline.steps.to_a
+    {
+      type: pipeline.type,
+      id: pipeline.id,
+      on_failure_strategy: pipeline.on_failure_strategy,
+      run_count: get_count.call(pipeline.type),
+      step_count: steps.length,
+      has_branch: steps.any? { |step| step.respond_to?(:branch_step?) ? step.branch_step? : step.job_class == GoodPipeline::BRANCH_JOB_CLASS }
+    }
+  end
+  first = pipelines.first
+  first_short = first && (respond_to?(:short_type) ? short_type(first.type) : humanized_type(first.type).sub(/\s*Pipeline\z/, ""))
+  first_meta = first && "#{first.steps.size} steps · #{first.on_failure_strategy}"
+%>
+<div class="gp-app gp-app--definitions">
+  <%= render "sidebar", entries: sidebar_entries, mode: :definitions %>
+  <main class="gp-main">
+    <%= render "topbar", section: "definitions", active: first_short, meta: first_meta, connection: @connection_info, now: @now %>
+    <div class="gp-definitions-scroll">
+      <% if pipelines.any? %>
+        <div class="gp-definitions-content">
+          <% pipelines.each_with_index do |pipeline, index| %>
+            <%
+              steps = pipeline.steps.to_a.sort_by { |step| [step.created_at, step.id.to_s] }
+              dependencies = pipeline.dependencies.to_a
+              stages = definition_stages[pipeline.id] || definition_stages[pipeline.id.to_s] || definition_stages[pipeline.type] || []
+              graph = dependencies.length > 1_000 ? "" : mermaid_definition_diagram(pipeline)
+              has_branch = steps.any? { |step| step.respond_to?(:branch_step?) ? step.branch_step? : step.job_class == GoodPipeline::BRANCH_JOB_CLASS }
+              keys_by_id = steps.to_h { |step| [step.id, step_display_key(step)] }
+              upstream = Hash.new { |hash, key| hash[key] = [] }
+              dependencies.each do |dependency|
+                label = keys_by_id[dependency.depends_on_step_id]
+                downstream = steps.find { |step| step.id == dependency.step_id }
+                if downstream&.respond_to?(:branch_arm) && downstream.branch_arm.present?
+                  label = "#{label}(#{downstream.branch_arm})"
+                end
+                upstream[dependency.step_id] << label
+              end
+            %>
+            <div id="gp-definition-<%= index %>" class="gp-definition-panel <%= 'is-active' if index.zero? %>" data-pipeline="<%= pipeline.type %>">
+              <section class="gp-card">
+                <div class="gp-definition-summary">
+                  <span class="gp-definition-title"><%= humanized_type(pipeline.type) %></span>
+                  <span class="gp-strategy gp-strategy--<%= pipeline.on_failure_strategy %>">on_failure: <%= pipeline.on_failure_strategy %></span>
+                  <% if has_branch %><span class="gp-sidebar-tag">conditional branch</span><% end %>
+                  <%= link_to "view executions ↗", pipelines_path(pipeline_type: pipeline.type), class: "gp-action gp-action--ghost" %>
+                </div>
+                <div class="gp-definition-metrics">
+                  <span><b>steps</b> <%= number_with_delimiter(steps.length) %></span>
+                  <span><b>edges</b> <%= number_with_delimiter(dependencies.length) %></span>
+                  <span><b>runs</b> <%= number_with_delimiter(get_count.call(pipeline.type)) %></span>
+                  <span><b>class</b> <%= pipeline.type %></span>
+                </div>
+              </section>
 
-<% if @pipelines.any? %>
-  <div class="definitions-layout">
-    <div class="definitions-sidebar">
-      <% @pipelines.each_with_index do |pipeline, index| %>
-        <button type="button" class="definition-item <%= 'active' if index.zero? %>" data-pipeline="<%= pipeline.type %>">
-          <span class="definition-item-name"><%= humanized_type(pipeline.type) %></span>
-          <span class="definition-item-meta"><%= pipeline.steps.size %> steps</span>
-        </button>
-      <% end %>
-    </div>
+              <%= render "diagram", pipeline: pipeline, graph: graph, steps: steps,
+                         edge_count: dependencies.length, stages: stages, definition: true %>
 
-    <div class="definitions-detail">
-      <% @pipelines.each_with_index do |pipeline, index| %>
-        <div class="definition-panel <%= 'active' if index.zero? %>" data-pipeline="<%= pipeline.type %>">
-          <article>
-            <header class="definition-header">
-              <div>
-                <h2><%= humanized_type(pipeline.type) %></h2>
-                <span class="definition-subtitle">on failure: <%= pipeline.on_failure_strategy %></span>
-              </div>
-              <%= link_to "View Executions \u2192", pipelines_path(pipeline_type: pipeline.type), class: "definition-executions-link" %>
-            </header>
-            <% if pipeline.steps.any? %>
-              <div class="diagram-container">
-                <div class="diagram-toolbar">
-                  <button type="button" class="diagram-btn" data-action="zoom-in" title="Zoom in">+</button>
-                  <button type="button" class="diagram-btn" data-action="zoom-out" title="Zoom out">&minus;</button>
-                  <button type="button" class="diagram-btn" data-action="zoom-reset" title="Reset zoom">Reset</button>
-                  <button type="button" class="diagram-btn" data-action="fullscreen" title="Fullscreen">&#x26F6;</button>
+              <section class="gp-card">
+                <h3 class="gp-section-heading">steps <span class="gp-heading-meta"><%= steps.length %> declared</span></h3>
+                <div class="gp-definition-list-overflow">
+                  <table class="gp-compact-table">
+                    <tbody>
+                      <% steps.each do |step| %>
+                        <% after = upstream[step.id] %>
+                        <tr>
+                          <td class="gp-step-key" style="width:180px"><%= step_display_key(step) %></td>
+                          <td class="gp-job-class" title="<%= step.job_class %>"><%= step.job_class %></td>
+                          <td class="gp-step-duration" title="<%= after.join(', ') %>"><%= after.any? ? "after: #{after.first(3).join(', ')}#{after.length > 3 ? " +#{after.length - 3}" : ''}" : "root" %></td>
+                        </tr>
+                      <% end %>
+                    </tbody>
+                  </table>
                 </div>
-                <div class="diagram-viewport">
-                  <div class="diagram-canvas">
-                    <pre class="mermaid"><%= raw mermaid_definition_diagram(pipeline) %></pre>
-                  </div>
-                </div>
-              </div>
-            <% else %>
-              <p class="empty-state">No steps defined.</p>
-            <% end %>
-          </article>
+              </section>
+            </div>
+          <% end %>
+        </div>
+      <% else %>
+        <div class="gp-table-empty">
+          <div class="gp-empty-mark">∅</div>
+          <div class="gp-empty-title">no pipeline definitions yet</div>
+          <div class="gp-empty-sub">Run a pipeline to add its definition to this catalog.</div>
         </div>
       <% end %>
     </div>
-  </div>
-
-  <script>
-    document.querySelectorAll('.definition-item').forEach(function(button) {
-      button.addEventListener('click', function() {
-        var type = this.dataset.pipeline;
-        document.querySelectorAll('.definition-item').forEach(function(b) { b.classList.remove('active'); });
-        document.querySelectorAll('.definition-panel').forEach(function(p) { p.classList.remove('active'); });
-        this.classList.add('active');
-        document.querySelector('.definition-panel[data-pipeline="' + type + '"]').classList.add('active');
-      });
-    });
-  </script>
-<% else %>
-  <p class="empty-state">No pipeline executions found yet. Run a pipeline to see its definition here.</p>
-<% end %>
+  </main>
+</div>

data/app/views/good_pipeline/pipelines/index.html.erb

@@ -1,43 +1,32 @@
-<h1 class="page-title">Pipeline Executions</h1>
-
-<div class="filters-row">
-  <ul class="status-tabs">
-  <li><%= link_to "All (#{@total_count})", pipelines_path(pipeline_type: @pipeline_type), class: ("active" if @status.nil?) %></li>
-  <% %w[running succeeded failed halted skipped].each do |status| %>
-    <li><%= link_to "#{status.titleize} (#{@status_counts[status] || 0})", pipelines_path(status: status, pipeline_type: @pipeline_type), class: ("active" if @status == status), data: { status: status } %></li>
-  <% end %>
-  </ul>
-  <select class="pipeline-type-select" onchange="window.location = this.value;">
-    <option value="<%= pipelines_path(status: @status) %>" <%= "selected" if @pipeline_type.nil? %>>All Pipelines</option>
-    <% @pipeline_types.each do |pipeline_type| %>
-      <option value="<%= pipelines_path(status: @status, pipeline_type: pipeline_type) %>" <%= "selected" if @pipeline_type == pipeline_type %>>
-        <%= humanized_type(pipeline_type) %>
-      </option>
-    <% end %>
-  </select>
+<%
+  filters = @filters
+  selected_type = filters.respond_to?(:pipeline_type) ? filters.pipeline_type : params[:pipeline_type].presence
+  selected_short = selected_type.present? ? (respond_to?(:short_type) ? short_type(selected_type) : humanized_type(selected_type).sub(/\s*Pipeline\z/, "")) : nil
+  selected_entry = Array(@sidebar_entries).find do |entry|
+    entry_type = entry.respond_to?(:type) ? entry.type : (entry[:type] || entry["type"])
+    entry_type == selected_type
+  end
+  selected_steps = if selected_entry
+    selected_entry.respond_to?(:step_count) ? selected_entry.step_count : (selected_entry[:step_count] || selected_entry["step_count"])
+  end
+  selected_strategy = if selected_entry
+    selected_entry.respond_to?(:on_failure_strategy) ? selected_entry.on_failure_strategy : (selected_entry[:on_failure_strategy] || selected_entry["on_failure_strategy"] || selected_entry[:strategy] || selected_entry["strategy"])
+  end
+  crumb_meta = selected_type.present? ? [selected_steps && "#{selected_steps} steps", selected_strategy].compact.join(" · ") : "all pipeline types"
+%>
+<div class="gp-app gp-app--dashboard">
+  <%= render "sidebar", entries: @sidebar_entries, filters: filters %>
+  <main class="gp-main">
+    <%= render "topbar", section: "executions", active: selected_short, meta: crumb_meta, connection: @connection_info, now: @now %>
+    <div id="gp-dashboard">
+      <div id="gp-kpi">
+        <%= render "kpi_strip", kpis: @kpis, total: @total %>
+      </div>
+      <%= render "filter_bar", filters: filters %>
+      <div id="gp-table">
+        <%= render "table", pipelines: @pipelines, filters: filters, steps_by_pipeline: @steps_by_pipeline %>
+        <%= render "pager", page: @page %>
+      </div>
+    </div>
+  </main>
 </div>
-
-<% if @pipelines.any? %>
-  <div class="table-card">
-    <table>
-      <thead>
-        <tr>
-          <th>Execution ID</th>
-          <th>Pipeline Name</th>
-          <th>Status</th>
-          <th>Start Time</th>
-          <th>Duration</th>
-        </tr>
-      </thead>
-      <tbody>
-        <% @pipelines.each do |pipeline| %>
-          <%= render "pipeline_row", pipeline: pipeline %>
-        <% end %>
-      </tbody>
-    </table>
-  </div>
-
-  <%= render "pagination" %>
-<% else %>
-  <p class="empty-state">No pipelines found.</p>
-<% end %>

data/app/views/good_pipeline/pipelines/show.html.erb

@@ -1,52 +1,59 @@
-<p><%= link_to "\u2190 All Pipelines", pipelines_path %></p>
+<%
+  steps = Array(@steps || @pipeline.steps)
+  dependencies = Array(@dependencies || @pipeline.dependencies)
+  timings = @step_timings || {}
+  lanes = Array(@stage_lanes)
+  short = respond_to?(:short_type) ? short_type(@pipeline.type) : humanized_type(@pipeline.type).sub(/\s*Pipeline\z/, "")
+  status_data = { "pending" => ["○", "pending"], "running" => ["●", "running"], "canceling" => ["◐", "canceling"], "canceled" => ["⊘", "canceled"], "succeeded" => ["✓", "succeeded"], "failed" => ["✗", "failed"], "halted" => ["⊘", "halted"], "skipped" => ["⊘", "skipped"] }
+  glyph, label = status_data.fetch(@pipeline.status.to_s, ["○", @pipeline.status.to_s])
+  now = @now || Time.current
+  elapsed = ((@pipeline.terminal? ? @pipeline.updated_at : now) - @pipeline.created_at).to_f
+  duration = respond_to?(:format_duration) ? format_duration(elapsed) : "#{elapsed.to_i}s"
+  ruby_snippet = %(GoodPipeline::PipelineRecord.find("#{@pipeline.id}"))
+  sql_snippet = "SELECT *\nFROM good_pipeline_pipelines\nWHERE id = '#{@pipeline.id}';"
+  graph = dependencies.length > 1_000 ? "" : mermaid_diagram(@pipeline)
+%>
+<div class="gp-app gp-app--detail">
+  <%= render "topbar", section: "executions", active: short, meta: "##{@pipeline.id.to_s.first(8)}", back: { label: "executions", href: pipelines_path }, connection: @connection_info, now: now %>
 
-<div class="pipeline-detail-grid">
-  <div class="pipeline-detail-left">
-    <article class="pipeline-details">
-      <header><h2><%= humanized_type(@pipeline.type) %></h2></header>
-      <dl>
-        <dt>Status</dt>
-        <dd><%= status_badge(@pipeline.status) %></dd>
-        <dt>Failure Strategy</dt>
-        <dd><span class="strategy-label"><%= @pipeline.on_failure_strategy %></span></dd>
-        <dt>Params</dt>
-        <dd><code><%= @pipeline.params&.to_json %></code></dd>
-        <dt>Created</dt>
-        <dd><%= relative_time_tag(@pipeline.created_at) %></dd>
-        <% if pipeline_duration(@pipeline) %>
-          <dt>Duration</dt>
-          <dd><%= pipeline_duration(@pipeline) %></dd>
-        <% end %>
-      </dl>
-    </article>
+  <header class="gp-detail-header">
+    <span class="gp-detail-title"><%= humanized_type(@pipeline.type) %></span>
+    <span class="gp-status gp-status--<%= @pipeline.status %>"><%= glyph %> <%= label %></span>
+    <span class="gp-strategy gp-strategy--<%= @pipeline.on_failure_strategy %>">on_failure: <%= @pipeline.on_failure_strategy %></span>
+    <span class="gp-detail-uuid"><%= @pipeline.id %><button class="gp-copy" type="button" title="Copy id" data-gp-copy="<%= @pipeline.id %>" data-gp-copy-label="execution id"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="5" y="5" width="9" height="9" rx="1.5"></rect><path d="M11 5V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h2"></path></svg></button></span>
+    <%= render "actions", pipeline: @pipeline, detail_link: false %>
+  </header>
 
-    <%= render "chain_links", pipeline: @pipeline %>
+  <div class="gp-detail-scroll">
+    <div class="gp-detail-columns">
+      <div class="gp-detail-column">
+        <section class="gp-card">
+          <h3 class="gp-section-heading">identity</h3>
+          <table class="gp-kv"><tbody>
+            <tr><td class="gp-kv-key">id</td><td class="gp-kv-value"><%= @pipeline.id %></td></tr>
+            <tr><td class="gp-kv-key">type</td><td class="gp-kv-value"><%= @pipeline.type %></td></tr>
+            <tr><td class="gp-kv-key">params</td><td class="gp-kv-value"><%= @pipeline.params.to_json %></td></tr>
+            <tr><td class="gp-kv-key">created_at</td><td class="gp-kv-value"><%= @pipeline.created_at.utc.strftime("%Y-%m-%d %H:%M:%SZ") %></td></tr>
+            <tr><td class="gp-kv-key">updated_at</td><td class="gp-kv-value"><%= @pipeline.updated_at.utc.strftime("%Y-%m-%d %H:%M:%SZ") %></td></tr>
+            <tr><td class="gp-kv-key">duration</td><td class="gp-kv-value"><%= duration %></td></tr>
+          </tbody></table>
+        </section>
+        <%= render "chain_links", pipeline: @pipeline %>
+        <section class="gp-card"><%= render "steps_table", pipeline: @pipeline, steps: steps, timings: timings %></section>
+        <section class="gp-card">
+          <h3 class="gp-section-heading">requery</h3>
+          <div class="gp-code-wrap"><button class="gp-copy" type="button" title="Copy Ruby snippet" data-gp-copy="<%= ruby_snippet %>" data-gp-copy-label="Ruby snippet"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="5" y="5" width="9" height="9" rx="1.5"></rect><path d="M11 5V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h2"></path></svg></button><pre class="gp-code"><%= ruby_snippet %></pre></div>
+          <div class="gp-code-wrap"><button class="gp-copy" type="button" title="Copy SQL snippet" data-gp-copy="<%= sql_snippet %>" data-gp-copy-label="SQL snippet"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="5" y="5" width="9" height="9" rx="1.5"></rect><path d="M11 5V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h2"></path></svg></button><pre class="gp-code"><%= sql_snippet %></pre></div>
+        </section>
+      </div>
 
-    <article class="table-card">
-      <%= render "steps_table", pipeline: @pipeline %>
-    </article>
-  </div>
-
-  <div class="pipeline-detail-right">
-    <article>
-      <header><h3>Pipeline Graph</h3></header>
-      <% if @pipeline.steps.any? %>
-        <div class="diagram-container">
-          <div class="diagram-toolbar">
-            <button type="button" class="diagram-btn" data-action="zoom-in" title="Zoom in">+</button>
-            <button type="button" class="diagram-btn" data-action="zoom-out" title="Zoom out">&minus;</button>
-            <button type="button" class="diagram-btn" data-action="zoom-reset" title="Reset zoom">Reset</button>
-            <button type="button" class="diagram-btn" data-action="fullscreen" title="Fullscreen">&#x26F6;</button>
-          </div>
-          <div class="diagram-viewport">
-            <div class="diagram-canvas">
-              <pre class="mermaid"><%= raw mermaid_diagram(@pipeline) %></pre>
-            </div>
-          </div>
-        </div>
-      <% else %>
-        <p class="empty-state">No steps defined.</p>
-      <% end %>
-    </article>
+      <div class="gp-detail-column">
+        <%= render "diagram", pipeline: @pipeline, graph: graph, steps: steps, edge_count: dependencies.size, stages: lanes %>
+        <section class="gp-card">
+          <h3 class="gp-section-heading"><%= steps.length > 12 ? "stage timeline" : "step timeline" %><span class="gp-heading-meta"><%= lanes.length %> lanes</span></h3>
+          <%= render "timeline", lanes: lanes %>
+        </section>
+      </div>
+    </div>
   </div>
 </div>