completion-kit 0.5.5 → 0.5.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 89a2dd49e9edb75dada51386769cfd7e16f596c3b30c434588864487ab801d5b
-  data.tar.gz: df8d9acfd4ef8aeab73508e7cf9adb2c083c7b9ef3d1c4304e1a3e01723b17e1
+  metadata.gz: bc297d90963b3ef6543ef3b2f14a94808c9a5a945047bd9ebb4b820fed1c9c9d
+  data.tar.gz: dc730069a2f27764f384068d2fab146e3cb402e24f3dfdeea33d700d50118d3a
 SHA512:
-  metadata.gz: 9b03af38565cb43b7a57747896136817d954b06a89ba4551afb314ca93cd56a70e9d3068271d4f522741efa7d830b106a3a39e05997ea38fc3fb65996741ad08
-  data.tar.gz: be0dad1d98c850854770351edbfdcd7867fbda7b6590634bae2997707a136a94cee066c79fd2ae8a259ea9c01db06a89b7088012a072655c7c627f7c475a801a
+  metadata.gz: c0fe08870fd298ca0ba0e5b850dc9992dbe8fc7cfebb81abb352d1543220c2925f195abd66113204f28ebfa2e48433d9ad389fc94f100ab1f8c9689edfdc6785
+  data.tar.gz: 1fc05c857f889ea0e461196471eca63d630c82a84d5447f870db9cd6bdfec9f539125d6189de27e3ee6cfc6969089105212f73e8a48485fecb8282ca886305a5

data/README.md

@@ -142,7 +142,7 @@ Only one mode can be active.
 
 ## Concepts
 
-- **Prompt.** A versioned template with `{{variable}}` placeholders. Publishing freezes the template; editing a published prompt creates a new version.
+- **Prompt.** A versioned template with `{{variable}}` placeholders. Editing a prompt that's already been run creates a new version, so earlier results stay reproducible.
 - **Dataset.** A CSV of real inputs. Each row becomes one test case.
 - **Run.** One execution of a prompt against a dataset. Captures every input (model, temperature, metrics) and stores all outputs and scores.
 - **Response.** The model's output for one dataset row, with reviews attached.

data/app/assets/javascripts/completion_kit/application.js

@@ -105,11 +105,16 @@ document.addEventListener("mouseout", function(e) {
 });
 
 var ckRefreshing = false;
+function ckSetRefreshButtonsBusy(busy) {
+  document.querySelectorAll('.ck-icon-btn[title="Refresh models"]').forEach(function(btn) {
+    btn.classList.toggle('ck-icon-btn--spinning', busy);
+    btn.disabled = busy;
+  });
+}
 function ckRefreshModels() {
   if (ckRefreshing) return;
   ckRefreshing = true;
-  var btn = document.querySelector('.ck-icon-btn[title="Refresh models"]');
-  if (btn) btn.classList.add('ck-icon-btn--spinning');
+  ckSetRefreshButtonsBusy(true);
   ckUpdateRefreshProgress();
   var csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
   fetch("/completion_kit/refresh_models", {
@@ -149,8 +154,7 @@ document.addEventListener("turbo:before-stream-render", function(event) {
   }
   if (target === "prompt_llm_model" || target === "run_judge_model") {
     ckRefreshing = false;
-    var btn = document.querySelector('.ck-icon-btn[title="Refresh models"]');
-    if (btn) btn.classList.remove('ck-icon-btn--spinning');
+    ckSetRefreshButtonsBusy(false);
     var status = document.getElementById('refresh-status');
     if (status) { status.textContent = 'Models updated.'; setTimeout(function() { status.textContent = ' '; }, 3000); }
   }

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

@@ -1164,6 +1164,17 @@ tr:hover .ck-chip--publish {
   cursor: help;
 }
 
+.ck-model-table tr.ck-model-table__section td {
+  padding: 0.85rem 0 0.3rem;
+  font-family: var(--ck-mono);
+  font-size: 0.66rem;
+  font-weight: 600;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--ck-dim);
+}
+.ck-model-table tr.ck-model-table__section:first-child td { padding-top: 0; }
+
 .ck-model-list__summary {
   display: flex;
   align-items: center;
@@ -1278,6 +1289,102 @@ tr:hover .ck-chip--publish {
   max-width: 36rem;
 }
 
+.ck-version-note {
+  margin: 0 0 1rem;
+  max-width: 36rem;
+  font-family: var(--ck-sans);
+  font-size: 0.85rem;
+  line-height: 1.5;
+  color: var(--ck-muted);
+}
+
+.ck-version-change {
+  margin: 0.5rem 0 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  font-family: var(--ck-mono);
+  font-size: 0.8rem;
+}
+.ck-version-change__label {
+  font-size: 0.66rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--ck-dim);
+}
+.ck-version-change__old {
+  padding: 0.15em 0.5em;
+  border-radius: var(--ck-radius);
+  background: var(--ck-danger-soft);
+  color: var(--ck-danger);
+  text-decoration: line-through;
+}
+.ck-version-change__arrow { color: var(--ck-dim); }
+.ck-version-change__new {
+  padding: 0.15em 0.5em;
+  border-radius: var(--ck-radius);
+  background: var(--ck-success-soft);
+  color: var(--ck-success);
+}
+
+.ck-modal__body .ck-version-change + .ck-suggest-diff { margin-top: 0.9rem; }
+
+.ck-cell-link {
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: var(--ck-mono);
+  font-size: 0.8rem;
+  color: var(--ck-accent);
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.ck-cell-link:hover { color: var(--ck-accent-hover); }
+.ck-cell-link--delta {
+  font-size: 1rem;
+  font-weight: 700;
+  text-decoration: none;
+  color: var(--ck-dim);
+}
+.ck-cell-link--delta:hover { color: var(--ck-accent); }
+
+/* Version-history table: cell that pairs the version label + publish control (left) with the diff trigger (right) */
+.ck-version-cell {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.ck-version-cell__label { display: flex; align-items: center; gap: 0.5rem; }
+
+/* the version currently being viewed: faint accent wash (like the model chips)
+   plus a bright accent border drawn on the cells (Safari can't box-shadow a <tr>) */
+.ck-results-table tbody tr.ck-results-table__row--active,
+.ck-results-table tbody tr.ck-results-table__row--active:hover {
+  background: var(--ck-accent-soft);
+}
+.ck-results-table tbody tr.ck-results-table__row--active td {
+  box-shadow: inset 0 2px 0 var(--ck-accent), inset 0 -2px 0 var(--ck-accent);
+}
+.ck-results-table tbody tr.ck-results-table__row--active td:first-child {
+  box-shadow: inset 0 2px 0 var(--ck-accent), inset 0 -2px 0 var(--ck-accent), inset 2px 0 0 var(--ck-accent);
+}
+.ck-results-table tbody tr.ck-results-table__row--active td:last-child {
+  box-shadow: inset 0 2px 0 var(--ck-accent), inset 0 -2px 0 var(--ck-accent), inset -2px 0 0 var(--ck-accent);
+}
+/* when it's the last row, round its bottom corners so the border isn't clipped
+   by the table's rounded container */
+.ck-results-table tbody tr.ck-results-table__row--active:last-child td:first-child {
+  border-bottom-left-radius: calc(var(--ck-radius-lg) - 1px);
+}
+.ck-results-table tbody tr.ck-results-table__row--active:last-child td:last-child {
+  border-bottom-right-radius: calc(var(--ck-radius-lg) - 1px);
+}
+.ck-results-table tbody tr.ck-results-table__row--active strong { color: var(--ck-accent-hover); }
+
 .ck-field-hint {
   font-family: var(--ck-sans);
   font-size: 0.8rem;
@@ -1659,30 +1766,54 @@ tr:hover .ck-chip--publish {
   color: var(--ck-text);
 }
 
+@keyframes ck-flash-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
 .ck-flash {
-  margin-bottom: 1rem;
-  padding: 0.75rem 1rem;
-  border-radius: var(--ck-radius);
+  margin-bottom: 1.25rem;
+  padding: 0.8rem 1rem;
   border: 1px solid transparent;
+  border-radius: var(--ck-radius);
   font-family: var(--ck-sans);
-  font-size: 0.95rem;
+  font-size: 0.9rem;
+  line-height: 1.6;
+  animation: ck-flash-in 0.22s ease both;
 }
+.ck-flash--notice { background: rgba(45, 212, 168, 0.08); border-color: rgba(45, 212, 168, 0.32); }
+.ck-flash--alert  { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.32); }
 
-.ck-flash--notice {
-  border-color: rgba(34, 197, 94, 0.3);
-  background: var(--ck-success-soft);
-  color: var(--ck-success);
+/* layout flash: a mono status tag (the engine's kicker treatment) inline before the message */
+.ck-flash__label {
+  margin-right: 0.6rem;
+  font-family: var(--ck-mono);
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  white-space: nowrap;
 }
-
-.ck-flash--alert {
-  border-color: rgba(239, 68, 68, 0.3);
-  background: var(--ck-danger-soft);
-  color: var(--ck-danger);
+.ck-flash__label::before {
+  content: "";
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin-right: 0.45rem;
+  border-radius: 50%;
+  background: currentColor;
+  box-shadow: 0 0 7px currentColor;
+  vertical-align: 0.12em;
 }
+.ck-flash--notice .ck-flash__label { color: var(--ck-success); }
+.ck-flash--alert  .ck-flash__label { color: var(--ck-danger); }
+.ck-flash__body { color: var(--ck-text); }
 
-.ck-flash__title {
-  margin: 0;
-  font-weight: 700;
+/* form-error summary inside .ck-flash--alert: title sentence + ck-error-list */
+.ck-flash__title { margin: 0; font-weight: 600; color: var(--ck-danger); }
+
+@media (prefers-reduced-motion: reduce) {
+  .ck-flash { animation: none; }
 }
 
 .ck-banner {
@@ -2012,6 +2143,10 @@ select.ck-input {
   box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
   overflow: hidden;
 }
+/* the panel is the dialog's autofocus target (so the close button isn't auto-focused);
+   it's a container, not a control, so don't show a ring on it */
+.ck-modal__panel:focus,
+.ck-modal__panel:focus-visible { outline: none; }
 
 .ck-modal__header {
   display: flex;
@@ -2048,9 +2183,8 @@ select.ck-input {
 
 .ck-modal__close {
   appearance: none;
+  position: relative;
   display: inline-flex;
-  align-items: center;
-  justify-content: center;
   width: 28px;
   height: 28px;
   padding: 0;
@@ -2059,12 +2193,25 @@ select.ck-input {
   outline: none;
   background: transparent;
   color: var(--ck-dim);
-  font-family: var(--ck-sans);
-  font-size: 1.5rem;
-  line-height: 1;
+  font-size: 0;
   cursor: pointer;
   transition: color 0.15s, background 0.15s;
 }
+/* the "×" is drawn as two crossed bars centred on the button, so it (and the
+   focus ring around the button) sit dead centre regardless of font metrics */
+.ck-modal__close::before,
+.ck-modal__close::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 13px;
+  height: 1.6px;
+  border-radius: 1px;
+  background: currentColor;
+}
+.ck-modal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
+.ck-modal__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
 
 .ck-modal__close:hover {
   color: var(--ck-text);
@@ -2083,6 +2230,8 @@ select.ck-input {
   overflow: auto;
   padding: 0 1.5rem;
 }
+/* no footer? then the body needs its own bottom padding */
+.ck-modal__body:last-child { padding-bottom: 1.5rem; }
 
 .ck-modal__footer {
   display: flex;
@@ -2878,6 +3027,29 @@ select.ck-input {
   color: var(--ck-dim);
 }
 
+.ck-prompts-table__desc {
+  margin: 0.3rem 0 0;
+  font-family: var(--ck-sans);
+  font-size: 0.82rem;
+  font-weight: 400;
+  line-height: 1.45;
+  color: var(--ck-muted);
+  white-space: normal;
+  max-width: 42ch;
+}
+
+.ck-endpoint--compact {
+  margin-top: 0.45rem;
+  max-width: 26rem;
+}
+.ck-endpoint--compact .ck-endpoint__url {
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ck-endpoint--compact .ck-icon-btn { flex-shrink: 0; }
+
 .ck-clamp-2 {
   display: -webkit-box;
   -webkit-line-clamp: 2;

data/app/controllers/completion_kit/prompts_controller.rb

@@ -50,7 +50,7 @@ module CompletionKit
 
     def publish
       @prompt.publish!
-      redirect_to prompt_path(@prompt), notice: "#{@prompt.display_name} is now the current version."
+      redirect_to prompt_path(@prompt), notice: "#{@prompt.display_name} is now the published version."
     end
 
     private

data/app/helpers/completion_kit/application_helper.rb

@@ -72,6 +72,41 @@ module CompletionKit
       CompletionKit::ProviderCredential::PROVIDER_LABELS[provider.to_s] || provider.to_s.titleize
     end
 
+    OPENAI_MODEL_FAMILY_ORDER = ["GPT-5", "GPT-4", "o-series", "GPT-3.5", "GPT-OSS", "Other"].freeze
+
+    def ck_openai_model_family(model_id)
+      id = model_id.to_s
+      return "GPT-5" if id.match?(/\Agpt-5/i)
+      return "GPT-4" if id.match?(/\Agpt-4/i)
+      return "GPT-3.5" if id.match?(/\Agpt-3/i)
+      return "GPT-OSS" if id.match?(/\Agpt-oss/i)
+      return "o-series" if id.match?(/\Ao\d/i)
+      "Other"
+    end
+
+    # Groups a provider's models for the models-card table, mirroring how the
+    # dropdown sub-groups: OpenRouter clusters by upstream vendor (the part
+    # before "/"); OpenAI clusters by family; everyone else stays flat. Returns
+    # [[section_label_or_nil, [models]], ...]. A single section collapses to a
+    # nil label so we don't render a redundant header.
+    def ck_model_table_sections(models)
+      models = models.to_a
+      sections =
+        case models.first&.provider
+        when "openrouter"
+          models.group_by { |m| m.model_id.to_s.split("/", 2).first.delete_prefix("~") }
+                .sort_by { |label, _| label }
+        when "openai"
+          grouped = models.group_by { |m| ck_openai_model_family(m.model_id) }
+          ordered = OPENAI_MODEL_FAMILY_ORDER.filter_map { |label| [label, grouped[label]] if grouped[label] }
+          extras = (grouped.keys - OPENAI_MODEL_FAMILY_ORDER).sort.map { |label| [label, grouped[label]] }
+          ordered + extras
+        else
+          [[nil, models]]
+        end
+      sections.size <= 1 ? [[nil, models]] : sections
+    end
+
     def ck_model_option_label(model)
       return "#{model[:name]} (?)" if model.key?(:judging_confirmed) && !model[:judging_confirmed]
       model[:name]
@@ -85,20 +120,33 @@ module CompletionKit
         end
       end
 
-      groups = models.group_by do |m|
-        if m[:provider] == "openrouter"
-          upstream = m[:id].to_s.split("/", 2).first
-          "OpenRouter — #{upstream}"
-        else
-          ck_provider_label(m[:provider])
-        end
-      end
-
-      ordered_keys = groups.keys.sort_by { |label| [label.start_with?("OpenRouter") ? 1 : 0, label] }
+      groups = models.group_by { |m| ck_model_optgroup_label(m) }
+      ordered_keys = groups.keys.sort_by { |label| ck_model_optgroup_sort_key(label) }
       grouped = ordered_keys.map { |label| [label, groups[label].map { |m| [ck_model_option_label(m), m[:id]] }] }
       grouped_options_for_select(grouped, selected)
     end
 
+    # Optgroup label for the model select — mirrors the provider models table:
+    # OpenRouter splits by upstream vendor, OpenAI splits by family, everyone
+    # else is a single group.
+    def ck_model_optgroup_label(model)
+      case model[:provider]
+      when "openrouter" then "OpenRouter — #{model[:id].to_s.split("/", 2).first.delete_prefix("~")}"
+      when "openai"     then "OpenAI — #{ck_openai_model_family(model[:id])}"
+      else ck_provider_label(model[:provider])
+      end
+    end
+
+    def ck_model_optgroup_sort_key(label)
+      if label.start_with?("OpenAI — ")
+        [0, OPENAI_MODEL_FAMILY_ORDER.index(label.delete_prefix("OpenAI — ")), label]
+      elsif label.start_with?("OpenRouter")
+        [2, 0, label]
+      else
+        [1, 0, label]
+      end
+    end
+
     def ck_model_options_html(scope)
       models = CompletionKit::ApiConfig.available_models(scope: scope)
       return "" if models.empty?

data/app/models/completion_kit/provider_credential.rb

@@ -47,6 +47,14 @@ module CompletionKit
       false
     end
 
+    def model_count
+      Model.where(provider: provider).active.count
+    end
+
+    def self.discovery_in_progress?
+      where(discovery_status: "discovering").exists?
+    end
+
     def prompt_count
       model_ids = Model.where(provider: provider).pluck(:model_id)
       return 0 if model_ids.empty?

data/app/views/completion_kit/prompts/_form.html.erb

@@ -10,6 +10,10 @@
     </div>
   <% end %>
 
+  <% if prompt.persisted? && prompt.runs.exists? %>
+    <p class="ck-version-note">Editing <%= prompt.version_label %> — it has runs, so saving creates a new version of this prompt.</p>
+  <% end %>
+
   <div class="ck-card ck-form-card">
     <div class="ck-field">
       <%= form.label :name, "Name", class: "ck-label" %>
@@ -33,7 +37,8 @@
       <% if available.any? %>
         <div class="ck-select-with-action">
           <%= form.select :llm_model, ck_grouped_models(available, prompt.llm_model), { include_blank: "— Select a model —" }, { class: "ck-input", id: "prompt_llm_model" } %>
-          <button type="button" class="ck-icon-btn" title="Refresh models" onclick="ckRefreshModels()"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="16" height="16"><path fill-rule="evenodd" d="M13.836 2.477a.75.75 0 0 1 .75.75v3.182a.75.75 0 0 1-.75.75h-3.182a.75.75 0 0 1 0-1.5h1.37l-.84-.841a4.5 4.5 0 0 0-7.08.681.75.75 0 0 1-1.264-.808 6 6 0 0 1 9.44-.908l.84.84V3.227a.75.75 0 0 1 .75-.75Zm-.911 7.5A.75.75 0 0 1 13.199 11a6 6 0 0 1-9.44.908l-.84-.84v1.68a.75.75 0 0 1-1.5 0V9.567a.75.75 0 0 1 .75-.75h3.182a.75.75 0 0 1 0 1.5h-1.37l.84.841a4.5 4.5 0 0 0 7.08-.681.75.75 0 0 1 1.024-.274Z" clip-rule="evenodd"/></svg></button>
+          <% ck_refreshing = CompletionKit::ProviderCredential.discovery_in_progress? %>
+          <button type="button" class="ck-icon-btn<%= ' ck-icon-btn--spinning' if ck_refreshing %>" title="Refresh models" <%= 'disabled' if ck_refreshing %> onclick="ckRefreshModels()"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="16" height="16"><path fill-rule="evenodd" d="M13.836 2.477a.75.75 0 0 1 .75.75v3.182a.75.75 0 0 1-.75.75h-3.182a.75.75 0 0 1 0-1.5h1.37l-.84-.841a4.5 4.5 0 0 0-7.08.681.75.75 0 0 1-1.264-.808 6 6 0 0 1 9.44-.908l.84.84V3.227a.75.75 0 0 1 .75-.75Zm-.911 7.5A.75.75 0 0 1 13.199 11a6 6 0 0 1-9.44.908l-.84-.84v1.68a.75.75 0 0 1-1.5 0V9.567a.75.75 0 0 1 .75-.75h3.182a.75.75 0 0 1 0 1.5h-1.37l.84.841a4.5 4.5 0 0 0 7.08-.681.75.75 0 0 1 1.024-.274Z" clip-rule="evenodd"/></svg></button>
         </div>
       <% else %>
         <p class="ck-meta-copy">No models available. <%= link_to "Add a provider", provider_credentials_path, class: "ck-link" %> or click refresh after configuring a provider.</p>

data/app/views/completion_kit/prompts/index.html.erb

@@ -30,6 +30,13 @@
         <tr onclick="window.location='<%= prompt_path(prompt) %>'" style="cursor: pointer;">
           <td>
             <strong><%= prompt.name %></strong>
+            <% if prompt.description.present? %>
+              <p class="ck-prompts-table__desc"><%= truncate(prompt.description, length: 120) %></p>
+            <% end %>
+            <div class="ck-endpoint ck-endpoint--compact" onclick="event.stopPropagation()">
+              <code class="ck-endpoint__url" id="prompt_endpoint_<%= prompt.id %>"><%= api_v1_prompt_path(prompt.slug) %></code>
+              <button type="button" class="ck-icon-btn" title="Copy API path" onclick="event.stopPropagation();navigator.clipboard.writeText(document.getElementById('prompt_endpoint_<%= prompt.id %>').textContent)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="13" height="13" aria-hidden="true"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"/><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"/></svg></button>
+            </div>
             <% if prompt.tags.any? %>
               <div class="tag-marks-row">
                 <%= render "completion_kit/tags/marks", tags: prompt.tags %>

data/app/views/completion_kit/prompts/show.html.erb

@@ -7,6 +7,7 @@
   <div>
     <div class="ck-inline">
       <h1 class="ck-title"><%= @prompt.name %></h1>
+      <span class="ck-chip ck-chip--soft"><%= @prompt.version_label %></span>
       <span class="ck-chip"><%= @prompt.llm_model %></span>
     </div>
     <% if @prompt.description.present? %>
@@ -47,7 +48,9 @@
   <pre class="ck-code ck-code--dark"><%= @prompt.template %></pre>
 </section>
 
-<% versions = @prompt.family_versions %>
+<% versions = @prompt.family_versions.includes(runs: { responses: :reviews }).to_a %>
+<% predecessor_of = versions.index_with { |v| versions.detect { |o| o.version_number < v.version_number } } %>
+<% version_changed = ->(v, pred) { pred && (pred.template != v.template || pred.llm_model != v.llm_model) } %>
 <% if versions.size > 1 %>
   <section class="ck-card--spaced">
     <p class="ck-kicker">Versions</p>
@@ -56,28 +59,82 @@
         <tr>
           <th>Version</th>
           <th>Model</th>
+          <th>Best score</th>
           <th>Created</th>
-          <th></th>
         </tr>
       </thead>
       <tbody>
         <% versions.each do |v| %>
-          <tr>
-            <td><strong>v<%= v.version_number %></strong></td>
+          <% best_score = v.runs.map(&:avg_score).compact.max %>
+          <% pred = predecessor_of[v] %>
+          <tr class="<%= "ck-results-table__row--active" if v.id == @prompt.id %>" onclick="window.location='<%= prompt_path(v) %>'" style="cursor: pointer;">
+            <td>
+              <div class="ck-version-cell">
+                <div class="ck-version-cell__label" onclick="event.stopPropagation()">
+                  <strong>v<%= v.version_number %></strong>
+                  <% if v.current? %>
+                    <span class="ck-chip">Published</span>
+                  <% else %>
+                    <%= button_to "Publish", publish_prompt_path(v), method: :post, class: "ck-chip ck-chip--publish", form_class: "inline-block" %>
+                  <% end %>
+                </div>
+                <% if version_changed.call(v, pred) %>
+                  <button type="button" class="ck-cell-link ck-cell-link--delta" title="What changed from v<%= pred.version_number %>" onclick="event.stopPropagation();document.getElementById('ck-vdiff-<%= v.id %>').showModal()">&Delta;</button>
+                <% end %>
+              </div>
+            </td>
             <td><span class="ck-chip ck-chip--soft"><%= v.llm_model %></span></td>
-            <td class="ck-meta-copy"><time datetime="<%= v.created_at.iso8601 %>" data-local-time><%= v.created_at.utc.strftime("%b %-d, %Y at %-I:%M %p UTC") %></time></td>
             <td>
-              <% if v.current? %>
-                <span class="ck-chip">Current</span>
+              <% if best_score %>
+                <span class="<%= ck_badge_classes(ck_score_kind(best_score)) %>"><%= best_score %></span>
               <% else %>
-                <%= button_to "Publish", publish_prompt_path(v), method: :post, class: "ck-chip ck-chip--publish", form_class: "inline-block" %>
+                <span class="ck-prompts-table__dim">—</span>
               <% end %>
             </td>
+            <td class="ck-meta-copy"><time datetime="<%= v.created_at.iso8601 %>" data-local-time><%= v.created_at.utc.strftime("%b %-d, %Y at %-I:%M %p UTC") %></time></td>
           </tr>
         <% end %>
       </tbody>
     </table>
   </section>
+
+  <% versions.each do |v| %>
+    <% pred = predecessor_of[v] %>
+    <% next unless version_changed.call(v, pred) %>
+    <dialog id="ck-vdiff-<%= v.id %>" class="ck-modal" onclick="if(event.target===this)this.close()">
+      <article class="ck-modal__panel" tabindex="-1" autofocus onclick="event.stopPropagation()">
+        <header class="ck-modal__header">
+          <div class="ck-modal__heading">
+            <h2 class="ck-modal__title">v<%= pred.version_number %> &rarr; v<%= v.version_number %></h2>
+            <span class="ck-modal__meta">What changed in <%= v.version_label %><% if v.current? %> (published)<% end %></span>
+          </div>
+          <button type="button" class="ck-modal__close" aria-label="Close" onclick="this.closest('dialog').close()">&times;</button>
+        </header>
+        <div class="ck-modal__body">
+          <% if pred.llm_model != v.llm_model %>
+            <p class="ck-version-change">
+              <span class="ck-version-change__label">Model</span>
+              <span class="ck-version-change__old"><%= pred.llm_model %></span>
+              <span class="ck-version-change__arrow" aria-hidden="true">&rarr;</span>
+              <span class="ck-version-change__new"><%= v.llm_model %></span>
+            </p>
+          <% end %>
+          <% if pred.template != v.template %>
+            <div class="ck-suggest-diff">
+              <div class="ck-suggest-diff__pane">
+                <div class="ck-suggest-diff__header"><span class="ck-suggest-diff__label ck-suggest-diff__label--before"><%= pred.version_label %></span></div>
+                <pre class="ck-suggest-diff__code"><%= ck_word_diff_old(pred.template, v.template) %></pre>
+              </div>
+              <div class="ck-suggest-diff__pane">
+                <div class="ck-suggest-diff__header"><span class="ck-suggest-diff__label ck-suggest-diff__label--after"><%= v.version_label %></span></div>
+                <pre class="ck-suggest-diff__code"><%= ck_word_diff_new(pred.template, v.template) %></pre>
+              </div>
+            </div>
+          <% end %>
+        </div>
+      </article>
+    </dialog>
+  <% end %>
 <% end %>
 
 <% if @runs.any? %>

data/app/views/completion_kit/provider_credentials/_models_card.html.erb

@@ -41,26 +41,31 @@
                 </tr>
               </thead>
               <tbody>
-                <% models.each do |m| %>
-                  <tr>
-                    <td class="ck-model-table__name"><%= m.display_name || m.model_id %></td>
-                    <td class="ck-model-table__cap">
-                      <% if m.supports_generation %>
-                        <span class="ck-model-table__tick" aria-label="Supports generation">✓</span>
-                      <% else %>
-                        <span class="ck-model-table__dash" aria-label="No generation support">—</span>
-                      <% end %>
-                    </td>
-                    <td class="ck-model-table__cap">
-                      <% if m.supports_judging %>
-                        <span class="ck-model-table__tick" aria-label="Supports judging">✓</span>
-                      <% elsif m.supports_judging.nil? %>
-                        <span class="ck-model-table__unknown" aria-label="Untested as judge" title="Untested as a judge — selectable; a successful run confirms it">?</span>
-                      <% else %>
-                        <span class="ck-model-table__dash" aria-label="Not usable as judge">—</span>
-                      <% end %>
-                    </td>
-                  </tr>
+                <% ck_model_table_sections(models).each do |section_label, section_models| %>
+                  <% if section_label %>
+                    <tr class="ck-model-table__section"><td colspan="3"><%= section_label %></td></tr>
+                  <% end %>
+                  <% section_models.each do |m| %>
+                    <tr>
+                      <td class="ck-model-table__name"><%= m.display_name || m.model_id %></td>
+                      <td class="ck-model-table__cap">
+                        <% if m.supports_generation %>
+                          <span class="ck-model-table__tick" aria-label="Supports generation">✓</span>
+                        <% else %>
+                          <span class="ck-model-table__dash" aria-label="No generation support">—</span>
+                        <% end %>
+                      </td>
+                      <td class="ck-model-table__cap">
+                        <% if m.supports_judging %>
+                          <span class="ck-model-table__tick" aria-label="Supports judging">✓</span>
+                        <% elsif m.supports_judging.nil? %>
+                          <span class="ck-model-table__unknown" aria-label="Untested as judge" title="Untested as a judge — selectable; a successful run confirms it">?</span>
+                        <% else %>
+                          <span class="ck-model-table__dash" aria-label="Not usable as judge">—</span>
+                        <% end %>
+                      </td>
+                    </tr>
+                  <% end %>
                 <% end %>
               </tbody>
             </table>

data/app/views/completion_kit/provider_credentials/index.html.erb

@@ -27,6 +27,7 @@
 
         <div class="ck-provider-card__meta">
           <span><%= provider_credential.api_endpoint.presence || default_endpoints[provider_credential.provider] %></span>
+          <span><%= provider_credential.model_count %> models</span>
           <span><%= provider_credential.prompt_count %> prompts</span>
           <span><%= provider_credential.judge_count %> judges</span>
           <span><% if provider_credential.last_used_at %>Used <time data-relative-time datetime="<%= provider_credential.last_used_at.utc.iso8601 %>"><%= time_ago_in_words(provider_credential.last_used_at) %></time> ago<% else %>Never used<% end %></span>

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

@@ -74,7 +74,8 @@
       <% if available.any? %>
         <div class="ck-select-with-action">
           <%= form.select :judge_model, ck_grouped_models(available, run.judge_model), { include_blank: "None" }, { class: "ck-input", id: "run_judge_model" } %>
-          <button type="button" class="ck-icon-btn" title="Refresh models" onclick="ckRefreshModels()"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="16" height="16"><path fill-rule="evenodd" d="M13.836 2.477a.75.75 0 0 1 .75.75v3.182a.75.75 0 0 1-.75.75h-3.182a.75.75 0 0 1 0-1.5h1.37l-.84-.841a4.5 4.5 0 0 0-7.08.681.75.75 0 0 1-1.264-.808 6 6 0 0 1 9.44-.908l.84.84V3.227a.75.75 0 0 1 .75-.75Zm-.911 7.5A.75.75 0 0 1 13.199 11a6 6 0 0 1-9.44.908l-.84-.84v1.68a.75.75 0 0 1-1.5 0V9.567a.75.75 0 0 1 .75-.75h3.182a.75.75 0 0 1 0 1.5h-1.37l.84.841a4.5 4.5 0 0 0 7.08-.681.75.75 0 0 1 1.024-.274Z" clip-rule="evenodd"/></svg></button>
+          <% ck_refreshing = CompletionKit::ProviderCredential.discovery_in_progress? %>
+          <button type="button" class="ck-icon-btn<%= ' ck-icon-btn--spinning' if ck_refreshing %>" title="Refresh models" <%= 'disabled' if ck_refreshing %> onclick="ckRefreshModels()"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" width="16" height="16"><path fill-rule="evenodd" d="M13.836 2.477a.75.75 0 0 1 .75.75v3.182a.75.75 0 0 1-.75.75h-3.182a.75.75 0 0 1 0-1.5h1.37l-.84-.841a4.5 4.5 0 0 0-7.08.681.75.75 0 0 1-1.264-.808 6 6 0 0 1 9.44-.908l.84.84V3.227a.75.75 0 0 1 .75-.75Zm-.911 7.5A.75.75 0 0 1 13.199 11a6 6 0 0 1-9.44.908l-.84-.84v1.68a.75.75 0 0 1-1.5 0V9.567a.75.75 0 0 1 .75-.75h3.182a.75.75 0 0 1 0 1.5h-1.37l.84.841a4.5 4.5 0 0 0 7.08-.681.75.75 0 0 1 1.024-.274Z" clip-rule="evenodd"/></svg></button>
         </div>
         <p class="ck-field-hint" id="judge-hint"></p>
         <div hidden data-refresh-progress-carriers>

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

@@ -80,7 +80,7 @@
 
 <% if @run.dataset %>
   <dialog id="dataset-preview-<%= @run.id %>" class="ck-modal" onclick="if(event.target===this)this.close()">
-    <article class="ck-modal__panel" onclick="event.stopPropagation()">
+    <article class="ck-modal__panel" tabindex="-1" autofocus onclick="event.stopPropagation()">
       <header class="ck-modal__header">
         <div class="ck-modal__heading">
           <h2 class="ck-modal__title"><%= @run.dataset.name %></h2>

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

@@ -45,8 +45,9 @@
   <main class="ck-main">
     <div class="ck-wrap">
     <% flash.each do |type, message| %>
-      <div class="ck-flash <%= type.to_s == "notice" ? "ck-flash--notice" : "ck-flash--alert" %>" role="<%= type.to_s == "notice" ? "status" : "alert" %>">
-        <%= message %>
+      <% notice = type.to_s == "notice" %>
+      <div class="ck-flash <%= notice ? "ck-flash--notice" : "ck-flash--alert" %>" role="<%= notice ? "status" : "alert" %>">
+        <span class="ck-flash__label"><%= notice ? "Notice" : "Alert" %></span><span class="ck-flash__body"><%= message %></span>
       </div>
     <% end %>
 

data/lib/completion_kit/version.rb

@@ -1,3 +1,3 @@
 module CompletionKit
-  VERSION = "0.5.5"
+  VERSION = "0.5.6"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: completion-kit
 version: !ruby/object:Gem::Version
-  version: 0.5.5
+  version: 0.5.6
 platform: ruby
 authors:
 - Damien Bastin