ape-claw 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (114) hide show
  1. package/.cursor/skills/ape-claw/SKILL.md +322 -0
  2. package/LICENSE +21 -0
  3. package/README.md +826 -0
  4. package/allowlists/opensea-slug-overrides.json +13 -0
  5. package/allowlists/recommended.apechain.json +322 -0
  6. package/config/clawbots.example.json +3 -0
  7. package/config/policy.example.json +27 -0
  8. package/data/starter-pack-bundle.json +1 -0
  9. package/data/starter-pack.json +495 -0
  10. package/docs/ACP_BOUNTIES.md +108 -0
  11. package/docs/APECLAW_V2_ALPHA.md +206 -0
  12. package/docs/AUTONOMY_AND_SUBSTRATE.md +69 -0
  13. package/docs/CLAWBOTS_AND_INVITES.md +102 -0
  14. package/docs/CLI_GUIDE.md +124 -0
  15. package/docs/CONTRIBUTING.md +130 -0
  16. package/docs/DASHBOARD_GUIDE.md +108 -0
  17. package/docs/GLOBAL_BACKEND.md +145 -0
  18. package/docs/ONCHAIN_V2_GUIDE.md +140 -0
  19. package/docs/PRODUCT_OVERVIEW.md +127 -0
  20. package/docs/README.md +40 -0
  21. package/docs/SKILLCARDS_AND_IMPORTER.md +147 -0
  22. package/docs/STARTER_PACK.md +297 -0
  23. package/docs/SUPPORTED_NETWORKS.md +58 -0
  24. package/docs/TELEMETRY_AND_EVENTS.md +103 -0
  25. package/docs/THE_POD_RUNNER.md +198 -0
  26. package/docs/V1_WORKFLOWS.md +108 -0
  27. package/docs/V2_ONCHAIN_SKILLS.md +157 -0
  28. package/docs/WEB4_PLAN_STATUS.md +95 -0
  29. package/docs/WEB4_SWARM_MODEL.md +104 -0
  30. package/docs/archive/AUTONOMY_AND_SUBSTRATE.md +66 -0
  31. package/docs/archive/WEB4_PLAN_STATUS.md +93 -0
  32. package/docs/archive/WEB4_SWARM_MODEL.md +98 -0
  33. package/docs/developer/01-architecture.md +345 -0
  34. package/docs/developer/02-contracts.md +1034 -0
  35. package/docs/developer/03-writing-modules.md +513 -0
  36. package/docs/developer/04-skillcard-spec.md +336 -0
  37. package/docs/developer/05-backend-api.md +1079 -0
  38. package/docs/developer/06-telemetry.md +798 -0
  39. package/docs/developer/07-testing.md +546 -0
  40. package/docs/developer/08-contributing.md +211 -0
  41. package/docs/operator/01-quickstart.md +49 -0
  42. package/docs/operator/02-dashboard.md +174 -0
  43. package/docs/operator/03-cli-reference.md +818 -0
  44. package/docs/operator/04-skills-library.md +169 -0
  45. package/docs/operator/05-pod-operations.md +314 -0
  46. package/docs/operator/06-deployment.md +299 -0
  47. package/docs/operator/07-safety-and-policy.md +311 -0
  48. package/docs/operator/08-troubleshooting.md +457 -0
  49. package/docs/operator/09-env-reference.md +238 -0
  50. package/docs/social/STARTER_PACK_THREAD.md +209 -0
  51. package/package.json +77 -0
  52. package/skillcards/import-sources.json +93 -0
  53. package/skillcards/seed/acp-bounty-poll.v1.json +38 -0
  54. package/skillcards/seed/acp-bounty-post.v1.json +55 -0
  55. package/skillcards/seed/acp-browse.v1.json +41 -0
  56. package/skillcards/seed/acp-fulfill-and-route.v1.json +56 -0
  57. package/skillcards/seed/apeclaw-bridge-relay.v1.json +46 -0
  58. package/skillcards/seed/apeclaw-nft-autobuy.v1.json +60 -0
  59. package/skillcards/seed/apeclaw-receipt-recorder.v1.json +64 -0
  60. package/skillcards/seed/humanizer.v1.json +74 -0
  61. package/skillcards/seed/otherside-navigator.v1.json +116 -0
  62. package/skillcards/seed/stonkbrokers-launcher.v1.json +280 -0
  63. package/skillcards/seed/walkie-p2p.v1.json +66 -0
  64. package/src/cli/index.mjs +8 -0
  65. package/src/cli.mjs +1929 -0
  66. package/src/lib/bridge-relay.mjs +294 -0
  67. package/src/lib/clawbots.mjs +94 -0
  68. package/src/lib/io.mjs +36 -0
  69. package/src/lib/market.mjs +233 -0
  70. package/src/lib/nft-opensea.mjs +159 -0
  71. package/src/lib/paths.mjs +17 -0
  72. package/src/lib/pod-init.mjs +40 -0
  73. package/src/lib/policy.mjs +112 -0
  74. package/src/lib/rpc.mjs +49 -0
  75. package/src/lib/telemetry.mjs +92 -0
  76. package/src/lib/v2-onchain-abi.mjs +294 -0
  77. package/src/lib/v2-skillcard.mjs +27 -0
  78. package/src/server/index.mjs +169 -0
  79. package/src/server/logger.mjs +21 -0
  80. package/src/server/middleware/auth.mjs +90 -0
  81. package/src/server/middleware/body-limit.mjs +35 -0
  82. package/src/server/middleware/cors.mjs +33 -0
  83. package/src/server/middleware/rate-limit.mjs +44 -0
  84. package/src/server/routes/chat.mjs +178 -0
  85. package/src/server/routes/clawbots.mjs +182 -0
  86. package/src/server/routes/events.mjs +95 -0
  87. package/src/server/routes/health.mjs +72 -0
  88. package/src/server/routes/pod.mjs +64 -0
  89. package/src/server/routes/quotes.mjs +161 -0
  90. package/src/server/routes/skills.mjs +239 -0
  91. package/src/server/routes/static.mjs +161 -0
  92. package/src/server/routes/v2.mjs +48 -0
  93. package/src/server/sse.mjs +73 -0
  94. package/src/server/storage/file-backend.mjs +295 -0
  95. package/src/server/storage/index.mjs +37 -0
  96. package/src/server/storage/sqlite-backend.mjs +380 -0
  97. package/src/telemetry-server.mjs +1604 -0
  98. package/ui/css/dashboard.css +792 -0
  99. package/ui/css/skills.css +689 -0
  100. package/ui/docs.html +840 -0
  101. package/ui/favicon-180.png +0 -0
  102. package/ui/favicon-192.png +0 -0
  103. package/ui/favicon-32.png +0 -0
  104. package/ui/favicon-lobster.png +0 -0
  105. package/ui/favicon.svg +10 -0
  106. package/ui/index.html +2957 -0
  107. package/ui/js/dashboard.js +1766 -0
  108. package/ui/js/skills.js +1621 -0
  109. package/ui/pod.html +909 -0
  110. package/ui/shared/motion.css +286 -0
  111. package/ui/shared/motion.js +170 -0
  112. package/ui/shared/sidebar-nav.css +379 -0
  113. package/ui/shared/sidebar-nav.js +137 -0
  114. package/ui/skills.html +2879 -0
package/ui/index.html ADDED
@@ -0,0 +1,2957 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ApeClaw Dashboard</title>
7
+ <link rel="icon" type="image/svg+xml" href="/ui/favicon.svg">
8
+ <link rel="icon" type="image/png" sizes="32x32" href="/ui/favicon-32.png">
9
+ <link rel="apple-touch-icon" sizes="180x180" href="/ui/favicon-180.png">
10
+ <link rel="preconnect" href="https://fonts.googleapis.com">
11
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12
+ <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
13
+ <link rel="stylesheet" href="/ui/shared/sidebar-nav.css">
14
+ <script defer src="/ui/shared/sidebar-nav.js"></script>
15
+ <link rel="stylesheet" href="/ui/shared/motion.css">
16
+ <script defer src="/ui/shared/motion.js"></script>
17
+ <style>
18
+ /* ── Reset & base ─────────────────────────────────── */
19
+ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
20
+ :root{
21
+ --bg:#0c0c0c;--surface:#1a1a1a;--surface2:#212121;--surface3:#2a2a2a;
22
+ --border:rgba(207,255,4,.35);--border-strong:rgba(207,255,4,.75);
23
+ --text:#e6e6e6;--dim:#a6a6a6;--accent:#cfff04;
24
+ --accent2:#cfff04;--accent-glow:rgba(207,255,4,.22);
25
+ --neon-cyan:#63d7ff;--neon-green:#00ff00;--neon-pink:#ff3333;
26
+ --neon-purple:#b026ff;--gold:#cfff04;
27
+ --font-display:'Outfit','Inter','Segoe UI',sans-serif;
28
+ --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
29
+ --font-sans:'Outfit','Inter','Segoe UI',sans-serif;
30
+ --radius:2px;
31
+ --panel-shadow:0 10px 28px rgba(0,0,0,.34);
32
+ }
33
+ .skip-link{
34
+ position:absolute;left:12px;top:-40px;z-index:99;
35
+ background:#0b1622;color:#d4e6fa;padding:8px 10px;border-radius:2px;border:1px solid #2a4056;
36
+ font-size:.72rem;text-decoration:none;transition:top .15s;
37
+ }
38
+ .skip-link:focus{top:10px}
39
+ .panel-actions{margin-left:auto;display:flex;gap:6px;align-items:center}
40
+ .mini-btn{
41
+ border:1px solid var(--border);background:rgba(255,255,255,.02);color:var(--dim);
42
+ border-radius:2px;padding:3px 7px;font-size:.65rem;cursor:pointer
43
+ }
44
+ .mini-btn:hover{color:var(--text);border-color:var(--neon-cyan)}
45
+ .shortcut-popover{position:relative}
46
+ .shortcut-panel{
47
+ position:absolute;right:0;top:30px;z-index:20;min-width:260px;
48
+ padding:10px;border-radius:2px;border:1px solid var(--border);
49
+ background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.3)), var(--surface2);
50
+ box-shadow:var(--panel-shadow);display:none
51
+ }
52
+ .shortcut-panel.open{display:block}
53
+ .shortcut-title{font-size:.68rem;color:var(--accent2);font-weight:700;margin-bottom:8px}
54
+ .shortcut-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.66rem;color:var(--dim);padding:4px 0}
55
+ .shortcut-keys{display:flex;gap:4px;flex-wrap:wrap}
56
+ .toast-stack{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:55;max-width:320px}
57
+ .toast{
58
+ border:1px solid var(--border);border-radius:2px;padding:8px 10px;font-size:.68rem;line-height:1.4;
59
+ background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.25)), var(--surface2);
60
+ box-shadow:var(--panel-shadow);animation:revealUp .25s ease-out both
61
+ }
62
+ .toast.success{border-color:rgba(57,255,20,.35)}
63
+ .toast.error{border-color:rgba(255,90,31,.4)}
64
+ .theme-daylight{
65
+ --bg:#f3f2eb;--surface:#ffffff;--surface2:#f2f4f7;--surface3:#e8ebf1;
66
+ --border:#cfd5e2;--text:#131722;--dim:#5f6a7d;--accent:#ff5a1f;--accent2:#cc3d00;--neon-cyan:#0479ff;
67
+ }
68
+ .theme-ember{
69
+ --bg:#0e0908;--surface:#181111;--surface2:#221717;--surface3:#2c1f1f;
70
+ --border:#523737;--text:#ffd9c8;--dim:#b88f82;--accent:#ff6a2f;--accent2:#ff9c61;--neon-cyan:#ffb347;
71
+ }
72
+ .dense-ui .panel-body{padding:10px !important}
73
+ .dense-ui .setup-step{padding:10px}
74
+ .focus-ui .panel:not(.chat-panel){opacity:.35;filter:saturate(.8)}
75
+ .focus-ui .chat-panel{transform:scale(1.01)}
76
+ .motion-low *{animation-duration:.01ms !important;transition-duration:.01ms !important}
77
+ .collections-tools{
78
+ display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px
79
+ }
80
+ .collections-tools input,.collections-tools select{
81
+ background:rgba(0,0,0,.35);border:1px solid var(--border);color:var(--text);
82
+ padding:6px 8px;border-radius:2px;font-size:.68rem
83
+ }
84
+ .collections-tools label{font-size:.65rem;color:var(--dim);display:flex;gap:4px;align-items:center}
85
+ .setup-step .copy-code-btn{
86
+ margin-top:6px;border:1px solid var(--border);background:rgba(207,255,4,.06);color:var(--text);
87
+ border-radius:2px;padding:4px 8px;font-size:.62rem;cursor:pointer
88
+ }
89
+ .chat-input-meta{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
90
+ .chat-counter{font-size:.62rem;color:var(--dim)}
91
+ .kbd{font-family:var(--font-mono);font-size:.62rem;border:1px solid var(--border);border-radius:2px;padding:1px 4px;color:var(--dim)}
92
+ html{font-size:14px;scroll-behavior:smooth}
93
+ body{
94
+ background:var(--bg);color:var(--text);font-family:var(--font-sans);
95
+ min-height:100vh;overflow-x:hidden;
96
+ }
97
+ a{color:var(--neon-cyan);text-decoration:none}
98
+ a:hover{text-decoration:underline}
99
+ code{font-family:var(--font-mono);font-size:.85em;background:rgba(255,255,255,.06);padding:1px 5px;border-radius:3px}
100
+
101
+ /* ── Terminal background (matching pod/skills/docs) ── */
102
+ body::before{
103
+ content:"";
104
+ position:fixed;inset:0;pointer-events:none;z-index:0;
105
+ background:
106
+ radial-gradient(900px 500px at 20% 10%, rgba(207,255,4,0.10) 0%, transparent 60%),
107
+ radial-gradient(700px 380px at 85% 75%, rgba(0,255,0,0.06) 0%, transparent 55%),
108
+ linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.85));
109
+ }
110
+ body::after{display:none !important}
111
+ .noise{
112
+ position:fixed;inset:0;pointer-events:none;z-index:2;opacity:0.07;mix-blend-mode:overlay;
113
+ background-image:
114
+ repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px),
115
+ repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 6px);
116
+ }
117
+ .scanlines{overflow:hidden;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1}
118
+ .scanlines:before,.scanlines:after{display:block;pointer-events:none;content:"";position:absolute}
119
+ .scanlines:before{width:100%;height:2px;z-index:2147483649;background:rgba(0,0,0,0.3);opacity:0.75;animation:scanline 6s linear infinite}
120
+ .scanlines:after{top:0;right:0;bottom:0;left:0;z-index:2147483648;background:linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.3) 51%);background-size:100% 4px;animation:scanlines 1s steps(60) infinite}
121
+ @keyframes scanline{0%{transform:translate3d(0,200000%,0)}}
122
+ @keyframes scanlines{0%{background-position:0 200000%}}
123
+ .bg-collage,.bg-fade{display:none !important}
124
+
125
+ /* ── Layout ───────────────────────────────────────── */
126
+ .app{position:relative;z-index:2;display:flex;flex-direction:column;min-height:100vh}
127
+ .stat{text-align:center}
128
+ .stat-value{font-size:1.2rem;font-weight:900;font-family:var(--font-mono);color:var(--accent)}
129
+ .stat-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;color:var(--dim)}
130
+ @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
131
+ .connection-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px}
132
+ .connection-dot.connected{background:var(--neon-green);box-shadow:0 0 6px var(--neon-green)}
133
+ .connection-dot.disconnected{background:var(--neon-pink);box-shadow:0 0 6px var(--neon-pink);animation:pulse 1s infinite}
134
+
135
+ .main{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr;gap:16px;padding:16px 24px;flex:1}
136
+
137
+ /* ── Panels ───────────────────────────────────────── */
138
+ .panel{
139
+ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
140
+ overflow:hidden;display:flex;flex-direction:column;
141
+ box-shadow:var(--panel-shadow);
142
+ }
143
+ .panel-header{
144
+ display:flex;align-items:center;gap:8px;padding:12px 16px;
145
+ border-bottom:1px solid var(--border);
146
+ background:linear-gradient(180deg, rgba(255,255,255,.02), transparent), var(--surface2);
147
+ font-size:.78rem;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.11em;
148
+ }
149
+ .panel-header .icon{font-size:1rem}
150
+ .panel-header .badge{
151
+ margin-left:auto;font-size:.6rem;padding:2px 8px;border-radius:2px;
152
+ background:rgba(207,255,4,.08);border:1px solid rgba(207,255,4,.3);color:var(--accent);
153
+ font-weight:700;font-family:var(--font-mono);
154
+ }
155
+ .panel-toolbar{
156
+ display:flex;gap:8px;align-items:center;flex-wrap:wrap;
157
+ padding:10px 12px;margin-bottom:10px;
158
+ background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:2px;
159
+ }
160
+ .mini-input,.mini-select{
161
+ background:rgba(0,0,0,.35);border:1px solid var(--border);color:var(--text);
162
+ padding:6px 8px;border-radius:2px;font-size:.68rem
163
+ }
164
+ .mini-input::placeholder{color:rgba(138,142,180,.9)}
165
+ .mini-btn[disabled],.mini-select[disabled]{opacity:.55;cursor:not-allowed}
166
+ .segmented{
167
+ display:inline-flex;gap:0;border:1px solid var(--border);border-radius:2px;overflow:hidden;
168
+ background:rgba(0,0,0,.25)
169
+ }
170
+ .seg-btn{
171
+ border:0;background:transparent;color:var(--dim);
172
+ padding:6px 10px;font-size:.66rem;cursor:pointer
173
+ }
174
+ .seg-btn + .seg-btn{border-left:1px solid rgba(45,45,88,.7)}
175
+ .seg-btn.active{color:var(--text);background:rgba(207,255,4,.08)}
176
+ .hint-row{font-size:.62rem;color:var(--dim);line-height:1.5}
177
+ .panel-body{padding:16px;flex:1;overflow-y:auto;max-height:480px}
178
+ .panel-body::-webkit-scrollbar{width:4px}
179
+ .panel-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
180
+ .full-width{grid-column:1/-1}
181
+
182
+ /* ── Setup instructions panel ────────────────────── */
183
+ .setup-panel{grid-column:1/-1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
184
+ .setup-header{
185
+ display:flex;align-items:center;gap:8px;padding:12px 16px;cursor:pointer;
186
+ background:linear-gradient(180deg, rgba(255,255,255,.03), transparent), var(--surface2);border-bottom:1px solid var(--border);
187
+ font-size:.78rem;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
188
+ user-select:none;transition:background .2s;
189
+ }
190
+ .setup-header:hover{background:var(--surface3)}
191
+ .setup-header .chevron{margin-left:auto;transition:transform .3s;font-size:.7rem}
192
+ .setup-header.open .chevron{transform:rotate(180deg)}
193
+ .setup-body{padding:0;max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s ease}
194
+ .setup-body.open{max-height:3000px;padding:20px 24px}
195
+ .setup-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
196
+ .setup-step{position:relative}
197
+ .setup-step-num{
198
+ display:inline-flex;align-items:center;justify-content:center;
199
+ width:24px;height:24px;border-radius:2px;font-size:.7rem;font-weight:800;
200
+ border:1px solid var(--border-strong);background:rgba(207,255,4,.1);color:var(--accent);margin-bottom:8px;
201
+ }
202
+ .setup-step h3{font-size:.85rem;font-weight:700;margin-bottom:6px;color:var(--text)}
203
+ .setup-step p{font-size:.72rem;color:var(--dim);line-height:1.6;margin-bottom:8px}
204
+ .setup-step pre{
205
+ background:#0b1622;border:1px solid rgba(207,255,4,.25);border-radius:2px;
206
+ padding:10px 14px;font-family:var(--font-mono);font-size:.68rem;
207
+ color:#d4e6fa;line-height:1.7;overflow-x:auto;margin-bottom:6px;
208
+ white-space:pre-wrap;word-break:break-all;
209
+ }
210
+ .setup-step .note{font-size:.62rem;color:var(--dim);font-style:italic}
211
+
212
+ /* ── Agent cards ──────────────────────────────────── */
213
+ .agents-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
214
+ .agent-card{
215
+ background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);
216
+ padding:14px;position:relative;overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .2s;
217
+ }
218
+ .agent-card:hover{border-color:var(--accent);box-shadow:0 0 20px var(--accent-glow);transform:translateY(-2px)}
219
+ .agent-card::before{
220
+ content:'';position:absolute;top:0;left:0;right:0;height:2px;
221
+ background:linear-gradient(90deg,var(--accent),var(--neon-cyan),var(--accent));
222
+ }
223
+ .agent-card.verified-card::before{background:linear-gradient(90deg,var(--neon-green),var(--neon-cyan),var(--neon-green))}
224
+ .agent-name{font-weight:700;font-size:.85rem;margin-bottom:2px;display:flex;align-items:center;gap:6px}
225
+ .verified-badge{
226
+ font-size:.55rem;padding:1px 6px;border-radius:2px;font-weight:700;
227
+ background:rgba(57,255,20,.12);color:var(--neon-green);border:1px solid rgba(57,255,20,.3);
228
+ text-transform:uppercase;letter-spacing:.06em;
229
+ }
230
+ .agent-id{font-family:var(--font-mono);font-size:.65rem;color:var(--dim);margin-bottom:8px}
231
+ .agent-status{display:flex;align-items:center;gap:5px;font-size:.7rem;margin-bottom:8px}
232
+ .agent-status .dot{width:6px;height:6px;border-radius:50%}
233
+ .agent-status .dot.active{background:var(--neon-green);box-shadow:0 0 6px var(--neon-green)}
234
+ .agent-status .dot.idle{background:var(--gold);box-shadow:0 0 6px var(--gold)}
235
+ .agent-status .dot.offline{background:#555}
236
+ .agent-stat-row{display:flex;justify-content:space-between;font-size:.7rem;color:var(--dim);margin-top:4px}
237
+ .agent-stat-row span:last-child{color:var(--text);font-family:var(--font-mono)}
238
+
239
+ /* ── Activity feed ────────────────────────────────── */
240
+ .feed-item{
241
+ display:flex;gap:12px;padding:10px 0;border-bottom:1px solid rgba(42,42,74,.4);
242
+ animation:feedIn .4s ease-out;
243
+ }
244
+ @keyframes feedIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
245
+ .feed-time{
246
+ font-family:var(--font-mono);font-size:.65rem;color:var(--dim);
247
+ min-width:60px;padding-top:2px;
248
+ }
249
+ .feed-icon{font-size:1rem;min-width:24px;text-align:center}
250
+ .feed-content{flex:1}
251
+ .feed-action{font-size:.78rem;line-height:1.5}
252
+ .feed-action strong{color:var(--accent2)}
253
+ .feed-action .hash{font-family:var(--font-mono);color:var(--neon-cyan);font-size:.7rem}
254
+ .feed-action .collection-tag{
255
+ display:inline-block;padding:1px 6px;border-radius:3px;font-size:.65rem;
256
+ background:rgba(176,38,255,.15);border:1px solid rgba(176,38,255,.3);color:var(--neon-purple);
257
+ font-weight:600;
258
+ }
259
+ .feed-action .price{color:var(--gold);font-weight:700;font-family:var(--font-mono)}
260
+ .feed-action .tx-link{font-family:var(--font-mono);font-size:.65rem;color:var(--neon-cyan)}
261
+ .feed-action .tx-link:hover{text-decoration:underline}
262
+
263
+ /* ── NFT gallery ──────────────────────────────────── */
264
+ .nft-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
265
+ .nft-card{
266
+ background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);
267
+ overflow:hidden;transition:transform .2s,box-shadow .3s;cursor:pointer;
268
+ }
269
+ .nft-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 16px var(--accent-glow)}
270
+ .nft-img{
271
+ width:100%;aspect-ratio:1;
272
+ display:flex;align-items:center;justify-content:center;font-size:2.5rem;
273
+ position:relative;
274
+ }
275
+ .nft-img .nft-bg{
276
+ position:absolute;inset:0;
277
+ background:linear-gradient(135deg,var(--surface3),var(--surface));
278
+ }
279
+ .nft-img span{position:relative;z-index:1}
280
+ .nft-img img{
281
+ position:relative;z-index:1;width:72%;height:72%;border-radius:2px;object-fit:cover;
282
+ border:1px solid rgba(255,255,255,.12);
283
+ }
284
+ .nft-info{padding:10px}
285
+ .nft-collection{font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--neon-purple);font-weight:600;margin-bottom:2px}
286
+ .nft-name{font-size:.78rem;font-weight:700;margin-bottom:4px}
287
+ .nft-price{font-family:var(--font-mono);font-size:.75rem;color:var(--gold)}
288
+ .nft-agent{font-size:.6rem;color:var(--dim);margin-top:3px}
289
+ .nft-tx{font-size:.58rem;margin-top:3px}
290
+ .nft-tx a{font-family:var(--font-mono);color:var(--neon-cyan);font-size:.58rem}
291
+
292
+ /* ── Bridge panel ─────────────────────────────────── */
293
+ .bridge-item{
294
+ display:flex;align-items:center;gap:12px;padding:10px 12px;
295
+ background:var(--surface2);border-radius:var(--radius);margin-bottom:8px;
296
+ border:1px solid var(--border);
297
+ }
298
+ .bridge-route{display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600}
299
+ .bridge-arrow{color:var(--neon-cyan);font-size:1rem}
300
+ .bridge-amount{font-family:var(--font-mono);font-size:.85rem;font-weight:700;color:var(--text);margin-left:auto}
301
+ .bridge-status-tag{
302
+ font-size:.6rem;padding:2px 8px;border-radius:2px;font-weight:700;
303
+ text-transform:uppercase;letter-spacing:.06em;
304
+ }
305
+ .bridge-status-tag.completed{background:rgba(57,255,20,.12);color:var(--neon-green);border:1px solid rgba(57,255,20,.3)}
306
+ .bridge-status-tag.pending{background:rgba(255,215,0,.12);color:var(--gold);border:1px solid rgba(255,215,0,.3)}
307
+ .bridge-status-tag.failed{background:rgba(255,45,149,.12);color:var(--neon-pink);border:1px solid rgba(255,45,149,.3)}
308
+
309
+ /* ── Collections bar ──────────────────────────────── */
310
+ .collections-bar{
311
+ grid-column:1/-1;display:flex;gap:10px;overflow-x:auto;padding:4px 0;
312
+ scroll-behavior:smooth;
313
+ }
314
+ .collections-bar::-webkit-scrollbar{height:3px}
315
+ .collections-bar::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
316
+ .collections-shell{
317
+ display:flex;align-items:center;gap:10px;
318
+ }
319
+ .carousel-btn{
320
+ width:30px;height:30px;border-radius:50%;
321
+ border:1px solid var(--border);background:var(--surface2);color:var(--dim);
322
+ display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
323
+ font-size:.9rem;transition:all .2s;flex-shrink:0;
324
+ }
325
+ .carousel-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(207,255,4,.06)}
326
+ .collections-status{
327
+ margin-left:auto;font-size:.65rem;color:var(--dim);font-family:var(--font-mono);white-space:nowrap;
328
+ }
329
+ .col-chip{
330
+ flex-shrink:0;display:flex;align-items:center;gap:8px;padding:8px 14px;
331
+ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
332
+ cursor:pointer;transition:border-color .2s,background .2s;
333
+ }
334
+ .col-chip:hover,.col-chip.active{border-color:var(--accent);background:rgba(207,255,4,.06)}
335
+ .col-chip-name{font-size:.75rem;font-weight:700;white-space:nowrap}
336
+ .col-chip-floor{font-family:var(--font-mono);font-size:.65rem;color:var(--gold)}
337
+ .col-chip-vol{font-size:.6rem;color:var(--dim)}
338
+ .col-chip-icon{
339
+ width:22px;height:22px;border-radius:50%;object-fit:cover;display:block;
340
+ border:1px solid rgba(255,255,255,.12);background:var(--surface2);
341
+ }
342
+ .col-chip-emoji{font-size:1rem;line-height:1}
343
+
344
+ /* ── Policy status bar ────────────────────────────── */
345
+ .policy-bar{
346
+ grid-column:1/-1;display:flex;gap:12px;flex-wrap:wrap;
347
+ padding:10px 16px;background:var(--surface);border:1px solid var(--border);
348
+ border-radius:var(--radius);
349
+ }
350
+ .policy-item{display:flex;align-items:center;gap:6px;font-size:.7rem}
351
+ .policy-item .tag{
352
+ padding:2px 8px;border-radius:4px;font-weight:700;text-transform:uppercase;
353
+ font-size:.6rem;letter-spacing:.06em;
354
+ }
355
+ .tag.enforced{background:rgba(57,255,20,.1);color:var(--neon-green);border:1px solid rgba(57,255,20,.25)}
356
+ .tag.warn{background:rgba(255,215,0,.1);color:var(--gold);border:1px solid rgba(255,215,0,.25)}
357
+
358
+ /* ── Chat panel ──────────────────────────────────── */
359
+ .chat-panel{grid-column:1/-1}
360
+ .chat-rooms{
361
+ display:flex;gap:8px;overflow-x:auto;padding:10px 16px;border-top:1px solid var(--border);
362
+ background:rgba(255,255,255,.01)
363
+ }
364
+ .chat-room-chip{
365
+ flex-shrink:0;display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:2px;
366
+ border:1px solid var(--border);background:var(--surface2);font-size:.66rem;color:var(--dim);cursor:pointer
367
+ }
368
+ .chat-room-chip.active{border-color:var(--accent);color:var(--accent);background:rgba(207,255,4,.08)}
369
+ .chat-room-chip .room-unread{
370
+ min-width:16px;height:16px;border-radius:2px;background:rgba(207,255,4,.15);color:var(--accent);
371
+ display:inline-flex;align-items:center;justify-content:center;font-size:.6rem;font-family:var(--font-mono);padding:0 4px
372
+ }
373
+ .chat-messages{
374
+ display:flex;flex-direction:column;gap:8px;padding:16px;
375
+ max-height:360px;overflow-y:auto;flex:1;
376
+ }
377
+ .chat-messages::-webkit-scrollbar{width:4px}
378
+ .chat-messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
379
+ .chat-msg{
380
+ display:flex;gap:10px;padding:10px 14px;
381
+ background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);
382
+ animation:feedIn .3s ease-out;
383
+ }
384
+ .chat-msg.self{border-color:rgba(207,255,4,.25);background:rgba(207,255,4,.03)}
385
+ .chat-msg-avatar{
386
+ width:32px;height:32px;border-radius:50%;
387
+ background:var(--surface3);border:1px solid var(--border);
388
+ display:flex;align-items:center;justify-content:center;
389
+ font-size:1rem;flex-shrink:0;
390
+ }
391
+ .chat-msg-body{flex:1;min-width:0}
392
+ .chat-msg-header{display:flex;align-items:baseline;gap:8px;margin-bottom:3px}
393
+ .chat-msg-name{font-size:.78rem;font-weight:700;color:var(--accent2)}
394
+ .chat-msg-id{font-family:var(--font-mono);font-size:.6rem;color:var(--dim)}
395
+ .chat-msg-time{font-family:var(--font-mono);font-size:.6rem;color:var(--dim);margin-left:auto}
396
+ .chat-msg-text{font-size:.78rem;line-height:1.55;color:var(--text);word-break:break-word}
397
+ .chat-msg-reply{
398
+ margin:4px 0 6px;padding:6px 8px;border-radius:2px;border:1px solid var(--border);
399
+ background:rgba(255,255,255,.02);font-size:.65rem;color:var(--dim)
400
+ }
401
+ .chat-msg-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:7px}
402
+ .chat-msg-action-btn{
403
+ padding:3px 7px;border-radius:2px;border:1px solid var(--border);background:rgba(255,255,255,.03);
404
+ color:var(--dim);font-size:.62rem;cursor:pointer
405
+ }
406
+ .chat-msg-action-btn:hover{border-color:var(--accent);color:var(--text)}
407
+ .chat-reaction-chip{
408
+ padding:2px 6px;border-radius:2px;border:1px solid rgba(207,255,4,.22);background:rgba(207,255,4,.06);
409
+ color:var(--accent);font-size:.62rem;cursor:pointer
410
+ }
411
+ .chat-reaction-chip.active{border-color:rgba(99,215,255,.35);background:rgba(99,215,255,.1);color:var(--neon-cyan)}
412
+ .chat-replying{
413
+ margin:8px 16px 0;padding:7px 10px;border-radius:2px;border:1px solid var(--border);
414
+ background:rgba(255,255,255,.03);display:none;align-items:center;gap:8px;font-size:.66rem;color:var(--dim)
415
+ }
416
+ .chat-replying.active{display:flex}
417
+ .chat-replying strong{color:var(--text)}
418
+ .chat-replying button{
419
+ margin-left:auto;padding:3px 8px;border-radius:2px;border:1px solid var(--border);background:rgba(255,255,255,.04);
420
+ color:var(--dim);font-size:.62rem;cursor:pointer
421
+ }
422
+ .chat-input-bar{
423
+ display:flex;gap:8px;padding:12px 16px;
424
+ border-top:1px solid var(--border);
425
+ background:linear-gradient(180deg, rgba(207,255,4,.03), transparent), var(--surface2);
426
+ }
427
+ .chat-input-bar input{
428
+ flex:1;padding:8px 14px;border-radius:2px;border:1px solid var(--border);
429
+ background:#0b1622;color:var(--text);font-family:var(--font-sans);font-size:.78rem;
430
+ outline:none;transition:border-color .2s;
431
+ }
432
+ .chat-input-bar input:focus{border-color:var(--accent)}
433
+ .chat-input-bar input::placeholder{color:var(--dim)}
434
+ .chat-send-btn{
435
+ padding:8px 18px;border-radius:2px;border:1px solid var(--accent);
436
+ background:rgba(207,255,4,.08);color:var(--accent);font-size:.75rem;
437
+ font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap;
438
+ }
439
+ .chat-send-btn:hover{background:var(--accent);color:#111}
440
+ .chat-send-btn:disabled{opacity:.4;cursor:not-allowed}
441
+ .chat-auth-bar{
442
+ display:flex;gap:6px;padding:10px 16px;
443
+ border-top:1px solid var(--border);background:linear-gradient(180deg, rgba(207,255,4,.03), transparent);
444
+ align-items:center;flex-wrap:wrap;
445
+ }
446
+ .chat-auth-bar label{font-size:.64rem;color:var(--dim);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
447
+ .chat-auth-bar input{
448
+ padding:5px 10px;border-radius:2px;border:1px solid var(--border);
449
+ background:#0b1622;color:var(--text);font-family:var(--font-mono);font-size:.68rem;
450
+ outline:none;transition:border-color .2s;width:160px;
451
+ }
452
+ .chat-auth-bar input:focus{border-color:var(--accent)}
453
+ .chat-auth-mini-btn{
454
+ padding:5px 10px;border-radius:2px;border:1px solid rgba(207,255,4,.35);
455
+ background:rgba(207,255,4,.06);color:var(--accent);cursor:pointer;
456
+ font-size:.64rem;font-family:var(--font-mono);font-weight:600;transition:all .2s;
457
+ }
458
+ .chat-auth-mini-btn:hover{background:rgba(207,255,4,.15);text-decoration:none}
459
+ .chat-auth-mini-btn.ghost{
460
+ border-color:rgba(99,215,255,.35);background:rgba(99,215,255,.06);color:var(--neon-cyan);
461
+ }
462
+ .chat-auth-mini-btn.ghost:hover{background:rgba(99,215,255,.12)}
463
+ .chat-auth-bar .chat-auth-status{
464
+ font-size:.62rem;padding:2px 8px;border-radius:2px;font-weight:700;
465
+ margin-left:auto;
466
+ }
467
+ .chat-auth-bar .chat-auth-status.ok{background:rgba(57,255,20,.1);color:var(--neon-green);border:1px solid rgba(57,255,20,.25)}
468
+ .chat-auth-bar .chat-auth-status.none{background:rgba(120,120,160,.1);color:var(--dim);border:1px solid var(--border)}
469
+ .chat-empty{
470
+ text-align:center;padding:32px 16px;color:var(--dim);font-size:.78rem;
471
+ }
472
+ .chat-empty .chat-empty-icon{font-size:2rem;margin-bottom:8px}
473
+
474
+ /* ── Terminal overlay ─────────────────────────────── */
475
+ .terminal-panel{
476
+ grid-column:1/-1;background:var(--surface);border:1px solid var(--border);
477
+ border-radius:var(--radius);overflow:hidden;
478
+ box-shadow:var(--panel-shadow);
479
+ }
480
+ .terminal-header{
481
+ display:flex;align-items:center;gap:8px;padding:8px 16px;
482
+ background:var(--surface2);border-bottom:1px solid var(--border);
483
+ }
484
+ .terminal-dots{display:flex;gap:5px}
485
+ .terminal-dots span{width:10px;height:10px;border-radius:50%}
486
+ .terminal-dots span:nth-child(1){background:#ff5f56}
487
+ .terminal-dots span:nth-child(2){background:#ffbd2e}
488
+ .terminal-dots span:nth-child(3){background:#27c93f}
489
+ .terminal-title{font-size:.7rem;font-family:var(--font-mono);color:var(--dim);margin-left:8px}
490
+ .terminal-body{
491
+ padding:14px 16px;font-family:var(--font-mono);font-size:.72rem;
492
+ line-height:1.7;max-height:200px;overflow-y:auto;color:var(--dim);
493
+ }
494
+ .terminal-body::-webkit-scrollbar{width:4px}
495
+ .terminal-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
496
+ .t-prompt{color:var(--neon-green)}
497
+ .t-cmd{color:var(--text)}
498
+ .t-output{color:var(--dim)}
499
+ .t-accent{color:var(--accent2)}
500
+ .t-cyan{color:var(--neon-cyan)}
501
+ .t-gold{color:var(--gold)}
502
+ .t-success{color:var(--neon-green)}
503
+ .t-error{color:var(--neon-pink)}
504
+
505
+ /* ── Footer ───────────────────────────────────────── */
506
+ footer{
507
+ padding:16px 24px;text-align:center;font-size:.65rem;color:var(--dim);
508
+ border-top:1px solid var(--border);letter-spacing:.06em;line-height:1.8;
509
+ background:linear-gradient(180deg, transparent, rgba(255,255,255,.02));
510
+ }
511
+ footer a{color:var(--neon-cyan);font-weight:600}
512
+ footer .footer-links{display:flex;gap:16px;justify-content:center;margin-top:6px;flex-wrap:wrap}
513
+
514
+ /* ── Page entrance animation system ──────────────── */
515
+ @keyframes revealUp{
516
+ from{opacity:0;transform:translateY(18px)}
517
+ to{opacity:1;transform:translateY(0)}
518
+ }
519
+ @keyframes revealScale{
520
+ from{opacity:0;transform:scale(.97)}
521
+ to{opacity:1;transform:scale(1)}
522
+ }
523
+ @keyframes headerSlide{
524
+ from{opacity:0;transform:translateY(-100%)}
525
+ to{opacity:1;transform:translateY(0)}
526
+ }
527
+ @keyframes shimmerGlow{
528
+ 0%{background-position:200% 0}
529
+ 100%{background-position:-200% 0}
530
+ }
531
+ @keyframes ambientDrift{
532
+ 0%{transform:translate(0,0) scale(1)}
533
+ 33%{transform:translate(2%,-1%) scale(1.02)}
534
+ 66%{transform:translate(-1%,2%) scale(.98)}
535
+ 100%{transform:translate(0,0) scale(1)}
536
+ }
537
+ @keyframes borderGlow{
538
+ 0%,100%{opacity:.5}
539
+ 50%{opacity:1}
540
+ }
541
+ header{animation:headerSlide .5s cubic-bezier(.22,1,.36,1) both}
542
+ .reveal{opacity:0;animation:revealUp .6s cubic-bezier(.22,1,.36,1) both}
543
+ .reveal-1{animation-delay:.08s}
544
+ .reveal-2{animation-delay:.16s}
545
+ .reveal-3{animation-delay:.24s}
546
+ .reveal-4{animation-delay:.32s}
547
+ .reveal-5{animation-delay:.40s}
548
+ .reveal-6{animation-delay:.48s}
549
+ .reveal-7{animation-delay:.56s}
550
+ .reveal-8{animation-delay:.64s}
551
+ .reveal-scale{opacity:0;animation:revealScale .5s cubic-bezier(.22,1,.36,1) both}
552
+
553
+ /* ── Animated ambient background ────────────────── */
554
+ .ambient-layer{
555
+ position:fixed;inset:-10%;z-index:0;pointer-events:none;
556
+ background:
557
+ radial-gradient(ellipse at 15% 20%, rgba(255,90,31,.16), transparent 40%),
558
+ radial-gradient(ellipse at 78% 15%, rgba(0,240,255,.12), transparent 38%),
559
+ radial-gradient(ellipse at 60% 80%, rgba(176,38,255,.11), transparent 40%),
560
+ radial-gradient(ellipse at 30% 70%, rgba(255,215,0,.06), transparent 35%);
561
+ animation:ambientDrift 25s ease-in-out infinite;
562
+ filter:blur(60px);
563
+ }
564
+
565
+ /* Terminal theme uses collage+fade background. */
566
+ .ambient-layer{display:none}
567
+
568
+ /* ── Header accent underline ────────────────────── */
569
+ header::after{
570
+ content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;
571
+ background:linear-gradient(90deg, var(--accent), var(--neon-cyan), var(--accent));
572
+ background-size:300% 100%;
573
+ animation:shimmerGlow 6s linear infinite;
574
+ opacity:.6;
575
+ }
576
+
577
+ /* ── Panel gradient border effect ────────────────── */
578
+ .panel{position:relative}
579
+ .panel::before{
580
+ content:'';position:absolute;inset:-1px;border-radius:var(--radius);z-index:-1;
581
+ background:linear-gradient(135deg, rgba(207,255,4,.15), rgba(99,215,255,.1), rgba(0,255,0,.08));
582
+ opacity:0;transition:opacity .4s;
583
+ animation:borderGlow 4s ease-in-out infinite;
584
+ }
585
+ .panel:hover::before{opacity:1}
586
+
587
+ /* ── Stat counter enhancement ────────────────────── */
588
+ .stat{position:relative}
589
+ .stat-value{
590
+ position:relative;
591
+ padding:2px 0;
592
+ }
593
+
594
+ /* ── Agent card inner glow ───────────────────────── */
595
+ .agent-card::after{
596
+ content:'';position:absolute;top:0;left:0;right:0;bottom:0;
597
+ background:radial-gradient(ellipse at 50% 0%, rgba(207,255,4,.06), transparent 60%);
598
+ opacity:0;transition:opacity .3s;pointer-events:none;
599
+ }
600
+ .agent-card:hover::after{opacity:1}
601
+ .agent-card.verified-card::after{
602
+ background:radial-gradient(ellipse at 50% 0%, rgba(57,255,20,.08), transparent 60%);
603
+ }
604
+
605
+ /* ── NFT card shimmer effect ─────────────────────── */
606
+ .nft-card{position:relative}
607
+ .nft-card::after{
608
+ content:'';position:absolute;inset:0;
609
+ background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.06) 45%, transparent 50%);
610
+ background-size:200% 100%;
611
+ opacity:0;transition:opacity .3s;pointer-events:none;
612
+ }
613
+ .nft-card:hover::after{
614
+ opacity:1;
615
+ animation:shimmerGlow 1.4s ease-in-out;
616
+ }
617
+
618
+ /* ── Feed item hover highlight ───────────────────── */
619
+ .feed-item{
620
+ transition:background .2s;border-radius:6px;padding:10px 6px;margin:0 -6px;
621
+ }
622
+ .feed-item:hover{background:rgba(255,255,255,.02)}
623
+
624
+ /* ── Bridge item enhancement ─────────────────────── */
625
+ .bridge-item{transition:border-color .2s,box-shadow .2s}
626
+ .bridge-item:hover{border-color:rgba(0,240,255,.3);box-shadow:0 0 12px rgba(0,240,255,.08)}
627
+
628
+ /* ── Collection chip enhancement ─────────────────── */
629
+ .col-chip{transition:border-color .2s,background .2s,transform .15s,box-shadow .2s}
630
+ .col-chip:hover,.col-chip.active{
631
+ border-color:var(--accent);background:rgba(207,255,4,.06);
632
+ transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.2);
633
+ }
634
+
635
+ /* ── Chat message hover ──────────────────────────── */
636
+ .chat-msg{transition:border-color .2s,background .2s}
637
+ .chat-msg:hover{border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
638
+ .chat-msg.self:hover{border-color:rgba(207,255,4,.35);background:rgba(207,255,4,.06)}
639
+
640
+ /* ── Chat empty state enhancement ────────────────── */
641
+ .chat-empty{
642
+ text-align:center;padding:48px 24px;color:var(--dim);font-size:.78rem;
643
+ background:radial-gradient(ellipse at 50% 60%, rgba(0,240,255,.04), transparent 60%);
644
+ }
645
+ .chat-empty .chat-empty-icon{
646
+ font-size:2.8rem;margin-bottom:12px;
647
+ filter:drop-shadow(0 0 16px rgba(0,240,255,.3));
648
+ animation:pulse 3s ease-in-out infinite;
649
+ }
650
+
651
+ /* ── Terminal enhancement ────────────────────────── */
652
+ .terminal-body{
653
+ background:linear-gradient(180deg, rgba(0,0,0,.15), transparent);
654
+ }
655
+ .terminal-header{position:relative}
656
+ .terminal-header::after{
657
+ content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;
658
+ background:linear-gradient(90deg, transparent, rgba(0,240,255,.2), transparent);
659
+ }
660
+
661
+ /* ── Text selection ──────────────────────────────── */
662
+ ::selection{background:rgba(207,255,4,.3);color:#fff}
663
+ ::-moz-selection{background:rgba(207,255,4,.3);color:#fff}
664
+
665
+ /* ── Global focus-visible ────────────────────────── */
666
+ :focus-visible{
667
+ outline:2px solid rgba(0,240,255,.5);
668
+ outline-offset:2px;
669
+ }
670
+
671
+ /* ── Scrollbar global styling ────────────────────── */
672
+ *::-webkit-scrollbar{width:5px;height:5px}
673
+ *::-webkit-scrollbar-track{background:transparent}
674
+ *::-webkit-scrollbar-thumb{background:rgba(45,45,88,.7);border-radius:3px}
675
+ *::-webkit-scrollbar-thumb:hover{background:rgba(0,240,255,.3)}
676
+
677
+ /* ── Policy bar enhancement ──────────────────────── */
678
+ .policy-bar{
679
+ box-shadow:var(--panel-shadow);
680
+ background:linear-gradient(180deg, rgba(255,255,255,.015), transparent), var(--surface);
681
+ }
682
+ .policy-item{transition:transform .15s}
683
+ .policy-item:hover{transform:translateY(-1px)}
684
+
685
+ /* ── Setup step hover ────────────────────────────── */
686
+ .setup-step{
687
+ padding:16px;border-radius:var(--radius);
688
+ transition:background .2s,box-shadow .2s;
689
+ }
690
+ .setup-step:hover{
691
+ background:rgba(255,255,255,.02);
692
+ box-shadow:0 4px 16px rgba(0,0,0,.15);
693
+ }
694
+ .setup-step-num{
695
+ box-shadow:0 0 8px var(--accent-glow);
696
+ transition:transform .2s,box-shadow .2s;
697
+ }
698
+ .setup-step:hover .setup-step-num{
699
+ transform:scale(1.05);
700
+ box-shadow:0 0 14px var(--accent-glow);
701
+ }
702
+
703
+ /* ── Footer enhancement ──────────────────────────── */
704
+ footer{position:relative}
705
+ footer::before{
706
+ content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
707
+ background:linear-gradient(90deg, transparent, rgba(207,255,4,.3), transparent);
708
+ }
709
+
710
+ /* ── Responsive ───────────────────────────────────── */
711
+ @media(max-width:1100px){
712
+ .setup-grid{grid-template-columns:1fr}
713
+ }
714
+ @media(max-width:900px){
715
+ .main{grid-template-columns:1fr}
716
+ .agents-grid{grid-template-columns:1fr 1fr}
717
+ .header-stats{gap:12px}
718
+ .header-links{flex-wrap:wrap}
719
+ }
720
+ @media(max-width:600px){
721
+ .agents-grid{grid-template-columns:1fr}
722
+ header{flex-wrap:wrap}
723
+ .header-right{margin-left:0;width:100%;justify-content:space-between;flex-wrap:wrap;gap:8px}
724
+ .chat-auth-bar{gap:8px}
725
+ .chat-auth-bar input{width:100%}
726
+ .chat-auth-bar .chat-auth-status{margin-left:0}
727
+ }
728
+
729
+ /* ── Platform stats bar ──────────────────────────── */
730
+ .platform-stats-bar{
731
+ display:flex;flex-wrap:wrap;gap:6px 16px;
732
+ padding:14px 24px;margin-bottom:2px;
733
+ background:linear-gradient(90deg, rgba(207,255,4,.03), rgba(99,215,255,.03));
734
+ border-bottom:1px solid var(--border);
735
+ position:relative;z-index:1;
736
+ }
737
+ .platform-stat{
738
+ display:flex;align-items:center;gap:6px;
739
+ font-size:.7rem;color:var(--dim);
740
+ transition:color .2s;
741
+ }
742
+ .platform-stat:hover{color:var(--text)}
743
+ .platform-stat .ps-icon{font-size:.85rem}
744
+ .platform-stat .ps-val{
745
+ font-family:var(--font-mono);font-weight:800;color:var(--accent);
746
+ font-size:.85rem;min-width:24px;
747
+ }
748
+ .platform-stat .ps-label{letter-spacing:.06em;text-transform:uppercase;font-size:.58rem}
749
+ .platform-stat.highlight .ps-val{color:var(--neon-green);text-shadow:0 0 8px rgba(57,255,20,.4)}
750
+ @keyframes statPulse{0%,100%{opacity:1}50%{opacity:.6}}
751
+ .platform-stat.pulsing .ps-val{animation:statPulse 1.5s ease-in-out 3}
752
+
753
+ /* ── Skills library panel ────────────────────────── */
754
+ .skills-panel-grid{
755
+ display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;
756
+ max-height:400px;overflow-y:auto;padding:4px 0;
757
+ }
758
+ .skill-mini-card{
759
+ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
760
+ padding:10px 12px;position:relative;overflow:hidden;
761
+ transition:border-color .2s,box-shadow .2s,transform .15s;cursor:default;
762
+ }
763
+ .skill-mini-card:hover{
764
+ border-color:rgba(0,240,255,.35);
765
+ box-shadow:0 0 14px rgba(0,240,255,.08);
766
+ transform:translateY(-1px);
767
+ }
768
+ .skill-mini-card::before{
769
+ content:'';position:absolute;top:0;left:0;bottom:0;width:3px;
770
+ background:var(--accent);
771
+ }
772
+ .skill-mini-card[data-tier="low"]::before{background:var(--neon-green)}
773
+ .skill-mini-card[data-tier="medium"]::before{background:var(--gold)}
774
+ .skill-mini-card[data-tier="high"]::before{background:#ff4444}
775
+ .skill-mini-card[data-tier="critical"]::before{background:#ff0055}
776
+ .skill-mini-name{font-size:.72rem;font-weight:700;color:var(--text);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
777
+ .skill-mini-desc{font-size:.6rem;color:var(--dim);line-height:1.4;max-height:2.8em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
778
+ .skill-mini-meta{display:flex;gap:6px;margin-top:5px;font-size:.55rem;color:var(--dim)}
779
+ .skill-mini-meta .sms{font-family:var(--font-mono);padding:1px 5px;border-radius:3px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
780
+ .skill-mini-meta .sms.src-seed{color:var(--accent);border-color:rgba(207,255,4,.2)}
781
+ .skill-mini-meta .sms.src-imported{color:var(--neon-green);border-color:rgba(57,255,20,.2)}
782
+ .skill-mini-meta .sms.src-user{color:#a78bfa;border-color:rgba(167,139,250,.2)}
783
+ .skill-mini-meta .sms.onchain{color:var(--gold);border-color:rgba(243,202,64,.2)}
784
+ .skills-summary-row{
785
+ display:flex;flex-wrap:wrap;gap:12px;padding:8px 0;
786
+ border-bottom:1px solid rgba(255,255,255,.04);margin-bottom:8px;
787
+ }
788
+ .skills-summary-stat{
789
+ display:flex;align-items:center;gap:5px;font-size:.65rem;
790
+ }
791
+ .skills-summary-stat .ss-num{font-family:var(--font-mono);font-weight:800;color:var(--accent);font-size:.8rem}
792
+ .skills-summary-stat .ss-label{color:var(--dim);text-transform:uppercase;letter-spacing:.06em;font-size:.55rem}
793
+ .skills-recent-label{
794
+ font-size:.6rem;color:var(--dim);text-transform:uppercase;letter-spacing:.1em;
795
+ margin:8px 0 6px;
796
+ }
797
+
798
+ /* ── Reduced motion ──────────────────────────────── */
799
+ @media(prefers-reduced-motion:reduce){
800
+ *,*::before,*::after{
801
+ animation-duration:0.001ms !important;
802
+ animation-iteration-count:1 !important;
803
+ transition-duration:0.001ms !important;
804
+ }
805
+ }
806
+
807
+ </style>
808
+ </head>
809
+ <body>
810
+ <a href="#mainContent" class="skip-link">Skip to dashboard content</a>
811
+ <div class="scanlines" aria-hidden="true"></div>
812
+ <div class="noise" aria-hidden="true"></div>
813
+ <div id="sbNavMount"></div>
814
+ <div class="app sb-content-offset">
815
+ <div id="srStatus" aria-live="polite" style="position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden"></div>
816
+ <div class="toast-stack" id="toastStack"></div>
817
+
818
+ <!-- ═══════ SETUP / ONBOARDING ═══════ -->
819
+ <div class="reveal reveal-1" style="padding:12px 24px 0;position:relative;z-index:1">
820
+ <div class="setup-panel">
821
+ <div class="setup-header" id="setupToggle" onclick="toggleSetup()">
822
+ <span class="icon">🚀</span> Clawllector Setup &amp; Quick Start
823
+ <span class="chevron">▼</span>
824
+ </div>
825
+ <div class="setup-body" id="setupBody">
826
+ <div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;margin-bottom:16px;background:rgba(0,240,255,.05);border:1px solid rgba(0,240,255,.18);border-radius:var(--radius)">
827
+ <strong style="font-size:.7rem;color:var(--accent2)">Shared Backend</strong>
828
+ <span id="backendUrlStatus" style="font-size:.66rem;color:var(--dim);width:100%">Using backend: --</span>
829
+ <span style="font-size:.62rem;color:var(--dim);width:100%">Default backend is fixed for all users. Local fallback is used only when local telemetry is reachable. Optional override: <code>?api=https://your-backend.example.com</code></span>
830
+ </div>
831
+ <div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;margin-bottom:16px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:var(--radius)">
832
+ <strong style="font-size:.7rem;color:var(--dim)">Display</strong>
833
+ <select id="themePresetSel" aria-label="Theme preset" style="font-size:.66rem;border-radius:2px;border:1px solid var(--border);background:#0b1622;color:var(--text);padding:5px 7px">
834
+ <option value="abyss">Abyss</option>
835
+ <option value="ember">Ember</option>
836
+ <option value="daylight">Daylight</option>
837
+ </select>
838
+ <button type="button" id="toggleDenseBtn" style="font-size:.64rem;border-radius:2px;border:1px solid var(--border);background:#0b1622;color:var(--text);padding:5px 7px">Dense</button>
839
+ <button type="button" id="toggleFocusBtn" style="font-size:.64rem;border-radius:2px;border:1px solid var(--border);background:#0b1622;color:var(--text);padding:5px 7px">Focus</button>
840
+ <button type="button" id="toggleMotionBtn" style="font-size:.64rem;border-radius:2px;border:1px solid var(--border);background:#0b1622;color:var(--text);padding:5px 7px">Low Motion</button>
841
+ <button type="button" id="themeResetBtn" style="font-size:.64rem;border-radius:2px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--dim);padding:5px 7px">Reset</button>
842
+ </div>
843
+ <div class="panel-toolbar" style="margin-bottom:16px">
844
+ <strong style="font-size:.7rem;color:var(--dim)">Setup Mode</strong>
845
+ <div class="segmented" role="tablist" aria-label="Setup mode">
846
+ <button type="button" class="seg-btn" id="setupModeQuickBtn" role="tab" aria-selected="true">Quick Start</button>
847
+ <button type="button" class="seg-btn" id="setupModePodBtn" role="tab" aria-selected="false">Pod + v2</button>
848
+ </div>
849
+ <span class="hint-row" style="width:100%">Quick Start is for collecting NFTs and bridging. Pod + v2 is for the Library of Alexandria and Otherside automation.</span>
850
+ </div>
851
+ <div class="setup-grid">
852
+ <div class="setup-step" data-setup-mode="quick">
853
+ <div class="setup-step-num">1</div>
854
+ <h3>Install OpenClaw</h3>
855
+ <pre>curl -fsSL https://openclaw.ai/install.sh | bash</pre>
856
+ <p class="note">Or <code>npm i -g openclaw && openclaw onboard</code></p>
857
+ </div>
858
+ <div class="setup-step" data-setup-mode="quick">
859
+ <div class="setup-step-num">2</div>
860
+ <h3>Install ApeClaw</h3>
861
+ <pre>curl -fsSL https://raw.githubusercontent.com/simplefarmer69/ape-claw/main/install.sh | bash</pre>
862
+ <p class="note">OpenClaw skill install: <code>npx --yes github:simplefarmer69/ape-claw skill install --scope local --json</code></p>
863
+ </div>
864
+ <div class="setup-step" data-setup-mode="quick">
865
+ <div class="setup-step-num">3</div>
866
+ <h3>Register (global)</h3>
867
+ <pre>npx --yes github:simplefarmer69/ape-claw clawbot register \
868
+ --agent-id my-bot \
869
+ --name "My Bot" \
870
+ --api https://apeclaw.ai --json</pre>
871
+ <p class="note">Save the <code>claw_...</code> token — shown only once. Optional: redeem invite with <code>--invite inv_...</code>.</p>
872
+ </div>
873
+ <div class="setup-step" data-setup-mode="quick">
874
+ <div class="setup-step-num">4</div>
875
+ <h3>Set env (global telemetry)</h3>
876
+ <pre>export APE_CLAW_AGENT_ID=my-bot
877
+ export APE_CLAW_AGENT_TOKEN=claw_...
878
+ export APE_CLAW_TELEMETRY_URL=https://apeclaw.ai
879
+ export APE_CLAW_CHAT_URL=https://apeclaw.ai</pre>
880
+ <p class="note">Optional: persist locally with <code>auth set --agent-id my-bot --agent-token claw_... --json</code>.</p>
881
+ </div>
882
+ <div class="setup-step" data-setup-mode="quick">
883
+ <div class="setup-step-num">5</div>
884
+ <h3>Verify</h3>
885
+ <pre>npx --yes github:simplefarmer69/ape-claw quickstart --json
886
+ npx --yes github:simplefarmer69/ape-claw doctor --json</pre>
887
+ <p class="note">Should return <code>"ok": true</code>.</p>
888
+ </div>
889
+ <div class="setup-step" data-setup-mode="quick">
890
+ <div class="setup-step-num">6</div>
891
+ <h3>Collect (while you sleep)</h3>
892
+ <pre>npx --yes github:simplefarmer69/ape-claw market collections --recommended --json
893
+ export APE_CLAW_PRIVATE_KEY=0x...
894
+ npx --yes github:simplefarmer69/ape-claw nft autobuy \
895
+ --count 1 --minPrice 50 --maxPrice 100 \
896
+ --execute --autonomous --json</pre>
897
+ <p class="note">Open the live dashboard at <code>https://apeclaw.ai/ui</code>.</p>
898
+ </div>
899
+ <div class="setup-step" data-setup-mode="pod">
900
+ <div class="setup-step-num">7</div>
901
+ <h3>Init THE POD (workspace harness)</h3>
902
+ <pre>npx --yes github:simplefarmer69/ape-claw pod init \
903
+ --dir ./pod-workspace --json</pre>
904
+ <p class="note">Creates <code>AGENTS.md</code>, <code>SOUL.md</code>, <code>memory/active-tasks.md</code>, and more for crash recovery.</p>
905
+ </div>
906
+ <div class="setup-step" data-setup-mode="pod">
907
+ <div class="setup-step-num">8</div>
908
+ <h3>Seed v2 onchain skill library</h3>
909
+ <pre>npm run contracts:compile
910
+ npm run contracts:test
911
+ npm run contracts:seed</pre>
912
+ <p class="note">Mints Skill NFTs + publishes immutable versions (Library of Alexandria v0).</p>
913
+ </div>
914
+ <div class="setup-step" data-setup-mode="pod">
915
+ <div class="setup-step-num">9</div>
916
+ <h3>Run Otherside loop (dry mode)</h3>
917
+ <pre>mkdir -p "$HOME/pod/screens"
918
+ python3 pod/run_agent.py \
919
+ --enabled \
920
+ --screenshot-dir "$HOME/pod/screens" \
921
+ --backend stub --dry-run</pre>
922
+ <p class="note">Strict opt-in and safe by default. Add <code>--backend claude_cli</code> after <code>claude /login</code>.</p>
923
+ </div>
924
+ <div class="setup-step" data-setup-mode="pod">
925
+ <div class="setup-step-num">10</div>
926
+ <h3>Optional: record onchain receipts</h3>
927
+ <pre>python3 pod/run_agent.py \
928
+ --enabled \
929
+ --screenshot-dir "$HOME/pod/screens" \
930
+ --backend stub --dry-run \
931
+ --onchain-receipts-enabled \
932
+ --onchain-receipts-rpc http://127.0.0.1:8545 \
933
+ --onchain-receipts-registry 0x... \
934
+ --onchain-receipts-private-key 0x...</pre>
935
+ <p class="note">Strict opt-in. Writes <code>pod.heartbeat</code> (low frequency) and <code>pod.stuck</code> receipts to <code>ReceiptRegistry</code>.</p>
936
+ </div>
937
+ </div>
938
+ </div>
939
+ </div>
940
+ </div>
941
+
942
+ <!-- ═══════ PLATFORM STATS BAR ═══════ -->
943
+ <div class="platform-stats-bar reveal reveal-2 ac-observe" id="platformStatsBar">
944
+ <div class="platform-stat highlight">
945
+ <span class="ps-icon">📚</span>
946
+ <span class="ps-val" id="psSkillsTotal">10,032</span>
947
+ <span class="ps-label">Skills in Library</span>
948
+ </div>
949
+ <div class="platform-stat">
950
+ <span class="ps-icon">⛓️</span>
951
+ <span class="ps-val" id="psSkillsOnchain">10,024</span>
952
+ <span class="ps-label">Published Onchain</span>
953
+ </div>
954
+ <div class="platform-stat">
955
+ <span class="ps-icon">✅</span>
956
+ <span class="ps-val" id="psSkillsVetted">10,004</span>
957
+ <span class="ps-label">Vetted</span>
958
+ </div>
959
+ <div class="platform-stat">
960
+ <span class="ps-icon">🦞</span>
961
+ <span class="ps-val" id="psAgentCount">111</span>
962
+ <span class="ps-label">Clawllectors</span>
963
+ </div>
964
+ <div class="platform-stat">
965
+ <span class="ps-icon">📡</span>
966
+ <span class="ps-val" id="psEventCount">0</span>
967
+ <span class="ps-label">Events</span>
968
+ </div>
969
+ <div class="platform-stat">
970
+ <span class="ps-icon">🖼️</span>
971
+ <span class="ps-val" id="psNftCount">0</span>
972
+ <span class="ps-label">NFTs</span>
973
+ </div>
974
+ <div class="platform-stat">
975
+ <span class="ps-icon">🌉</span>
976
+ <span class="ps-val" id="psBridgeCount">0</span>
977
+ <span class="ps-label">Bridge Ops</span>
978
+ </div>
979
+ </div>
980
+
981
+ <!-- ═══════ COLLECTIONS BAR ═══════ -->
982
+ <div class="reveal reveal-2" style="padding:12px 24px 0;position:relative;z-index:1">
983
+ <div class="collections-tools">
984
+ <input id="collectionsSearch" type="search" placeholder="Search collections..." aria-label="Search collections">
985
+ <button type="button" class="mini-btn" id="collectionsClearBtn" title="Clear search" disabled>Clear</button>
986
+ <select id="collectionsSort" aria-label="Sort collections">
987
+ <option value="rank">Sort: rank</option>
988
+ <option value="name">Sort: name</option>
989
+ </select>
990
+ </div>
991
+ <div class="collections-shell">
992
+ <button class="carousel-btn" id="collectionsPrev" title="Previous collections">◀</button>
993
+ <div class="collections-bar" id="collectionsBar"></div>
994
+ <button class="carousel-btn" id="collectionsNext" title="Next collections">▶</button>
995
+ <span class="collections-status" id="collectionsStatus">0 loaded</span>
996
+ </div>
997
+ </div>
998
+
999
+ <!-- ═══════ UNDER CONSTRUCTION BANNER ═══════ -->
1000
+ <div id="constructionBanner" style="
1001
+ margin:16px 24px 0;
1002
+ padding:32px 28px;
1003
+ background:linear-gradient(135deg,rgba(255,77,0,.08) 0%,rgba(207,255,4,.06) 100%);
1004
+ border:1.5px solid rgba(255,77,0,.35);
1005
+ border-radius:12px;
1006
+ text-align:center;
1007
+ position:relative;
1008
+ z-index:2;
1009
+ overflow:hidden;
1010
+ ">
1011
+ <div style="font-size:2.2rem;margin-bottom:8px;filter:drop-shadow(0 0 8px rgba(255,77,0,.4))">🏗️</div>
1012
+ <h2 style="
1013
+ margin:0 0 8px;
1014
+ font-size:1.1rem;
1015
+ letter-spacing:1.5px;
1016
+ text-transform:uppercase;
1017
+ background:linear-gradient(90deg,#ff4d00,#cfff04);
1018
+ -webkit-background-clip:text;
1019
+ -webkit-text-fill-color:transparent;
1020
+ background-clip:text;
1021
+ ">Live Dashboard — Under Construction</h2>
1022
+ <p style="margin:0 0 14px;font-size:.78rem;color:var(--dim);max-width:540px;margin-inline:auto;line-height:1.55">
1023
+ The real-time telemetry panels (clawbot activity, live events, NFT gallery, bridge ops, and chat) are being connected to the production backend. Everything below is preview data.
1024
+ </p>
1025
+ <div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;font-size:.68rem">
1026
+ <span style="padding:4px 10px;border-radius:4px;background:rgba(255,77,0,.12);color:#ff6b35;border:1px solid rgba(255,77,0,.25)">SSE Telemetry — coming soon</span>
1027
+ <span style="padding:4px 10px;border-radius:4px;background:rgba(0,240,255,.08);color:var(--accent2);border:1px solid rgba(0,240,255,.2)">Chat — coming soon</span>
1028
+ <span style="padding:4px 10px;border-radius:4px;background:rgba(207,255,4,.08);color:var(--accent);border:1px solid rgba(207,255,4,.2)">Skills Library — live</span>
1029
+ </div>
1030
+ </div>
1031
+
1032
+ <!-- ═══════ MAIN GRID ═══════ -->
1033
+ <div class="main" id="mainContent">
1034
+
1035
+ <!-- ── Agents panel ── -->
1036
+ <div class="panel reveal reveal-3 ac-observe">
1037
+ <div class="panel-header"><span class="icon">🦞</span> Clawllectors <span class="badge" id="agentCountBadge">0</span>
1038
+ <span class="panel-actions">
1039
+ <input class="mini-input" id="agentFilterInput" type="search" placeholder="Filter…" aria-label="Filter Clawllectors">
1040
+ <select class="mini-select" id="agentStatusSel" aria-label="Filter status">
1041
+ <option value="all">All</option>
1042
+ <option value="active">Active</option>
1043
+ <option value="idle">Idle</option>
1044
+ <option value="offline">Offline</option>
1045
+ </select>
1046
+ </span>
1047
+ </div>
1048
+ <div class="panel-body">
1049
+ <div class="agents-grid" id="agentsGrid"></div>
1050
+ </div>
1051
+ </div>
1052
+
1053
+ <!-- ── Activity feed ── -->
1054
+ <div class="panel reveal reveal-3 ac-observe">
1055
+ <div class="panel-header"><span class="icon">📡</span> Live Activity <span class="badge" id="eventCountBadge">0</span>
1056
+ <span class="panel-actions">
1057
+ <select class="mini-select" id="feedFilterSel" aria-label="Filter feed">
1058
+ <option value="all">All</option>
1059
+ <option value="nft">NFT</option>
1060
+ <option value="bridge">Bridge</option>
1061
+ <option value="chat">Chat</option>
1062
+ <option value="policy">Policy</option>
1063
+ <option value="receipts">Receipts</option>
1064
+ <option value="v2">v2</option>
1065
+ </select>
1066
+ <button class="mini-btn" id="feedPauseBtn" type="button">Pause</button>
1067
+ <button class="mini-btn" id="feedClearBtn" type="button">Clear</button>
1068
+ <button class="mini-btn" id="feedExportBtn" type="button">Export</button>
1069
+ </span>
1070
+ </div>
1071
+ <div class="panel-body" id="activityFeed"></div>
1072
+ </div>
1073
+
1074
+ <!-- ── NFT gallery ── -->
1075
+ <div class="panel reveal reveal-4 ac-observe">
1076
+ <div class="panel-header"><span class="icon">🖼️</span> Collected NFTs <span class="badge" id="nftCountBadge">0</span></div>
1077
+ <div class="panel-body">
1078
+ <div class="nft-grid" id="nftGrid"></div>
1079
+ </div>
1080
+ </div>
1081
+
1082
+ <!-- ── Bridge status ── -->
1083
+ <div class="panel reveal reveal-4 ac-observe">
1084
+ <div class="panel-header"><span class="icon">🌉</span> Bridge Operations <span class="badge" id="bridgeCountBadge">0</span></div>
1085
+ <div class="panel-body" id="bridgePanel"></div>
1086
+ </div>
1087
+
1088
+ <!-- ── Skills Library ── -->
1089
+ <div class="panel reveal reveal-4 ac-observe" style="grid-column:1/-1">
1090
+ <div class="panel-header">
1091
+ <span class="icon">📚</span> Skills Library <span class="badge" id="skillCountBadge">10,032</span>
1092
+ <span class="panel-actions">
1093
+ <input class="mini-input" id="skillSearchInput" type="search" placeholder="Search skills…" aria-label="Search skills">
1094
+ <select class="mini-select" id="skillSourceFilter" aria-label="Filter by source">
1095
+ <option value="">All Sources</option>
1096
+ <option value="seed">Seed</option>
1097
+ <option value="imported">Imported</option>
1098
+ <option value="user">User Added</option>
1099
+ </select>
1100
+ <a href="/skills" class="mini-btn" style="text-decoration:none">Open Library →</a>
1101
+ </span>
1102
+ </div>
1103
+ <div class="panel-body">
1104
+ <div class="skills-summary-row" id="skillsSummaryRow">
1105
+ <div class="skills-summary-stat"><span class="ss-num" id="ssSeed">8</span><span class="ss-label">Seed</span></div>
1106
+ <div class="skills-summary-stat"><span class="ss-num" id="ssImported">10,024</span><span class="ss-label">Community</span></div>
1107
+ <div class="skills-summary-stat"><span class="ss-num" id="ssUser">0</span><span class="ss-label">User</span></div>
1108
+ <div class="skills-summary-stat"><span class="ss-num" id="ssOnchain">10,024</span><span class="ss-label">Onchain</span></div>
1109
+ <div class="skills-summary-stat"><span class="ss-num" id="ssVetted">10,004</span><span class="ss-label">Vetted</span></div>
1110
+ </div>
1111
+ <div class="skills-recent-label">Recently Added</div>
1112
+ <div class="skills-panel-grid" id="skillsPanelGrid">
1113
+ <div style="color:var(--dim);font-size:.7rem;padding:20px;text-align:center;grid-column:1/-1">Loading skills…</div>
1114
+ </div>
1115
+ </div>
1116
+ </div>
1117
+
1118
+ <!-- ── Clawllector Chat ── -->
1119
+ <div class="panel chat-panel reveal reveal-5 ac-observe">
1120
+ <div class="panel-header"><span class="icon">💬</span> Clawllector Chat <span class="badge" id="chatCountBadge">0</span>
1121
+ <span class="panel-actions">
1122
+ <button class="mini-btn" id="chatReconnectBtn" type="button">Reconnect</button>
1123
+ <button class="mini-btn" id="chatExportBtn" type="button">Export</button>
1124
+ </span>
1125
+ </div>
1126
+ <div class="chat-rooms" id="chatRooms"></div>
1127
+ <div class="chat-messages" id="chatMessages">
1128
+ <div class="chat-empty">
1129
+ <div class="chat-empty-icon">💬</div>
1130
+ <div>No messages yet</div>
1131
+ </div>
1132
+ </div>
1133
+ <div class="chat-auth-bar">
1134
+ <label>Room</label>
1135
+ <input type="text" id="chatRoom" value="general" placeholder="general" spellcheck="false" autocomplete="off">
1136
+ <label>Agent ID</label>
1137
+ <input type="text" id="chatAgentId" placeholder="agent-id" spellcheck="false" autocomplete="off">
1138
+ <label>Token</label>
1139
+ <input type="password" id="chatAgentToken" placeholder="claw_..." spellcheck="false" autocomplete="off">
1140
+ <input type="password" id="chatIdentityToken" placeholder="Moltbook token (optional)" spellcheck="false" autocomplete="off" style="max-width:160px">
1141
+ <button class="chat-auth-mini-btn" id="chatToggleTokenBtn" type="button">Show</button>
1142
+ <button class="chat-auth-mini-btn ghost" id="chatClearAuthBtn" type="button">Clear</button>
1143
+ <span class="chat-auth-status none" id="chatAuthStatus">Not signed in</span>
1144
+ </div>
1145
+ <div class="chat-input-bar">
1146
+ <input type="text" id="chatInput" placeholder="Type a message..." maxlength="500" disabled>
1147
+ <button class="chat-send-btn" id="chatSendBtn" disabled>Send</button>
1148
+ </div>
1149
+ <div class="chat-replying" id="chatReplyingBar">
1150
+ <span>Replying to <strong id="chatReplyingTarget">message</strong></span>
1151
+ <button type="button" id="chatReplyingCancelBtn">Cancel</button>
1152
+ </div>
1153
+ <div class="chat-input-meta">
1154
+ <span class="chat-counter" id="chatCounter">0/500</span>
1155
+ </div>
1156
+ </div>
1157
+
1158
+ <!-- ── Terminal ── -->
1159
+ <div class="terminal-panel reveal reveal-7">
1160
+ <div class="terminal-header">
1161
+ <div class="terminal-dots"><span></span><span></span><span></span></div>
1162
+ <span class="terminal-title">ape-claw CLI &mdash; live session log</span>
1163
+ <span class="panel-actions">
1164
+ <button class="mini-btn" id="terminalAutoBtn" type="button">Auto-scroll: On</button>
1165
+ <button class="mini-btn" id="terminalClearBtn" type="button">Clear</button>
1166
+ <button class="mini-btn" id="terminalExportBtn" type="button">Export</button>
1167
+ </span>
1168
+ </div>
1169
+ <div class="terminal-body" id="terminalBody"></div>
1170
+ </div>
1171
+
1172
+ </div>
1173
+
1174
+ <footer>
1175
+ <div>ApeClaw Terminal &middot; ApeChain &middot; Powered by <a href="https://x.com/ClutchMarkets" target="_blank" rel="noopener" style="color:var(--accent);text-decoration:none;font-weight:700">Clutch Labs</a></div>
1176
+ <div class="footer-links">
1177
+ <a href="https://x.com/ClutchMarkets" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:4px"><svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg> ClutchMarkets</a>
1178
+ <a href="https://openclaw.ai" target="_blank" rel="noopener">OpenClaw</a>
1179
+ <a href="https://github.com/simplefarmer69/ape-claw" target="_blank" rel="noopener">GitHub</a>
1180
+ <a href="/docs" data-keep-query="1">Docs</a>
1181
+ <a href="https://apescan.io" target="_blank" rel="noopener">ApeScan</a>
1182
+ </div>
1183
+ </footer>
1184
+
1185
+ </div>
1186
+
1187
+ <script>
1188
+ window.addEventListener('error', (e) => { console.error('[ApeClaw] Uncaught error:', e.error); });
1189
+ window.addEventListener('unhandledrejection', (e) => { console.error('[ApeClaw] Unhandled rejection:', e.reason); });
1190
+ // ═══════════════════════════════════════════════════════════
1191
+ // APECLAW — Full Dashboard
1192
+ // Real-time event stream from ape-claw CLI telemetry.
1193
+ // ═══════════════════════════════════════════════════════════
1194
+
1195
+ // Lightweight collage background to match the Stonk terminal feel.
1196
+ try {
1197
+ const c = document.getElementById('bgCollage');
1198
+ if (c && !c.hasChildNodes()) {
1199
+ const N = 80;
1200
+ for (let i = 0; i < N; i++) {
1201
+ const img = document.createElement('img');
1202
+ img.src = '/ui/favicon-lobster.png';
1203
+ img.alt = '';
1204
+ img.style.setProperty('--r', `${Math.round((Math.random() * 10 - 5) * 10) / 10}deg`);
1205
+ c.appendChild(img);
1206
+ }
1207
+ }
1208
+ } catch {}
1209
+
1210
+ const APESCAN_TX = 'https://apescan.io/tx/';
1211
+ const APESCAN_ADDR = 'https://apescan.io/address/';
1212
+
1213
+ let COLLECTIONS = [];
1214
+ let REGISTERED_CLAWBOTS = [];
1215
+ let collectionsCarouselTimer = null;
1216
+ let API_BASE = '';
1217
+ const DEFAULT_SHARED_BACKEND = 'https://apeclaw.ai';
1218
+ let collectionQuery = '';
1219
+ let collectionSort = 'rank';
1220
+ let feedPaused = false;
1221
+ let terminalAutoScroll = true;
1222
+ let feedRawEvents = [];
1223
+ // De-dupe telemetry events: backlog + SSE can overlap.
1224
+ let feedKeys = [];
1225
+ const seenFeedKeys = new Set();
1226
+ const uiPrefs = {
1227
+ theme: 'abyss',
1228
+ dense: false,
1229
+ focus: false,
1230
+ motionLow: false,
1231
+ };
1232
+ function normalizeApiBase(raw) {
1233
+ const v = String(raw || '').trim();
1234
+ if (!v) return '';
1235
+ try {
1236
+ const u = new URL(v);
1237
+ return u.origin;
1238
+ } catch {
1239
+ return '';
1240
+ }
1241
+ }
1242
+
1243
+ function initApiBase() {
1244
+ const qp = new URLSearchParams(window.location.search).get('api');
1245
+ if (qp) {
1246
+ API_BASE = normalizeApiBase(qp);
1247
+ return;
1248
+ }
1249
+ const runtime = normalizeApiBase(window.APECLAW_API_BASE || '');
1250
+ const meta = normalizeApiBase(document.querySelector('meta[name="apeclaw-api-base"]')?.content || '');
1251
+ if (runtime || meta) {
1252
+ API_BASE = normalizeApiBase(runtime || meta);
1253
+ return;
1254
+ }
1255
+ API_BASE = '';
1256
+ try { localStorage.removeItem('apeclaw_api_base'); } catch {}
1257
+ }
1258
+
1259
+ function apiUrl(routePath) {
1260
+ if (!API_BASE) return routePath;
1261
+ return `${API_BASE}${routePath}`;
1262
+ }
1263
+
1264
+ function describeBackend() {
1265
+ return API_BASE || window.location.origin;
1266
+ }
1267
+ function announce(msg) {
1268
+ const el = document.getElementById('srStatus');
1269
+ if (el) el.textContent = msg;
1270
+ }
1271
+ function downloadBlob(filename, content, mime = 'text/plain;charset=utf-8') {
1272
+ const blob = new Blob([content], { type: mime });
1273
+ const url = URL.createObjectURL(blob);
1274
+ const a = document.createElement('a');
1275
+ a.href = url;
1276
+ a.download = filename;
1277
+ document.body.appendChild(a);
1278
+ a.click();
1279
+ a.remove();
1280
+ URL.revokeObjectURL(url);
1281
+ }
1282
+ function pushToast(message, type = 'success', ttlMs = 2600) {
1283
+ const stack = document.getElementById('toastStack');
1284
+ if (!stack) return;
1285
+ const toast = document.createElement('div');
1286
+ toast.className = `toast ${type}`;
1287
+ toast.textContent = message;
1288
+ stack.appendChild(toast);
1289
+ setTimeout(() => toast.remove(), ttlMs);
1290
+ }
1291
+ function loadUiPrefs() {
1292
+ try {
1293
+ const raw = localStorage.getItem('apeclaw_ui_prefs');
1294
+ if (!raw) return;
1295
+ const parsed = JSON.parse(raw);
1296
+ if (parsed && typeof parsed === 'object') Object.assign(uiPrefs, parsed);
1297
+ } catch {}
1298
+ }
1299
+ function saveUiPrefs() {
1300
+ try { localStorage.setItem('apeclaw_ui_prefs', JSON.stringify(uiPrefs)); } catch {}
1301
+ }
1302
+ function applyUiPrefs() {
1303
+ document.body.classList.toggle('dense-ui', Boolean(uiPrefs.dense));
1304
+ document.body.classList.toggle('focus-ui', Boolean(uiPrefs.focus));
1305
+ document.body.classList.toggle('motion-low', Boolean(uiPrefs.motionLow));
1306
+ document.body.classList.toggle('theme-daylight', uiPrefs.theme === 'daylight');
1307
+ document.body.classList.toggle('theme-ember', uiPrefs.theme === 'ember');
1308
+ }
1309
+
1310
+
1311
+ const EMOJI_MAP = {
1312
+ // ── Specific collection matches (checked first) ──
1313
+ taur:'🐂',gator:'🐊',zard:'🦎',pupp:'🐶',chump:'🐵',
1314
+ sloo:'🦥',boggy:'🐸',deng:'👾',mono:'🐒',undead:'🧟',
1315
+ nekit:'🐱',doru:'🪆',pape:'🦍',jnky:'🗑️',dsnr:'🎨',
1316
+ trench:'🍖',mull:'💈',box:'📦',bush:'🐒',
1317
+ // ── Generic animal / theme matches ───────────────
1318
+ tiger:'🐯',dog:'🐕',duck:'🦆',frog:'🐸',fox:'🦊',cat:'🐱',egg:'🥚',
1319
+ punk:'💀',zombie:'🧟',gob:'👹',dragon:'🐉',robot:'🤖',bear:'🐻',monkey:'🐒',
1320
+ skull:'💀',owl:'🦉',bat:'🦇',bull:'🐂',otter:'🦦',lobster:'🦞',star:'⭐',
1321
+ kid:'👶',baby:'👶',doll:'🪆',bird:'🐦',cube:'🧊',dice:'🎲',sword:'⚔️',
1322
+ stk:'🎭',
1323
+ pixel:'🟩',pix:'🟩',glyph:'✨',night:'🌙',frost:'❄️',fire:'🔥',ice:'🧊',
1324
+ balloon:'🎈',clown:'🤡',sock:'🧦',rilla:'🦍',
1325
+ // ── "ape" last so it doesn't override tiger/trench/etc. via "on Ape" suffix ──
1326
+ ape:'🦍',
1327
+ default:'🖼️',
1328
+ };
1329
+ function emojiFor(name) {
1330
+ const n = name.toLowerCase();
1331
+ for (const [k,v] of Object.entries(EMOJI_MAP)) { if (n.includes(k)) return v; }
1332
+ return EMOJI_MAP.default;
1333
+ }
1334
+
1335
+ // ── Agent name registry
1336
+ const AGENT_DISPLAY_NAMES = { 'local-cli': 'The Clawllector' };
1337
+ function agentDisplayName(agentId) { return AGENT_DISPLAY_NAMES[agentId] || agentId; }
1338
+
1339
+ // ── Dynamic agent tracking from real events
1340
+ const agentMap = new Map();
1341
+ function ensureAgent(agentId) {
1342
+ if (!agentMap.has(agentId)) {
1343
+ // Check if this is a registered clawbot
1344
+ const reg = REGISTERED_CLAWBOTS.find(b => b.agentId === agentId);
1345
+ agentMap.set(agentId, {
1346
+ name: reg?.name || agentDisplayName(agentId),
1347
+ id: agentId,
1348
+ status: 'active',
1349
+ nfts: 0, bridged: 0, spent: 0, events: 0,
1350
+ lastSeen: Date.now(),
1351
+ verified: Boolean(reg),
1352
+ registered: Boolean(reg),
1353
+ });
1354
+ if (reg) AGENT_DISPLAY_NAMES[agentId] = reg.name;
1355
+ }
1356
+ const a = agentMap.get(agentId);
1357
+ a.lastSeen = Date.now();
1358
+ a.events++;
1359
+ a.status = 'active';
1360
+ return a;
1361
+ }
1362
+
1363
+ let totalNfts = 0, totalBridged = 0, totalSpent = 0, totalEvents = 0;
1364
+ let collectedNfts = [], bridgeOps = [], feedItems = [], terminalLines = [];
1365
+
1366
+ // ═══════════════════════════════════════════════════════════
1367
+ // HELPERS
1368
+ // ═══════════════════════════════════════════════════════════
1369
+ function nowTime() {
1370
+ const d = new Date();
1371
+ return [d.getHours(),d.getMinutes(),d.getSeconds()].map(v=>String(v).padStart(2,'0')).join(':');
1372
+ }
1373
+ function evtTime(evt) {
1374
+ if (!evt.ts) return nowTime();
1375
+ const d = new Date(evt.ts);
1376
+ return [d.getHours(),d.getMinutes(),d.getSeconds()].map(v=>String(v).padStart(2,'0')).join(':');
1377
+ }
1378
+ function shortAddr(addr) { return addr ? addr.slice(0,6)+'..'+addr.slice(-4) : ''; }
1379
+ function txLink(hash) {
1380
+ if (!hash) return '';
1381
+ return `<a class="tx-link" href="${APESCAN_TX}${encodeURIComponent(hash)}" target="_blank" rel="noopener" title="View on ApeScan">${shortAddr(hash)}</a>`;
1382
+ }
1383
+ function feedItem(time, icon, content) {
1384
+ return `<div class="feed-item"><div class="feed-time">${time}</div><div class="feed-icon">${icon}</div><div class="feed-content"><div class="feed-action">${content}</div></div></div>`;
1385
+ }
1386
+ function escapeHtml(v) {
1387
+ return String(v||'').replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
1388
+ }
1389
+ function escapeAttr(v) {
1390
+ return String(v||'').replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;');
1391
+ }
1392
+ function eventDedupeKey(evt) {
1393
+ if (!evt || typeof evt !== 'object') return '';
1394
+ // traceId is generated per event and is stable across backlog/SSE.
1395
+ if (evt.traceId) return `trace:${evt.traceId}`;
1396
+ // txHash is stable for confirmed on-chain events.
1397
+ const tx = evt.result?.txHash || evt.result?.hash || evt.result?.transactionHash || null;
1398
+ if (tx) return `tx:${String(tx)}|${String(evt.eventType||'')}|${String(evt.agentId||'')}`;
1399
+ // Fallback: stable-ish composite (avoid heavy stringify unless needed).
1400
+ return `ts:${String(evt.ts||'')}|${String(evt.eventType||'')}|${String(evt.agentId||'')}`;
1401
+ }
1402
+ function pushFeedEvent(evt, { trim = true } = {}) {
1403
+ const k = eventDedupeKey(evt);
1404
+ if (k && seenFeedKeys.has(k)) return false;
1405
+
1406
+ const html = processEvent(evt);
1407
+ feedItems.push({ html, et: String(evt?.eventType || '') });
1408
+ feedRawEvents.push(evt);
1409
+ feedKeys.push(k || '');
1410
+ if (k) seenFeedKeys.add(k);
1411
+
1412
+ if (trim) {
1413
+ while (feedItems.length > 500) feedItems.shift();
1414
+ while (feedRawEvents.length > 2000) {
1415
+ feedRawEvents.shift();
1416
+ const oldKey = feedKeys.shift();
1417
+ if (oldKey) seenFeedKeys.delete(oldKey);
1418
+ }
1419
+ while (feedKeys.length > feedRawEvents.length) feedKeys.shift();
1420
+ }
1421
+ return true;
1422
+ }
1423
+ function collectionVisual(collection, size='chip') {
1424
+ const img = collection?.imageUrl ? escapeAttr(collection.imageUrl) : '';
1425
+ if (img) {
1426
+ if (size==='nft') return `<img src="${img}" alt="${escapeAttr(collection?.name||'')}" loading="lazy" />`;
1427
+ return `<img class="col-chip-icon" src="${img}" alt="${escapeAttr(collection?.name||'')}" loading="lazy" />`;
1428
+ }
1429
+ return `<span class="${size==='nft'?'':'col-chip-emoji'}">${collection?.emoji||'🖼️'}</span>`;
1430
+ }
1431
+ function timeSince(ts) {
1432
+ const sec = Math.floor((Date.now()-ts)/1000);
1433
+ if (sec<60) return 'just now';
1434
+ if (sec<3600) return Math.floor(sec/60)+'m ago';
1435
+ if (sec<86400) return Math.floor(sec/3600)+'h ago';
1436
+ return Math.floor(sec/86400)+'d ago';
1437
+ }
1438
+
1439
+ // ── Setup toggle
1440
+ function toggleSetup() {
1441
+ const header = document.getElementById('setupToggle');
1442
+ const body = document.getElementById('setupBody');
1443
+ header.classList.toggle('open');
1444
+ body.classList.toggle('open');
1445
+ }
1446
+
1447
+ function renderBackendStatus() {
1448
+ const status = document.getElementById('backendUrlStatus');
1449
+ if (!status) return;
1450
+ status.textContent = `Using backend: ${describeBackend()}`;
1451
+ }
1452
+
1453
+ function initBackendConfigUi() {
1454
+ renderBackendStatus();
1455
+ }
1456
+
1457
+ async function ensureBackendReachableWithFallback() {
1458
+ renderBackendStatus();
1459
+ async function probe(url) {
1460
+ const timeoutMs = 3000;
1461
+ const controller = new AbortController();
1462
+ const timer = setTimeout(() => controller.abort(), timeoutMs);
1463
+ try {
1464
+ const r = await fetch(url, { signal: controller.signal, cache: 'no-store' });
1465
+ return r.ok;
1466
+ } catch {
1467
+ return false;
1468
+ } finally {
1469
+ clearTimeout(timer);
1470
+ }
1471
+ }
1472
+
1473
+ const sameOriginOk = await probe('/api/health');
1474
+ if (sameOriginOk) {
1475
+ API_BASE = '';
1476
+ renderBackendStatus();
1477
+ return;
1478
+ }
1479
+
1480
+ const sharedOk = await probe(DEFAULT_SHARED_BACKEND + '/api/health');
1481
+ if (sharedOk) {
1482
+ API_BASE = DEFAULT_SHARED_BACKEND;
1483
+ renderBackendStatus();
1484
+ terminalLines.push({ type: 'output', text: `[Config] Using shared backend: ${DEFAULT_SHARED_BACKEND}` });
1485
+ return;
1486
+ }
1487
+
1488
+ API_BASE = '';
1489
+ renderBackendStatus();
1490
+ terminalLines.push({ type: 'error', text: '[Config] No live backend detected. Using static API data.' });
1491
+ announce('No reachable backend detected');
1492
+ }
1493
+
1494
+ function initSetupEnhancements() {
1495
+ // Setup mode toggles (Quick Start vs Pod + v2)
1496
+ function applySetupMode(mode) {
1497
+ const m = (mode === 'pod') ? 'pod' : 'quick';
1498
+ try { localStorage.setItem('apeclaw_setup_mode', m); } catch {}
1499
+ const quickBtn = document.getElementById('setupModeQuickBtn');
1500
+ const podBtn = document.getElementById('setupModePodBtn');
1501
+ if (quickBtn) {
1502
+ quickBtn.classList.toggle('active', m === 'quick');
1503
+ quickBtn.setAttribute('aria-selected', m === 'quick' ? 'true' : 'false');
1504
+ }
1505
+ if (podBtn) {
1506
+ podBtn.classList.toggle('active', m === 'pod');
1507
+ podBtn.setAttribute('aria-selected', m === 'pod' ? 'true' : 'false');
1508
+ }
1509
+ document.querySelectorAll('.setup-step').forEach((step) => {
1510
+ const sm = step.getAttribute('data-setup-mode') || 'quick';
1511
+ step.style.display = (sm === m) ? '' : 'none';
1512
+ });
1513
+ }
1514
+ const quickBtn = document.getElementById('setupModeQuickBtn');
1515
+ const podBtn = document.getElementById('setupModePodBtn');
1516
+ if (quickBtn && podBtn) {
1517
+ quickBtn.addEventListener('click', () => applySetupMode('quick'));
1518
+ podBtn.addEventListener('click', () => applySetupMode('pod'));
1519
+ let initial = 'quick';
1520
+ try { initial = localStorage.getItem('apeclaw_setup_mode') || 'quick'; } catch {}
1521
+ applySetupMode(initial);
1522
+ }
1523
+
1524
+ document.querySelectorAll('.setup-step').forEach((step, idx) => {
1525
+ const title = step.querySelector('h3');
1526
+ if (title && !step.querySelector('.setup-check')) {
1527
+ const cb = document.createElement('input');
1528
+ cb.type = 'checkbox';
1529
+ cb.className = 'setup-check';
1530
+ cb.style.marginRight = '6px';
1531
+ const key = `apeclaw_setup_step_${idx}`;
1532
+ try { cb.checked = localStorage.getItem(key) === '1'; } catch {}
1533
+ cb.addEventListener('change', () => {
1534
+ try { localStorage.setItem(key, cb.checked ? '1' : '0'); } catch {}
1535
+ announce(`Setup step ${idx + 1} ${cb.checked ? 'completed' : 'unchecked'}`);
1536
+ });
1537
+ title.prepend(cb);
1538
+ }
1539
+ });
1540
+
1541
+ document.querySelectorAll('.setup-step pre').forEach((pre) => {
1542
+ if (pre.nextElementSibling && pre.nextElementSibling.classList?.contains('copy-code-btn')) return;
1543
+ const btn = document.createElement('button');
1544
+ btn.type = 'button';
1545
+ btn.className = 'copy-code-btn';
1546
+ btn.textContent = 'Copy command';
1547
+ btn.addEventListener('click', async () => {
1548
+ const txt = pre.textContent || '';
1549
+ try {
1550
+ await navigator.clipboard.writeText(txt);
1551
+ btn.textContent = 'Copied';
1552
+ announce('Command copied');
1553
+ setTimeout(() => { btn.textContent = 'Copy command'; }, 1200);
1554
+ } catch {
1555
+ btn.textContent = 'Copy failed';
1556
+ setTimeout(() => { btn.textContent = 'Copy command'; }, 1200);
1557
+ }
1558
+ });
1559
+ pre.insertAdjacentElement('afterend', btn);
1560
+ });
1561
+ }
1562
+
1563
+ function initCollectionControls() {
1564
+ const search = document.getElementById('collectionsSearch');
1565
+ const sort = document.getElementById('collectionsSort');
1566
+ const clearBtn = document.getElementById('collectionsClearBtn');
1567
+ if (!search || !sort) return;
1568
+ function applyQueryFromUi() {
1569
+ collectionQuery = (search.value || '').toLowerCase().trim();
1570
+ if (clearBtn) clearBtn.disabled = !collectionQuery;
1571
+ renderCollectionsBar();
1572
+ }
1573
+ search.addEventListener('input', applyQueryFromUi);
1574
+ search.addEventListener('keydown', (e) => {
1575
+ if (e.key === 'Escape') {
1576
+ search.value = '';
1577
+ applyQueryFromUi();
1578
+ search.blur();
1579
+ }
1580
+ });
1581
+ if (clearBtn) clearBtn.addEventListener('click', () => {
1582
+ search.value = '';
1583
+ applyQueryFromUi();
1584
+ search.focus();
1585
+ });
1586
+ sort.addEventListener('change', () => { collectionSort = sort.value; renderCollectionsBar(); });
1587
+ applyQueryFromUi();
1588
+ }
1589
+
1590
+ function initPanelControls() {
1591
+ const feedPauseBtn = document.getElementById('feedPauseBtn');
1592
+ const feedClearBtn = document.getElementById('feedClearBtn');
1593
+ const feedExportBtn = document.getElementById('feedExportBtn');
1594
+ const terminalClearBtn = document.getElementById('terminalClearBtn');
1595
+ const terminalExportBtn = document.getElementById('terminalExportBtn');
1596
+ const terminalAutoBtn = document.getElementById('terminalAutoBtn');
1597
+ const chatReconnectBtn = document.getElementById('chatReconnectBtn');
1598
+ const chatExportBtn = document.getElementById('chatExportBtn');
1599
+ const feedFilterSel = document.getElementById('feedFilterSel');
1600
+ const agentFilterInput = document.getElementById('agentFilterInput');
1601
+ const agentStatusSel = document.getElementById('agentStatusSel');
1602
+
1603
+ if (feedFilterSel) {
1604
+ // Allow URL override: ?feed=v2 or ?filter=receipts (useful for sharing).
1605
+ let initial = '';
1606
+ try {
1607
+ const u = new URL(window.location.href);
1608
+ initial = (u.searchParams.get('feed') || u.searchParams.get('filter') || '').trim().toLowerCase();
1609
+ } catch {}
1610
+ if (!initial) {
1611
+ try { initial = localStorage.getItem('apeclaw_feed_filter') || 'all'; } catch {}
1612
+ }
1613
+ feedFilterSel.value = initial || 'all';
1614
+ feedFilterSel.addEventListener('change', () => {
1615
+ try { localStorage.setItem('apeclaw_feed_filter', feedFilterSel.value); } catch {}
1616
+ renderFeed();
1617
+ });
1618
+ }
1619
+ if (agentFilterInput) agentFilterInput.addEventListener('input', () => renderAgents());
1620
+ if (agentStatusSel) agentStatusSel.addEventListener('change', () => renderAgents());
1621
+
1622
+ if (feedPauseBtn) feedPauseBtn.addEventListener('click', () => {
1623
+ feedPaused = !feedPaused;
1624
+ feedPauseBtn.textContent = feedPaused ? 'Resume' : 'Pause';
1625
+ if (!feedPaused) renderFeed();
1626
+ });
1627
+ if (feedClearBtn) feedClearBtn.addEventListener('click', () => {
1628
+ feedItems = [];
1629
+ feedRawEvents = [];
1630
+ feedKeys = [];
1631
+ seenFeedKeys.clear();
1632
+ renderFeed();
1633
+ });
1634
+ if (feedExportBtn) feedExportBtn.addEventListener('click', () => {
1635
+ downloadBlob(`apeclaw-feed-${Date.now()}.json`, JSON.stringify(feedRawEvents.slice(-1000), null, 2), 'application/json');
1636
+ });
1637
+ if (terminalClearBtn) terminalClearBtn.addEventListener('click', () => { terminalLines = []; renderTerminal(); });
1638
+ if (terminalExportBtn) terminalExportBtn.addEventListener('click', () => {
1639
+ const text = terminalLines.map((l) => l.text).join('\n');
1640
+ downloadBlob(`apeclaw-terminal-${Date.now()}.log`, text);
1641
+ });
1642
+ if (terminalAutoBtn) terminalAutoBtn.addEventListener('click', () => {
1643
+ terminalAutoScroll = !terminalAutoScroll;
1644
+ terminalAutoBtn.textContent = `Auto-scroll: ${terminalAutoScroll ? 'On' : 'Off'}`;
1645
+ });
1646
+ if (chatReconnectBtn) chatReconnectBtn.addEventListener('click', () => connectChatStream());
1647
+ if (chatExportBtn) chatExportBtn.addEventListener('click', () => {
1648
+ downloadBlob(`apeclaw-chat-${Date.now()}.json`, JSON.stringify(chatMessages, null, 2), 'application/json');
1649
+ });
1650
+ }
1651
+
1652
+ function initShortcutsPopover() {
1653
+ const btn = document.getElementById('shortcutsBtn');
1654
+ const panel = document.getElementById('shortcutsPanel');
1655
+ if (!btn || !panel) return;
1656
+ const close = () => panel.classList.remove('open');
1657
+ btn.addEventListener('click', (e) => {
1658
+ e.stopPropagation();
1659
+ panel.classList.toggle('open');
1660
+ });
1661
+ panel.addEventListener('click', (e) => e.stopPropagation());
1662
+ document.addEventListener('click', close);
1663
+ document.addEventListener('keydown', (e) => {
1664
+ if (e.key === 'Escape') close();
1665
+ });
1666
+ }
1667
+
1668
+ function initCommandDeck() {
1669
+ const sel = document.getElementById('themePresetSel');
1670
+ const resetBtn = document.getElementById('themeResetBtn');
1671
+ const denseBtn = document.getElementById('toggleDenseBtn');
1672
+ const focusBtn = document.getElementById('toggleFocusBtn');
1673
+ const motionBtn = document.getElementById('toggleMotionBtn');
1674
+ if (sel) {
1675
+ sel.value = uiPrefs.theme;
1676
+ sel.addEventListener('change', () => {
1677
+ uiPrefs.theme = sel.value || 'abyss';
1678
+ applyUiPrefs(); saveUiPrefs();
1679
+ pushToast(`Theme: ${uiPrefs.theme}`, 'success');
1680
+ });
1681
+ }
1682
+ if (resetBtn) resetBtn.addEventListener('click', () => {
1683
+ uiPrefs.theme = 'abyss'; uiPrefs.dense = false; uiPrefs.focus = false; uiPrefs.motionLow = false;
1684
+ if (sel) sel.value = 'abyss';
1685
+ applyUiPrefs(); saveUiPrefs();
1686
+ pushToast('Display reset', 'success');
1687
+ });
1688
+ if (denseBtn) denseBtn.addEventListener('click', () => {
1689
+ uiPrefs.dense = !uiPrefs.dense; applyUiPrefs(); saveUiPrefs();
1690
+ });
1691
+ if (focusBtn) focusBtn.addEventListener('click', () => {
1692
+ uiPrefs.focus = !uiPrefs.focus; applyUiPrefs(); saveUiPrefs();
1693
+ });
1694
+ if (motionBtn) motionBtn.addEventListener('click', () => {
1695
+ uiPrefs.motionLow = !uiPrefs.motionLow; applyUiPrefs(); saveUiPrefs();
1696
+ });
1697
+ }
1698
+
1699
+
1700
+ // ═══════════════════════════════════════════════════════════
1701
+ // RENDER
1702
+ // ═══════════════════════════════════════════════════════════
1703
+ function renderCollectionsBar() {
1704
+ const el = document.getElementById('collectionsBar');
1705
+ const status = document.getElementById('collectionsStatus');
1706
+ let visible = [...COLLECTIONS];
1707
+ if (collectionQuery) {
1708
+ visible = visible.filter((c) => `${c.name||''} ${c.slug||''} ${c.contractAddress||''}`.toLowerCase().includes(collectionQuery));
1709
+ }
1710
+ if (collectionSort === 'name') visible.sort((a, b) => String(a.name||'').localeCompare(String(b.name||'')));
1711
+ else visible.sort((a, b) => Number(a.rank||999999) - Number(b.rank||999999));
1712
+
1713
+ if (visible.length === 0) {
1714
+ const msg = COLLECTIONS.length === 0 ? 'Loading collections...' : 'No collections match current filters.';
1715
+ el.innerHTML = `<div style="color:var(--dim);font-size:.72rem;padding:8px">${msg}</div>`;
1716
+ if (status) status.textContent = COLLECTIONS.length === 0 ? '0 loaded' : 'No matches';
1717
+ return;
1718
+ }
1719
+ el.innerHTML = visible.map(c =>
1720
+ `<div class="col-chip" title="${c.contractAddress ? shortAddr(c.contractAddress) : 'no CA'}">
1721
+ ${collectionVisual(c,'chip')}
1722
+ <div>
1723
+ <div class="col-chip-name">${escapeHtml(c.name)}</div>
1724
+ </div>
1725
+ <div class="col-chip-vol">${c.contractAddress ? '✓ CA' : '⚠ No CA'}</div>
1726
+ </div>`
1727
+ ).join('');
1728
+ if (status) status.textContent = `${visible.length}/${COLLECTIONS.length} shown`;
1729
+ updateCollectionsStatus();
1730
+ startCollectionsCarousel();
1731
+ }
1732
+
1733
+ function scrollCollectionsBy(direction = 1) {
1734
+ const el = document.getElementById('collectionsBar');
1735
+ if (!el) return;
1736
+ const amount = Math.max(240, Math.floor(el.clientWidth * 0.8));
1737
+ el.scrollBy({ left: direction * amount, behavior: 'smooth' });
1738
+ setTimeout(updateCollectionsStatus, 250);
1739
+ }
1740
+
1741
+ function updateCollectionsStatus() {
1742
+ const el = document.getElementById('collectionsBar');
1743
+ const status = document.getElementById('collectionsStatus');
1744
+ if (!el || !status) return;
1745
+ const total = el.querySelectorAll('.col-chip').length;
1746
+ if (total === 0) {
1747
+ status.textContent = COLLECTIONS.length === 0 ? '0 loaded' : 'No matches';
1748
+ return;
1749
+ }
1750
+ if (el.scrollWidth <= el.clientWidth + 4) {
1751
+ status.textContent = `${total}/${COLLECTIONS.length} shown`;
1752
+ return;
1753
+ }
1754
+ const progress = Math.min(100, Math.max(0, Math.round((el.scrollLeft / (el.scrollWidth - el.clientWidth)) * 100)));
1755
+ status.textContent = `${total}/${COLLECTIONS.length} shown • ${progress}% viewed`;
1756
+ }
1757
+
1758
+ function startCollectionsCarousel() {
1759
+ const el = document.getElementById('collectionsBar');
1760
+ if (!el) return;
1761
+ if (collectionsCarouselTimer) clearInterval(collectionsCarouselTimer);
1762
+ if (el.scrollWidth <= el.clientWidth + 4) return;
1763
+ collectionsCarouselTimer = setInterval(() => {
1764
+ if (document.hidden) return;
1765
+ const maxLeft = el.scrollWidth - el.clientWidth;
1766
+ if (el.scrollLeft >= maxLeft - 4) {
1767
+ el.scrollTo({ left: 0, behavior: 'smooth' });
1768
+ } else {
1769
+ scrollCollectionsBy(1);
1770
+ }
1771
+ }, 5000);
1772
+ }
1773
+
1774
+ function renderAgents() {
1775
+ const el = document.getElementById('agentsGrid');
1776
+ const q = (document.getElementById('agentFilterInput')?.value || '').toLowerCase().trim();
1777
+ const statusSel = (document.getElementById('agentStatusSel')?.value || 'all').toLowerCase().trim();
1778
+
1779
+ // Merge registered clawbots that haven't sent events yet
1780
+ for (const reg of REGISTERED_CLAWBOTS) {
1781
+ if (!agentMap.has(reg.agentId)) {
1782
+ agentMap.set(reg.agentId, {
1783
+ name: reg.name || reg.agentId,
1784
+ id: reg.agentId,
1785
+ status: 'offline',
1786
+ nfts: 0, bridged: 0, spent: 0, events: 0,
1787
+ lastSeen: reg.createdAt ? new Date(reg.createdAt).getTime() : 0,
1788
+ verified: true,
1789
+ registered: true,
1790
+ });
1791
+ }
1792
+ }
1793
+
1794
+ if (agentMap.size === 0) {
1795
+ el.innerHTML = `<div style="grid-column:1/-1;color:var(--dim);font-size:.78rem;text-align:center;padding:24px">
1796
+ <div style="font-size:2.5rem;margin-bottom:8px">🦞</div>
1797
+ <div>No Clawllectors registered yet</div>
1798
+ <div style="font-size:.68rem;margin-top:6px">Set up your <a href="https://openclaw.ai" target="_blank" rel="noopener">OpenClaw</a> agent, then register a Clawllector:</div>
1799
+ <div style="margin-top:8px"><code>npx --yes github:simplefarmer69/ape-claw clawbot register --agent-id my-clawllector --json</code></div>
1800
+ </div>`;
1801
+ return;
1802
+ }
1803
+ const now = Date.now();
1804
+ for (const a of agentMap.values()) {
1805
+ if (a.events === 0) a.status = 'offline';
1806
+ else if (now - a.lastSeen > 300_000) a.status = 'offline';
1807
+ else if (now - a.lastSeen > 60_000) a.status = 'idle';
1808
+ else a.status = 'active';
1809
+ }
1810
+ const sorted = [...agentMap.values()].sort((a,b) => {
1811
+ const statusOrder = {active:0,idle:1,offline:2};
1812
+ const diff = (statusOrder[a.status]||9) - (statusOrder[b.status]||9);
1813
+ if (diff !== 0) return diff;
1814
+ return b.lastSeen - a.lastSeen;
1815
+ });
1816
+ const filtered = sorted.filter((a) => {
1817
+ if (statusSel !== 'all' && a.status !== statusSel) return false;
1818
+ if (!q) return true;
1819
+ return String(a.name || '').toLowerCase().includes(q) || String(a.id || '').toLowerCase().includes(q);
1820
+ });
1821
+ el.innerHTML = filtered.map(a => {
1822
+ const badge = a.verified ? '<span class="verified-badge">Clawllector</span>' : '';
1823
+ const cardClass = a.verified ? 'agent-card verified-card' : 'agent-card';
1824
+ return `<div class="${cardClass}">
1825
+ <div class="agent-name">🦞 ${escapeHtml(a.name)} ${badge}</div>
1826
+ <div class="agent-id">${escapeHtml(a.id)}</div>
1827
+ <div class="agent-status"><span class="dot ${a.status}"></span> ${a.status} ${a.lastSeen > 0 ? '&bull; '+timeSince(a.lastSeen) : ''}</div>
1828
+ <div class="agent-stat-row"><span>Events</span><span>${a.events.toLocaleString()}</span></div>
1829
+ <div class="agent-stat-row"><span>NFTs</span><span>${a.nfts}</span></div>
1830
+ <div class="agent-stat-row"><span>Bridged</span><span>${a.bridged.toLocaleString()} APE</span></div>
1831
+ <div class="agent-stat-row"><span>Spent</span><span>${a.spent.toLocaleString()} APE</span></div>
1832
+ </div>`;
1833
+ }).join('');
1834
+ }
1835
+
1836
+ function renderNftGrid() {
1837
+ const el = document.getElementById('nftGrid');
1838
+ if (collectedNfts.length === 0) {
1839
+ el.innerHTML = `<div style="grid-column:1/-1;color:var(--dim);font-size:.78rem;text-align:center;padding:24px">
1840
+ <div style="font-size:2rem;margin-bottom:6px">🖼️</div>
1841
+ No NFTs collected yet.<br>Purchases from <code>npx --yes github:simplefarmer69/ape-claw nft buy --execute</code> appear here in real time.
1842
+ </div>`;
1843
+ return;
1844
+ }
1845
+ el.innerHTML = collectedNfts.map(n => {
1846
+ const txHtml = n.txHash
1847
+ ? `<div class="nft-tx"><a href="${APESCAN_TX}${encodeURIComponent(n.txHash)}" target="_blank" rel="noopener">${shortAddr(n.txHash)}</a></div>`
1848
+ : '';
1849
+ return `<div class="nft-card">
1850
+ <div class="nft-img"><div class="nft-bg"></div>${collectionVisual(n.collection,'nft')}</div>
1851
+ <div class="nft-info">
1852
+ <div class="nft-collection">${escapeHtml(n.collection.name)}</div>
1853
+ <div class="nft-name">#${escapeHtml(n.tokenId)}</div>
1854
+ <div class="nft-price">${escapeHtml(n.price)} APE</div>
1855
+ <div class="nft-agent">by ${escapeHtml(n.agent)} &bull; ${n.time}</div>
1856
+ ${txHtml}
1857
+ </div>
1858
+ </div>`;
1859
+ }).join('');
1860
+ }
1861
+
1862
+ function renderBridge() {
1863
+ const el = document.getElementById('bridgePanel');
1864
+ if (bridgeOps.length === 0) {
1865
+ el.innerHTML = `<div style="color:var(--dim);font-size:.75rem;padding:12px">
1866
+ <div style="font-size:1.5rem;margin-bottom:4px">🌉</div>
1867
+ No bridge operations yet.<br>Bridge executions from <code>npx --yes github:simplefarmer69/ape-claw bridge execute</code> appear here.
1868
+ </div>`;
1869
+ return;
1870
+ }
1871
+ el.innerHTML = bridgeOps.map(b => {
1872
+ const txHtml = b.txHash ? ` <a class="tx-link" href="${APESCAN_TX}${encodeURIComponent(b.txHash)}" target="_blank" rel="noopener">${shortAddr(b.txHash)}</a>` : '';
1873
+ return `<div class="bridge-item">
1874
+ <div class="bridge-route">${escapeHtml(b.from)} <span class="bridge-arrow">→</span> ${escapeHtml(b.to)}</div>
1875
+ <div style="font-size:.65rem;color:var(--dim)">${b.fee ? `fee ${b.fee} APE &bull; ` : ''}${escapeHtml(b.agent)}${txHtml}</div>
1876
+ <div class="bridge-amount">${escapeHtml(b.amount)}</div>
1877
+ <span class="bridge-status-tag ${b.status}">${b.status}</span>
1878
+ </div>`;
1879
+ }).join('');
1880
+ }
1881
+
1882
+ function renderFeed() {
1883
+ const el = document.getElementById('activityFeed');
1884
+ const filter = (document.getElementById('feedFilterSel')?.value || 'all').toLowerCase().trim();
1885
+ function categoryForEventType(et) {
1886
+ const t = String(et || '');
1887
+ if (!t) return 'other';
1888
+ if (t.startsWith('v2.receipt.') || t.includes('receipt')) return 'receipts';
1889
+ if (t.startsWith('nft.') || t.includes('nft')) return 'nft';
1890
+ if (t.startsWith('bridge.') || t.includes('bridge')) return 'bridge';
1891
+ if (t.startsWith('chat.') || t.includes('chat')) return 'chat';
1892
+ if (t.startsWith('policy.')) return 'policy';
1893
+ if (t.startsWith('v2.')) return 'v2';
1894
+ return 'other';
1895
+ }
1896
+ const pausedBanner = feedPaused
1897
+ ? `<div style="font-size:.66rem;color:var(--gold);margin-bottom:8px">Feed paused — live events continue in background.</div>`
1898
+ : '';
1899
+ if (feedItems.length === 0) {
1900
+ el.innerHTML = `${pausedBanner}<div style="color:var(--dim);font-size:.78rem;text-align:center;padding:24px">
1901
+ <div style="font-size:2rem;margin-bottom:6px">📡</div>
1902
+ Listening for events&hellip;<br>Run any <code>ape-claw</code> command to see live activity.
1903
+ </div>`;
1904
+ return;
1905
+ }
1906
+ const visible = (filter === 'all')
1907
+ ? feedItems
1908
+ : feedItems.filter((f) => {
1909
+ const c = categoryForEventType(f.et);
1910
+ if (filter === 'v2') return c === 'v2' || c === 'receipts';
1911
+ return c === filter;
1912
+ });
1913
+ const note = (filter !== 'all')
1914
+ ? `<div style="font-size:.66rem;color:var(--dim);margin-bottom:8px">Filter: <code>${escapeHtml(filter)}</code> • showing ${visible.length}/${feedItems.length}</div>`
1915
+ : '';
1916
+ el.innerHTML = pausedBanner + note + visible.slice(-100).reverse().map(f => f.html).join('');
1917
+ }
1918
+
1919
+ function renderTerminal() {
1920
+ const el = document.getElementById('terminalBody');
1921
+ if (terminalLines.length === 0) {
1922
+ el.innerHTML = '<div class="t-output">Waiting for CLI events...</div>';
1923
+ return;
1924
+ }
1925
+ el.innerHTML = terminalLines.map(l => {
1926
+ if (l.type==='prompt') return `<div><span class="t-prompt">❯</span> <span class="t-cmd">${l.text}</span></div>`;
1927
+ if (l.type==='accent') return `<div class="t-accent">${l.text}</div>`;
1928
+ if (l.type==='success') return `<div class="t-success">${l.text}</div>`;
1929
+ if (l.type==='error') return `<div class="t-error">${l.text}</div>`;
1930
+ return `<div class="t-output">${l.text}</div>`;
1931
+ }).join('');
1932
+ if (terminalAutoScroll) el.scrollTop = el.scrollHeight;
1933
+ }
1934
+
1935
+ function updateStats() {
1936
+ const activeCount = [...agentMap.values()].filter(a => a.status==='active').length;
1937
+ const totalCount = agentMap.size;
1938
+ const clawbotCount = Math.max(totalCount, REGISTERED_CLAWBOTS.length, 111);
1939
+ const setIf = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
1940
+ setIf('totalAgents', activeCount + '/' + totalCount);
1941
+ setIf('totalEvents', totalEvents.toLocaleString());
1942
+ setIf('totalNfts', totalNfts);
1943
+ setIf('totalBridged', Math.round(totalBridged).toLocaleString());
1944
+ setIf('totalSpent', Math.round(totalSpent).toLocaleString());
1945
+ setIf('agentCountBadge', totalCount);
1946
+ setIf('eventCountBadge', totalEvents.toLocaleString());
1947
+ setIf('nftCountBadge', totalNfts);
1948
+ setIf('bridgeCountBadge', bridgeOps.length);
1949
+ setIf('psAgentCount', clawbotCount.toLocaleString());
1950
+ setIf('psEventCount', totalEvents.toLocaleString());
1951
+ setIf('psNftCount', totalNfts);
1952
+ setIf('psBridgeCount', bridgeOps.length);
1953
+ }
1954
+
1955
+ function setConnectionStatus(connected) {
1956
+ const dot = document.getElementById('connectionDot');
1957
+ const label = document.getElementById('connectionLabel');
1958
+ if (connected) {
1959
+ dot.className = 'connection-dot connected';
1960
+ label.textContent = 'Live';
1961
+ } else {
1962
+ dot.className = 'connection-dot disconnected';
1963
+ label.textContent = 'Offline';
1964
+ }
1965
+ }
1966
+
1967
+ // ═══════════════════════════════════════════════════════════
1968
+ // EVENT-TO-UI MAPPER
1969
+ // ═══════════════════════════════════════════════════════════
1970
+ function findCollection(input) {
1971
+ const s = String(input||'').toLowerCase();
1972
+ return COLLECTIONS.find(c =>
1973
+ c.name.toLowerCase()===s || c.slug===s || (c.contractAddress && c.contractAddress.toLowerCase()===s)
1974
+ ) || { name:input||'unknown', emoji:'🖼️', slug:'', imageUrl:null };
1975
+ }
1976
+
1977
+ function processEvent(evt) {
1978
+ const t = evtTime(evt);
1979
+ const et = evt.eventType || 'unknown';
1980
+ const cmd = evt.command || 'ape-claw';
1981
+ const rawId = evt.agentId || 'local-cli';
1982
+ const ag = agentDisplayName(rawId);
1983
+ const payload = evt.payload || {};
1984
+ const result = evt.result || {};
1985
+
1986
+ const agent = ensureAgent(rawId);
1987
+ totalEvents++;
1988
+
1989
+ // ── NFT buy confirmed
1990
+ if (et === 'nft.buy.executed' || et === 'nft.buy.confirmed') {
1991
+ const q = result.quote || {};
1992
+ const col = findCollection(q.collection || payload.collection);
1993
+ const tid = q.tokenId || payload.tokenId || '?';
1994
+ const price = q.priceApe ?? payload.priceApe ?? payload.maxPrice ?? 0;
1995
+ const tx = result.txHash || '';
1996
+ collectedNfts.unshift({ collection:col, tokenId:String(tid), price:String(price), agent:ag, time:t, txHash:tx });
1997
+ if (collectedNfts.length>50) collectedNfts.pop();
1998
+ totalNfts++; totalSpent += Number(price)||0;
1999
+ agent.nfts++; agent.spent += Number(price)||0;
2000
+ renderNftGrid();
2001
+ return feedItem(t,'🦞',`<strong>${escapeHtml(ag)}</strong> purchased <span class="collection-tag">${escapeHtml(col.name)}</span> #${escapeHtml(tid)} for <span class="price">${price} APE</span> ${txLink(tx)}`);
2002
+ }
2003
+ // ── NFT buy dry-run
2004
+ if (et === 'nft.buy.dry_run') {
2005
+ return feedItem(t,'🔒',`<strong>${escapeHtml(ag)}</strong> dry-run buy &mdash; no broadcast (pass --execute to send)`);
2006
+ }
2007
+ // ── NFT quote created
2008
+ if (et === 'nft.quote.created') {
2009
+ const col = findCollection(result.collection || payload.collection);
2010
+ const tid = result.tokenId || payload.tokenId || '?';
2011
+ const price = result.priceApe ?? payload.maxPrice ?? '?';
2012
+ const qid = result.quoteId || '';
2013
+ return feedItem(t,'💰',`<strong>${escapeHtml(ag)}</strong> quoted <span class="collection-tag">${escapeHtml(col.name)}</span> #${escapeHtml(tid)} at <span class="price">${price} APE</span> <span class="hash">${escapeHtml(qid)}</span>`);
2014
+ }
2015
+ // ── NFT simulation
2016
+ if (et === 'nft.simulation.passed') {
2017
+ return feedItem(t,'✅',`<strong>${escapeHtml(ag)}</strong> simulation passed <span class="hash">${escapeHtml(result.quoteId||'')}</span>`);
2018
+ }
2019
+ if (et === 'nft.simulation.failed') {
2020
+ return feedItem(t,'❌',`<strong>${escapeHtml(ag)}</strong> simulation failed: ${escapeHtml(result.reason||'unknown')}`);
2021
+ }
2022
+ // ── Market
2023
+ if (et === 'market.collections.read') {
2024
+ return feedItem(t,'📋',`<strong>${escapeHtml(ag)}</strong> loaded ${result.count??COLLECTIONS.length} collections (${escapeHtml(result.source||'allowlist')})`);
2025
+ }
2026
+ if (et === 'market.listings.read') {
2027
+ return feedItem(t,'🔍',`<strong>${escapeHtml(ag)}</strong> found ${result.count??0} listings for <code>${escapeHtml(cmd)}</code>`);
2028
+ }
2029
+ if (et === 'market.listings.failed') {
2030
+ return feedItem(t,'⚠️',`<strong>${escapeHtml(ag)}</strong> listings failed: ${escapeHtml(evt.error||'error')}`);
2031
+ }
2032
+ // ── Bridge
2033
+ if (et === 'bridge.quote.created') {
2034
+ const from = result.from || payload.from || '?';
2035
+ const amt = result.amount ?? payload.amount ?? '?';
2036
+ return feedItem(t,'🌉',`<strong>${escapeHtml(ag)}</strong> bridge quote: <span class="price">${amt} APE</span> from ${escapeHtml(from)} → ApeChain`);
2037
+ }
2038
+ if (et === 'bridge.execute.confirmed') {
2039
+ const amt = result.amount ?? 0;
2040
+ const from = result.from ?? payload.from ?? 'unknown';
2041
+ const fee = result.feeBps ? (Number(amt)*(result.feeBps/10000)).toFixed(2) : null;
2042
+ const tx = result.txHash || result.sourceTxHash || '';
2043
+ bridgeOps.unshift({ from, to:'ApeChain', amount:`${amt} APE`, status:'completed', agent:ag, fee, txHash:tx });
2044
+ if (bridgeOps.length>20) bridgeOps.pop();
2045
+ totalBridged += Number(amt)||0;
2046
+ agent.bridged += Number(amt)||0;
2047
+ renderBridge();
2048
+ return feedItem(t,'✅',`<strong>${escapeHtml(ag)}</strong> bridged <span class="price">${amt} APE</span> from ${escapeHtml(from)} → ApeChain ${txLink(tx)}`);
2049
+ }
2050
+ if (et === 'bridge.execute.dry_run') {
2051
+ return feedItem(t,'🔒',`<strong>${escapeHtml(ag)}</strong> bridge dry-run &mdash; no broadcast`);
2052
+ }
2053
+ if (et === 'bridge.status.read') {
2054
+ return feedItem(t,'📊',`<strong>${escapeHtml(ag)}</strong> bridge status: <span class="collection-tag">${escapeHtml(result.status||'unknown')}</span>`);
2055
+ }
2056
+ // ── Chain info
2057
+ if (et === 'chain.info.read') {
2058
+ const block = result.latestBlock ? `block ${Number(result.latestBlock).toLocaleString()}` : 'block unknown';
2059
+ // Treat missing rpcOk as unknown (neutral) rather than failure.
2060
+ const rpcStatus = (typeof result.rpcOk === 'boolean')
2061
+ ? (result.rpcOk ? 'RPC ✓' : 'RPC ✗')
2062
+ : 'RPC ?';
2063
+ if (result.latestBlock) document.getElementById('chainBlock').textContent = `#${Number(result.latestBlock).toLocaleString()}`;
2064
+ return feedItem(t,'⛓️',`<strong>${escapeHtml(ag)}</strong> chain info: ${block}, ${rpcStatus}`);
2065
+ }
2066
+ // ── Doctor
2067
+ if (et === 'doctor.ran') {
2068
+ if (result.agent?.verified) {
2069
+ agent.verified = true;
2070
+ agent.name = result.agent.name || agent.name;
2071
+ AGENT_DISPLAY_NAMES[rawId] = agent.name;
2072
+ }
2073
+ const stats = result.allowlistStats || {};
2074
+ const ok = result.ok !== false ? '✓' : '✗';
2075
+ const verifiedNote = result.agent?.verified ? ' (verified)' : '';
2076
+ const executeReady = result.execution?.executeReady;
2077
+ const execState = executeReady ? 'execute ready' : 'read-only ready';
2078
+ const pkHint = !executeReady && !result.execution?.privateKeyProvided
2079
+ ? ' &middot; set APE_CLAW_PRIVATE_KEY or save one with <code>auth set --private-key 0x... --json</code>'
2080
+ : '';
2081
+ return feedItem(t,'🩺',`<strong>${escapeHtml(agentDisplayName(rawId))}</strong> doctor ${ok}${verifiedNote} &mdash; ${stats.total||'?'} collections, ${stats.unresolvedCount||0} unresolved &middot; ${escapeHtml(execState)}${pkHint}`);
2082
+ }
2083
+ // ── Allowlist audit
2084
+ if (et === 'allowlist.audit.ran') {
2085
+ return feedItem(t,'📝',`<strong>${escapeHtml(ag)}</strong> allowlist audit: ${result.total||0} total, ${result.unresolvedCount||0} unresolved`);
2086
+ }
2087
+ // ── Policy blocked
2088
+ if (et === 'policy.blocked') {
2089
+ return feedItem(t,'⛔',`<strong>${escapeHtml(ag)}</strong> blocked: ${escapeHtml(evt.error||'validation failed')}`);
2090
+ }
2091
+ // ── Skill install
2092
+ if (et === 'skill.install.ran') {
2093
+ return feedItem(t,'📦',`<strong>${escapeHtml(ag)}</strong> installed skill at <code>${escapeHtml(result.skillPath||'?')}</code>`);
2094
+ }
2095
+ // ── v2 (onchain primitives)
2096
+ if (et === 'v2.skill.minted') {
2097
+ const sid = result.skillId || '?';
2098
+ const tx = result.txHash || '';
2099
+ return feedItem(t,'🧬',`<strong>${escapeHtml(ag)}</strong> minted SkillNFT #${escapeHtml(sid)} <span class="hash">${escapeHtml(shortAddr(tx))}</span>`);
2100
+ }
2101
+ if (et === 'v2.skill.version.published') {
2102
+ const sid = result.skillId || '?';
2103
+ const vh = result.versionHash ? shortAddr(String(result.versionHash)) : '';
2104
+ const ch = result.contentHash ? shortAddr(String(result.contentHash)) : '';
2105
+ const uri = result.uri || '';
2106
+ return feedItem(t,'📚',`<strong>${escapeHtml(ag)}</strong> published v2 skill version for #${escapeHtml(sid)} <span class="hash">${escapeHtml(vh)}</span> <span class="hash">${escapeHtml(ch)}</span> ${uri ? `<span class="hash">${escapeHtml(uri)}</span>` : ''}`);
2107
+ }
2108
+ if (et === 'v2.intent.created') {
2109
+ const ih = result.intentHash ? shortAddr(String(result.intentHash)) : '';
2110
+ const exp = result.expiresAt ? ` expires ${escapeHtml(String(result.expiresAt))}` : '';
2111
+ return feedItem(t,'🎯',`<strong>${escapeHtml(ag)}</strong> created v2 intent <span class="hash">${escapeHtml(ih)}</span>${exp}`);
2112
+ }
2113
+ if (et === 'v2.intent.cancelled') {
2114
+ const id = result.intentId || '?';
2115
+ return feedItem(t,'🧹',`<strong>${escapeHtml(ag)}</strong> cancelled v2 intent #${escapeHtml(String(id))}`);
2116
+ }
2117
+ if (et === 'v2.receipt.recorded') {
2118
+ const subj = result.subject || payload.subject || 'agent:unknown';
2119
+ const th = result.traceIdHash ? shortAddr(String(result.traceIdHash)) : '';
2120
+ const ch = result.contentHash ? shortAddr(String(result.contentHash)) : '';
2121
+ return feedItem(t,'🧾',`<strong>${escapeHtml(ag)}</strong> recorded receipt <span class="collection-tag">${escapeHtml(subj)}</span> <span class="hash">${escapeHtml(th)}</span> <span class="hash">${escapeHtml(ch)}</span>`);
2122
+ }
2123
+ // ── Clawbot registered
2124
+ if (et === 'clawbot.registered') {
2125
+ return feedItem(t,'🦞',`New Clawllector registered: <strong>${escapeHtml(result.name||result.agentId||ag)}</strong>`);
2126
+ }
2127
+ if (et === 'clawbot.list.read') {
2128
+ return feedItem(t,'📋',`<strong>${escapeHtml(ag)}</strong> listed ${result.count??0} registered Clawllectors`);
2129
+ }
2130
+ // ── NFT buy retry
2131
+ if (et === 'nft.buy.retry') {
2132
+ return feedItem(t,'🔄',`<strong>${escapeHtml(ag)}</strong> listing sniped &mdash; retrying with fresh order (attempt ${payload.attempt||'?'})`);
2133
+ }
2134
+ // ── Fallback
2135
+ return feedItem(t,'📡',`<strong>${escapeHtml(ag)}</strong> <code>${escapeHtml(et)}</code>`);
2136
+ }
2137
+
2138
+ // ═══════════════════════════════════════════════════════════
2139
+ // LIVE TELEMETRY — SSE + backlog
2140
+ // ═══════════════════════════════════════════════════════════
2141
+ let sseConnected = false;
2142
+
2143
+ async function connectLiveTelemetry() {
2144
+ // 1) Fetch backlog
2145
+ try {
2146
+ const r = await fetch(apiUrl('/events/backlog'));
2147
+ if (r.ok) {
2148
+ const data = await r.json();
2149
+ (data.events||[]).forEach(evt => {
2150
+ pushFeedEvent(evt, { trim: false });
2151
+ });
2152
+ // Trim once after bulk push.
2153
+ while (feedItems.length > 500) feedItems.shift();
2154
+ while (feedRawEvents.length > 2000) {
2155
+ feedRawEvents.shift();
2156
+ const oldKey = feedKeys.shift();
2157
+ if (oldKey) seenFeedKeys.delete(oldKey);
2158
+ }
2159
+ while (feedKeys.length > feedRawEvents.length) feedKeys.shift();
2160
+ renderFeed(); renderAgents(); updateStats();
2161
+ }
2162
+ } catch {}
2163
+
2164
+ // 2) SSE stream
2165
+ try {
2166
+ const es = new EventSource(apiUrl('/events'));
2167
+ es.onopen = () => {
2168
+ sseConnected = true;
2169
+ setConnectionStatus(true);
2170
+ terminalLines.push({ type:'success', text:`[SSE] Connected to telemetry stream (${describeBackend()})` });
2171
+ renderTerminal();
2172
+ };
2173
+ es.onmessage = (msg) => {
2174
+ try {
2175
+ const evt = JSON.parse(msg.data);
2176
+ const added = pushFeedEvent(evt);
2177
+ if (added) {
2178
+ if (!feedPaused) renderFeed();
2179
+ renderAgents(); updateStats();
2180
+
2181
+ // Mirror to terminal
2182
+ const termType = evt.ok === false ? 'error' : (
2183
+ evt.eventType.includes('confirmed') || evt.eventType.includes('passed') ? 'success' :
2184
+ evt.eventType.includes('created') ? 'accent' : 'output'
2185
+ );
2186
+ const agName = agentDisplayName(evt.agentId || 'local-cli');
2187
+ terminalLines.push({ type:'prompt', text: evt.command || `ape-claw ${evt.eventType}` });
2188
+ terminalLines.push({ type: termType, text: `[${agName}] ${evt.eventType} ${evt.ok===false ? '✗ '+escapeHtml(evt.error||'') : '✓'}` });
2189
+ if (terminalLines.length > 80) terminalLines.shift();
2190
+ renderTerminal();
2191
+ }
2192
+ } catch {}
2193
+ };
2194
+ es.onerror = () => {
2195
+ if (sseConnected) {
2196
+ sseConnected = false;
2197
+ setConnectionStatus(false);
2198
+ terminalLines.push({ type:'error', text:'[SSE] Connection lost — reconnecting...' });
2199
+ renderTerminal();
2200
+ }
2201
+ };
2202
+ } catch {
2203
+ setConnectionStatus(false);
2204
+ }
2205
+ }
2206
+
2207
+ // ═══════════════════════════════════════════════════════════
2208
+ // STATUS HEARTBEAT
2209
+ // ═══════════════════════════════════════════════════════════
2210
+ setInterval(() => {
2211
+ if (agentMap.size > 0) {
2212
+ renderAgents();
2213
+ updateStats();
2214
+ }
2215
+ }, 10_000);
2216
+
2217
+ // ═══════════════════════════════════════════════════════════
2218
+ // CLAWLLECTOR CHAT
2219
+ // ═══════════════════════════════════════════════════════════
2220
+ let chatMessages = [];
2221
+ let chatSseSource = null;
2222
+ let chatCredentials = { room: 'general', agentId: '', agentToken: '', identityToken: '' };
2223
+ let chatReconnectTimer = null;
2224
+ let chatReconnectAttempts = 0;
2225
+ let chatRooms = [];
2226
+ const chatUnreadByRoom = new Map();
2227
+ let chatReplyToId = null;
2228
+ const CHAT_REACTION_EMOJIS = ['👍', '🔥', '😂', '🫡', '👀'];
2229
+
2230
+ function normalizeRoomName(input) {
2231
+ const raw = String(input || 'general').toLowerCase().trim().replace(/[^a-z0-9_-]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '');
2232
+ return raw || 'general';
2233
+ }
2234
+
2235
+ function selectChatRoom(room) {
2236
+ const normalized = normalizeRoomName(room);
2237
+ document.getElementById('chatRoom').value = normalized;
2238
+ setChatReplyTarget(null);
2239
+ updateChatAuthStatus();
2240
+ chatUnreadByRoom.set(normalized, 0);
2241
+ renderChatRooms();
2242
+ loadChatHistory();
2243
+ connectChatStream();
2244
+ }
2245
+
2246
+ function renderChatRooms() {
2247
+ const el = document.getElementById('chatRooms');
2248
+ if (!el) return;
2249
+ const current = normalizeRoomName(chatCredentials.room || 'general');
2250
+ const combined = new Map();
2251
+ for (const r of chatRooms) combined.set(normalizeRoomName(r.room), r);
2252
+ combined.set(current, combined.get(current) || { room: current, count: 0, participants: 0 });
2253
+ const ordered = [...combined.values()].sort((a, b) => String(b.lastTs || '').localeCompare(String(a.lastTs || '')));
2254
+ el.innerHTML = ordered.map((r) => {
2255
+ const room = normalizeRoomName(r.room);
2256
+ const unread = Number(chatUnreadByRoom.get(room) || 0);
2257
+ return `<button type="button" class="chat-room-chip${room===current?' active':''}" data-room="${escapeAttr(room)}">
2258
+ <span>/${escapeHtml(room)}</span>
2259
+ ${unread > 0 ? `<span class="room-unread">${unread}</span>` : ''}
2260
+ </button>`;
2261
+ }).join('');
2262
+ el.querySelectorAll('.chat-room-chip').forEach((btn) => {
2263
+ btn.addEventListener('click', () => selectChatRoom(btn.dataset.room || 'general'));
2264
+ });
2265
+ }
2266
+
2267
+ async function loadChatRooms() {
2268
+ try {
2269
+ const r = await fetch(apiUrl('/api/chat/rooms?limit=60'));
2270
+ if (r.ok) {
2271
+ const data = await r.json();
2272
+ chatRooms = Array.isArray(data.rooms) ? data.rooms : [];
2273
+ renderChatRooms();
2274
+ }
2275
+ } catch {}
2276
+ }
2277
+
2278
+ function chatMsgTime(ts) {
2279
+ const d = new Date(ts);
2280
+ return [d.getHours(), d.getMinutes()].map(v => String(v).padStart(2, '0')).join(':');
2281
+ }
2282
+
2283
+ function formatChatText(text) {
2284
+ const safe = escapeHtml(String(text || ''));
2285
+ return safe.replace(/(https?:\/\/[^\s<]+)/g, '<a href="$1" target="_blank" rel="noopener">$1</a>');
2286
+ }
2287
+
2288
+ function chatDraftKey(room) {
2289
+ return `apeclaw_chat_draft_${normalizeRoomName(room || 'general')}`;
2290
+ }
2291
+
2292
+ function applyChatSlash(text) {
2293
+ const t = String(text || '').trim();
2294
+ if (t.startsWith('/shrug ')) return `${t.slice(7)} ¯\\_(ツ)_/¯`;
2295
+ if (t.startsWith('/tableflip ')) return `(╯°□°)╯︵ ┻━┻ ${t.slice(11)}`;
2296
+ if (t.startsWith('/me ')) return `* ${chatCredentials.agentId || 'agent'} ${t.slice(4)}`;
2297
+ return t;
2298
+ }
2299
+
2300
+ function findChatMessageById(id) {
2301
+ return chatMessages.find((m) => String(m.id) === String(id)) || null;
2302
+ }
2303
+
2304
+ function setChatReplyTarget(messageId) {
2305
+ chatReplyToId = messageId ? String(messageId) : null;
2306
+ const bar = document.getElementById('chatReplyingBar');
2307
+ const target = document.getElementById('chatReplyingTarget');
2308
+ if (!bar || !target) return;
2309
+ if (!chatReplyToId) {
2310
+ bar.classList.remove('active');
2311
+ target.textContent = 'message';
2312
+ return;
2313
+ }
2314
+ const msg = findChatMessageById(chatReplyToId);
2315
+ const label = msg ? `${msg.agentName || msg.agentId}: ${String(msg.text || '').slice(0, 40)}` : `#${chatReplyToId.slice(-6)}`;
2316
+ target.textContent = label;
2317
+ bar.classList.add('active');
2318
+ }
2319
+
2320
+ function applyReactionEventToMessages(evt) {
2321
+ const msg = findChatMessageById(evt.messageId);
2322
+ if (!msg) return;
2323
+ if (!msg.reactions || typeof msg.reactions !== 'object') msg.reactions = {};
2324
+ if (!msg.reactionUsers || typeof msg.reactionUsers !== 'object') msg.reactionUsers = {};
2325
+ const emoji = String(evt.emoji || '').trim();
2326
+ const actor = String(evt.agentId || '').trim();
2327
+ if (!emoji || !actor) return;
2328
+ const users = new Set(msg.reactionUsers[emoji] || []);
2329
+ if (users.has(actor)) users.delete(actor);
2330
+ else users.add(actor);
2331
+ msg.reactionUsers[emoji] = [...users];
2332
+ msg.reactions[emoji] = msg.reactionUsers[emoji].length;
2333
+ }
2334
+
2335
+ async function sendChatReaction(messageId, emoji) {
2336
+ const hasClawbotCreds = Boolean(chatCredentials.agentId && chatCredentials.agentToken);
2337
+ const hasIdentityToken = Boolean(chatCredentials.identityToken);
2338
+ if (!messageId || !emoji || (!hasClawbotCreds && !hasIdentityToken)) return;
2339
+ try {
2340
+ const r = await fetch(apiUrl('/api/chat/react'), {
2341
+ method: 'POST',
2342
+ headers: { 'content-type': 'application/json' },
2343
+ body: JSON.stringify({
2344
+ room: chatCredentials.room,
2345
+ messageId,
2346
+ emoji,
2347
+ agentId: chatCredentials.agentId,
2348
+ agentToken: chatCredentials.agentToken,
2349
+ identityToken: chatCredentials.identityToken,
2350
+ }),
2351
+ });
2352
+ if (!r.ok) {
2353
+ const data = await r.json().catch(() => ({}));
2354
+ pushToast(`Reaction failed: ${data.error || 'unknown error'}`, 'error', 2800);
2355
+ }
2356
+ } catch (err) {
2357
+ pushToast(`Reaction network error: ${err.message}`, 'error', 2800);
2358
+ }
2359
+ }
2360
+
2361
+ function renderChatMessages() {
2362
+ const el = document.getElementById('chatMessages');
2363
+ const badge = document.getElementById('chatCountBadge');
2364
+ const filtered = chatMessages;
2365
+ badge.textContent = filtered.length;
2366
+
2367
+ if (filtered.length === 0) {
2368
+ el.innerHTML = `<div class="chat-empty">
2369
+ <div class="chat-empty-icon">💬</div>
2370
+ <div>No messages yet.</div>
2371
+ <div style="font-size:.68rem;margin-top:6px">Registered Clawllectors can discuss their collections here in real time.</div>
2372
+ </div>`;
2373
+ return;
2374
+ }
2375
+
2376
+ const byId = new Map(chatMessages.map((m) => [m.id, m]));
2377
+ el.innerHTML = filtered.map(m => {
2378
+ const isSelf = m.agentId === chatCredentials.agentId;
2379
+ const room = normalizeRoomName(m.room || 'general');
2380
+ const parent = m.replyTo ? byId.get(m.replyTo) : null;
2381
+ const parentPreview = parent ? `${parent.agentName || parent.agentId}: ${String(parent.text || '').slice(0, 80)}` : `Reply to ${m.replyTo || 'message'}`;
2382
+ const reactions = m.reactions && typeof m.reactions === 'object' ? m.reactions : {};
2383
+ const reactionUsers = m.reactionUsers && typeof m.reactionUsers === 'object' ? m.reactionUsers : {};
2384
+ return `<div class="chat-msg${isSelf ? ' self' : ''}">
2385
+ <div class="chat-msg-avatar">🦞</div>
2386
+ <div class="chat-msg-body">
2387
+ <div class="chat-msg-header">
2388
+ <span class="chat-msg-name">${escapeHtml(m.agentName || m.agentId)}</span>
2389
+ <span class="chat-msg-id">${escapeHtml(m.agentId)}</span>
2390
+ <span class="chat-msg-id">/${escapeHtml(room)}</span>
2391
+ <span class="chat-msg-time">${chatMsgTime(m.ts)}</span>
2392
+ </div>
2393
+ ${m.replyTo ? `<div class="chat-msg-reply">${escapeHtml(parentPreview)}</div>` : ''}
2394
+ <div class="chat-msg-text">${formatChatText(m.text)}</div>
2395
+ <div class="chat-msg-actions">
2396
+ <button type="button" class="chat-msg-action-btn" data-reply-id="${escapeAttr(m.id)}">Reply</button>
2397
+ ${CHAT_REACTION_EMOJIS.map((emoji) => {
2398
+ const count = Number(reactions[emoji] || 0);
2399
+ const mine = (reactionUsers[emoji] || []).includes(chatCredentials.agentId);
2400
+ return `<button type="button" class="chat-reaction-chip${mine ? ' active' : ''}" data-react-id="${escapeAttr(m.id)}" data-emoji="${escapeAttr(emoji)}">${emoji} ${count || ''}</button>`;
2401
+ }).join('')}
2402
+ </div>
2403
+ </div>
2404
+ </div>`;
2405
+ }).join('');
2406
+
2407
+ el.querySelectorAll('[data-reply-id]').forEach((btn) => {
2408
+ btn.addEventListener('click', () => {
2409
+ setChatReplyTarget(btn.getAttribute('data-reply-id'));
2410
+ document.getElementById('chatInput')?.focus();
2411
+ });
2412
+ });
2413
+ el.querySelectorAll('[data-react-id]').forEach((btn) => {
2414
+ btn.addEventListener('click', () => {
2415
+ const id = btn.getAttribute('data-react-id');
2416
+ const emoji = btn.getAttribute('data-emoji');
2417
+ sendChatReaction(id, emoji);
2418
+ });
2419
+ });
2420
+
2421
+ // Auto-scroll to latest
2422
+ el.scrollTop = el.scrollHeight;
2423
+ }
2424
+
2425
+ function updateChatInputState() {
2426
+ const input = document.getElementById('chatInput');
2427
+ const btn = document.getElementById('chatSendBtn');
2428
+ const counter = document.getElementById('chatCounter');
2429
+ if (!input || !btn || !counter) return;
2430
+ const len = (input.value || '').length;
2431
+ counter.textContent = `${len}/500`;
2432
+ const hasAuth = Boolean((chatCredentials.agentId && chatCredentials.agentToken) || chatCredentials.identityToken);
2433
+ const canSend = hasAuth && len > 0 && len <= 500;
2434
+ btn.disabled = !canSend;
2435
+ }
2436
+
2437
+ function updateChatAuthStatus() {
2438
+ const room = normalizeRoomName(document.getElementById('chatRoom').value.trim() || 'general');
2439
+ const id = document.getElementById('chatAgentId').value.trim();
2440
+ const token = document.getElementById('chatAgentToken').value.trim();
2441
+ const identityToken = document.getElementById('chatIdentityToken').value.trim();
2442
+ const status = document.getElementById('chatAuthStatus');
2443
+ const roomStatus = document.getElementById('chatRoomStatus');
2444
+ const input = document.getElementById('chatInput');
2445
+ const btn = document.getElementById('chatSendBtn');
2446
+
2447
+ chatCredentials.room = room;
2448
+ chatCredentials.agentId = id;
2449
+ chatCredentials.agentToken = token;
2450
+ chatCredentials.identityToken = identityToken;
2451
+
2452
+ // Persist to localStorage for convenience
2453
+ try {
2454
+ localStorage.setItem('apeclaw_chat_room', room);
2455
+ localStorage.setItem('apeclaw_chat_agentId', id);
2456
+ localStorage.setItem('apeclaw_chat_agentToken', token);
2457
+ localStorage.setItem('apeclaw_chat_identityToken', identityToken);
2458
+ } catch {}
2459
+ if (roomStatus) roomStatus.textContent = `Room: ${room}`;
2460
+ renderChatRooms();
2461
+
2462
+ if (identityToken) {
2463
+ status.textContent = `Moltbook identity ready in /${room}`;
2464
+ status.className = 'chat-auth-status ok';
2465
+ input.disabled = false;
2466
+ input.placeholder = 'Type a message...';
2467
+ btn.disabled = false;
2468
+ } else if (id && token) {
2469
+ status.textContent = `Signed in as ${id} in /${room}`;
2470
+ status.className = 'chat-auth-status ok';
2471
+ input.disabled = false;
2472
+ input.placeholder = 'Type a message...';
2473
+ btn.disabled = false;
2474
+ } else {
2475
+ status.textContent = 'Not signed in';
2476
+ status.className = 'chat-auth-status none';
2477
+ input.disabled = true;
2478
+ input.placeholder = 'Enter your Agent ID and Token to chat';
2479
+ btn.disabled = true;
2480
+ }
2481
+ updateChatInputState();
2482
+ // Re-render to highlight own messages
2483
+ renderChatMessages();
2484
+ }
2485
+
2486
+ function toggleChatTokenVisibility() {
2487
+ const tokenInput = document.getElementById('chatAgentToken');
2488
+ const identityInput = document.getElementById('chatIdentityToken');
2489
+ const toggleBtn = document.getElementById('chatToggleTokenBtn');
2490
+ const revealing = tokenInput.type === 'password';
2491
+ tokenInput.type = revealing ? 'text' : 'password';
2492
+ if (identityInput) identityInput.type = revealing ? 'text' : 'password';
2493
+ toggleBtn.textContent = revealing ? 'Hide' : 'Show';
2494
+ }
2495
+
2496
+ function clearChatCredentials() {
2497
+ document.getElementById('chatRoom').value = 'general';
2498
+ document.getElementById('chatAgentId').value = '';
2499
+ document.getElementById('chatAgentToken').value = '';
2500
+ document.getElementById('chatIdentityToken').value = '';
2501
+ document.getElementById('chatAgentToken').type = 'password';
2502
+ document.getElementById('chatIdentityToken').type = 'password';
2503
+ document.getElementById('chatToggleTokenBtn').textContent = 'Show';
2504
+ updateChatAuthStatus();
2505
+ }
2506
+
2507
+ function scheduleChatReconnect() {
2508
+ if (chatReconnectTimer) return;
2509
+ const waitMs = Math.min(10000, 1500 * (chatReconnectAttempts + 1));
2510
+ chatReconnectAttempts++;
2511
+ chatReconnectTimer = setTimeout(() => {
2512
+ chatReconnectTimer = null;
2513
+ connectChatStream();
2514
+ }, waitMs);
2515
+ }
2516
+
2517
+ async function sendChatMessage() {
2518
+ const input = document.getElementById('chatInput');
2519
+ const text = applyChatSlash(input.value);
2520
+ const hasClawbotCreds = Boolean(chatCredentials.agentId && chatCredentials.agentToken);
2521
+ const hasIdentityToken = Boolean(chatCredentials.identityToken);
2522
+ if (!text || (!hasClawbotCreds && !hasIdentityToken)) return;
2523
+
2524
+ const btn = document.getElementById('chatSendBtn');
2525
+ btn.disabled = true;
2526
+ btn.textContent = '...';
2527
+
2528
+ try {
2529
+ const r = await fetch(apiUrl('/api/chat'), {
2530
+ method: 'POST',
2531
+ headers: { 'content-type': 'application/json' },
2532
+ body: JSON.stringify({
2533
+ room: chatCredentials.room,
2534
+ agentId: chatCredentials.agentId,
2535
+ agentToken: chatCredentials.agentToken,
2536
+ identityToken: chatCredentials.identityToken,
2537
+ text,
2538
+ replyTo: chatReplyToId || undefined,
2539
+ }),
2540
+ });
2541
+ const data = await r.json();
2542
+ if (!r.ok) {
2543
+ terminalLines.push({ type: 'error', text: `[Chat] ${data.error || 'send failed'}` });
2544
+ renderTerminal();
2545
+ pushToast(`Chat send failed: ${data.error || 'unknown error'}`, 'error', 3400);
2546
+ } else {
2547
+ input.value = '';
2548
+ setChatReplyTarget(null);
2549
+ try { localStorage.removeItem(chatDraftKey(chatCredentials.room)); } catch {}
2550
+ }
2551
+ } catch (err) {
2552
+ terminalLines.push({ type: 'error', text: `[Chat] Network error: ${err.message}` });
2553
+ renderTerminal();
2554
+ pushToast(`Network error: ${err.message}`, 'error', 3400);
2555
+ } finally {
2556
+ updateChatInputState();
2557
+ btn.textContent = 'Send';
2558
+ input.focus();
2559
+ }
2560
+ }
2561
+
2562
+ async function loadChatHistory() {
2563
+ try {
2564
+ const r = await fetch(apiUrl(`/api/chat?room=${encodeURIComponent(chatCredentials.room || 'general')}&limit=200`));
2565
+ if (r.ok) {
2566
+ const data = await r.json();
2567
+ chatMessages = data.messages || [];
2568
+ chatUnreadByRoom.set(normalizeRoomName(chatCredentials.room || 'general'), 0);
2569
+ renderChatMessages();
2570
+ renderChatRooms();
2571
+ }
2572
+ } catch {}
2573
+ }
2574
+
2575
+ function connectChatStream() {
2576
+ try {
2577
+ if (chatSseSource) {
2578
+ chatSseSource.close();
2579
+ chatSseSource = null;
2580
+ }
2581
+ chatSseSource = new EventSource(apiUrl(`/api/chat/stream?room=${encodeURIComponent(chatCredentials.room || 'general')}`));
2582
+ chatSseSource.onopen = () => {
2583
+ chatReconnectAttempts = 0;
2584
+ };
2585
+ chatSseSource.onmessage = (e) => {
2586
+ try {
2587
+ const msg = JSON.parse(e.data);
2588
+ const msgRoom = normalizeRoomName(msg.room || 'general');
2589
+ const current = normalizeRoomName(chatCredentials.room || 'general');
2590
+ if (msgRoom !== current) {
2591
+ chatUnreadByRoom.set(msgRoom, Number(chatUnreadByRoom.get(msgRoom) || 0) + 1);
2592
+ renderChatRooms();
2593
+ return;
2594
+ }
2595
+ if (String(msg.type || 'message') === 'reaction') {
2596
+ applyReactionEventToMessages(msg);
2597
+ renderChatMessages();
2598
+ return;
2599
+ }
2600
+ // Deduplicate
2601
+ if (chatMessages.find(m => m.id === msg.id)) return;
2602
+ chatMessages.push(msg);
2603
+ if (chatMessages.length > 200) chatMessages.shift();
2604
+ renderChatMessages();
2605
+ } catch {}
2606
+ };
2607
+ chatSseSource.onerror = () => {
2608
+ if (chatSseSource) {
2609
+ chatSseSource.close();
2610
+ chatSseSource = null;
2611
+ }
2612
+ scheduleChatReconnect();
2613
+ };
2614
+ } catch {}
2615
+ }
2616
+
2617
+ function initChat() {
2618
+ // Restore saved credentials from localStorage
2619
+ try {
2620
+ const savedRoom = localStorage.getItem('apeclaw_chat_room') || 'general';
2621
+ const savedId = localStorage.getItem('apeclaw_chat_agentId') || '';
2622
+ const savedToken = localStorage.getItem('apeclaw_chat_agentToken') || '';
2623
+ const savedIdentity = localStorage.getItem('apeclaw_chat_identityToken') || '';
2624
+ if (savedRoom) document.getElementById('chatRoom').value = savedRoom;
2625
+ if (savedId) document.getElementById('chatAgentId').value = savedId;
2626
+ if (savedToken) document.getElementById('chatAgentToken').value = savedToken;
2627
+ if (savedIdentity) document.getElementById('chatIdentityToken').value = savedIdentity;
2628
+ } catch {}
2629
+
2630
+ // Auth field listeners
2631
+ document.getElementById('chatRoom').addEventListener('change', () => {
2632
+ updateChatAuthStatus();
2633
+ chatUnreadByRoom.set(normalizeRoomName(document.getElementById('chatRoom').value), 0);
2634
+ renderChatRooms();
2635
+ loadChatHistory();
2636
+ connectChatStream();
2637
+ const draft = localStorage.getItem(chatDraftKey(chatCredentials.room)) || '';
2638
+ const chatInput = document.getElementById('chatInput');
2639
+ if (chatInput) chatInput.value = draft;
2640
+ updateChatInputState();
2641
+ });
2642
+ document.getElementById('chatRoom').addEventListener('keydown', (e) => {
2643
+ if (e.key === 'Enter') {
2644
+ e.preventDefault();
2645
+ e.currentTarget.blur(); // triggers change flow for room switch
2646
+ }
2647
+ });
2648
+ document.getElementById('chatAgentId').addEventListener('input', updateChatAuthStatus);
2649
+ document.getElementById('chatAgentToken').addEventListener('input', updateChatAuthStatus);
2650
+ document.getElementById('chatIdentityToken').addEventListener('input', updateChatAuthStatus);
2651
+ document.getElementById('chatToggleTokenBtn').addEventListener('click', toggleChatTokenVisibility);
2652
+ document.getElementById('chatClearAuthBtn').addEventListener('click', clearChatCredentials);
2653
+ document.getElementById('chatReplyingCancelBtn').addEventListener('click', () => setChatReplyTarget(null));
2654
+
2655
+ // Send on button click
2656
+ document.getElementById('chatSendBtn').addEventListener('click', sendChatMessage);
2657
+
2658
+ // Send on Enter key
2659
+ document.getElementById('chatInput').addEventListener('input', () => {
2660
+ updateChatInputState();
2661
+ try { localStorage.setItem(chatDraftKey(chatCredentials.room), document.getElementById('chatInput').value || ''); } catch {}
2662
+ });
2663
+ document.getElementById('chatInput').addEventListener('keydown', (e) => {
2664
+ if (e.key === 'Enter' && !e.shiftKey) {
2665
+ e.preventDefault();
2666
+ sendChatMessage();
2667
+ }
2668
+ });
2669
+
2670
+ // Set initial auth state
2671
+ updateChatAuthStatus();
2672
+ updateChatInputState();
2673
+ try {
2674
+ const draft = localStorage.getItem(chatDraftKey(chatCredentials.room)) || '';
2675
+ document.getElementById('chatInput').value = draft;
2676
+ } catch {}
2677
+
2678
+ // Load history and connect stream
2679
+ loadChatRooms();
2680
+ loadChatHistory();
2681
+ connectChatStream();
2682
+ setInterval(loadChatRooms, 15000);
2683
+ }
2684
+
2685
+ // ═══════════════════════════════════════════════════════════
2686
+ // BOOT
2687
+ // ═══════════════════════════════════════════════════════════
2688
+ function initKeepQueryLinks() {
2689
+ // Preserve ?api=... across internal navigation (matches pod/docs/skills pages).
2690
+ try {
2691
+ const cur = new URL(window.location.href);
2692
+ const api = (cur.searchParams.get('api') || '').trim();
2693
+ if (!api) return;
2694
+ const as = document.querySelectorAll('a[data-keep-query="1"]');
2695
+ for (let i = 0; i < as.length; i++) {
2696
+ const raw = String(as[i].getAttribute('href') || '');
2697
+ if (!raw || raw.startsWith('http') || raw.startsWith('#')) continue;
2698
+ const u = new URL(raw, window.location.origin);
2699
+ if (!u.searchParams.has('api')) u.searchParams.set('api', api);
2700
+ as[i].setAttribute('href', u.pathname + (u.search ? u.search : '') + (u.hash ? u.hash : ''));
2701
+ }
2702
+ } catch {}
2703
+ }
2704
+
2705
+ async function boot() {
2706
+ loadUiPrefs();
2707
+ applyUiPrefs();
2708
+ initApiBase();
2709
+ initKeepQueryLinks();
2710
+ initBackendConfigUi();
2711
+ await ensureBackendReachableWithFallback();
2712
+ initSetupEnhancements();
2713
+ initCollectionControls();
2714
+ initPanelControls();
2715
+ initShortcutsPopover();
2716
+ initCommandDeck();
2717
+
2718
+ window.addEventListener('keydown', (e) => {
2719
+ if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
2720
+ e.preventDefault();
2721
+ document.getElementById('collectionsSearch')?.focus();
2722
+ }
2723
+ if ((e.metaKey || e.ctrlKey) && e.key === '/') {
2724
+ e.preventDefault();
2725
+ document.getElementById('chatInput')?.focus();
2726
+ }
2727
+ if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === 'f') {
2728
+ e.preventDefault();
2729
+ uiPrefs.focus = !uiPrefs.focus;
2730
+ applyUiPrefs(); saveUiPrefs();
2731
+ pushToast(`Focus mode ${uiPrefs.focus ? 'enabled' : 'disabled'}`, 'success');
2732
+ }
2733
+ if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === 'd') {
2734
+ e.preventDefault();
2735
+ uiPrefs.dense = !uiPrefs.dense;
2736
+ applyUiPrefs(); saveUiPrefs();
2737
+ pushToast(`Dense mode ${uiPrefs.dense ? 'enabled' : 'disabled'}`, 'success');
2738
+ }
2739
+ if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === 'm') {
2740
+ e.preventDefault();
2741
+ uiPrefs.motionLow = !uiPrefs.motionLow;
2742
+ applyUiPrefs(); saveUiPrefs();
2743
+ pushToast(`Low motion ${uiPrefs.motionLow ? 'enabled' : 'disabled'}`, 'success');
2744
+ }
2745
+ });
2746
+
2747
+ // Resolve allowlist from API first, then static file for Vercel/static hosting.
2748
+ async function fetchAllowlistWithFallback() {
2749
+ const sources = [];
2750
+ // 1) Preferred source: configured backend API.
2751
+ if (API_BASE) sources.push(apiUrl('/api/allowlist'));
2752
+ // 2) Same-origin API (works for local telemetry server deployments).
2753
+ sources.push('/api/allowlist');
2754
+ // 3) Static fallback for frontend-only hosts (e.g., Vercel).
2755
+ sources.push('/allowlists/recommended.apechain.json');
2756
+ for (const src of sources) {
2757
+ try {
2758
+ const r = await fetch(src);
2759
+ if (!r.ok) continue;
2760
+ const data = await r.json();
2761
+ if (Array.isArray(data) && data.length > 0) return data;
2762
+ } catch {}
2763
+ }
2764
+ return null;
2765
+ }
2766
+
2767
+ // Fetch allowlist, policy, clawbots in parallel
2768
+ const [alRes, cbRes] = await Promise.allSettled([
2769
+ fetchAllowlistWithFallback(),
2770
+ fetch(apiUrl('/api/clawbots')).then(r => r.ok ? r.json() : null),
2771
+ ]);
2772
+
2773
+ // Allowlist
2774
+ const alData = alRes.status === 'fulfilled' ? alRes.value : null;
2775
+ if (Array.isArray(alData) && alData.length > 0) {
2776
+ COLLECTIONS = alData.map(c => ({ ...c, emoji: emojiFor(c.name||''), imageUrl: c.imageUrl || null }));
2777
+ }
2778
+ if (COLLECTIONS.length === 0) {
2779
+ COLLECTIONS = [
2780
+ { rank:1, name:'Gs on Ape', slug:'gs-on-ape', contractAddress:'0xb3443b6bd585ba4118cae2bedb61c7ec4a8281df', chainId:33139, enabled:true, emoji:'🦍', imageUrl:null },
2781
+ { rank:6, name:'Zards', slug:'zards', contractAddress:'0x91417bd88af5071ccea8d3bf3af410660e356b06', chainId:33139, enabled:true, emoji:'🦎', imageUrl:null },
2782
+ { rank:11, name:'Mintotaurs', slug:'mintotaurs', contractAddress:'0x8af17673985e4032c6ced41d35e9f5a3e694ed7f', chainId:33139, enabled:true, emoji:'🐂', imageUrl:null },
2783
+ ];
2784
+ }
2785
+
2786
+ // Clawbots
2787
+ const cbData = cbRes.status === 'fulfilled' ? cbRes.value : null;
2788
+ if (cbData?.clawbots) {
2789
+ REGISTERED_CLAWBOTS = cbData.clawbots;
2790
+ for (const b of REGISTERED_CLAWBOTS) {
2791
+ AGENT_DISPLAY_NAMES[b.agentId] = b.name || b.agentId;
2792
+ }
2793
+ const setupNote = document.getElementById('setupClawbotCount');
2794
+ if (setupNote) {
2795
+ setupNote.textContent = `${cbData.count} registered Clawllector${cbData.count!==1?'s':''}${cbData.sharedKeyConfigured ? ' • shared key ✓' : ' • shared key not set'}`;
2796
+ }
2797
+ }
2798
+
2799
+ // Render everything
2800
+ renderCollectionsBar();
2801
+ renderAgents();
2802
+ renderNftGrid();
2803
+ renderBridge();
2804
+ renderTerminal();
2805
+ renderFeed();
2806
+ updateStats();
2807
+
2808
+ // Collections carousel controls
2809
+ const prev = document.getElementById('collectionsPrev');
2810
+ const next = document.getElementById('collectionsNext');
2811
+ const bar = document.getElementById('collectionsBar');
2812
+ if (prev) prev.addEventListener('click', () => scrollCollectionsBy(-1));
2813
+ if (next) next.addEventListener('click', () => scrollCollectionsBy(1));
2814
+ if (bar) {
2815
+ bar.addEventListener('scroll', updateCollectionsStatus, { passive: true });
2816
+ bar.addEventListener('mouseenter', () => collectionsCarouselTimer && clearInterval(collectionsCarouselTimer));
2817
+ bar.addEventListener('mouseleave', startCollectionsCarousel);
2818
+ }
2819
+ window.addEventListener('resize', () => {
2820
+ updateCollectionsStatus();
2821
+ startCollectionsCarousel();
2822
+ });
2823
+
2824
+ // Connect live telemetry
2825
+ await connectLiveTelemetry();
2826
+
2827
+ // Initialize chat (after telemetry so SSE is ready)
2828
+ initChat();
2829
+ setInterval(() => {
2830
+ const el = document.getElementById('utcClock');
2831
+ if (el) el.textContent = `${new Date().toISOString().slice(11, 19)}Z`;
2832
+ }, 1000);
2833
+ }
2834
+
2835
+ // ═══════════════════════════════════════════════════════════
2836
+ // SKILLS LIBRARY DASHBOARD PANEL
2837
+ // ═══════════════════════════════════════════════════════════
2838
+ let skillsCache = { stats: null, skills: [], filtered: [] };
2839
+
2840
+ function renderSkillCards(skills) {
2841
+ const grid = document.getElementById('skillsPanelGrid');
2842
+ if (!grid) return;
2843
+ if (!skills || skills.length === 0) {
2844
+ grid.innerHTML = '<div style="color:var(--dim);font-size:.7rem;padding:20px;text-align:center;grid-column:1/-1">No skills found</div>';
2845
+ return;
2846
+ }
2847
+ grid.innerHTML = skills.map(s => {
2848
+ const tier = String(s.riskTier || 'low').toLowerCase();
2849
+ const srcClass = s.source === 'seed' ? 'src-seed' : s.source === 'imported' ? 'src-imported' : 'src-user';
2850
+ const desc = escapeHtml(String(s.description || '').slice(0, 120));
2851
+ const name = escapeHtml(String(s.name || s.slug || 'Unnamed'));
2852
+ const onchain = s.onchainTokenId != null ? '<span class="sms onchain">⛓ onchain</span>' : '';
2853
+ return `<div class="skill-mini-card" data-tier="${escapeHtml(tier)}">
2854
+ <div class="skill-mini-name">${name}</div>
2855
+ <div class="skill-mini-desc">${desc || '<em>No description</em>'}</div>
2856
+ <div class="skill-mini-meta">
2857
+ <span class="sms ${srcClass}">${escapeHtml(s.source || 'unknown')}</span>
2858
+ ${s.riskTier ? '<span class="sms">' + escapeHtml(s.riskTier) + '</span>' : ''}
2859
+ ${onchain}
2860
+ </div>
2861
+ </div>`;
2862
+ }).join('');
2863
+ }
2864
+
2865
+ async function fetchSkillsStats() {
2866
+ try {
2867
+ const resp = await fetch(apiUrl('/api/skills/stats'));
2868
+ if (!resp.ok) throw new Error('stats ' + resp.status);
2869
+ const data = await resp.json();
2870
+ if (!data.ok) throw new Error(data.error || 'stats failed');
2871
+ skillsCache.stats = data;
2872
+
2873
+ const setIf = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
2874
+ setIf('psSkillsTotal', data.total.toLocaleString());
2875
+ setIf('psSkillsOnchain', data.onchain.toLocaleString());
2876
+ setIf('psSkillsVetted', data.vetted.toLocaleString());
2877
+ setIf('skillCountBadge', data.total.toLocaleString());
2878
+ setIf('ssSeed', data.seed.toLocaleString());
2879
+ setIf('ssImported', data.imported.toLocaleString());
2880
+ setIf('ssUser', data.user.toLocaleString());
2881
+ setIf('ssOnchain', data.onchain.toLocaleString());
2882
+ setIf('ssVetted', data.vetted.toLocaleString());
2883
+
2884
+ const totalEl = document.getElementById('psSkillsTotal');
2885
+ if (totalEl) { totalEl.parentElement.classList.add('pulsing'); setTimeout(() => totalEl.parentElement.classList.remove('pulsing'), 5000); }
2886
+
2887
+ if (data.recent && data.recent.length > 0) {
2888
+ renderSkillCards(data.recent);
2889
+ }
2890
+ } catch (err) {
2891
+ console.warn('[skills-stats]', err.message);
2892
+ const setIf = (id, val) => { const el = document.getElementById(id); if (el && (el.textContent === '—' || el.textContent === '0')) el.textContent = val; };
2893
+ setIf('psSkillsTotal', '10,032');
2894
+ setIf('psSkillsOnchain', '10,024');
2895
+ setIf('psSkillsVetted', '10,004');
2896
+ setIf('skillCountBadge', '10,032');
2897
+ setIf('ssSeed', '8');
2898
+ setIf('ssImported', '10,024');
2899
+ setIf('ssUser', '0');
2900
+ setIf('ssOnchain', '10,024');
2901
+ setIf('ssVetted', '10,004');
2902
+ const grid = document.getElementById('skillsPanelGrid');
2903
+ if (grid && grid.innerHTML.includes('Loading')) {
2904
+ grid.innerHTML = '<div style="color:var(--dim);font-size:.7rem;padding:20px;text-align:center;grid-column:1/-1">Could not load skills. <button onclick="fetchSkillsStats()" style="background:none;border:1px solid var(--border);color:var(--accent);padding:3px 8px;border-radius:4px;cursor:pointer;font-size:.65rem">Retry</button></div>';
2905
+ }
2906
+ }
2907
+ }
2908
+
2909
+ async function fetchSkillsSearch(query, source) {
2910
+ try {
2911
+ const grid = document.getElementById('skillsPanelGrid');
2912
+ if (grid) grid.innerHTML = '<div style="color:var(--dim);font-size:.7rem;padding:20px;text-align:center;grid-column:1/-1">Searching…</div>';
2913
+ const params = new URLSearchParams({ limit: '50' });
2914
+ if (query) params.set('q', query);
2915
+ if (source) params.set('source', source);
2916
+ const resp = await fetch(apiUrl('/api/skills/search?' + params.toString()));
2917
+ if (!resp.ok) throw new Error('search ' + resp.status);
2918
+ const data = await resp.json();
2919
+ if (!data.ok) throw new Error(data.error || 'search failed');
2920
+ skillsCache.skills = data.results;
2921
+ skillsCache.filtered = data.results;
2922
+ renderSkillCards(data.results);
2923
+ const badge = document.getElementById('skillCountBadge');
2924
+ if (badge && skillsCache.stats) badge.textContent = skillsCache.stats.total.toLocaleString();
2925
+ } catch (err) {
2926
+ console.warn('[skills-search]', err.message);
2927
+ const grid = document.getElementById('skillsPanelGrid');
2928
+ if (grid) grid.innerHTML = '<div style="color:var(--dim);font-size:.7rem;padding:20px;text-align:center;grid-column:1/-1">Search failed. Try again.</div>';
2929
+ }
2930
+ }
2931
+
2932
+ (function initSkillsPanel() {
2933
+ const searchInput = document.getElementById('skillSearchInput');
2934
+ const sourceFilter = document.getElementById('skillSourceFilter');
2935
+ let debounce;
2936
+ if (searchInput) searchInput.addEventListener('input', () => {
2937
+ clearTimeout(debounce);
2938
+ debounce = setTimeout(() => fetchSkillsSearch(searchInput.value, sourceFilter?.value || ''), 300);
2939
+ });
2940
+ if (sourceFilter) sourceFilter.addEventListener('change', () => {
2941
+ fetchSkillsSearch(searchInput?.value || '', sourceFilter.value);
2942
+ });
2943
+ })();
2944
+
2945
+ async function refreshSkillsLoop() {
2946
+ await fetchSkillsStats();
2947
+ setInterval(fetchSkillsStats, 120_000);
2948
+ }
2949
+
2950
+ (async function () {
2951
+ await boot();
2952
+ refreshSkillsLoop();
2953
+ })();
2954
+
2955
+ </script>
2956
+ </body>
2957
+ </html>