insika 0.9.0 → 1.0.1

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

@@ -1,38 +1,35 @@
-<%# 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>
+    <%== crumbs_for("Knowledge") %>
+    <h1>Knowledge<span class="sub">Review what your agents learn</span></h1>
+  </div>
+  <div class="head-actions">
+    <form method="get" action="/studio/knowledge" class="actions inline">
+      <input type="hidden" name="status" value="<%= @status %>">
+      <% if @tenant %><input type="hidden" name="tenant" value="<%= @tenant %>"><% end %>
+      <label>Agent
+        <%== render("_agent_picker", locals: { name: "agent", options: @agents, value: @agent, auto_submit: true }) %>
+      </label>
+    </form>
+    <% if insika[:knowledge_store] && @agents.any? %>
+      <a class="btn primary" href="<%= knowledge_path(@agent, 'new', @tenant) %>">New concept</a>
+    <% end %>
   </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">
+  <div class="drill knowledge-workspace" 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 class="segmented" role="group" aria-label="status filter">
+          <a href="<%= knowledge_path(@agent, nil, @tenant, status: 'all') %>"<%== ' aria-current="page"' if @status == "all" %>>All <span class="count"><%= @all_count %></span></a>
+          <a href="<%= knowledge_path(@agent, nil, @tenant, status: 'conflict') %>"<%== ' aria-current="page"' if @status == "conflict" %>>Conflicts <span class="count"><%= @conflict_count %></span></a>
+        </div>
       </div>
       <div class="drill-search">
         <input type="search" class="filter-input" placeholder="Search concepts…" aria-label="Filter concepts"
@@ -41,79 +38,94 @@
       <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) %>"
+             href="<%= knowledge_path(@agent, c[:name], @tenant, status: @status) %>"
+             <%== ' aria-current="page"' if @selected == c[:name] %>
              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 class="drill-item-name"><span class="txt"><%= c[:name].tr('-', ' ') %></span></div>
+            <div class="drill-item-sub"><%= c[:description] %></div>
+            <div class="review-item-meta">
+              <% if concept_conflict?(c) %><span class="pill warn">conflict</span><% else %><span class="muted"><%= c[:type] %></span><% end %>
+              <span class="muted"><%= c[:occurrences] %> occurrence(s)</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>
+        <div class="empty" data-list-filter-target="empty"<%== ' hidden' if @concepts.any? %>>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>
+        <div class="drill-empty"><div><h2>No concepts to review</h2><p>Concepts appear as your agent learns from finished conversations. You can also 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>
+        <% new_concept = @selected == ""; concept = @selected_concept %>
         <div class="drill-pane-body">
+          <div class="review-heading">
+            <div>
+              <h2><%= new_concept ? "New concept" : @selected.tr('-', ' ') %></h2>
+              <% if concept %><p class="muted"><%= concept[:description] %></p><% end %>
+            </div>
+            <% if concept %><span class="pill <%= concept_conflict?(concept) ? 'warn' : 'plain' %>"><%= concept_conflict?(concept) ? 'conflict' : concept[:provenance] %></span><% end %>
+          </div>
+          <% if concept_conflict?(concept) %>
+            <div class="flash warn" role="status">This concept contains conflicting claims. Review the sources, then edit it to resolve the contradiction.</div>
+          <% end %>
+          <% if !new_concept && concept %>
+            <article class="card knowledge-reading">
+              <div class="review-item-meta"><span class="muted"><%= concept[:type] %></span><span class="muted">Confidence <%= format('%.2f', concept[:confidence]) %> · <%= concept[:occurrences] %> occurrence(s)</span></div>
+              <div class="markdown-preview knowledge-body" data-controller="markdown"><%= concept[:body] %></div>
+            </article>
+          <% end %>
           <% 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.">
+            <details class="card review-details">
+              <summary>Sources and history <span class="muted">· <%= Array(concept&.dig(:sources)).size %> source(s)</span></summary>
+              <% if concept %><p class="muted">Updated <%= concept[:updated_at] %> · Created <%= concept[:created_at] %></p><% end %>
+              <% if Array(concept&.dig(:sources)).empty? %><p class="muted">No source conversations recorded.</p><% end %>
+              <ul class="history">
+                <% Array(concept&.dig(:sources)).each do |sid| %><li><a class="mono" href="/studio/sessions/<%= Rack::Utils.escape(sid) %>"><%= sid %></a></li><% end %>
+              </ul>
+              <% Array(@concept_versions).each_with_index do |v, i| %>
+                <form method="post" action="/studio/knowledge/<%= Rack::Utils.escape(@selected) %>/restore" class="actions">
+                  <%== csrf_tag %>
+                  <input type="hidden" name="agent" value="<%= @agent %>">
+                  <input type="hidden" name="status" value="<%= @status %>">
+                  <% if @tenant %><input type="hidden" name="tenant" value="<%= @tenant %>"><% end %>
+                  <input type="hidden" name="version" value="<%= i %>">
+                  <span class="muted"><%= v['at'] %></span><button type="submit" class="ghost">Restore</button>
+                </form>
+              <% end %>
+            </details>
+          <% end %>
+          <details class="card review-details"<%== ' open' if new_concept || concept.nil? %>>
+            <summary><%= new_concept ? 'Write a concept' : 'Edit concept' %></summary>
+            <p class="muted">Edit the claim and its metadata. Set <code>provenance: policy</code> only for a policy you have verified.</p>
+            <form id="concept-form" method="post" action="/studio/knowledge" data-controller="dirty-guard">
               <%== 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>
+              <input type="hidden" name="status" value="<%= @status %>">
+              <% if @tenant %><input type="hidden" name="tenant" value="<%= @tenant %>"><% end %>
+              <% if new_concept %>
+                <label>Name <span class="muted">Match the name in the frontmatter.</span><input type="text" name="name" placeholder="my-concept" required></label>
+              <% else %>
+                <input type="hidden" name="name" value="<%= @selected %>">
+              <% end %>
+              <label for="concept-content">Concept markdown</label>
+              <div data-controller="code-editor" data-code-editor-language-value="markdown" data-code-editor-preview-value="true">
+                <textarea id="concept-content" name="content" data-code-editor-target="source" rows="18"><%= @concept_content %></textarea>
+              </div>
+              <div class="actions"><button type="submit" class="primary" data-turbo-submits-with="Saving…">Save concept</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>
+          <% unless new_concept %>
+            <details class="review-details">
+              <summary>Remove concept</summary>
+              <p class="muted">Permanently remove this concept from the selected scope.</p>
+              <form method="post" action="/studio/knowledge/<%= Rack::Utils.escape(@selected) %>/delete" data-turbo-confirm="Remove concept &quot;<%= @selected %>&quot;? This can't be undone.">
+                <%== csrf_tag %>
+                <input type="hidden" name="agent" value="<%= @agent %>">
+                <input type="hidden" name="status" value="<%= @status %>">
+                <% if @tenant %><input type="hidden" name="tenant" value="<%= @tenant %>"><% end %>
+                <button type="submit" class="danger" data-turbo-submits-with="Removing…">Remove concept</button>
+              </form>
             </details>
           <% end %>
         </div>

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

@@ -11,8 +11,21 @@
   <meta name="csp-nonce" content="<%= csp_nonce %>">
   <title>Insika Studio</title>
   <link rel="icon" type="image/svg+xml" href="<%= asset_path("favicon.svg") %>">
-  <link rel="stylesheet" href="<%= asset_path("application.css") %>">
-  <script type="module" src="<%= asset_path("application.js") %>" defer></script>
+  <%# The two webfonts every page uses on first paint (body sans + mono at 400).
+      Without the preload the browser only discovers them after the stylesheet
+      parses, which is one round-trip of fallback text. The other mono weights
+      are rare enough to stay lazy. The hrefs must match the @font-face `src:`
+      in application.css exactly — see font_path in app.rb. %>
+  <link rel="preload" as="font" type="font/woff2" crossorigin
+        href="<%= font_path("ibm-plex-sans-latin-wght-normal.woff2") %>">
+  <link rel="preload" as="font" type="font/woff2" crossorigin
+        href="<%= font_path("ibm-plex-mono-latin-400-normal.woff2") %>">
+  <%# data-turbo-track="reload": after a deploy the ?v= changes, and a Turbo
+      visit from a tab opened before it must reload the page — merging the
+      new head would run a SECOND application.js next to the old one, and
+      every controller (live transcript included) would connect twice. %>
+  <link rel="stylesheet" href="<%= asset_path("application.css") %>" data-turbo-track="reload">
+  <script type="module" src="<%= asset_path("application.js") %>" defer data-turbo-track="reload"></script>
 </head>
 <body>
   <%# Chip-icon sprite: one source of truth for transcript event
@@ -25,17 +38,21 @@
     <% end %>
   </template>
   <% if authenticated? %>
-    <div class="app-shell">
+    <div class="app-shell" data-controller="palette">
       <aside class="sidebar">
         <a class="brand" href="/studio/home"><span class="dot"></span>Insika <small>Studio</small></a>
+        <button type="button" class="palette-open" data-action="palette#open">
+          <%== nav_icon(:search) %><span>Search</span><kbd>⌘K</kbd>
+        </button>
 
         <% nav_sections.each do |group, items| %>
           <div class="nav-group">
             <% unless group.empty? %><div class="nav-label"><%= group %></div><% end %>
             <nav class="nav" aria-label="<%= group %>">
-              <% items.each do |label, href, icon| %>
+              <% items.each do |label, href, icon, count| %>
                 <a href="<%= href %>"<%== ' aria-current="page"' if nav_active?(href) %>>
                   <%== nav_icon(icon) %><span class="lbl"><%= label %></span>
+                  <% if count.to_i.positive? %><span class="nav-badge" aria-label="<%= count %> pending"><%= count %></span><% end %>
                 </a>
               <% end %>
             </nav>
@@ -63,17 +80,15 @@
               <button type="submit" class="ghost">Sign out</button>
             </form>
           </div>
-          <div class="env-chip" title="runtime environment">
-            <span class="env-mark" aria-hidden="true"><%= env_label[0, 1].upcase %></span>
-            <div class="env-text">
-              <b><%= env_label %></b>
-              <small>environment</small>
-            </div>
-          </div>
         </div>
       </aside>
 
       <div class="app-main">
+        <% if (env = env_banner) %>
+          <div class="env-banner <%= env[:kind] %>" role="status">
+            <b><%= env[:label] %></b><span>Not production — changes here never reach customers.</span>
+          </div>
+        <% end %>
         <% if flash["error"] %>
           <div class="flash err" role="alert"><%= flash["error"] %></div>
         <% end %>
@@ -85,6 +100,22 @@
           <%== yield %>
         </main>
       </div>
+
+      <%# ⌘K palette: every page and agent, filtered client-side (list-filter). %>
+      <dialog class="palette" data-palette-target="dialog" data-controller="list-filter" aria-label="Jump to">
+        <input type="text" class="palette-query" autocomplete="off" placeholder="Jump to a page or agent…" aria-label="Jump to"
+               data-palette-target="query" data-list-filter-target="query"
+               data-action="input->list-filter#filter input->palette#reset keydown->palette#key">
+        <div class="palette-list" role="listbox">
+          <% palette_entries.each do |group, label, href| %>
+            <a href="<%= href %>" role="option" data-palette-target="item" data-list-filter-target="item"
+               data-filter-text="<%= group %> <%= label %>" data-action="click->palette#close">
+              <span><%= label %></span><small><%= group %></small>
+            </a>
+          <% end %>
+          <div class="palette-empty" data-list-filter-target="empty" hidden>No match.</div>
+        </div>
+      </dialog>
     </div>
   <% else %>
     <% if flash["error"] %>

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

@@ -0,0 +1,45 @@
+<%# Live floor — the latest conversations as cards, plus a ticker of the
+    events as they arrive. The server renders the baseline (presence and
+    flag from the stored session); live_floor_controller moves the cards over
+    /studio/events: tool chips, "agent is writing…" while a turn runs, guardrail
+    flags. Read-only — every card links to the session viewer. %>
+<div data-controller="live-floor" data-live-floor-scoped-value="<%= @agent ? "true" : "false" %>" data-live-floor-max-value="<%= Studio::App::LIVE_CARDS %>">
+  <header class="page-head">
+    <div>
+      <%== crumbs_for("Live") %>
+      <h1>Live<span class="sub">Conversations happening now</span></h1>
+    </div>
+    <div class="head-actions">
+      <%== agent_filter_form("/studio/live", @agent) %>
+    </div>
+  </header>
+
+  <div class="live-grid" data-live-floor-target="grid">
+    <% if @sessions.empty? %>
+      <div class="empty" data-live-floor-target="placeholder">No conversations yet. Start one in the <a href="/studio/playground">playground</a>.</div>
+    <% end %>
+    <% @sessions.each do |s| %>
+      <% customer = presence(session_customer(s)) %>
+      <% preview = session_preview(s) %>
+      <a class="card live-card<%== ' flagged' if session_flagged?(s) %>" href="/studio/sessions/<%= Rack::Utils.escape(s.id) %>" data-session-id="<%= s.id %>">
+        <div class="live-card-top">
+          <%== render("_identity", locals: { id: customer || s.id, name: presence(session_customer_label(s)) || "anonymous", sub: presence(session_agent(s)) }) %>
+          <span class="presence<%== ' present' if session_fresh?(s) %>" title="activity in the last 5 minutes"></span>
+        </div>
+        <p class="live-preview"><%== preview ? mark_tags(preview, 140) : "No messages yet" %></p>
+        <div class="live-card-foot">
+          <span class="pill err live-flag">flagged</span>
+          <span class="live-tools"></span>
+          <span class="live-writing">agent is writing…</span>
+        </div>
+      </a>
+    <% end %>
+  </div>
+
+  <section class="card">
+    <div class="section-head"><h2>Events</h2><span class="muted">latest first · this page only</span></div>
+    <ol class="live-ticker" data-live-floor-target="ticker">
+      <li data-live-floor-target="waiting">Waiting for events…</li>
+    </ol>
+  </section>
+</div>

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

@@ -10,7 +10,7 @@
 <% unless frame_only %>
 <header class="page-head">
   <div>
-    <nav class="crumbs"><a href="/studio/agents">agents</a> / <span>mcp</span></nav>
+    <nav class="crumbs"><a href="/studio/agents">agents</a></nav>
     <h1>MCP<span class="sub"><%= @instances.size %> instance(s) · credentials masked</span></h1>
   </div>
 </header>
@@ -40,7 +40,7 @@
               <span class="txt" title="<%= m["name"] %>"><%= m["name"] %></span>
               <span class="pill <%= status_cls %>"><%= status_label %></span>
             </div>
-            <div class="drill-item-sub"><%= m["transport"] %><%== " · #{m['url']}" if m["url"].to_s != "" %><%== " · #{Array(m['tools_cache']).size} tool(s)" if Array(m["tools_cache"]).any? %></div>
+            <div class="drill-item-sub"><%= m["transport"] %><%== " · #{h(m['url'])}" if m["url"].to_s != "" %><%== " · #{Array(m['tools_cache']).size} tool(s)" if Array(m["tools_cache"]).any? %></div>
           </a>
         <% end %>
         <div class="empty" data-list-filter-target="empty" hidden>No MCP instances match your filter.</div>
@@ -55,10 +55,11 @@
     <% end %>
     <% if @selected_mcp %>
       <% m = @selected_mcp %>
+      <% status_label, status_cls = m["enabled"] ? mcp_status(m) : ["off", "warn"] %>
       <div class="drill-pane-head">
         <div class="title">
-          <strong class="mono"><%= m["name"] %></strong>
-          <span class="count"><%= m["transport"] %><%== " · #{m['description']}" if m["description"].to_s != "" %></span>
+          <strong class="mono"><%= m["name"] %> <span class="pill <%= status_cls %>"><%= status_label %></span></strong>
+          <span class="count"><%= m["transport"] %><%== " · #{h(m['description'])}" if m["description"].to_s != "" %><%== " · #{Array(m['tools_cache']).size} tool(s)" if Array(m["tools_cache"]).any? %></span>
         </div>
         <div class="head-actions">
           <form method="post" action="/studio/mcp/test">
@@ -74,19 +75,37 @@
         </div>
       </div>
       <div class="drill-pane-body">
+        <%# ~370 tools on a chatty server would be one unscannable wall of
+            paragraphs — a filterable row list (mono name + one-line preview,
+            <details> for the rest) scales the same way the master lists do. %>
         <% tools = Array(m["tools_cache"]) %>
         <% if tools.any? %>
-          <details class="mcp-tools-details" open>
-            <summary><%= tools.size %> tool(s) · live cache</summary>
-            <ul class="mcp-tools muted">
+          <details class="mcp-tools-panel newfile" data-controller="list-filter">
+            <summary>Discovered tools <span class="count"><%= tools.size %></span></summary>
+            <div class="filter-bar">
+              <input type="search" class="filter-input" placeholder="Filter tools by name or description…" aria-label="Filter tools"
+                     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>
+            <ul class="mcp-tools-list">
               <% tools.each do |t| %>
-                <li><code><%= t["name"] %></code><% if presence(t["description"]) %> — <%= t["description"] %><% end %></li>
+                <li data-list-filter-target="item" data-filter-text="<%= t["name"] %> <%= t["description"] %>">
+                  <details class="mcp-tool-row">
+                    <summary>
+                      <code class="mono"><%= t["name"] %></code>
+                      <span class="mcp-tool-desc"><%= presence(t["description"]) || "no description" %></span>
+                    </summary>
+                    <p class="mcp-tool-full"><%= presence(t["description"]) || "No description." %></p>
+                  </details>
+                </li>
               <% end %>
             </ul>
+            <div class="empty" data-list-filter-target="empty" hidden>No tools match your filter.</div>
           </details>
         <% end %>
 
-        <form class="mcp-edit" method="post" action="/studio/mcp" data-controller="transport-fields">
+        <div class="section-head"><h2>Connection</h2><p class="muted">Save changes before testing the connection. Test connection uses the saved settings.</p></div>
+        <form class="mcp-edit" method="post" action="/studio/mcp" data-controller="transport-fields dirty-guard">
           <%== csrf_tag %>
           <input type="hidden" name="name" value="<%= m["name"] %>">
           <div class="grid-2">
@@ -114,12 +133,16 @@
           <label>description
             <input type="text" name="description" value="<%= m["description"] %>">
           </label>
+          <fieldset class="subgroup">
+            <legend>Credentials &amp; environment</legend>
+            <p class="muted">Saved credentials are masked. Keep masked values to preserve them; clear a line to remove it.</p>
           <label data-transport-fields-target="stdio">env <span class="muted">(stdio process env, one <code>KEY=value</code> per line)</span>
             <textarea name="env" rows="4"><%= env_lines(m["env"]) %></textarea>
           </label>
           <label data-transport-fields-target="http">headers <span class="muted">(http/sse request headers, one <code>Name=value</code> per line)</span>
             <textarea name="headers" rows="4"><%= env_lines(m["headers"]) %></textarea>
           </label>
+          </fieldset>
           <div class="actions">
             <button type="submit" class="primary" data-turbo-submits-with="Saving…">Save instance</button>
           </div>
@@ -128,12 +151,12 @@
     <% else %>
       <div class="drill-pane-head">
         <div class="title">
-          <strong>Pick an instance</strong>
-          <span class="count">select on the left, or add one below</span>
+          <strong>Connect an MCP server</strong>
+          <span class="count">Create an instance or import an existing configuration</span>
         </div>
       </div>
       <div class="drill-pane-body">
-        <form method="post" action="/studio/mcp" data-controller="transport-fields" data-turbo-frame="_top">
+        <form method="post" action="/studio/mcp" data-controller="transport-fields dirty-guard" data-turbo-frame="_top">
           <%== csrf_tag %>
           <div class="grid-2">
             <label>name <span class="muted">(slug)</span>
@@ -161,22 +184,29 @@
           <label>description
             <input type="text" name="description">
           </label>
+          <fieldset class="subgroup">
+            <legend>Credentials &amp; environment</legend>
+            <p class="muted">Saved credentials are masked. Keep masked values to preserve them; clear a line to remove it.</p>
           <label data-transport-fields-target="stdio">env <span class="muted">(stdio process env, one <code>KEY=value</code> per line)</span>
             <textarea name="env" rows="4" placeholder="TAVILY_API_KEY=tvly-…"></textarea>
           </label>
           <label data-transport-fields-target="http">headers <span class="muted">(http/sse request headers, one <code>Name=value</code> per line)</span>
             <textarea name="headers" rows="4" placeholder="Authorization=Bearer tvly-…"></textarea>
           </label>
+          </fieldset>
           <div class="actions"><button type="submit" class="primary" data-turbo-submits-with="Creating…">Create instance</button></div>
         </form>
 
-        <form method="post" action="/studio/mcp/import" data-turbo-frame="_top">
+        <details class="newfile">
+          <summary>Import an existing configuration</summary>
+        <form method="post" action="/studio/mcp/import" data-turbo-frame="_top" data-controller="dirty-guard">
           <%== csrf_tag %>
           <label>mcpServers JSON <span class="muted">(paste a <code>{"mcpServers": {...}}</code> document — the same format Claude Desktop/Cursor use)</span>
             <textarea name="json" rows="8" placeholder='{"mcpServers": {"tavily": {"url": "https://mcp.tavily.com/mcp", "headers": {"Authorization": "Bearer …"}}}}'></textarea>
           </label>
           <div class="actions"><button type="submit" class="primary" data-turbo-submits-with="Importing…">Import</button></div>
         </form>
+        </details>
       </div>
     <% end %>
   </turbo-frame>