@bolloon/bolloon-agent 0.1.13 → 0.1.15

package/dist/web/index.html

@@ -46,14 +46,20 @@
 
       <div class="sidebar-section">
         <div class="section-header">
-          <span class="section-title">频道</span>
+          <span class="section-title">智能体</span>
+          <button id="catalog-add-btn" class="section-header-action" title="添加智能体">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="12" y1="5" x2="12" y2="19"></line>
+              <line x1="5" y1="12" x2="19" y2="12"></line>
+            </svg>
+          </button>
         </div>
-        <button id="new-channel-btn" class="section-action" title="新建频道">
+        <button id="new-channel-btn" class="section-action" title="新建智能体">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <line x1="12" y1="5" x2="12" y2="19"></line>
             <line x1="5" y1="12" x2="19" y2="12"></line>
           </svg>
-          <span>新建</span>
+          <span>新建智能体</span>
         </button>
         <ul class="channel-list" id="channel-list"></ul>
       </div>
@@ -73,11 +79,6 @@
           <h1 id="channel-name">Bolloon Agent</h1>
         </div>
         <div class="header-right">
-          <button id="new-session-btn" class="header-action" title="新会话">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M12 5v14M5 12h14"></path>
-            </svg>
-          </button>
           <button id="theme-toggle" class="theme-toggle" title="切换主题">
             <svg class="sun-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <circle cx="12" cy="12" r="5"></circle>
@@ -109,6 +110,14 @@
               <line x1="12" y1="8" x2="19" y2="16"></line>
             </svg>
           </button>
+          <button id="wallet-btn" class="header-action" title="钱包管理">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M21 12V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3"></path>
+              <circle cx="17" cy="12" r="1.5" fill="currentColor"></circle>
+              <path d="M3 7l3-3h12l3 3"></path>
+            </svg>
+            <span id="wallet-badge" class="task-badge" style="display:none;">0</span>
+          </button>
           <button id="task-queue-btn" class="header-action" title="任务队列">
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"></path>
@@ -181,6 +190,77 @@
         </div>
       </div>
 
+      <!-- Agent Add / Wallet / Auto-tool Modal -->
+      <div id="agent-add-modal" class="modal">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h2 id="agent-add-title">添加智能体</h2>
+            <button id="agent-add-modal-close" class="modal-close">&times;</button>
+          </div>
+          <div class="modal-body">
+            <div class="form-group">
+              <label>智能体名称</label>
+              <input type="text" id="agent-add-name" placeholder="例如: 交易助手">
+            </div>
+            <div class="form-group">
+              <label>加密钱包地址 (EVM 0x... 或 Solana/Sui 等)</label>
+              <div style="display:flex;gap:8px;">
+                <input type="text" id="agent-add-wallet" placeholder="0x... (留空则不绑定)" style="flex:1;">
+                <button type="button" id="agent-generate-wallet-btn" class="btn-secondary btn-sm" title="本地生成新钱包">生成</button>
+              </div>
+              <small class="form-hint">本地生成的钱包仅在浏览器内存, 服务端只保存公链地址, 不会上传私钥。</small>
+            </div>
+            <div class="form-group">
+              <label class="checkbox-label">
+                <input type="checkbox" id="agent-add-auto-tools" checked>
+                <span>启用自动工具调用 (LLM 决定调用受信任工具时, agent 自动执行)</span>
+              </label>
+            </div>
+            <div id="agent-add-wallet-info" class="form-info" style="display:none;"></div>
+            <div class="btn-group">
+              <button id="agent-add-cancel-btn" class="btn-secondary">取消</button>
+              <button id="agent-add-confirm-btn" class="btn-primary">创建</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Wallet Manager Modal (header 钱包按钮入口) -->
+      <div id="wallet-modal" class="modal">
+        <div class="modal-content modal-wide">
+          <div class="modal-header">
+            <h2>钱包管理</h2>
+            <button id="wallet-modal-close" class="modal-close">&times;</button>
+          </div>
+          <div class="modal-body">
+            <div class="form-group">
+              <label>为当前智能体绑定加密钱包</label>
+              <div style="display:flex;gap:8px;">
+                <input type="text" id="wallet-bind-address" placeholder="0x... / Solana / Sui" style="flex:1;">
+                <button type="button" id="wallet-generate-btn" class="btn-secondary btn-sm" title="本地生成新钱包">生成</button>
+              </div>
+              <small class="form-hint">仅当前激活智能体会使用此钱包; 服务端只保存公链地址, 私钥仅在浏览器内存。</small>
+            </div>
+            <div class="form-group">
+              <label class="checkbox-label">
+                <input type="checkbox" id="wallet-auto-tools" checked>
+                <span>启用自动工具调用 (LLM 决定调用受信任工具时, agent 自动执行)</span>
+              </label>
+            </div>
+            <div id="wallet-new-info" class="form-info" style="display:none;"></div>
+            <div class="btn-group">
+              <button id="wallet-bind-btn" class="btn-primary">绑定到当前智能体</button>
+              <button id="wallet-unbind-btn" class="btn-secondary">解绑当前智能体</button>
+            </div>
+
+            <h3 style="margin-top:24px;font-size:14px;font-weight:600;">所有已绑定钱包</h3>
+            <div id="wallet-list" class="wallet-list">
+              <div class="wallet-empty">暂未绑定钱包</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div class="messages" id="messages">
         <div class="message message-ai">
           <div class="bubble bubble-ai">

package/dist/web/style.css

@@ -261,18 +261,37 @@ body {
 
 /* Sidebar Section */
 .sidebar-section {
-  flex: 1;
+  flex: 1 1 0;
+  min-height: 0; /* 关键: flex 子项 min-height 默认 auto, 会撑破 overflow */
   display: flex;
   flex-direction: column;
   overflow: hidden;
   padding: 16px;
+  position: relative;
 }
-
 .section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 12px;
+  /* sticky 头部: 长列表滚动时, 智能体标题始终可见, 防止用户失去方向感 */
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  padding-bottom: 6px;
+  /* 用伪元素做模糊底色, 让滚动的内容在它下面淡出而不是硬切 */
+}
+
+.section-header::after {
+  content: '';
+  position: absolute;
+  left: -16px;
+  right: -16px;
+  bottom: -6px;
+  height: 18px;
+  background: linear-gradient(to bottom, var(--bg-sidebar), transparent);
+  pointer-events: none;
+  z-index: -1;
 }
 
 .section-title {
@@ -355,13 +374,25 @@ body {
   list-style: none;
   flex: 1;
   overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+  overflow-x: hidden;
+  /* 流畅的上下滑动: iOS 弹性滚动 + 桌面惯性滚动 + 边界不外溢 */
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+  scroll-behavior: smooth;
+  /* contain 让长列表滚动时不影响外层布局, 减少 reflow */
+  contain: strict;
+  /* 重要: gap 在 overflow 容器里会触发滚动跳帧, 用 margin 替代 */
+  display: block;
+  padding: 0;
+  margin: 0;
+}
+
+.channel-list > .agent-group + .agent-group {
+  margin-top: 4px;
 }
 
 .channel-list::-webkit-scrollbar {
-  width: 4px;
+  width: 6px;
 }
 
 .channel-list::-webkit-scrollbar-track {
@@ -370,7 +401,16 @@ body {
 
 .channel-list::-webkit-scrollbar-thumb {
   background: var(--border);
-  border-radius: 2px;
+  border-radius: 3px;
+  /* 滚动条 hover 才出现, 默认隐藏, 减少视觉干扰 */
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.channel-list:hover::-webkit-scrollbar-thumb,
+.channel-list:focus-within::-webkit-scrollbar-thumb,
+.channel-list.is-scrolling::-webkit-scrollbar-thumb {
+  opacity: 1;
 }
 
 .channel-item {
@@ -424,6 +464,47 @@ body {
   text-overflow: ellipsis;
 }
 
+.agent-session-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  margin-left: 4px;
+  border-radius: 9px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  font-size: 11px;
+  font-weight: 500;
+  flex-shrink: 0;
+}
+
+.agent-current-session {
+  flex: 0 1 auto;
+  margin-left: 4px;
+  padding: 0 6px;
+  font-size: 11px;
+  color: var(--text-muted);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 9px;
+  height: 18px;
+  line-height: 16px;
+  max-width: 100px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 1;
+}
+
+.agent-row.active .agent-current-session {
+  color: var(--accent);
+  border-color: var(--border-light);
+  background: var(--bg-hover);
+}
+
 .channel-delete {
   width: 24px;
   height: 24px;
@@ -435,12 +516,13 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  opacity: 0;
+  opacity: 0.45;
   transition: var(--transition);
   font-size: 16px;
 }
 
-.channel-item:hover .channel-delete {
+.channel-item:hover .channel-delete,
+.agent-row:hover .channel-delete {
   opacity: 1;
 }
 
@@ -449,6 +531,172 @@ body {
   color: var(--error);
 }
 
+/* Agent group (formerly channel-item — kept classname for back-compat) */
+.agent-group {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+.agent-row {
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: var(--transition);
+  gap: 10px;
+}
+
+.agent-row:hover {
+  background: var(--bg-hover);
+}
+
+.agent-row.active {
+  background: var(--bg-active);
+  border: 1px solid var(--border-light);
+}
+
+.agent-row.active .channel-name {
+  color: var(--accent);
+  font-weight: 500;
+}
+
+.agent-caret {
+  width: 14px;
+  height: 14px;
+  color: var(--text-muted);
+  transition: transform 0.18s ease;
+  flex-shrink: 0;
+}
+
+.agent-group.expanded .agent-caret {
+  transform: rotate(90deg);
+}
+
+.agent-new-session {
+  width: 22px;
+  height: 22px;
+  border-radius: 5px;
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: var(--transition);
+  flex-shrink: 0;
+}
+
+.agent-row:hover .agent-new-session {
+  opacity: 1;
+}
+
+.agent-new-session:hover {
+  background: var(--accent);
+  color: var(--bg);
+}
+
+.agent-new-session svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* Session list nested under each agent */
+.session-list {
+  list-style: none;
+  margin: 0 0 4px 0;
+  padding: 0 0 0 28px;
+  display: none;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.agent-group.expanded .session-list {
+  display: flex;
+}
+
+.session-item {
+  display: flex;
+  align-items: center;
+  padding: 6px 10px;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: var(--transition);
+  gap: 8px;
+  position: relative;
+}
+
+.session-item::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--text-muted);
+  flex-shrink: 0;
+  transition: var(--transition);
+}
+
+.session-item:hover {
+  background: var(--bg-hover);
+}
+
+.session-item:hover::before {
+  background: var(--text-secondary);
+}
+
+.session-item.active {
+  background: var(--bg-active);
+}
+
+.session-item.active::before {
+  background: var(--accent);
+  box-shadow: 0 0 4px var(--accent-glow);
+}
+
+.session-item.active .session-name {
+  color: var(--accent);
+  font-weight: 500;
+}
+
+.session-name {
+  flex: 1;
+  font-size: 13px;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.session-delete {
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: var(--transition);
+  font-size: 12px;
+  line-height: 1;
+}
+
+.session-item:hover .session-delete {
+  opacity: 1;
+}
+
+.session-delete:hover {
+  background: var(--error-bg);
+  color: var(--error);
+}
+
 /* Sidebar Footer */
 .sidebar-footer {
   padding: 16px;
@@ -1455,6 +1703,119 @@ body {
   padding: 40px 20px;
 }
 
+/* ============================================ */
+/* Wallet Manager                               */
+/* ============================================ */
+.wallet-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 320px;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+  contain: strict;
+  margin-top: 8px;
+}
+
+.wallet-empty {
+  text-align: center;
+  color: var(--text-secondary);
+  padding: 24px 16px;
+  font-size: 13px;
+  border: 1px dashed var(--border);
+  border-radius: var(--radius);
+}
+
+.wallet-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  transition: var(--transition);
+}
+
+.wallet-row:hover {
+  border-color: var(--accent);
+}
+
+.wallet-row.is-active {
+  border-color: var(--accent);
+  background: var(--accent-glow);
+}
+
+.wallet-row .wallet-chain {
+  font-size: 10px;
+  font-weight: 700;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: var(--bg);
+  color: var(--text-muted);
+  letter-spacing: 0.5px;
+  flex-shrink: 0;
+}
+
+.wallet-row.is-active .wallet-chain {
+  background: var(--accent);
+  color: var(--bg);
+}
+
+.wallet-row .wallet-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.wallet-row .wallet-agent {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.wallet-row .wallet-address {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.wallet-row .wallet-actions {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.wallet-row .wallet-mini-btn {
+  width: 26px;
+  height: 26px;
+  border-radius: 6px;
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: var(--transition);
+}
+
+.wallet-row .wallet-mini-btn:hover {
+  background: var(--accent);
+  color: var(--bg);
+  border-color: var(--accent);
+}
+
 .task-item {
   background: var(--bg-secondary);
   border: 1px solid var(--border);
@@ -3376,3 +3737,139 @@ body {
   80% { opacity: 1; }
   100% { opacity: 0; }
 }
+
+/* ============================================ */
+/* Catalog: section header `+` button, badges   */
+/* ============================================ */
+
+.section-header-action {
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: var(--transition);
+}
+
+.section-header-action:hover {
+  background: var(--accent);
+  color: var(--bg);
+  border-color: var(--accent);
+}
+
+.agent-row .agent-wallet-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: var(--accent-glow);
+  color: var(--accent);
+  border: 1px solid var(--accent);
+  letter-spacing: 0.3px;
+  margin-left: 4px;
+  flex-shrink: 0;
+}
+
+.agent-row .agent-tools-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: rgba(80, 200, 120, 0.12);
+  color: rgb(80, 200, 120);
+  border: 1px solid rgba(80, 200, 120, 0.4);
+  margin-left: 4px;
+  flex-shrink: 0;
+}
+
+.agent-row .agent-row-meta {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.agent-row .agent-config-btn {
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  opacity: 0;
+  transition: var(--transition);
+  margin-left: 4px;
+}
+
+.agent-row:hover .agent-config-btn {
+  opacity: 1;
+}
+
+.agent-row .agent-config-btn:hover {
+  background: var(--accent);
+  color: var(--bg);
+  border-color: var(--accent);
+}
+
+/* Form hints and info blocks in modals */
+.form-hint {
+  display: block;
+  margin-top: 4px;
+  color: var(--text-muted);
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.form-info {
+  margin-top: 8px;
+  padding: 10px 12px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-size: 12px;
+  color: var(--text-secondary);
+  word-break: break-all;
+}
+
+.form-info code {
+  font-family: var(--font-mono);
+  color: var(--accent);
+  background: var(--bg);
+  padding: 1px 4px;
+  border-radius: 3px;
+}
+
+.checkbox-label {
+  display: flex !important;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.checkbox-label input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  accent-color: var(--accent);
+}