insika 0.9.0 → 1.0.1

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

@@ -0,0 +1,243 @@
+<%# Refinement run detail — the DETAIL pane of the Refinement miller shell.
+    Full page (direct visit/refresh): the two-column shell — master run list
+    plus this pane. Turbo-Frame request (a row click, a Run/propose/resolve
+    POST's redirect): the pane alone, so the master's scroll state and
+    selection survive every interaction. @selected is a
+    Insika::RefinementStore::Run — its `status` picks what shows below the
+    findings: a gated proposal awaiting approval, what auto_apply already
+    changed, or why the gate refused. 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. %>
+<%# Roda renders with plain locals — no local_assigns hash (Rails-ism). %>
+<% frame_only = defined?(frame_only) && frame_only %>
+<% unless frame_only %>
+  <header class="page-head">
+    <div>
+      <nav class="crumbs"><a href="/studio/refinement">refinement</a></nav>
+      <h1>Refinement<span class="sub"><%= @agent || "no agent" %></span></h1>
+    </div>
+    <div class="head-actions">
+      <%== agent_filter_form("/studio/refinement", @agent) %>
+    </div>
+  </header>
+
+  <div class="drill" data-controller="list-filter">
+    <%== render("_refinement_master", locals: { active_id: @selected&.id }) %>
+<% end %>
+    <turbo-frame id="refinement-detail" class="drill-pane drill-detail">
+      <%# A frame response never sees the layout, so the flash strip lives here
+          too — without it, run/propose/resolve confirmations would vanish on
+          frame submits (the layout's copy only renders on full pages). %>
+      <% if request.env["HTTP_TURBO_FRAME"] == "refinement-detail" %>
+        <% if flash["error"] %><div class="flash err" role="alert"><%= flash["error"] %></div><% end %>
+        <% if flash["notice"] %><div class="flash ok" role="status"><%= flash["notice"] %></div><% end %>
+      <% end %>
+      <div class="drill-pane-head">
+        <div class="title">
+          <% if @selected %>
+            <strong>Conversation review</strong>
+            <span class="status <%= status_class(@selected.status) %>"><%= @selected.status %></span>
+            <span class="count">
+              <%= @selected.findings.size %> finding(s) · <%= refinement_window(@selected.window) %> ·
+              <%= refinement_elapsed(@selected) %>
+            </span>
+          <% else %>
+            <strong>No run yet</strong>
+            <span class="count">for <span class="mono"><%= @agent %></span></span>
+          <% end %>
+        </div>
+        <% if @agent %>
+          <form method="post" action="/studio/refinement" class="actions inline" data-turbo-frame="_top">
+            <%== csrf_tag %>
+            <input type="hidden" name="agent" value="<%= @agent %>">
+            <label class="check" 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="btn primary btn-sm" data-turbo-submits-with="Running…">Run</button>
+          </form>
+        <% end %>
+      </div>
+      <div class="drill-pane-body refinement-review">
+        <% if @agent.nil? %>
+          <div class="empty">No agents yet. Create one first — a refinement run reads an agent's own traffic.</div>
+        <% elsif @selected.nil? %>
+          <div class="empty">No run yet for <span class="mono"><%= @agent %></span>. Press Run to read the last conversations.</div>
+        <% else %>
+          <%# 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 @selected.status == :awaiting_approval %>
+            <div class="section">
+              <div class="section-head">
+                <h2>Proposal<span class="sub">gated · awaiting your approval</span></h2>
+              </div>
+              <div class="card">
+                <% cand = @selected.candidate || {} %>
+                <div class="skill-desc">
+                  <span class="pill ok">gate passed</span>
+                  <span class="mono"><%= @selected.gate["passed_cases"] %>/<%= @selected.gate["cases"] %> case(s)</span>
+                  <span class="muted">no regression against <%= @selected.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 @selected.panel.size > 1 %>
+                    <span class="muted">· best of <%= @selected.panel.size %> candidate(s)</span>
+                  <% end %>
+                  <% if @selected.cost && @selected.cost["spent"].to_i.positive? %>
+                    <span class="muted">· <%= @selected.cost["spent"] %> tokens<% if @selected.cost["cached"].to_i.positive? %>
+                      (<%= @selected.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" data-turbo-frame="_top">
+                  <%== csrf_tag %>
+                  <input type="hidden" name="agent" value="<%= @agent %>">
+                  <input type="hidden" name="run_id" value="<%= @selected.id %>">
+                  <label>
+                    Note
+                    <input type="text" name="note" placeholder="why (optional)">
+                  </label>
+                  <button type="submit" class="primary" name="decision" value="approved" data-turbo-submits-with="Applying…">Approve &amp; apply</button>
+                  <button type="submit" class="danger" name="decision" value="rejected" data-turbo-submits-with="Rejecting…">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 = @selected.panel.reject { |e| (e["candidate"] || {})["id"] == cand["id"] } %>
+              <% if losers.any? %>
+                <details class="card review-details">
+                  <summary>Also proposed <span class="muted">· scored and not chosen</span></summary>
+                  <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>
+                </details>
+              <% end %>
+            </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 @selected.status == :applied && (@selected.decision || {})["by"] == "auto_apply" %>
+            <div class="card">
+              <div class="skill-desc">
+                <span class="pill ok">auto-applied</span>
+                <span class="muted"><%= (@selected.decision || {})["note"] %> · <%= (@selected.decision || {})["at"] %></span>
+              </div>
+              <% Array((@selected.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 @selected.status == :rejected && @selected.gate.is_a?(Hash) && !@selected.gate_passed? %>
+            <div class="card">
+              <div class="skill-desc">
+                <span class="pill err">gate refused</span>
+                <span class="mono"><%= @selected.gate["reason"] %></span>
+              </div>
+              <% Array((@selected.candidate || {})["dropped"]).each do |d| %>
+                <div class="skill-desc muted">dropped <span class="mono"><%= d["file"] %></span> — <%= d["reason"] %></div>
+              <% end %>
+            </div>
+          <% end %>
+
+          <h2>Findings<span class="sub"><%= @selected.findings.size %> · <%= @selected.status %><% if @selected.excluded.to_i.positive? %> · <%= @selected.excluded %> turn(s) excluded<% end %> · <%= @selected.finished_at || @selected.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 @selected.status == :completed && @selected.findings.any? %>
+            <div class="card">
+              <form method="post" action="/studio/refinement/propose" class="actions" data-turbo-frame="_top">
+                <%== csrf_tag %>
+                <input type="hidden" name="agent" value="<%= @agent %>">
+                <input type="hidden" name="run_id" value="<%= @selected.id %>">
+                <button type="submit" class="primary" data-turbo-submits-with="Evaluating…">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 %>
+
+          <% if @selected.status == :failed %>
+            <div class="empty">This run failed: <span class="mono"><%= @selected.error %></span></div>
+          <% elsif @selected.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">
+                <% @selected.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 %>
+      </div>
+    </turbo-frame>
+<% unless frame_only %>
+  </div>
+<% end %>

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

@@ -8,95 +8,120 @@
 <%# Roda renders with plain locals — no local_assigns hash (Rails-ism). %>
 <% frame_only = defined?(frame_only) && frame_only %>
 <% unless frame_only %>
-  <header class="page-head">
+  <header class="page-head operation-head">
     <div>
-      <nav class="crumbs"><a href="/studio/chats">chats</a> / <span>session</span></nav>
-      <h1>Session
-        <span class="copy-id" data-controller="clipboard" data-clipboard-text-value="<%= @session.id %>">
-          <span class="mono"><%= @session.id[0, 16] %></span>
-          <button type="button" class="copy-btn" data-clipboard-target="button" data-action="clipboard#copy" aria-label="Copy full session id">copy id</button>
-        </span>
-        <span class="sub"><%= Array(@session.messages).size %> message(s) · updated <%= @session.updated_at %></span>
-      </h1>
+      <nav class="crumbs"><a href="/studio/chats<%= @agent ? "?agent=#{Rack::Utils.escape(@agent)}" : "" %>">chats</a></nav>
+      <h1>Chats<span class="sub">Read the conversation and its history</span></h1>
+    </div>
+    <div class="head-actions">
+      <a class="btn primary" href="/studio/playground">New conversation</a>
     </div>
-    <a class="btn" href="/studio/playground?session_id=<%= Rack::Utils.escape(@session.id) %>">Continue in playground →</a>
   </header>
 
-  <div class="drill" data-controller="list-filter">
-    <aside class="drill-pane drill-master">
-      <div class="drill-pane-head">
-        <div class="title"><strong>Conversations <span class="count"><%= @sessions.size %></span></strong></div>
-      </div>
-      <div class="drill-search">
-        <input type="search" class="filter-input" placeholder="Filter conversations…" aria-label="Filter conversations"
-               data-list-filter-target="query" data-action="input->list-filter#filter keydown->list-filter#clear">
-      </div>
-      <nav class="drill-pane-body drill-list" aria-label="conversations" data-controller="active-link">
-        <% @sessions.each do |s| %>
-          <a class="drill-item<%== ' active' if s.id == @session.id %>"
-             href="/studio/sessions/<%= Rack::Utils.escape(s.id) %>"
-             data-turbo-frame="session-detail" data-turbo-action="advance"
-             data-list-filter-target="item" data-filter-text="<%= s.id %> <%= session_preview(s) %>"
-             data-active-link-target="item" data-action="click->active-link#select">
-            <div class="drill-item-name"><span class="txt mono"><%= s.id[0, 18] %></span></div>
-            <div class="drill-item-sub"><%= Array(s.messages).size %> msg · <%= time_ago(s.updated_at) %></div>
-          </a>
-        <% end %>
-      </nav>
-    </aside>
+  <div class="drill operation-workspace" data-controller="list-filter">
+    <%== render("_chats_master", locals: { active_id: @session.id }) %>
 <% end %>
-    <turbo-frame id="session-detail" class="drill-pane drill-detail session-pane">
+    <turbo-frame id="session-detail" class="drill-pane drill-detail session-pane operation-detail">
       <div class="session-columns">
         <%# ── Center: the transcript ───────────────────────────────────── %>
-        <section class="session-transcript" aria-label="transcript">
+        <%# live-transcript (T11): the SAME SSE island the playground uses,
+            scoped to THIS session — a turn landing on it while an operator has
+            it open here streams in live, right alongside the replayed history
+            below. The controller lives on THIS section, not the outer
+            turbo-frame: a row click in the master re-renders this whole
+            section from scratch (Turbo's default frame swap replaces the
+            frame's content wholesale, no morphing configured anywhere in this
+            app — see live_transcript_reconnect.test.mjs), so Stimulus tears
+            down the old controller (closing its EventSource) and boots a
+            fresh one scoped to the newly-selected session_id. Putting the
+            controller on the turbo-frame element itself would defeat this:
+            that element persists across the swap, so its session-value would
+            change under a live controller instance with no valueChanged
+            callback to notice — the stream would keep serving the PREVIOUS
+            session. %>
+        <section class="session-transcript" aria-label="transcript"
+                 data-controller="live-transcript"
+                 data-live-transcript-session-value="<%= @session.id %>"
+                 data-live-transcript-why-value="/studio/sessions/<%= Rack::Utils.escape(@session.id) %>">
           <%# Session markers in the margin: start, agent,
               shape — ghost pills, right-aligned, from data the view already
               has. %>
           <% first_at = Array(@session.messages).first&.[]("at") %>
           <% marker_agent = session_agent(@session) %>
+          <header class="operation-summary">
+            <div class="section-head">
+              <h2><%= presence(session_customer_label(@session)) || "Conversation" %></h2>
+              <p class="muted"><%= marker_agent.empty? ? "No agent recorded" : marker_agent %><% if (phone = session_customer_phone(@session)) %> · <%= phone %><% end %> · <%= Array(@session.messages).size %> messages</p>
+            </div>
+            <div class="actions">
+              <span class="copy-id" data-controller="clipboard" data-clipboard-text-value="<%= @session.id %>">
+                <button type="button" class="copy-btn" data-clipboard-target="button" data-action="clipboard#copy" aria-label="Copy full session id">copy id</button>
+              </span>
+              <span class="pill info" data-live-transcript-target="status" role="status">connecting…</span>
+              <a class="btn btn-sm" href="/studio/playground?session_id=<%= Rack::Utils.escape(@session.id) %>" data-turbo-frame="_top">Continue in playground</a>
+              <%# Narrow screens: the metadata margin is a popover drawer (no JS — the
+                  Popover API toggles it, Esc and a click outside close it). %>
+              <button type="button" class="btn btn-sm details-toggle" popovertarget="session-details">Details</button>
+            </div>
+          </header>
           <div class="marker-row">
-            <% unless short_time(first_at).empty? %><span class="ghost-pill">session · <%= short_time(first_at) %></span><% end %>
             <% unless marker_agent.empty? %><span class="ghost-pill">agent · <%= marker_agent %></span><% end %>
-            <span class="ghost-pill"><%= Array(@session.messages).size %> messages</span>
+            <% unless short_time(first_at).empty? %><span class="ghost-pill">session · <%= short_time(first_at) %></span><% end %>
+            <span class="ghost-pill">updated <%= time_ago(@session.updated_at) %></span>
           </div>
 
-          <% if Array(@session.messages).empty? %>
-            <div class="empty">This session has no messages.</div>
-          <% else %>
-            <div class="thread">
-              <%# A skill loaded by the model shows up here on its own: load_skill is a tool,
-                  so its body is a persisted `role: tool` message. A skill injected by CONTEXT
-                  (triggers/skills_eager) is part of the system prompt — never a message — so
-                  the thread had no trace of it at all. Synthesized from the context trace so
-                  both activation paths read the same way in the transcript.
+          <div class="thread" data-live-transcript-target="stream">
+            <%# A skill loaded by the model shows up here on its own: load_skill is a tool,
+                so its body is a persisted `role: tool` message. A skill injected by CONTEXT
+                (triggers/skills_eager) is part of the system prompt — never a message — so
+                the thread had no trace of it at all. Synthesized from the context trace so
+                both activation paths read the same way in the transcript.
 
-                  Placed by TIME, not by counting turns: every message of a turn is persisted
-                  together at the end of it, and the context stage always runs before that, so
-                  each entry lands at the top of its own turn. Ordinal counting would drift on
-                  a steered message (one that joins a turn already running). A message with no
-                  `at` (older sessions) simply flushes nothing. %>
-              <% pending = (@context_traces || [])
-                           .select { |c| Array((c["categories"] || {}).dig("skilltrigger", "labels")).any? }
-                           .sort_by { |c| c["at"].to_s } %>
-              <% Array(@session.messages).each_with_index do |m, i| %>
-                <% while (entry = pending.first) && !m["at"].to_s.empty? && entry["at"].to_s <= m["at"].to_s %>
-                  <% pending.shift %>
-                  <% labels = Array(entry["categories"]["skilltrigger"]["labels"]).uniq %>
-                  <details class="toolcard skill">
-                    <summary><%== chip_icon(:skill) %><strong>skills · <%= skill_mode(labels) %> (<%= labels.length %>)</strong><span class="at"><%= entry["at"] %></span></summary>
-                    <pre><%= labels.map { |l| skill_label(l) }.join("\n") %></pre>
-                  </details>
-                <% end %>
-                <%# `prev` is what makes a STEERED message visible: a customer message that lands
-                    right after a tool result arrived mid-run. See _message.erb. %>
-                <%== render("_message", locals: { m: m, prev: i.positive? ? @session.messages[i - 1] : nil }) %>
+                Placed by TIME, not by counting turns: every message of a turn is persisted
+                together at the end of it, and the context stage always runs before that, so
+                each entry lands at the top of its own turn. Ordinal counting would drift on
+                a steered message (one that joins a turn already running). A message with no
+                `at` (older sessions) simply flushes nothing. %>
+            <% pending = (@context_traces || [])
+                         .select { |c| Array((c["categories"] || {}).dig("skilltrigger", "labels")).any? }
+                         .sort_by { |c| c["at"].to_s } %>
+            <% Array(@session.messages).each_with_index do |m, i| %>
+              <% while (entry = pending.first) && !m["at"].to_s.empty? && entry["at"].to_s <= m["at"].to_s %>
+                <% pending.shift %>
+                <% labels = Array(entry["categories"]["skilltrigger"]["labels"]).uniq %>
+                <details class="toolcard skill">
+                  <summary><%== chip_icon(:skill) %><strong>skills · <%= skill_mode(labels) %> (<%= labels.length %>)</strong><span class="at"><%= entry["at"] %></span></summary>
+                  <pre><%= labels.map { |l| skill_label(l) }.join("\n") %></pre>
+                </details>
               <% end %>
-            </div>
-          <% end %>
+              <%# `prev` is what makes a STEERED message visible: a customer message that lands
+                  right after a tool result arrived mid-run. See _message.erb. %>
+              <%== render("_message", locals: { m: m, prev: i.positive? ? @session.messages[i - 1] : nil,
+                                                review: { path: "/studio/sessions/#{Rack::Utils.escape_path(@session.id)}/guardrail", message: i } }) %>
+              <% if (w = @why && @why[i]) %><%== render("_why", locals: { w: w, sid: @session.id, index: i }) %><% end %>
+            <% end %>
+          </div>
+          <div class="empty" data-live-transcript-target="empty"<%== ' hidden' unless Array(@session.messages).empty? %>>This session has no messages.</div>
         </section>
 
         <%# ── Right margin: the session's metadata ──────────────────────── %>
-        <aside class="session-margin" aria-label="session metadata">
+        <div class="col-resize" role="separator" aria-orientation="vertical" aria-label="Resize details" tabindex="0"
+             data-controller="col-resize" data-col-resize-key-value="session-details" data-col-resize-side-value="next"
+             data-action="pointerdown->col-resize#start keydown->col-resize#key dblclick->col-resize#reset"></div>
+        <aside class="session-margin" id="session-details" popover aria-label="session metadata">
+          <button type="button" class="btn btn-sm details-close" popovertarget="session-details" popovertargetaction="hide">Close</button>
+          <%# Who this conversation is with — the vars the caller sent, plus how
+              many conversations share the customer key (a link to them). %>
+          <% customer = presence(session_customer(@session)) %>
+          <% if customer %>
+            <div class="card">
+              <div class="trace-head"><h2>Customer</h2></div>
+              <div class="kv"><span>key</span><div class="mono"><%= customer %></div></div>
+              <% if (name = presence(session_customer_label(@session))) && name != customer %><div class="kv"><span>name</span><div><%= name %></div></div><% end %>
+              <% if (phone = session_customer_phone(@session)) %><div class="kv"><span>phone</span><div><%= phone %></div></div><% end %>
+              <div class="kv"><span>chats</span><div><a href="/studio/chats?q=<%= Rack::Utils.escape(customer) %>" data-turbo-frame="_top"><%= customer_chat_count(customer) %> conversation(s)</a></div></div>
+            </div>
+          <% end %>
           <% briefing = @session.respond_to?(:briefing) ? (@session.briefing || {}) : {} %>
           <% fields = briefing["fields"] || {} %>
           <% next_step = briefing["next_step"] %>
@@ -105,22 +130,50 @@
               <div class="trace-head">
                 <h2>Briefing</h2>
               </div>
+              <% if next_step %>
+                <p class="operation-next"><span class="muted">next step</span><br><strong><%= next_step %></strong></p>
+              <% end %>
               <% fields.sort.each do |name, value| %>
                 <div class="kv"><span><%= name %></span><div><%= value %></div></div>
               <% end %>
-              <% if next_step %>
-                <div class="kv"><span>next step</span><div><%= next_step %></div></div>
-              <% end %>
             </div>
           <% end %>
 
-          <% ctx_traces = @context_traces || [] %>
-          <% unless ctx_traces.empty? %>
-            <div class="card tooltrace">
+          <%# the session's stage history — outcomes folded to the agent's
+              declared stages (unmapped kinds render the raw outcome: the hole is visible).
+              Without a declaration the block renders the raw outcomes. %>
+          <% history = @stage_history || {} %>
+          <% unless history.empty? %>
+            <div class="card">
               <div class="trace-head">
-                <h2>Context</h2>
-                <span class="muted">tokens by category per turn (estimated)</span>
+                <h2>Stage history</h2>
+                <span class="muted">
+                  <% if history[:declaration] %>
+                    <%= history[:declaration].stages.join(" → ") %> · outcome funnel
+                  <% else %>
+                    no funnel declared — raw outcomes
+                  <% end %>
+                </span>
+              </div>
+              <div class="kv">
+                <% history[:rows].each do |row| %>
+                  <% if row[:stage] %>
+                    <span><%= row[:outcome] %></span>
+                    <div>→ <strong><%= row[:stage] %></strong> <span class="lat"><%= row[:at] %></span></div>
+                  <% else %>
+                    <span><%= row[:outcome] %></span>
+                    <div><span class="lat">not a declared stage</span> <span class="lat"><%= row[:at] %></span></div>
+                  <% end %>
+                <% end %>
               </div>
+            </div>
+          <% end %>
+
+          <% ctx_traces = @context_traces || [] %>
+          <% unless ctx_traces.empty? %>
+            <details class="card tooltrace operation-diagnostics">
+              <summary>Context <span class="muted">· <%= ctx_traces.size %> turns</span></summary>
+              <p class="muted">Estimated tokens by category for each turn.</p>
               <% ctx_traces.each do |c| %>
                 <div class="trace-turn">
                   <div class="turn-label">turn <%= c["turn"] %> · <%= c["at"] %></div>
@@ -169,20 +222,29 @@
                   </details>
                 </div>
               <% end %>
-            </div>
+            </details>
           <% end %>
 
-          <% traces = @tool_traces || {} %>
+          <% traces = @tool_traces || [] %>
           <% unless traces.empty? %>
-            <div class="card tooltrace">
-              <div class="trace-head">
-                <h2>Tool calls</h2>
-                <span class="muted">debug — args + response, masked</span>
-              </div>
-              <% traces.keys.sort.each do |turn| %>
+            <% errors = traces.flatten.count { |trace| !trace["ok"] || trace["gate"] } %>
+            <details class="card tooltrace operation-diagnostics">
+              <summary>Tool calls <span class="muted">· <%= traces.sum(&:size) %></span><% if errors.positive? %> <span class="status err"><%= errors %> failed or blocked</span><% end %></summary>
+              <p class="muted">Arguments and responses are masked.</p>
+              <% traces.each do |group| %>
                 <div class="trace-turn">
-                  <div class="turn-label">turn <%= turn %></div>
-                  <% traces[turn].each do |t| %>
+                  <div class="turn-label">turn <%= group.first["turn"] %></div>
+                  <%# Waterfall: when each call ran inside the turn (SVG geometry, CSP-safe). %>
+                  <% bars = trace_waterfall(group) %>
+                  <% if bars.size > 1 %>
+                    <svg class="waterfall" viewBox="0 0 100 <%= bars.size * 6 %>" preserveAspectRatio="none" role="img"
+                         aria-label="<%= bars.map { |b| "#{b[:tool]} #{b[:ms]}ms" }.join(", ") %>">
+                      <% bars.each_with_index do |b, i| %>
+                        <rect class="<%= b[:ok] ? "ok" : "err" %>" x="<%= b[:x] %>" y="<%= i * 6 + 1 %>" width="<%= b[:w] %>" height="4" rx="0.6"><title><%= b[:tool] %> · <%= b[:ms] %>ms</title></rect>
+                      <% end %>
+                    </svg>
+                  <% end %>
+                  <% group.each do |t| %>
                     <details class="trace-item <%= t["ok"] ? "ok" : "err" %>">
                       <summary>
                         <span class="badge"><%= t["gate"] ? "blocked: #{t["gate"]}" : (t["ok"] ? "ok" : "error") %></span>
@@ -190,6 +252,9 @@
                         <span class="lat"><%= t["ms"] %>ms</span>
                         <span class="at"><%= t["at"] %></span>
                       </summary>
+                      <% if (loaded = loaded_skill_name(t)) %>
+                        <div class="kv"><span>skill</span><a class="mono" href="/studio/skills/<%= Rack::Utils.escape(loaded) %>" data-turbo-frame="_top"><%= loaded %></a></div>
+                      <% end %>
                       <div class="kv"><span>args</span>
                         <div class="copywrap" data-controller="clipboard">
                           <button type="button" class="copy-btn" data-clipboard-target="button" data-action="clipboard#copy">copy</button>
@@ -206,37 +271,7 @@
                   <% end %>
                 </div>
               <% end %>
-            </div>
-          <% end %>
-
-          <%# the session's stage history — outcomes folded to the agent's
-              declared stages (unmapped kinds render the raw outcome: the hole is visible).
-              Without a declaration the block renders the raw outcomes. %>
-          <% history = @stage_history || {} %>
-          <% unless history.empty? %>
-            <div class="card">
-              <div class="trace-head">
-                <h2>Stage history</h2>
-                <span class="muted">
-                  <% if history[:declaration] %>
-                    <%= history[:declaration].stages.join(" → ") %> · outcome funnel
-                  <% else %>
-                    no funnel declared — raw outcomes
-                  <% end %>
-                </span>
-              </div>
-              <div class="kv">
-                <% history[:rows].each do |row| %>
-                  <% if row[:stage] %>
-                    <span><%= row[:outcome] %></span>
-                    <div>→ <strong><%= row[:stage] %></strong> <span class="lat"><%= row[:at] %></span></div>
-                  <% else %>
-                    <span><%= row[:outcome] %></span>
-                    <div><span class="lat">not a declared stage</span> <span class="lat"><%= row[:at] %></span></div>
-                  <% end %>
-                <% end %>
-              </div>
-            </div>
+            </details>
           <% end %>
         </aside>
       </div>