cohesive vividness (0.33.0): avatars + pulses in My Booth + agent modal

- agent detail modal header gets the class avatar
- My Booth 'My classes' rows get avatar + online-pulse indicator (matches Browse)
- online instance status dots pulse; consistent visual language across the app

index.html

@@ -7,7 +7,7 @@
       name="description"
       content="amerc is an agent mercenary layer for embedding, bringing, and hosting agents across vertical software boundaries."
     />
-    <meta name="version" content="0.32.0-toasts" />
+    <meta name="version" content="0.33.0-cohesive" />
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "amerc-site",
-  "version": "0.32.0-toasts",
+  "version": "0.33.0-cohesive",
   "private": true,
   "type": "module",
   "scripts": {

src/AgentPlatform.jsx

@@ -85,7 +85,10 @@ function ClassModal({ id, auth, onClose }) {
     <div className="ap-modal" onClick={onClose}>
       <div className="ap-modal-box" onClick={(e) => e.stopPropagation()}>
         <div className="ap-modal-head">
-          <div><h3>{c.name}</h3><span className="ap-kind">{c.kind}</span> <span className="ap-by">by {c.owner}</span></div>
+          <div className="ap-modal-title">
+            <span className="ap-avatar" style={avatarStyle(c.name)}>{classEmoji(c)}</span>
+            <div><h3>{c.name}</h3><span className="ap-kind">{c.kind}</span> <span className="ap-by">by {c.owner}</span></div>
+          </div>
           <button onClick={onClose}>✕</button>
         </div>
         <p className="ap-desc">{c.description}</p>
@@ -248,7 +251,10 @@ export function BoothDashboard({ auth, setRoute }) {
           <h4 className="ap-h4">My classes</h4>
           {classes.map((c) => (
             <div key={c.id} className="ap-mine-class">
-              <div className="ap-mine-row"><strong>{c.name}</strong><span className="ap-kind">{c.visibility}</span><span>{c.onlineCount}/{c.instanceCount} online</span>
+              <div className="ap-mine-row">
+                <span className="ap-avatar ap-avatar-sm" style={avatarStyle(c.name)}>{classEmoji(c)}</span>
+                <strong>{c.name}</strong><span className="ap-kind">{c.visibility}</span>
+                <span className="ap-online"><i className={c.onlineCount ? 'pulse' : ''} style={{ background: c.onlineCount ? STATUS_COLOR.online : '#555' }} />{c.onlineCount}/{c.instanceCount}</span>
                 <button className="px-action" onClick={() => publishInstance(c.id)}>+ Publish instance</button></div>
               <div className="ap-card-tags">{c.tags.map((t) => <span key={t}>{t}</span>)}</div>
             </div>
@@ -257,7 +263,7 @@ export function BoothDashboard({ auth, setRoute }) {
           <h4 className="ap-h4">My instances</h4>
           {insts.map((i) => (
             <div key={i.id} className="ap-mine-inst">
-              <span className="ap-inst-status" style={{ background: STATUS_COLOR[i.status] }} /> #{i.id} <em>{i.status}</em>
+              <span className={`ap-inst-status${i.status === 'online' ? ' pulse' : ''}`} style={{ background: STATUS_COLOR[i.status] }} /> #{i.id} <em>{i.status}</em>
               {i.accesskey && <code className="ap-token" title="accesskey — your broker connects with this" onClick={() => copyToast(i.accesskey)}>{i.accesskey.slice(0, 14)}… ⧉</code>}
               <button className="px-action" onClick={() => shutdown(i)}>shut down</button>
             </div>

src/Scene2D.jsx

@@ -6,7 +6,7 @@ import Mansion from './Mansion.jsx';
 import TavernGame from './TavernGame.jsx';
 import { api } from './api.js';
 
-const RELEASE = '0.32.0-toasts';
+const RELEASE = '0.33.0-cohesive';
 
 const NAV = [
   { id: 'home', label: 'Tavern' },

src/styles.css

@@ -1152,3 +1152,10 @@ button {
 .amerc-toast { background: #142238; color: #eaf2ff; border: 1px solid #2e4a6e; border-left: 3px solid #36f0b0; border-radius: 9px; padding: 11px 16px; font-family: Inter, sans-serif; font-size: 13px; box-shadow: 0 10px 28px rgba(0,0,0,0.55); opacity: 0; transform: translateX(24px); transition: opacity .25s ease, transform .25s ease; max-width: 320px; }
 .amerc-toast.in { opacity: 1; transform: none; }
 .amerc-toast.t-err { border-left-color: #ff7a8c; }
+
+/* booth + modal vividness (0.33) */
+.ap-modal-title { display: flex; align-items: center; gap: 12px; }
+.ap-avatar-sm { width: 28px; height: 28px; border-radius: 8px; font-size: 15px; }
+.ap-inst-status.pulse { box-shadow: 0 0 0 0 rgba(54,240,176,0.7); animation: ap-pulse 1.8s infinite; }
+.ap-mine-class { display: flex; flex-direction: column; gap: 6px; }
+.ap-mine-row .ap-avatar-sm { flex: none; }