npm - @sleep2agi/agent-network-dashboard - Versions diffs - 0.6.3-preview.16 → 0.6.3-preview.18 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (179) hide show

package/app/components/TaskChatPanel.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 'use client';
-import { useState, useEffect, useRef, useCallback, Fragment } from 'react';
+import { useState, useEffect, useRef, useCallback, useMemo, memo, Fragment } from 'react';
 import { AliasAvatar } from './AliasAvatar';
 interface ChatTask {
@@ -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>
   );
@@ -150,13 +253,16 @@ 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>;
-  return (
-    <div className="break-words leading-relaxed">
-      <ReactMarkdown
-        remarkPlugins={[remarkGfm]}
-        components={{
+/* Loop R14 (气泡子树稳定性): the renderer map used to be an OBJECT LITERAL
+   OF INLINE ARROWS inside MarkdownContent's JSX — every render produced new
+   component types, so React unmounted and remounted the entire rendered
+   markdown subtree on every soft refresh (measured: +36 ChatImage mounts in
+   45s idle; any focused element inside a bubble fell back to <body>).
+   Hoisting the map to a factory + memoizing per onImageClick keeps types
+   stable; memo() on MarkdownContent then skips re-render entirely while
+   text is unchanged. */
+function buildMdComponents(onImageClick?: (url: string) => void) {
+  return {
           h1: ({ children }) => <h1 className="text-base font-semibold text-[var(--fg)] mt-2 mb-1">{children}</h1>,
           h2: ({ children }) => <h2 className="text-sm font-semibold text-[var(--fg)] mt-2 mb-1">{children}</h2>,
           h3: ({ children }) => <h3 className="text-sm font-semibold text-cyan-300 mt-1.5 mb-0.5">{children}</h3>,
@@ -169,6 +275,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) {
@@ -192,13 +304,23 @@ function MarkdownContent({ text }: { text: string }) {
           tr: ({ children }) => <tr className="border-b border-[var(--border)]">{children}</tr>,
           th: ({ children }) => <th className="text-left text-cyan-300 font-semibold px-2 py-1 border border-[var(--border)]">{children}</th>,
           td: ({ children }) => <td className="px-2 py-1 border border-[var(--border)] align-top">{children}</td>,
-        }}
+  } satisfies React.ComponentProps<typeof ReactMarkdown>['components'];
+}
+const MarkdownContent = memo(function MarkdownContent({ text, onImageClick }: { text: string; onImageClick?: (url: string) => void }) {
+  const components = useMemo(() => buildMdComponents(onImageClick), [onImageClick]);
+  if (!text) return <span className="text-[var(--fg-dim)] italic">No content</span>;
+  return (
+    <div className="break-words leading-relaxed">
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={components}
       >
         {text}
       </ReactMarkdown>
     </div>
   );
-}
+});
 interface TaskChatPanelProps {
   alias: string;
@@ -302,6 +424,18 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes, active }
   // 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);
+  // Loop R15 (会话内搜索): client-side filter over the LOADED window —
+  // honest scope (the hint says so); load earlier messages to widen it.
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchIdx, setSearchIdx] = useState(0);
+  const searchInputRef = useRef<HTMLInputElement>(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);
@@ -812,6 +946,29 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes, active }
       return a.kind === 'task' ? -1 : 1;
     });
+  const query = searchQuery.trim().toLowerCase();
+  const searchMatches = query
+    ? chatEvents
+        .filter((ev) => {
+          const text = ev.kind === 'reply' ? ev.task.result : ev.task.content;
+          return (text || '').toLowerCase().includes(query);
+        })
+        .map((ev) => `${ev.task.task_id}:${ev.kind}`)
+    : [];
+  const currentMatchKey = searchMatches.length ? searchMatches[Math.min(searchIdx, searchMatches.length - 1)] : null;
+  // New query starts at the NEWEST match (WeChat searches backwards in time).
+  useEffect(() => { setSearchIdx(Math.max(0, searchMatches.length - 1)); /* eslint-disable-line react-hooks/exhaustive-deps */ }, [query]);
+  useEffect(() => {
+    if (!currentMatchKey) return;
+    const el = scrollRef.current?.querySelector(`[data-ev="${CSS.escape(currentMatchKey)}"]`);
+    el?.scrollIntoView({ block: 'center', behavior: 'smooth' });
+  }, [currentMatchKey]);
+  const stepMatch = (delta: number) => {
+    if (!searchMatches.length) return;
+    setSearchIdx((i) => (i + delta + searchMatches.length) % searchMatches.length);
+  };
+  const closeSearch = () => { setSearchOpen(false); setSearchQuery(''); };
   // Inline mode: just the chat content, no panel chrome
   const chatContent = (
     <>
@@ -824,6 +981,41 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes, active }
             to space-y-1.5 so messages read denser without losing the
             speaker-turn rhythm. Desktop unchanged at sm: and up. */}
         <div ref={scrollRef} onScroll={onMessagesScroll} className="flex-1 overflow-y-auto px-3 py-3 sm:px-4 sm:py-4 space-y-2 sm:space-y-4">
+          {searchOpen ? (
+            <div className="sticky top-0 z-20 -mx-1 flex items-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--bg-elevated)]/95 px-2 py-1.5 shadow-lg shadow-black/30 backdrop-blur">
+              <input
+                ref={searchInputRef}
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Escape') { e.stopPropagation(); closeSearch(); }
+                  else if (e.key === 'Enter' && e.shiftKey) { e.preventDefault(); stepMatch(1); }
+                  else if (e.key === 'Enter') { e.preventDefault(); stepMatch(-1); }
+                }}
+                placeholder="搜索会话…"
+                className="min-w-0 flex-1 bg-transparent text-xs text-[var(--fg)] placeholder-[var(--fg-dim)] focus:outline-none"
+              />
+              <span className="shrink-0 text-[10px] tabular-nums text-[var(--fg-dim)]">
+                {searchMatches.length ? `${Math.min(searchIdx, searchMatches.length - 1) + 1}/${searchMatches.length}` : searchQuery.trim() ? '0 条' : `${chatEvents.length} 条内`}
+              </span>
+              <button type="button" onClick={() => stepMatch(-1)} aria-label="上一条（更早）" className="shrink-0 rounded px-1 text-[var(--fg-dim)] hover:text-cyan-300">↑</button>
+              <button type="button" onClick={() => stepMatch(1)} aria-label="下一条（更新）" className="shrink-0 rounded px-1 text-[var(--fg-dim)] hover:text-cyan-300">↓</button>
+              <button type="button" onClick={closeSearch} aria-label="关闭搜索" className="shrink-0 rounded px-1 text-[var(--fg-dim)] hover:text-[var(--fg)]">×</button>
+            </div>
+          ) : (
+            <div className="sticky top-0 z-20 flex justify-end pointer-events-none -mb-8">
+              <button
+                type="button"
+                onClick={() => { setSearchOpen(true); setTimeout(() => searchInputRef.current?.focus(), 50); }}
+                aria-label="搜索会话"
+                className="pointer-events-auto rounded-full border border-[var(--border)] bg-[var(--bg-elevated)]/80 p-1.5 text-[var(--fg-dim)] shadow hover:text-cyan-300"
+              >
+                <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-4.35-4.35M17 11a6 6 0 11-12 0 6 6 0 0112 0z" />
+                </svg>
+              </button>
+            </div>
+          )}
           {!historyLoaded && (
             <div className="flex justify-center py-8">
               <div className="w-5 h-5 border-2 border-cyan-500/30 border-t-cyan-500 rounded-full animate-spin" />
@@ -896,8 +1088,8 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes, active }
               return (
                 <Fragment key={`${m.task_id}:reply`}>
                 {sepEl}
-                <div className="flex justify-start">
-                  <div title={event.at} className="max-w-[92%] sm:max-w-[min(85%,56ch)] bg-green-500/8 border border-green-500/15 rounded-2xl rounded-bl-md px-3 py-2.5 sm:px-4 shadow-sm">
+                <div className="flex justify-start" data-ev={`${m.task_id}:reply`}>
+                  <div title={event.at} className={`max-w-[92%] sm:max-w-[min(85%,56ch)] bg-green-500/8 border border-green-500/15 rounded-2xl rounded-bl-md px-3 py-2.5 sm:px-4 shadow-sm ${currentMatchKey === `${m.task_id}:reply` ? 'ring-2 ring-yellow-400/60' : ''}`}>
                     <div className="flex items-center justify-between gap-2 mb-2">
                       <div className="flex items-center gap-1.5 min-w-0">
                         {m.to_name && <AliasAvatar alias={m.to_name} size={14} />}
@@ -914,8 +1106,8 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes, active }
                       </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>
@@ -927,15 +1119,15 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes, active }
             {sepEl}
             <div className="space-y-1.5 sm:space-y-2">
               {/* Outgoing task — labeled with origin so peer-forwarded tasks are obvious */}
-              <div className="flex justify-end">
-                <div title={m.created_at} className="max-w-[92%] sm:max-w-[min(85%,56ch)] bg-cyan-500/8 border border-cyan-500/15 rounded-2xl rounded-br-md px-3 py-2.5 sm:px-4 shadow-sm">
+              <div className="flex justify-end" data-ev={`${m.task_id}:task`}>
+                <div title={m.created_at} className={`max-w-[92%] sm:max-w-[min(85%,56ch)] bg-cyan-500/8 border border-cyan-500/15 rounded-2xl rounded-br-md px-3 py-2.5 sm:px-4 shadow-sm ${currentMatchKey === `${m.task_id}:task` ? 'ring-2 ring-yellow-400/60' : ''}`}>
                   <div className="flex items-center gap-2 mb-1">
                     <span className={`text-[10px] font-medium ${fromUser ? 'text-cyan-400' : 'text-purple-300'}`}>{senderLabel}</span>
                     {!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} />
@@ -1072,6 +1264,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes, active }
             <span>Enter to send · paste image</span>
           </div>
         </div>
+        {lightboxUrl && <ImageLightbox url={lightboxUrl} opener={lightboxOpenerRef.current} onClose={() => setLightboxUrl(null)} />}
     </>
   );

package/app/nodes/page.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

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