insika 0.3.0 → 0.7.0

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

@@ -1,67 +1,80 @@
+<%# Agents — miller columns: master list | detail frame. A row
+    click loads the detail beside the list (no full page load) and advances the
+    URL. The detail pane's landing state hosts the template gallery and the
+    create form; both submit to the top window so the fresh master list
+    renders with the new agent in it. %>
 <header class="page-head">
   <h1>Agents<span class="sub"><%= @agents.size %> configured · one agent each</span></h1>
   <a class="btn primary" href="/studio/playground">Open playground →</a>
 </header>
 
-<% if @agents.empty? %>
-  <div class="empty">No agents yet. Create your first agent below (id + model), then give it an identity on its detail page.</div>
-<% else %>
-  <div data-controller="list-filter">
-    <div class="filter-bar">
-      <input type="search" class="filter-input" placeholder="Filter agents by id, model or provider…" aria-label="Filter agents"
-             data-list-filter-target="query" data-action="input->list-filter#filter keydown->list-filter#clear">
-      <span class="filter-count mono muted" data-list-filter-target="count"></span>
+<div class="drill" data-controller="list-filter">
+  <%== render("_agents_master", locals: { active_id: nil, show_outcomes: true }) %>
+
+  <turbo-frame id="agent-detail" class="drill-pane drill-detail">
+    <div class="drill-pane-head">
+      <div class="title">
+        <strong>Pick an agent</strong>
+        <span class="count">select on the left, or start a new one below</span>
+      </div>
     </div>
-  <div class="agent-grid">
-    <% @agents.each do |a| %>
-      <article class="card agent" data-list-filter-target="item" data-filter-text="<%= a.id %> <%= a.model %> <%= a.provider %>">
-        <a class="agent-head" href="/studio/agents/<%= Rack::Utils.escape(a.id) %>">
-          <span class="avatar <%= avatar_class(a.id) %>"><%= a.id[0, 2].upcase %></span>
-          <div>
-            <div class="agent-id"><%= a.id %></div>
-            <div class="muted mono"><%= a.model %><%== " · #{h(a.provider)}" if a.provider %></div>
+    <div class="drill-pane-body">
+      <% if @templates&.any? %>
+        <div class="section">
+          <div class="section-head">
+            <h2>From template</h2>
+            <p class="muted">Example agents shipped in the gem — pick one to see a working pattern, then edit it like any agent.</p>
+          </div>
+          <div class="template-grid">
+            <% @templates.each do |t| %>
+              <article class="card template">
+                <div class="template-head">
+                  <strong><%= t.title %></strong>
+                  <span class="pill info"><%= t.trail %></span>
+                </div>
+                <p class="muted"><%= t.description %></p>
+                <% if t.capabilities.any? %>
+                  <p class="mono muted template-caps"><%= t.capabilities.join(" · ") %></p>
+                <% end %>
+                <% if t.studio? %>
+                  <form method="post" action="/studio/agents/from_template/<%= Rack::Utils.escape(t.name) %>" data-turbo-frame="_top">
+                    <%== csrf_tag %>
+                    <button type="submit" class="btn" data-turbo-submits-with="Creating…">Create</button>
+                  </form>
+                <% else %>
+                  <p class="muted">CLI-only for now — run <code>insika new <%= t.name %></code>.</p>
+                <% end %>
+              </article>
+            <% end %>
           </div>
-          <% if a.memory %><span class="pill info">memory</span><% end %>
-          <% if (latest = @latest_outcomes&.dig(a.id)) %>
-            <span class="pill <%= latest[:outcome] == "conversion" ? "ok" : "warn" %>"
-                  title="last outcome recorded via /v1/outcomes"><%= latest[:outcome] %><%== format(" · R$ %0.2f", latest[:value]) if latest[:value] && latest[:value].positive? %></span>
-          <% end %>
-        </a>
-        <dl class="agent-meta">
-          <div><dt>tools</dt><dd><%= a.tools_allow.nil? ? "all" : a.tools_allow.size %></dd></div>
-          <div><dt>skills</dt><dd><%= a.skills.nil? ? "all" : Array(a.skills).size %></dd></div>
-          <div><dt>prompts</dt><dd><%= Array(a.prompt_files).size %></dd></div>
-        </dl>
-        <div class="agent-actions">
-          <a class="btn" href="/studio/agents/<%= Rack::Utils.escape(a.id) %>">Edit</a>
-          <a class="btn ghost" href="/studio/playground?agent=<%= Rack::Utils.escape(a.id) %>">Test</a>
         </div>
-      </article>
-    <% end %>
-  </div>
-    <div class="empty" data-list-filter-target="empty" hidden>No agents match your filter.</div>
-  </div>
-<% end %>
+      <% end %>
 
-<details class="card newfile"<%== " open" if @agents.empty? %>>
-  <summary>+ new agent</summary>
-  <form method="post" action="/studio/agents">
-    <%== csrf_tag %>
-    <div class="grid-2">
-      <label>id <span class="muted">(unique slug, e.g. demo)</span>
-        <input type="text" name="id" placeholder="demo" required>
-      </label>
-      <label>model
-        <input type="text" name="model" placeholder="deepseek-v4-flash" required>
-      </label>
+      <div class="section">
+        <div class="section-head">
+          <h2>New agent</h2>
+          <p class="muted">id + model — give it an identity on its detail page.</p>
+        </div>
+        <form method="post" action="/studio/agents" data-turbo-frame="_top">
+          <%== csrf_tag %>
+          <div class="grid-2">
+            <label>id <span class="muted">(unique slug, e.g. demo)</span>
+              <input type="text" name="id" placeholder="demo" required>
+            </label>
+            <label>model
+              <input type="text" name="model" placeholder="deepseek-v4-flash" required>
+            </label>
+          </div>
+          <label>provider <span class="muted">(optional)</span>
+            <input type="text" name="provider" placeholder="deepseek">
+          </label>
+          <label class="check">
+            <input type="checkbox" name="memory" value="1" checked>
+            cross-session memory (the agent remembers across conversations)
+          </label>
+          <div class="actions"><button type="submit" class="primary" data-turbo-submits-with="Creating…">Create agent</button></div>
+        </form>
+      </div>
     </div>
-    <label>provider <span class="muted">(optional)</span>
-      <input type="text" name="provider" placeholder="deepseek">
-    </label>
-    <label class="check">
-      <input type="checkbox" name="memory" value="1" checked>
-      cross-session memory (the agent remembers across conversations)
-    </label>
-    <div class="actions"><button type="submit" class="primary" data-turbo-submits-with="Creating…">Create agent</button></div>
-  </form>
-</details>
+  </turbo-frame>
+</div>

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

@@ -0,0 +1,23 @@
+<%# the artifact preview page. The content renders ONLY inside a SANDBOXED
+   iframe (no scripts, no same-origin, no forms) on top of the content
+   route's own restrictive CSP — artifact content is LLM output, untrusted. %>
+<header class="page-head">
+  <div>
+    <nav class="crumbs"><a href="/studio/artifacts">Artifacts</a></nav>
+    <h1><%= @artifact.title %><span class="sub"><span class="mono"><%= @artifact.id %></span> · <%= @artifact.mime %> · <%= @artifact.created_at %></span></h1>
+  </div>
+  <div class="head-actions">
+    <% if @signed_url %>
+      <button type="button" class="btn sm" data-copy="<%= @signed_url %>">copy signed link</button>
+    <% end %>
+    <a class="btn sm ghost" href="<%= @content_url %>" target="_blank" rel="noopener">open raw</a>
+    <form method="post" action="/studio/artifacts/<%= Rack::Utils.escape_path(@artifact.id) %>/delete" class="inline">
+      <%== csrf_tag %>
+      <button class="btn sm ghost danger">delete</button>
+    </form>
+  </div>
+</header>
+
+<div class="card artifact-frame">
+  <iframe sandbox src="<%= @content_url %>" title="<%= @artifact.title %>"></iframe>
+</div>

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

@@ -0,0 +1,59 @@
+<%# the Artifacts page: the report destination. Reads the ArtifactStore
+   directly (the listing IS the history); the only mutation — delete —
+   dispatches :delete_artifact on the bus. The preview is a sandboxed iframe
+   on top of the content route's own restrictive CSP. %>
+<header class="page-head">
+  <div>
+    <nav class="crumbs"><span>operate</span></nav>
+    <h1>Artifacts<span class="sub">the report destination — saved pages, per agent</span></h1>
+  </div>
+  <div class="head-actions">
+    <%== agent_filter_form("/studio/artifacts", @agent) %>
+  </div>
+</header>
+
+<% if @artifacts.empty? %>
+  <div class="empty">
+    <% if @agent %>
+      No artifacts for <span class="mono"><%= @agent %></span> — an agent that
+      has <span class="mono">save_artifact</span> in its <span class="mono">tools_allow</span>
+      writes its reports here.
+    <% else %>
+      No artifacts yet, for any agent.
+    <% end %>
+  </div>
+<% else %>
+  <h2><%= @agent || "all agents" %><span class="sub"><%= @artifacts.size %> artifact(s)</span></h2>
+  <div class="card">
+    <table class="grid">
+      <thead>
+        <tr>
+          <% unless @agent %><th>agent</th><% end %>
+          <th>title</th><th>mime</th><th>task</th><th>created_at</th><th></th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @artifacts.each do |a| %>
+          <tr>
+            <% unless @agent %><td class="mono"><%= a.agent %></td><% end %>
+            <td><a href="/studio/artifacts/<%= Rack::Utils.escape_path(a.id) %>"><%= a.title %></a></td>
+            <td><span class="pill"><%= a.mime %></span></td>
+            <td class="mono"><%= a.task_id %></td>
+            <td class="mono"><%= a.created_at %></td>
+            <td class="row-actions">
+              <% if @signed_available %>
+                <button type="button" class="btn ghost sm" data-copy="<%= signed_artifact_url(a.id) %>">copy link</button>
+              <% end %>
+              <form method="post" action="/studio/artifacts/<%= Rack::Utils.escape_path(a.id) %>/delete"
+                    class="inline" data-confirm="Delete this artifact?">
+                <%== csrf_tag %>
+                <input type="hidden" name="agent" value="<%= a.agent %>">
+                <button class="btn ghost sm danger">delete</button>
+              </form>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+<% end %>

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

@@ -28,8 +28,8 @@
         <div class="nav-label"><%= agent %></div>
         <% cases.each do |g| %>
           <a class="drill-item<%== ' active' if @case && @case.id == g.id %>" href="/studio/evals?id=<%= Rack::Utils.escape(g.id) %>">
-            <div class="drill-item-name"><span class="txt mono"><%= g.id %></span><% if g.rubric.to_s.strip.empty? %><span class="pill info plain">no rubric</span><% end %></div>
-            <div class="drill-item-sub"><%= g.user_turns.first %></div>
+            <div class="drill-item-name"><span class="txt mono"><%= g.id %></span><% if g.rubric.to_s.strip.empty? %><span class="pill info plain">no rubric</span><% end %><% if g.simulated? %><span class="pill accent plain">simulated</span><% end %></div>
+            <div class="drill-item-sub"><%= g.opens_with.to_s %></div>
           </a>
         <% end %>
       <% end %>

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

@@ -12,7 +12,7 @@
     <form method="get" action="/studio/facts" class="actions inline">
       <label>
         Agent / scope
-        <select name="agent" onchange="this.form.submit()">
+        <select name="agent" data-controller="auto-submit" data-action="change->auto-submit#submit">
           <option value="">all</option>
           <% @stores.each do |scope| %>
             <option value="<%= scope %>"<%== ' selected' if scope == @filter %>><%= scope %></option>

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

@@ -13,7 +13,7 @@
     <form method="get" action="/studio/funnel" class="actions inline">
       <label>
         Period (days)
-        <select name="period" onchange="this.form.submit()">
+        <select name="period" data-controller="auto-submit" data-action="change->auto-submit#submit">
           <% [7, 30, 90].each do |p| %>
             <option value="<%= p %>"<%== ' selected' if @period == p %>><%= p %></option>
           <% end %>

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

@@ -1,73 +1,112 @@
-<%# Overview home (T3): stat cards + activity chart + recent conversations.
-   All from data the Studio already reads; charts are inline SVG (geometry via
-   attributes, fill via stylesheet — CSP-safe, no inline style). %>
-<header class="page-head">
-  <div>
-    <h1>Overview<span class="sub">at a glance</span></h1>
-  </div>
-  <div class="head-actions">
-    <%== agent_filter_form("/studio/home", @agent) %>
-    <span class="pill <%= @active_now.positive? ? "ok online" : "info" %> plain"><%= @active_now %> active now</span>
-    <a class="btn primary" href="/studio/playground">Open playground →</a>
-  </div>
-</header>
-
-<div class="stat-cards">
-  <% [["conversations", "Conversations"], ["messages", "Messages"], ["agents", "Agents"],
-      ["skills", "Skills"], ["tools", "Tools"], ["providers", "LLM providers"]].each do |key, label| %>
-    <div class="stat-card">
-      <div class="stat-num"><%= @counts[key] %></div>
-      <div class="stat-label"><%= label %></div>
+<%# Overview home: stat cards + activity chart + recent
+    conversations, all LIVE over the existing SSE channel (live_home_controller
+    subscribes to /studio/events; the server-rendered numbers are its baseline).
+    Charts are inline SVG (geometry via attributes, fill via stylesheet —
+    CSP-safe, no inline style). %>
+<div data-controller="live-home" data-live-home-active-value="<%= @active_now %>">
+  <header class="page-head">
+    <div>
+      <h1>Overview<span class="sub">at a glance</span></h1>
     </div>
-  <% end %>
-</div>
-
-<div class="home-grid">
-  <section class="card home-activity">
-    <div class="section-head">
-      <h2>Activity</h2>
-      <span class="muted">conversations touched · last 14 days</span>
-    </div>
-    <% max = [@activity.map(&:last).max || 0, 1].max %>
-    <svg class="barchart" viewBox="0 0 700 176" preserveAspectRatio="none" role="img" aria-label="conversations per day, last 14 days">
-      <% n = @activity.size; slot = 700.0 / n; bw = slot * 0.58 %>
-      <% @activity.each_with_index do |(d, c), i| %>
-        <% h = (c.to_f / max) * 150.0; x = (i * slot) + ((slot - bw) / 2.0); y = 160.0 - h %>
-        <rect class="bar<%== ' bar-empty' if c.zero? %>" x="<%= format('%.1f', x) %>" y="<%= format('%.1f', c.zero? ? 157.0 : y) %>"
-              width="<%= format('%.1f', bw) %>" height="<%= format('%.1f', c.zero? ? 3.0 : [h, 3.0].max) %>" rx="2">
-          <title><%= d.strftime('%b %-d') %> · <%= c %> conversation<%= 's' unless c == 1 %></title>
-        </rect>
-      <% end %>
-      <line class="barchart-axis-line" x1="0" y1="160" x2="700" y2="160" />
-    </svg>
-    <div class="barchart-axis">
-      <span><%= @activity.first&.first&.strftime('%b %-d') %></span>
-      <span class="peak">peak <%= max %>/day</span>
-      <span><%= @activity.last&.first&.strftime('%b %-d') %></span>
+    <div class="head-actions">
+      <%== agent_filter_form("/studio/home", @agent) %>
+      <%# "active now" — conversations touched in the last 5 minutes (the same
+          number render_home computes). The ring spins while anything is hot;
+          the ago label tracks the last event the page has seen. %>
+      <span class="live-badge<%= @active_now.positive? ? " hot" : "" %>" title="conversations touched in the last 5 minutes">
+        <svg viewBox="0 0 16 16" aria-hidden="true"><circle class="ring" cx="8" cy="8" r="6.5"/></svg>
+        <b class="tnum" data-live-home-target="count"><%= @active_now %></b> active now
+        <span class="live-ago muted" data-live-home-target="ago"></span>
+      </span>
+      <a class="btn primary" href="/studio/playground">Open playground →</a>
     </div>
-  </section>
+  </header>
 
-  <section class="card home-recent">
-    <div class="section-head">
-      <h2>Recent conversations</h2>
-      <a class="muted" href="/studio/chats">all →</a>
-    </div>
-    <% if @recent.empty? %>
-      <div class="empty">No conversations yet. Start one in the <a href="/studio/playground">playground</a>.</div>
-    <% else %>
-      <ul class="convo-rail">
-        <% @recent.each do |s| %>
-          <li>
-            <a href="/studio/sessions/<%= Rack::Utils.escape(s.id) %>">
-              <span class="avatar sm <%= avatar_class(s.id) %>"><%= s.id[0, 2].upcase %></span>
-              <span class="convo-main">
-                <span class="convo-id mono"><%= s.id[0, 20] %></span>
-                <span class="convo-sub"><%= Array(s.messages).size %> msg · <%= time_ago(s.updated_at) %></span>
-              </span>
-            </a>
-          </li>
+  <div class="stat-cards">
+    <% [["conversations", "Conversations", @conv_trend],
+        ["messages", "Messages", @msg_trend],
+        ["agents", "Agents", nil],
+        ["skills", "Skills", nil],
+        ["tools", "Tools", nil],
+        ["providers", "LLM providers", nil]].each do |key, label, trend| %>
+      <div class="stat-card">
+        <div class="stat-num tnum"><%= @counts[key] %></div>
+        <div class="stat-label"><%= label %><% if trend && !trend.zero? %>
+          <span class="trend <%= trend.positive? ? "up" : "down" %>" title="vs yesterday"><%= trend.positive? ? "+" : "−" %><%= trend.abs %></span>
+        <% end %></div>
+      </div>
+    <% end %>
+  </div>
+
+  <div class="home-grid">
+    <section class="card home-activity">
+      <div class="section-head">
+        <h2>Activity</h2>
+        <span class="muted">conversations touched · last 14 days</span>
+      </div>
+      <%# 24h sparkline: area-fill + 1.5px line over the hourly
+          series; same session scan, finer buckets. Geometry via attributes,
+          colors via classes — CSP-safe like the barchart below. %>
+      <% s_max = [@activity_24h.map(&:last).max || 0, 1].max %>
+      <% s_n = @activity_24h.size %>
+      <% s_pts = @activity_24h.each_with_index.map do |(_t, c), i|
+           [i * (480.0 / (s_n - 1)), 44.0 - (c.to_f / s_max) * 36.0]
+         end %>
+      <% s_line = s_pts.map { |x, y| format("%.1f,%.1f", x, y) }.join(" ") %>
+      <div class="sparkline-strip">
+        <div class="sparkline-meta">
+          <b class="tnum"><%= @activity_24h.sum { |_t, c| c } %></b> conversations · last 24h
+        </div>
+        <svg class="sparkline" viewBox="0 0 480 48" preserveAspectRatio="none" role="img"
+             aria-label="conversations per hour, last 24 hours">
+          <polygon class="spark-area" points="<%= s_line %> 480,48 0,48"/>
+          <polyline class="spark-line" points="<%= s_line %>" vector-effect="non-scaling-stroke"/>
+        </svg>
+      </div>
+      <% max = [@activity.map(&:last).max || 0, 1].max %>
+      <svg class="barchart" viewBox="0 0 700 176" preserveAspectRatio="none" role="img" aria-label="conversations per day, last 14 days">
+        <% n = @activity.size; slot = 700.0 / n; bw = slot * 0.58 %>
+        <% @activity.each_with_index do |(d, c), i| %>
+          <% h = (c.to_f / max) * 150.0; x = (i * slot) + ((slot - bw) / 2.0); y = 160.0 - h %>
+          <rect class="bar<%== ' bar-empty' if c.zero? %>" x="<%= format('%.1f', x) %>" y="<%= format('%.1f', c.zero? ? 157.0 : y) %>"
+                width="<%= format('%.1f', bw) %>" height="<%= format('%.1f', c.zero? ? 3.0 : [h, 3.0].max) %>" rx="2">
+            <title><%= d.strftime('%b %-d') %> · <%= c %> conversation<%= 's' unless c == 1 %></title>
+          </rect>
+        <% end %>
+        <line class="barchart-axis-line" x1="0" y1="160" x2="700" y2="160" />
+      </svg>
+      <div class="barchart-axis">
+        <span><%= @activity.first&.first&.strftime('%b %-d') %></span>
+        <span class="peak">peak <%= max %>/day</span>
+        <span><%= @activity.last&.first&.strftime('%b %-d') %></span>
+      </div>
+    </section>
+
+    <section class="card home-recent">
+      <div class="section-head">
+        <h2>Recent conversations</h2>
+        <a class="muted" href="/studio/chats">all →</a>
+      </div>
+      <% cutoff = Time.now - (5 * 60) %>
+      <ul class="convo-rail" data-live-home-target="list">
+        <% if @recent.empty? %>
+          <li data-live-home-target="placeholder"><div class="empty">No conversations yet. Start one in the <a href="/studio/playground">playground</a>.</div></li>
+        <% else %>
+          <% @recent.each do |s| %>
+            <% fresh = (t = parse_time(s.updated_at)) && t >= cutoff %>
+            <li data-session-id="<%= s.id %>">
+              <a href="/studio/sessions/<%= Rack::Utils.escape(s.id) %>">
+                <span class="avatar sm <%= avatar_class(s.id) %>"><%= s.id[0, 2].upcase %></span>
+                <span class="convo-main">
+                  <span class="convo-id mono"><%= s.id[0, 20] %></span>
+                  <span class="convo-sub"><%= Array(s.messages).size %> msg · <%= time_ago(s.updated_at) %></span>
+                </span>
+                <span class="presence<%= " present" if fresh %>" title="touched in the last 5 minutes"></span>
+              </a>
+            </li>
+          <% end %>
         <% end %>
       </ul>
-    <% end %>
-  </section>
+    </section>
+  </div>
 </div>

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

@@ -0,0 +1,123 @@
+<%# Knowledge — drill-down, single-agent-scoped (like Harvest, not Skills'
+   shared+override shape): the KnowledgeStore is a real per-agent partition.
+   @agent/@tenant/@status pick the scope; @selected drives the detail pane
+   (nil = none, "" = new, name = edit). %>
+<header class="page-head">
+  <div>
+    <nav class="crumbs"><span>knowledge</span></nav>
+    <h1>Knowledge<span class="sub"><%= @agent ? @agent.to_s : "no agent" %></span></h1>
+  </div>
+</header>
+
+<p class="muted matrix-hint">Concepts the engine extracted from finished conversations — facts, procedures, policies, objections. Learned content is <code>provenance: observed</code>; an operator promotes one to <code>policy</code> by editing it here. A conflict is never resolved automatically — a human decides.</p>
+
+<% if insika[:knowledge_store].nil? %>
+  <div class="empty">No knowledge — the store is not wired.</div>
+<% elsif @agents.empty? %>
+  <div class="empty">No agents yet. Add a <span class="mono">knowledge:</span> block to an agent's pack to start learning from its traffic.</div>
+<% else %>
+  <% if @agents.size > 1 %>
+    <div class="filter-bar">
+      <% @agents.each do |id| %>
+        <a class="btn" href="/studio/knowledge?agent=<%= Rack::Utils.escape(id) %>"<%== ' aria-current="page"' if id == @agent %>><%= id %></a>
+      <% end %>
+    </div>
+  <% end %>
+  <div class="filter-bar">
+    <a class="btn" href="/studio/knowledge?agent=<%= Rack::Utils.escape(@agent.to_s) %>&status=all"<%== ' aria-current="page"' if @status == "all" %>>all <span class="count"><%= @all_count %></span></a>
+    <a class="btn" href="/studio/knowledge?agent=<%= Rack::Utils.escape(@agent.to_s) %>&status=conflict"<%== ' aria-current="page"' if @status == "conflict" %>>conflicts <span class="count"><%= @conflict_count %></span></a>
+  </div>
+
+  <div class="drill" data-controller="list-filter">
+    <aside class="drill-pane drill-master">
+      <div class="drill-pane-head">
+        <div class="title"><strong>Concepts <span class="count"><%= @concepts.size %></span></strong></div>
+        <a class="btn primary btn-sm" href="/studio/knowledge/new?agent=<%= Rack::Utils.escape(@agent.to_s) %>">+ new</a>
+      </div>
+      <div class="drill-search">
+        <input type="search" class="filter-input" placeholder="Search concepts…" aria-label="Filter concepts"
+               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="concepts">
+        <% @concepts.each do |c| %>
+          <a class="drill-item<%== ' active' if @selected == c[:name] %>"
+             href="/studio/knowledge/<%= Rack::Utils.escape(c[:name]) %>?agent=<%= Rack::Utils.escape(@agent.to_s) %>"
+             data-list-filter-target="item" data-filter-text="<%= c[:name] %> <%= c[:description] %>">
+            <div class="drill-item-name">
+              <span class="txt mono"><%= c[:name] %></span>
+              <% if concept_conflict?(c) %><span class="pill warn">conflict</span><% end %>
+              <span class="pill"><%= c[:type] %></span>
+            </div>
+            <div class="drill-item-sub"><%= c[:description] %> · <span class="pill info"><%= format("%.2f", c[:confidence]) %></span> · ×<%= c[:occurrences] %></div>
+          </a>
+        <% end %>
+        <div class="empty" data-list-filter-target="empty" hidden>No concepts match your filter.</div>
+      </nav>
+    </aside>
+
+    <section class="drill-pane drill-detail">
+      <% if @selected.nil? %>
+        <div class="drill-empty">
+          <div>
+            <h2>Knowledge</h2>
+            <p>Pick a concept on the left to read or edit it — or create one by hand.</p>
+          </div>
+        </div>
+      <% else %>
+        <% new_concept = @selected == "" %>
+        <div class="drill-pane-head">
+          <div class="title">
+            <strong class="mono"><%= new_concept ? "New concept" : @selected %></strong>
+            <% if !new_concept && concept_conflict?(@selected_concept) %><span class="pill warn">conflict — resolve by editing below</span><% end %>
+          </div>
+          <button type="submit" form="concept-form" class="btn primary" data-turbo-submits-with="Saving…">Save concept</button>
+        </div>
+        <div class="drill-pane-body">
+          <% unless new_concept %>
+            <form method="post" action="/studio/knowledge/<%= Rack::Utils.escape(@selected) %>/delete<%= @tenant ? "?tenant=#{Rack::Utils.escape(@tenant)}" : '' %>" data-turbo-confirm="Remove concept &quot;<%= @selected %>&quot;? This can't be undone.">
+              <%== csrf_tag %>
+              <input type="hidden" name="agent" value="<%= @agent %>">
+              <div class="actions"><button type="submit" class="ghost danger" data-turbo-submits-with="Removing…">Remove</button></div>
+            </form>
+          <% end %>
+          <form id="concept-form" method="post" action="/studio/knowledge" data-controller="dirty-guard">
+            <%== csrf_tag %>
+            <input type="hidden" name="agent" value="<%= @agent %>">
+            <% if @tenant %><input type="hidden" name="tenant" value="<%= @tenant %>"><% end %>
+            <% if new_concept %>
+              <label>name <span class="muted">(canonical — same as <code>name:</code> in the frontmatter)</span>
+                <input type="text" name="name" placeholder="my-concept" required>
+              </label>
+            <% else %>
+              <input type="hidden" name="name" value="<%= @selected %>">
+            <% end %>
+            <label>Concept markdown <span class="muted">YAML frontmatter (<code>name</code>, <code>description</code>, <code>type</code>, <code>provenance</code>, <code>confidence</code>, …) + the durable claim</span></label>
+            <div data-controller="code-editor" data-code-editor-language-value="markdown" data-code-editor-preview-value="true">
+              <textarea name="content" data-code-editor-target="source" rows="18"><%= @concept_content %></textarea>
+            </div>
+          </form>
+
+          <% if !new_concept && Array(@concept_versions).any? %>
+            <details class="versions">
+              <summary><%= @concept_versions.size %> previous version(s)</summary>
+              <ul>
+                <% @concept_versions.each_with_index do |v, i| %>
+                  <li>
+                    <span class="muted mono"><%= v["at"] %></span>
+                    <form method="post" action="/studio/knowledge/<%= Rack::Utils.escape(@selected) %>/restore">
+                      <%== csrf_tag %>
+                      <input type="hidden" name="agent" value="<%= @agent %>">
+                      <% if @tenant %><input type="hidden" name="tenant" value="<%= @tenant %>"><% end %>
+                      <input type="hidden" name="version" value="<%= i %>">
+                      <button type="submit" class="ghost">Restore</button>
+                    </form>
+                  </li>
+                <% end %>
+              </ul>
+            </details>
+          <% end %>
+        </div>
+      <% end %>
+    </section>
+  </div>
+<% end %>

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

@@ -3,6 +3,11 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <%# Turbo 8 Drive routes same-origin visits through the View Transitions API
+      when this meta is present; browsers without support degrade
+      to the plain swap. The CSS owns the actual transition (application.css,
+      ::view-transition-*), including the prefers-reduced-motion kill switch. %>
+  <meta name="view-transition" content="same-origin">
   <meta name="csp-nonce" content="<%= csp_nonce %>">
   <title>Insika Studio</title>
   <link rel="icon" type="image/svg+xml" href="<%= asset_path("favicon.svg") %>">
@@ -10,6 +15,15 @@
   <script type="module" src="<%= asset_path("application.js") %>" defer></script>
 </head>
 <body>
+  <%# Chip-icon sprite: one source of truth for transcript event
+      chips — the ERB partial renders chip_icon() from the same nav_icons.rb set,
+      and live_transcript_controller.js clones from this template, so live and
+      replayed transcripts can never drift apart. %>
+  <template id="chip-icons" aria-hidden="true">
+    <% Studio::NavIcons::CHIP_ICONS.each do |kind, icon| %>
+      <span data-kind="<%= kind %>" class="chip-ic"><%== nav_icon(icon) %></span>
+    <% end %>
+  </template>
   <% if authenticated? %>
     <div class="app-shell">
       <aside class="sidebar">
@@ -60,17 +74,6 @@
       </aside>
 
       <div class="app-main">
-        <% if restart_needed? %>
-          <div class="banner" role="status">
-            <span><strong>Restart recommended.</strong> MCP changes take effect after the runtime restarts.</span>
-            <form method="post" action="/studio/restart-ack">
-              <%== csrf_tag %>
-              <input type="hidden" name="back" value="<%= request.script_name %><%= request.path %>">
-              <button type="submit" class="ghost">Dismiss</button>
-            </form>
-          </div>
-        <% end %>
-
         <% if flash["error"] %>
           <div class="flash err" role="alert"><%= flash["error"] %></div>
         <% end %>