completion-kit 0.20.4 → 0.21.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e49a3e185722be44be75a0e236862942841720af9f8b6bdcfe233778968d26ab
-  data.tar.gz: 1545324b88bc8eef05f507d71a80e06804d4a9d3c65f99010b76610657ffa021
+  metadata.gz: 5db8eacad4c6487a87d970c4b942657ad5033b0647a846bdfba2a7c9548a54b0
+  data.tar.gz: 956456ed6c96d122283c6a437a91c062323153bee1e53ec32d10bae56bf2636c
 SHA512:
-  metadata.gz: 21f1b48c9ed2ba23b111eb1ff733ac62f180050ce3e1edd9ea31719ee25cf557025af86e00f13be27b6e04a79afb677ced23fa7e7e5a9580715249533559338c
-  data.tar.gz: a7799c294e109c42a585f9fc7aa01e94d389291dd3fc1eec6821123ea4cb066e5cb805b803dfcf935f771b494bf1324fd7f5787f781746cfd0290d6c97b93641
+  metadata.gz: e8b1f1e18e33a4875944bd779e107280b83acfc231cc4940b4f6fdcdd30d17d093c046fc0fb5836c2675c728681277006ccc54d9d0d72886ac09117d7c924c0d
+  data.tar.gz: c82ff9429c534d82ec3ca7b0acdcfa8ec1d50dfea091b4b04167a3dc65289b06bd3f4a5e2168654cbfb2a127fdd2fac69e77168847d899edd22b136e382e2560

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

@@ -296,3 +296,75 @@ document.addEventListener("click", function(e) {
   btn.textContent = "Applied ✓";
   field.focus({ preventScroll: true });
 });
+
+function ckSelectClose(sel) {
+  if (!sel.classList.contains("is-open")) return;
+  sel.classList.remove("is-open");
+  var menu = sel.querySelector("[data-ck-select-menu]");
+  var trigger = sel.querySelector("[data-ck-select-trigger]");
+  if (menu) menu.hidden = true;
+  if (trigger) trigger.setAttribute("aria-expanded", "false");
+}
+
+function ckSelectOpen(sel) {
+  document.querySelectorAll("[data-ck-select].is-open").forEach(ckSelectClose);
+  sel.classList.add("is-open");
+  var menu = sel.querySelector("[data-ck-select-menu]");
+  var trigger = sel.querySelector("[data-ck-select-trigger]");
+  if (menu) menu.hidden = false;
+  if (trigger) trigger.setAttribute("aria-expanded", "true");
+  var current = menu.querySelector('[aria-selected="true"]') || menu.querySelector('[role="option"]');
+  if (current) current.focus();
+}
+
+function ckSelectChoose(sel, option) {
+  var input = sel.querySelector("[data-ck-select-value]");
+  var label = sel.querySelector("[data-ck-select-label]");
+  var text = option.querySelector("[data-ck-select-text]");
+  sel.querySelectorAll('[role="option"]').forEach(function(o) {
+    o.setAttribute("aria-selected", o === option ? "true" : "false");
+  });
+  input.value = option.getAttribute("data-value");
+  if (text) label.textContent = text.textContent;
+  input.dispatchEvent(new Event("change", { bubbles: true }));
+  ckSelectClose(sel);
+  var trigger = sel.querySelector("[data-ck-select-trigger]");
+  if (trigger) trigger.focus();
+}
+
+document.addEventListener("click", function(e) {
+  var trigger = e.target.closest("[data-ck-select-trigger]");
+  if (trigger) {
+    var sel = trigger.closest("[data-ck-select]");
+    if (sel.classList.contains("is-open")) { ckSelectClose(sel); } else { ckSelectOpen(sel); }
+    return;
+  }
+  var option = e.target.closest('[data-ck-select] [role="option"]');
+  if (option) {
+    ckSelectChoose(option.closest("[data-ck-select]"), option);
+    return;
+  }
+  document.querySelectorAll("[data-ck-select].is-open").forEach(function(sel) {
+    if (!sel.contains(e.target)) ckSelectClose(sel);
+  });
+});
+
+document.addEventListener("keydown", function(e) {
+  var sel = e.target.closest("[data-ck-select]");
+  if (!sel) return;
+  var trigger = sel.querySelector("[data-ck-select-trigger]");
+  var options = Array.prototype.slice.call(sel.querySelectorAll('[role="option"]'));
+  var open = sel.classList.contains("is-open");
+  if (e.target === trigger && !open) {
+    if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") { e.preventDefault(); ckSelectOpen(sel); }
+    return;
+  }
+  if (!open) return;
+  var idx = options.indexOf(document.activeElement);
+  if (e.key === "ArrowDown") { e.preventDefault(); (options[idx + 1] || options[0]).focus(); }
+  else if (e.key === "ArrowUp") { e.preventDefault(); (options[idx - 1] || options[options.length - 1]).focus(); }
+  else if (e.key === "Home") { e.preventDefault(); options[0].focus(); }
+  else if (e.key === "End") { e.preventDefault(); options[options.length - 1].focus(); }
+  else if (e.key === "Enter" || e.key === " ") { e.preventDefault(); if (options[idx]) ckSelectChoose(sel, options[idx]); }
+  else if (e.key === "Escape") { e.preventDefault(); ckSelectClose(sel); trigger.focus(); }
+});

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

@@ -1981,6 +1981,117 @@ label.ck-checkbox input {
   color: var(--ck-text);
 }
 
+.ck-select {
+  position: relative;
+}
+
+.ck-select__trigger {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.65rem 0.85rem;
+  border: 1px solid var(--ck-line-strong);
+  border-radius: var(--ck-radius);
+  background: var(--ck-bg);
+  color: var(--ck-text);
+  font-family: var(--ck-mono);
+  font-size: 0.9rem;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.ck-select__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ck-select__trigger:focus-visible,
+.ck-select.is-open .ck-select__trigger {
+  outline: none;
+  border-color: var(--ck-accent);
+  box-shadow: 0 0 0 3px var(--ck-accent-soft);
+}
+
+.ck-select__chevron {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--ck-muted);
+  transition: transform 0.15s;
+}
+
+.ck-select__chevron svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.ck-select.is-open .ck-select__chevron {
+  transform: rotate(180deg);
+}
+
+.ck-select__menu {
+  position: absolute;
+  z-index: 30;
+  left: 0;
+  right: 0;
+  top: calc(100% + 0.35rem);
+  margin: 0;
+  padding: 0.3rem;
+  list-style: none;
+  background: var(--ck-surface);
+  border: 1px solid var(--ck-line-strong);
+  border-radius: var(--ck-radius-lg);
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
+  max-height: 18rem;
+  overflow-y: auto;
+  font-family: var(--ck-mono);
+}
+
+.ck-select__option {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.6rem;
+  border-radius: var(--ck-radius);
+  color: var(--ck-text);
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+.ck-select__option:hover,
+.ck-select__option:focus-visible {
+  outline: none;
+  background: var(--ck-surface-hover);
+}
+
+.ck-select__option[aria-selected="true"] {
+  color: var(--ck-accent);
+}
+
+.ck-select__tick {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 1rem;
+  color: var(--ck-accent);
+  opacity: 0;
+}
+
+.ck-select__tick svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.ck-select__option[aria-selected="true"] .ck-select__tick {
+  opacity: 1;
+}
+
+.ck-select__text {
+  flex: 1;
+}
+
 .ck-section-title {
   font-size: 1.05rem;
   font-weight: 600;

data/app/helpers/completion_kit/application_helper.rb

@@ -169,6 +169,48 @@ module CompletionKit
       end
     end
 
+    CHECK_KIND_LABELS = {
+      "contains" => "Contains a phrase",
+      "not_contains" => "Does not contain a phrase",
+      "equals" => "Equals exactly",
+      "regex" => "Matches a pattern",
+      "valid_json" => "Is valid JSON",
+      "json_path_equals" => "A JSON field equals a value",
+      "length_bounds" => "Length is within a range",
+      "no_refusal" => "Is not a refusal"
+    }.freeze
+
+    CHECK_TARGET_LABELS = {
+      "response_text" => "The response text",
+      "input_data" => "The input row",
+      "json_path" => "A value from the response JSON"
+    }.freeze
+
+    CHECK_FIELD_LABELS = {
+      "value" => "Text to look for",
+      "pattern" => "Pattern",
+      "json_path" => "JSON path",
+      "expected" => "Expected value",
+      "target_path" => "Path into the JSON",
+      "min" => "Shortest allowed",
+      "max" => "Longest allowed",
+      "case_sensitive" => "Case sensitive",
+      "multiline" => "Multiline",
+      "trim" => "Trim whitespace"
+    }.freeze
+
+    def ck_check_kind_label(kind)
+      CHECK_KIND_LABELS.fetch(kind.to_s) { kind.to_s.humanize }
+    end
+
+    def ck_check_target_label(target)
+      CHECK_TARGET_LABELS.fetch(target.to_s) { target.to_s.humanize }
+    end
+
+    def ck_check_field_label(key)
+      CHECK_FIELD_LABELS.fetch(key.to_s) { key.to_s.humanize }
+    end
+
     def ck_result_change_badge(change)
       case change
       when "broke"

data/app/views/completion_kit/metrics/_check_spec.html.erb

@@ -1,16 +1,16 @@
 <% config = local_assigns.fetch(:config) %>
 <dl class="ck-check-spec">
   <div class="ck-check-spec__row">
-    <dt class="ck-check-spec__term">Kind</dt>
-    <dd class="ck-check-spec__val"><code class="ck-check-spec__code"><%= config["check_kind"] %></code></dd>
+    <dt class="ck-check-spec__term">Rule</dt>
+    <dd class="ck-check-spec__val"><%= ck_check_kind_label(config["check_kind"]) %></dd>
   </div>
   <div class="ck-check-spec__row">
-    <dt class="ck-check-spec__term">Target</dt>
-    <dd class="ck-check-spec__val"><code class="ck-check-spec__code"><%= config["target"] %></code></dd>
+    <dt class="ck-check-spec__term">Checks</dt>
+    <dd class="ck-check-spec__val"><%= ck_check_target_label(config["target"]) %></dd>
   </div>
   <% config.except("check_kind", "target").each do |key, value| %>
     <div class="ck-check-spec__row">
-      <dt class="ck-check-spec__term"><%= key.humanize %></dt>
+      <dt class="ck-check-spec__term"><%= ck_check_field_label(key) %></dt>
       <dd class="ck-check-spec__val"><code class="ck-check-spec__code"><%= value %></code></dd>
     </div>
   <% end %>

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

@@ -159,63 +159,62 @@
     <% check = metric.check_config || {} %>
     <div class="ck-field ck-field--spacious" data-ck-metric-editor="check" <%= "hidden" unless metric.check? %>>
       <p class="ck-section-title">Check</p>
-      <p class="ck-hint">A deterministic pass/fail rule. Fill only the fields the chosen kind needs.</p>
+      <p class="ck-hint">A pass or fail rule with no AI and no cost. You only fill in the fields the chosen rule needs.</p>
 
       <div class="ck-field">
-        <label class="ck-label" for="metric_check_kind">Check kind</label>
-        <select name="metric[check_config][check_kind]" id="metric_check_kind" class="ck-input">
-          <% CompletionKit::Checks::Registry.kinds.each do |kind| %>
-            <option value="<%= kind %>"<%= " selected" if check["check_kind"] == kind %>><%= kind %></option>
-          <% end %>
-        </select>
+        <p class="ck-label" id="metric_check_kind_label">Rule</p>
+        <%= render "completion_kit/shared/branded_select",
+                   name: "metric[check_config][check_kind]",
+                   options: CompletionKit::Checks::Registry.kinds.map { |kind| [kind, ck_check_kind_label(kind)] },
+                   selected: check["check_kind"] || CompletionKit::Checks::Registry.kinds.first,
+                   labelledby: "metric_check_kind_label" %>
       </div>
 
       <div class="ck-field">
-        <label class="ck-label" for="metric_check_target">Target</label>
-        <select name="metric[check_config][target]" id="metric_check_target" class="ck-input">
-          <% CompletionKit::Checks::TargetResolver::TARGETS.each do |target| %>
-            <option value="<%= target %>"<%= " selected" if check["target"] == target %>><%= target %></option>
-          <% end %>
-        </select>
+        <p class="ck-label" id="metric_check_target_label">What to check</p>
+        <%= render "completion_kit/shared/branded_select",
+                   name: "metric[check_config][target]",
+                   options: CompletionKit::Checks::TargetResolver::TARGETS.map { |target| [target, ck_check_target_label(target)] },
+                   selected: check["target"] || CompletionKit::Checks::TargetResolver::TARGETS.first,
+                   labelledby: "metric_check_target_label" %>
       </div>
 
       <div class="ck-field" data-ck-check-field="target_path">
-        <label class="ck-label" for="metric_check_target_path">Target path</label>
-        <p class="ck-hint">Used when target is json_path, e.g. data.items.0.name.</p>
+        <label class="ck-label" for="metric_check_target_path">Path into the JSON</label>
+        <p class="ck-hint">Where to look inside the response, like data.items.0.name.</p>
         <input type="text" name="metric[check_config][target_path]" id="metric_check_target_path" class="ck-input" value="<%= check["target_path"] %>">
       </div>
 
       <div class="ck-field" data-ck-check-field="value">
-        <label class="ck-label" for="metric_check_value">Value</label>
-        <p class="ck-hint">The substring or exact string for contains, not_contains, or equals.</p>
+        <label class="ck-label" for="metric_check_value">Text to look for</label>
         <input type="text" name="metric[check_config][value]" id="metric_check_value" class="ck-input" value="<%= check["value"] %>">
       </div>
 
       <div class="ck-field" data-ck-check-field="pattern">
         <label class="ck-label" for="metric_check_pattern">Pattern</label>
-        <p class="ck-hint">A regular expression for the regex kind.</p>
+        <p class="ck-hint">A regular expression to match against.</p>
         <input type="text" name="metric[check_config][pattern]" id="metric_check_pattern" class="ck-input" value="<%= check["pattern"] %>">
       </div>
 
       <div class="ck-field" data-ck-check-field="json_path">
         <label class="ck-label" for="metric_check_json_path">JSON path</label>
-        <p class="ck-hint">Dotted path into parsed JSON for json_path_equals.</p>
+        <p class="ck-hint">The path to the value inside the response, like data.status.</p>
         <input type="text" name="metric[check_config][json_path]" id="metric_check_json_path" class="ck-input" value="<%= check["json_path"] %>">
       </div>
 
       <div class="ck-field" data-ck-check-field="expected">
-        <label class="ck-label" for="metric_check_expected">Expected</label>
-        <p class="ck-hint">The value the JSON path must equal.</p>
+        <label class="ck-label" for="metric_check_expected">Expected value</label>
+        <p class="ck-hint">The value it should equal.</p>
         <input type="text" name="metric[check_config][expected]" id="metric_check_expected" class="ck-input" value="<%= check["expected"] %>">
       </div>
 
       <div class="ck-field-row">
         <div class="ck-field" data-ck-check-field="min">
-          <label class="ck-label" for="metric_check_min">Min length</label>
+          <label class="ck-label" for="metric_check_min">Shortest allowed</label>
           <input type="number" name="metric[check_config][min]" id="metric_check_min" class="ck-input" value="<%= check["min"] %>">
         </div>
         <div class="ck-field" data-ck-check-field="max">
-          <label class="ck-label" for="metric_check_max">Max length</label>
+          <label class="ck-label" for="metric_check_max">Longest allowed</label>
           <input type="number" name="metric[check_config][max]" id="metric_check_max" class="ck-input" value="<%= check["max"] %>">
         </div>
       </div>

data/app/views/completion_kit/shared/_branded_select.html.erb

@@ -0,0 +1,18 @@
+<% chosen = options.find { |value, _label| value.to_s == selected.to_s } || options.first %>
+<div class="ck-select" data-ck-select>
+  <input type="hidden" name="<%= name %>" value="<%= chosen && chosen.first %>" data-ck-select-value>
+  <button type="button" class="ck-select__trigger" data-ck-select-trigger
+          aria-haspopup="listbox" aria-expanded="false" aria-labelledby="<%= labelledby %>">
+    <span class="ck-select__label" data-ck-select-label><%= chosen && chosen.last %></span>
+    <span class="ck-select__chevron" aria-hidden="true"><%= heroicon_tag "chevron-down" %></span>
+  </button>
+  <ul class="ck-select__menu" role="listbox" hidden data-ck-select-menu aria-labelledby="<%= labelledby %>">
+    <% options.each do |value, label| %>
+      <li class="ck-select__option" role="option" tabindex="-1" data-value="<%= value %>"
+          aria-selected="<%= chosen && chosen.first.to_s == value.to_s ? "true" : "false" %>">
+        <span class="ck-select__tick" aria-hidden="true"><%= heroicon_tag "check" %></span>
+        <span class="ck-select__text" data-ck-select-text><%= label %></span>
+      </li>
+    <% end %>
+  </ul>
+</div>

data/lib/completion_kit/version.rb

@@ -1,3 +1,3 @@
 module CompletionKit
-  VERSION = "0.20.4"
+  VERSION = "0.21.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: completion-kit
 version: !ruby/object:Gem::Version
-  version: 0.20.4
+  version: 0.21.0
 platform: ruby
 authors:
 - Damien Bastin
@@ -419,6 +419,7 @@ files:
 - app/views/completion_kit/runs/index.html.erb
 - app/views/completion_kit/runs/new.html.erb
 - app/views/completion_kit/runs/show.html.erb
+- app/views/completion_kit/shared/_branded_select.html.erb
 - app/views/completion_kit/shared/_settings_nav.html.erb
 - app/views/completion_kit/suggestions/_scoreboard.html.erb
 - app/views/completion_kit/suggestions/_state.html.erb