completion-kit 0.28.2 → 0.28.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d0c33e552c40afdb63f16e277e560089aba5d5805160579b40aeb37d83150ad7
-  data.tar.gz: 1e1582e056c438a931b2444bf2dd1e0f6816c58de5d15140ffb345ed3f316109
+  metadata.gz: ff8dc1fe1d84c274b21d8ff9d3dd6e21d547f9c780ba0a071c875abcac3d5459
+  data.tar.gz: de30042560e897432acbb192aebb6a3735301b644383b2ba49eb123f77e80607
 SHA512:
-  metadata.gz: 46eea8e7ec849b1ecf4580378951e2a2508895cfb2be0bd18109530258da74f0d4a2ff8488c4f2ee8f5b2768a4abe302a4f5817bc2950de5f71a439c987b8b74
-  data.tar.gz: 2a632272fef9d7d1f1acf10c12ecd62ff174b0e0389736d91d3be6a639830337edcc3008b959b8657dcb61392cf41d6a5d5f5fa3b6f7a27b68cbbeb40e933c29
+  metadata.gz: abf4fea98a8014b6f8cd7155cc54edfdc40bd23a2d2d08a2a864dcc7764e841a1d2554950aca3b22b48b786151da0f5b8237c4ff82c6924799664d2a6c663cd0
+  data.tar.gz: 6fc8a7683d26cad922086fafd56cacdbd762f4bc766078a1bf5c0f2335a429ba4ec1c5ccac509bec7650a60e9d20747f29680d28344161f186fdff4dca2d9f62

data/app/assets/stylesheets/completion_kit/application.css

@@ -3200,7 +3200,75 @@ select.ck-input {
 .ck-delta--negative { color: var(--ck-danger); background: var(--ck-danger-soft); }
 .ck-delta--zero { color: var(--ck-dim); }
 
-.ck-run-compare-table td { vertical-align: middle; }
+.ck-run-compare-table td { vertical-align: top; }
+
+.ck-table-scroll { overflow-x: auto; }
+
+.ck-run-compare-table th { white-space: nowrap; }
+.ck-run-compare-table th:nth-child(1) { width: 7rem; }
+.ck-run-compare-table th:nth-child(2) { width: 15rem; }
+.ck-run-compare-table th:nth-child(3) { width: 12rem; }
+.ck-run-compare-table th:nth-child(4) { width: 8rem; }
+.ck-run-compare-table th:nth-child(5) { width: auto; }
+
+.ck-run-compare-table th.ck-num,
+.ck-run-compare-table td.ck-num { text-align: right; }
+.ck-run-compare-table td.ck-num { font-variant-numeric: tabular-nums; }
+
+.ck-run-compare-table .ck-compare-metric {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--ck-text);
+  font-weight: 500;
+}
+
+.ck-cmp-score__pair { display: inline-flex; align-items: center; gap: 0.45rem; }
+.ck-cmp-score__arrow { color: var(--ck-dim); font-size: 0.78rem; }
+.ck-cmp-score__link { display: inline-flex; text-decoration: none; border-radius: 7px; transition: box-shadow 0.12s ease; }
+.ck-cmp-score__link:hover { box-shadow: 0 0 0 1px var(--ck-accent); }
+.ck-cmp-score__none { color: var(--ck-dim); }
+
+.ck-cmp-delta .ck-delta { display: inline-flex; align-items: baseline; gap: 0.2rem; }
+.ck-delta__arrow { font-size: 0.72rem; }
+
+.ck-cmp-ver__one, .ck-cmp-ver__pair {
+  font-family: var(--ck-mono);
+  font-size: 0.78rem;
+  color: var(--ck-dim);
+}
+.ck-cmp-ver__pair { color: var(--ck-muted); }
+.ck-cmp-ver__arrow { color: var(--ck-dim); margin: 0 0.3rem; }
+
+.ck-compare-case { white-space: nowrap; }
+.ck-compare-case__num {
+  display: block;
+  font-family: var(--ck-mono);
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--ck-text);
+}
+.ck-compare-case__runs {
+  display: flex;
+  gap: 0.6rem;
+  margin-top: 0.25rem;
+}
+.ck-compare-case__run {
+  font-family: var(--ck-mono);
+  font-size: 0.72rem;
+  letter-spacing: 0.04em;
+}
+.ck-compare-case__run--absent {
+  color: var(--ck-dim);
+  cursor: default;
+}
+
+.ck-run-compare-table tbody tr:hover { background: transparent; }
+.ck-run-compare-table tbody tr { border-bottom: none; }
+.ck-run-compare-table tbody:not(:first-of-type) > tr:first-child > td {
+  border-top: 1px solid var(--ck-line);
+}
+.ck-run-compare-table tbody:hover > tr > td { background: var(--ck-surface-hover); }
 
 @media (max-width: 900px) {
   .ck-grid--sidebar,
@@ -3991,10 +4059,11 @@ a.ck-metric-group-pill {
 
 .ck-responses-table th:nth-child(1), .ck-responses-table td:nth-child(1) { width: 3.5rem; white-space: nowrap; }
 .ck-responses-table th:nth-child(2), .ck-responses-table td:nth-child(2) { width: auto; }
-.ck-responses-table th:nth-child(3), .ck-responses-table td:nth-child(3) { width: 14rem; white-space: nowrap; }
+.ck-responses-table th:nth-child(3), .ck-responses-table td:nth-child(3) { width: 8rem; white-space: nowrap; }
 .ck-responses-table th:nth-child(4), .ck-responses-table td:nth-child(4) { width: 5.5rem; white-space: nowrap; }
-.ck-responses-table th:nth-child(5), .ck-responses-table td:nth-child(5) { width: 8rem; white-space: nowrap; }
+.ck-responses-table th:nth-child(5), .ck-responses-table td:nth-child(5) { width: 7rem; white-space: nowrap; }
 .ck-responses-table th:nth-child(6), .ck-responses-table td:nth-child(6) { width: 3rem; }
+.ck-responses-table .ck-metric-bar--compact { flex-wrap: wrap; row-gap: 3px; }
 
 
 table.ck-runs-table {

data/app/views/completion_kit/runs/_compare_score.html.erb

@@ -0,0 +1,12 @@
+<% has_value = kind == "check" ? !passed.nil? : score.present? %>
+<% if has_value && response %>
+  <%= link_to run_response_path(run, response), class: "ck-cmp-score__link", title: "#{side}: open this response (#{run.name})" do %>
+    <% if kind == "check" %>
+      <%= ck_check_badge(passed) %>
+    <% else %>
+      <span class="<%= ck_badge_classes(ck_score_kind(score.to_f)) %>"><%= score %></span>
+    <% end %>
+  <% end %>
+<% else %>
+  <span class="ck-cmp-score__none">—</span>
+<% end %>

data/app/views/completion_kit/runs/compare.html.erb

@@ -7,7 +7,7 @@
 <section class="ck-page-header">
   <div>
     <h1 class="ck-title">Comparing runs</h1>
-    <p class="ck-meta-copy"><strong>A</strong>: <%= link_to @run.name, run_path(@run), class: "ck-link" %> &middot; <strong>B</strong>: <%= link_to @other_run.name, run_path(@other_run), class: "ck-link" %></p>
+    <p class="ck-meta-copy"><strong>A</strong>: <%= link_to @run.name, run_path(@run), class: "ck-link" %> &middot; <strong>B</strong>: <%= link_to @other_run.name, run_path(@other_run), class: "ck-link" %> &middot; <strong>Δ</strong> = B &minus; A</p>
   </div>
   <div class="ck-actions">
     <%= link_to "Pick another", compare_run_path(@run), class: ck_button_classes(:light, variant: :outline) %>
@@ -19,81 +19,63 @@
     <p>No responses to compare yet.</p>
   </div>
 <% else %>
+  <div class="ck-table-scroll">
   <table class="ck-results-table ck-run-compare-table">
     <thead>
       <tr>
         <th scope="col">Case</th>
         <th scope="col">Metric</th>
-        <th scope="col">A score</th>
-        <th scope="col">B score</th>
-        <th scope="col">Δ</th>
-        <th scope="col">A version</th>
-        <th scope="col">B version</th>
+        <th scope="col">A → B</th>
+        <th scope="col" class="ck-num">Δ</th>
+        <th scope="col">Version</th>
       </tr>
     </thead>
-    <tbody>
       <% @comparison[:rows].each do |row| %>
         <% case_label = ((row[:left_response].row_index || 0) + 1).to_s %>
+        <tbody class="ck-compare-group">
         <% row[:per_metric].each_with_index do |pm, idx| %>
           <tr>
             <% if idx == 0 %>
-              <td rowspan="<%= row[:per_metric].size %>">
-                <%= link_to case_label, run_response_path(@run, row[:left_response]), class: "ck-link" %>
-                <% if row[:right_response] %>
-                  <span class="ck-meta-copy">/ <%= link_to "B", run_response_path(@other_run, row[:right_response]), class: "ck-link" %></span>
-                <% end %>
+              <td rowspan="<%= row[:per_metric].size %>" class="ck-compare-case">
+                <span class="ck-compare-case__num">Case <%= case_label %></span>
+                <span class="ck-compare-case__runs">
+                  <%= link_to "A ↗", run_response_path(@run, row[:left_response]),
+                        class: "ck-link ck-compare-case__run",
+                        title: "Open this case in run A (#{@run.name})" %>
+                  <% if row[:right_response] %>
+                    <%= link_to "B ↗", run_response_path(@other_run, row[:right_response]),
+                          class: "ck-link ck-compare-case__run",
+                          title: "Open this case in run B (#{@other_run.name})" %>
+                  <% else %>
+                    <span class="ck-compare-case__run ck-compare-case__run--absent" title="No matching response in run B">B</span>
+                  <% end %>
+                </span>
               </td>
             <% end %>
-            <td><%= pm[:metric_name] %></td>
-            <td>
-              <% if pm[:kind] == "check" %>
-                <% if pm[:left_passed].nil? %>
-                  <span class="ck-meta-copy">—</span>
-                <% else %>
-                  <%= ck_check_badge(pm[:left_passed]) %>
-                <% end %>
-              <% elsif pm[:left_score] %>
-                <span class="<%= ck_badge_classes(ck_score_kind(pm[:left_score].to_f)) %>"><%= pm[:left_score] %></span>
-              <% else %>
-                <span class="ck-meta-copy">—</span>
-              <% end %>
-            </td>
-            <td>
-              <% if pm[:kind] == "check" %>
-                <% if pm[:right_passed].nil? %>
-                  <span class="ck-meta-copy">—</span>
-                <% else %>
-                  <%= ck_check_badge(pm[:right_passed]) %>
-                <% end %>
-              <% elsif pm[:right_score] %>
-                <span class="<%= ck_badge_classes(ck_score_kind(pm[:right_score].to_f)) %>"><%= pm[:right_score] %></span>
-              <% else %>
-                <span class="ck-meta-copy">—</span>
-              <% end %>
+            <td class="ck-compare-metric" data-label="Metric" title="<%= pm[:metric_name] %>"><%= pm[:metric_name] %></td>
+            <td class="ck-cmp-score" data-label="A → B">
+              <span class="ck-cmp-score__pair">
+                <%= render "compare_score", kind: pm[:kind], passed: pm[:left_passed], score: pm[:left_score], response: row[:left_response], run: @run, side: "A" %>
+                <span class="ck-cmp-score__arrow" aria-hidden="true">→</span>
+                <%= render "compare_score", kind: pm[:kind], passed: pm[:right_passed], score: pm[:right_score], response: row[:right_response], run: @other_run, side: "B" %>
+              </span>
             </td>
-            <td>
+            <td class="ck-num ck-cmp-delta" data-label="Δ">
               <% if pm[:kind] == "check" %>
-                <%= ck_result_change_badge(pm[:result_change]) || content_tag(:span, "—", class: "ck-meta-copy") %>
+                <%= ck_result_change_badge(pm[:result_change]) || content_tag(:span, "—", class: "ck-cmp-score__none") %>
               <% elsif pm[:delta] %>
-                <% delta_class = pm[:delta] > 0 ? "ck-delta--positive" : pm[:delta] < 0 ? "ck-delta--negative" : "ck-delta--zero" %>
-                <span class="ck-delta <%= delta_class %>"><%= pm[:delta].positive? ? "+#{pm[:delta]}" : pm[:delta].to_s %></span>
+                <% d = pm[:delta] %>
+                <% dcls = d > 0 ? "ck-delta--positive" : d < 0 ? "ck-delta--negative" : "ck-delta--zero" %>
+                <span class="ck-delta <%= dcls %>"><span class="ck-delta__arrow" aria-hidden="true"><%= d > 0 ? "▲" : d < 0 ? "▼" : "=" %></span><%= d > 0 ? "+#{d}" : d.to_s %></span>
               <% else %>
-                <span class="ck-meta-copy">—</span>
-              <% end %>
-            </td>
-            <td>
-              <% if pm[:left_version_label] %>
-                <span class="ck-source-chip ck-source-chip--current"><%= pm[:left_version_label] %></span>
-              <% end %>
-            </td>
-            <td>
-              <% if pm[:right_version_label] %>
-                <span class="ck-source-chip ck-source-chip--current"><%= pm[:right_version_label] %></span>
+                <span class="ck-cmp-score__none">—</span>
               <% end %>
             </td>
+            <td class="ck-cmp-ver" data-label="Version"><% lv = pm[:left_version_label]; rv = pm[:right_version_label] %><% if lv && rv && lv != rv %><span class="ck-cmp-ver__pair"><%= lv %><span class="ck-cmp-ver__arrow" aria-hidden="true">→</span><%= rv %></span><% elsif lv || rv %><span class="ck-cmp-ver__one"><%= lv || rv %></span><% end %></td>
           </tr>
         <% end %>
+        </tbody>
       <% end %>
-    </tbody>
   </table>
+  </div>
 <% end %>

data/lib/completion_kit/version.rb

@@ -1,3 +1,3 @@
 module CompletionKit
-  VERSION = "0.28.2"
+  VERSION = "0.28.4"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: completion-kit
 version: !ruby/object:Gem::Version
-  version: 0.28.2
+  version: 0.28.4
 platform: ruby
 authors:
 - Damien Bastin
@@ -407,6 +407,7 @@ files:
 - app/views/completion_kit/provider_credentials/statuses.turbo_stream.erb
 - app/views/completion_kit/responses/show.html.erb
 - app/views/completion_kit/runs/_actions.html.erb
+- app/views/completion_kit/runs/_compare_score.html.erb
 - app/views/completion_kit/runs/_form.html.erb
 - app/views/completion_kit/runs/_response_row.html.erb
 - app/views/completion_kit/runs/_row.html.erb