insika 0.9.0 → 1.0.1

data/lib/insika/studio/views/models.erb

@@ -0,0 +1,187 @@
+<% totals = @report && @report["totals"] %>
+<% requests = totals ? totals["requests"] : 0 %>
+<div class="models-page">
+  <header class="page-head">
+    <div><%== crumbs_for("Models") %><h1>Models<span class="sub">Usage, cost & performance</span></h1></div>
+    <div class="model-updated"><span class="model-indicator"></span>Snapshot<% if @report && @report["to"] %> · <%= Time.iso8601(@report["to"]).utc.strftime("%H:%M UTC") %><% end %></div>
+  </header>
+
+  <form method="get" action="/studio/models" class="model-toolbar">
+    <div class="model-filter-group">
+      <label><span>Agent</span><select name="agent"><option value="">All agents</option>
+        <% (Array(@report && @report["agents"]) + [@agent]).compact.uniq.sort.each do |agent| %><option value="<%= agent %>"<%== ' selected' if @agent == agent %>><%= agent %></option><% end %>
+      </select></label>
+      <label><span>Provider</span><select name="provider"><option value="">All providers</option>
+        <% (Array(@report && @report["providers"]) + [@provider]).compact.uniq.sort.each do |provider| %><option value="<%= provider %>"<%== ' selected' if @provider == provider %>><%= provider %></option><% end %>
+      </select></label>
+      <label><span>Model</span><select name="model"><option value="">All models</option>
+        <% (Array(@report && @report["model_options"]) + [@model]).compact.uniq.sort.each do |model| %><option value="<%= model %>"<%== ' selected' if @model == model %>><%= model %></option><% end %>
+      </select></label>
+    </div>
+    <div class="model-filter-group" data-controller="model-filters">
+      <label class="sr-only" for="model-period">Period</label>
+      <select id="model-period" name="period" data-model-filters-target="period" data-action="change->model-filters#pickPeriod"><% { "24h" => "Last 24 hours", "7d" => "Last 7 days", "30d" => "Last 30 days", "custom" => "Custom range" }.each do |value, label| %><option value="<%= value %>"<%== ' selected' if @period == value %>><%= label %></option><% end %></select>
+      <label class="model-date"><span>From</span><input type="date" name="from" value="<%= @range_from %>" max="<%= Time.now.utc.strftime('%Y-%m-%d') %>" data-model-filters-target="date" data-action="change->model-filters#pickDate"></label>
+      <label class="model-date"><span>To</span><input type="date" name="to" value="<%= @range_to %>" max="<%= Time.now.utc.strftime('%Y-%m-%d') %>" data-model-filters-target="date" data-action="change->model-filters#pickDate"></label>
+      <button type="submit" class="primary">Apply filters <span aria-hidden="true">↗</span></button>
+    </div>
+  </form>
+
+  <section class="model-summary" aria-label="Model metrics summary">
+    <div class="model-stat"><span class="model-stat-label">Requests</span><strong><%= requests %></strong><span><%= @report ? @report["models"].size : 0 %> models in this period</span></div>
+    <div class="model-stat"><span class="model-stat-label">Reported cost <small>USD</small></span><strong><%= model_chart_value(totals && totals["cost"], "USD") %></strong><span><%= requests.positive? ? "#{totals['unknown_cost_requests']} of #{requests} unknown (#{format('%.1f', totals['unknown_cost_requests'] * 100.0 / requests)}%)" : "Awaiting cost data" %></span></div>
+    <div class="model-stat"><span class="model-stat-label">p95 latency</span><strong><%= model_chart_value(totals && totals["p95_ms"], "ms") %></strong><span>p50 <%= model_chart_value(totals && totals["p50_ms"], "ms") %> · p90 <%= model_chart_value(totals && totals["p90_ms"], "ms") %></span></div>
+    <div class="model-stat"><span class="model-stat-label">Failure rate</span><strong><%= requests.positive? ? format("%.1f%%", totals["failures"] * 100.0 / requests) : "—" %></strong><span><%= totals ? totals["failures"] : 0 %> failed requests · <%= totals ? totals["retries"] : 0 %> retries</span></div>
+  </section>
+
+  <% if requests.zero? %><div class="model-notice"><strong>No model requests yet for these filters.</strong><span>Choose another period or <a href="/studio/playground">make a request in Playground</a>.</span></div><% end %>
+
+  <div class="model-charts">
+    <section class="card model-panel">
+      <div class="model-panel-head"><div><h2>Requests over time</h2><p>Recorded volume across the selected models</p></div><span class="model-unit">REQUESTS</span></div>
+      <%== render("_model_chart", locals: { title: "Requests over time", fields: [["requests", "Requests"]], unit: "requests", empty: "No recorded requests" }) %>
+    </section>
+    <section class="card model-panel">
+      <div class="model-panel-head"><div><h2>Reported cost over time</h2><p>Known cost only · missing values remain gaps</p></div><span class="model-unit cost">USD</span></div>
+      <%== render("_model_chart", locals: { title: "Reported cost over time", fields: [["cost", "Reported cost"]], unit: "USD", empty: requests.zero? ? "No recorded costs" : "Cost unavailable" }) %>
+    </section>
+    <section class="card model-panel">
+      <div class="model-panel-head"><div><h2>Latency over time</h2><p>Request duration, including native retries</p></div></div>
+      <div class="model-legend"><span class="p50">p50</span><span class="p90">p90</span><span class="p95">p95</span></div>
+      <%== render("_model_chart", locals: { title: "Latency over time", fields: [["p95_ms", "p95"], ["p90_ms", "p90"], ["p50_ms", "p50"]], unit: "ms", empty: requests.zero? ? "No measured requests" : "Latency unavailable" }) %>
+    </section>
+    <section class="card model-panel">
+      <div class="model-panel-head"><div><h2>Cost by model</h2><p>Where your reported spend is going</p></div><span class="model-unit cost">USD</span></div>
+      <% ranked = Array(@report && @report["models"]).sort_by { |row| -(row["cost"] || -1) } %>
+      <% maximum = [ranked.filter_map { |r| r["cost"] }.max || 0, 0.000001].max %>
+      <% if ranked.empty? %><div class="model-ranking-empty"><strong>No model usage yet</strong><span>Your model mix will appear here.</span></div><% else %>
+        <div class="model-ranking">
+          <% ranked.first(6).each_with_index do |row, index| %>
+            <div class="model-rank">
+              <div class="model-rank-label"><span class="model-rank-number"><%= index + 1 %></span><div><strong><%= row["model"] || "Unknown model" %></strong><span><%= row["provider"] || "Unknown provider" %> · <%= row["requests"] %> requests<% if row["unknown_cost_requests"].positive? %> · partial coverage<% end %></span></div><b><%= model_chart_value(row["cost"], "USD") %></b></div>
+              <svg class="model-rank-bar" viewBox="0 0 100 4" preserveAspectRatio="none" role="img" aria-label="<%= row["model"] %>: <%= model_chart_value(row["cost"], 'USD') %> reported cost"><rect class="track" width="100" height="4" rx="2"/><% unless row["cost"].nil? %><rect class="fill" width="<%= row["cost"].to_f / maximum * 100 %>" height="4" rx="2"/><% end %></svg>
+            </div>
+          <% end %>
+        </div>
+        <p class="model-ranking-note">Top <%= [ranked.size, 6].min %> by reported cost. Full breakdown below.</p>
+      <% end %>
+    </section>
+  </div>
+
+  <% if requests.positive? %>
+  <section class="card model-panel model-detail">
+    <div class="section-head"><h2>Model performance</h2><span class="muted">Exact values for the selected period</span></div>
+    <div class="model-table-scroll"><table class="grid">
+      <thead><tr><th>provider</th><th>model</th><th class="num">req</th><th class="num">fail</th><th class="num">retry</th><th class="num">p50 (ms)</th><th class="num">p90 (ms)</th><th class="num">p95 (ms)</th></tr></thead>
+      <tbody>
+        <% @report["models"].each do |row| %>
+          <tr>
+            <td><span class="model-provider"><%= row["provider"] || "—" %></span></td><td class="model-name"><%= row["model"] || "—" %></td>
+            <td class="num"><%= row["requests"] %></td><td class="num"><%= row["failures"] %></td><td class="num"><%= row["retries"] %></td>
+            <% %w[p50 p90 p95].each do |pct| %><td class="num"><%= row["#{pct}_ms"].nil? ? "—" : format("%.2f", row["#{pct}_ms"]) %></td><% end %>
+          </tr>
+        <% end %>
+      </tbody>
+    </table></div>
+  </section>
+
+  <section class="card model-panel model-detail">
+    <div class="section-head"><h2>Token breakdown</h2><span class="muted">Reported subtotals · thinking tokens shown separately</span></div>
+    <div class="model-table-scroll"><table class="grid">
+      <thead><tr><th>model</th><th class="num">USD</th><th class="num">cost unknown</th><th class="num">input</th><th class="num">output</th><th class="num">cache read</th><th class="num">cache write</th><th class="num">thinking</th></tr></thead>
+      <tbody>
+        <% @report["models"].each do |row| %>
+          <tr>
+            <td><%= row["provider"] || "—" %> / <%= row["model"] || "—" %></td>
+            <td class="num"><%= row["cost"].nil? ? "—" : format("%.6f", row["cost"]) %></td>
+            <td class="num"><%= row["unknown_cost_requests"] %> of <%= row["requests"] %></td>
+            <% %w[input_tokens output_tokens cache_read_tokens cache_write_tokens thinking_tokens].each do |field| %>
+              <% unknown = row.fetch("unknown_#{field}_requests", 0) %>
+              <% coverage = "#{unknown} of #{row['requests']} requests have unknown #{field.tr('_', ' ')}" %>
+              <td class="num"<% if unknown.positive? %> title="Reported subtotal; <%= coverage %>" aria-label="<%= row[field].nil? ? 'No' : row[field] %> reported <%= field.tr('_', ' ') %>; <%= coverage %>"<% end %>><%= row[field].nil? ? "—" : row[field] %></td>
+            <% end %>
+          </tr>
+        <% end %>
+      </tbody>
+    </table></div>
+  </section>
+
+  <section class="card model-panel model-detail">
+    <div class="section-head"><h2>By operation</h2><span class="muted">chat is the reply · knowledge_* runs after the turn</span></div>
+    <div class="model-table-scroll"><table class="grid">
+      <thead><tr><th>operation</th><th class="num">req</th><th class="num">USD</th><th class="num">input</th><th class="num">output</th><th class="num">cache read</th></tr></thead>
+      <tbody>
+        <% Array(@report["operations"]).each do |row| %>
+          <tr>
+            <td><%= row["operation"] %></td>
+            <td class="num"><%= row["requests"] %></td>
+            <td class="num"><%= row["cost"].nil? ? "—" : format("%.6f", row["cost"]) %></td>
+            <% %w[input_tokens output_tokens cache_read_tokens].each do |field| %>
+              <td class="num"><%= row[field].nil? ? "—" : row[field] %></td>
+            <% end %>
+          </tr>
+        <% end %>
+      </tbody>
+    </table></div>
+  </section>
+
+  <% end %>
+  <% turns = @report && @report["turns"] %>
+  <% if turns && turns["count"].positive? %>
+  <section class="card model-panel model-detail">
+    <div class="section-head"><h2>Turn latency</h2><span class="muted"><%= turns["count"] %> turns · <%= turns["failures"] %> failed (<%= format("%.1f", turns["failures"] * 100.0 / turns["count"]) %>%)<% unless turns["failure_stages"].empty? %>: <%= turns["failure_stages"].map { |k, v| "#{k} #{v}" }.join(", ") %><% end %> · ttft is the provider's first token, first balloon what the customer waits</span></div>
+    <div class="model-table-scroll"><table class="grid">
+      <thead><tr><th>window</th><th class="num">turns</th><th class="num">p50 (ms)</th><th class="num">p95 (ms)</th></tr></thead>
+      <tbody>
+        <% { "ttft_ms" => "ttft", "total_ms" => "total", "first_balloon_ms" => "first balloon", "queue_ms" => "queue", "prep_ms" => "prep", "tools_ms" => "tools" }.each do |key, label| %>
+          <% w = turns["windows"][key] %>
+          <tr><td><%= label %></td><td class="num"><%= w["measured"] %></td>
+            <% %w[p50 p95].each do |pct| %><td class="num"><%= w[pct].nil? ? "—" : format("%.0f", w[pct]) %></td><% end %></tr>
+        <% end %>
+      </tbody>
+    </table></div>
+  </section>
+  <% unless turns["tools"].empty? %>
+  <section class="card model-panel model-detail">
+    <div class="section-head"><h2>Tool health</h2><span class="muted">every call in these turns</span></div>
+    <div class="model-table-scroll"><table class="grid">
+      <thead><tr><th>tool</th><th class="num">calls</th><th class="num">ok %</th><th class="num">p50 (ms)</th><th class="num">p95 (ms)</th></tr></thead>
+      <tbody>
+        <% turns["tools"].sort_by { |t| -t["failures"] }.each do |t| %>
+          <tr><td><%= t["tool"] %></td><td class="num"><%= t["calls"] %></td>
+            <td class="num"><%= format("%.1f", (t["calls"] - t["failures"]) * 100.0 / t["calls"]) %></td>
+            <% %w[p50_ms p95_ms].each do |k| %><td class="num"><%= t[k].nil? ? "—" : t[k] %></td><% end %></tr>
+        <% end %>
+      </tbody>
+    </table></div>
+  </section>
+  <% end %>
+  <% end %>
+  <% if requests.positive? %>
+  <section class="card model-panel model-detail">
+    <div class="section-head"><h2>Slowest requests</h2><span class="muted">up to 20 measured requests</span></div>
+    <% if @report["slowest"].empty? %>
+      <div class="empty">No measured request durations yet.</div>
+    <% else %>
+      <div class="model-table-scroll"><table class="grid">
+        <thead><tr><th>task</th><th>provider</th><th>model</th><th>status</th><th class="num">ms</th><th class="num">reported USD</th></tr></thead>
+        <tbody>
+          <% @report["slowest"].each do |row| %>
+            <tr>
+              <td><a href="<%= task_path(row["task_id"]) %>"><span title="<%= row["task_id"] %>"><%= row["task_id"].to_s.length > 18 ? "#{row["task_id"][0, 8]}…#{row["task_id"][-6, 6]}" : row["task_id"] %></span></a></td>
+              <td><span class="model-provider"><%= row["provider"] || "—" %></span></td><td class="model-name"><%= row["model"] || "—" %></td><td><%= row["status"] || "—" %></td>
+              <td class="num"><%= row["duration_ms"].nil? ? "—" : format("%.2f", row["duration_ms"]) %></td>
+              <td class="num"><%= row["cost"].nil? ? "—" : format("%.6f", row["cost"]) %></td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table></div>
+    <% end %>
+  </section>
+  <% end %>
+  <details class="model-methodology"><summary>About these metrics</summary>
+    <p>Request latency includes native retries. Retries count usage attempts after the first, not task executions. Percentiles use measured durations, never averages of bucket percentiles.</p>
+    <p>Cost and token values are reported subtotals when coverage is incomplete. A dash means no value was reported. Chart intervals use UTC; missing measurements are not interpolated.</p>
+    <p>History starts with deployment. Deleting a task removes its model history; retention and tenant purge remove it too. Earlier requests are not backfilled.</p>
+  </details>
+</div>

data/lib/insika/studio/views/parity.erb

@@ -1,7 +1,8 @@
+<div class="reports-page reports-parity">
 <header class="page-head">
   <div>
-    <nav class="crumbs"><span>operate</span></nav>
-    <h1>Parity<span class="sub">the shadow experiment</span></h1>
+    <%== crumbs_for("Parity") %>
+    <h1>Parity<span class="sub">Compare replies in the shadow experiment</span></h1>
   </div>
   <div class="head-actions">
     <%== agent_filter_form("/studio/parity", @agent) %>
@@ -28,7 +29,7 @@
     </div>
     <% sha_check = r.checks.find { |c| c.id == :criterion_sha } %>
     <div class="skill-desc">
-      <span class="mono"><%= r.criterion_sha %></span>
+      <details class="report-details"><summary>Frozen criterion</summary><p class="mono"><%= r.criterion_sha %></p></details>
       <% if sha_check&.met %>
         <span class="pill ok">frozen · matches every pair in the window</span>
       <% else %>
@@ -37,8 +38,32 @@
     </div>
   </div>
 
-  <h2>Checks<span class="sub">the arithmetic, not the conclusion</span></h2>
+  <h2>Judge a batch</h2>
   <div class="card">
+    <form method="post" action="/studio/parity" class="actions">
+      <%== csrf_tag %>
+      <label>
+        Agent (all stores when blank)
+        <input type="text" name="agent" placeholder="agent-id" value="<%= @agent %>">
+      </label>
+      <label>
+        Limit
+        <input type="number" name="limit" value="50" min="1" max="200">
+      </label>
+      <button type="submit" class="primary" data-turbo-submits-with="Judging…">Judge <%= @pending %> complete pair(s)</button>
+    </form>
+    <p class="muted">Only complete pairs are judged, up to the batch limit. <a href="/studio/settings?s=evals">Configure judges</a></p>
+    <div class="skill-desc muted">
+      Cost: <span class="mono"><%= @judge_cost %></span> provider calls
+      (<%= @pending %> pairs × <%= @criterion.rule.min_judge_models %> judges × 2 orders).
+      <% if Array((@judge_models || {})["judges"]).empty? %>
+        <span class="pill err">No judges configured. Configure judges in Settings before running a batch.</span>
+      <% end %>
+    </div>
+  </div>
+
+  <h2>Readiness checks<span class="sub">Each requirement must pass</span></h2>
+  <div class="card report-table">
     <table class="grid">
       <thead><tr><th>check</th><th>required</th><th>actual</th><th></th></tr></thead>
       <tbody>
@@ -55,7 +80,7 @@
   </div>
 
   <h2>Pairs / day<span class="sub">floor <%= @criterion.rule.pairs_per_day %> · a gap day invalidates the window</span></h2>
-  <div class="card">
+  <div class="card report-table">
     <table class="grid">
       <thead><tr><th>date</th><th>pairs</th><th>decided</th><th></th></tr></thead>
       <tbody>
@@ -72,8 +97,8 @@
   </div>
 
   <% if r.counts %>
-    <h2>Per store<span class="sub">a store blocks its own cut even when the aggregate passes</span></h2>
-    <div class="card">
+    <h2>Per store<span class="sub">Each agent must meet its own threshold</span></h2>
+    <div class="card report-table">
       <table class="grid">
         <thead><tr><th>store</th><th>decided</th><th>win-or-tie</th><th>worse</th><th>meets floor</th></tr></thead>
         <tbody>
@@ -101,42 +126,21 @@
     </div>
   <% end %>
 
-  <h2>Judge a batch</h2>
-  <div class="card">
-    <form method="post" action="/studio/parity" class="actions">
-      <%== csrf_tag %>
-      <label>
-        Agent (all stores when blank)
-        <input type="text" name="agent" placeholder="agent-id">
-      </label>
-      <label>
-        Limit
-        <input type="number" name="limit" value="50" min="1" max="200">
-      </label>
-      <button type="submit" class="primary">Judge <%= @pending %> complete pair(s)</button>
-    </form>
-    <div class="skill-desc muted">
-      Cost: <span class="mono"><%= @judge_cost %></span> provider calls
-      (<%= @pending %> pairs × <%= @criterion.rule.min_judge_models %> judges × 2 orders).
-      <% if Array((@judge_models || {})["judges"]).empty? %>
-        <span class="pill err">no judges configured in settings['evals'] — the press will refuse</span>
-      <% end %>
-    </div>
-  </div>
-
   <h2>Recent pairs<span class="sub">inbound · incumbent · insika</span></h2>
   <div class="card">
     <ul class="history">
       <% @pairs.each do |p| %>
         <li>
           <span class="pill <%= { open: 'warn', complete: 'info', silent: 'info', judged: 'ok', incomplete: 'err' }.fetch(p.status, 'info') %>"><%= p.status %></span>
-          <span class="mono"><%= p.id[0, 12] %></span>
+          <span class="mono" title="<%= p.id %>"><%= p.id[0, 12] %></span>
           <% if p.agent %><span class="mono"><%= p.agent %></span><% end %>
           <% if p.outcome %><span class="pill"><%= p.outcome %></span><% end %>
-          <% if p.session_id %><a class="mono" href="/studio/sessions/<%= Rack::Utils.escape(p.session_id) %>">session →</a><% end %>
+          <% if p.session_id %><a class="mono" href="/studio/sessions/<%= Rack::Utils.escape(p.session_id) %>">open session</a><% end %>
           <div class="skill-desc muted"><strong>customer:</strong> <%= p.inbound.to_s %></div>
+          <details class="report-details"><summary>Compare replies</summary>
           <div class="skill-desc"><strong>incumbent:</strong> <%= p.incumbent_reply.to_s %></div>
           <div class="skill-desc"><strong>insika:</strong> <%= p.insika_reply.to_s %></div>
+          </details>
           <% if p.verdict.is_a?(Hash) && presence(p.verdict["reason"]) %>
             <div class="skill-desc muted">why: <%= p.verdict["reason"] %></div>
           <% end %>
@@ -145,3 +149,5 @@
     </ul>
   </div>
 <% end %>
+
+</div>

data/lib/insika/studio/views/playground.erb

@@ -1,18 +1,22 @@
 <%# Playground — chat surface (T4): config bar on top, transcript scrolls, composer
    pinned at the bottom. Same form fields/route + live-transcript targets as before;
    fires the same send_message as the API. %>
+<header class="page-head">
+  <div>
+    <%== crumbs_for("Playground") %>
+    <h1>Playground<span class="sub">Test an agent in a new or existing conversation</span></h1>
+  </div>
+</header>
+
 <div class="chat"
      data-controller="live-transcript"
      data-live-transcript-session-value="<%= @session_id %>">
   <form class="chat-form" method="post" action="/studio/playground">
     <%== csrf_tag %>
+    <% if @new_session_id %><input type="hidden" name="new_session_id" value="<%= @new_session_id %>"><% end %>
     <div class="chat-head">
       <label class="chat-field">agent
-        <select name="agent">
-          <% @agents.each do |id| %>
-            <option value="<%= id %>"<%== ' selected' if id == @agent %>><%= id %></option>
-          <% end %>
-        </select>
+        <%== render("_agent_picker", locals: { name: "agent", options: @agents, value: @agent }) %>
       </label>
       <label class="chat-field">session
         <input type="text" name="session_id" value="<%= @session_id %>" placeholder="empty = new conversation"
@@ -25,10 +29,10 @@
       </label>
       <span class="pill info chat-status" data-live-transcript-target="status">disconnected</span>
       <details class="pin chat-pin">
-        <summary>overrides <span class="muted">— pin a NEW conversation (Chat › Agent › Model › platform)</span></summary>
+        <summary>Model overrides <span class="muted">— new conversations only</span></summary>
+        <p class="muted">Leave blank to use the agent’s defaults. An existing session keeps its saved model settings.</p>
         <div class="row">
-          <label>model<input type="text" name="model" placeholder="leave empty = agent/platform default"></label>
-          <label>provider<input type="text" name="provider" placeholder="optional"></label>
+          <label>model<%== model_select("model_ref", nil, "agent/platform default") %></label>
           <label>reasoning<%== thinking_select("thinking", nil, "agent/platform default") %></label>
         </div>
       </details>
@@ -40,7 +44,7 @@
         <% if @sent_message %><%== render("_message", locals: { m: { "role" => "user", "content" => @sent_message, "at" => nil }, prev: nil }) %><% end %>
       </div>
       <div class="empty chat-empty" data-live-transcript-target="empty"<%== ' hidden' unless Array(@history).empty? && @sent_message.nil? %>>
-        <% if @session_id %>Waiting for turn events…<% else %>Send a message to begin a conversation.<% end %>
+        <% if @session_id %>Waiting for turn events…<% else %>Choose an agent and send a message to begin. Leave the session blank for a new conversation.<% end %>
       </div>
     </div>
 

data/lib/insika/studio/views/refinement.erb

@@ -1,234 +1,25 @@
+<%# Refinement — miller columns: master run list | detail frame, scoped to
+    one agent at a time via agent_filter_form (a run always belongs to one
+    agent). A row click loads the detail beside the list (no full page load)
+    and advances the URL. The detail pane defaults to the run that most needs
+    a look — see render_refinement — and hosts the Run form in its head, since
+    starting a run is an action on the CURRENTLY VIEWED agent. %>
 <header class="page-head">
   <div>
-    <nav class="crumbs"><span>refinement</span></nav>
-    <h1>Refinement<span class="sub"><%= @agent ? "#{@agent}" : "no agent" %></span></h1>
+    <%== crumbs_for("Refinement") %>
+    <h1>Refinement<span class="sub"><%= @agent || "no agent" %></span></h1>
+  </div>
+  <div class="head-actions">
+    <%== agent_filter_form("/studio/refinement", @agent) %>
+    <a class="btn" href="/studio/chats">Open chats</a>
   </div>
-  <a class="btn" href="/studio/chats">Chats →</a>
 </header>
 
 <% if @agents.empty? %>
   <div class="empty">No agents yet. Create one first — a refinement run reads an agent's own traffic.</div>
 <% else %>
-  <div class="card">
-    <form method="post" action="/studio/refinement" class="actions">
-      <%== csrf_tag %>
-      <label>
-        Agent
-        <select name="agent">
-          <% @agents.each do |id| %>
-            <option value="<%= id %>"<%== ' selected' if id == @agent %>><%= id %></option>
-          <% end %>
-        </select>
-      </label>
-      <label title="Ignore the previous run and read the full window instead of only what happened since.">
-        <input type="checkbox" name="full" value="1"> full window
-      </label>
-      <button type="submit" class="primary">Run</button>
-    </form>
-    <div class="skill-desc muted">
-      A run reads this agent's own tasks, transcripts and tool traces and records what
-      broke, ranked. It never edits the agent and never calls a model.
-    </div>
+  <div class="drill" data-controller="list-filter">
+    <%== render("_refinement_master", locals: { active_id: @selected&.id }) %>
+    <%== render("refinement_detail", locals: { frame_only: true }) %>
   </div>
-
-  <% if @agent && @agents.size > 1 %>
-    <div class="filter-bar">
-      <% @agents.each do |id| %>
-        <a class="btn" href="/studio/refinement?agent=<%= Rack::Utils.escape(id) %>"<%== ' aria-current="page"' if id == @agent %>><%= id %></a>
-      <% end %>
-    </div>
-  <% end %>
-
-  <%# The review IS the product. A gated proposal shows the exact
-      edit, what it claims to fix, and how it scored against the accepted baseline,
-      because approving is a decision and a decision needs those three things. %>
-  <% if @proposal %>
-    <h2>Proposal<span class="sub">gated · awaiting your approval</span></h2>
-    <div class="card">
-      <% cand = @proposal.candidate || {} %>
-      <div class="skill-desc">
-        <span class="pill ok">gate passed</span>
-        <span class="mono"><%= @proposal.gate["passed_cases"] %>/<%= @proposal.gate["cases"] %> case(s)</span>
-        <span class="muted">no regression against <%= @proposal.gate["baseline_cases"] %> baselined case(s)</span>
-        <span class="muted">· proposed by <span class="mono"><%= cand["proposer"] %></span></span>
-        <%# When a PANEL ran, the operator is looking at the winner of
-            several, and which ones it beat is part of the decision. %>
-        <% if @proposal.panel.size > 1 %>
-          <span class="muted">· best of <%= @proposal.panel.size %> candidate(s)</span>
-        <% end %>
-        <% if @proposal.cost && @proposal.cost["spent"].to_i.positive? %>
-          <span class="muted">· <%= @proposal.cost["spent"] %> tokens<% if @proposal.cost["cached"].to_i.positive? %>
-            (<%= @proposal.cost["cached"] %> cached)<% end %></span>
-        <% end %>
-      </div>
-      <% if presence(cand["rationale"]) %>
-        <div class="skill-desc muted"><%= cand["rationale"] %></div>
-      <% end %>
-
-      <% Array(cand["edits"]).each do |e| %>
-        <div class="skill-desc">
-          <span class="pill"><%= e["op"] %></span>
-          <span class="mono"><%= e["file"] %></span>
-          <% if presence(e["anchor"]) %><span class="muted"><%= e["anchor"] %></span><% end %>
-          <% if Array(e["addresses"]).any? %>
-            <span class="muted">· addresses <%= Array(e["addresses"]).join(", ") %></span>
-          <% end %>
-        </div>
-        <pre class="diff"><% if e["op"] == "replace" %><span class="del">- <%= e["before"] %></span>
-<% end %><span class="ins">+ <%= e["after"] %></span></pre>
-      <% end %>
-
-      <form method="post" action="/studio/refinement/resolve" class="actions">
-        <%== csrf_tag %>
-        <input type="hidden" name="agent" value="<%= @agent %>">
-        <input type="hidden" name="run_id" value="<%= @proposal.id %>">
-        <label>
-          Note
-          <input type="text" name="note" placeholder="why (optional)">
-        </label>
-        <button type="submit" class="primary" name="decision" value="approved">Approve &amp; apply</button>
-        <button type="submit" class="ghost" name="decision" value="rejected">Reject</button>
-      </form>
-      <div class="skill-desc muted">
-        Approving writes the edits to the agent's files and versions the previous
-        content — undo it any time from the file's History.
-      </div>
-    </div>
-
-    <%# The candidates that LOST. Shown because the panel's value is comparative: an
-        operator deciding whether the loop earns its keep needs to see that three
-        models were asked and what the other two wrote. %>
-    <% losers = @proposal.panel.reject { |e| (e["candidate"] || {})["id"] == cand["id"] } %>
-    <% if losers.any? %>
-      <h2>Also proposed<span class="sub">scored and not chosen</span></h2>
-      <div class="card">
-        <ul class="history">
-          <% losers.each do |entry| %>
-            <% other = entry["candidate"] || {}; verdict = entry["gate"] || {} %>
-            <li>
-              <span class="pill <%= verdict["passed"] ? 'ok' : 'err' %>"><%= verdict["passed"] ? "passed" : "no" %></span>
-              <span class="mono"><%= Array(entry["proposers"]).join(" + ") %></span>
-              <span class="preview muted">
-                <%= Array(other["edits"]).size %> edit(s)
-                <% if verdict["cases"].to_i.positive? %>· <%= verdict["passed_cases"] %>/<%= verdict["cases"] %> case(s)<% end %>
-                <% if presence(verdict["reason"]) %>· <%= verdict["reason"] %><% end %>
-              </span>
-            </li>
-          <% end %>
-        </ul>
-      </div>
-    <% end %>
-  <% end %>
-
-  <% if @run.nil? %>
-    <div class="empty">No run yet for <span class="mono"><%= @agent %></span>. Press Run to read the last conversations.</div>
-  <% else %>
-    <h2>Findings<span class="sub"><%= @run.findings.size %> · <%= @run.status %><% if @run.excluded.to_i.positive? %> · <%= @run.excluded %> turn(s) excluded<% end %> · <%= @run.finished_at || @run.started_at %></span></h2>
-
-    <%# The model writes the candidate, the gate scores it. Offered on
-        a finished report and only when nothing is already awaiting an answer: a second
-        proposal while one is pending would ask the operator to review two edits to the
-        same file that were never scored together. %>
-    <% if @proposal.nil? && @run.status == :completed && @run.findings.any? %>
-      <div class="card">
-        <form method="post" action="/studio/refinement/propose" class="actions">
-          <%== csrf_tag %>
-          <input type="hidden" name="agent" value="<%= @agent %>">
-          <input type="hidden" name="run_id" value="<%= @run.id %>">
-          <button type="submit" class="primary">Propose a fix</button>
-        </form>
-        <div class="skill-desc muted">
-          Asks this agent's configured proposer(s) for a small, anchored edit to its
-          allowlisted files, then scores each one by replaying the golden set against a
-          throwaway clone and keeps the best. Nothing is written until you approve it.
-          Takes a while and costs provider calls — the replay is a real conversation per
-          case, per candidate.
-        </div>
-      </div>
-    <% end %>
-
-    <%# `mode: auto_apply` changed this agent's files with nobody in
-        the loop, so the page owes the operator exactly three things: what changed, why,
-        and where to undo it. The write versioned, so History IS the undo. %>
-    <% if @run.status == :applied && (@run.decision || {})["by"] == "auto_apply" %>
-      <div class="card">
-        <div class="skill-desc">
-          <span class="pill ok">auto-applied</span>
-          <span class="muted"><%= (@run.decision || {})["note"] %> · <%= (@run.decision || {})["at"] %></span>
-        </div>
-        <% Array((@run.candidate || {})["edits"]).each do |e| %>
-          <div class="skill-desc">
-            <span class="pill"><%= e["op"] %></span>
-            <a class="mono" href="/studio/agents/<%= Rack::Utils.escape(@agent) %>?file=<%= Rack::Utils.escape(e["file"]) %>"><%= e["file"] %></a>
-          </div>
-          <pre class="diff"><% if e["op"] == "replace" %><span class="del">- <%= e["before"] %></span>
-<% end %><span class="ins">+ <%= e["after"] %></span></pre>
-        <% end %>
-        <div class="skill-desc muted">
-          Undo it from the file's History — the previous content is one click away.
-        </div>
-      </div>
-    <% end %>
-
-    <%# A gate that refused is the most useful thing on this page and the easiest to
-        lose: without it, pressing Propose and getting nothing back reads as a bug. %>
-    <% if @run.status == :rejected && @run.gate.is_a?(Hash) && !@run.gate_passed? %>
-      <div class="card">
-        <div class="skill-desc">
-          <span class="pill err">gate refused</span>
-          <span class="mono"><%= @run.gate["reason"] %></span>
-        </div>
-        <% Array((@run.candidate || {})["dropped"]).each do |d| %>
-          <div class="skill-desc muted">dropped <span class="mono"><%= d["file"] %></span> — <%= d["reason"] %></div>
-        <% end %>
-      </div>
-    <% end %>
-
-    <% if @run.status == :failed %>
-      <div class="empty">This run failed: <span class="mono"><%= @run.error %></span></div>
-    <% elsif @run.findings.empty? %>
-      <div class="empty">Nothing found in this window. Either traffic was clean, or the window was empty.</div>
-    <% else %>
-      <div class="card">
-        <ul class="history">
-          <% @run.findings.each do |f| %>
-            <li>
-              <span class="pill"><%= f["kind"] %></span>
-              <span class="mono">×<%= f["count"] %></span>
-              <span class="preview"><%= f["title"] %></span>
-              <% if f["detail"] %><div class="skill-desc muted"><%= f["detail"] %></div><% end %>
-              <% if Array(f["sessions"]).any? %>
-                <div class="skill-desc muted">
-                  <% Array(f["sessions"]).each do |sid| %>
-                    <a class="mono" href="/studio/sessions/<%= Rack::Utils.escape(sid) %>"><%= sid[0, 12] %></a>
-                  <% end %>
-                </div>
-              <% end %>
-            </li>
-          <% end %>
-        </ul>
-      </div>
-    <% end %>
-  <% end %>
-
-  <% if @runs.any? %>
-    <h2>Runs<span class="sub">most recent first</span></h2>
-    <div class="card">
-      <ul class="history">
-        <% @runs.each do |run| %>
-          <li>
-            <span class="pill <%= run.status == :failed ? 'err' : 'ok' %>"><%= run.status %></span>
-            <span class="mono"><%= run.id[0, 12] %></span>
-            <span class="preview muted">
-              <%= run.findings.size %> finding(s) ·
-              window <%= refinement_window(run.window) %> ·
-              <% if run.panel.size > 1 %><%= run.panel.size %> candidate(s) · <% end %>
-              <% if run.cost && run.cost["spent"].to_i.positive? %><%= run.cost["spent"] %> tokens · <% end %>
-              <%= run.started_at %>
-            </span>
-          </li>
-        <% end %>
-      </ul>
-    </div>
-  <% end %>
 <% end %>