@sleep2agi/agent-network-dashboard 0.6.3-preview.13 → 0.6.3-preview.15

package/app/components/AgentCard.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, memo } from 'react';
 import Link from 'next/link';
 import { Session } from './types';
 import { timeAgo } from './utils';
@@ -12,6 +12,10 @@ interface AgentCardProps {
   hasSse: boolean;
   sseCount: number;
   onChat?: (alias: string) => void;
+  /** R8 (Vincent: 微信式未读角标): unread count for this conversation.
+   *  Passed as a prop (computed once page-level) so the R6 memo keeps
+   *  protecting against fleet-wide re-render storms. */
+  unreadCount?: number;
 }
 
 const STATUS_CONFIG: Record<string, { bg: string; text: string; dot: string; glow: string }> = {
@@ -23,7 +27,7 @@ const STATUS_CONFIG: Record<string, { bg: string; text: string; dot: string; glo
 
 const DEFAULT_STATUS = { bg: 'bg-gray-800/50 border-gray-700/30', text: 'text-gray-500', dot: 'bg-gray-500', glow: '' };
 
-export function AgentCard({ session: s, hasSse, sseCount, onChat }: AgentCardProps) {
+function AgentCardInner({ session: s, hasSse, sseCount, onChat, unreadCount = 0 }: AgentCardProps) {
   const cfg = hasSse ? (STATUS_CONFIG[s.status] || DEFAULT_STATUS) : DEFAULT_STATUS;
   // #260: per-node settings panel (UI-only stub). Local open state — the
   // panel itself is presentational and issues no backend calls.
@@ -65,7 +69,17 @@ export function AgentCard({ session: s, hasSse, sseCount, onChat }: AgentCardPro
           tightens on narrow viewports. */}
       <div className="flex items-center justify-between mb-2 sm:mb-3">
         <div className="flex items-center gap-2 min-w-0">
-          <AliasAvatar alias={s.alias} size={22} />
+          <span className="relative inline-flex shrink-0">
+            <AliasAvatar alias={s.alias} size={22} />
+            {unreadCount > 0 && (
+              <span
+                aria-label={`${unreadCount} 条未读`}
+                className="absolute -top-1.5 -right-2 min-w-[16px] h-4 px-1 rounded-full bg-red-500 text-white text-[9px] font-semibold leading-4 text-center ring-2 ring-[#161618]"
+              >
+                {unreadCount > 99 ? '99+' : unreadCount}
+              </span>
+            )}
+          </span>
           <span className="font-semibold text-white truncate text-sm" title={s.alias}>{s.alias}</span>
           <span className={`inline-block w-1.5 h-1.5 rounded-full shrink-0 ${cfg.dot} ${hasSse && s.status === 'working' ? 'animate-pulse' : ''}`} />
         </div>
@@ -182,3 +196,20 @@ export function AgentCard({ session: s, hasSse, sseCount, onChat }: AgentCardPro
     </>
   );
 }
+
+/* Loop R6 (性能主线): SWR revalidation hands each card a NEW session object
+   every poll/SSE mutate even when nothing changed, so all ~190 cards
+   re-rendered on every event. memo + field comparison skips cards whose
+   visible data (and the fields the settings panel reads) are unchanged.
+   onChat is stable (useCallback in useCommandCenter). */
+const CARD_FIELDS = [
+  'alias', 'status', 'agent', 'task', 'progress', 'server', 'updated_at',
+  'node_id', 'network_id', 'model', 'runtime', 'channels', 'session_id',
+] as const;
+
+export const AgentCard = memo(AgentCardInner, (prev, next) => {
+  if (prev.hasSse !== next.hasSse || prev.sseCount !== next.sseCount || prev.onChat !== next.onChat || prev.unreadCount !== next.unreadCount) return false;
+  const a = prev.session as unknown as Record<string, unknown>, b = next.session as unknown as Record<string, unknown>;
+  for (const k of CARD_FIELDS) if (a[k] !== b[k]) return false;
+  return true;
+});

package/app/components/CommandCenter.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
+import { useChatUnread } from '../lib/chat-unread';
 import { TaskChatPanel } from './TaskChatPanel';
 
 interface CommandCenterProps {
@@ -18,6 +19,7 @@ interface CommandCenterProps {
  * Wraps TaskChatPanel with a tab bar for switching between agents.
  */
 export function CommandCenter({ tabs, activeTab, onOpenTab, onCloseTab, onSetActive, onClose }: CommandCenterProps) {
+  const { unreadCount } = useChatUnread();
   if (tabs.length === 0) return null;
 
   return (
@@ -42,6 +44,13 @@ export function CommandCenter({ tabs, activeTab, onOpenTab, onCloseTab, onSetAct
               >
                 <div className={`w-2 h-2 rounded-full ${activeTab === alias ? 'bg-cyan-400' : 'bg-gray-600'}`} />
                 <span className="max-w-[80px] truncate">{alias}</span>
+                {/* R8: WeChat unread badge on BACKGROUND tabs (the active
+                    tab is being read — no badge). */}
+                {activeTab !== alias && unreadCount(alias) > 0 && (
+                  <span className="min-w-[15px] h-[15px] px-1 rounded-full bg-red-500 text-white text-[9px] font-semibold leading-[15px] text-center">
+                    {unreadCount(alias) > 99 ? '99+' : unreadCount(alias)}
+                  </span>
+                )}
                 {/* R21 of #190 mobile a11y: nested close had no aria-label
                     (screen-readers spoke just "button") and an ~8 px
                     tap target (p-0.5 + text "×"). Both fixed; nested
@@ -104,10 +113,12 @@ export function useCommandCenter() {
   const [tabs, setTabs] = useState<string[]>([]);
   const [activeTab, setActiveTab] = useState('');
 
-  const openTab = (alias: string) => {
+  // Loop R6: stable identities so memo'd consumers (AgentCard) don't
+  // re-render just because the Overview re-rendered.
+  const openTab = useCallback((alias: string) => {
     setTabs(prev => prev.includes(alias) ? prev : [...prev, alias]);
     setActiveTab(alias);
-  };
+  }, []);
 
   const closeTab = (alias: string) => {
     setTabs(prev => {

package/app/components/MobileNav.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import Link from 'next/link';
+import { useChatUnread, badgeLabel } from '../lib/chat-unread';
 import { usePathname } from 'next/navigation';
 
 // #209 R25 (Vincent msg 529 "command 留着干嘛" / 530 "Agents 放到最前面？"
@@ -25,6 +26,9 @@ const MOBILE_NAV_ITEMS = [
 
 export function MobileNav() {
   const pathname = usePathname();
+  // R8: WeChat-style total unread on the Agents tab (a glance answers
+  // "有没有人找我" from anywhere in the app).
+  const { totalUnread } = useChatUnread();
   // Match Sidebar.tsx isActive — /settings must be exact-match because
   // Settings subpages (/settings/tokens, /settings/networks) have their
   // own headers; startsWith would keep the bottom-nav highlighted there
@@ -52,9 +56,16 @@ export function MobileNav() {
                   : 'text-gray-500 active:bg-[#232327] active:text-gray-200'
               }`}
             >
-              <svg className="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.6}>
-                <path strokeLinecap="round" strokeLinejoin="round" d={item.icon} />
-              </svg>
+              <span className="relative inline-flex">
+                <svg className="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.6}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d={item.icon} />
+                </svg>
+                {item.href === '/nodes' && totalUnread > 0 && (
+                  <span className="absolute -top-1 -right-2.5 min-w-[15px] h-[15px] px-1 rounded-full bg-red-500 text-white text-[9px] font-semibold leading-[15px] text-center">
+                    {badgeLabel(totalUnread)}
+                  </span>
+                )}
+              </span>
               <span className="max-w-full truncate">{item.label}</span>
             </Link>
           );

package/app/components/TaskChatPanel.tsx

@@ -28,22 +28,6 @@ type ChatEvent =
    older with the year. Exact per-message time survives in the bubble's
    title tooltip. */
 const TIME_GROUP_GAP_MS = 5 * 60 * 1000;
-const WEEKDAYS = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
-
-function formatWeChatTime(value: string): string {
-  const t = eventTime(value);
-  if (!t) return '';
-  const d = new Date(t);
-  const now = new Date();
-  const hm = `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
-  const startOfDay = (x: Date) => new Date(x.getFullYear(), x.getMonth(), x.getDate()).getTime();
-  const dayDiff = Math.round((startOfDay(now) - startOfDay(d)) / 86400000);
-  if (dayDiff === 0) return hm;
-  if (dayDiff === 1) return `昨天 ${hm}`;
-  if (dayDiff > 1 && dayDiff < 7) return `${WEEKDAYS[d.getDay()]} ${hm}`;
-  if (d.getFullYear() === now.getFullYear()) return `${d.getMonth() + 1}月${d.getDate()}日 ${hm}`;
-  return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日 ${hm}`;
-}
 
 function eventTime(value?: string) {
   if (!value) return 0;
@@ -163,6 +147,7 @@ import remarkGfm from 'remark-gfm';
 import { useSSE } from '../lib/useSSE';
 import { useNetworkId } from '../lib/network-context';
 import { markChatRead } from '../lib/chat-unread';
+import { formatWeChatTime } from '../lib/time';
 
 function MarkdownContent({ text }: { text: string }) {
   if (!text) return <span className="text-[var(--fg-dim)] italic">No content</span>;
@@ -460,25 +445,61 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
   // them and patch the matching bubble immediately. No polling needed for
   // the normal path. The polling block below remains as a safety-net for
   // SSE-unavailable environments / disconnect windows.
+  // Loop R5 (实时收消息): the subscription used to be gated on
+  // pollingIds>0 — an IDLE panel was deaf, so messages sent to this alias
+  // by OTHERS (or replies to tasks sent before mount) only appeared on
+  // reopen. R1's shared channel makes an always-on subscription free (no
+  // extra connection), so:
+  //   · new_reply for OUR in-flight sends keeps the fast targeted patch;
+  //   · any other new_task/new_message/new_reply soft-refreshes the
+  //     window (debounced 1.5s trailing; runFetch merge-by-id keeps
+  //     optimistic bubbles, so a refresh never drops an in-flight send).
+  const refreshTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => () => { if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current); }, []);
   useSSE({
     url: '/api/hub/events',
-    enabled: pollingIds.size > 0,
+    enabled: true,
     onEvent: async (e: { type?: string; in_reply_to?: string; message_id?: string }) => {
-      if (e?.type !== 'new_reply' || !e.in_reply_to) return;
-      // Refetch the task to get the full reply text + final status.
-      try {
-        const res = await fetch(`/api/hub/tasks?task_id=${encodeURIComponent(e.in_reply_to)}`);
-        const data = await res.json();
-        const updated = data?.tasks?.[0];
-        if (!updated) return;
-        setMessages(prev => prev.map(m => m.task_id === e.in_reply_to ? { ...m, ...updated } : m));
-        if (['replied', 'failed', 'closed', 'expired', 'cancelled'].includes(updated.status)) {
-          setPollingIds(prev => { const n = new Set(prev); n.delete(e.in_reply_to!); return n; });
-        }
-      } catch {}
+      const t = e?.type || '';
+      if (t === 'new_reply' && e.in_reply_to && pollingIds.has(e.in_reply_to)) {
+        // Fast path: a reply to a task WE sent from this panel.
+        try {
+          const res = await fetch(`/api/hub/tasks?task_id=${encodeURIComponent(e.in_reply_to)}`);
+          const data = await res.json();
+          const updated = data?.tasks?.[0];
+          if (!updated) return;
+          setMessages(prev => prev.map(m => m.task_id === e.in_reply_to ? { ...m, ...updated } : m));
+          if (['replied', 'failed', 'closed', 'expired', 'cancelled'].includes(updated.status)) {
+            setPollingIds(prev => { const n = new Set(prev); n.delete(e.in_reply_to!); return n; });
+          }
+        } catch {}
+        return; // handled — don't ALSO soft-refresh for the same event
+      }
+      if (!['new_task', 'new_message', 'new_reply', 'broadcast'].includes(t)) return;
+      if (!historyLoaded) return; // initial load owns the first paint
+      if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+      refreshTimerRef.current = setTimeout(() => {
+        runFetch(histLimitRef.current, 12_000);
+      }, 1500);
     },
   });
 
+  // Loop R5b (honest finding): the hub only pushes events on the
+  // sender's/recipient's OWN channels — a dashboard observer's channel gets
+  // NOTHING for third-party traffic (verified: 12s capture during an
+  // api→node send = only "connected"). Until the hub grows an observer
+  // stream (ask filed), an OPEN panel soft-refreshes every 15s — paused
+  // while the tab is hidden — so incoming messages appear without a
+  // reopen. runFetch's merge-by-id keeps optimistic bubbles intact.
+  useEffect(() => {
+    if (!historyLoaded) return;
+    const id = setInterval(() => {
+      if (document.visibilityState === 'hidden') return;
+      runFetch(histLimitRef.current, 12_000);
+    }, 15_000);
+    return () => clearInterval(id);
+  }, [historyLoaded, runFetch]);
+
   // Polling fallback (SSE-unavailable / proxies stripping events).
   // Slow cadence so we're not the bulk of server load — SSE handles the fast path.
   useEffect(() => {
@@ -580,6 +601,21 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
           m.task_id === localTaskId ? { ...m, content: taskContent } : m,
         ));
       }
+      await postTask(taskContent, sendTo, localTaskId, uploaded);
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : String(e);
+      setMessages(prev => prev.map(m =>
+        m.task_id === localTaskId ? { ...m, status: 'failed', result: `❌ network error: ${msg}` } : m,
+      ));
+    }
+    setSending(false);
+    textareaRef.current?.focus();
+  };
+
+  // Core POST shared by send() and the failed-bubble retry (R4: WeChat-style
+  // resend — a failed message shouldn't force the user to retype it).
+  const postTask = async (taskContent: string, sendTo: string, localTaskId: string, uploaded: { path: string; url: string }[] = []) => {
+    try {
       const res = await fetch('/api/hub/send', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -607,8 +643,25 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
         m.task_id === localTaskId ? { ...m, status: 'failed', result: `❌ network error: ${msg}` } : m,
       ));
     }
-    setSending(false);
-    textareaRef.current?.focus();
+  };
+
+  // R4: tap-to-retry a failed send — reset the SAME bubble to in-flight and
+  // re-POST with identical content/target; no retyping (WeChat red-! flow).
+  const retryLockRef = useRef<Set<string>>(new Set());
+  const retrySend = async (m: ChatTask) => {
+    // R5 (R4 self-review debt): double-click guard — a second tap while the
+    // retry POST is in flight must not fire a duplicate send.
+    if (retryLockRef.current.has(m.task_id)) return;
+    retryLockRef.current.add(m.task_id);
+    const cleanContent = m.content;
+    setMessages(prev => prev.map(x =>
+      x.task_id === m.task_id ? { ...x, status: 'created', result: '' } : x,
+    ));
+    try {
+      await postTask(cleanContent, m.to_name, m.task_id);
+    } finally {
+      retryLockRef.current.delete(m.task_id);
+    }
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
@@ -750,7 +803,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
             const showSep = !prevAt || eventTime(event.at) - eventTime(prevAt) > TIME_GROUP_GAP_MS;
             const sepEl = showSep ? (
               <div className="flex justify-center py-1.5">
-                <span className="text-[10px] text-[var(--fg-dim)] bg-black/10 rounded px-2 py-0.5">{formatWeChatTime(event.at)}</span>
+                <span className="text-[10px] text-[var(--fg-dim)] bg-[var(--bg-elevated)] rounded px-2 py-0.5">{formatWeChatTime(event.at)}</span>
               </div>
             ) : null;
             // Distinguish task source so users can tell when a peer agent
@@ -807,7 +860,24 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
                   </div>
                   <div className="flex flex-wrap items-center justify-between mt-1.5 gap-2 sm:gap-3">
                     <StatusBar status={m.status} />
-                    {senderBadge && <div className="flex items-center gap-2 shrink-0">{senderBadge}</div>}
+                    <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
+                          on failure (same bubble, no retyping). */}
+                      {m.task_id.startsWith('tmp-') && m.status !== 'failed' && (
+                        <span aria-label="发送中" className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-cyan-500/30 border-t-cyan-400" />
+                      )}
+                      {m.status === 'failed' && fromUser && (
+                        <button
+                          type="button"
+                          onClick={() => retrySend(m)}
+                          className="inline-flex items-center gap-1 rounded-md border border-red-500/40 bg-red-500/10 px-1.5 py-0.5 text-[10px] font-medium text-red-300 hover:bg-red-500/20"
+                        >
+                          <span aria-hidden>↻</span> 重发
+                        </button>
+                      )}
+                      {senderBadge}
+                    </div>
                   </div>
                 </div>
               </div>

package/app/lib/chat-unread.ts

@@ -9,17 +9,14 @@ const UNREAD_EVENT = 'anet-chat-read-updated';
 
 interface ChatMessage {
   from_alias?: string | null;
+  to_alias?: string | null;
   created_at?: string | null;
 }
 
-interface ChatTask {
-  to_name?: string | null;
-  status?: string | null;
-  result?: string | null;
-  created_at?: string | null;
-  completed_at?: string | null;
-  delivered_at?: string | null;
-}
+/** Senders/recipients that mean "the dashboard user" in hub data. The chat
+ *  panel uses the same set to decide which bubbles are "You". */
+const USERISH = new Set(['', 'dashboard', 'admin', 'api', 'hub']);
+const isUserish = (v?: string | null) => USERISH.has((v || '').trim().toLowerCase());
 
 interface ReadMap {
   [alias: string]: string;
@@ -37,13 +34,32 @@ function parseHubTime(value?: string | null): number {
   return Number.isFinite(ts) ? ts : 0;
 }
 
+// Loop R8 (Vincent: 未读数字角标): last-read moved sessionStorage →
+// localStorage so read state survives refresh/new tabs/restart (微信预期).
+// One-time migration pulls any old session value forward.
+const BASELINE_KEY = '__baseline';
+
 function readStoredMap(networkId: string): ReadMap {
   if (typeof window === 'undefined') return {};
   try {
-    const raw = window.sessionStorage.getItem(storageKey(networkId));
-    if (!raw) return {};
-    const parsed = JSON.parse(raw);
-    return parsed && typeof parsed === 'object' ? parsed : {};
+    let raw = window.localStorage.getItem(storageKey(networkId));
+    if (!raw) {
+      raw = window.sessionStorage.getItem(storageKey(networkId));
+      if (raw) window.localStorage.setItem(storageKey(networkId), raw);
+    }
+    const parsed = raw ? JSON.parse(raw) : {};
+    const map: ReadMap = parsed && typeof parsed === 'object' ? parsed : {};
+    // R8 first-visit floor, written SYNCHRONOUSLY on first read: an async
+    // (useEffect) baseline lost the race against the first SWR render and
+    // let a badge storm flash — and stick, since nothing re-triggered the
+    // count. Ensuring it here means no compute can ever see a missing
+    // baseline. No event dispatch: every hook instance does the same
+    // idempotent write.
+    if (!map[BASELINE_KEY]) {
+      map[BASELINE_KEY] = new Date().toISOString();
+      window.localStorage.setItem(storageKey(networkId), JSON.stringify(map));
+    }
+    return map;
   } catch {
     return {};
   }
@@ -52,7 +68,7 @@ function readStoredMap(networkId: string): ReadMap {
 function writeStoredMap(networkId: string, next: ReadMap) {
   if (typeof window === 'undefined') return;
   try {
-    window.sessionStorage.setItem(storageKey(networkId), JSON.stringify(next));
+    window.localStorage.setItem(storageKey(networkId), JSON.stringify(next));
     window.dispatchEvent(new CustomEvent(UNREAD_EVENT, { detail: { networkId } }));
   } catch {}
 }
@@ -83,16 +99,15 @@ export function markChatRead(alias: string, networkId: string) {
 
 export function useChatUnread() {
   const { networkId } = useNetworkId();
+  // Messages are the ONLY count source: the hub mirrors every task reply as
+  // a message to the originator (verified live: replied task + same-second
+  // message, both present), so counting tasks too double-counted every
+  // reply (E2E showed 4 where 2 was right).
   const { data: messagesData } = useSWR<{ messages?: ChatMessage[] }>(
     withNetwork('/api/hub/messages?limit=200', networkId),
     fetcher,
     { refreshInterval: 5000, dedupingInterval: 3000 },
   );
-  const { data: tasksData } = useSWR<{ tasks?: ChatTask[] }>(
-    withNetwork('/api/hub/tasks?limit=200', networkId),
-    fetcher,
-    { refreshInterval: 5000, dedupingInterval: 3000 },
-  );
   const [readVersion, setReadVersion] = useState(0);
 
   useEffect(() => {
@@ -119,40 +134,54 @@ export function useChatUnread() {
   }, [networkId, readVersion]);
 
   const unreadMap = useMemo(() => {
-    const latestByAlias = new Map<string, number>();
+    // R8: count EVERY unread item per alias (Vincent: "有几条消息显示数字"),
+    // not just a latest-activity boolean. A message from the alias counts;
+    // a task's REPLY counts once when it lands after last-read. Self-sent
+    // items never count (they're keyed by the counterpart alias).
+    const counts = new Map<string, number>();
+    const baseline = parseHubTime(readMap[BASELINE_KEY]);
+    const bump = (alias: string, at: number) => {
+      const readAt = Math.max(parseHubTime(readMap[alias]), baseline);
+      if (at > readAt) counts.set(alias, (counts.get(alias) || 0) + 1);
+    };
+    // Scope: only the USER'S conversation — a badge on X means "X has
+    // something FOR YOU". Fleet chatter (X's messages to other agents)
+    // must NOT inflate it.
     for (const message of messagesData?.messages || []) {
       const alias = message.from_alias?.trim();
-      if (!alias) continue;
+      if (!alias || isUserish(alias)) continue;          // own sends never count
+      if (!isUserish(message.to_alias)) continue;        // must be addressed to the user
       const at = parseHubTime(message.created_at);
-      if (!at) continue;
-      latestByAlias.set(alias, Math.max(latestByAlias.get(alias) || 0, at));
+      if (at) bump(alias, at);
     }
-    for (const task of tasksData?.tasks || []) {
-      const alias = task.to_name?.trim();
-      if (!alias) continue;
-      const hasReply = Boolean(task.result) || ['replied', 'failed', 'closed', 'expired', 'cancelled'].includes(task.status || '');
-      if (!hasReply) continue;
-      const at = parseHubTime(task.completed_at) || parseHubTime(task.delivered_at) || parseHubTime(task.created_at);
-      if (!at) continue;
-      latestByAlias.set(alias, Math.max(latestByAlias.get(alias) || 0, at));
-    }
-
-    const next = new Map<string, boolean>();
-    for (const [alias, latestAt] of latestByAlias) {
-      const readAt = parseHubTime(readMap[alias]);
-      if (latestAt > readAt) next.set(alias, true);
-    }
-    return next;
-  }, [messagesData, readMap, tasksData]);
+    return counts;
+  }, [messagesData, readMap]);
 
   const hasUnread = useCallback((alias?: string | null) => {
     if (!alias) return false;
-    return unreadMap.get(alias) === true;
+    return (unreadMap.get(alias) || 0) > 0;
+  }, [unreadMap]);
+
+  const unreadCount = useCallback((alias?: string | null) => {
+    if (!alias) return 0;
+    return unreadMap.get(alias) || 0;
+  }, [unreadMap]);
+
+  const totalUnread = useMemo(() => {
+    let t = 0;
+    for (const n of unreadMap.values()) t += n;
+    return t;
   }, [unreadMap]);
 
   const clearUnread = useCallback((alias: string) => {
     markChatRead(alias, networkId);
   }, [networkId]);
 
-  return { unreadMap, hasUnread, clearUnread };
+  return { unreadMap, hasUnread, unreadCount, totalUnread, clearUnread };
+}
+
+/** WeChat badge label: 1-99 as-is, above → "99+"; 0/negative → '' (hide). */
+export function badgeLabel(n: number): string {
+  if (n <= 0) return '';
+  return n > 99 ? '99+' : String(n);
 }

package/app/lib/time.ts

@@ -34,3 +34,30 @@ export function relativeAgo(dateStr: string | null | undefined): string | null {
   if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
   return `${Math.floor(s / 86400)}d ago`;
 }
+
+/** Loop R7 (跨面一致性): WeChat-style contextual timestamp shared by the
+ *  chat panel (R3) and /messages dividers. zh locales keep the native
+ *  wording (昨天/星期X); others get Intl output ("Yesterday"/"Tue").
+ *  Today → "14:32" · yesterday → "昨天 14:32" · <7d → "星期二 14:32" ·
+ *  this year → "7月16日 14:32" · older adds the year. */
+export function formatWeChatTime(value: string | null | undefined): string {
+  const t = parseHubTime(value);
+  if (t === null) return '';
+  const d = new Date(t);
+  const now = new Date();
+  const zh = typeof navigator !== 'undefined' && (navigator.language || '').toLowerCase().startsWith('zh');
+  const hm = `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
+  const startOfDay = (x: Date) => new Date(x.getFullYear(), x.getMonth(), x.getDate()).getTime();
+  const dayDiff = Math.round((startOfDay(now) - startOfDay(d)) / 86400000);
+  if (dayDiff === 0) return hm;
+  if (dayDiff === 1) return zh ? `昨天 ${hm}` : `Yesterday ${hm}`;
+  if (dayDiff > 1 && dayDiff < 7) {
+    const wd = new Intl.DateTimeFormat(zh ? 'zh-CN' : undefined, { weekday: zh ? 'long' : 'short' }).format(d);
+    return `${wd} ${hm}`;
+  }
+  const md = new Intl.DateTimeFormat(zh ? 'zh-CN' : undefined, {
+    month: zh ? 'long' : 'short', day: 'numeric',
+    ...(d.getFullYear() !== now.getFullYear() ? { year: 'numeric' } : {}),
+  }).format(d);
+  return `${md} ${hm}`;
+}

package/app/messages/page.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useMessages } from '../lib/hooks';
 import { timeAgo, previewContent } from '../components/utils';
+import { formatWeChatTime } from '../lib/time';
 import { EmptyState } from '../components/EmptyState';
 import { AliasAvatar } from '../components/AliasAvatar';
 import { useCollapsibleSearch } from '../components/CollapsibleSearch';
@@ -30,10 +31,11 @@ function normalizeDate(value?: string) {
   return new Date(value.replace(' ', 'T') + 'Z').getTime();
 }
 
+// Loop R7: divider label now shares the chat panel's WeChat-style
+// contextual formatter (was a raw toLocaleString() dump) — one time
+// language across every conversation surface.
 function formatDividerLabel(value?: string) {
-  if (!value) return 'Time gap';
-  const date = new Date(value.replace(' ', 'T') + 'Z');
-  return date.toLocaleString();
+  return formatWeChatTime(value) || 'Time gap';
 }
 
 function bubbleVariant(message: MessageItem) {

package/app/nodes/page.tsx

@@ -29,7 +29,7 @@ export default function NodesPage() {
   const { sessions, isLoading: loading } = useSessions();
   const { health } = useHealth();
   const { lifecycleByAlias, nodeIdByAlias } = useNodeLifecycle();
-  const { hasUnread } = useChatUnread();
+  const { hasUnread, unreadCount } = useChatUnread();
   const { mutate } = useSWRConfig();
   // RFC-027 PR2 — after a stop/delete/restart dispatch lands, refresh
   // /api/hub/nodes (lifecycle_state) AND /api/hub/status (sessions).
@@ -210,7 +210,14 @@ export default function NodesPage() {
                 )}
                 <div className="flex items-start gap-3">
                   <div className="relative shrink-0">
-                    <AliasAvatar alias={s.alias} size={36} />
+                    <span className="relative inline-flex shrink-0">
+                      <AliasAvatar alias={s.alias} size={36} />
+                      {unreadCount(s.alias) > 0 && (
+                        <span aria-label={`${unreadCount(s.alias)} 条未读`} className="absolute -top-1 -right-1.5 min-w-[16px] h-4 px-1 rounded-full bg-red-500 text-white text-[9px] font-semibold leading-4 text-center ring-2 ring-[#161618]">
+                          {unreadCount(s.alias) > 99 ? '99+' : unreadCount(s.alias)}
+                        </span>
+                      )}
+                    </span>
                     {unread && <span className="absolute -right-1 -top-1 h-3 w-3 rounded-full border-2 border-[#161618] bg-red-500" />}
                   </div>
                   <div className="min-w-0 flex-1">
@@ -292,7 +299,14 @@ export default function NodesPage() {
                   <div className="col-span-2 min-w-0">
                     <div className="flex items-center gap-2 min-w-0">
                       <div className="relative shrink-0">
-                        <AliasAvatar alias={s.alias} size={20} />
+                        <span className="relative inline-flex shrink-0">
+                          <AliasAvatar alias={s.alias} size={20} />
+                          {unreadCount(s.alias) > 0 && (
+                            <span aria-label={`${unreadCount(s.alias)} 条未读`} className="absolute -top-1.5 -right-2 min-w-[15px] h-[15px] px-1 rounded-full bg-red-500 text-white text-[9px] font-semibold leading-[15px] text-center">
+                              {unreadCount(s.alias) > 99 ? '99+' : unreadCount(s.alias)}
+                            </span>
+                          )}
+                        </span>
                         {unread && <span className="absolute -right-1 -top-1 h-2.5 w-2.5 rounded-full border border-[#161618] bg-red-500" />}
                       </div>
                       <span className="truncate text-sm font-medium text-white">{s.alias}</span>

package/app/page.tsx

@@ -9,6 +9,7 @@ import { LoadingSkeleton } from './components/LoadingSkeleton';
 import { NodesEmptyState as EmptyState } from './components/EmptyState';
 import { CommandCenter, useCommandCenter } from './components/CommandCenter';
 import { useSessions, useHealth, useTasks, useStats } from './lib/hooks';
+import { useChatUnread } from './lib/chat-unread';
 import { useSSE } from './lib/useSSE';
 import { useSWRConfig } from 'swr';
 
@@ -28,6 +29,8 @@ export default function Dashboard() {
   const { stats } = useStats();
   const [showTopo, setShowTopo] = useState(typeof window !== 'undefined' && window.innerWidth >= 1024);
   const cmd = useCommandCenter();
+  // R8: one page-level unread computation; counts flow to memo'd cards as props.
+  const { unreadCount } = useChatUnread();
   const [agentFilter, setAgentFilter] = useState<'all' | 'working' | 'idle' | 'offline'>('all');
   // #84: last node.renamed event — passed to TopoGraph so an open chat
   // popover follows the rename instead of pointing at a dead alias. `ts`
@@ -232,7 +235,7 @@ export default function Dashboard() {
                 xl breakpoint auto-inherits lg=3 cols; 2xl bumps to 4. */}
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-3 sm:gap-4">
               {filtered.map(s => (
-                <AgentCard key={s.alias} session={s} hasSse={isOnline(s)} sseCount={sseLookup(s) || 0} onChat={cmd.openTab} />
+                <AgentCard key={s.alias} session={s} hasSse={isOnline(s)} sseCount={sseLookup(s) || 0} onChat={cmd.openTab} unreadCount={unreadCount(s.alias)} />
               ))}
             </div>
             {filtered.length === 0 && (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sleep2agi/agent-network-dashboard",
-  "version": "0.6.3-preview.13",
+  "version": "0.6.3-preview.15",
   "description": "Agent Network Dashboard — Web UI for managing AI Agent networks",
   "main": "apps/desktop/electron/main.cjs",
   "scripts": {