insika 0.2.0 → 0.7.0

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

@@ -1,285 +1,69 @@
-<header class="page-head">
-  <div>
-    <nav class="crumbs"><a href="/studio/agents">agents</a> / <span><%= @agent.id %></span></nav>
-    <h1><span class="avatar sm"><%= @agent.id[0, 2].upcase %></span><%= @agent.id %>
-      <span class="sub"><%= @agent.model %><%== " · #{h(@agent.provider)}" if @agent.provider %></span>
-    </h1>
-  </div>
-  <a class="btn primary" href="/studio/playground?agent=<%= Rack::Utils.escape(@agent.id) %>">Open playground →</a>
-</header>
-
-<nav class="subnav">
-  <a href="#config">config</a>
-  <a href="#prompts">prompts</a>
-  <a href="#skills">skills</a>
-  <a href="#memory">memory</a>
-  <a href="#history">history</a>
-</nav>
-
-<!-- ── Config / model ────────────────────────────────────────────────────── -->
-<section class="section" id="config">
-  <div class="section-head"><h2>Configuration</h2><p class="muted">model, provider, memory, limits, generation params and the model fence — saved via <code>update_agent</code>.</p></div>
-  <form class="card" method="post" action="/studio/agents/<%= Rack::Utils.escape(@agent.id) %>/config">
-    <%== csrf_tag %>
-    <div class="grid-2">
-      <label>model <span class="muted">(blank = platform <code>default_model</code>)</span>
-        <input type="text" name="model" value="<%= @agent.model %>" placeholder="inherit platform default">
-      </label>
-      <label>provider
-        <input type="text" name="provider" value="<%= @agent.provider %>" placeholder="deepseek">
-      </label>
-      <label>turn_timeout (s)
-        <input type="text" name="turn_timeout" value="<%= @agent.limits[:turn_timeout] %>" inputmode="numeric">
-      </label>
-      <label>tool_timeout (s)
-        <input type="text" name="tool_timeout" value="<%= @agent.limits[:tool_timeout] %>" inputmode="numeric">
-      </label>
-      <label>tool_concurrency <span class="muted">(parallel tool calls; 1 = serial, off for turns with approvals)</span>
-        <input type="text" name="tool_concurrency" value="<%= @agent.limits[:tool_concurrency] %>" inputmode="numeric">
-      </label>
-      <label>chat_rate_limit <span class="muted">(turns/chat/window; blank = platform, 0 = off)</span>
-        <input type="text" name="chat_rate_limit" value="<%= @agent.limits[:chat_rate_limit] %>" inputmode="numeric" placeholder="inherit platform edge">
-      </label>
-      <label>agent_token_ceiling <span class="muted">(tokens/window; blank = platform, 0 = off)</span>
-        <input type="text" name="agent_token_ceiling" value="<%= @agent.limits[:agent_token_ceiling] %>" inputmode="numeric" placeholder="inherit platform edge">
-      </label>
+<%# Agent detail — the DETAIL pane of the Agents miller shell.
+    Full page (direct visit/refresh): the two-column shell — master list plus
+    this pane. Turbo-Frame request (a row click, a config save, a prompt-file
+    switch): the pane alone, so the master's scroll state and selection
+    survive every interaction. The tab sections live in _agent_tab_* partials
+    (one per section, named after it — no abstraction, just containment). %>
+<%# 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/agents">agents</a> / <span><%= @agent.id %></span></nav>
+      <h1><span class="avatar sm <%= avatar_class(@agent.id) %>"><%= @agent.id[0, 2].upcase %></span><%= @agent.id %>
+        <span class="sub"><%= @agent.model %><%== " · #{h(@agent.provider)}" if @agent.provider %></span>
+      </h1>
     </div>
-    <label class="check">
-      <input type="checkbox" name="memory" value="1"<%== " checked" if @agent.memory %>>
-      cross-session memory (the BIA remembers across conversations)
-    </label>
-
-    <fieldset class="subgroup">
-      <legend>generation params <span class="muted">— blank = provider default</span></legend>
-      <div class="grid-3">
-        <label>temperature
-          <input type="text" name="temperature" value="<%= agent_param(@params, :temperature) %>" inputmode="decimal" placeholder="0.7">
-        </label>
-        <label>max_tokens
-          <input type="text" name="max_tokens" value="<%= agent_param(@params, :max_tokens) %>" inputmode="numeric" placeholder="4096">
-        </label>
-        <label>reasoning <span class="muted">(off/on/effort — blank = inherit model/platform)</span>
-          <%== thinking_select("thinking", agent_param(@params, :thinking), "inherit") %>
-        </label>
-      </div>
-    </fieldset>
-
-    <label>model fence <span class="muted">(<code>model_policy.allow</code> — one ref per line: <code>provider/model</code>, <code>provider/*</code> or <code>model</code>; blank = no fence)</span>
-      <textarea name="model_policy_allow" rows="3" placeholder="deepseek/*&#10;openai/gpt-4o-mini"><%= @model_policy_allow %></textarea>
-    </label>
-
-    <fieldset class="subgroup">
-      <legend>guardrails <span class="muted">— content safety</span></legend>
-      <label class="check">
-        <input type="checkbox" name="guardrail_input" value="1"<%== " checked" if guardrail_field(@guardrails, :input, true) %>>
-        input guardrail <span class="muted">— block injection / abuse / inappropriate before the LLM</span>
-      </label>
-      <label class="check">
-        <input type="checkbox" name="guardrail_output" value="1"<%== " checked" if guardrail_field(@guardrails, :output, true) %>>
-        output guardrail <span class="muted">— redact PII/secret in the stream + flag policy slips</span>
-      </label>
-      <div class="grid-2">
-        <label>strictness
-          <% strictness = guardrail_field(@guardrails, :strictness, "medium").to_s %>
-          <select name="guardrail_strictness">
-            <% %w[low medium high].each do |lvl| %>
-              <option value="<%= lvl %>"<%== " selected" if lvl == strictness %>><%= lvl %></option>
-            <% end %>
-          </select>
-        </label>
-        <label>LLM moderator <span class="muted">(model ref, or <code>on</code> for the platform utility_model; blank = deterministic only)</span>
-          <input type="text" name="guardrail_moderator" value="<%= guardrail_field(@guardrails, :moderator, "") %>" placeholder="deepseek/deepseek-v4-flash">
-        </label>
-      </div>
-      <details class="newfile">
-        <summary>safe replies — override per category <span class="muted">(blank = engine default; this agent's voice/language)</span></summary>
-        <% gr_resp = (@guardrails["responses"] || @guardrails[:responses] || {}) %>
-        <label>default <span class="muted">(catch-all for any blocked category)</span>
-          <textarea name="guardrail_response_default" rows="2" placeholder="I can't help with that particular request…"><%= guardrail_field(gr_resp, :default, "") %></textarea>
-        </label>
-        <div class="grid-2">
-          <% %w[injection sexual abuse escalate].each do |cat| %>
-            <label><%= cat %>
-              <textarea name="guardrail_response_<%= cat %>" rows="2"><%= guardrail_field(gr_resp, cat, "") %></textarea>
-            </label>
-          <% end %>
-        </div>
-      </details>
-    </fieldset>
+    <a class="btn primary" href="/studio/playground?agent=<%= Rack::Utils.escape(@agent.id) %>">Open playground →</a>
+  </header>
 
-    <div class="actions"><button type="submit" class="primary" data-turbo-submits-with="Saving…">Save config</button></div>
-  </form>
-</section>
-
-<!-- ── Prompts / identity (island code-editor) ───────────────────────────── -->
-<section class="section" id="prompts">
-  <div class="section-head">
-    <h2>Prompts <span class="pill info plain"><%= @prompt_files.size %></span></h2>
-    <p class="muted">the BIA's own identity (store-backed, versioned). Empty = uses the deployment default.</p>
-  </div>
-
-  <% if @prompt_files.empty? %>
-    <div class="empty">No authored prompts. Create a file below (e.g. <code>IDENTITY.md</code>) to give this agent its own identity.</div>
-  <% end %>
-
-  <% @prompt_files.each do |pf| %>
-    <div class="card promptfile">
-      <div class="promptfile-head">
-        <strong class="mono"><%= pf[:name] %></strong>
-        <form method="post" action="/studio/agents/<%= Rack::Utils.escape(@agent.id) %>/prompts/delete" data-turbo-confirm="Remove prompt file &quot;<%= pf[:name] %>&quot;? This can't be undone.">
-          <%== csrf_tag %>
-          <input type="hidden" name="file" value="<%= pf[:name] %>">
-          <button type="submit" class="ghost danger" data-turbo-submits-with="Removing…">Remove</button>
-        </form>
-      </div>
-      <form method="post" action="/studio/agents/<%= Rack::Utils.escape(@agent.id) %>/prompts" data-controller="dirty-guard">
-        <%== csrf_tag %>
-        <input type="hidden" name="file" value="<%= pf[:name] %>">
-        <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="10"><%= pf[:content] %></textarea>
-        </div>
-        <div class="actions"><button type="submit" class="primary" data-turbo-submits-with="Saving…">Save prompt</button></div>
-      </form>
-      <% unless pf[:versions].empty? %>
-        <details class="versions">
-          <summary><%= pf[:versions].size %> previous version(s)</summary>
-          <ul>
-            <% pf[:versions].each_with_index do |v, i| %>
-              <li>
-                <span class="muted mono"><%= v["at"] %></span>
-                <form method="post" action="/studio/agents/<%= Rack::Utils.escape(@agent.id) %>/prompts/restore">
-                  <%== csrf_tag %>
-                  <input type="hidden" name="file" value="<%= pf[:name] %>">
-                  <input type="hidden" name="version" value="<%= i %>">
-                  <button type="submit" class="ghost">Restore</button>
-                </form>
-              </li>
-            <% end %>
-          </ul>
-        </details>
+  <div class="drill" data-controller="list-filter">
+    <%== render("_agents_master", locals: { active_id: @agent.id }) %>
+<% end %>
+    <turbo-frame id="agent-detail" class="drill-pane drill-detail">
+      <%# A frame response never sees the layout, so the flash strip lives here
+          too — without it, save confirmations would vanish on frame submits
+          (the layout's copy only renders on full pages). %>
+      <% if frame_only %>
+        <% 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>
-  <% end %>
-
-  <details class="card newfile">
-    <summary>+ new prompt file</summary>
-    <form method="post" action="/studio/agents/<%= Rack::Utils.escape(@agent.id) %>/prompts" data-controller="dirty-guard">
-      <%== csrf_tag %>
-      <label>file name
-        <input type="text" name="file" placeholder="IDENTITY.md" required>
-      </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="8" placeholder="# Identity&#10;You are..."></textarea>
+      <div class="drill-pane-head">
+        <div class="title">
+          <strong class="mono"><%= @agent.id %></strong>
+          <span class="count"><%= @agent.model %><%== " · #{h(@agent.provider)}" if @agent.provider %></span>
+        </div>
+        <a class="btn btn-sm" href="/studio/playground?agent=<%= Rack::Utils.escape(@agent.id) %>" data-turbo-frame="_top">Test in playground</a>
       </div>
-      <div class="actions"><button type="submit" class="primary" data-turbo-submits-with="Creating…">Create prompt</button></div>
-    </form>
-  </details>
-</section>
+      <div class="drill-pane-body">
+        <div class="tabs-page" data-controller="tabs" data-tabs-default-value="<%= @active_tab %>">
+          <nav class="subnav" aria-label="agent sections">
+            <%# data-turbo="false": these are plain in-page hash links. Without
+                the opt-out, Turbo intercepts them as frame navigations (they sit
+                inside turbo-frame#agent-detail), dropping the #fragment and
+                re-fetching the frame instead of letting the browser set
+                location.hash — which is the only thing tabs_controller reads. %>
+            <a href="#config" data-tabs-target="tab" data-turbo="false">config</a>
+            <a href="#prompts" data-tabs-target="tab" data-turbo="false">prompts</a>
+            <a href="#skills" data-tabs-target="tab" data-turbo="false">skills</a>
+            <a href="#memory" data-tabs-target="tab" data-turbo="false">memory</a>
+            <a href="#outcomes" data-tabs-target="tab" data-turbo="false">outcomes</a>
+            <a href="#loops" data-tabs-target="tab" data-turbo="false">loops</a>
+            <a href="#cache" data-tabs-target="tab" data-turbo="false">cache</a>
+            <a href="#history" data-tabs-target="tab" data-turbo="false">history</a>
+          </nav>
 
-<!-- ── Agent skills ──────────────────────────────────────────────────────── -->
-<section class="section" id="skills">
-  <div class="section-head">
-    <h2>Skills</h2>
-    <p class="muted">which catalog skills this agent may load (<code>load_skill</code>).</p>
-  </div>
-  <form class="card" method="post" action="/studio/agents/<%= Rack::Utils.escape(@agent.id) %>/skills">
-    <%== csrf_tag %>
-    <label class="check">
-      <input type="checkbox" name="all_skills" value="1"<%== " checked" if @agent_skills.nil? %>>
-      all skills (open allowlist)
-    </label>
-    <% if @all_skills.empty? %>
-      <p class="muted">No skills in the catalog. Create one under <a href="/studio/skills/new">skills → new</a>.</p>
-    <% else %>
-      <div class="check-grid">
-        <% @all_skills.sort_by(&:name).each do |s| %>
-          <label class="check">
-            <input type="checkbox" name="skills[]" value="<%= s.name %>"<%== " checked" if @agent_skills&.include?(s.name) %>>
-            <span class="mono"><%= s.name %></span>
-          </label>
-        <% end %>
+          <%== render("_agent_tab_config") %>
+          <%== render("_agent_tab_prompts") %>
+          <%== render("_agent_tab_skills") %>
+          <%== render("_agent_tab_memory") %>
+          <%== render("_agent_tab_loops") %>
+          <%== render("_agent_tab_outcomes") %>
+          <%== render("_agent_tab_cache") %>
+          <%== render("_agent_tab_history") %>
+        </div>
       </div>
-    <% end %>
-    <div class="actions">
-      <button type="submit" class="primary" data-turbo-submits-with="Saving…">Save skills</button>
-      <a class="btn ghost" href="/studio/tools">Edit tools →</a>
-    </div>
-  </form>
-</section>
-
-<!-- ── Agent memory (tenant = id) ────────────────────────────────────────── -->
-<section class="section" id="memory">
-  <div class="section-head">
-    <h2>Memory</h2>
-    <p class="muted">facts and notes the BIA reads each turn (tenant <code><%= @agent.id %></code>).</p>
-  </div>
-  <div class="card">
-    <h3>Facts</h3>
-    <% if @facts.empty? %>
-      <p class="muted">No facts.</p>
-    <% else %>
-      <ul class="kv">
-        <% @facts.each do |f| %>
-          <li>
-            <span class="k mono"><%= f.key %></span>
-            <span class="v"><%= f.value %></span>
-            <form method="post" action="/studio/agents/<%= Rack::Utils.escape(@agent.id) %>/memory/forget" data-turbo-confirm="Forget &quot;<%= f.key %>&quot;? The agent loses this fact from the next turn on.">
-              <%== csrf_tag %>
-              <input type="hidden" name="key" value="<%= f.key %>">
-              <button type="submit" class="ghost danger" data-turbo-submits-with="Forgetting…">Forget</button>
-            </form>
-          </li>
-        <% end %>
-      </ul>
-    <% end %>
-    <form class="inline-form" method="post" action="/studio/agents/<%= Rack::Utils.escape(@agent.id) %>/memory/fact">
-      <%== csrf_tag %>
-      <input type="text" name="key" placeholder="key (e.g. customer_name)" required>
-      <input type="text" name="value" placeholder="value" required>
-      <button type="submit" class="primary" data-turbo-submits-with="Saving…">Save fact</button>
-    </form>
-  </div>
-
-  <div class="card">
-    <h3>Notes <span class="muted">(recent)</span></h3>
-    <% if @notes.empty? %>
-      <p class="muted">No notes.</p>
-    <% else %>
-      <ul class="notes">
-        <% @notes.each do |n| %>
-          <li><span class="muted mono"><%= n.created_at %></span> <%= n.text %></li>
-        <% end %>
-      </ul>
-    <% end %>
-    <form class="inline-form" method="post" action="/studio/agents/<%= Rack::Utils.escape(@agent.id) %>/memory/note">
-      <%== csrf_tag %>
-      <input type="text" name="text" placeholder="free-form note…" required>
-      <button type="submit" class="primary" data-turbo-submits-with="Adding…">Add note</button>
-    </form>
+    </turbo-frame>
+<% unless frame_only %>
   </div>
-</section>
-
-<!-- ── History ───────────────────────────────────────────────────────────── -->
-<section class="section" id="history">
-  <div class="section-head">
-    <h2>History</h2>
-    <p class="muted">recent conversations (all agents — a session doesn't stamp its author).</p>
-  </div>
-  <% if @recent_sessions.empty? %>
-    <div class="empty">No conversations yet. Start one in the <a href="/studio/playground?agent=<%= Rack::Utils.escape(@agent.id) %>">playground</a>.</div>
-  <% else %>
-    <div class="card">
-      <ul class="history">
-        <% @recent_sessions.each do |s| %>
-          <li>
-            <a href="/studio/sessions/<%= Rack::Utils.escape(s.id) %>">
-              <span class="mono"><%= s.id[0, 12] %></span>
-            </a>
-            <span class="muted"><%= Array(s.messages).size %> msg · <%= s.updated_at %></span>
-            <% if (p = session_preview(s)) %><span class="preview muted"><%= p[0, 80] %></span><% end %>
-          </li>
-        <% end %>
-      </ul>
-    </div>
-  <% end %>
-</section>
+<% end %>

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

@@ -1,63 +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 BIA each</span></h1>
+  <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 BIA 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"><%= 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 %>
-        </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. bia)</span>
-        <input type="text" name="id" placeholder="bia" 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 BIA 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/approvals.erb

@@ -3,7 +3,10 @@
     <nav class="crumbs"><span>approvals</span></nav>
     <h1>Approvals<span class="sub"><%= @approvals.size %> pending</span></h1>
   </div>
-  <a class="btn" href="/studio/tasks">Tasks →</a>
+  <div class="head-actions">
+    <%== agent_filter_form("/studio/approvals", @agent) %>
+    <a class="btn" href="/studio/tasks">Tasks →</a>
+  </div>
 </header>
 
 <% if @approvals.empty? %>

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/chats.erb

@@ -3,7 +3,10 @@
     <nav class="crumbs"><a href="/studio/agents">agents</a> / <span>chats</span></nav>
     <h1>Chats<span class="sub"><%= @sessions.size %> recent conversation(s)</span></h1>
   </div>
-  <a class="btn primary" href="/studio/playground">New conversation →</a>
+  <div class="head-actions">
+    <%== agent_filter_form("/studio/chats", @agent) %>
+    <a class="btn primary" href="/studio/playground">New conversation →</a>
+  </div>
 </header>
 
 <% if @sessions.empty? %>