@bolloon/bolloon-agent 0.1.19 → 0.1.21

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');
@@ -465,20 +467,13 @@ function renderChannels() {
           </svg>
         </button>
         <button class="channel-delete" title="删除智能体">×</button>
-        <button class="agent-new-session" 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>
-        </button>
       </span>
     `;
 
     // 行点击：切换展开；点击名字/图标区域则切到该智能体
     row.addEventListener('click', (ev) => {
-      // 如果点在删除/新会话/配置按钮上, 单独处理
+      // 如果点在删除/配置按钮上, 单独处理
       if (ev.target.closest('.channel-delete')
-          || ev.target.closest('.agent-new-session')
           || ev.target.closest('.agent-config-btn')) return;
       if (ev.target.closest('.agent-caret')) {
         toggleAgentExpand(ch.id, ev);
@@ -493,8 +488,6 @@ function renderChannels() {
 
     // 智能体删除
     row.querySelector('.channel-delete').addEventListener('click', (ev) => deleteChannel(ch.id, ev));
-    // 新会话按钮
-    row.querySelector('.agent-new-session').addEventListener('click', (ev) => createNewSessionForChannel(ch.id, ev));
     // 配置按钮: 打开同一个 modal 编辑已有智能体
     row.querySelector('.agent-config-btn').addEventListener('click', (ev) => {
       ev.stopPropagation();
@@ -507,6 +500,32 @@ function renderChannels() {
     const sessionUl = document.createElement('ul');
     sessionUl.className = 'session-list';
     if (isExpanded) {
+      // "新建会话" 按钮 — 放在 session 列表最前面, 始终可见
+      const newSessLi = document.createElement('li');
+      newSessLi.className = 'session-new-item';
+      newSessLi.setAttribute('role', 'button');
+      newSessLi.setAttribute('tabindex', '0');
+      newSessLi.title = '新建会话';
+      newSessLi.innerHTML = `
+        <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>
+      `;
+      const onNewSession = (ev) => {
+        ev.stopPropagation();
+        createNewSessionForChannel(ch.id, ev);
+      };
+      newSessLi.addEventListener('click', onNewSession);
+      newSessLi.addEventListener('keydown', (ev) => {
+        if (ev.key === 'Enter' || ev.key === ' ') {
+          ev.preventDefault();
+          onNewSession(ev);
+        }
+      });
+      sessionUl.appendChild(newSessLi);
+
       const sessions = Array.isArray(ch.sessions) ? ch.sessions : [];
       sessions.forEach(sess => {
         const sessLi = document.createElement('li');
@@ -900,20 +919,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 +1390,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 +1403,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

@@ -576,33 +576,8 @@ body {
 }
 
 .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 列表顶部, 见 .session-new-item */
+  display: none;
 }
 
 /* Session list nested under each agent */
@@ -662,6 +637,41 @@ body {
   font-weight: 500;
 }
 
+/* "新建会话" 入口, 固定在 session 列表最前面, 始终可见 */
+.session-new-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  margin-bottom: 2px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--text-secondary);
+  background: transparent;
+  border: 1px dashed var(--border-light);
+  transition: var(--transition);
+  user-select: none;
+}
+
+.session-new-item:hover {
+  background: var(--accent);
+  color: var(--bg);
+  border-color: var(--accent);
+  border-style: solid;
+}
+
+.session-new-item:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+.session-new-item svg {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+}
+
 .session-name {
   flex: 1;
   font-size: 13px;
@@ -1462,21 +1472,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;
+}
+
+.agent-status[hidden] {
+  display: none;
+}
+
+@keyframes statusFadeIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.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;
 }
 
-.loading-dots span {
-  animation: blink 1.4s infinite;
+.agent-status-icon {
+  font-size: 14px;
+  flex-shrink: 0;
+  /* 默认不显示, 仅在切换为"执行"状态时显示 */
+  display: none;
 }
 
-.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
-.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
+.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; }
 
-@keyframes blink {
-  0%, 20% { opacity: 0; }
-  40%, 100% { opacity: 1; }
+.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.21",
   "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');
@@ -465,20 +467,13 @@ function renderChannels() {
           </svg>
         </button>
         <button class="channel-delete" title="删除智能体">×</button>
-        <button class="agent-new-session" 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>
-        </button>
       </span>
     `;
 
     // 行点击：切换展开；点击名字/图标区域则切到该智能体
     row.addEventListener('click', (ev) => {
-      // 如果点在删除/新会话/配置按钮上, 单独处理
+      // 如果点在删除/配置按钮上, 单独处理
       if (ev.target.closest('.channel-delete')
-          || ev.target.closest('.agent-new-session')
           || ev.target.closest('.agent-config-btn')) return;
       if (ev.target.closest('.agent-caret')) {
         toggleAgentExpand(ch.id, ev);
@@ -493,8 +488,6 @@ function renderChannels() {
 
     // 智能体删除
     row.querySelector('.channel-delete').addEventListener('click', (ev) => deleteChannel(ch.id, ev));
-    // 新会话按钮
-    row.querySelector('.agent-new-session').addEventListener('click', (ev) => createNewSessionForChannel(ch.id, ev));
     // 配置按钮: 打开同一个 modal 编辑已有智能体
     row.querySelector('.agent-config-btn').addEventListener('click', (ev) => {
       ev.stopPropagation();
@@ -507,6 +500,32 @@ function renderChannels() {
     const sessionUl = document.createElement('ul');
     sessionUl.className = 'session-list';
     if (isExpanded) {
+      // "新建会话" 按钮 — 放在 session 列表最前面, 始终可见
+      const newSessLi = document.createElement('li');
+      newSessLi.className = 'session-new-item';
+      newSessLi.setAttribute('role', 'button');
+      newSessLi.setAttribute('tabindex', '0');
+      newSessLi.title = '新建会话';
+      newSessLi.innerHTML = `
+        <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>
+      `;
+      const onNewSession = (ev) => {
+        ev.stopPropagation();
+        createNewSessionForChannel(ch.id, ev);
+      };
+      newSessLi.addEventListener('click', onNewSession);
+      newSessLi.addEventListener('keydown', (ev) => {
+        if (ev.key === 'Enter' || ev.key === ' ') {
+          ev.preventDefault();
+          onNewSession(ev);
+        }
+      });
+      sessionUl.appendChild(newSessLi);
+
       const sessions = Array.isArray(ch.sessions) ? ch.sessions : [];
       sessions.forEach(sess => {
         const sessLi = document.createElement('li');
@@ -900,20 +919,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 +1390,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 +1403,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

@@ -576,33 +576,8 @@ body {
 }
 
 .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 列表顶部, 见 .session-new-item */
+  display: none;
 }
 
 /* Session list nested under each agent */
@@ -662,6 +637,41 @@ body {
   font-weight: 500;
 }
 
+/* "新建会话" 入口, 固定在 session 列表最前面, 始终可见 */
+.session-new-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  margin-bottom: 2px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--text-secondary);
+  background: transparent;
+  border: 1px dashed var(--border-light);
+  transition: var(--transition);
+  user-select: none;
+}
+
+.session-new-item:hover {
+  background: var(--accent);
+  color: var(--bg);
+  border-color: var(--accent);
+  border-style: solid;
+}
+
+.session-new-item:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+.session-new-item svg {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+}
+
 .session-name {
   flex: 1;
   font-size: 13px;
@@ -1462,21 +1472,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;
+}
+
+.agent-status[hidden] {
+  display: none;
+}
+
+@keyframes statusFadeIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.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;
 }
 
-.loading-dots span {
-  animation: blink 1.4s infinite;
+.agent-status-icon {
+  font-size: 14px;
+  flex-shrink: 0;
+  /* 默认不显示, 仅在切换为"执行"状态时显示 */
+  display: none;
 }
 
-.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
-.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
+.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; }
 
-@keyframes blink {
-  0%, 20% { opacity: 0; }
-  40%, 100% { opacity: 1; }
+.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 */