@bolloon/bolloon-agent 0.1.19 → 0.1.20

package/dist/web/client.js

@@ -4,6 +4,8 @@ if (typeof marked === 'undefined') {
 }
 
 const messagesEl = document.getElementById('messages');
+const agentStatusEl = document.getElementById('agent-status');
+const agentStatusTextEl = document.getElementById('agent-status-text');
 const input = document.getElementById('input');
 const sendBtn = document.getElementById('send');
 const sidebar = document.getElementById('sidebar');
@@ -900,20 +902,45 @@ function addMessage(content, type, save = true, container) {
   msgContainer.scrollTop = msgContainer.scrollHeight;
 }
 
+// Agent status bar — sits between the message list and the input box.
+// Two visual states: "planning" (spinner) and "executing" (glowing icon).
+// The text alternates to convey the action loop.
+let agentStatusState = null; // 'planning' | 'executing' | null
+let agentStatusTextIdx = 0;
+
+const AGENT_STATUS_TEXTS = {
+  planning: ['正在计划下一步行动', '正在规划任务路径', '正在分析当前状态'],
+  executing: ['正在执行下一步行动', '正在执行任务', '正在调用工具'],
+};
+
+function setAgentStatus(state) {
+  if (!agentStatusEl || !agentStatusTextEl) return;
+  if (state === null) {
+    agentStatusEl.hidden = true;
+    agentStatusEl.removeAttribute('data-mode');
+    agentStatusState = null;
+    return;
+  }
+  agentStatusEl.hidden = false;
+  agentStatusEl.setAttribute('data-mode', state);
+  agentStatusState = state;
+  // 重排一下文本, 避免长时间停留过于单调
+  agentStatusTextIdx = (agentStatusTextIdx + 1) % AGENT_STATUS_TEXTS[state].length;
+  agentStatusTextEl.textContent = AGENT_STATUS_TEXTS[state][agentStatusTextIdx];
+}
+
 function showTyping(container) {
-  const msgContainer = container || messagesContainers.get(currentChannelId) || messagesEl;
   hideTyping();
-  const div = document.createElement('div');
-  div.className = 'message message-ai';
-  div.id = 'typing';
-  div.innerHTML = '<div class="typing"><div class="typing-spinner"></div><span class="typing-text">思考中...</span></div>';
-  msgContainer.appendChild(div);
-  msgContainer.scrollTop = msgContainer.scrollHeight;
+  // 兼容旧路径: container 参数保留但不再使用, status bar 是全局唯一的
+  void container;
+  setAgentStatus('planning');
 }
 
 function hideTyping() {
-  const typing = document.getElementById('typing');
-  if (typing) typing.remove();
+  setAgentStatus(null);
+  // 兜底: 旧版本的 #typing 元素可能还残留在 DOM 里, 顺手清掉
+  const old = document.getElementById('typing');
+  if (old) old.remove();
   hideStreaming();
 }
 
@@ -1346,8 +1373,10 @@ function connect(channelId) {
         showUserCommand(data.content, container);
       } else if (data.type === 'ai') {
         addMessage(data.content, 'ai', true, container);
+        hideTyping();
       } else if (data.type === 'stream') {
         handleStreamEvent(data, container);
+        setAgentStatus('executing');
       } else if (data.type === 'regenerating') {
         const messages = container.querySelectorAll('.message-ai');
         if (messages.length > 0) {
@@ -1357,6 +1386,7 @@ function connect(channelId) {
         showTyping(container);
       } else if (data.type === 'status') {
         handleStatusEvent(data, container);
+        setAgentStatus('executing');
       } else if (data.type === 'done') {
         hideTyping();
         // AI 回复完, 把最后一条 ai 消息落盘 (兜底, 避免 server saveSession 漏写)

package/dist/web/index.html

@@ -261,12 +261,12 @@
         </div>
       </div>
 
-      <div class="messages" id="messages">
-        <div class="message message-ai">
-          <div class="bubble bubble-ai">
-            <span class="loading-dots">加载中<span>.</span><span>.</span><span>.</span></span>
-          </div>
-        </div>
+      <div class="messages" id="messages"></div>
+
+      <div class="agent-status" id="agent-status" hidden aria-live="polite">
+        <span class="agent-status-spinner" aria-hidden="true"></span>
+        <span class="agent-status-icon" aria-hidden="true"></span>
+        <span class="agent-status-text" id="agent-status-text">正在计划下一步</span>
       </div>
 
       <div class="input-area">

package/dist/web/style.css

@@ -1462,21 +1462,96 @@ body {
   50% { opacity: 1; transform: scale(1.2); }
 }
 
-/* Loading Dots */
-.loading-dots {
+/* Agent status bar (sits between .messages and .input-area) */
+.agent-status {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 24px;
+  background: linear-gradient(
+    180deg,
+    transparent 0%,
+    var(--accent-glow) 100%
+  );
+  border-top: 1px solid var(--border);
+  font-size: 13px;
+  color: var(--text-secondary);
   font-family: 'JetBrains Mono', monospace;
+  letter-spacing: 0.3px;
+  animation: statusFadeIn 0.3s ease-out;
+  min-height: 36px;
 }
 
-.loading-dots span {
-  animation: blink 1.4s infinite;
+.agent-status[hidden] {
+  display: none;
 }
 
-.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
-.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
+@keyframes statusFadeIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
 
-@keyframes blink {
-  0%, 20% { opacity: 0; }
-  40%, 100% { opacity: 1; }
+.agent-status-spinner {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--border-light);
+  border-top-color: var(--accent);
+  border-right-color: var(--accent-hover);
+  border-radius: 50%;
+  animation: spin 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  will-change: transform;
+  flex-shrink: 0;
+}
+
+.agent-status-icon {
+  font-size: 14px;
+  flex-shrink: 0;
+  /* 默认不显示, 仅在切换为"执行"状态时显示 */
+  display: none;
+}
+
+.agent-status[data-mode="executing"] .agent-status-spinner { display: none; }
+.agent-status[data-mode="executing"] .agent-status-icon { display: inline-block; }
+.agent-status[data-mode="executing"] .agent-status-icon { animation: pulseGlow 1.4s ease-in-out infinite; }
+
+.agent-status-text {
+  flex: 1;
+  background: linear-gradient(
+    90deg,
+    var(--text-secondary) 0%,
+    var(--accent) 50%,
+    var(--text-secondary) 100%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  animation: textShimmer 2.4s linear infinite;
+}
+
+@keyframes textShimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+@keyframes pulseGlow {
+  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px var(--accent-glow)); }
+  50%      { transform: scale(1.15); filter: drop-shadow(0 0 6px var(--accent)); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agent-status-spinner,
+  .agent-status-text,
+  .agent-status-icon,
+  .agent-status {
+    animation: none;
+  }
+  .agent-status-text {
+    color: var(--text-secondary);
+    -webkit-text-fill-color: var(--text-secondary);
+  }
 }
 
 /* Input Area */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bolloon/bolloon-agent",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "type": "module",
   "description": "P2P AI Document Agent - 全局安装后执行 `bolloon` 启动产品",
   "main": "dist/cli.js",

package/src/web/client.js

@@ -4,6 +4,8 @@ if (typeof marked === 'undefined') {
 }
 
 const messagesEl = document.getElementById('messages');
+const agentStatusEl = document.getElementById('agent-status');
+const agentStatusTextEl = document.getElementById('agent-status-text');
 const input = document.getElementById('input');
 const sendBtn = document.getElementById('send');
 const sidebar = document.getElementById('sidebar');
@@ -900,20 +902,45 @@ function addMessage(content, type, save = true, container) {
   msgContainer.scrollTop = msgContainer.scrollHeight;
 }
 
+// Agent status bar — sits between the message list and the input box.
+// Two visual states: "planning" (spinner) and "executing" (glowing icon).
+// The text alternates to convey the action loop.
+let agentStatusState = null; // 'planning' | 'executing' | null
+let agentStatusTextIdx = 0;
+
+const AGENT_STATUS_TEXTS = {
+  planning: ['正在计划下一步行动', '正在规划任务路径', '正在分析当前状态'],
+  executing: ['正在执行下一步行动', '正在执行任务', '正在调用工具'],
+};
+
+function setAgentStatus(state) {
+  if (!agentStatusEl || !agentStatusTextEl) return;
+  if (state === null) {
+    agentStatusEl.hidden = true;
+    agentStatusEl.removeAttribute('data-mode');
+    agentStatusState = null;
+    return;
+  }
+  agentStatusEl.hidden = false;
+  agentStatusEl.setAttribute('data-mode', state);
+  agentStatusState = state;
+  // 重排一下文本, 避免长时间停留过于单调
+  agentStatusTextIdx = (agentStatusTextIdx + 1) % AGENT_STATUS_TEXTS[state].length;
+  agentStatusTextEl.textContent = AGENT_STATUS_TEXTS[state][agentStatusTextIdx];
+}
+
 function showTyping(container) {
-  const msgContainer = container || messagesContainers.get(currentChannelId) || messagesEl;
   hideTyping();
-  const div = document.createElement('div');
-  div.className = 'message message-ai';
-  div.id = 'typing';
-  div.innerHTML = '<div class="typing"><div class="typing-spinner"></div><span class="typing-text">思考中...</span></div>';
-  msgContainer.appendChild(div);
-  msgContainer.scrollTop = msgContainer.scrollHeight;
+  // 兼容旧路径: container 参数保留但不再使用, status bar 是全局唯一的
+  void container;
+  setAgentStatus('planning');
 }
 
 function hideTyping() {
-  const typing = document.getElementById('typing');
-  if (typing) typing.remove();
+  setAgentStatus(null);
+  // 兜底: 旧版本的 #typing 元素可能还残留在 DOM 里, 顺手清掉
+  const old = document.getElementById('typing');
+  if (old) old.remove();
   hideStreaming();
 }
 
@@ -1346,8 +1373,10 @@ function connect(channelId) {
         showUserCommand(data.content, container);
       } else if (data.type === 'ai') {
         addMessage(data.content, 'ai', true, container);
+        hideTyping();
       } else if (data.type === 'stream') {
         handleStreamEvent(data, container);
+        setAgentStatus('executing');
       } else if (data.type === 'regenerating') {
         const messages = container.querySelectorAll('.message-ai');
         if (messages.length > 0) {
@@ -1357,6 +1386,7 @@ function connect(channelId) {
         showTyping(container);
       } else if (data.type === 'status') {
         handleStatusEvent(data, container);
+        setAgentStatus('executing');
       } else if (data.type === 'done') {
         hideTyping();
         // AI 回复完, 把最后一条 ai 消息落盘 (兜底, 避免 server saveSession 漏写)

package/src/web/index.html

@@ -261,12 +261,12 @@
         </div>
       </div>
 
-      <div class="messages" id="messages">
-        <div class="message message-ai">
-          <div class="bubble bubble-ai">
-            <span class="loading-dots">加载中<span>.</span><span>.</span><span>.</span></span>
-          </div>
-        </div>
+      <div class="messages" id="messages"></div>
+
+      <div class="agent-status" id="agent-status" hidden aria-live="polite">
+        <span class="agent-status-spinner" aria-hidden="true"></span>
+        <span class="agent-status-icon" aria-hidden="true"></span>
+        <span class="agent-status-text" id="agent-status-text">正在计划下一步</span>
       </div>
 
       <div class="input-area">

package/src/web/style.css

@@ -1462,21 +1462,96 @@ body {
   50% { opacity: 1; transform: scale(1.2); }
 }
 
-/* Loading Dots */
-.loading-dots {
+/* Agent status bar (sits between .messages and .input-area) */
+.agent-status {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 24px;
+  background: linear-gradient(
+    180deg,
+    transparent 0%,
+    var(--accent-glow) 100%
+  );
+  border-top: 1px solid var(--border);
+  font-size: 13px;
+  color: var(--text-secondary);
   font-family: 'JetBrains Mono', monospace;
+  letter-spacing: 0.3px;
+  animation: statusFadeIn 0.3s ease-out;
+  min-height: 36px;
 }
 
-.loading-dots span {
-  animation: blink 1.4s infinite;
+.agent-status[hidden] {
+  display: none;
 }
 
-.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
-.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
+@keyframes statusFadeIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
 
-@keyframes blink {
-  0%, 20% { opacity: 0; }
-  40%, 100% { opacity: 1; }
+.agent-status-spinner {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--border-light);
+  border-top-color: var(--accent);
+  border-right-color: var(--accent-hover);
+  border-radius: 50%;
+  animation: spin 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  will-change: transform;
+  flex-shrink: 0;
+}
+
+.agent-status-icon {
+  font-size: 14px;
+  flex-shrink: 0;
+  /* 默认不显示, 仅在切换为"执行"状态时显示 */
+  display: none;
+}
+
+.agent-status[data-mode="executing"] .agent-status-spinner { display: none; }
+.agent-status[data-mode="executing"] .agent-status-icon { display: inline-block; }
+.agent-status[data-mode="executing"] .agent-status-icon { animation: pulseGlow 1.4s ease-in-out infinite; }
+
+.agent-status-text {
+  flex: 1;
+  background: linear-gradient(
+    90deg,
+    var(--text-secondary) 0%,
+    var(--accent) 50%,
+    var(--text-secondary) 100%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  animation: textShimmer 2.4s linear infinite;
+}
+
+@keyframes textShimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+@keyframes pulseGlow {
+  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px var(--accent-glow)); }
+  50%      { transform: scale(1.15); filter: drop-shadow(0 0 6px var(--accent)); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agent-status-spinner,
+  .agent-status-text,
+  .agent-status-icon,
+  .agent-status {
+    animation: none;
+  }
+  .agent-status-text {
+    color: var(--text-secondary);
+    -webkit-text-fill-color: var(--text-secondary);
+  }
 }
 
 /* Input Area */