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

package/app/components/CommandCenter.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useCallback } from 'react';
 import { useChatUnread } from '../lib/chat-unread';
+import { useHasDraft } from '../lib/chat-drafts';
 import { TaskChatPanel } from './TaskChatPanel';
 
 interface CommandCenterProps {
@@ -46,6 +47,7 @@ export function CommandCenter({ tabs, activeTab, onOpenTab, onCloseTab, onSetAct
                 <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)}
@@ -81,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>
@@ -100,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/TaskChatPanel.tsx

@@ -58,20 +58,123 @@ function extractAttachmentPreviews(text: string): string[] {
   return Array.from(new Set(urls));
 }
 
-function AttachmentPreviews({ text }: { text: string }) {
+/* Loop R12 (微信式图片): thumbnails shimmer while loading and degrade to a
+   quiet "图片加载失败" tile on error; tapping opens an in-panel lightbox
+   (dark backdrop, fit-to-screen, Esc/tap closes) instead of navigating to
+   a raw browser tab. */
+function ChatImage({ src, alt, thumbClass, onOpen }: { src: string; alt?: string; thumbClass: string; onOpen: (url: string) => void }) {
+  const [state, setState] = useState<'loading' | 'ready' | 'error'>('loading');
+  if (state === 'error') {
+    return (
+      <span className={`${thumbClass} flex items-center justify-center bg-black/20 border border-[var(--border)] text-[10px] text-[var(--fg-dim)]`}>
+        图片加载失败
+      </span>
+    );
+  }
+  return (
+    <button
+      type="button"
+      onClick={() => onOpen(src)}
+      aria-label={alt || '查看大图'}
+      className={`relative block overflow-hidden ${state === 'loading' ? 'animate-pulse bg-[var(--bg-elevated)]' : ''} ${thumbClass}`}
+    >
+      <img
+        src={src}
+        alt={alt || ''}
+        loading="lazy"
+        onLoad={() => setState('ready')}
+        onError={() => setState('error')}
+        className={`h-full w-full object-cover transition-opacity duration-200 ${state === 'ready' ? 'opacity-100' : 'opacity-0'}`}
+      />
+    </button>
+  );
+}
+
+function ImageLightbox({ url, onClose, opener }: { url: string; onClose: () => void; opener: HTMLElement | null }) {
+  const [loaded, setLoaded] = useState(false);
+  const dialogRef = useRef<HTMLDivElement>(null);
+  // onClose is recreated on every parent render (and the panel re-renders
+  // every few seconds from soft refreshes) — a [onClose] dep would tear
+  // down/re-run this effect mid-open and re-capture the "opener" as an
+  // element INSIDE the dialog. Mount-only + ref keeps the true opener.
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  useEffect(() => {
+    const onClose = () => onCloseRef.current();
+    // R13 a11y debt: modal focus management — focus into the dialog, trap
+    // Tab, hand focus back on close. The opener is captured by the PANEL at
+    // activation time and passed in: by the time this passive effect runs,
+    // the thumbnail has already been blurred (measured: activeElement was
+    // <body> here), so capturing it locally restored nothing.
+    const focusables = () =>
+      Array.from(dialogRef.current?.querySelectorAll<HTMLElement>('a[href], button') || []);
+    focusables()[0]?.focus();
+    // Capture-phase so Escape closes the LIGHTBOX, not the chat panel
+    // behind it (panel hosts listen for Escape too).
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') { e.stopPropagation(); onClose(); return; }
+      if (e.key !== 'Tab') return;
+      const items = focusables();
+      if (items.length === 0) return;
+      const first = items[0], last = items[items.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && (active === first || !dialogRef.current?.contains(active))) {
+        e.preventDefault(); last.focus();
+      } else if (!e.shiftKey && (active === last || !dialogRef.current?.contains(active))) {
+        e.preventDefault(); first.focus();
+      }
+    };
+    window.addEventListener('keydown', onKey, true);
+    return () => {
+      window.removeEventListener('keydown', onKey, true);
+      // After this cleanup React removes the overlay; the browser then
+      // blurs to <body>. Restore on a macrotask so we run AFTER that blur.
+      setTimeout(() => {
+        // Soft refreshes rebuild bubble subtrees, so the opener node may be
+        // detached by now (focus() on a detached node is a silent no-op) —
+        // re-find its replacement by aria-label.
+        let el = opener;
+        if (el && !document.contains(el)) {
+          const label = el.getAttribute('aria-label');
+          if (label) el = document.querySelector<HTMLElement>(`[aria-label="${CSS.escape(label)}"]`);
+        }
+        el?.focus?.();
+      }, 0);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);  // opener/onCloseRef are stable for one open
+  return (
+    <div ref={dialogRef} className="fixed inset-0 z-[100] flex items-center justify-center bg-black/85" onClick={onClose} role="dialog" aria-modal="true" aria-label="图片预览">
+      {!loaded && <div className="absolute h-6 w-6 animate-spin rounded-full border-2 border-white/30 border-t-white" />}
+      <img
+        src={url}
+        alt=""
+        onLoad={() => setLoaded(true)}
+        className={`max-h-[92vh] max-w-[92vw] rounded object-contain transition-opacity duration-150 ${loaded ? 'opacity-100' : 'opacity-0'}`}
+      />
+      <a
+        href={url}
+        target="_blank"
+        rel="noreferrer"
+        onClick={(e) => e.stopPropagation()}
+        className="absolute right-12 top-3 text-[11px] text-white/70 underline hover:text-white"
+      >
+        新标签打开
+      </a>
+      <button onClick={onClose} aria-label="关闭预览" className="absolute right-2 top-2 flex h-8 w-8 items-center justify-center text-lg text-white/80 hover:text-white">
+        ×
+      </button>
+    </div>
+  );
+}
+
+function AttachmentPreviews({ text, onOpen }: { text: string; onOpen: (url: string) => void }) {
   const urls = extractAttachmentPreviews(text);
   if (urls.length === 0) return null;
   return (
     <div className="mt-2 grid grid-cols-2 gap-2">
       {urls.map((url) => (
-        <a key={url} href={url} target="_blank" rel="noreferrer" className="group block overflow-hidden rounded-lg border border-cyan-500/20 bg-black/20">
-          <img
-            src={url}
-            alt="Dashboard attachment preview"
-            className="h-28 w-full object-cover transition-transform duration-200 group-hover:scale-[1.02]"
-            loading="lazy"
-          />
-        </a>
+        <ChatImage key={url} src={url} alt="Dashboard attachment" thumbClass="h-28 w-full rounded-lg border border-cyan-500/20" onOpen={onOpen} />
       ))}
     </div>
   );
@@ -147,9 +250,10 @@ 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 }) {
+function MarkdownContent({ text, onImageClick }: { text: string; onImageClick?: (url: string) => void }) {
   if (!text) return <span className="text-[var(--fg-dim)] italic">No content</span>;
   return (
     <div className="break-words leading-relaxed">
@@ -168,6 +272,12 @@ function MarkdownContent({ text }: { text: string }) {
           a: ({ href, children }) => <a href={href} target="_blank" rel="noreferrer" className="text-cyan-300 underline">{children}</a>,
           blockquote: ({ children }) => <blockquote className="border-l-2 border-cyan-500/30 pl-3 my-1 text-[var(--fg-muted)] italic">{children}</blockquote>,
           hr: () => <hr className="border-t border-[var(--border)] my-2" />,
+          img: ({ src, alt }) => {
+            const url = typeof src === 'string' ? src : '';
+            if (!url) return null;
+            if (!onImageClick) return <img src={url} alt={alt || ''} loading="lazy" className="my-1 max-h-48 rounded-lg" />;
+            return <ChatImage src={url} alt={alt} thumbClass="my-1 h-40 w-full max-w-[240px] rounded-lg" onOpen={onImageClick} />;
+          },
           code: ({ className, children }) => {
             const inline = !className?.startsWith('language-');
             if (inline) {
@@ -206,6 +316,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
@@ -256,7 +370,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('');
@@ -289,6 +404,22 @@ 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 [lightboxUrl, setLightboxUrl] = useState<string | null>(null);
+  const lightboxOpenerRef = useRef<HTMLElement | null>(null);
+  const openLightbox = useCallback((url: string) => {
+    lightboxOpenerRef.current = document.activeElement as HTMLElement | null;
+    setLightboxUrl(url);
+  }, []);
+  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
@@ -309,6 +440,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);
@@ -387,6 +541,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
@@ -412,12 +569,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();
@@ -431,12 +591,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]);
 
@@ -455,6 +627,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',
@@ -477,10 +650,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);
     },
   });
 
@@ -491,14 +672,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.
@@ -561,6 +753,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';
@@ -835,8 +1029,8 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
                       </div>
                     </div>
                     <div className="text-[14px] leading-[1.65] text-[var(--fg)]">
-                      <CollapsibleText><MarkdownContent text={m.result} /></CollapsibleText>
-                      <AttachmentPreviews text={m.result} />
+                      <CollapsibleText><MarkdownContent text={m.result} onImageClick={openLightbox} /></CollapsibleText>
+                      <AttachmentPreviews text={m.result} onOpen={openLightbox} />
                     </div>
                   </div>
                 </div>
@@ -855,8 +1049,8 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
                     {!fromUser && <span className="text-[9px] text-[var(--fg-dim)]">forwarded to {m.to_name}</span>}
                   </div>
                   <div className="text-[14px] leading-[1.65] text-[var(--fg)]">
-                    <CollapsibleText><MarkdownContent text={m.content} /></CollapsibleText>
-                    <AttachmentPreviews text={m.content} />
+                    <CollapsibleText><MarkdownContent text={m.content} onImageClick={openLightbox} /></CollapsibleText>
+                    <AttachmentPreviews text={m.content} onOpen={openLightbox} />
                   </div>
                   <div className="flex flex-wrap items-center justify-between mt-1.5 gap-2 sm:gap-3">
                     <StatusBar status={m.status} />
@@ -899,6 +1093,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 */}
@@ -978,6 +1187,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
             <span>Enter to send · paste image</span>
           </div>
         </div>
+        {lightboxUrl && <ImageLightbox url={lightboxUrl} opener={lightboxOpenerRef.current} onClose={() => setLightboxUrl(null)} />}
     </>
   );
 

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/nodes/page.tsx

@@ -9,6 +9,7 @@ import { CreateNodeWizard } from '../components/CreateNodeWizard';
 import { NodeLifecycleMenu } from '../components/NodeLifecycleMenu';
 import { EmptyState, NodesEmptyState } from '../components/EmptyState';
 import { AliasAvatar } from '../components/AliasAvatar';
+import { useHasDraft } from '../lib/chat-drafts';
 import { useCollapsibleSearch } from '../components/CollapsibleSearch';
 import type { Session } from '../components/types';
 import { SESSION_STATUS_CHIP_CLASS as STATUS_COLORS } from '../lib/status';
@@ -25,6 +26,13 @@ function shortServer(server: string | null | undefined): string {
 type ViewMode = 'list' | 'grid';
 type SessionRow = Session & { online: boolean };
 
+/** R13 (草稿闭环还债): same [草稿] mark as AgentCard/CommandCenter tabs. */
+function DraftMark({ alias }: { alias: string }) {
+  const hasDraft = useHasDraft(alias);
+  if (!hasDraft) return null;
+  return <span className="shrink-0 text-[9px] text-red-400/90" aria-label="有未发送草稿">[草稿]</span>;
+}
+
 export default function NodesPage() {
   const { sessions, isLoading: loading } = useSessions();
   const { health } = useHealth();
@@ -223,6 +231,7 @@ export default function NodesPage() {
                   <div className="min-w-0 flex-1">
                     <div className="flex items-center gap-2">
                       <span className="truncate text-base font-semibold text-white">{s.alias}</span>
+                      <DraftMark alias={s.alias} />
                       {unread && <span className="shrink-0 rounded-full bg-red-500/15 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-red-300">New</span>}
                       <span className={`shrink-0 rounded-md border px-2 py-0.5 text-[10px] uppercase tracking-wide ${STATUS_COLORS[statusKey] || STATUS_COLORS.offline}`}>
                         {statusKey}
@@ -310,6 +319,7 @@ export default function NodesPage() {
                         {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>
+                      <DraftMark alias={s.alias} />
                       {unread && <span className="shrink-0 rounded-full bg-red-500/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-red-300">New</span>}
                     </div>
                   </div>

package/package.json

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