completion-kit 0.1.0.rc1

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

@@ -0,0 +1,87 @@
+<ol class="ck-breadcrumb">
+  <li><%= link_to "Prompts", prompts_path %></li>
+  <li><%= link_to @run.prompt.name, prompt_path(@run.prompt) %></li>
+  <li><%= link_to @run.name, run_path(@run) %></li>
+  <li>Response #<%= @response_number %></li>
+</ol>
+
+<section class="ck-page-header">
+  <div>
+    <div class="ck-inline">
+      <h1 class="ck-title">Response #<%= @response_number %></h1>
+      <% score = @response.score %>
+      <% if score %>
+        <span class="<%= ck_badge_classes(ck_score_kind(score)) %>"><%= score %></span>
+      <% end %>
+    </div>
+    <p class="ck-meta-copy">
+      <span class="ck-run-config__key">Prompt</span> <%= link_to @run.prompt.display_name, prompt_path(@run.prompt), class: "ck-link" %>
+      <% if @run.dataset %>
+        &ensp;&middot;&ensp;<span class="ck-run-config__key">Dataset</span> <%= link_to @run.dataset.name, dataset_path(@run.dataset), class: "ck-link" %>
+      <% end %>
+    </p>
+  </div>
+  <div class="ck-actions">
+    <% if @prev_response %>
+      <%= link_to "← Prev", run_response_path(@run, @prev_response, sort: @sort), class: ck_button_classes(:light, variant: :outline) %>
+    <% end %>
+    <% if @next_response %>
+      <%= link_to "Next →", run_response_path(@run, @next_response, sort: @sort), class: ck_button_classes(:light, variant: :outline) %>
+    <% end %>
+  </div>
+</section>
+
+<section>
+  <p class="ck-kicker">Input</p>
+  <pre class="ck-code ck-code--dark"><%= begin; JSON.pretty_generate(JSON.parse(@response.input_data)); rescue; @response.input_data; end %></pre>
+</section>
+
+<section class="ck-card--spaced">
+  <div class="ck-prompt-preview__header">
+    <p class="ck-kicker">Response</p>
+    <span class="ck-chip ck-chip--soft" style="text-transform: none;"><%= @run.prompt.llm_model %></span>
+  </div>
+  <pre class="ck-code"><%= @response.response_text %></pre>
+</section>
+
+<% if @response.expected_output.present? %>
+  <section class="ck-card--spaced">
+    <p class="ck-kicker">Expected</p>
+    <pre class="ck-code"><%= @response.expected_output %></pre>
+  </section>
+<% end %>
+
+<% if @reviews.any? %>
+  <section class="ck-card--spaced">
+    <div class="ck-prompt-preview__header">
+      <p class="ck-kicker">Review</p>
+      <% if @run.judge_model.present? %>
+        <span class="ck-chip ck-chip--soft" style="text-transform: none;"><%= @run.judge_model %></span>
+      <% end %>
+    </div>
+
+    <div class="ck-review-list">
+      <% @reviews.each do |review| %>
+        <div class="ck-review-card">
+          <div class="ck-review-card__header">
+            <span class="ck-review-card__metric"><% if review.metric %><%= link_to review.metric_name, metric_path(review.metric), class: "ck-link" %><% else %><%= review.metric_name %><% end %></span>
+            <div class="ck-inline">
+              <% if review.ai_score %>
+                <% 5.times do |i| %>
+                  <svg viewBox="0 0 24 24" width="16" height="16" stroke-width="1.75" class="ck-star <%= i < review.ai_score.to_i ? "ck-star--filled" : "ck-star--empty" %>"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+                <% end %>
+              <% else %>
+                <span class="<%= ck_badge_classes(:pending) %>">Pending</span>
+              <% end %>
+            </div>
+          </div>
+          <% if review.ai_feedback.present? %>
+            <div class="ck-review-card__feedback">
+              <div class="ck-note-box"><%= review.ai_feedback %></div>
+            </div>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  </section>
+<% end %>

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

@@ -0,0 +1,14 @@
+<div class="ck-actions" id="run_actions">
+  <% running = run.status == "generating" || run.status == "judging" %>
+  <%= button_to run_path(run), method: :delete, form_class: "inline-block", class: "ck-icon-btn", title: "Delete run", "aria-label": "Delete run", disabled: running, data: { turbo_confirm: "Delete this run and all its responses?" } do %><%= heroicon_tag "trash", variant: :outline, size: 16, "aria-hidden": "true" %><% end %>
+  <% if running %>
+    <%= link_to "Edit", edit_run_path(run), class: ck_button_classes(:light, variant: :outline) + " disabled", "aria-disabled": "true", tabindex: "-1" %>
+  <% else %>
+    <%= link_to "Edit", edit_run_path(run), class: ck_button_classes(:light, variant: :outline) %>
+    <% if run.status == "pending" %>
+      <%= button_to "Start", generate_run_path(run), method: :post, class: ck_button_classes(:dark), form_class: "inline-block" %>
+    <% elsif run.status == "failed" %>
+      <%= button_to "Retry", generate_run_path(run), method: :post, class: ck_button_classes(:light, variant: :outline), form_class: "inline-block" %>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,159 @@
+<%= form_with(model: run, local: true) do |form| %>
+  <% if run.errors.any? %>
+    <div class="ck-flash ck-flash--alert">
+      <p class="ck-flash__title"><%= pluralize(run.errors.count, "problem") %> prevented this run from being saved.</p>
+      <ul class="ck-error-list">
+        <% run.errors.full_messages.each do |message| %>
+          <li><%= message %></li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+
+  <div class="ck-card ck-form-card">
+    <div class="ck-field">
+      <%= form.label :name, "Name (auto-generated if blank)", class: "ck-label" %>
+      <%= form.text_field :name, class: "ck-input", placeholder: run.name.presence || "Auto-generated from prompt + version + timestamp" %>
+    </div>
+
+    <div class="ck-field">
+      <%= form.label :prompt_id, "Prompt", class: "ck-label" %>
+      <%= form.select :prompt_id, @prompts.map { |p| [p.display_name, p.id, { "data-has-variables" => p.variables.any? ? "1" : "0" }] }, { include_blank: "Select a prompt" }, { class: "ck-input", id: "run_prompt_id" } %>
+    </div>
+
+    <div class="ck-field" id="dataset-field">
+      <%= form.label :dataset_id, "Dataset", class: "ck-label" %>
+      <% if @datasets.empty? %>
+        <p class="ck-meta-copy">No datasets yet. <%= link_to "Create a dataset", new_dataset_path, class: "ck-link" %> first.</p>
+      <% else %>
+        <%= form.select :dataset_id, @datasets.map { |d| [d.name, d.id] }, { include_blank: "Select a dataset" }, { class: "ck-input", id: "run_dataset_id" } %>
+      <% end %>
+      <p class="ck-field-hint" id="dataset-hint" style="display: none; color: var(--ck-warning);">This prompt uses variables. Select a dataset to provide values.</p>
+    </div>
+
+    <div class="ck-field">
+      <label class="ck-label" for="run_temperature" style="position: relative;">
+        Temperature
+        <span class="ck-info-toggle">?</span>
+        <div class="ck-info-popup">
+          Controls how random the model's output is. Lower values make the model more focused and deterministic — it'll pick the most likely words. Higher values introduce more variety and creativity, but also more risk of odd phrasing. Most LLMs default to 1.0. For evaluation, try different values to see how your prompt performs under varying conditions.
+        </div>
+      </label>
+      <div class="ck-slider-row">
+        <%= form.range_field :temperature, min: 0, max: 1, step: 0.1, class: "ck-slider", id: "run_temperature", oninput: "document.getElementById('temp-value').textContent = this.value" %>
+        <span class="ck-slider-value" id="temp-value"><%= run.temperature || 1.0 %></span>
+      </div>
+    </div>
+
+    <div class="ck-field" id="judge-field">
+      <%= form.label :judge_model, "Judge model", class: "ck-label" %>
+      <% available = CompletionKit::ApiConfig.available_models(scope: :judging) %>
+      <% 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>
+        </div>
+        <p class="ck-field-hint" id="judge-hint"></p>
+        <% CompletionKit::ProviderCredential.find_each do |pc| %>
+          <%= turbo_stream_from "completion_kit_provider_#{pc.id}" %>
+        <% end %>
+        <p class="ck-field-hint" id="refresh-status" style="min-height: 1.2em; margin-top: -0.25rem; font-size: 0.75rem;">&nbsp;</p>
+      <% else %>
+        <p class="ck-field-hint" style="color: var(--ck-warning);">No judge models available.&ensp;<%= link_to "Add a provider", provider_credentials_path, class: "ck-link" %></p>
+        <%= form.hidden_field :judge_model, value: nil, id: "run_judge_model" %>
+      <% end %>
+    </div>
+
+    <div class="ck-field" id="metrics-field">
+      <label class="ck-label">Metrics</label>
+      <p class="ck-field-hint" id="metrics-hint"></p>
+      <% if @all_metrics.empty? %>
+        <p class="ck-field-hint" style="color: var(--ck-warning);">No metrics yet.&ensp;<%= link_to "Create a metric", new_metric_path, class: "ck-link" %></p>
+      <% else %>
+        <% if @criterias.any? %>
+          <p class="ck-meta-copy" style="margin-bottom: 0.5rem;">
+            Quick add:&ensp;
+            <% @criterias.each do |c| %>
+              <span class="ck-chip" style="cursor: pointer;" onclick="ckQuickAddCriteria(<%= c.metric_ids.to_json %>)"><%= c.name %></span>&ensp;
+            <% end %>
+          </p>
+        <% end %>
+        <div class="ck-metric-checkboxes">
+          <% @all_metrics.each do |metric| %>
+            <label class="ck-checkbox-label">
+              <%= check_box_tag "run[metric_ids][]", metric.id, run.metric_ids.include?(metric.id), class: "ck-checkbox", id: "run_metric_#{metric.id}" %>
+              <span><%= metric.name %></span>
+            </label>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+
+    <script>
+function updateRunForm() {
+  var promptEl = document.getElementById('run_prompt_id');
+  var judgeEl = document.getElementById('run_judge_model');
+  var prompt = promptEl ? promptEl.value : '';
+  var judge = judgeEl ? judgeEl.value : '';
+  var metrics = document.querySelectorAll('input[name="run[metric_ids][]"]:checked');
+  var judgeField = document.getElementById('judge-field');
+  var metricsField = document.getElementById('metrics-field');
+  var judgeHint = document.getElementById('judge-hint');
+  var metricsHint = document.getElementById('metrics-hint');
+  var submitBtn = document.getElementById('run-submit');
+
+  if (judgeField) judgeField.className = 'ck-field';
+  if (metricsField) metricsField.className = 'ck-field';
+  if (judgeHint) judgeHint.textContent = '';
+  if (metricsHint) metricsHint.textContent = '';
+
+  if (judge && metrics.length > 0) {
+    if (judgeHint) judgeHint.textContent = 'Responses will be generated then judged automatically.';
+  } else if (judge && metrics.length === 0) {
+    if (judgeField) judgeField.className = 'ck-field ck-field--info';
+    if (metricsField) metricsField.className = 'ck-field ck-field--info';
+    if (metricsHint) metricsHint.textContent = 'Select at least one metric or criteria to enable judging.';
+  } else if (!judge && metrics.length > 0) {
+    if (judgeField) judgeField.className = 'ck-field ck-field--info';
+    if (judgeHint) judgeHint.textContent = 'Select a judge model to enable judging.';
+  }
+
+  var datasetEl = document.getElementById('run_dataset_id');
+  var datasetHint = document.getElementById('dataset-hint');
+  var dataset = datasetEl ? datasetEl.value : '';
+  var selectedOption = promptEl ? promptEl.options[promptEl.selectedIndex] : null;
+  var hasVars = selectedOption && selectedOption.dataset.hasVariables === '1';
+  if (datasetHint) datasetHint.style.display = (hasVars && !dataset) ? '' : 'none';
+
+  var valid = prompt !== '';
+  if (judge && metrics.length === 0) valid = false;
+  if (!judge && metrics.length > 0) valid = false;
+  if (submitBtn) submitBtn.disabled = !valid;
+}
+
+function ckQuickAddCriteria(metricIds) {
+  metricIds.forEach(function(id) {
+    var cb = document.getElementById('run_metric_' + id);
+    if (cb) cb.checked = true;
+  });
+  updateRunForm();
+}
+
+var judgeEl = document.getElementById('run_judge_model');
+var promptEl = document.getElementById('run_prompt_id');
+var datasetEl = document.getElementById('run_dataset_id');
+if (judgeEl) judgeEl.addEventListener('change', updateRunForm);
+if (promptEl) promptEl.addEventListener('change', updateRunForm);
+if (datasetEl) datasetEl.addEventListener('change', updateRunForm);
+document.querySelectorAll('input[name="run[metric_ids][]"]').forEach(function(cb) {
+  cb.addEventListener('change', updateRunForm);
+});
+updateRunForm();
+    </script>
+
+    <div class="ck-actions">
+      <%= link_to "Cancel", run.persisted? ? run_path(run) : runs_path, class: ck_button_classes(:light, variant: :outline) %>
+      <%= form.submit(run.persisted? ? "Save run" : "Create run", class: ck_button_classes(:dark), id: "run-submit") %>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,18 @@
+<div id="run_progress">
+  <% if run.status == "generating" || run.status == "judging" %>
+    <div class="ck-discovery-bar">
+      <div class="ck-discovery-bar__label">
+        <%= ck_run_status_label(run) %>
+      </div>
+      <% if run.progress_total.to_i > 0 %>
+        <div class="ck-discovery-bar__track">
+          <div class="ck-discovery-bar__fill" style="width: <%= (run.progress_current.to_f / run.progress_total * 100).round %>%"></div>
+        </div>
+      <% else %>
+        <div class="ck-discovery-bar__track">
+          <div class="ck-discovery-bar__fill ck-discovery-bar__fill--indeterminate"></div>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,13 @@
+<%= link_to run_response_path(run, response, sort: params[:sort]), class: "ck-response-row", id: "response_#{response.id}" do %>
+  <span class="ck-response-row__index">#<%= index %></span>
+  <span class="ck-response-row__text"><%= truncate(response.response_text.to_s, length: 160) %></span>
+  <span class="ck-response-row__score">
+    <% if response.reviewed? %>
+      <span class="ck-score"><span class="ck-score__star">★</span> <%= response.score %></span>
+    <% elsif run.status == "failed" %>
+      <span class="ck-chip">Failed</span>
+    <% elsif run.status == "judging" %>
+      <span class="ck-chip">Judging</span>
+    <% end %>
+  </span>
+<% end %>

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

@@ -0,0 +1,8 @@
+<div id="run_sort_toolbar">
+  <% if run.status == "completed" && run.judge_configured? && run.responses.joins(:reviews).exists? %>
+    <div class="ck-toolbar" style="margin-top: 1.5rem;">
+      <%= link_to "Best first", run_path(run, sort: "score_desc"), class: params[:sort].blank? || params[:sort] == "score_desc" ? ck_button_classes(:dark) : ck_button_classes(:light, variant: :outline) %>
+      <%= link_to "Worst first", run_path(run, sort: "score_asc"), class: params[:sort] == "score_asc" ? ck_button_classes(:dark) : ck_button_classes(:light, variant: :outline) %>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,15 @@
+<div id="run_status_header">
+  <% if run.status == "failed" %>
+    <div class="ck-flash ck-flash--alert">
+      <%= run.error_message.presence || "Run failed." %>
+    </div>
+  <% end %>
+  <section class="ck-page-header">
+    <div>
+      <p class="ck-kicker"><span class="<%= ck_run_dot(run) %>"></span> <%= ck_run_status_label(run) %></p>
+      <h1 class="ck-title"><%= run.name %></h1>
+      <p class="ck-meta-copy"><%= link_to run.prompt.display_name, prompt_path(run.prompt), class: "ck-link" %>&ensp;<span class="ck-chip" style="text-transform: none;"><%= run.prompt.llm_model %></span></p>
+    </div>
+    <%= render "completion_kit/runs/actions", run: run %>
+  </section>
+</div>

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

@@ -0,0 +1,14 @@
+<ol class="ck-breadcrumb">
+  <li><%= link_to "Prompts", prompts_path %></li>
+  <li><%= link_to @run.prompt.name, prompt_path(@run.prompt) %></li>
+  <li><%= link_to @run.name, run_path(@run) %></li>
+  <li>Edit</li>
+</ol>
+
+<section class="ck-page-header">
+  <div>
+    <h1 class="ck-title">Edit run</h1>
+  </div>
+</section>
+
+<%= render "form", run: @run %>

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

@@ -0,0 +1,43 @@
+<section class="ck-page-header">
+  <div>
+    <h1 class="ck-title">Runs</h1>
+    <p class="ck-lead">Execute a prompt against a dataset and optionally score the responses with a judge model. Each run captures the full set of inputs, outputs, and evaluations.</p>
+  </div>
+  <div class="ck-actions">
+    <%= link_to "New run", new_run_path, class: ck_button_classes(:dark) %>
+  </div>
+</section>
+
+<% if @runs.any? %>
+  <table class="ck-results-table">
+    <thead>
+      <tr>
+        <th>Run</th>
+        <th>Prompt</th>
+        <th>Responses</th>
+        <th>Avg score</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      <% @runs.each do |run| %>
+        <tr onclick="window.location='<%= run_path(run) %>'" style="cursor: pointer;">
+          <td><span class="ck-run-name"><span class="<%= ck_run_dot(run) %>"></span><strong><%= run.name %></strong></span></td>
+          <td><%= link_to run.prompt.name, prompt_path(run.prompt), class: "ck-link" %> &ensp;<span class="ck-chip ck-chip--soft">v<%= run.prompt.version_number %></span></td>
+          <td><%= run.responses.size %></td>
+          <td>
+            <% avg = run.avg_score %>
+            <% if avg %>
+              <span class="<%= ck_badge_classes(ck_score_kind(avg)) %>"><%= avg %></span>
+            <% else %>
+              &mdash;
+            <% end %>
+          </td>
+          <td class="ck-results-table__arrow">&rarr;</td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+<% else %>
+  <div class="ck-empty">No runs yet.&ensp;<%= link_to "Create your first run →", new_run_path, class: "ck-link" %></div>
+<% end %>

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

@@ -0,0 +1,12 @@
+<ol class="ck-breadcrumb">
+  <li><%= link_to "Runs", runs_path %></li>
+  <li>New run</li>
+</ol>
+
+<section class="ck-page-header">
+  <div>
+    <h1 class="ck-title">New run</h1>
+  </div>
+</section>
+
+<%= render "form", run: @run %>

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

@@ -0,0 +1,79 @@
+<%= turbo_stream_from "completion_kit_run_#{@run.id}" %>
+
+<ol class="ck-breadcrumb">
+  <li><%= link_to "Runs", runs_path %></li>
+  <li><%= @run.name %></li>
+</ol>
+
+<%= render "status_header", run: @run %>
+
+<div class="ck-run-config">
+  <div class="ck-run-config__row">
+    <span class="ck-run-config__key">Created</span>
+    <time datetime="<%= @run.created_at.iso8601 %>" data-local-time><%= @run.created_at.utc.strftime("%Y-%m-%d %H:%M UTC") %></time>
+  </div>
+  <div class="ck-run-config__row">
+    <span class="ck-run-config__key">Dataset</span>
+    <% if @run.dataset %>
+      <%= link_to @run.dataset.name, dataset_path(@run.dataset), class: "ck-link" %>
+    <% else %>
+      <span class="ck-run-config__none">None</span>
+    <% end %>
+  </div>
+  <% if @run.judge_model.present? %>
+    <div class="ck-run-config__row">
+      <span class="ck-run-config__key">Judge</span>
+      <span style="text-transform: none;"><%= @run.judge_model %></span>
+      <% unless @run.judge_configured? %>
+        <span class="ck-run-config__warn">provider not configured</span>
+      <% end %>
+    </div>
+  <% end %>
+  <% if @run.metrics.any? %>
+    <div class="ck-run-config__row">
+      <span class="ck-run-config__key">Metrics</span>
+      <span><%= @run.metrics.map { |m| link_to(m.name, metric_path(m), class: "ck-link") }.join(", ").html_safe %></span>
+    </div>
+  <% end %>
+  <div class="ck-run-config__row">
+    <span class="ck-run-config__key">Temperature</span>
+    <span><%= @run.temperature %></span>
+  </div>
+</div>
+
+<div class="ck-prompt-preview">
+  <div class="ck-prompt-preview__header">
+    <p class="ck-kicker">Prompt</p>
+    <% if @run.suggestions.any? %>
+      <%= link_to "View suggestion", suggestion_run_path(@run), class: ck_button_classes(:light, variant: :outline) + " ck-button--sm" %>
+    <% elsif @run.status == "completed" && @run.responses.joins(:reviews).exists? %>
+      <%= button_to "Suggest improvements", suggest_run_path(@run), method: :post, class: ck_button_classes(:light, variant: :outline) + " ck-button--sm", form_class: "inline-block" %>
+    <% end %>
+  </div>
+  <p class="ck-prompt-preview__text" id="prompt_text"><%= @run.prompt.template %></p>
+  <% if @run.prompt.template.length > 200 %>
+    <button type="button" class="ck-link" id="prompt_toggle" aria-expanded="false" aria-controls="prompt_text" onclick="var t=document.getElementById('prompt_text');var l=this;var expanded=t.classList.toggle('ck-prompt-preview__text--expanded');l.textContent=expanded?'Show less':'Show more';l.setAttribute('aria-expanded',expanded?'true':'false')">Show more</button>
+  <% end %>
+</div>
+
+<% if @run.dataset %>
+  <details class="ck-details">
+    <summary class="ck-details__summary">Dataset preview</summary>
+    <pre class="ck-code ck-code--dark"><%= @run.dataset.csv_data.to_s.lines.first(10).join %><% if @run.dataset.csv_data.to_s.lines.count > 10 %>...<% end %></pre>
+  </details>
+<% end %>
+
+<%= render "progress", run: @run %>
+
+<% valid_responses = @responses.reject { |r| r.response_text&.start_with?("Error:") } %>
+
+<%= render "sort_toolbar", run: @run %>
+
+<% if valid_responses.any? %>
+  <p class="ck-kicker" style="margin-top: 1.5rem;">Responses</p>
+<% end %>
+<div id="run_responses">
+  <% valid_responses.each_with_index do |response, idx| %>
+    <%= render "response_row", run: @run, response: response, index: idx + 1 %>
+  <% end %>
+</div>

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

@@ -0,0 +1,47 @@
+<ol class="ck-breadcrumb">
+  <li><%= link_to "Runs", runs_path %></li>
+  <li><%= link_to @run.name, run_path(@run) %></li>
+  <li>Suggestion</li>
+</ol>
+
+<section class="ck-page-header">
+  <div>
+    <p class="ck-kicker"><span class="ck-dot ck-dot--running" style="animation: none; background: var(--ck-accent);"></span> Prompt improvement</p>
+    <h1 class="ck-title"><%= @run.prompt.name %></h1>
+    <p class="ck-meta-copy">Based on <%= @run.responses.count %> responses scored <%= @run.avg_score %>/5</p>
+  </div>
+  <div class="ck-actions">
+    <%= link_to "Back to run", run_path(@run), class: ck_button_classes(:light, variant: :outline) %>
+    <% unless @suggestion.applied_at? %>
+      <%= button_to "Apply suggestion", apply_suggestion_run_path(@run), method: :post, class: ck_button_classes(:dark), form_class: "inline-block" %>
+    <% else %>
+      <span class="ck-chip" style="background: var(--ck-success-soft); color: var(--ck-success);">Applied</span>
+    <% end %>
+  </div>
+</section>
+
+<div class="ck-suggest-reasoning">
+  <p class="ck-kicker">Why these changes</p>
+  <div class="ck-suggest-reasoning__body"><%= simple_format(@suggestion.reasoning) %></div>
+</div>
+
+<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">Current prompt</span>
+      <span class="ck-suggest-diff__version"><%= @run.prompt.version_label %></span>
+    </div>
+    <pre class="ck-suggest-diff__code"><%= ck_word_diff_old(@suggestion.original_template, @suggestion.suggested_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">Suggested prompt</span>
+    </div>
+    <pre class="ck-suggest-diff__code"><%= ck_word_diff_new(@suggestion.original_template, @suggestion.suggested_template) %></pre>
+  </div>
+</div>
+
+<div class="ck-suggest-full">
+  <p class="ck-kicker">Full suggested prompt</p>
+  <pre class="ck-code ck-code--dark"><%= @suggestion.suggested_template %></pre>
+</div>

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

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>CompletionKit</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%= favicon_link_tag "completion_kit/logo.svg", type: "image/svg+xml" %>
+  <%= stylesheet_link_tag "completion_kit/application", media: "all" %>
+  <%= javascript_include_tag "turbo", type: "module" %>
+  <%= action_cable_meta_tag %>
+</head>
+<body class="ck-app">
+  <header class="ck-topbar">
+    <div class="ck-wrap ck-topbar__inner">
+      <%= link_to (main_app.respond_to?(:root_path) ? main_app.root_path : prompts_path), class: "ck-brand" do %><%= image_tag "completion_kit/logo.svg", alt: "CompletionKit", style: "height: 52px; width: auto; margin-bottom: 10px;" %> CompletionKit<% end %>
+
+      <nav class="ck-nav">
+        <% active = ->(path) { request.path.start_with?(path) ? ck_button_classes(:dark) : ck_button_classes(:light, variant: :outline) } %>
+        <%= link_to "Prompts", prompts_path, class: active.(prompts_path) %>
+        <%= link_to "Metrics", metrics_path, class: request.path.start_with?(metrics_path) || request.path.start_with?(criteria_path) ? ck_button_classes(:dark) : ck_button_classes(:light, variant: :outline) %>
+        <%= link_to "Datasets", datasets_path, class: active.(datasets_path) %>
+        <%= link_to "Runs", runs_path, class: active.(runs_path) %>
+        <%= link_to "Settings", provider_credentials_path, class: active.(provider_credentials_path) %>
+        <%= link_to "API", api_reference_path, class: active.(api_reference_path) %>
+      </nav>
+    </div>
+  </header>
+
+  <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 %>
+      </div>
+    <% end %>
+
+    <%= yield %>
+    </div>
+  </main>
+<script>
+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"});
+  });
+});
+
+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');
+  var status = document.getElementById('refresh-status');
+  if (status) status.textContent = 'Refreshing models\u2026';
+  var csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute("content");
+  fetch("/completion_kit/refresh_models", {
+    method: "POST",
+    headers: { "X-CSRF-Token": csrfToken }
+  });
+}
+
+document.addEventListener("turbo:before-stream-render", function(event) {
+  var target = event.target.getAttribute("target");
+  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 = '\u00a0'; }, 3000); }
+  }
+});
+</script>
+</body>
+</html>