@sleep2agi/agent-network-dashboard 0.6.3-preview.51 → 0.6.3-preview.53

package/app/components/ChatPane.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { AliasAvatar } from './AliasAvatar';
 import { TaskChatPanel } from './TaskChatPanel';
 import { NodeSettingsPanel } from './NodeSettingsPanel';
+import { ChatPaneOverflowMenu } from './ChatPaneOverflowMenu';
 import { useSessions } from '../lib/hooks';
 import { t } from '../lib/ui-lang';
 
@@ -35,10 +36,20 @@ export interface ChatPaneProps {
   alias: string;
   /** Close the pane (unselect + URL back to /nodes — parent owns both). */
   onClose: () => void;
+  /** #Mobile two-level nav: 'page' renders full-width/full-height with a
+   *  back arrow (Feishu phone form — chat is a page, not a column).
+   *  Default 'column' keeps the desktop right-column behavior. */
+  variant?: 'column' | 'page';
+  /** Back arrow handler (page variant). Falls back to onClose. */
+  onBack?: () => void;
 }
 
-export function ChatPane({ alias, onClose }: ChatPaneProps) {
+export function ChatPane({ alias, onClose, variant = 'column', onBack }: ChatPaneProps) {
   const [settingsOpen, setSettingsOpen] = useState(false);
+  // 07-31 通信龙 batch (SPEC §12 remaining): ⋮ opens overflow menu
+  // (not settings direct). Menu items include 会话设置 as one of four.
+  const [overflowOpen, setOverflowOpen] = useState(false);
+  const overflowAnchorRef = useRef<HTMLButtonElement | null>(null);
   // Look up session for NodeSettingsPanel — it requires the full row.
   // useSessions is SWR-cached (same key as NodesView), so no extra
   // network cost.
@@ -54,35 +65,56 @@ export function ChatPane({ alias, onClose }: ChatPaneProps) {
       // drawer would cover the whole page — the exact regression
       // 通信龙's judgment ("settings-as-right-drawer, not 4th column
       // and not fullscreen") is designed to prevent.
-      className="relative hidden md:flex md:flex-col flex-1 min-w-0 h-full bg-[#141826]"
+      // page variant (#mobile two-level nav): full-bleed chat page below md.
+      // pb keeps the composer above the fixed MobileNav (visible < lg) —
+      // same offset AppShell reserves for normal pages.
+      className={variant === 'page'
+        ? 'relative flex flex-col w-full min-w-0 h-full bg-[#141826] pb-[calc(5rem+env(safe-area-inset-bottom))] lg:pb-0'
+        : 'relative hidden md:flex md:flex-col flex-1 min-w-0 h-full bg-[#141826] pb-[calc(5rem+env(safe-area-inset-bottom))] lg:pb-0'}
     >
       <div className="flex items-center justify-between gap-2 px-3 py-2.5 border-b border-[rgba(255,255,255,0.06)] bg-[#141826] shrink-0">
         <div className="flex items-center gap-2 min-w-0">
+          {variant === 'page' && (
+            <button
+              type="button"
+              onClick={onBack ?? onClose}
+              aria-label={t('返回列表', 'Back to list')}
+              data-testid="chat-back"
+              className="inline-flex h-8 w-8 -ml-1 items-center justify-center rounded-lg text-gray-400 hover:text-gray-100 hover:bg-[#1c1c1f] transition-colors shrink-0"
+            >
+              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+              </svg>
+            </button>
+          )}
           <AliasAvatar alias={alias} size={26} />
           <span className="truncate text-sm font-semibold text-white">{alias}</span>
         </div>
-        {/* SPEC §12: right-side icon row. ⋮ IS the settings entry
-            (opens NodeSettingsPanel directly rather than expanding an
-            overflow menu — spec calls for both, but MVP folds them
-            into one click since the only overflow item that has a
-            wired backend right now IS settings; other items in the
-            spec's 5-item overflow are not yet implemented, per
-            INVENTORY.md). Script accepts either
-            data-testid="chat-pane-settings" or "chat-pane-more" or
-            aria-label containing "设置" — we set testid=settings,
-            aria-label contains "设置", and add data-chat-pane-more so
-            all three script matchers hit. */}
+        {/* SPEC §12 (this batch): four header controls.
+            - ⋮ chat-pane-more     opens overflow dropdown (4 items)
+            - 📋 chat-pane-view-tasks jumps to /tasks?to_name=<alias>
+                (URL param wired via TasksView.tsx:75-76 same batch —
+                the prior `?alias=` was silently dropped in prod)
+            - 🔍 chat-pane-search  dispatches CustomEvent
+                'chat:open-search' which TaskChatPanel listens for
+                (search infra already existed; needed a header trigger)
+            - ✕ chat-pane-close    unchanged
+            NodeSettingsPanel is now inside the overflow menu as
+            'chat-pane-settings' (same testid preserved), NOT the
+            direct handler of ⋮. */}
         <div className="flex items-center gap-1 shrink-0">
           <button
+            ref={overflowAnchorRef}
             type="button"
-            onClick={() => setSettingsOpen(true)}
-            aria-label={t('打开会话设置', 'Open conversation settings')}
-            title={t('会话设置', 'Conversation settings')}
-            data-testid="chat-pane-settings"
-            data-chat-pane-more
+            onClick={() => setOverflowOpen(v => !v)}
+            aria-label={t('会话溢出菜单', 'Chat overflow menu')}
+            aria-haspopup="menu"
+            aria-expanded={overflowOpen}
+            title={t('更多', 'More')}
+            data-testid="chat-pane-more"
+            data-menu-open={overflowOpen ? 'true' : 'false'}
             className="inline-flex h-8 w-8 items-center justify-center rounded-md text-gray-500 hover:text-gray-200 hover:bg-[#1c1c1f] transition-colors"
           >
-            {/* ⋮ vertical dots — spec §12 "overflow menu" glyph. */}
             <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
               <circle cx="12" cy="5" r="1.5" fill="currentColor" />
               <circle cx="12" cy="12" r="1.5" fill="currentColor" />
@@ -90,7 +122,7 @@ export function ChatPane({ alias, onClose }: ChatPaneProps) {
             </svg>
           </button>
           <a
-            href={`/tasks?alias=${encodeURIComponent(alias)}`}
+            href={`/tasks?to_name=${encodeURIComponent(alias)}`}
             aria-label={t(`查看 ${alias} 的任务`, `View ${alias} tasks`)}
             title={t('查看任务', 'View tasks')}
             data-testid="chat-pane-view-tasks"
@@ -102,11 +134,12 @@ export function ChatPane({ alias, onClose }: ChatPaneProps) {
           </a>
           <button
             type="button"
-            disabled
-            aria-label={t('会话内搜索（即将支持）', 'In-chat search (coming soon)')}
-            title={t('即将支持', 'Coming soon')}
+            onClick={() => window.dispatchEvent(new CustomEvent('chat:open-search', { detail: { alias } }))}
+            aria-label={t('会话内搜索', 'In-chat search')}
+            title={t('搜索（⌘/Ctrl+F）', 'Search (⌘/Ctrl+F)')}
             data-testid="chat-pane-search"
-            className="inline-flex h-8 w-8 items-center justify-center rounded-md text-gray-700 cursor-not-allowed"
+            data-search-enabled="true"
+            className="inline-flex h-8 w-8 items-center justify-center rounded-md text-gray-500 hover:text-gray-200 hover:bg-[#1c1c1f] transition-colors"
           >
             <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
               <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
@@ -144,6 +177,14 @@ export function ChatPane({ alias, onClose }: ChatPaneProps) {
           positioning="absolute"
         />
       )}
+      {overflowOpen && (
+        <ChatPaneOverflowMenu
+          alias={alias}
+          anchorRef={overflowAnchorRef}
+          onClose={() => setOverflowOpen(false)}
+          onOpenSettings={() => setSettingsOpen(true)}
+        />
+      )}
     </aside>
   );
 }

package/app/components/ChatPaneOverflowMenu.tsx

@@ -0,0 +1,152 @@
+'use client';
+
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { togglePin, usePinned } from '../lib/chat-pin';
+import { t } from '../lib/ui-lang';
+
+// SPEC §12: chat header ⋮ opens an overflow menu. Container reuses the
+// same visual tokens as NodeListContextMenu (SPEC §10): 200px width,
+// 32px item height, #1E293B background, 1px border, no shadow, edge-
+// flip on overflow. Portal to body so overflow-y-auto ancestors don't
+// clip us.
+//
+// Items:
+//   - 添加标签页 / 移除标签页  → togglePin(alias)  (label swaps by state)
+//   - 查看任务                 → navigate /tasks?to_name=<alias>
+//   - 会话设置                 → open NodeSettingsPanel (via onOpenSettings)
+//   - ─                       → separator (visual only, non-interactive)
+//
+// 清空历史 is intentionally absent — hub has no clear-history endpoint
+// (see issue #66); rendering it as pure-client setChatEvents([]) would
+// "hide until next fetch", which is worse than not offering it.
+
+export interface ChatPaneOverflowMenuProps {
+  alias: string;
+  anchorRef: React.RefObject<HTMLElement | null>;
+  onClose: () => void;
+  onOpenSettings: () => void;
+}
+
+const EDGE = 8;
+
+export function ChatPaneOverflowMenu({ alias, anchorRef, onClose, onOpenSettings }: ChatPaneOverflowMenuProps) {
+  const pinned = usePinned(alias);
+  const menuRef = useRef<HTMLDivElement | null>(null);
+  const [pos, setPos] = useState<{ top: number; left: number; flippedY: boolean; flippedX: boolean }>({
+    top: 0, left: 0, flippedY: false, flippedX: false,
+  });
+
+  // Position below the anchor (⋮ button) by default; flip up if would
+  // overflow bottom, flip left if would overflow right. Same logic as
+  // NodeListContextMenu but anchored to an element instead of a cursor.
+  useLayoutEffect(() => {
+    if (!anchorRef.current || !menuRef.current) return;
+    const a = anchorRef.current.getBoundingClientRect();
+    const m = menuRef.current.getBoundingClientRect();
+    const vh = window.innerHeight;
+    const vw = window.innerWidth;
+    let top = a.bottom + 4;
+    let left = a.right - m.width;
+    let flippedY = false;
+    let flippedX = false;
+    if (top + m.height + EDGE > vh) {
+      top = Math.max(EDGE, a.top - m.height - 4);
+      flippedY = true;
+    }
+    if (left < EDGE) {
+      left = a.left;
+      flippedX = true;
+    }
+    top = Math.max(EDGE, Math.min(top, vh - m.height - EDGE));
+    left = Math.max(EDGE, Math.min(left, vw - m.width - EDGE));
+    setPos({ top, left, flippedY, flippedX });
+  }, [anchorRef]);
+
+  // Close on click-outside (excluding the anchor button itself, which
+  // has its own toggle handler) and Escape.
+  useEffect(() => {
+    const onDown = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (menuRef.current?.contains(target)) return;
+      if (anchorRef.current?.contains(target)) return;
+      onClose();
+    };
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    document.addEventListener('mousedown', onDown, true);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDown, true);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [anchorRef, onClose]);
+
+  if (typeof window === 'undefined') return null;
+
+  return createPortal(
+    <div
+      ref={menuRef}
+      role="menu"
+      aria-label={t('会话溢出菜单', 'Chat overflow menu')}
+      data-testid="chat-pane-overflow-menu"
+      data-flipped-y={pos.flippedY ? 'true' : undefined}
+      data-flipped-x={pos.flippedX ? 'true' : undefined}
+      style={{ position: 'fixed', top: pos.top, left: pos.left, width: 200, zIndex: 200 }}
+      className="rounded-md border border-[rgba(255,255,255,0.08)] bg-[#1E293B] py-1 text-[13px] text-gray-100"
+    >
+      <MenuItem
+        testid="chat-pane-overflow-pin"
+        onClick={() => { togglePin(alias); onClose(); }}
+      >
+        {pinned ? t('移除标签页', 'Remove tab') : t('添加标签页', 'Add as tab')}
+      </MenuItem>
+      <MenuItemLink
+        testid="chat-pane-overflow-view-tasks"
+        href={`/tasks?to_name=${encodeURIComponent(alias)}`}
+        onClick={onClose}
+      >
+        {t('查看任务', 'View tasks')}
+      </MenuItemLink>
+      <MenuItem
+        testid="chat-pane-settings"
+        onClick={() => { onOpenSettings(); onClose(); }}
+      >
+        {t('会话设置', 'Conversation settings')}
+      </MenuItem>
+      <div
+        role="separator"
+        data-testid="chat-pane-overflow-separator"
+        className="my-1 h-px bg-[rgba(255,255,255,0.08)]"
+      />
+    </div>,
+    document.body,
+  );
+}
+
+function MenuItem({ children, onClick, testid }: { children: React.ReactNode; onClick: () => void; testid: string }) {
+  return (
+    <button
+      type="button"
+      role="menuitem"
+      data-testid={testid}
+      onClick={onClick}
+      className="flex h-8 w-full items-center px-3 text-left hover:bg-[rgba(125,211,252,0.08)] focus:bg-[rgba(125,211,252,0.08)] focus:outline-none"
+    >
+      {children}
+    </button>
+  );
+}
+
+function MenuItemLink({ children, href, onClick, testid }: { children: React.ReactNode; href: string; onClick: () => void; testid: string }) {
+  return (
+    <a
+      role="menuitem"
+      data-testid={testid}
+      href={href}
+      onClick={onClick}
+      className="flex h-8 w-full items-center px-3 text-left hover:bg-[rgba(125,211,252,0.08)] focus:bg-[rgba(125,211,252,0.08)] focus:outline-none"
+    >
+      {children}
+    </a>
+  );
+}

package/app/components/NodeList.tsx

@@ -79,8 +79,15 @@ function NodeListRow({ session: s, selected, unread, onSelect, onContextMenu }:
       data-node-list-item
       data-node-list-alias={s.alias}
       data-selected={selected ? 'true' : 'false'}
-      data-node-pinned={pinned ? 'true' : undefined}
-      data-node-muted={muted ? 'true' : undefined}
+      // 通信龙 07-31: attribute is ALWAYS present ('true'|'false'),
+      // never removed. This separates capability (attr exists on every
+      // row → wire is intact) from state (attr === 'true' → user did
+      // pin/mute this one). Prior form (undefined when false) made a
+      // gate script's "at least one on page" check indistinguishable
+      // from "wire got ripped out" — both looked like `[data-node-pinned]`
+      // empty. See feedback_tolerant_assertion_accepts_noncompliance.
+      data-node-pinned={pinned ? 'true' : 'false'}
+      data-node-muted={muted ? 'true' : 'false'}
       onClick={() => onSelect(s.alias)}
       onContextMenu={e => onContextMenu(s.alias, e)}
       // SPEC §11.1: pinned row = whole-row light background
@@ -204,7 +211,10 @@ export function NodeList({ sessions, selectedAlias, onSelect, search, onSearchCh
   // Instead: attach ONCE (empty deps), read latest values via ref.
   const scrollRef = useRef<HTMLDivElement | null>(null);
   const stateRef = useRef({ sessions, selectedAlias, onSelect });
-  stateRef.current = { sessions, selectedAlias, onSelect };
+  // (was a bare write during render — react-hooks/refs violation caught by
+  // the pre-commit gate; an effect keeps the same "listener reads latest
+  // values" semantics, updated post-render.)
+  useEffect(() => { stateRef.current = { sessions, selectedAlias, onSelect }; });
   useEffect(() => {
     if (typeof window === 'undefined') return;
     const onKey = (e: KeyboardEvent) => {
@@ -276,7 +286,7 @@ export function NodeList({ sessions, selectedAlias, onSelect, search, onSearchCh
           onClose={() => setMenu(null)}
         />
       )}
-      <div ref={scrollRef} data-testid="node-list-scroll" className="flex-1 min-h-0 overflow-y-auto">
+      <div ref={scrollRef} data-testid="node-list-scroll" className="flex-1 min-h-0 overflow-y-auto pb-[calc(5rem+env(safe-area-inset-bottom))] lg:pb-0">
         {sessions.length === 0 ? (
           search ? (
             /* #Stage D (Vincent ③ 判据): a no-match search MUST look

package/app/components/TaskChatPanel.tsx

@@ -315,45 +315,170 @@ function LocalFilePreview({ file, onRemove }: { file: File; onRemove: () => void
   );
 }
 
-const STATUS_STEPS = ['created', 'delivered', 'running', 'replied'];
-const STATUS_COLORS: Record<string, string> = {
-  created: 'bg-gray-400', delivered: 'bg-blue-400', running: 'bg-green-400',
-  replied: 'bg-purple-400', failed: 'bg-red-400', closed: 'bg-gray-500',
+// 通信龙 07-31 GAP 2nd tier: translate hub status codes into human
+// labels. The old form was `● ─ ● ─ ○ ─ ○  delivered` — a colored dot
+// progression + the raw English word. Nobody could tell "delivered"
+// (hub-side mark) from "acked" (node process received) from "replied"
+// (agent actually processed).
+//
+// Two things this rewrite fixes:
+//
+// 1. STATUS_STEPS was `['created','delivered','running','replied']`.
+//    Neither `created` nor `running` correspond to hub-emitted terminal
+//    statuses (`created` is client-side optimistic, `running` is READ
+//    by hub queries but never WRITTEN — grep server/src for `= 'running'`
+//    returns zero). Real hub progression is queued → delivered → acked
+//    → replied, and the old third dot literally never lit up.
+//
+// 2. `delivered` was labeled as if it meant "message reached the node".
+//    Reading hub source (server/src/index.ts:1568 + tools.ts:1080/1232)
+//    shows it's set at task-insert time — same instant as delivered_at
+//    (which is why delivered_at delay is empirically 0). The label now
+//    says "已推送" and the hover explicitly disclaims node reception.
+//
+// Vocabulary — must stay in sync with hub emits:
+//   queued / delivered / acked / replied / failed  ← the primary 5
+//   created                                        ← client-side pre-POST
+//   closed / expired / cancelled                   ← terminal, non-reply
+//   running                                        ← reserved (never written today)
+//   <anything else>                                ← fail-loudly (raw + banner)
+const STATUS_STEPS = ['queued', 'delivered', 'acked', 'replied'] as const;
+type StatusInfo = { label: string; hover: string; color: string; icon: React.ReactNode };
+const STATUS_INFO: Record<string, StatusInfo> = {
+  created:   { label: '发送中',   hover: '客户端已建消息，尚未收到 hub 回执。', color: 'text-gray-400',   icon: <IconSending /> },
+  queued:    { label: '排队中',   hover: '已入队，尚未推给节点。节点可能离线、或通道拥堵。', color: 'text-gray-400',   icon: <IconClock /> },
+  delivered: { label: '已推送',   hover: 'hub 侧已标记推送。尚未确认节点是否收到（delivered_at 是入队时刻，不代表 SSE 已到达）。', color: 'text-sky-400',    icon: <IconCheck /> },
+  acked:     { label: '已接收',   hover: '节点进程已确认收到。未必已处理——对方 agent 可能尚未唤醒。', color: 'text-gray-300',   icon: <IconCheckDouble /> },
+  replied:   { label: '已回复',   hover: '对方已针对此消息回复。', color: 'text-emerald-400', icon: <IconCheckDouble filled /> },
+  failed:    { label: '失败',     hover: '发送失败——详细原因见消息下方文本。', color: 'text-red-400',    icon: <IconWarn /> },
+  closed:    { label: '已关闭',   hover: '会话已被关闭，不再期待回复。', color: 'text-gray-500',   icon: <IconClose /> },
+  expired:   { label: '已超时',   hover: '在期限内未收到回复，任务已超时。', color: 'text-gray-500',   icon: <IconClock /> },
+  cancelled: { label: '已取消',   hover: '任务被主动取消。', color: 'text-gray-500',   icon: <IconClose /> },
+  running:   { label: '处理中',   hover: '节点进程正在处理（今日 hub 不写入此值，见组件注释）。', color: 'text-green-400',  icon: <IconClock /> },
 };
 
-function StatusBar({ status }: { status: string }) {
-  const idx = STATUS_STEPS.indexOf(status);
-  const isFailed = status === 'failed';
+function StatusBar({ status, result }: { status: string; result?: string }) {
+  const info = STATUS_INFO[status];
+  const known = !!info;
+  // Progression label list for the hover — same string appended after
+  // the per-status hover so the reader gets a compact map of the flow.
+  // Not per-step timestamps: hub doesn't expose queued_at / acked_at
+  // separately from delivered_at, so a per-step timeline would be
+  // fabricated data. See feedback_assert_the_fact_not_the_declaration.
+  const idx = STATUS_STEPS.indexOf(status as typeof STATUS_STEPS[number]);
+  const flow = STATUS_STEPS.map((s, i) => {
+    const mark = i < idx || (i === idx && idx >= 0) ? '✓' : '○';
+    return `${mark} ${STATUS_INFO[s].label}`;
+  }).join(' → ');
+  const hoverText = known
+    ? `${info.hover}\n\n进度：${flow}`
+    : `未知状态「${status}」——请报 bug。UI 词库没有匹配项，可能 hub 加了新 status 但前端没跟上。`;
+  const label = known ? info.label : status;
+  const color = known ? info.color : 'text-yellow-400';
+
+  // failed inline reason — hub has no dedicated failure_reason column
+  // (task table: task_id/from_*/to_*/status/content/result/... —
+  // grep-verified as of 2026-07-31). We show `result` first 40 chars
+  // when present. When result is empty, we explicitly say "节点未提供
+  // 原因" rather than falling back to a generic "未知错误" — that
+  // distinguishes "hub has no error field" from "reason field exists
+  // but got a bad value".
+  const failedReason = status === 'failed'
+    ? ((result && result.trim()) ? result.trim().slice(0, 40) : '节点未提供原因')
+    : null;
+
   return (
-    <div className="flex items-center gap-1 mt-1.5">
-      {STATUS_STEPS.map((s, i) => (
-        <div key={s} className="flex items-center gap-1">
-          <div className={`w-2 h-2 rounded-full transition-all duration-700 ${
-            isFailed ? (i === 0 ? 'bg-red-400' : 'bg-[var(--border)]')
-            : i <= idx ? (STATUS_COLORS[s] || 'bg-gray-600') : 'bg-[var(--border)]'
-          }`} />
-          {i < STATUS_STEPS.length - 1 && (
-            <div className={`w-4 h-px transition-colors duration-700 ${
-              isFailed ? 'bg-red-800' : i < idx ? 'bg-gray-500' : 'bg-[var(--border)]'
-            }`} />
-          )}
-        </div>
-      ))}
-      <span className={`text-[10px] ml-1.5 font-medium ${
-        isFailed ? 'text-red-400' : status === 'replied' ? 'text-purple-400'
-        : status === 'running' ? 'text-green-400' : 'text-[var(--fg-muted)]'
-      }`}>{status}</span>
-      {(status === 'running' || status === 'delivered') && (
-        <span className="ml-1">
-          <span className="inline-block w-1 h-1 rounded-full bg-green-400 animate-pulse" />
-          <span className="inline-block w-1 h-1 rounded-full bg-green-400 animate-pulse ml-0.5" style={{ animationDelay: '0.2s' }} />
-          <span className="inline-block w-1 h-1 rounded-full bg-green-400 animate-pulse ml-0.5" style={{ animationDelay: '0.4s' }} />
+    <div
+      data-status-key={status}
+      data-status-known={known ? 'true' : 'false'}
+      data-status-label={label}
+      className="inline-flex flex-col gap-0.5 mt-1.5"
+    >
+      <span
+        title={hoverText}
+        aria-label={known ? info.label : `未知状态 ${status}`}
+        className={`inline-flex items-center gap-1.5 text-[11px] font-medium ${color}`}
+      >
+        {known ? info.icon : <IconQuestion />}
+        <span>{label}</span>
+        {(status === 'delivered' || status === 'created') && (
+          <span aria-hidden className="inline-flex items-center gap-0.5 ml-0.5">
+            <span className="inline-block w-1 h-1 rounded-full bg-current opacity-70 animate-pulse" />
+            <span className="inline-block w-1 h-1 rounded-full bg-current opacity-70 animate-pulse" style={{ animationDelay: '0.2s' }} />
+            <span className="inline-block w-1 h-1 rounded-full bg-current opacity-70 animate-pulse" style={{ animationDelay: '0.4s' }} />
+          </span>
+        )}
+      </span>
+      {failedReason !== null && (
+        <span
+          data-status-reason={failedReason}
+          className="text-[10px] text-red-400/80 max-w-[260px] truncate"
+          title={result || undefined}
+        >
+          {failedReason}
         </span>
       )}
     </div>
   );
 }
 
+// Icon primitives — inline SVG, single-color (currentColor), sized to
+// match the 11px label text. No external icon library — keeps the
+// StatusBar self-contained and avoids a Tailwind purge/tree-shake
+// dance for icons only this component uses.
+function IconClock() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" />
+    </svg>
+  );
+}
+function IconCheck() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M4 12l6 6L20 6" />
+    </svg>
+  );
+}
+function IconCheckDouble({ filled }: { filled?: boolean } = {}) {
+  return (
+    <svg width="14" height="12" viewBox="0 0 28 24" fill="none" stroke="currentColor" strokeWidth={filled ? 2.5 : 2} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M2 12l6 6L18 6" />
+      <path d="M10 12l6 6L26 6" opacity={filled ? 1 : 0.7} />
+    </svg>
+  );
+}
+function IconWarn() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M12 2L2 20h20L12 2z" /><path d="M12 9v5" /><circle cx="12" cy="17.5" r="0.6" fill="currentColor" />
+    </svg>
+  );
+}
+function IconClose() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="10" /><path d="M8 12h8" />
+    </svg>
+  );
+}
+function IconSending() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M4 12l16-8-6 16-3-7-7-1z" />
+    </svg>
+  );
+}
+function IconQuestion() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="10" />
+      <path d="M9.5 9.5a2.5 2.5 0 015 0c0 1.5-2.5 2-2.5 3.5" />
+      <circle cx="12" cy="17" r="0.6" fill="currentColor" />
+    </svg>
+  );
+}
+
 // Full markdown rendering — handles tables, headings, lists, links, code,
 // blockquotes via react-markdown + GFM. Earlier hand-rolled parser only did
 // code blocks + bold; tables / headings showed as raw `|---|` text.
@@ -586,6 +711,22 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes, active }
     window.addEventListener('keydown', onKey, true);
     return () => window.removeEventListener('keydown', onKey, true);
   }, [isActive]);
+  // 07-31 通信龙 batch (SPEC §12 header 🔍): ChatPane's search button
+  // dispatches `chat:open-search` (detail.alias). Same effect as
+  // Cmd/Ctrl+F, but reachable by pointer users. Filter on detail.alias
+  // === alias so a search click on chat A doesn't accidentally open
+  // search on chat B if both were somehow mounted.
+  useEffect(() => {
+    if (!isActive) return;
+    const onEvent = (e: Event) => {
+      const detail = (e as CustomEvent<{ alias?: string }>).detail;
+      if (detail?.alias && detail.alias !== alias) return;
+      setSearchOpen(true);
+      setTimeout(() => searchInputRef.current?.focus(), 50);
+    };
+    window.addEventListener('chat:open-search', onEvent);
+    return () => window.removeEventListener('chat:open-search', onEvent);
+  }, [isActive, alias]);
   const lightboxOpenerRef = useRef<HTMLElement | null>(null);
   const openLightbox = useCallback((url: string) => {
     lightboxOpenerRef.current = document.activeElement as HTMLElement | null;
@@ -1442,7 +1583,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes, active }
                     ))}
                   </div>
                   <div className="flex flex-wrap items-center justify-between mt-1.5 gap-2 sm:gap-3">
-                    <StatusBar status={m.status} />
+                    <StatusBar status={m.status} result={m.result} />
                     <div className="flex items-center gap-2 shrink-0">
                       {/* R4: WeChat send-feedback loop — spinner while the
                           optimistic bubble is still in flight; tap-to-resend