@bolloon/bolloon-agent 0.1.18 → 0.1.20

package/dist/utils/auto-update.js

@@ -238,25 +238,38 @@ function checkNpmOutdated() {
     }
 }
 /**
- * 自动更新 npm 包
+ * 自动更新 npm 包 (legacy: 只传包名, 让 npm 按本地 semver 约束判断 — 不可靠)
+ * 新代码应使用 updatePackagesWithVersion 并传 name@version
  */
 async function updatePackages(packages) {
-    // 记录更新前的版本，用于事后判断"是否真的升级了"
-    // 与 getInstalledVersion 的"优先读全局"保持一致 —— install 也用 -g，
-    // 否则判断和执行落在不同的目录，永远改不到那个被读取的版本号。
     const targets = packages && packages.length > 0 ? packages : ['@bolloon/bolloon-agent'];
+    // 旧 API 没有 version, 加一个空 placeholder 走相同路径
+    return updatePackagesWithVersion(targets);
+}
+/**
+ * 自动更新 npm 包, 传 `name@version` 形式的目标让 npm install 不被本地
+ * package.json 的 semver 约束卡住 (旧版只传 name 时, npm 看到本地
+ * package.json 里 "^0.1.17" 已经满足就判 up to date, 永远升不上去)
+ */
+async function updatePackagesWithVersion(packagesWithVersion) {
+    // 解析 `name@version` 形式, 提取 name 用于 before/after 校验
+    const parsed = packagesWithVersion.map(spec => {
+        const at = spec.lastIndexOf('@');
+        if (at <= 0)
+            return { name: spec, version: '' };
+        return { name: spec.slice(0, at), version: spec.slice(at + 1) };
+    });
+    const targets = parsed.map(p => p.name);
     const before = new Map();
     for (const p of targets)
         before.set(p, getInstalledVersion(p));
-    const isGlobal = !packages || packages.length === 0;
-    const args = isGlobal
-        ? ['npm', 'install', '-g', ...targets]
-        : ['npm', 'install', ...targets, '--save'];
+    // 用 targetsWithVersion 直接拼命令 - 包含具体版本号, 不会被本地约束拦截
+    const args = ['npm', 'install', '-g', ...packagesWithVersion];
     log(`\n${CYAN}📦 正在更新包...${RESET}\n`, RESET);
     try {
         execSync(args.join(' '), {
             encoding: 'utf-8',
-            timeout: 300000, // 5分钟超时
+            timeout: 300000,
             stdio: 'inherit',
             cwd: process.cwd()
         });
@@ -269,22 +282,16 @@ async function updatePackages(packages) {
             error: e.message
         };
     }
-    // install 退出码 0 并不等于"真的升上去了"（"up to date" 也是 0）。
-    // 重新读取磁盘版本，只有真的达到目标 latest 之一才算 updated。
+    // install 退出码 0 并不等于"真的升上去了" ("up to date" 也是 0)。
+    // 重新读取磁盘版本, 只有真的达到 latest 之一才算 updated。
     const upgraded = [];
-    const failed = [];
-    for (const p of targets) {
-        const after = getInstalledVersion(p);
-        const was = before.get(p);
+    for (const p of parsed) {
+        const after = getInstalledVersion(p.name);
+        const was = before.get(p.name);
         if (after && was && compareVersions(was, after) < 0) {
-            upgraded.push(p);
-        }
-        else if (after && was && compareVersions(was, after) === 0) {
-            // 版本没变 —— install 跑过但没改动；不当作"刚升级"
-        }
-        else {
-            failed.push(p);
+            upgraded.push(p.name);
         }
+        // 版本没变 = npm 仍判 up to date; 不当成功
     }
     if (upgraded.length > 0) {
         return {
@@ -322,7 +329,10 @@ export async function checkAndUpdate() {
             log(`   当前版本: ${bolloonInfo.version}\n`, RESET);
             log(`   最新版本: ${bolloonInfo.latest}\n\n`, RESET);
             // 自动更新
-            const result = await updatePackages(bolloonInfo.packages.map(p => p.name));
+            // 关键: 把目标版本号也传过去, 否则 `npm install -g @bolloon/bolloon-agent`
+            // 会按本地 package.json 的 "^0.1.17" 约束去判断, 永远装不上去
+            const targetsWithVersion = bolloonInfo.packages.map(p => `${p.name}@${p.latest}`);
+            const result = await updatePackagesWithVersion(targetsWithVersion);
             if (result.success) {
                 log(`\n${GREEN}✅ 更新成功！请重新启动应用${RESET}\n`, RESET);
                 // 提示用户重启

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.18",
+  "version": "0.1.20",
   "type": "module",
   "description": "P2P AI Document Agent - 全局安装后执行 `bolloon` 启动产品",
   "main": "dist/cli.js",
@@ -32,7 +32,7 @@
     "src/constraint-runtime"
   ],
   "dependencies": {
-    "@bolloon/bolloon-agent": "^0.1.18",
+    "@bolloon/bolloon-agent": "^0.1.19",
     "@bolloon/constraint-runtime": "0.1.0",
     "@chainsafe/libp2p-noise": "^17.0.0",
     "@chainsafe/libp2p-yamux": "^8.0.1",

package/src/utils/auto-update.ts

@@ -280,27 +280,40 @@ function checkNpmOutdated(): OutdatedPackage[] {
 }
 
 /**
- * 自动更新 npm 包
+ * 自动更新 npm 包 (legacy: 只传包名, 让 npm 按本地 semver 约束判断 — 不可靠)
+ * 新代码应使用 updatePackagesWithVersion 并传 name@version
  */
 async function updatePackages(packages?: string[]): Promise<UpdateResult> {
-  // 记录更新前的版本，用于事后判断"是否真的升级了"
-  // 与 getInstalledVersion 的"优先读全局"保持一致 —— install 也用 -g，
-  // 否则判断和执行落在不同的目录，永远改不到那个被读取的版本号。
   const targets = packages && packages.length > 0 ? packages : ['@bolloon/bolloon-agent'];
+  // 旧 API 没有 version, 加一个空 placeholder 走相同路径
+  return updatePackagesWithVersion(targets);
+}
+
+/**
+ * 自动更新 npm 包, 传 `name@version` 形式的目标让 npm install 不被本地
+ * package.json 的 semver 约束卡住 (旧版只传 name 时, npm 看到本地
+ * package.json 里 "^0.1.17" 已经满足就判 up to date, 永远升不上去)
+ */
+async function updatePackagesWithVersion(packagesWithVersion: string[]): Promise<UpdateResult> {
+  // 解析 `name@version` 形式, 提取 name 用于 before/after 校验
+  const parsed = packagesWithVersion.map(spec => {
+    const at = spec.lastIndexOf('@');
+    if (at <= 0) return { name: spec, version: '' };
+    return { name: spec.slice(0, at), version: spec.slice(at + 1) };
+  });
+  const targets = parsed.map(p => p.name);
   const before = new Map<string, string | null>();
   for (const p of targets) before.set(p, getInstalledVersion(p));
 
-  const isGlobal = !packages || packages.length === 0;
-  const args = isGlobal
-    ? ['npm', 'install', '-g', ...targets]
-    : ['npm', 'install', ...targets, '--save'];
+  // 用 targetsWithVersion 直接拼命令 - 包含具体版本号, 不会被本地约束拦截
+  const args = ['npm', 'install', '-g', ...packagesWithVersion];
 
   log(`\n${CYAN}📦 正在更新包...${RESET}\n`, RESET);
 
   try {
     execSync(args.join(' '), {
       encoding: 'utf-8',
-      timeout: 300000, // 5分钟超时
+      timeout: 300000,
       stdio: 'inherit',
       cwd: process.cwd()
     });
@@ -313,20 +326,16 @@ async function updatePackages(packages?: string[]): Promise<UpdateResult> {
     };
   }
 
-  // install 退出码 0 并不等于"真的升上去了"（"up to date" 也是 0）。
-  // 重新读取磁盘版本，只有真的达到目标 latest 之一才算 updated。
+  // install 退出码 0 并不等于"真的升上去了" ("up to date" 也是 0)。
+  // 重新读取磁盘版本, 只有真的达到 latest 之一才算 updated。
   const upgraded: string[] = [];
-  const failed: string[] = [];
-  for (const p of targets) {
-    const after = getInstalledVersion(p);
-    const was = before.get(p);
+  for (const p of parsed) {
+    const after = getInstalledVersion(p.name);
+    const was = before.get(p.name);
     if (after && was && compareVersions(was, after) < 0) {
-      upgraded.push(p);
-    } else if (after && was && compareVersions(was, after) === 0) {
-      // 版本没变 —— install 跑过但没改动；不当作"刚升级"
-    } else {
-      failed.push(p);
+      upgraded.push(p.name);
     }
+    // 版本没变 = npm 仍判 up to date; 不当成功
   }
 
   if (upgraded.length > 0) {
@@ -376,7 +385,10 @@ export async function checkAndUpdate(): Promise<{
       log(`   最新版本: ${bolloonInfo.latest}\n\n`, RESET);
 
       // 自动更新
-      const result = await updatePackages(bolloonInfo.packages.map(p => p.name));
+      // 关键: 把目标版本号也传过去, 否则 `npm install -g @bolloon/bolloon-agent`
+      // 会按本地 package.json 的 "^0.1.17" 约束去判断, 永远装不上去
+      const targetsWithVersion = bolloonInfo.packages.map(p => `${p.name}@${p.latest}`);
+      const result = await updatePackagesWithVersion(targetsWithVersion);
 
       if (result.success) {
         log(`\n${GREEN}✅ 更新成功！请重新启动应用${RESET}\n`, RESET);

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 */