@clawlabz/clawnetwork 0.1.1 → 0.1.2

package/index.ts

@@ -807,24 +807,28 @@ function buildUiHtml(cfg: PluginConfig): string {
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>ClawNetwork Node Dashboard</title>
-  <link rel="icon" href="https://cdn.clawlabz.xyz/brand/favicon.png">
+  <link rel="icon" href="https://explorer.clawlabz.xyz/favicon.png">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
   <style>
     :root {
-      --bg: #0a0a12;
-      --bg-panel: #12121f;
-      --border: #1e1e3a;
-      --accent: #00ccff;
-      --accent-dim: rgba(0, 204, 255, 0.15);
-      --green: #00ff88;
-      --green-dim: rgba(0, 255, 136, 0.15);
-      --purple: #8b5cf6;
-      --text: #e0e0f0;
-      --text-dim: #666688;
-      --danger: #ff4455;
-      --font: system-ui, -apple-system, sans-serif;
-      --font-mono: 'SF Mono', 'Fira Code', Consolas, monospace;
+      --bg: #0a0705;
+      --bg-panel: #140e0a;
+      --border: #2a1c14;
+      --accent: #F96706;
+      --accent-dim: rgba(249, 103, 6, 0.15);
+      --accent-light: #FF8C3A;
+      --purple: #a855f7;
+      --purple-dim: rgba(168, 85, 247, 0.15);
+      --green: #22c55e;
+      --green-dim: rgba(34, 197, 94, 0.15);
+      --text: #fffaf5;
+      --text-dim: #8892a0;
+      --danger: #ef4444;
+      --font: 'Space Grotesk', system-ui, -apple-system, sans-serif;
+      --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
       --radius: 10px;
-      --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+      --shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
     }
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     body { background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.6; min-height: 100vh; }
@@ -834,16 +838,17 @@ function buildUiHtml(cfg: PluginConfig): string {
     .header { background: var(--bg-panel); border-bottom: 1px solid var(--border); padding: 16px 0; position: sticky; top: 0; z-index: 100; }
     .header .container { display: flex; align-items: center; justify-content: space-between; }
     .logo { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
-    .logo-claw { color: var(--accent); }
-    .logo-net { color: var(--green); }
+    .logo-claw { color: #ffffff; }
+    .logo-net { color: var(--accent); }
     .header-badge { font-size: 11px; background: var(--accent-dim); color: var(--accent); padding: 2px 8px; border-radius: 4px; }
 
-    .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 24px 0; }
+    .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
     .stat-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
     .stat-label { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
     .stat-value { font-size: 28px; font-weight: 700; font-family: var(--font-mono); margin-top: 4px; }
     .stat-value.green { color: var(--green); }
     .stat-value.accent { color: var(--accent); }
+    .stat-value.purple { color: var(--purple); }
     .stat-value.danger { color: var(--danger); }
 
     .panel { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin: 16px 0; }
@@ -858,13 +863,23 @@ function buildUiHtml(cfg: PluginConfig): string {
     .status-dot.offline { background: var(--danger); }
     .status-dot.syncing { background: #ffaa00; animation: pulse 1.5s infinite; }
 
-    .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-panel); color: var(--text); font-size: 13px; cursor: pointer; transition: 0.2s; }
+    .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-panel); color: var(--text); font-size: 13px; cursor: pointer; transition: 0.2s; font-family: var(--font); }
     .btn:hover { border-color: var(--accent); color: var(--accent); }
     .btn.danger:hover { border-color: var(--danger); color: var(--danger); }
     .btn.primary { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
-    .btn-group { display: flex; gap: 8px; margin: 16px 0; flex-wrap: wrap; }
+    .node-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--border); }
+    .node-controls .spacer { flex: 1; }
 
-    .logs-box { background: #080810; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; font-family: var(--font-mono); font-size: 12px; max-height: 300px; overflow-y: auto; white-space: pre-wrap; color: var(--text-dim); line-height: 1.8; }
+    .wallet-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
+    .wallet-balance { font-size: 36px; font-weight: 800; font-family: var(--font-mono); color: var(--accent); letter-spacing: -1px; line-height: 1; }
+    .wallet-balance-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
+    .wallet-addr-wrap { flex: 1; min-width: 0; }
+    .wallet-addr-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
+    .wallet-addr { font-family: var(--font-mono); font-size: 12px; background: var(--bg); padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border); word-break: break-all; display: flex; align-items: center; gap: 8px; }
+    .copy-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 12px; padding: 2px 8px; border-radius: 4px; border: 1px solid var(--accent); white-space: nowrap; font-family: var(--font); transition: 0.2s; }
+    .copy-btn:hover { background: var(--accent-dim); }
+
+    .logs-box { background: #060402; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; font-family: var(--font-mono); font-size: 12px; max-height: 300px; overflow-y: auto; white-space: pre-wrap; color: var(--text-dim); line-height: 1.8; }
 
     .wallet-addr { font-family: var(--font-mono); font-size: 13px; background: var(--bg); padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border); word-break: break-all; display: flex; align-items: center; gap: 8px; }
     .copy-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 14px; padding: 2px 6px; }
@@ -873,7 +888,7 @@ function buildUiHtml(cfg: PluginConfig): string {
     .toast { position: fixed; bottom: 24px; right: 24px; background: var(--bg-panel); border: 1px solid var(--accent); color: var(--accent); padding: 12px 20px; border-radius: 8px; font-size: 13px; opacity: 0; transition: 0.3s; z-index: 1000; }
     .toast.show { opacity: 1; }
 
-    .quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 16px 0; }
+    .quick-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0 0; }
     .quick-action { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); }
     .quick-action:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
     .quick-action .qa-icon { font-size: 18px; width: 28px; text-align: center; }
@@ -890,77 +905,81 @@ function buildUiHtml(cfg: PluginConfig): string {
     .modal-actions { display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end; }
     .modal-close { background: none; border: 1px solid var(--border); color: var(--text-dim); padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; }
     .modal-close:hover { border-color: var(--text); color: var(--text); }
+    .modal-input { width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; font-size: 14px; color: var(--text); font-family: var(--font-mono); outline: none; margin-top: 4px; }
+    .modal-input:focus { border-color: var(--accent); }
+    .modal-hint { font-size: 12px; color: var(--text-dim); margin-top: 6px; line-height: 1.5; }
   </style>
 </head>
 <body>
   <header class="header">
     <div class="container">
       <div style="display:flex;align-items:center;gap:14px">
-        <div class="logo"><span class="logo-claw">Claw</span><span class="logo-net">Network</span></div>
+        <div class="logo"><img src="https://explorer.clawlabz.xyz/favicon.png" style="width:28px;height:28px;border-radius:6px;vertical-align:middle;margin-right:8px"><span class="logo-claw">Claw</span><span class="logo-net">Network</span></div>
         <span class="header-badge">Node Dashboard</span>
       </div>
       <span id="lastUpdate" style="font-size:12px;color:var(--text-dim)"></span>
     </div>
   </header>
 
-  <main class="container" style="padding-top:8px;padding-bottom:40px">
-    <div class="stats-grid">
-      <div class="stat-card">
-        <div class="stat-label">Status</div>
-        <div class="stat-value" id="statusValue"><span class="status-dot offline"></span>Offline</div>
-      </div>
-      <div class="stat-card">
-        <div class="stat-label">Block Height</div>
-        <div class="stat-value accent" id="heightValue">—</div>
-      </div>
-      <div class="stat-card">
-        <div class="stat-label">Peers</div>
-        <div class="stat-value" id="peersValue">—</div>
-      </div>
-      <div class="stat-card">
-        <div class="stat-label">Uptime</div>
-        <div class="stat-value" id="uptimeValue">—</div>
-      </div>
-    </div>
-
-    <div class="btn-group">
-      <button class="btn primary" onclick="doAction('start')">Start Node</button>
-      <button class="btn danger" onclick="doAction('stop')">Stop Node</button>
-      <button class="btn" onclick="doAction('faucet')">Faucet (testnet)</button>
-      <button class="btn" onclick="refreshLogs()">Refresh Logs</button>
-    </div>
+  <main class="container" style="padding-top:16px;padding-bottom:40px">
 
     <div class="panel">
-      <div class="panel-title">Wallet</div>
-      <div id="walletInfo">Loading...</div>
-      <div class="quick-actions" id="walletActions" style="display:none">
-        <div class="quick-action" onclick="copyAddress()">
-          <span class="qa-icon">&#x1F4CB;</span>
-          <div><div class="qa-label">Copy Address</div><div class="qa-hint">Share to receive CLAW</div></div>
-        </div>
-        <div class="quick-action" onclick="importToExtension()" id="qaImportExt" style="display:none">
-          <span class="qa-icon">&#x1F517;</span>
-          <div><div class="qa-label">Import to Extension</div><div class="qa-hint">One-click import to browser wallet</div></div>
+      <div class="panel-title">Node</div>
+      <div class="stats-grid" style="margin:0 0 4px">
+        <div class="stat-card">
+          <div class="stat-label">Status</div>
+          <div class="stat-value" id="statusValue"><span class="status-dot offline"></span>Offline</div>
         </div>
-        <div class="quick-action warn" onclick="showExportKey()">
-          <span class="qa-icon">&#x1F511;</span>
-          <div><div class="qa-label">Export Private Key</div><div class="qa-hint">Manual copy for backup</div></div>
+        <div class="stat-card">
+          <div class="stat-label">Block Height</div>
+          <div class="stat-value accent" id="heightValue">—</div>
         </div>
-        <div class="quick-action" onclick="openExplorer()">
-          <span class="qa-icon">&#x1F50D;</span>
-          <div><div class="qa-label">View on Explorer</div><div class="qa-hint">Transaction history</div></div>
+        <div class="stat-card">
+          <div class="stat-label">Peers</div>
+          <div class="stat-value" id="peersValue">—</div>
         </div>
-        <div class="quick-action" onclick="transferFromDashboard()">
-          <span class="qa-icon">&#x1F4B8;</span>
-          <div><div class="qa-label">Transfer CLAW</div><div class="qa-hint">Send to any address</div></div>
+        <div class="stat-card">
+          <div class="stat-label">Uptime</div>
+          <div class="stat-value" id="uptimeValue">—</div>
         </div>
-        <div class="quick-action" onclick="registerAgentFromDashboard()">
-          <span class="qa-icon">&#x1F916;</span>
-          <div><div class="qa-label">Register Agent</div><div class="qa-hint">On-chain identity</div></div>
+      </div>
+      <div class="node-controls">
+        <button class="btn primary" onclick="doAction('start')">&#x25B6; Start Node</button>
+        <button class="btn danger" onclick="doAction('stop')">&#x25A0; Stop Node</button>
+      </div>
+    </div>
+
+    <div class="panel" id="walletPanel">
+      <div class="panel-title">Wallet</div>
+      <div id="walletEmpty" style="color:var(--text-dim);font-size:13px">No wallet yet — start the node to generate one</div>
+      <div id="walletLoaded" style="display:none">
+        <div class="wallet-hero">
+          <div>
+            <div class="wallet-balance-label">Balance</div>
+            <div class="wallet-balance" id="walletBalance">—</div>
+          </div>
+          <div class="wallet-addr-wrap">
+            <div class="wallet-addr-label">Address</div>
+            <div class="wallet-addr"><span id="walletAddrText" style="flex:1;min-width:0;word-break:break-all"></span><button class="copy-btn" onclick="copyText(cachedAddress)">Copy</button></div>
+          </div>
         </div>
-        <div class="quick-action" onclick="openFaucet()">
-          <span class="qa-icon">&#x1F6B0;</span>
-          <div><div class="qa-label">Open Faucet</div><div class="qa-hint">Get testnet CLAW</div></div>
+        <div class="quick-actions" id="walletActions">
+          <div class="quick-action" onclick="importToExtension()" id="qaImportExt">
+            <span class="qa-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></span>
+            <div><div class="qa-label">Import to Extension</div><div class="qa-hint" id="qaImportHint">One-click import to browser wallet</div></div>
+          </div>
+          <div class="quick-action warn" onclick="showExportKey()">
+            <span class="qa-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="15.5" r="5.5"/><path d="m21 2-9.6 9.6"/><path d="m15.5 7.5 3 3L22 7l-3-3"/></svg></span>
+            <div><div class="qa-label">Export Private Key</div><div class="qa-hint">Manual copy for backup</div></div>
+          </div>
+          <div class="quick-action" onclick="openExplorer()">
+            <span class="qa-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg></span>
+            <div><div class="qa-label">View on Explorer</div><div class="qa-hint">Transaction history</div></div>
+          </div>
+          <div class="quick-action" id="qaRegister" onclick="handleRegisterAgent()">
+            <span class="qa-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M15 2v2M9 2v2M15 20v2M9 20v2M2 15h2M2 9h2M20 15h2M20 9h2"/></svg></span>
+            <div><div class="qa-label" id="qaRegisterLabel">Register Agent</div><div class="qa-hint" id="qaRegisterHint">On-chain identity</div></div>
+          </div>
         </div>
       </div>
     </div>
@@ -971,13 +990,57 @@ function buildUiHtml(cfg: PluginConfig): string {
     </div>
 
     <div class="panel">
-      <div class="panel-title">Recent Logs</div>
+      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px">
+        <div class="panel-title" style="margin-bottom:0">Recent Logs</div>
+        <button class="btn" style="font-size:12px;padding:5px 12px" onclick="refreshLogs()">&#x21BB; Refresh</button>
+      </div>
       <div class="logs-box" id="logsBox">Loading...</div>
     </div>
   </main>
 
+  <footer style="border-top:1px solid var(--border);padding:24px 0;margin-top:16px">
+    <div class="container" style="display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between">
+      <div style="display:flex;align-items:center;gap:8px">
+        <img src="https://explorer.clawlabz.xyz/favicon.png" style="width:18px;height:18px;border-radius:4px;opacity:0.7">
+        <span style="font-size:12px;color:var(--text-dim)">© 2026 ClawLabz</span>
+      </div>
+      <div style="display:flex;gap:20px;flex-wrap:wrap">
+        <a href="https://chain.clawlabz.xyz" target="_blank" style="font-size:12px;color:var(--text-dim);text-decoration:none;transition:0.2s" onmouseover="this.style.color='var(--accent)'" onmouseout="this.style.color='var(--text-dim)'">Chain</a>
+        <a href="https://explorer.clawlabz.xyz" target="_blank" style="font-size:12px;color:var(--text-dim);text-decoration:none;transition:0.2s" onmouseover="this.style.color='var(--accent)'" onmouseout="this.style.color='var(--text-dim)'">Explorer</a>
+        <a href="https://chrome.google.com/webstore/search/ClawNetwork" target="_blank" style="font-size:12px;color:var(--text-dim);text-decoration:none;transition:0.2s" onmouseover="this.style.color='var(--accent)'" onmouseout="this.style.color='var(--text-dim)'">Wallet Extension</a>
+      </div>
+    </div>
+  </footer>
+
   <div class="toast" id="toast"></div>
 
+  <div class="modal-overlay" id="registerModal" onclick="if(event.target===this)closeRegisterModal()">
+    <div class="modal">
+      <div class="modal-title">Register Agent</div>
+      <p style="font-size:13px;color:var(--text-dim);margin:0 0 12px">Register your wallet as an AI Agent on ClawNetwork. The name is your on-chain identity — it does not need to be unique globally (the wallet address is what's unique). Registration is gas-free on mainnet.</p>
+      <input id="registerNameInput" class="modal-input" type="text" placeholder="my-agent-name" maxlength="32" onkeydown="if(event.key==='Enter')submitRegisterAgent()" />
+      <div class="modal-hint">Allowed: letters, numbers, hyphens, underscores. Max 32 chars.</div>
+      <div class="modal-actions">
+        <button class="modal-close" onclick="closeRegisterModal()">Cancel</button>
+        <button class="btn primary" onclick="submitRegisterAgent()">Register</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-overlay" id="installModal" onclick="if(event.target===this)closeInstallModal()">
+    <div class="modal">
+      <div class="modal-title">Install ClawNetwork Wallet</div>
+      <p style="font-size:13px;color:var(--text-dim);margin:0 0 16px;line-height:1.6">The ClawNetwork browser extension is not detected. Install it first, then click Import to Extension to import your node wallet.</p>
+      <div style="display:flex;gap:10px;flex-direction:column">
+        <a href="https://chrome.google.com/webstore/search/ClawNetwork" target="_blank" class="btn primary" style="text-decoration:none;justify-content:center;padding:10px 16px">Open Chrome Web Store</a>
+        <a href="https://chain.clawlabz.xyz" target="_blank" style="font-size:12px;color:var(--text-dim);text-decoration:none;text-align:center" onmouseover="this.style.color='var(--accent)'" onmouseout="this.style.color='var(--text-dim)'">Learn more at chain.clawlabz.xyz →</a>
+      </div>
+      <div class="modal-actions" style="margin-top:16px">
+        <button class="modal-close" onclick="closeInstallModal()">Close</button>
+      </div>
+    </div>
+  </div>
+
   <div class="modal-overlay" id="exportModal" onclick="if(event.target===this)closeExportModal()">
     <div class="modal">
       <div class="modal-title">Export Private Key</div>
@@ -1006,6 +1069,7 @@ function buildUiHtml(cfg: PluginConfig): string {
     let cachedAddress = '';
     let cachedNetwork = '';
     let cachedKey = '';
+    let cachedAgentName = '';   // '' = not registered, string = registered name
 
     function copyText(text) {
       navigator.clipboard.writeText(text).then(() => toast('Copied!')).catch(() => {});
@@ -1050,16 +1114,13 @@ function buildUiHtml(cfg: PluginConfig): string {
       window.open('https://chain.clawlabz.xyz/faucet', '_blank');
     }
 
-    // Detect ClawNetwork extension provider
+    // Detect ClawNetwork extension provider (for enhanced flow when available)
     let hasExtension = false;
     function checkExtension() {
       if (window.clawNetwork && window.clawNetwork.isClawNetwork) {
         hasExtension = true;
-        const el = document.getElementById('qaImportExt');
-        if (el) el.style.display = '';
       }
     }
-    // Check immediately and after a short delay (extension injects at document_start)
     checkExtension();
     setTimeout(checkExtension, 1000);
     setTimeout(checkExtension, 3000);
@@ -1083,7 +1144,10 @@ function buildUiHtml(cfg: PluginConfig): string {
         } catch (e) { /* fall through to provider method */ }
       }
       // Fallback: use window.clawNetwork provider
-      if (!window.clawNetwork) { toast('ClawNetwork extension not detected. Install it first.'); return; }
+      if (!window.clawNetwork) {
+        document.getElementById('installModal').classList.add('open');
+        return;
+      }
       toast('Connecting to extension...');
       try {
         await window.clawNetwork.request({ method: 'claw_requestAccounts' });
@@ -1145,21 +1209,45 @@ function buildUiHtml(cfg: PluginConfig): string {
       setTimeout(fetchStatus, 3000);
     }
 
-    async function registerAgentFromDashboard() {
-      const name = prompt('Agent name (alphanumeric, max 32 chars):', 'openclaw-agent');
-      if (!name) return;
+    function closeInstallModal() {
+      document.getElementById('installModal').classList.remove('open');
+    }
+
+    function handleRegisterAgent() {
+      if (cachedAgentName) {
+        toast('Already registered as "' + cachedAgentName + '"');
+        return;
+      }
+      openRegisterModal();
+    }
+
+    function openRegisterModal() {
+      document.getElementById('registerNameInput').value = '';
+      document.getElementById('registerModal').classList.add('open');
+      setTimeout(() => document.getElementById('registerNameInput').focus(), 50);
+    }
+
+    function closeRegisterModal() {
+      document.getElementById('registerModal').classList.remove('open');
+    }
+
+    async function submitRegisterAgent() {
+      const raw = document.getElementById('registerNameInput').value.trim();
+      const name = raw.replace(/[^a-zA-Z0-9_-]/g, '').slice(0, 32);
+      if (!name) { toast('Please enter an agent name'); return; }
+      closeRegisterModal();
       if (window.clawNetwork) {
         try {
           toast('Approve registration in extension...');
           await window.clawNetwork.request({ method: 'claw_requestAccounts' });
           await window.clawNetwork.request({ method: 'claw_registerAgent', params: [name] });
-          toast('Agent registered!');
+          toast('Agent "' + name + '" registered!');
         } catch (e) { toast('Registration failed: ' + (e.message || e)); }
       } else {
         try {
           const res = await fetch(API + '/api/agent/register', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({name}) });
           const data = await res.json();
-          toast(data.ok ? 'Agent registered!' : 'Error: ' + data.error);
+          toast(data.ok ? 'Agent "' + name + '" registered!' : 'Error: ' + data.error);
         } catch (e) { toast('Registration failed: ' + e.message); }
       }
     }
@@ -1170,7 +1258,10 @@ function buildUiHtml(cfg: PluginConfig): string {
         const data = await res.json();
         renderStatus(data);
         document.getElementById('lastUpdate').textContent = 'Updated: ' + new Date().toLocaleTimeString();
-      } catch (e) { console.error(e); }
+      } catch (e) {
+        console.error(e);
+        renderStatus({ running: false, blockHeight: null, peerCount: null, walletAddress: '', network: 'mainnet', syncMode: 'light', rpcUrl: 'http://localhost:19877', pluginVersion: '0.1.1', restartCount: 0, dataDir: '', balance: '', syncing: false, uptimeFormatted: '—', pid: null });
+      }
     }
 
     function renderStatus(s) {
@@ -1192,12 +1283,34 @@ function buildUiHtml(cfg: PluginConfig): string {
       // Wallet
       cachedAddress = s.walletAddress || '';
       cachedNetwork = s.network || '';
-      const wHtml = s.walletAddress
-        ? '<div class="wallet-addr">' + s.walletAddress + ' <button class="copy-btn" onclick="copyText(\\''+s.walletAddress+'\\')">Copy</button></div>' +
-          (s.balance ? '<div style="margin-top:8px;font-size:14px;color:var(--green)">' + s.balance + '</div>' : '')
-        : '<div style="color:var(--text-dim)">No wallet yet — start the node to generate one</div>';
-      document.getElementById('walletInfo').innerHTML = wHtml;
-      document.getElementById('walletActions').style.display = s.walletAddress ? '' : 'none';
+      if (s.walletAddress) {
+        document.getElementById('walletEmpty').style.display = 'none';
+        document.getElementById('walletLoaded').style.display = '';
+        document.getElementById('walletAddrText').textContent = s.walletAddress;
+        document.getElementById('walletBalance').textContent = s.balance || '—';
+        // Agent status
+        cachedAgentName = s.agentName || '';
+        const regCard = document.getElementById('qaRegister');
+        const regLabel = document.getElementById('qaRegisterLabel');
+        const regHint = document.getElementById('qaRegisterHint');
+        if (cachedAgentName) {
+          regLabel.textContent = 'Agent Registered';
+          regHint.innerHTML = '<span style="color:var(--green)">&#x2713; ' + cachedAgentName + '</span>';
+          regCard.style.borderColor = 'var(--green)';
+          regCard.style.opacity = '0.85';
+        } else {
+          regLabel.textContent = 'Register Agent';
+          regHint.textContent = 'On-chain identity';
+          regCard.style.borderColor = '';
+          regCard.style.opacity = '';
+        }
+        // Extension detection hint
+        const hasExt = !!(window.clawNetwork && window.clawNetwork.isClawNetwork);
+        document.getElementById('qaImportHint').textContent = hasExt ? 'Extension detected — click to import' : 'Install wallet extension first';
+      } else {
+        document.getElementById('walletEmpty').style.display = '';
+        document.getElementById('walletLoaded').style.display = 'none';
+      }
 
       // Node info
       const rows = [
@@ -1321,10 +1434,16 @@ async function handle(req, res) {
     try {
       const h = await fetchJson('http://localhost:' + RPC_PORT + '/health');
       let balance = '';
+      let walletAddress = '';
+      let agentName = '';
       try {
         const walletPath = path.join(os.homedir(), '.openclaw/workspace/clawnetwork/wallet.json');
         const w = JSON.parse(fs.readFileSync(walletPath, 'utf8'));
-        if (w.address) { const b = await rpcCall('claw_getBalance', [w.address]); balance = formatClaw(b); }
+        walletAddress = w.address || '';
+        if (w.address) {
+          const b = await rpcCall('claw_getBalance', [w.address]); balance = formatClaw(b);
+          try { const ag = await rpcCall('claw_getAgent', [w.address]); agentName = (ag && ag.name) ? ag.name : ''; } catch {}
+        }
       } catch {}
       json(200, {
         running: h.status === 'ok',
@@ -1333,14 +1452,17 @@ async function handle(req, res) {
         network: h.chain_id,
         syncMode: 'light',
         rpcUrl: 'http://localhost:' + RPC_PORT,
-        walletAddress: (() => { try { return JSON.parse(fs.readFileSync(path.join(os.homedir(), '.openclaw/workspace/clawnetwork/wallet.json'), 'utf8')).address; } catch { return ''; } })(),
+        walletAddress,
         binaryVersion: h.version,
-        pluginVersion: '0.1.0',
+        pluginVersion: '0.1.1',
         uptime: h.uptime_secs,
         uptimeFormatted: h.uptime_secs < 60 ? h.uptime_secs + 's' : h.uptime_secs < 3600 ? Math.floor(h.uptime_secs/60) + 'm' : Math.floor(h.uptime_secs/3600) + 'h ' + Math.floor((h.uptime_secs%3600)/60) + 'm',
-        restartCount: 0, dataDir: path.join(os.homedir(), '.clawnetwork'), balance, syncing: h.status === 'degraded',
+        restartCount: 0, dataDir: path.join(os.homedir(), '.clawnetwork'), balance, agentName, syncing: h.status === 'degraded',
       });
-    } catch { json(200, { running: false, blockHeight: null, peerCount: null }); }
+    } catch {
+        const walletAddr = (() => { try { return JSON.parse(fs.readFileSync(path.join(os.homedir(), '.openclaw/workspace/clawnetwork/wallet.json'), 'utf8')).address; } catch { return ''; } })();
+        json(200, { running: false, blockHeight: null, peerCount: null, walletAddress: walletAddr, network: 'mainnet', syncMode: 'light', rpcUrl: 'http://localhost:' + RPC_PORT, pluginVersion: '0.1.1', restartCount: 0, dataDir: path.join(os.homedir(), '.clawnetwork'), balance: '', agentName: '', syncing: false, uptimeFormatted: '—', pid: null });
+      }
     return;
   }
   if (p === '/api/logs') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clawlabz/clawnetwork",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Run a ClawNetwork blockchain node inside OpenClaw. Every agent is a blockchain node.",
   "type": "module",
   "license": "MIT",