@sleep2agi/agent-network-dashboard 0.4.6-preview.2 → 0.4.6-preview.21

package/app/components/ServersDrawer.tsx

@@ -0,0 +1,169 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+/** Issue #119 — server-side panel listing the hub's hosts + CPU/RAM bars.
+ *
+ * Round 5 ships the UI with mock data; the real data path lands when:
+ *   1. agent-node attaches a `host` payload to `report_status` (SDK马)
+ *   2. CommHub exposes `GET /api/servers` aggregating it (通信牛)
+ *   3. dashboard swaps the mock for a SWR fetch — the contract below
+ *      matches the issue spec, so step 3 is a one-line change.
+ *
+ * Collapsed by default to a thin vertical icon strip so it never competes
+ * with the topology graph for horizontal real-estate. State persists to
+ * localStorage just like the other dashboard drawers.
+ */
+
+interface ServerCard {
+  hostname: string;
+  ip?: string | null;
+  cpu_load_1min: number | null;
+  cpu_cores: number;
+  mem_used_gb: number | null;
+  mem_total_gb: number | null;
+  agent_count: number;
+  status: 'online' | 'offline';
+  note?: string;
+}
+
+// Mock seed — kept close to the #119 ASCII mock so Vincent / the team can
+// eyeball the layout against the spec. Swap to a SWR fetch when the endpoint
+// is live; the shape is identical, so the only code change is the source.
+const MOCK_SERVERS: ServerCard[] = [
+  {
+    hostname: 'iZrj93pr', ip: '127.0.0.1', cpu_load_1min: 3.05, cpu_cores: 8,
+    mem_used_gb: 10.4, mem_total_gb: 61.4, agent_count: 30, status: 'online', note: '本机',
+  },
+  {
+    hostname: 'iZ0jlc8', cpu_load_1min: 0.5, cpu_cores: 4,
+    mem_used_gb: 1.2, mem_total_gb: 8, agent_count: 1, status: 'online',
+  },
+  {
+    hostname: 'elaine-Sys', cpu_load_1min: null, cpu_cores: 0,
+    mem_used_gb: null, mem_total_gb: null, agent_count: 2, status: 'offline',
+  },
+];
+
+// Bar tint by usage — green ≤60%, amber 60–85%, red >85%. Keeps the eye
+// going to whichever box is actually about to tip over.
+function barTint(pct: number) {
+  if (pct >= 85) return { fill: '#ef4444', track: 'rgb(239 68 68 / 0.16)' };
+  if (pct >= 60) return { fill: '#f59e0b', track: 'rgb(245 158 11 / 0.16)' };
+  return { fill: '#10b981', track: 'rgb(16 185 129 / 0.16)' };
+}
+
+function Bar({ pct, label }: { pct: number; label: string }) {
+  const t = barTint(pct);
+  const clamped = Math.max(0, Math.min(100, pct));
+  return (
+    <div className="space-y-0.5">
+      <div className="flex justify-between text-[10px] text-[var(--fg-muted)] font-mono">
+        <span>{label}</span>
+        <span className="tabular-nums">{Math.round(clamped)}%</span>
+      </div>
+      <div className="h-1.5 rounded-full overflow-hidden" style={{ background: t.track }}>
+        <div
+          className="h-full transition-[width] duration-300 ease-out"
+          style={{ width: `${clamped}%`, background: t.fill }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export function ServersDrawer() {
+  const [open, setOpen] = useState(false);
+  // Drawer state is per-user-machine — persist like the other dashboard
+  // sticky toggles (`anet-topo-layout`, `anet-topo-view`, etc.).
+  useEffect(() => {
+    try { if (localStorage.getItem('anet-servers-drawer') === '1') setOpen(true); } catch {}
+  }, []);
+  const toggle = () => setOpen(prev => {
+    const next = !prev;
+    try { localStorage.setItem('anet-servers-drawer', next ? '1' : '0'); } catch {}
+    return next;
+  });
+
+  const servers = MOCK_SERVERS; // TODO(#119 step 3): useSWR('/api/hub/servers')
+  const onlineCount = servers.filter(s => s.status === 'online').length;
+
+  return (
+    <aside
+      className="fixed right-0 top-20 z-40 hidden lg:flex flex-col rounded-l-xl border border-r-0 shadow-xl shadow-black/30 anet-fade-in"
+      style={{
+        background: 'var(--bg-secondary)',
+        borderColor: 'var(--border)',
+        width: open ? 296 : 40,
+        maxHeight: 'calc(100vh - 6rem)',
+        transition: 'width 200ms ease-out',
+      }}
+      aria-label="Servers panel"
+    >
+      <button
+        onClick={toggle}
+        aria-expanded={open}
+        aria-label={open ? 'Collapse servers panel' : 'Expand servers panel'}
+        className="flex items-center gap-2 px-2.5 py-2 border-b text-[11px] font-semibold tracking-wide select-none"
+        style={{ color: 'var(--fg)', borderColor: 'var(--border)' }}
+      >
+        <svg className="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+          <rect x="3" y="4" width="18" height="6" rx="1.5" />
+          <rect x="3" y="14" width="18" height="6" rx="1.5" />
+          <circle cx="7" cy="7" r="0.7" fill="currentColor" />
+          <circle cx="7" cy="17" r="0.7" fill="currentColor" />
+        </svg>
+        {open && (
+          <>
+            <span className="flex-1 text-left">Servers</span>
+            <span className="text-[10px] text-[var(--fg-muted)] font-mono">{onlineCount}/{servers.length}</span>
+          </>
+        )}
+      </button>
+
+      {open && (
+        <div className="flex-1 min-h-0 overflow-y-auto px-2 py-2 space-y-2">
+          {servers.map(s => {
+            const offline = s.status === 'offline';
+            const cpuPct = s.cpu_load_1min != null && s.cpu_cores > 0 ? (s.cpu_load_1min / s.cpu_cores) * 100 : null;
+            const memPct = s.mem_used_gb != null && s.mem_total_gb != null && s.mem_total_gb > 0 ? (s.mem_used_gb / s.mem_total_gb) * 100 : null;
+            return (
+              <div
+                key={s.hostname}
+                className="rounded-lg border px-2.5 py-2 space-y-1.5"
+                style={{
+                  background: 'var(--bg)',
+                  borderColor: 'var(--border)',
+                  opacity: offline ? 0.55 : 1,
+                }}
+                title={s.ip ? `${s.hostname} · ${s.ip}` : s.hostname}
+              >
+                <div className="flex items-baseline justify-between gap-2">
+                  <div className="min-w-0 flex items-baseline gap-1.5">
+                    <span className="font-mono text-[12px] font-semibold truncate" style={{ color: 'var(--fg)' }}>{s.hostname}</span>
+                    {s.note && <span className="text-[9px] text-[var(--fg-dim)]">({s.note})</span>}
+                  </div>
+                  <span className="text-[10px] text-[var(--fg-muted)] font-mono tabular-nums shrink-0">
+                    {s.agent_count}&nbsp;agent{s.agent_count === 1 ? '' : 's'}
+                  </span>
+                </div>
+                {!offline && cpuPct != null && (
+                  <Bar pct={cpuPct} label={`CPU ${s.cpu_load_1min!.toFixed(2)}/${s.cpu_cores}`} />
+                )}
+                {!offline && memPct != null && (
+                  <Bar pct={memPct} label={`RAM ${s.mem_used_gb!.toFixed(1)}/${s.mem_total_gb!.toFixed(1)}G`} />
+                )}
+                {offline && (
+                  <div className="text-[10px] text-[var(--fg-dim)] font-mono italic">CPU n/a · RAM n/a · offline</div>
+                )}
+              </div>
+            );
+          })}
+          <div className="pt-1 text-[9px] text-[var(--fg-dim)] font-mono text-center">
+            mock data · live when <span className="text-[var(--fg-muted)]">/api/servers</span> ships
+          </div>
+        </div>
+      )}
+    </aside>
+  );
+}

package/app/components/TaskChatPanel.tsx

@@ -29,19 +29,19 @@ function StatusBar({ status }: { status: string }) {
       {STATUS_STEPS.map((s, i) => (
         <div key={s} className="flex items-center gap-1">
           <div className={`w-2 h-2 rounded-full transition-all duration-700 ${
-            isFailed ? (i === 0 ? 'bg-red-400' : 'bg-gray-700')
-            : i <= idx ? (STATUS_COLORS[s] || 'bg-gray-600') : 'bg-gray-700'
+            isFailed ? (i === 0 ? 'bg-red-400' : 'bg-[var(--border)]')
+            : i <= idx ? (STATUS_COLORS[s] || 'bg-gray-600') : 'bg-[var(--border)]'
           }`} />
           {i < STATUS_STEPS.length - 1 && (
             <div className={`w-4 h-px transition-colors duration-700 ${
-              isFailed ? 'bg-red-800' : i < idx ? 'bg-gray-500' : 'bg-gray-800'
+              isFailed ? 'bg-red-800' : i < idx ? 'bg-gray-500' : 'bg-[var(--border)]'
             }`} />
           )}
         </div>
       ))}
       <span className={`text-[10px] ml-1.5 font-medium ${
         isFailed ? 'text-red-400' : status === 'replied' ? 'text-purple-400'
-        : status === 'running' ? 'text-green-400' : 'text-gray-500'
+        : status === 'running' ? 'text-green-400' : 'text-[var(--fg-muted)]'
       }`}>{status}</span>
       {(status === 'running' || status === 'delivered') && (
         <span className="ml-1">
@@ -62,34 +62,34 @@ import remarkGfm from 'remark-gfm';
 import { useSSE } from '../lib/useSSE';
 
 function MarkdownContent({ text }: { text: string }) {
-  if (!text) return <span className="text-gray-600 italic">No content</span>;
+  if (!text) return <span className="text-[var(--fg-dim)] italic">No content</span>;
   return (
     <div className="break-words leading-relaxed">
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         components={{
-          h1: ({ children }) => <h1 className="text-base font-semibold text-white mt-2 mb-1">{children}</h1>,
-          h2: ({ children }) => <h2 className="text-sm font-semibold text-white mt-2 mb-1">{children}</h2>,
+          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>,
           p: ({ children }) => <p className="my-1">{children}</p>,
-          strong: ({ children }) => <strong className="text-white font-semibold">{children}</strong>,
-          em: ({ children }) => <em className="italic text-gray-300">{children}</em>,
+          strong: ({ children }) => <strong className="text-[var(--fg)] font-semibold">{children}</strong>,
+          em: ({ children }) => <em className="italic text-[var(--fg-muted)]">{children}</em>,
           ul: ({ children }) => <ul className="list-disc pl-5 my-1 space-y-0.5">{children}</ul>,
           ol: ({ children }) => <ol className="list-decimal pl-5 my-1 space-y-0.5">{children}</ol>,
           li: ({ children }) => <li>{children}</li>,
           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-gray-400 italic">{children}</blockquote>,
-          hr: () => <hr className="border-t border-[#1a1a2a] my-2" />,
+          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" />,
           code: ({ className, children }) => {
             const inline = !className?.startsWith('language-');
             if (inline) {
-              return <code className="bg-[#0a0a15] rounded px-1.5 py-0.5 text-cyan-300 text-[11px] border border-[#1a1a2a]">{children}</code>;
+              return <code className="bg-[var(--code-bg)] rounded px-1.5 py-0.5 text-cyan-300 text-[11px] border border-[var(--border)]">{children}</code>;
             }
             const lang = className?.replace(/^language-/, '') || '';
             return (
-              <div className="my-2 rounded-lg overflow-hidden border border-[#1a1a2a]">
-                {lang && <div className="bg-[#0a0a15] px-3 py-1 text-[10px] text-gray-500 border-b border-[#1a1a2a]">{lang}</div>}
-                <pre className="bg-[#050510] px-3 py-2 text-[11px] text-green-300 overflow-x-auto"><code>{children}</code></pre>
+              <div className="my-2 rounded-lg overflow-hidden border border-[var(--border)]">
+                {lang && <div className="bg-[var(--code-bg)] px-3 py-1 text-[10px] text-[var(--fg-muted)] border-b border-[var(--border)]">{lang}</div>}
+                <pre className="bg-[var(--code-bg)] px-3 py-2 text-[11px] text-green-300 overflow-x-auto"><code>{children}</code></pre>
               </div>
             );
           },
@@ -98,11 +98,11 @@ function MarkdownContent({ text }: { text: string }) {
               <table className="w-full text-[12px] border-collapse">{children}</table>
             </div>
           ),
-          thead: ({ children }) => <thead className="bg-[#0a0a15]">{children}</thead>,
+          thead: ({ children }) => <thead className="bg-[var(--code-bg)]">{children}</thead>,
           tbody: ({ children }) => <tbody>{children}</tbody>,
-          tr: ({ children }) => <tr className="border-b border-[#1a1a2a]">{children}</tr>,
-          th: ({ children }) => <th className="text-left text-cyan-300 font-semibold px-2 py-1 border border-[#1a1a2a]">{children}</th>,
-          td: ({ children }) => <td className="px-2 py-1 border border-[#1a1a2a] align-top">{children}</td>,
+          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>,
         }}
       >
         {text}
@@ -348,8 +348,8 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
           {historyLoaded && messages.length === 0 && (
             <div className="text-center py-12">
               <div className="text-3xl mb-3">💬</div>
-              <div className="text-gray-500 text-sm">Start a conversation</div>
-              <div className="text-gray-600 text-xs mt-1">Send a task to {alias}</div>
+              <div className="text-[var(--fg-muted)] text-sm">Start a conversation</div>
+              <div className="text-[var(--fg-dim)] text-xs mt-1">Send a task to {alias}</div>
             </div>
           )}
 
@@ -368,16 +368,16 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
                 <div className="max-w-[85%] bg-cyan-500/8 border border-cyan-500/15 rounded-2xl rounded-br-md px-4 py-2.5 shadow-sm">
                   <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-gray-600">forwarded to {m.to_name}</span>}
+                    {!fromUser && <span className="text-[9px] text-[var(--fg-dim)]">forwarded to {m.to_name}</span>}
                   </div>
-                  <div className="text-[13px] text-gray-200">
+                  <div className="text-[13px] text-[var(--fg)]">
                     <MarkdownContent text={m.content} />
                   </div>
                   <div className="flex items-center justify-between mt-1.5 gap-3">
                     <StatusBar status={m.status} />
                     <div className="flex items-center gap-2 shrink-0">
                       {senderBadge}
-                      <span className="text-[9px] text-gray-600">{timeAgo(m.created_at)}</span>
+                      <span className="text-[9px] text-[var(--fg-dim)]">{timeAgo(m.created_at)}</span>
                     </div>
                   </div>
                 </div>
@@ -389,9 +389,9 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
                   <div className="max-w-[85%] bg-green-500/8 border border-green-500/15 rounded-2xl rounded-bl-md px-4 py-2.5 shadow-sm">
                     <div className="flex items-center gap-1.5 mb-1.5">
                       {m.to_name && <AliasAvatar alias={m.to_name} size={14} />}
-                      <span className="text-[10px] text-gray-200 font-medium">{m.to_name}</span>
+                      <span className="text-[10px] text-[var(--fg)] font-medium">{m.to_name}</span>
                     </div>
-                    <div className="text-[13px] text-gray-200">
+                    <div className="text-[13px] text-[var(--fg)]">
                       <MarkdownContent text={m.result} />
                     </div>
                   </div>
@@ -401,7 +401,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
               {/* Typing indicator when running */}
               {m.status === 'running' && !m.result && (
                 <div className="flex justify-start">
-                  <div className="bg-[#111128] border border-[#2a2a4a] rounded-2xl rounded-bl-md px-4 py-3">
+                  <div className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded-2xl rounded-bl-md px-4 py-3">
                     <div className="flex gap-1">
                       <span className="w-2 h-2 rounded-full bg-gray-500 animate-bounce" style={{ animationDelay: '0s' }} />
                       <span className="w-2 h-2 rounded-full bg-gray-500 animate-bounce" style={{ animationDelay: '0.15s' }} />
@@ -417,17 +417,17 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
         </div>
 
         {/* Input area */}
-        <div className="border-t border-[#2a2a4a] bg-[#0d0d1a] px-4 py-3">
+        <div className="border-t border-[var(--border)] bg-[var(--bg-secondary)] px-4 py-3">
           <div className="flex items-end gap-2">
             <div className="flex-1 relative">
               {/* @ mention dropdown */}
               {showMentions && filteredMentions.length > 0 && (
-                <div className="absolute bottom-full left-0 right-0 mb-1 bg-[#111128] border border-[#2a2a4a] rounded-lg shadow-xl shadow-black/50 overflow-hidden z-10 max-h-48 overflow-y-auto">
+                <div className="absolute bottom-full left-0 right-0 mb-1 bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg shadow-xl shadow-black/50 overflow-hidden z-10 max-h-48 overflow-y-auto">
                   {filteredMentions.map(node => (
                     <button key={node} onClick={() => insertMention(node)}
                       className="w-full flex items-center gap-2 px-3 py-2 text-xs text-left hover:bg-cyan-500/10 transition-colors">
                       <AliasAvatar alias={node} size={16} />
-                      <span className="text-gray-300">{node}</span>
+                      <span className="text-[var(--fg-muted)]">{node}</span>
                     </button>
                   ))}
                 </div>
@@ -439,11 +439,11 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
                 onKeyDown={handleKeyDown}
                 placeholder={`Message ${alias}...`}
                 rows={1}
-                className="w-full bg-[#111128] border border-[#2a2a4a] rounded-xl px-4 py-2.5 pr-16 text-sm text-white placeholder-gray-600 focus:border-cyan-500/40 focus:outline-none resize-none transition-colors"
+                className="w-full bg-[var(--bg-secondary)] border border-[var(--border)] rounded-xl px-4 py-2.5 pr-16 text-sm text-[var(--fg)] placeholder-[var(--fg-dim)] focus:border-cyan-500/40 focus:outline-none resize-none transition-colors"
               />
               <div className="absolute right-2 bottom-1.5 flex items-center gap-1">
                 <select value={priority} onChange={e => setPriority(e.target.value)}
-                  className="bg-transparent text-[9px] text-gray-600 focus:outline-none cursor-pointer">
+                  className="bg-transparent text-[9px] text-[var(--fg-dim)] focus:outline-none cursor-pointer">
                   <option value="normal">N</option>
                   <option value="high">H</option>
                   <option value="low">L</option>
@@ -451,7 +451,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
               </div>
             </div>
             <button onClick={send} disabled={sending || !input.trim()}
-              className="p-2.5 bg-cyan-600 hover:bg-cyan-500 disabled:bg-gray-800 disabled:text-gray-600 text-white rounded-xl transition-all shrink-0 active:scale-95">
+              className="p-2.5 bg-cyan-600 hover:bg-cyan-500 disabled:bg-[var(--border)] disabled:text-[var(--fg-dim)] text-[var(--fg)] rounded-xl transition-all shrink-0 active:scale-95">
               {sending ? (
                 <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
               ) : (
@@ -461,7 +461,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
               )}
             </button>
           </div>
-          <div className="flex justify-between text-[9px] text-gray-700 mt-1.5">
+          <div className="flex justify-between text-[9px] text-[var(--fg-dim)] mt-1.5">
             <span>{input.includes('@') ? `Sending to: ${targetAlias}` : `Type @ to mention another node`}</span>
             <span>Enter to send · Shift+Enter for newline</span>
           </div>
@@ -476,17 +476,17 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
   return (
     <>
       <div className="fixed inset-0 bg-black/30 z-40 lg:hidden anet-fade-in" onClick={onClose} />
-      <div className="fixed top-0 right-0 h-full w-full lg:w-[500px] bg-[#0a0a1a] border-l border-[#2a2a4a] z-50 flex flex-col shadow-2xl shadow-black/60 animate-slide-in">
+      <div className="fixed top-0 right-0 h-full w-full lg:w-[500px] bg-[var(--bg)] border-l border-[var(--border)] z-50 flex flex-col shadow-2xl shadow-black/60 animate-slide-in">
         {/* Header */}
-        <div className="flex items-center justify-between px-4 py-3 border-b border-[#2a2a4a] bg-[#0d0d1a]">
+        <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--border)] bg-[var(--bg-secondary)]">
           <div className="flex items-center gap-3">
             <AliasAvatar alias={alias} size={32} />
             <div>
-              <div className="text-sm font-semibold text-white">{alias}</div>
-              <div className="text-[10px] text-gray-500">{pollingIds.size > 0 ? 'Processing...' : 'Ready'}</div>
+              <div className="text-sm font-semibold text-[var(--fg)]">{alias}</div>
+              <div className="text-[10px] text-[var(--fg-muted)]">{pollingIds.size > 0 ? 'Processing...' : 'Ready'}</div>
             </div>
           </div>
-          <button onClick={onClose} className="text-gray-500 hover:text-white p-1.5 rounded-lg hover:bg-[#1a1a2a]">
+          <button onClick={onClose} className="text-[var(--fg-muted)] hover:text-[var(--fg)] p-1.5 rounded-lg hover:bg-[var(--bg-elevated)]">
             <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
               <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>