@ninemind/agentgem 0.2.0 → 0.3.0

package/dist/public/index.html

@@ -157,6 +157,13 @@
   .prow .pm{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap;font-family:var(--mono)}
   .redtag{color:var(--accent);font-size:11px}
   pre.json{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;font:12px/1.6 var(--mono);white-space:pre-wrap;word-break:break-word;margin:0}
+  /* ── channel picker ── */
+  #channelPicker{border:1px solid var(--line);border-radius:var(--r);padding:10px 13px;margin-bottom:12px;background:var(--card)}
+  #channelPicker legend{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);padding:0 4px}
+  #channelPicker legend .d{color:var(--muted);font-size:10px;font-weight:400;text-transform:none;letter-spacing:0}
+  #channelPicker .ch-labels{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px}
+  #channelPicker label{display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer}
+  #channelPicker input[type=checkbox]{accent-color:var(--accent);margin:0}
   /* ── filters ── */
   #filterPanel{border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;margin-bottom:12px;background:var(--accent-soft)}
   #filterPanel[hidden]{display:none}
@@ -242,8 +249,19 @@
       <div class="bar" id="typeBar"></div>
     </div>
     <div class="bar" id="selbar"><strong style="flex:1;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)">Selection</strong><button id="all" class="ghost">Select all shown</button><button id="none" class="ghost">Clear</button></div>
-    <div class="bar"><button id="importBtn" class="ghost">⬇ Import from machine…</button><span class="d" id="importStatus" style="margin-left:8px"></span></div>
+    <div class="bar"><button id="importBtn" class="ghost">⬇ Import from machine…</button><button id="getBtn" class="ghost">🔗 Get gems…</button><span class="d" id="importStatus" style="margin-left:8px"></span></div>
     <div id="inventory">Loading…</div>
+    <fieldset id="channelPicker" class="pgroup">
+      <legend>Channels <span class="d">(how this Gem is reached)</span></legend>
+      <div class="ch-labels">
+        <label><input type="checkbox" class="ch" value="slack"> Slack</label>
+        <label><input type="checkbox" class="ch" value="telegram"> Telegram</label>
+        <label><input type="checkbox" class="ch" value="discord"> Discord</label>
+        <label><input type="checkbox" class="ch" value="teams"> Teams</label>
+        <label><input type="checkbox" class="ch" value="twilio"> Twilio</label>
+        <label><input type="checkbox" class="ch" value="github"> GitHub</label>
+      </div>
+    </fieldset>
     <div id="testdrive" class="testdrive" hidden>
       <div class="hd">▶ Test-drive this agent <span class="pill" id="tdPill">Claude Code</span></div>
       <div class="cmd"><span class="dollar">$</span> <code id="tdCmd"></code> <button id="tdCopy" class="ghost">Copy</button></div>
@@ -251,7 +269,7 @@
     </div>
   </section>
   <section class="pane right">
-    <div class="bar"><strong style="flex:1">Gem (live)</strong><select id="target" title="materialize target" style="margin-left:auto"><option value="claude">Claude</option><option value="codex">Codex</option><option value="agents">Agents</option><option value="hermes">Hermes</option><option value="eve">Eve</option><option value="flue">Flue</option><option value="openai-sandbox">OpenAI Sandbox</option><option value="agentcore">AgentCore</option><option value="a2a">A2A</option></select><span class="seg" id="preview-modes"><button type="button" data-pmode="summary">Summary</button><button type="button" data-pmode="json">JSON</button><button type="button" data-pmode="materialize">Materialize</button><button type="button" data-pmode="managed">Managed Agents</button></span><span class="exportwrap"><button id="exportBtn">Export ▾</button><div id="exportMenu" class="exportmenu" hidden><button id="dltar" class="menuitem" title="download the gem archive as a .tar.gz">⬇ Download .tar.gz</button><button id="save" class="menuitem" title="write the gem archive (manifest + lock + files) to a folder">💾 Save to folder…</button><button id="dl" class="menuitem">⬇ Download JSON</button><button id="copy" class="menuitem">⧉ Copy JSON</button></div></span><span class="d" id="archiveStatus" style="margin-left:6px"></span></div>
+    <div class="bar"><strong style="flex:1">Gem (live)</strong><select id="target" title="materialize target" style="margin-left:auto"><option value="claude">Claude</option><option value="codex">Codex</option><option value="agents">Agents</option><option value="hermes">Hermes</option><option value="eve">Eve</option><option value="flue">Flue</option><option value="openai-sandbox">OpenAI Sandbox</option><option value="agentcore">AgentCore</option><option value="a2a">A2A</option></select><span class="seg" id="preview-modes"><button type="button" data-pmode="summary">Summary</button><button type="button" data-pmode="json">JSON</button><button type="button" data-pmode="materialize">Materialize</button><button type="button" data-pmode="run">Run</button><button type="button" data-pmode="managed">Managed Agents</button></span><span class="exportwrap"><button id="exportBtn">Export ▾</button><div id="exportMenu" class="exportmenu" hidden><button id="dlgem" class="menuitem" title="download one portable, self-verifying .gem file to share">🔗 Download .gem (share)</button><button id="dltar" class="menuitem" title="download the gem archive as a .tar.gz">⬇ Download .tar.gz</button><button id="save" class="menuitem" title="write the gem archive (manifest + lock + files) to a folder">💾 Save to folder…</button><button id="dl" class="menuitem">⬇ Download JSON</button><button id="copy" class="menuitem">⧉ Copy JSON</button></div></span><span class="d" id="archiveStatus" style="margin-left:6px"></span></div>
     <div id="preview"></div>
     <p class="note">MCP server &amp; hook config secrets are shown as <code>&lt;redacted&gt;</code> and never exported. Skill, CLAUDE.md, rules bodies &amp; hook commands are bundled as written — don't keep secrets in them.</p>
     <div id="checksPanel" class="group" style="margin-top:14px">
@@ -266,6 +284,23 @@
     <pre class="modal-body" id="modal-body"></pre>
   </div>
 </div>
+<div id="getModal" class="modal-bg" hidden>
+  <div class="modal">
+    <div class="modal-h"><strong class="t">Get gems</strong><span class="src">install a shared .gem, or search the registry</span><button id="getClose" class="ghost" style="margin-left:auto">✕ Close</button></div>
+    <div style="padding:14px;display:flex;flex-direction:column;gap:14px">
+      <div>
+        <div class="bar"><strong style="flex:1;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)">Install a .gem</strong></div>
+        <div class="bar"><input id="installSrc" type="text" placeholder="https://…/foo.gem  or  /path/to/foo.gem" style="flex:1" /><select id="installTarget" title="materialize target"></select><button id="installBtn">Install</button></div>
+        <span class="d" id="installStatus"></span>
+      </div>
+      <div>
+        <div class="bar"><strong style="flex:1;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)">Search the registry</strong></div>
+        <div class="bar"><input id="regSearch" type="text" placeholder="search names, tags, descriptions…" style="flex:1" /><button id="regSearchBtn" class="ghost">Search</button></div>
+        <div id="regResults"></div>
+      </div>
+    </div>
+  </div>
+</div>
 <div id="importModal" class="modal-bg" hidden>
   <div class="modal">
     <div class="modal-h"><strong class="t">Import from machine</strong><span class="src">~/.claude · ~/.agents · ~/.codex · ~/.hermes</span><button id="importClose" class="ghost" style="margin-left:auto">✕ Close</button></div>
@@ -489,8 +524,11 @@ function renderAnError(view, msg){
 // Read-only view of the candidate Gems. Each card adopts the project AND applies
 // just that candidate's selection.
 let anCandidates = [];   // stash so a card's button can grab its candidate
+let anDistilled = [];    // stash distilled drafts for the accept buttons
+let acceptedDrafts = []; // distilled drafts the user folded into the build
 function renderAnView(view, path, flavor, name, res){
   anCandidates = res.candidates || [];
+  anDistilled = res.distilled || [];
   const degraded = res.degraded ? ` <span class="d">(usage frequency — agent unavailable)</span>` : "";
   const gaps = (res.gaps || []).length ? `<div class="d" style="margin:8px 0">Used but not in inventory: ${esc(res.gaps.join(", "))}</div>` : "";
   const li = (n, t, reason, root) => {
@@ -509,6 +547,30 @@ function renderAnView(view, path, flavor, name, res){
       + `</div>`;
   }).join("");
 
+  // Distilled draft skills: recurring procedures the analyzer captured from the
+  // builtin work (Bash/Edit/test/commit) that aren't yet a skill. Accepting writes
+  // a reviewable SKILL.md draft — it is NOT installed.
+  const drafts = anDistilled.map((d, i) => {
+    const trig = (d.triggers || []).map(t => `<span class="src">${esc(t)}</span>`).join(" ");
+    const mut = d.mutating ? ` <span class="src" title="this workflow writes/executes">mutating</span>` : "";
+    return `<div style="border:1px dashed var(--line);border-radius:8px;padding:10px 12px;margin-bottom:10px">`
+      + `<div style="font-size:14px"><b>${esc(d.name)}</b> <span class="d">· distilled · ${d.confidence}</span>${mut}</div>`
+      + `<div class="d" style="margin:3px 0 6px">${esc(d.description)}</div>`
+      + (trig ? `<div style="margin-bottom:6px">${trig}</div>` : "")
+      + `<div class="d" style="margin-bottom:6px">tools: ${esc((d.tools || []).join(", ") || "—")} · seen in ${d.evidence?.sessions ?? "?"} session(s)</div>`
+      + `<details style="margin-bottom:8px"><summary class="d" style="cursor:pointer">view workflow body</summary>`
+      + `<pre style="white-space:pre-wrap;font-size:12px;background:var(--bg2,#0001);padding:8px;border-radius:6px;overflow:auto">${esc(d.body || "")}</pre></details>`
+      + `<button type="button" class="anFold" data-i="${i}" style="margin-top:2px">Add to build ▸</button>`
+      + ` <button type="button" class="ghost anAccept" data-i="${i}" style="margin-top:2px">write SKILL.md only</button>`
+      + ` <span class="anAcceptMsg d" data-i="${i}"></span>`
+      + `</div>`;
+  }).join("");
+  const draftsSection = anDistilled.length
+    ? `<div style="margin-top:14px;font-size:15px"><b>${anDistilled.length} distilled skill draft(s)</b> <span class="d">· captured from repeated workflows</span></div>`
+      + `<div class="d" style="margin:2px 0 10px">Reviewed drafts are written to <code>.agentgem/distilled/</code> — edit and promote them yourself; they are not installed.</div>`
+      + drafts
+    : "";
+
   const heading = anCandidates.length > 1 ? `${anCandidates.length} candidate Gems` : (anCandidates.length === 1 ? "Recommended Gem" : "No recurring flows found");
   const cached = res.cached ? ` <span class="src" title="cached — re-analyze to refresh">cached</span>` : "";
   view.innerHTML =
@@ -517,12 +579,57 @@ function renderAnView(view, path, flavor, name, res){
     + `<div style="margin-top:10px;font-size:15px"><b>${esc(heading)}</b>${degraded}${cached} <span class="d">· ${res.signalSummary.sessionsScanned} session(s)</span></div>`
     + `<div class="d" style="margin:4px 0 10px;word-break:break-all">${esc(path)}</div>`
     + (cards || `<div class="d">Nothing to recommend from this project's usage.</div>`)
-    + gaps;
+    + gaps
+    + draftsSection;
   view.querySelector(".anBack").onclick = (e) => { e.preventDefault(); showPicker(); };
   view.querySelector(".anFresh").onclick = (e) => { e.preventDefault(); analyzeWorkflow(path, flavor, name, true); };
   view.querySelectorAll(".anApply").forEach(btn => {
     btn.onclick = (e) => { e.preventDefault(); switchAndApply(path, flavor, anCandidates[+btn.dataset.i]); };
   });
+  view.querySelectorAll(".anAccept").forEach(btn => {
+    btn.onclick = (e) => { e.preventDefault(); acceptDraft(view, +btn.dataset.i, btn); };
+  });
+  view.querySelectorAll(".anFold").forEach(btn => {
+    btn.onclick = (e) => { e.preventDefault(); addDraftToBuild(+btn.dataset.i); };
+  });
+}
+
+// Fold a distilled draft into the active build: adopt the analyzed project as the
+// testbed, inject the draft as a project skill (so it renders + selects like any
+// other), and stash it so buildSelectionBody ships it as `distilledDrafts` — the
+// server stages it into the inventory before resolving the selection.
+async function addDraftToBuild(i){
+  const skill = anDistilled[i];
+  const root = skill.evidence.root;
+  document.getElementById("recentModal").hidden = true; showPicker();
+  await useTestbed(root, "claude", skill.name);   // adopts + loads + renders the project's inventory
+  let p = (inv.projects || []).find(x => x.root === root);
+  if (!p) { p = { root, name: root.replace(/^.*\//, ""), skills: [], mcpServers: [], instructions: [], hooks: [] }; (inv.projects = inv.projects || []).push(p); }
+  if (!p.skills.some(s => s.name === skill.name)) p.skills.push({ type: "skill", name: skill.name, description: skill.description, source: "distilled-draft", content: skill.body });
+  if (!acceptedDrafts.some(d => d.name === skill.name)) acceptedDrafts.push(skill);
+  projSel(root).skills.add(skill.name);
+  fetch("/api/workflow/draft", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(skill) }).catch(() => {});  // also persist a reviewable SKILL.md (best-effort)
+  renderInventoryPane();           // re-render so the injected draft shows as a checked skill
+  restoreChecks(); refresh();
+  ensureAnalyzeBanner().innerHTML = `<b>${esc(skill.name)}</b> <span class="d">(distilled draft)</span> added to the build — it's bundled into the Gem and a SKILL.md draft is written under <code>.agentgem/distilled/</code> on build.`;
+}
+
+// Accept a distilled draft: POST it; the server writes the SKILL.md draft and
+// returns the path. The draft is NOT installed — the user promotes it by hand.
+async function acceptDraft(view, i, btn){
+  const skill = anDistilled[i];
+  const msg = view.querySelector(`.anAcceptMsg[data-i="${i}"]`);
+  btn.disabled = true; if (msg) msg.textContent = "writing…";
+  try {
+    const res = await fetch("/api/workflow/draft", { method:"POST", headers:{"content-type":"application/json"}, body: JSON.stringify(skill) });
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const { path } = await res.json();
+    btn.textContent = "✓ draft written";
+    if (msg) msg.innerHTML = ` → <code>${esc(path)}</code>`;
+  } catch (err) {
+    btn.disabled = false;
+    if (msg) msg.textContent = `failed: ${err.message}`;
+  }
 }
 
 // The explicit switch: adopt the project as the active testbed, then pre-check
@@ -637,6 +744,12 @@ async function load() {
   const qs = `?projects=${encodeURIComponent(JSON.stringify(projects))}`;
   inv = await (await fetch("/api/inventory" + qs)).json();
   inv.projects = inv.projects || [];
+  renderInventoryPane();
+}
+
+// Render the active testbed's project groups from the current `inv` (re-runnable so
+// an injected distilled draft skill can appear without a re-fetch).
+function renderInventoryPane(){
   // Render ONLY the active testbed's project groups (global groups are reached via Import).
   const proj = inv.projects.find(p => p.root === activeTestbed) || { root: activeTestbed, name: activeTestbed.replace(/^.*\//, ""), skills: [], mcpServers: [], instructions: [], hooks: [] };
   let html = group("Skills", proj.skills, "projectSkills", proj.root)
@@ -786,8 +899,14 @@ function buildSelectionBody(){
   const selection = { skills, mcpServers, includeInstructions: sel.includeInstructions };
   if (hooks.length) selection.hooks = hooks;
   if (Object.keys(projectsSel).length) selection.projects = projectsSel;
+  const channels = Array.from(document.querySelectorAll("#channelPicker .ch:checked")).map((el) => ({ platform: el.value }));
   const reqBody = { selection, name: document.getElementById("name").value || "gem" };
+  if (channels.length) reqBody.channels = channels;
   if (projects.length) reqBody.projects = projects;
+  // Ship the distilled drafts that are actually selected so the server can stage
+  // them into the inventory before resolving the selection (proposal §7b).
+  const drafts = acceptedDrafts.filter(d => (projectsSel[d.evidence.root]?.skills || []).includes(d.name));
+  if (drafts.length) reqBody.distilledDrafts = drafts;
   return reqBody;
 }
 async function build(){
@@ -815,6 +934,9 @@ document.getElementById("suggestChecks").addEventListener("click", async () => {
   renderChecks(); build();
 });
 let previewMode = "summary";
+// "Run" preview mode: drive a locally-installed ACP coding agent against the live Gem.
+let __gemRun = { task: "", agent: "claude", expect: "" };
+let __gemRunES = null; // active EventSource for the streaming run (one at a time)
 function fmtSize(n){ return n < 1024 ? `${n} B` : `${(n / 1024).toFixed(n < 10240 ? 1 : 0)} KB`; }
 function artSize(a){ return (a.type === "mcp_server" || a.type === "hook") ? JSON.stringify(a.config || {}).length : (a.content || "").length; }
 const GEM_MARK_SVG = `<svg class="gemmark" viewBox="0 0 64 64" fill="none" aria-hidden="true"><path d="M32 4 58 24 32 60 6 24 Z" fill="#9a3324"/><path d="M32 4 58 24 32 26 Z" fill="#bb4a38"/><path d="M32 4 6 24 32 26 Z" fill="#7d2a1e"/><path d="M6 24 32 26 32 60 Z" fill="#8b2e21"/><path d="M58 24 32 26 32 60 Z" fill="#a8392a"/><path d="M6 24 58 24 32 26 Z" fill="#c8543f"/><path class="glint" d="M32 4 58 24 32 26 Z" fill="#ffd9a0"/></svg>`;
@@ -860,6 +982,7 @@ function renderPreview(){
   if (typeof renderRail === "function") renderRail();
   if (previewMode === "materialize") { renderMaterialize(); document.querySelectorAll("#preview-modes button").forEach(b => b.classList.toggle("on", b.dataset.pmode === previewMode)); return; }
   if (previewMode === "managed") { renderPublish(); document.querySelectorAll("#preview-modes button").forEach(b => b.classList.toggle("on", b.dataset.pmode === previewMode)); return; }
+  if (previewMode === "run") { renderRun(); document.querySelectorAll("#preview-modes button").forEach(b => b.classList.toggle("on", b.dataset.pmode === previewMode)); return; }
   const p = window.__gem;
   if (!p) { el.textContent = ""; }
   else if (p.error || previewMode === "json") {
@@ -888,6 +1011,81 @@ async function renderMaterialize(){
   h += `<p class="note">Compatibility: ${esc(compat)}</p></div>`;
   el.innerHTML = h;
 }
+// "Run" preview mode: test-run the live Gem with a locally-installed ACP coding agent.
+// Materializes the selected Gem into a testbed, drives the agent against a task, and
+// (when "expect tools" is given) shows a verification verdict — the trust primitive.
+function renderRun(){
+  const el = document.getElementById("preview");
+  const r = window.__gemRunResult;
+  let h = `<div class="psummary"><div class="phead"><strong>Run with a local agent</strong> <span class="d">· drives a locally-installed coding agent over ACP against this Gem</span></div>`;
+  h += `<div class="pgroup"><h3>Task</h3><textarea id="gemRunTask" rows="3" placeholder="Describe what the agent should do with this Gem…" style="width:100%;box-sizing:border-box">${esc(__gemRun.task)}</textarea></div>`;
+  h += `<div class="pgroup" style="display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap">`
+    + `<label>Agent <select id="gemRunAgent"><option value="claude"${__gemRun.agent === "claude" ? " selected" : ""}>Claude</option><option value="codex"${__gemRun.agent === "codex" ? " selected" : ""}>Codex (unvalidated)</option></select></label>`
+    + `<label style="flex:1;min-width:160px">Expect tools <span class="d">(optional, comma-separated)</span><input id="gemRunExpect" placeholder="e.g. Write, qa" value="${esc(__gemRun.expect)}" style="width:100%;box-sizing:border-box"></label>`
+    + `<button id="gemRunBtn">Run ▶</button>`
+    + `<span class="d" id="gemRunStatus"></span></div>`;
+  h += `<div id="gemRunOut" class="pgroup">${r ? runResultHtml(r) : '<p class="d">No run yet — select artifacts on the left, enter a task, and Run.</p>'}</div></div>`;
+  el.innerHTML = h;
+  document.getElementById("gemRunBtn").onclick = runGem;
+}
+function runResultHtml(res){
+  if (!res || res.error) return `<pre class="json">${esc(JSON.stringify(res, null, 2))}</pre>`;
+  const run = res.run || {}, rr = run.result || {}, v = res.verification;
+  let h = "";
+  if (v){
+    h += `<div class="prow"><span style="display:inline-block;padding:2px 9px;border-radius:10px;font-weight:600;color:#fff;background:${v.passed ? "#1f7a33" : "#a3301f"}">${v.passed ? "✓ Verified" : "✗ Not verified"}</span></div>`;
+    h += (v.checks || []).map(c => `<div class="prow"><span class="pn">${c.passed ? "✓" : "✗"} ${esc(c.name)}</span> <span class="pm">${esc(c.detail)}</span></div>`).join("");
+  }
+  if (run.ok === false) h += `<div class="prow"><span class="pm">${esc(run.error || "run failed")}</span></div>`;
+  if ((rr.toolCalls || []).length) h += `<h3>Tools</h3><div>` + rr.toolCalls.map(t => `<span style="display:inline-block;padding:2px 8px;margin:2px;border-radius:6px;background:rgba(33,28,21,.08);font-size:12px">${esc(t.title)}${t.status ? " · " + esc(t.status) : ""}</span>`).join("") + `</div>`;
+  if (rr.text) h += `<h3>Agent</h3><div style="white-space:pre-wrap;background:rgba(33,28,21,.04);padding:8px;border-radius:6px">${esc(rr.text)}</div>`;
+  h += `<p class="note">Ran <strong>${esc(res.agent || "")}</strong> · materialized ${(res.materialized && res.materialized.written || []).length} artifact(s) into <code>${esc(res.dir || "")}</code></p>`;
+  return h;
+}
+// Two-step streaming flow: POST /prepare materializes the Gem (carries the full
+// selection) and returns an opaque runId; then EventSource streams the agent run
+// (tool calls + token deltas) live, mirroring the workflow-analyze stream.
+async function runGem(){
+  const taskEl = document.getElementById("gemRunTask");
+  __gemRun.task = taskEl.value.trim();
+  __gemRun.agent = document.getElementById("gemRunAgent").value;
+  __gemRun.expect = document.getElementById("gemRunExpect").value;
+  if (!__gemRun.task){ taskEl.focus(); return; }
+  const btn = document.getElementById("gemRunBtn"), status = document.getElementById("gemRunStatus"), out = document.getElementById("gemRunOut");
+  if (__gemRunES){ __gemRunES.close(); __gemRunES = null; }
+  btn.disabled = true;
+  const t0 = Date.now();
+  const timer = setInterval(() => { status.textContent = "Running… " + ((Date.now() - t0) / 1000).toFixed(0) + "s"; }, 250);
+  const finish = (label) => { clearInterval(timer); status.textContent = label; btn.disabled = false; };
+  // Live result, accumulated as events stream in.
+  const live = { agent: __gemRun.agent, run: { result: { text: "", toolCalls: [] } } };
+  window.__gemRunResult = live;
+  try {
+    status.textContent = "Materializing…";
+    const prep = await (await fetch("/api/gem/run/prepare", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ ...buildSelectionBody(), agent: __gemRun.agent }) })).json();
+    if (prep.error || !prep.runId){ window.__gemRunResult = prep; out.innerHTML = runResultHtml(prep); finish("Failed"); return; }
+    live.dir = prep.runDir; live.materialized = prep.materialized;
+    out.innerHTML = runResultHtml(live);
+    status.textContent = "Running…";
+    const tools = __gemRun.expect.split(",").map(s => s.trim()).filter(Boolean);
+    const qs = new URLSearchParams({ runId: prep.runId, task: __gemRun.task });
+    if (tools.length) qs.set("expectTools", tools.join(","));
+    const es = new EventSource(`/api/gem/run/stream?${qs}`); __gemRunES = es;
+    es.addEventListener("tool", e => { live.run.result.toolCalls.push(JSON.parse(e.data)); out.innerHTML = runResultHtml(live); });
+    es.addEventListener("delta", e => { live.run.result.text += JSON.parse(e.data).text; out.innerHTML = runResultHtml(live); });
+    es.addEventListener("done", e => {
+      const d = JSON.parse(e.data);
+      window.__gemRunResult = { ...live, run: d.run, verification: d.verification, agent: d.agent };
+      out.innerHTML = runResultHtml(window.__gemRunResult);
+      es.close(); __gemRunES = null;
+      finish(d.run && d.run.ok ? "Done in " + ((Date.now() - t0) / 1000).toFixed(1) + "s" : "Failed");
+    });
+    es.addEventListener("failed", e => { out.innerHTML = `<p class="pm">${esc(JSON.parse(e.data).message || "failed")}</p>`; es.close(); __gemRunES = null; finish("Failed"); });
+    es.onerror = () => { es.close(); __gemRunES = null; finish("Connection lost"); };
+  } catch (e) {
+    out.innerHTML = `<p class="pm">${esc(String(e))}</p>`; finish("Error");
+  }
+}
 // Managed Agents publish: offline preview of the agent payload + a gated Publish action.
 let __publishReady = null, __publishRequestId = null, __publishFingerprint = null, __deployTargets = null;
 // The default deploy backend for each materialize target/harness. Selecting a harness in the
@@ -1217,6 +1415,7 @@ document.getElementById("none").addEventListener("click", () => {
   });
 });
 document.getElementById("name").addEventListener("input", () => { nameEdited = true; refresh(); });
+document.getElementById("channelPicker").addEventListener("change", () => refresh());
 document.getElementById("dl").addEventListener("click", () => {
   const blob = new Blob([JSON.stringify(window.__gem || {}, null, 2)], { type: "application/json" });
   const a = document.createElement("a"); a.href = URL.createObjectURL(blob); a.download = (document.getElementById("name").value || "gem") + ".json"; a.click();
@@ -1233,6 +1432,17 @@ document.getElementById("save").addEventListener("click", async () => {
   const n = Object.keys(r.files || {}).length, sk = (r.skipped || []).length;
   status.textContent = `Saved ${n} files to ${r.path}` + (sk ? ` · ${sk} skipped` : "");
 });
+// Download one portable, self-verifying .gem (gzipped tar) to hand to someone else.
+document.getElementById("dlgem").addEventListener("click", async () => {
+  const status = document.getElementById("archiveStatus");
+  status.textContent = "Building .gem…";
+  const r = await (await fetch("/api/archive", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ ...buildSelectionBody(), tar: true }) })).json();
+  if (!r.tarGz) { status.textContent = "No archive — select artifacts on the left."; return; }
+  const bytes = Uint8Array.from(atob(r.tarGz), c => c.charCodeAt(0));
+  const blob = new Blob([bytes], { type: "application/gzip" });
+  const a = document.createElement("a"); a.href = URL.createObjectURL(blob); a.download = (document.getElementById("name").value || "gem") + ".gem"; a.click();
+  status.textContent = `Downloaded ${a.download} — share it; install it with “Get gems”.`;
+});
 // Download the gem archive as a single .tar.gz (the transport/shipping form).
 document.getElementById("dltar").addEventListener("click", async () => {
   const status = document.getElementById("archiveStatus");
@@ -1244,6 +1454,52 @@ document.getElementById("dltar").addEventListener("click", async () => {
   const a = document.createElement("a"); a.href = URL.createObjectURL(blob); a.download = (document.getElementById("name").value || "gem") + ".gem.tar.gz"; a.click();
   status.textContent = `Downloaded ${a.download}`;
 });
+// Get gems: install a shared .gem by URL/path, or search the configured registry.
+(function(){
+  const modal = document.getElementById("getModal");
+  const open = () => {
+    document.getElementById("installTarget").innerHTML = document.getElementById("target").innerHTML;
+    modal.hidden = false;
+  };
+  document.getElementById("getBtn").addEventListener("click", open);
+  document.getElementById("getClose").addEventListener("click", () => { modal.hidden = true; });
+  modal.addEventListener("click", e => { if (e.target === modal) modal.hidden = true; });
+
+  document.getElementById("installBtn").addEventListener("click", async () => {
+    const src = document.getElementById("installSrc").value.trim();
+    const status = document.getElementById("installStatus");
+    if (!src) { status.textContent = "Enter a .gem URL or local path."; return; }
+    const body = { target: document.getElementById("installTarget").value };
+    if (/^https?:\/\//i.test(src)) body.gemUrl = src; else body.gemPath = src;
+    status.textContent = "Installing…";
+    try {
+      const m = await (await fetch("/api/materialize", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(body) })).json();
+      if (m.error) { status.textContent = "Failed: " + m.error; return; }
+      window.__materialize = m;
+      status.textContent = `Installed — ${Object.keys(m.files || {}).length} files for ${m.target}. Switch the preview to Materialize to inspect.`;
+    } catch (e) { status.textContent = "Failed: " + (e && e.message || e); }
+  });
+
+  async function runSearch(){
+    const el = document.getElementById("regResults");
+    const q = document.getElementById("regSearch").value.trim();
+    el.innerHTML = '<p class="note">Searching…</p>';
+    try {
+      const ready = await (await fetch("/api/registry/ready")).json();
+      if (!ready.ready) { el.innerHTML = '<p class="note">No registry configured (set <code>AGENTGEM_REGISTRY_REPO</code>). You can still install a .gem by URL or path above.</p>'; return; }
+      const r = await (await fetch("/api/registry/search?q=" + encodeURIComponent(q) + "&limit=25")).json();
+      const hits = r.results || [];
+      if (!hits.length) { el.innerHTML = '<p class="note">No matching gems.</p>'; return; }
+      el.innerHTML = hits.map(h => {
+        const kinds = (h.artifactKinds || []).join(", ");
+        return `<button type="button" class="prow" data-ref="${esc(h.key)}"><span class="pn">${esc(h.key)}</span> <span class="pm">${esc(h.latest)}${kinds ? " · " + esc(kinds) : ""}</span></button>` +
+          (h.description ? `<div class="note" style="margin:0 0 6px 8px">${esc(h.description)}</div>` : "");
+      }).join("");
+    } catch (e) { el.innerHTML = '<p class="note">Search failed: ' + esc(String(e && e.message || e)) + "</p>"; }
+  }
+  document.getElementById("regSearchBtn").addEventListener("click", runSearch);
+  document.getElementById("regSearch").addEventListener("keydown", e => { if (e.key === "Enter") runSearch(); });
+})();
 // Export ▾ dropdown: toggle, close on outside click / Escape, and close after any item runs.
 (function(){
   const btn = document.getElementById("exportBtn"), menu = document.getElementById("exportMenu");
@@ -1403,7 +1659,8 @@ async function wsRender(target){
   tree.innerHTML = `<p class="d">Rendering ${esc(target)}…</p>`;
   let r;
   try {
-    const res = await fetch("/api/workspace/render", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ name: wsCurrent, target }) });
+    const body = { name: wsCurrent, target, ...(target === "a2a" && a2aServerMode ? { a2aServer: true } : {}) };
+    const res = await fetch("/api/workspace/render", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(body) });
     if (!res.ok) throw new Error(`HTTP ${res.status}`);
     r = await res.json();
   } catch {