From a138ff1ebbd3f53512d98dc5aa50b48c78e14742 Mon Sep 17 00:00:00 2001
From: artheru <artheru@gmail.com>
Date: Wed, 10 Jun 2026 05:51:30 +0800
Subject: [PATCH] agent-use embed polish (0.37.0)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 'Embed this agent on any website' is now a prominent block with one-click Copy
  (+ copyToast) instead of a buried <details>; usage hint included
- Web PTY mode points to the Backstage/后台 terminal tab
- core loop verified: browse -> Use -> live connected chatbox + embed snippet
---
 index.html            | 2 +-
 package.json          | 2 +-
 src/AgentPlatform.jsx | 8 +++++---
 src/Scene2D.jsx       | 2 +-
 src/styles.css        | 7 +++++++
 5 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 2f03f33..f070067 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#0e0a14" />
     <meta name="description" content="amerc is the agent mercenary tavern — hire, run, publish, and remotely deliver AI agents across software boundaries. No infrastructure, just skills." />
-    <meta name="version" content="0.36.0-https" />
+    <meta name="version" content="0.37.0-embed" />
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <!-- Open Graph / social share -->
     <meta property="og:type" content="website" />
diff --git a/package.json b/package.json
index b26a9ac..ad019c4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "amerc-site",
-  "version": "0.36.0-https",
+  "version": "0.37.0-embed",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/src/AgentPlatform.jsx b/src/AgentPlatform.jsx
index dd1c6a7..a2a687a 100644
--- a/src/AgentPlatform.jsx
+++ b/src/AgentPlatform.jsx
@@ -153,11 +153,13 @@ export function UsePanel({ instance, onClose }) {
         <>
           <iframe title="agent" className="ap-iframe" src={`https://webagent.amerc.ai/chat_session?session=${encodeURIComponent(sess.relayToken)}`} />
           {mode === 'chatbox' && (
-            <details className="ap-embed">
-              <summary>Embed this agent on any site</summary>
+            <div className="ap-embed">
+              <div className="ap-embed-head"><span>📎 Embed this agent on any website</span><button className="px-action" onClick={() => copyToast(`<script src="${sess.chatboxJs}"></script>`, 'Embed snippet copied')}>Copy snippet</button></div>
               <code>{`<script src="${sess.chatboxJs}"></script>`}</code>
-            </details>
+              <p className="ap-hint">Paste before <code>&lt;/body&gt;</code> — a chat bubble appears bottom-right, and on connect your page's skills are injected into the agent.</p>
+            </div>
           )}
+          {mode === 'webpty' && <p className="ap-hint ap-pty-note">🖥️ Switch to the <b>后台 / Backstage</b> tab above to watch and drive the agent's live terminal.</p>}
         </>
       )}
     </div>
diff --git a/src/Scene2D.jsx b/src/Scene2D.jsx
index 3653984..45335cf 100644
--- a/src/Scene2D.jsx
+++ b/src/Scene2D.jsx
@@ -7,7 +7,7 @@ import Account from './Account.jsx';
 import TavernGame from './TavernGame.jsx';
 import { api } from './api.js';
 
-const RELEASE = '0.36.0-https';
+const RELEASE = '0.37.0-embed';
 
 const NAV = [
   { id: 'home', label: 'Tavern' },
diff --git a/src/styles.css b/src/styles.css
index 0e8f241..cbad9d5 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1174,3 +1174,10 @@ button {
 .acct-form { display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
 .acct-form input { padding: 10px; border-radius: 8px; background: #0a0f1a; border: 1px solid #2e2440; color: #eaf2ff; font-family: inherit; }
 @media (max-width: 680px) { .acct-grid { grid-template-columns: 1fr; } }
+
+/* agent-use embed prominence (0.37) */
+.ap-embed { padding: 14px; background: #0a0f1a; border-top: 1px solid #1d1430; }
+.ap-embed-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; font-size: 13px; color: #c9b8e6; }
+.ap-embed > code { display: block; color: #7fe9ff; font-family: ui-monospace, monospace; font-size: 12px; background: #07060c; padding: 10px 12px; border-radius: 8px; word-break: break-all; border: 1px solid #1d2a3a; }
+.ap-embed .ap-hint { margin: 8px 0 0; } .ap-embed .ap-hint code { display: inline; padding: 1px 5px; background: #162032; color: #9d8fc0; }
+.ap-pty-note { padding: 12px 14px; }