@sleep2agi/agent-network-dashboard 0.6.3-preview.26 → 0.6.3-preview.27

package/app/components/CommandCenter.tsx

@@ -5,6 +5,7 @@ import { useChatUnread } from '../lib/chat-unread';
 import { useHealth } from '../lib/hooks';
 import { useNetworkId } from '../lib/network-context';
 import { useHasDraft } from '../lib/chat-drafts';
+import { isMuted, useMuteVersion } from '../lib/chat-mute';
 import { TaskChatPanel } from './TaskChatPanel';
 import { t } from '../lib/ui-lang';
 
@@ -24,6 +25,8 @@ interface CommandCenterProps {
  */
 export function CommandCenter({ tabs, activeTab, onOpenTab, onCloseTab, onSetActive, onClose }: CommandCenterProps) {
   const { unreadCount } = useChatUnread();
+  const muteVersion = useMuteVersion();
+  void muteVersion;
   // R33: tab dot now shows PRESENCE (green online / gray offline, same SSE
   // definition as everywhere) — the active tab is already marked by the
   // border+text color, so the old active-state dot was redundant.
@@ -62,10 +65,18 @@ export function CommandCenter({ tabs, activeTab, onOpenTab, onCloseTab, onSetAct
               >
                 <div className={`w-2 h-2 rounded-full ${isOnline(alias) ? 'bg-green-400' : 'bg-gray-600'}`} />
                 <span className="max-w-[80px] truncate">{alias}</span>
+                {isMuted(alias) && (
+                  <svg aria-label="已开启免打扰" role="img" className="h-3 w-3 shrink-0 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M9.88 4.12A6 6 0 0118 9v3.6l1.5 2.4H12M6.3 6.3A5.98 5.98 0 006 9v3.6L4.5 15H13M10 19a2 2 0 004 0M3 3l18 18" />
+                  </svg>
+                )}
                 {/* 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 && (
+                {activeTab !== alias && unreadCount(alias) > 0 && isMuted(alias) && (
+                  <span className="h-2 w-2 shrink-0 rounded-full bg-red-500/80" />
+                )}
+                {activeTab !== alias && unreadCount(alias) > 0 && !isMuted(alias) && (
                   <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>

package/app/components/MobileNav.tsx

@@ -28,7 +28,7 @@ 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();
+  const { totalUnread, hasMutedUnread } = 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
@@ -60,6 +60,9 @@ export function MobileNav() {
                 <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 && hasMutedUnread && (
+                  <span aria-label="有未读（已静音）" className="absolute -top-0.5 right-1 h-2 w-2 rounded-full bg-red-500/80" />
+                )}
                 {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)}

package/app/components/NodeSettingsPanel.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { Session } from './types';
 import { AliasAvatar } from './AliasAvatar';
 import { setAvatarUrl, useAvatarUrl } from '../lib/avatars';
+import { toggleMute, useMuted } from '../lib/chat-mute';
 import { useLifecycleCaps } from './NodeLifecycleMenu';
 
 /**
@@ -148,6 +149,30 @@ function SectionTitle({ children }: { children: React.ReactNode }) {
   return <h3 className="text-[11px] font-medium uppercase tracking-wide text-gray-500 mb-2">{children}</h3>;
 }
 
+/* R34 (微信消息免打扰): per-conversation mute switch. Muted = badge shows
+   a dot instead of the count and the global total excludes it. */
+function MuteSection({ alias }: { alias: string }) {
+  const muted = useMuted(alias);
+  return (
+    <section>
+      <SectionTitle>聊天</SectionTitle>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={muted}
+        onClick={() => toggleMute(alias)}
+        className="flex w-full items-center justify-between rounded-lg border border-[#26262b] bg-[#161618] px-3 py-2.5"
+      >
+        <span className="text-[12px] text-gray-300">消息免打扰</span>
+        <span className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${muted ? 'bg-cyan-600' : 'bg-[#2a2a30]'}`}>
+          <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${muted ? 'translate-x-4.5' : 'translate-x-0.5'}`} style={{ transform: muted ? 'translateX(18px)' : 'translateX(2px)' }} />
+        </span>
+      </button>
+      <p className="mt-1.5 text-[10px] text-gray-600">静音后未读只显红点、不计入全局数字（存本浏览器）</p>
+    </section>
+  );
+}
+
 /* R24 (Vincent 亲点: 头像换血) — per-node custom avatar. Stored browser-side
    (localStorage via app/lib/avatars) until the hub grows an RFC-024
    whitelist entry for avatar_url; the designed default set rides
@@ -639,6 +664,8 @@ export function NodeSettingsPanel({ session: s, onClose }: { session: Session; o
 
           <AvatarSection alias={s.alias} />
 
+          <MuteSection alias={s.alias} />
+
           {/* B. Runtime + 模型 (model editable) */}
           <section>
             <SectionTitle>Runtime · 模型</SectionTitle>

package/app/components/TaskChatPanel.tsx

@@ -321,6 +321,7 @@ import remarkGfm from 'remark-gfm';
 import { useSSE } from '../lib/useSSE';
 import { useNetworkId } from '../lib/network-context';
 import { useHealth } from '../lib/hooks';
+import { useMuted } from '../lib/chat-mute';
 import { markChatRead } from '../lib/chat-unread';
 import { readDraft, writeDraft } from '../lib/chat-drafts';
 import { pinyinMatch, usePinyinReady } from '../lib/pinyin-match';
@@ -464,6 +465,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes, active }
   // (#214 "one definition"); useHealth is SWR-deduped with the page-level
   // poll, so this adds no extra requests while Overview is mounted.
   const { health } = useHealth();
+  const chatMuted = useMuted(alias);
   const sseOnline = (() => {
     const m = health?.sse_sessions;
     if (!m) return null;
@@ -1444,7 +1446,14 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes, active }
           <div className="flex items-center gap-3">
             <AliasAvatar alias={alias} size={32} />
             <div>
-              <div className="text-sm font-semibold text-[var(--fg)]">{alias}</div>
+              <div className="flex items-center gap-1.5 text-sm font-semibold text-[var(--fg)]">
+                <span>{alias}</span>
+                {chatMuted && (
+                  <svg aria-label={t('已开启免打扰', 'Muted')} role="img" className="h-3.5 w-3.5 text-[var(--fg-dim)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M9.88 4.12A6 6 0 0118 9v3.6l1.5 2.4H12M6.3 6.3A5.98 5.98 0 006 9v3.6L4.5 15H13M10 19a2 2 0 004 0M3 3l18 18" />
+                  </svg>
+                )}
+              </div>
               <div className="flex items-center gap-1.5 text-[10px] text-[var(--fg-muted)]">
                 {sseOnline !== null && (
                   <span aria-hidden className={`inline-block h-1.5 w-1.5 rounded-full ${sseOnline ? 'bg-green-400' : 'bg-gray-600'}`} />

package/app/lib/chat-mute.ts

@@ -0,0 +1,58 @@
+'use client';
+
+import { useSyncExternalStore } from 'react';
+
+/* Loop R34 (微信消息免打扰, 克制版): per-conversation mute. Muted
+ * conversations keep their red badge but show a DOT instead of the count,
+ * and their unreads are excluded from the global total (WeChat semantics).
+ * Same storage/reactivity pattern as chat-drafts. */
+
+const STORE_KEY = 'anet_chat_mute_v1';
+const MUTE_EVENT = 'anet-chat-mute-updated';
+
+function readSet(): Set<string> {
+  if (typeof window === 'undefined') return new Set();
+  try {
+    const parsed = JSON.parse(window.localStorage.getItem(STORE_KEY) || '[]');
+    return new Set(Array.isArray(parsed) ? parsed : []);
+  } catch {
+    return new Set();
+  }
+}
+
+export function isMuted(alias?: string | null): boolean {
+  if (!alias) return false;
+  return readSet().has(alias);
+}
+
+export function toggleMute(alias: string) {
+  if (typeof window === 'undefined' || !alias) return;
+  try {
+    const s = readSet();
+    if (s.has(alias)) s.delete(alias);
+    else s.add(alias);
+    window.localStorage.setItem(STORE_KEY, JSON.stringify([...s]));
+    window.dispatchEvent(new Event(MUTE_EVENT));
+  } catch {}
+}
+
+let version = 0;
+function subscribe(callback: () => void) {
+  const bump = () => { version++; callback(); };
+  window.addEventListener(MUTE_EVENT, bump);
+  window.addEventListener('storage', bump);
+  return () => {
+    window.removeEventListener(MUTE_EVENT, bump);
+    window.removeEventListener('storage', bump);
+  };
+}
+
+export function useMuted(alias?: string | null): boolean {
+  return useSyncExternalStore(subscribe, () => (alias ? isMuted(alias) : false), () => false);
+}
+
+/** Monotonic version for callers that use plain isMuted() inside render
+ *  loops (map callbacks can't call hooks). */
+export function useMuteVersion(): number {
+  return useSyncExternalStore(subscribe, () => version, () => 0);
+}

package/app/lib/chat-unread.ts

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import useSWR from 'swr';
 import { useNetworkId } from './network-context';
+import { isMuted, useMuteVersion } from './chat-mute';
 
 const STORAGE_PREFIX = 'anet_chat_read_v1:';
 const UNREAD_EVENT = 'anet-chat-read-updated';
@@ -181,17 +182,25 @@ export function useChatUnread() {
     return unreadMap.lastActivity.get(alias) || 0;
   }, [unreadMap]);
 
-  const totalUnread = useMemo(() => {
+  // R34: muted conversations are excluded from the global count (WeChat
+  // semantics); hasMutedUnread lets entry badges fall back to a dot.
+  const muteVersion = useMuteVersion();
+  const { totalUnread, hasMutedUnread } = useMemo(() => {
+    void muteVersion;
     let t = 0;
-    for (const n of unreadMap.counts.values()) t += n;
-    return t;
-  }, [unreadMap]);
+    let mutedAny = false;
+    for (const [alias, n] of unreadMap.counts) {
+      if (isMuted(alias)) { if (n > 0) mutedAny = true; continue; }
+      t += n;
+    }
+    return { totalUnread: t, hasMutedUnread: mutedAny };
+  }, [unreadMap, muteVersion]);
 
   const clearUnread = useCallback((alias: string) => {
     markChatRead(alias, networkId);
   }, [networkId]);
 
-  return { unreadMap, hasUnread, unreadCount, lastActivityAt, totalUnread, clearUnread };
+  return { unreadMap, hasUnread, unreadCount, lastActivityAt, totalUnread, hasMutedUnread, clearUnread };
 }
 
 /** WeChat badge label: 1-99 as-is, above → "99+"; 0/negative → '' (hide). */

package/app/nodes/page.tsx

@@ -10,6 +10,7 @@ import { NodeLifecycleMenu } from '../components/NodeLifecycleMenu';
 import { EmptyState, NodesEmptyState } from '../components/EmptyState';
 import { AliasAvatar } from '../components/AliasAvatar';
 import { useHasDraft } from '../lib/chat-drafts';
+import { isMuted, useMuteVersion } from '../lib/chat-mute';
 import { pinyinMatch, usePinyinReady } from '../lib/pinyin-match';
 import { useCollapsibleSearch } from '../components/CollapsibleSearch';
 import type { Session } from '../components/types';
@@ -56,6 +57,8 @@ export default function NodesPage() {
   const [filterStatus, setFilterStatus] = useState('');
   const [search, setSearch] = useState('');
   const pinyinReady = usePinyinReady();
+  const muteVersion = useMuteVersion();
+  void muteVersion; // re-render on mute toggles (isMuted used in map callbacks)
   void pinyinReady; // R25: re-filter once the lazy pinyin dict lands
   const [viewMode, setViewMode] = useState<ViewMode>('list');
   const [chatAlias, setChatAlias] = useState<string | null>(null);
@@ -231,7 +234,10 @@ export default function NodesPage() {
                   <div className="relative shrink-0">
                     <span className="relative inline-flex shrink-0">
                       <AliasAvatar alias={s.alias} size={36} />
-                      {unreadCount(s.alias) > 0 && (
+                      {unreadCount(s.alias) > 0 && isMuted(s.alias) && (
+                        <span aria-label={t('有未读（已静音）', 'Unread (muted)')} className="absolute -top-0.5 -right-1 h-2.5 w-2.5 rounded-full bg-red-500/80 ring-2 ring-[#161618]" />
+                      )}
+                      {unreadCount(s.alias) > 0 && !isMuted(s.alias) && (
                         <span aria-label={t(`${unreadCount(s.alias)} 条未读`, `${unreadCount(s.alias)} unread`)} 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>
@@ -321,7 +327,10 @@ export default function NodesPage() {
                       <div className="relative shrink-0">
                         <span className="relative inline-flex shrink-0">
                           <AliasAvatar alias={s.alias} size={20} />
-                          {unreadCount(s.alias) > 0 && (
+                          {unreadCount(s.alias) > 0 && isMuted(s.alias) && (
+                            <span aria-label={t('有未读（已静音）', 'Unread (muted)')} className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-red-500/80" />
+                          )}
+                          {unreadCount(s.alias) > 0 && !isMuted(s.alias) && (
                             <span aria-label={t(`${unreadCount(s.alias)} 条未读`, `${unreadCount(s.alias)} unread`)} 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>

package/package.json

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