@sleep2agi/agent-network-dashboard 0.6.3-preview.14 → 0.6.3-preview.16

package/app/components/AgentCard.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link';
 import { Session } from './types';
 import { timeAgo } from './utils';
 import { AliasAvatar } from './AliasAvatar';
+import { useHasDraft } from '../lib/chat-drafts';
 import { NodeSettingsPanel } from './NodeSettingsPanel';
 
 interface AgentCardProps {
@@ -12,6 +13,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 +28,11 @@ 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: '' };
 
-function AgentCardInner({ session: s, hasSse, sseCount, onChat }: AgentCardProps) {
+function AgentCardInner({ session: s, hasSse, sseCount, onChat, unreadCount = 0 }: AgentCardProps) {
+  // R10 微信草稿闭环: list surfaces show which conversation has an unsent
+  // draft. Internal subscription (useSyncExternalStore) so the memo
+  // comparator stays untouched — a draft change re-renders only this card.
+  const hasDraft = useHasDraft(s.alias);
   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,8 +74,19 @@ function AgentCardInner({ session: s, hasSse, sseCount, onChat }: AgentCardProps
           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>
+          {hasDraft && <span className="shrink-0 text-[9px] text-red-400/90" aria-label="有未发送草稿">[草稿]</span>}
           <span className={`inline-block w-1.5 h-1.5 rounded-full shrink-0 ${cfg.dot} ${hasSse && s.status === 'working' ? 'animate-pulse' : ''}`} />
         </div>
         <div className="flex items-center gap-1 shrink-0">
@@ -194,7 +214,7 @@ const CARD_FIELDS = [
 ] as const;
 
 export const AgentCard = memo(AgentCardInner, (prev, next) => {
-  if (prev.hasSse !== next.hasSse || prev.sseCount !== next.sseCount || prev.onChat !== next.onChat) return false;
+  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,8 @@
 'use client';
 
 import { useState, useCallback } from 'react';
+import { useChatUnread } from '../lib/chat-unread';
+import { useHasDraft } from '../lib/chat-drafts';
 import { TaskChatPanel } from './TaskChatPanel';
 
 interface CommandCenterProps {
@@ -18,6 +20,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 +45,14 @@ 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 && <TabDraftMark alias={alias} />}
+                {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
@@ -72,7 +83,7 @@ export function CommandCenter({ tabs, activeTab, onOpenTab, onCloseTab, onSetAct
         <div className="flex-1 relative overflow-hidden">
           {tabs.map(alias => (
             <div key={alias} className={`absolute inset-0 ${activeTab === alias ? 'block' : 'hidden'}`}>
-              <InlineChat alias={alias} />
+              <InlineChat alias={alias} active={activeTab === alias} />
             </div>
           ))}
         </div>
@@ -91,10 +102,18 @@ export function CommandCenter({ tabs, activeTab, onOpenTab, onCloseTab, onSetAct
   );
 }
 
+/** R10: "[草稿]" mark on background tabs — per-alias hook needs its own
+ *  component (hooks can't run inside the tabs.map callback). */
+function TabDraftMark({ alias }: { alias: string }) {
+  const hasDraft = useHasDraft(alias);
+  if (!hasDraft) return null;
+  return <span className="text-[9px] text-red-400/90 shrink-0">[草稿]</span>;
+}
+
 /** Inline chat without the panel chrome (used inside CommandCenter tabs) */
-function InlineChat({ alias }: { alias: string }) {
+function InlineChat({ alias, active }: { alias: string; active: boolean }) {
   // Reuse TaskChatPanel's logic but render without the outer frame
-  return <TaskChatPanel alias={alias} onClose={() => {}} inline />;
+  return <TaskChatPanel alias={alias} onClose={() => {}} inline active={active} />;
 }
 
 /**

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

@@ -29,30 +29,6 @@ type ChatEvent =
    title tooltip. */
 const TIME_GROUP_GAP_MS = 5 * 60 * 1000;
 
-// R4 polish: locale-aware (R3 hardcoded Chinese weekdays — English users saw
-// 星期二). zh keeps the native WeChat wording; other locales get Intl output.
-function formatWeChatTime(value: string): string {
-  const t = eventTime(value);
-  if (!t) 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}`;
-}
-
 function eventTime(value?: string) {
   if (!value) return 0;
   return new Date(value.replace(' ', 'T') + (value.includes('T') ? '' : 'Z')).getTime() || 0;
@@ -171,6 +147,8 @@ import remarkGfm from 'remark-gfm';
 import { useSSE } from '../lib/useSSE';
 import { useNetworkId } from '../lib/network-context';
 import { markChatRead } from '../lib/chat-unread';
+import { readDraft, writeDraft } from '../lib/chat-drafts';
+import { formatWeChatTime } from '../lib/time';
 
 function MarkdownContent({ text }: { text: string }) {
   if (!text) return <span className="text-[var(--fg-dim)] italic">No content</span>;
@@ -229,6 +207,10 @@ interface TaskChatPanelProps {
   inline?: boolean;
   /** Available nodes for @ mention */
   availableNodes?: string[];
+  /** Loop R11: false for background CommandCenter tabs — pauses the 15s
+   *  soft-refresh AND the SSE-event soft-refresh (in-flight send patches
+   *  stay live). Reactivation runs one immediate catch-up. Default true. */
+  active?: boolean;
 }
 
 /** P0 chat batch (Vincent: 长消息=无排版文字墙): message bodies taller than
@@ -279,7 +261,8 @@ function CollapsibleText({ children }: { children: React.ReactNode }) {
   );
 }
 
-export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskChatPanelProps) {
+export function TaskChatPanel({ alias, onClose, inline, availableNodes, active }: TaskChatPanelProps) {
+  const isActive = active !== false;
   const { networkId } = useNetworkId();
   const [messages, setMessages] = useState<ChatTask[]>([]);
   const [input, setInput] = useState('');
@@ -312,6 +295,16 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
   const anchoredRef = useRef(false);
   const [hasOlder, setHasOlder] = useState(true);
   const [loadingOlder, setLoadingOlder] = useState(false);
+  // Loop R10 (微信式"下方有新消息"): while the user is scrolled up reading
+  // history, incoming messages must NOT yank the view to the bottom —
+  // they accumulate in a floating pill instead. atBottomRef mirrors the
+  // user's last real scroll position (checking the DOM after an append
+  // would always look "not at bottom" because the new content itself
+  // grew the distance).
+  const [newBelow, setNewBelow] = useState(0);
+  const atBottomRef = useRef(true);
+  const prevBubblesRef = useRef(0);
+  const forceScrollRef = useRef(false);
 
   // Load available nodes for @ mention
   // alias → network_id map for send scoping (P0 network_id fix): the
@@ -332,6 +325,29 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
   // Reset target when alias changes
   useEffect(() => { setTargetAlias(alias); }, [alias]);
 
+  // Loop R9 (微信草稿): unsent text survives closing the panel, switching
+  // conversations and refreshing, per conversation. Text only — File
+  // attachments can't be serialized. The debounced write covers "typing,
+  // then refresh"; the effect cleanup covers "typing, then close within
+  // the debounce window" (the timer dies with the unmount, so the tail
+  // would otherwise be lost). Empty input deletes the draft, so sending
+  // or clearing the box leaves no stale draft behind.
+  const inputRef = useRef(input);
+  inputRef.current = input;
+  useEffect(() => {
+    if (!alias) return;
+    const draft = readDraft(alias);
+    if (draft) {
+      setInput(draft);
+      requestAnimationFrame(() => { if (textareaRef.current) autoResize(textareaRef.current); });
+    }
+    return () => { writeDraft(alias, inputRef.current); };
+  }, [alias]);
+  useEffect(() => {
+    const timer = setTimeout(() => writeDraft(alias, input), 300);
+    return () => clearTimeout(timer);
+  }, [input, alias]);
+
   useEffect(() => {
     if (!alias) return;
     markChatRead(alias, networkId);
@@ -410,6 +426,9 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
     histLimitRef.current = HISTORY_PAGE;
     anchoredRef.current = false;
     firstAnchorRef.current = true;
+    atBottomRef.current = true;
+    prevBubblesRef.current = 0;
+    setNewBelow(0);
     setHasOlder(true);
     loadInitial();
     // Focus textarea
@@ -435,12 +454,15 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
   const onMessagesScroll = useCallback(() => {
     const el = scrollRef.current;
     if (!el) return;
+    const dist = el.scrollHeight - el.scrollTop - el.clientHeight;
+    atBottomRef.current = dist < 80;
+    if (atBottomRef.current) setNewBelow(0);
     // The initial bottom-anchor is a smooth scroll, so its own scroll
     // events pass through scrollTop≈0 territory. Arm the older-page
     // trigger only after the container has actually reached the bottom
     // once — everything before that is layout/auto-scroll noise.
     if (!anchoredRef.current) {
-      if (el.scrollHeight - el.scrollTop - el.clientHeight < 80) anchoredRef.current = true;
+      if (dist < 80) anchoredRef.current = true;
       return;
     }
     if (el.scrollTop < 40) loadOlder();
@@ -454,12 +476,24 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
   // loaded at once". Subsequent new-message anchors stay smooth.
   const firstAnchorRef = useRef(true);
   useEffect(() => {
+    const bubbles = messages.reduce((n, m) => n + (m.result ? 2 : 1), 0);
+    const prevBubbles = prevBubblesRef.current;
+    prevBubblesRef.current = bubbles;
     if (skipAutoScrollRef.current) {
       skipAutoScrollRef.current = false;
       return;
     }
+    if (messages.length === 0) return;
+    // R10: scrolled-up readers keep their place — count the arrivals
+    // into the pill instead of yanking to the bottom. Own sends
+    // (forceScrollRef) and the first anchor always jump.
+    if (!firstAnchorRef.current && !forceScrollRef.current && !atBottomRef.current) {
+      if (bubbles > prevBubbles) setNewBelow(n => n + (bubbles - prevBubbles));
+      return;
+    }
     const behavior: ScrollBehavior = firstAnchorRef.current ? 'auto' : 'smooth';
-    if (messages.length > 0) firstAnchorRef.current = false;
+    firstAnchorRef.current = false;
+    forceScrollRef.current = false;
     messagesEndRef.current?.scrollIntoView({ behavior });
   }, [messages]);
 
@@ -478,6 +512,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
   //     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);
+  const lastSoftRefreshRef = useRef(0);
   useEffect(() => () => { if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current); }, []);
   useSSE({
     url: '/api/hub/events',
@@ -500,10 +535,18 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
       }
       if (!['new_task', 'new_message', 'new_reply', 'broadcast'].includes(t)) return;
       if (!historyLoaded) return; // initial load owns the first paint
+      if (!isActive) return;      // R11: background tabs catch up on activation instead
+      // R11: floor between soft refreshes — on a busy fleet (192 agents)
+      // events arrive faster than the 1.5s debounce can coalesce, and the
+      // active panel refetched its window ~25×/min. One event batch every
+      // ≥6s is plenty for a 12-item history window; sends still patch
+      // instantly via the fast path above.
       if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+      const wait = Math.max(1500, 6000 - (Date.now() - lastSoftRefreshRef.current));
       refreshTimerRef.current = setTimeout(() => {
+        lastSoftRefreshRef.current = Date.now();
         runFetch(histLimitRef.current, 12_000);
-      }, 1500);
+      }, wait);
     },
   });
 
@@ -514,14 +557,25 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
   // 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.
+  // R11 (多面板降频): CommandCenter keeps EVERY tab mounted, so N tabs
+  // used to mean N pollers AND N per-SSE-event soft-refreshers — measured
+  // 40 history-window fetches/min with 4 tabs on a busy fleet. Only the
+  // visible tab refreshes now; a tab returning to the foreground does one
+  // immediate catch-up fetch so it never shows stale history.
+  const wasActiveRef = useRef(isActive);
   useEffect(() => {
-    if (!historyLoaded) return;
+    if (!historyLoaded || !isActive) {
+      wasActiveRef.current = isActive;
+      return;
+    }
+    if (!wasActiveRef.current) runFetch(histLimitRef.current, 12_000);
+    wasActiveRef.current = true;
     const id = setInterval(() => {
       if (document.visibilityState === 'hidden') return;
       runFetch(histLimitRef.current, 12_000);
     }, 15_000);
     return () => clearInterval(id);
-  }, [historyLoaded, runFetch]);
+  }, [historyLoaded, isActive, runFetch]);
 
   // Polling fallback (SSE-unavailable / proxies stripping events).
   // Slow cadence so we're not the bulk of server load — SSE handles the fast path.
@@ -584,6 +638,8 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
 
     setSending(true);
     setInput('');
+    writeDraft(alias, '');
+    forceScrollRef.current = true;
     setAttachedFiles([]);
     setShowMentions(false);
     if (textareaRef.current) textareaRef.current.style.height = 'auto';
@@ -922,6 +978,21 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
             );
           })}
           <div ref={messagesEndRef} />
+          {newBelow > 0 && (
+            <div className="sticky bottom-1 z-10 flex justify-center pointer-events-none">
+              <button
+                type="button"
+                onClick={() => {
+                  setNewBelow(0);
+                  atBottomRef.current = true;
+                  messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+                }}
+                className="pointer-events-auto flex items-center gap-1 rounded-full border border-cyan-500/30 bg-[var(--bg-elevated)] px-3 py-1 text-[11px] text-cyan-300 shadow-lg shadow-black/40 hover:bg-cyan-500/10"
+              >
+                ↓ {newBelow} 条新消息
+              </button>
+            </div>
+          )}
         </div>
 
         {/* Input area */}

package/app/lib/chat-drafts.ts

@@ -0,0 +1,46 @@
+'use client';
+
+import { useSyncExternalStore } from 'react';
+
+// Loop R10 (微信草稿闭环): draft storage shared between the chat panel
+// (write/restore) and conversation-list surfaces (the "[草稿]" mark).
+// Same-tab reactivity via a custom event, cross-tab via the storage event.
+export const DRAFT_PREFIX = 'anet_chat_draft_v1:';
+const DRAFT_EVENT = 'anet-chat-draft-updated';
+
+export function readDraft(alias?: string | null): string {
+  if (typeof window === 'undefined' || !alias) return '';
+  try {
+    return window.localStorage.getItem(DRAFT_PREFIX + alias) || '';
+  } catch {
+    return '';
+  }
+}
+
+/** Empty/whitespace text deletes the draft — sending or clearing the box
+ *  leaves no stale key behind. */
+export function writeDraft(alias: string, text: string) {
+  if (typeof window === 'undefined' || !alias) return;
+  try {
+    if (text.trim()) window.localStorage.setItem(DRAFT_PREFIX + alias, text);
+    else window.localStorage.removeItem(DRAFT_PREFIX + alias);
+    window.dispatchEvent(new CustomEvent(DRAFT_EVENT, { detail: { alias } }));
+  } catch {}
+}
+
+function subscribe(callback: () => void) {
+  window.addEventListener(DRAFT_EVENT, callback);
+  window.addEventListener('storage', callback);
+  return () => {
+    window.removeEventListener(DRAFT_EVENT, callback);
+    window.removeEventListener('storage', callback);
+  };
+}
+
+export function useHasDraft(alias?: string | null): boolean {
+  return useSyncExternalStore(
+    subscribe,
+    () => (alias ? Boolean(readDraft(alias)) : false),
+    () => false,
+  );
+}

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}`;
+}