completion-kit 0.4.8 → 0.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7c2de74d874b4b8ea5952f574bd922360399b2287d0cf87a3ef05bf11e4c50cd
-  data.tar.gz: 3a949c1db4c91dd7d2b3ef353ac50a4c3a0d16210695adbd9b4e98a7c43157c1
+  metadata.gz: 89766aed83665a19253ddf7f4fcbc99ad3e9bc8c17123d7f7d33acac36bf3096
+  data.tar.gz: fe71adba78f455a2ce36ef3649bb3e0c94ca77f7534fbe6377604bf6f66d36ab
 SHA512:
-  metadata.gz: 4212a7bef6dbf0302631e4a70cbe9823656687ecee26003aaa940c10aff39c81c94402b2dbb9820259b11bde7ce6bcb22662b4749a9a8631884635fd88df18f9
-  data.tar.gz: 7cba484ac695ebeaa5956de196208bfa6c68d51d47e46726d2804a12db5df16f82acd9632bab3aac5538bce4a5bc977e65b5137d4dea214c0584541d03d50c8f
+  metadata.gz: 7dc10c0b796286e5c4535c761da1af4d49d4b1011477167849c8a398644cec30d310534971df8515ff5cda957596589d1277e6942c569b5c943a575a9c2a4e6c
+  data.tar.gz: a5a17559fc2032473aa6dd2946948cefd5b195f73dbd48e68c8ead4e322a469a1faca74e170168dad69dd947a88f2687675c007b41a92a91afbacaae752bc50d

data/README.md

@@ -64,6 +64,17 @@ bin/rails db:migrate
 
 The engine mounts at `/completion_kit` in your app. CompletionKit's generate and judge flows enqueue Active Job jobs (`CompletionKit::GenerateRowJob`, `CompletionKit::JudgeReviewJob`, `CompletionKit::RunCompletionCheckJob`), so your host app needs an Active Job adapter that actually processes them — Solid Queue, Sidekiq, GoodJob, etc. The `:async` adapter is **not** suitable for production: it runs jobs in the web Puma's thread pool with no durability and no retry, and a long LLM call will block request handling.
 
+### Host-app layout integration
+
+If your host app overrides the engine layout (e.g. `layout "application"` on engine controllers, or rendering engine views inside your own shell), include both the engine's stylesheet and JavaScript in that layout:
+
+```erb
+<%= stylesheet_link_tag "completion_kit/application", media: "all" %>
+<%= javascript_include_tag "completion_kit/application", defer: true %>
+```
+
+Without the JavaScript include, in-page behaviours silently fail: live tag-breadcrumb updates, relative-time ticking, CSV row hover-expand, model-refresh progress, focus-first-error, and local-time formatting.
+
 ## Providers
 
 CompletionKit discovers available models from each provider's API automatically.
@@ -136,6 +147,7 @@ Only one mode can be active.
 - **Response.** The model's output for one dataset row, with reviews attached.
 - **Metric.** An evaluation dimension with a name, instruction, evaluation steps, and a 1-5 star scoring scale. The LLM judge uses this to score each response.
 - **Metric Group.** A reusable group of metrics you can apply to a run as a set.
+- **Tag.** A domain label you can attach to prompts, runs, metrics, and datasets. Auto-assigned from a 10-color palette. Filter any index page by tag (`?tag[]=...`).
 - **Provider Credential.** An API key for a model provider. Encrypted at rest, never returned through the API.
 
 ## REST API

data/app/assets/config/completion_kit_manifest.js

@@ -1 +1,2 @@
 //= link_directory ../stylesheets/completion_kit .css
+//= link_directory ../javascripts/completion_kit .js

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

@@ -0,0 +1,157 @@
+document.addEventListener("turbo:load", function() {
+  document.querySelectorAll("[data-local-time]").forEach(function(el) {
+    var d = new Date(el.getAttribute("datetime"));
+    el.textContent = d.toLocaleString(undefined, {year:"numeric",month:"short",day:"numeric",hour:"2-digit",minute:"2-digit"});
+  });
+  ckTickRelativeTimes();
+  ckAutoFocusFirstError();
+});
+
+document.addEventListener("input", function(e) {
+  if (!e.target || e.target.id !== "tag_name") return;
+  var text = document.getElementById("tag-pill-text");
+  if (!text) return;
+  var v = e.target.value.trim().toLowerCase();
+  text.textContent = v.length ? v : (text.dataset.placeholder || "");
+});
+
+function ckAutoFocusFirstError() {
+  var fieldSelector = "input:not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]):not([type=file]), textarea, select";
+  var marker = document.querySelector("form .ck-flash--alert, form [aria-invalid='true'], form .ck-field-error");
+
+  var target;
+  if (marker) {
+    var form = marker.closest("form");
+    target = form && (form.querySelector("[aria-invalid='true']") || form.querySelector(fieldSelector));
+  } else if (/\/new(\/|$)/.test(window.location.pathname)) {
+    target = document.querySelector("form " + fieldSelector);
+  }
+
+  if (!target || typeof target.focus !== "function") return;
+  target.focus({ preventScroll: false });
+  if (typeof target.setSelectionRange === "function" && typeof target.value === "string") {
+    try { target.setSelectionRange(target.value.length, target.value.length); } catch (e) {}
+  }
+}
+
+function ckRelativeTime(then) {
+  var seconds = Math.round((Date.now() - then.getTime()) / 1000);
+  if (seconds < 5) return "just now";
+  if (seconds < 60) return "less than a minute";
+  var minutes = Math.round(seconds / 60);
+  if (minutes < 60) return minutes === 1 ? "1 minute" : minutes + " minutes";
+  var hours = Math.round(minutes / 60);
+  if (hours < 24) return hours === 1 ? "about 1 hour" : "about " + hours + " hours";
+  var days = Math.round(hours / 24);
+  if (days < 30) return days === 1 ? "1 day" : days + " days";
+  var months = Math.round(days / 30);
+  if (months < 12) return months === 1 ? "about 1 month" : "about " + months + " months";
+  var years = Math.round(days / 365);
+  return years === 1 ? "about 1 year" : "about " + years + " years";
+}
+
+function ckRelativeTimeCompact(then) {
+  var seconds = Math.round((Date.now() - then.getTime()) / 1000);
+  if (seconds < 60) return "now";
+  var minutes = Math.round(seconds / 60);
+  if (minutes < 60) return minutes + "m";
+  var hours = Math.round(minutes / 60);
+  if (hours < 24) return hours + "h";
+  var days = Math.round(hours / 24);
+  if (days < 30) return days + "d";
+  var months = Math.round(days / 30);
+  if (months < 12) return months + "mo";
+  var years = Math.round(days / 365);
+  return years + "y";
+}
+
+function ckTickRelativeTimes() {
+  document.querySelectorAll("[data-relative-time]").forEach(function(el) {
+    var then = new Date(el.getAttribute("datetime"));
+    if (isNaN(then.getTime())) return;
+    var verbose = el.getAttribute("data-relative-time") === "verbose";
+    el.textContent = verbose ? ckRelativeTime(then) : ckRelativeTimeCompact(then);
+    el.setAttribute("title", then.toLocaleString());
+  });
+}
+
+if (!window.ckRelativeTimeInterval) {
+  window.ckRelativeTimeInterval = setInterval(ckTickRelativeTimes, 30000);
+}
+document.addEventListener("turbo:before-stream-render", function() {
+  requestAnimationFrame(ckTickRelativeTimes);
+});
+
+var ckCsvHoverTimer = null;
+var ckCsvHoverRow = null;
+document.addEventListener("mouseover", function(e) {
+  var row = e.target.closest && e.target.closest(".ck-csv-table tbody tr");
+  if (!row || row === ckCsvHoverRow) return;
+  if (ckCsvHoverRow) ckCsvHoverRow.classList.remove("ck-csv-row--expanded");
+  ckCsvHoverRow = row;
+  clearTimeout(ckCsvHoverTimer);
+  ckCsvHoverTimer = setTimeout(function() {
+    if (ckCsvHoverRow === row) row.classList.add("ck-csv-row--expanded");
+  }, 350);
+});
+document.addEventListener("mouseout", function(e) {
+  var row = e.target.closest && e.target.closest(".ck-csv-table tbody tr");
+  if (!row) return;
+  var related = e.relatedTarget && e.relatedTarget.closest && e.relatedTarget.closest(".ck-csv-table tbody tr");
+  if (related === row) return;
+  clearTimeout(ckCsvHoverTimer);
+  row.classList.remove("ck-csv-row--expanded");
+  if (ckCsvHoverRow === row) ckCsvHoverRow = null;
+});
+
+var ckRefreshing = false;
+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');
+  ckUpdateRefreshProgress();
+  var csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
+  fetch("/completion_kit/refresh_models", {
+    method: "POST",
+    headers: { "X-CSRF-Token": csrfToken }
+  });
+}
+
+function ckUpdateRefreshProgress() {
+  var status = document.getElementById('refresh-status');
+  if (!status) return;
+  var carriers = document.querySelectorAll('[data-refresh-progress-carriers] [id^="discovery_status_"]');
+  var totalCurrent = 0, totalTotal = 0, anyDiscovering = false;
+  carriers.forEach(function(node) {
+    if (!node.querySelector('.ck-discovery-bar')) return;
+    if (node.querySelector('.ck-discovery-bar--failed') || node.querySelector('.ck-discovery-bar--completed')) return;
+    anyDiscovering = true;
+    var match = node.textContent.match(/(\d+)\s*\/\s*(\d+)/);
+    if (match) {
+      totalCurrent += parseInt(match[1], 10);
+      totalTotal += parseInt(match[2], 10);
+    }
+  });
+  if (anyDiscovering || ckRefreshing) {
+    if (totalTotal > 0) {
+      status.textContent = 'Refreshing models… ' + totalCurrent + '/' + totalTotal;
+    } else {
+      status.textContent = 'Refreshing models…';
+    }
+  }
+}
+
+document.addEventListener("turbo:before-stream-render", function(event) {
+  var target = event.target.getAttribute("target");
+  if (target && target.indexOf("discovery_status_") === 0) {
+    requestAnimationFrame(ckUpdateRefreshProgress);
+  }
+  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');
+    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

@@ -501,6 +501,11 @@ tr:hover .ck-chip--publish {
   transform: translateY(-1px);
 }
 
+.ck-button:focus-visible {
+  outline: 2px solid var(--ck-accent);
+  outline-offset: 2px;
+}
+
 .ck-button--primary {
   background: var(--ck-accent);
   color: #080b14;
@@ -1531,6 +1536,11 @@ tr:hover .ck-chip--publish {
   color: var(--ck-danger);
 }
 
+.ck-icon-btn:focus-visible {
+  outline: 2px solid var(--ck-accent);
+  outline-offset: 2px;
+}
+
 .ck-icon-btn--spinning svg {
   animation: ck-spin 0.8s linear infinite;
 }
@@ -2594,6 +2604,7 @@ select.ck-input {
   align-items: center;
   gap: 0.4rem;
   padding: 0.32rem 0.7rem;
+  white-space: nowrap;
   background: transparent;
   border: 1px solid var(--ck-line);
   border-radius: 999px;
@@ -2842,6 +2853,72 @@ select.ck-input {
   color: var(--ck-dim);
 }
 
+.ck-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.ck-tags-table th:first-child,
+.ck-tags-table td:first-child {
+  width: 35%;
+}
+.ck-tags-table th:nth-child(2),
+.ck-tags-table td:nth-child(2) {
+  width: 60%;
+}
+.tag-mark.tag-mark--lg {
+  padding: 4px 10px;
+  font-size: 0.8rem;
+  letter-spacing: 0.02em;
+  border-radius: 5px;
+}
+.ck-tags-table__unused {
+  color: var(--ck-dim);
+  font-style: italic;
+}
+
+.ck-mg-members {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+}
+.ck-mg-member {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  background: var(--ck-surface-soft);
+  border: 1px solid var(--ck-line);
+  border-radius: 4px;
+  font-family: var(--ck-mono);
+  font-size: 11px;
+  letter-spacing: 0.02em;
+  color: var(--ck-muted);
+  white-space: nowrap;
+}
+
+.ck-metric-tag-filter {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin: 0.5rem 0 0.85rem;
+}
+.ck-metric-tag-filter__label {
+  font-family: var(--ck-mono);
+  font-size: 11px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--ck-dim);
+  margin-right: 0.3rem;
+}
+.ck-metric-tag-filter__chip {
+  border-radius: 5px;
+  font: inherit;
+  cursor: pointer;
+}
+
 .ck-metrics-table__groups {
   display: flex;
   flex-wrap: wrap;
@@ -2909,6 +2986,10 @@ a.ck-metric-group-pill {
   white-space: nowrap;
 }
 
+.ck-runs-table__identity .tag-marks-row {
+  padding-left: 1.2rem;
+}
+
 .ck-runs-table__config-link {
   color: var(--ck-muted);
   text-decoration: none;
@@ -3396,3 +3477,304 @@ a.ck-metric-group-pill {
   text-overflow: ellipsis;
 }
 
+:root {
+  --tag-crimson: #F24E1E;
+  --tag-burnt-orange: #FF8A00;
+  --tag-amber: #FFC700;
+  --tag-mint: #14AE5C;
+  --tag-deep-emerald: #00623F;
+  --tag-electric-cyan: #00D1FF;
+  --tag-cobalt-blue: #0D99FF;
+  --tag-deep-indigo: #5551FF;
+  --tag-amethyst: #9747FF;
+  --tag-rose: #FF5CBE;
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 9px;
+  min-height: calc(1.4em + 8px);
+  border-radius: 5px;
+  font-family: var(--ck-mono);
+  font-size: 12.5px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  text-transform: lowercase;
+  color: white;
+  line-height: 1.4;
+  white-space: nowrap;
+  transition: filter 120ms ease;
+  text-decoration: none;
+  user-select: none;
+}
+
+.tag::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.85);
+  flex-shrink: 0;
+}
+
+.tag > span:empty { display: none; }
+
+a.tag, label.tag { cursor: pointer; }
+a.tag:hover, label.tag:hover { filter: brightness(1.12); }
+
+
+.tag-crimson       { background-color: var(--tag-crimson);       --current-tag-color: var(--tag-crimson); }
+.tag-burnt-orange  { background-color: var(--tag-burnt-orange);  --current-tag-color: var(--tag-burnt-orange);  color: #2a1300; }
+.tag-burnt-orange::before { background: rgba(0, 0, 0, 0.55); }
+.tag-amber         { background-color: var(--tag-amber);         --current-tag-color: var(--tag-amber);         color: #1a0f00; }
+.tag-amber::before { background: rgba(0, 0, 0, 0.55); }
+.tag-mint          { background-color: var(--tag-mint);          --current-tag-color: var(--tag-mint); }
+.tag-deep-emerald  { background-color: var(--tag-deep-emerald);  --current-tag-color: var(--tag-deep-emerald); }
+.tag-electric-cyan { background-color: var(--tag-electric-cyan); --current-tag-color: var(--tag-electric-cyan); color: #001620; }
+.tag-electric-cyan::before { background: rgba(0, 0, 0, 0.55); }
+.tag-cobalt-blue   { background-color: var(--tag-cobalt-blue);   --current-tag-color: var(--tag-cobalt-blue); }
+.tag-deep-indigo   { background-color: var(--tag-deep-indigo);   --current-tag-color: var(--tag-deep-indigo); }
+.tag-amethyst      { background-color: var(--tag-amethyst);      --current-tag-color: var(--tag-amethyst); }
+.tag-rose          { background-color: var(--tag-rose);          --current-tag-color: var(--tag-rose);          color: #2a0017; }
+.tag-rose::before  { background: rgba(0, 0, 0, 0.6); }
+
+.tag-outline {
+  background-color: transparent !important;
+  border: 1px solid currentColor;
+  box-shadow: none;
+}
+.tag-outline::before { background: currentColor; }
+.tag-outline.tag-crimson       { color: var(--tag-crimson); }
+.tag-outline.tag-burnt-orange  { color: var(--tag-burnt-orange); }
+.tag-outline.tag-amber         { color: var(--tag-amber); }
+.tag-outline.tag-mint          { color: var(--tag-mint); }
+.tag-outline.tag-deep-emerald  { color: var(--tag-deep-emerald); }
+.tag-outline.tag-electric-cyan { color: var(--tag-electric-cyan); }
+.tag-outline.tag-cobalt-blue   { color: var(--tag-cobalt-blue); }
+.tag-outline.tag-deep-indigo   { color: var(--tag-deep-indigo); }
+.tag-outline.tag-amethyst      { color: var(--tag-amethyst); }
+.tag-outline.tag-rose          { color: var(--tag-rose); }
+
+/* Inline mark — quiet "color dot + name" used on row metadata */
+.tag-mark {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 8px;
+  min-height: 22px;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  font-family: var(--ck-mono);
+  font-size: 11px;
+  letter-spacing: 0.02em;
+  text-transform: lowercase;
+  white-space: nowrap;
+  background: color-mix(in srgb, var(--mark-color) 24%, transparent);
+  color: color-mix(in srgb, var(--mark-color) 88%, var(--ck-text));
+}
+
+.tag-mark::before {
+  content: "";
+  display: inline-block;
+  width: 0.95em;
+  height: 0.95em;
+  flex-shrink: 0;
+  background-color: currentColor;
+  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill-rule='evenodd' clip-rule='evenodd' d='M3 4.5C3 3.67 3.67 3 4.5 3h5.379c.398 0 .779.158 1.06.44L18.06 10.56c.585.586.585 1.535 0 2.121l-5.379 5.379a1.5 1.5 0 0 1-2.121 0L3.44 10.94A1.5 1.5 0 0 1 3 9.879V4.5Zm3.5 1.75a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Z' fill='black'/></svg>") no-repeat center / contain;
+  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill-rule='evenodd' clip-rule='evenodd' d='M3 4.5C3 3.67 3.67 3 4.5 3h5.379c.398 0 .779.158 1.06.44L18.06 10.56c.585.586.585 1.535 0 2.121l-5.379 5.379a1.5 1.5 0 0 1-2.121 0L3.44 10.94A1.5 1.5 0 0 1 3 9.879V4.5Zm3.5 1.75a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Z' fill='black'/></svg>") no-repeat center / contain;
+}
+.tag-mark + .tag-mark { margin-left: 0.4rem; }
+.tag-marks-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-top: 0.35rem;
+}
+
+/* Picker — flat row of chips + inline input, no enclosing field */
+.ck-tag-picker {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 7px;
+}
+.ck-tag-picker__input {
+  flex: 1;
+  min-width: 160px;
+  background: transparent;
+  border: 0;
+  padding: 2px 0;
+  color: var(--ck-text);
+  font-family: var(--ck-mono);
+  font-size: 12.5px;
+  letter-spacing: 0.01em;
+  outline: none;
+}
+.ck-tag-picker__input::placeholder { color: var(--ck-dim); }
+
+/* Picker chips: unchecked = neutral pill with a small tag-colored dot.
+   Avoids looking "applied" simply because the tag color is on screen. */
+.ck-tag-picker label.tag-mark,
+.ck-tag-filter .tag-mark,
+.ck-metric-tag-filter .tag-mark {
+  cursor: pointer;
+  user-select: none;
+  padding: 4px 10px;
+  font-size: 0.8rem;
+  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
+}
+
+/* Selected state — picker, filter bars, metric-tag-filter share one look */
+.ck-tag-picker label.tag-mark:has(input:checked),
+.ck-tag-filter .tag-mark:not(.tag-mark--off),
+.ck-metric-tag-filter .tag-mark:not(.tag-mark--off) {
+  background: color-mix(in srgb, var(--mark-color) 38%, transparent);
+  color: color-mix(in srgb, var(--mark-color) 95%, var(--ck-text));
+  border-color: color-mix(in srgb, var(--mark-color) 50%, transparent);
+}
+
+/* Unselected state — same shape, neutral outline + muted text */
+.ck-tag-picker label.tag-mark:has(input:not(:checked)),
+.ck-tag-filter .tag-mark.tag-mark--off,
+.ck-metric-tag-filter .tag-mark.tag-mark--off {
+  background: transparent;
+  border-color: var(--ck-line);
+  color: var(--ck-muted);
+}
+.ck-tag-picker label.tag-mark:has(input:not(:checked)):hover,
+.ck-tag-filter .tag-mark.tag-mark--off:hover,
+.ck-metric-tag-filter .tag-mark.tag-mark--off:hover {
+  border-color: var(--ck-line-strong);
+  color: color-mix(in srgb, var(--mark-color) 80%, var(--ck-text));
+}
+button.tag-mark {
+  font: inherit;
+  cursor: pointer;
+}
+a.tag-mark {
+  text-decoration: none;
+}
+
+/* Top-nav settings menu (ported from completion-kit-cloud) */
+.ck-settings-menu {
+  position: relative;
+}
+.ck-settings-menu__trigger {
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+}
+.ck-settings-menu__trigger::-webkit-details-marker {
+  display: none;
+}
+.ck-settings-menu__panel {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 0.5rem);
+  padding: 0.5rem;
+  background: var(--ck-surface);
+  border: 1px solid var(--ck-line);
+  border-radius: var(--ck-radius);
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  white-space: nowrap;
+}
+.ck-settings-menu__item {
+  display: block;
+  padding: 0.5rem 0.65rem;
+  border-radius: calc(var(--ck-radius) - 2px);
+  font-family: var(--ck-mono);
+  font-size: 0.78rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  text-decoration: none;
+  color: var(--ck-text);
+  transition: background 0.15s, color 0.15s;
+}
+.ck-settings-menu__item:hover {
+  background: var(--ck-surface-hover);
+}
+
+/* Settings page kicker — small label above the page title on settings pages */
+.ck-settings-kicker {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  flex-wrap: wrap;
+  font-family: var(--ck-mono);
+  font-size: 11px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--ck-dim);
+  margin: 0 0 0.85rem;
+}
+.ck-settings-kicker__sep {
+  opacity: 0.55;
+}
+.ck-settings-kicker__link {
+  color: var(--ck-muted);
+  text-decoration: none;
+  transition: color 120ms ease;
+}
+.ck-settings-kicker__link:hover { color: var(--ck-text); }
+
+.tag-marks-row--header {
+  margin-top: -0.5rem;
+  margin-bottom: 1.25rem;
+}
+
+
+.ck-input--error {
+  border-color: var(--ck-danger);
+  background: rgba(248, 113, 113, 0.05);
+}
+.ck-input--error:focus {
+  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
+  border-color: var(--ck-danger);
+}
+
+.ck-field-error {
+  margin: 0.35rem 0 0;
+  color: var(--ck-danger);
+  font-family: var(--ck-sans);
+  font-size: 0.95rem;
+}
+
+/* Filter bar — its own visual moment */
+.ck-tag-filter {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin: 1.1rem 0 1.6rem;
+  padding: 0.65rem 0.85rem;
+  background: var(--ck-surface-soft);
+  border: 1px solid var(--ck-line);
+  border-radius: 6px;
+}
+.ck-tag-filter__label {
+  font-family: var(--ck-mono);
+  font-size: 12px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--ck-dim);
+  margin-right: 0.4rem;
+}
+.ck-tag-filter__clear {
+  margin-left: auto;
+  font-family: var(--ck-mono);
+  font-size: 11.5px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ck-muted);
+  text-decoration: none;
+  transition: color 120ms ease;
+}
+.ck-tag-filter__clear:hover { color: var(--ck-accent); }
+
+

data/app/controllers/completion_kit/api/v1/datasets_controller.rb

@@ -5,7 +5,7 @@ module CompletionKit
         before_action :set_dataset, only: [:show, :update, :destroy]
 
         def index
-          render json: Dataset.order(created_at: :desc)
+          render json: Dataset.includes(:tags).order(created_at: :desc)
         end
 
         def show
@@ -43,7 +43,7 @@ module CompletionKit
         end
 
         def dataset_params
-          params.permit(:name, :csv_data)
+          params.permit(:name, :csv_data, tag_names: [])
         end
       end
     end

data/app/controllers/completion_kit/api/v1/metric_groups_controller.rb

@@ -5,7 +5,7 @@ module CompletionKit
         before_action :set_metric_group, only: [:show, :update, :destroy]
 
         def index
-          render json: MetricGroup.order(created_at: :desc)
+          render json: MetricGroup.includes(:tags).order(created_at: :desc)
         end
 
         def show
@@ -45,7 +45,7 @@ module CompletionKit
         end
 
         def metric_group_params
-          params.permit(:name, :description, metric_ids: [])
+          params.permit(:name, :description, metric_ids: [], tag_names: [])
         end
       end
     end

data/app/controllers/completion_kit/api/v1/metrics_controller.rb

@@ -5,7 +5,7 @@ module CompletionKit
         before_action :set_metric, only: [:show, :update, :destroy]
 
         def index
-          render json: Metric.order(created_at: :desc)
+          render json: Metric.includes(:tags).order(created_at: :desc)
         end
 
         def show
@@ -43,7 +43,8 @@ module CompletionKit
         end
 
         def metric_params
-          params.permit(:name, :instruction, rubric_bands: [:stars, :description])
+          params.permit(:name, :instruction,
+            rubric_bands: [:stars, :description], tag_names: [])
         end
       end
     end