@sleep2agi/agent-network-dashboard 0.4.4-preview.0 → 0.4.5-preview.0

package/app/components/LoadingSkeleton.tsx

@@ -45,21 +45,6 @@ export function LoadingSkeleton() {
   );
 }
 
-export function EmptyState({ hint }: { hint?: { global_count?: number; filtered_network?: string } }) {
-  return (
-    <div className="text-center py-16">
-      <div className="text-gray-600 text-4xl mb-4">--</div>
-      <h3 className="text-gray-400 text-lg font-medium mb-2">No agents in this network</h3>
-      {hint?.global_count ? (
-        <p className="text-gray-500 text-sm max-w-md mx-auto">
-          Server has <span className="text-cyan-400 font-medium">{hint.global_count}</span> nodes globally,
-          but none are registered to the current network. Switch network or contact admin.
-        </p>
-      ) : (
-        <p className="text-gray-600 text-sm max-w-md mx-auto">
-          Agent sessions will appear here once they connect to the CommHub.
-        </p>
-      )}
-    </div>
-  );
-}
+// EmptyState export removed in 0.4.5 — replaced by EmptyState.tsx with
+// per-variant glyphs and a NodesEmptyState wrapper for the Overview
+// hint-aware behavior. See app/components/EmptyState.tsx.

package/app/components/Sidebar.tsx

@@ -101,17 +101,11 @@ export function Sidebar() {
         ${mobileOpen ? 'translate-x-0' : '-translate-x-full'}
         lg:translate-x-0 lg:static lg:shrink-0
       `}>
-        {/* Logo */}
-        <div className={`px-4 py-5 border-b border-[#2a2a4a] ${collapsed ? 'text-center' : ''}`}>
-          {collapsed ? (
-            <span className="text-cyan-400 font-bold text-lg">A</span>
-          ) : (
-            <div>
-              <div className="text-white font-bold text-sm">Agent Network</div>
-              <div className="text-gray-600 text-xs">Dashboard</div>
-            </div>
-          )}
-        </div>
+        {/* Brand header — round 4: 3-node mesh mark matches /login,
+            with an inline live "online" pulse so every page surfaces
+            fleet health without leaving for /nodes. */}
+        <SidebarBrand collapsed={collapsed} />
+        <div className={`border-b border-[#2a2a4a]`} />
 
         {/* Network list */}
         {!collapsed && networks.length > 0 && (
@@ -174,3 +168,70 @@ export function Sidebar() {
     </>
   );
 }
+
+interface StatusData {
+  sessions?: Array<{ status?: string; alias?: string }>;
+}
+
+const statusFetcher = (url: string) =>
+  fetch(url).then(r => r.ok ? r.json() as Promise<StatusData> : { sessions: [] });
+
+function SidebarBrand({ collapsed }: { collapsed: boolean }) {
+  // Live online count — re-uses the same /api/hub/status endpoint the
+  // Overview already polls, so SWR dedupes the request. Pulse is muted —
+  // emerald dot at 4px with a 1.6s slow opacity pulse, no glow, no halo.
+  const { data } = useSWR<StatusData>('/api/hub/status', statusFetcher, {
+    refreshInterval: 10000,
+    dedupingInterval: 4000,
+  });
+  const sessions = data?.sessions || [];
+  const online = sessions.filter(s => s.status && s.status !== 'offline').length;
+  const total = sessions.length;
+
+  if (collapsed) {
+    return (
+      <Link href="/" className="block px-3 py-4 flex justify-center hover:opacity-80 transition-opacity" aria-label="Agent Network — home">
+        <BrandMark size={32} />
+      </Link>
+    );
+  }
+
+  return (
+    <Link
+      href="/"
+      className="block px-4 py-4 flex items-center gap-3 hover:bg-[#11112a]/40 transition-colors rounded-r-xl"
+      aria-label="Agent Network — home"
+    >
+      <BrandMark size={32} />
+      <div className="min-w-0">
+        <div className="text-white text-[13px] font-semibold leading-tight">Agent Network</div>
+        <div className="text-[10px] text-gray-500 flex items-center gap-1.5 mt-0.5">
+          <span
+            className={`inline-block w-1.5 h-1.5 rounded-full ${online > 0 ? 'bg-emerald-400 anet-brand-pulse' : 'bg-gray-600'}`}
+            aria-hidden
+          />
+          {total === 0 ? (
+            <span>waiting for agents</span>
+          ) : (
+            <span><span className="text-gray-300 font-medium tabular-nums">{online}</span><span className="text-gray-600">/{total}</span> online</span>
+          )}
+        </div>
+      </div>
+    </Link>
+  );
+}
+
+/** 3-node mesh mark — same SVG as /login, reusable. */
+function BrandMark({ size }: { size: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 32 32" aria-hidden className="shrink-0">
+      <circle cx="16" cy="16" r="10" fill="none" stroke="currentColor" strokeWidth="1.5" opacity="0.2" className="text-cyan-400" />
+      <line x1="16" y1="10" x2="10" y2="20" stroke="currentColor" strokeWidth="1" opacity="0.45" className="text-cyan-400" />
+      <line x1="16" y1="10" x2="22" y2="20" stroke="currentColor" strokeWidth="1" opacity="0.45" className="text-cyan-400" />
+      <line x1="10" y1="20" x2="22" y2="20" stroke="currentColor" strokeWidth="1" opacity="0.45" className="text-cyan-400" />
+      <circle cx="16" cy="10" r="2.5" fill="currentColor" className="text-cyan-400" />
+      <circle cx="10" cy="20" r="2.5" fill="currentColor" className="text-green-400" />
+      <circle cx="22" cy="20" r="2.5" fill="currentColor" className="text-violet-400" />
+    </svg>
+  );
+}

package/app/components/TopoGraph.tsx

@@ -63,42 +63,123 @@ function truncate(value: string, max: number) {
   return value.length > max ? `${value.slice(0, max - 1)}...` : value;
 }
 
-function nodeStatus(session: Session, isOnline: boolean) {
+function nodeStatus(session: Session, isOnline: boolean, isLight: boolean) {
   if (!isOnline) {
     return {
       label: 'offline',
-      primary: '#6b7280',
-      halo: '#111827',
-      text: '#9ca3af',
+      primary: isLight ? '#94a3b8' : '#6b7280',
+      halo:    isLight ? '#e2e8f0' : '#111827',
+      text:    isLight ? '#475569' : '#9ca3af',
     };
   }
-
   if (session.status === 'working') {
     return {
       label: 'working',
-      primary: '#22c55e',
-      halo: '#14532d',
-      text: '#dcfce7',
+      primary: isLight ? '#059669' : '#22c55e',
+      halo:    isLight ? '#d1fae5' : '#14532d',
+      text:    isLight ? '#065f46' : '#dcfce7',
     };
   }
-
   if (session.status === 'idle') {
     return {
       label: 'idle',
-      primary: '#2dd4bf',
-      halo: '#134e4a',
-      text: '#ccfbf1',
+      primary: isLight ? '#0d9488' : '#2dd4bf',
+      halo:    isLight ? '#ccfbf1' : '#134e4a',
+      text:    isLight ? '#115e59' : '#ccfbf1',
     };
   }
-
   return {
     label: session.status || 'online',
-    primary: '#38bdf8',
-    halo: '#0c4a6e',
-    text: '#e0f2fe',
+    primary: isLight ? '#0284c7' : '#38bdf8',
+    halo:    isLight ? '#dbeafe' : '#0c4a6e',
+    text:    isLight ? '#0c4a6e' : '#e0f2fe',
   };
 }
 
+/** Theme-aware color palette for the topology SVG. */
+interface Palette {
+  panelStops: [string, string, string];
+  radarStops: { color: string; opacity: number }[];
+  arrowFill: string;
+  ringStroke: string;
+  spokeStroke: { active: string; idle: string };
+  flowEdge: string;
+  flowPath: string;
+  flowParticle: string;
+  nodeFill: { online: string; offline: string };
+  labelBox: { fill: string; stroke: string };
+  legendBox: { fill: string; stroke: string };
+  legendText: string;
+  legendHeadline: string;
+  legendAccent: string;
+  containerBg: string;
+  containerBorder: string;
+  topRailGradient: string;
+}
+
+const DARK_PALETTE: Palette = {
+  panelStops: ['#0b1220', '#080814', '#101018'],
+  radarStops: [
+    { color: '#22d3ee', opacity: 0.18 },
+    { color: '#22c55e', opacity: 0.045 },
+    { color: '#020617', opacity: 0 },
+  ],
+  arrowFill: '#67e8f9',
+  ringStroke: '#164e63',
+  spokeStroke: { active: '#22d3ee', idle: '#155e75' },
+  flowEdge: '#67e8f9',
+  flowPath: '#e0f2fe',
+  flowParticle: '#fef08a',
+  nodeFill: { online: '#020617', offline: '#080814' },
+  labelBox: { fill: '#020617', stroke: '#1f2937' },
+  legendBox: { fill: '#020617', stroke: '#1f2937' },
+  legendText: '#94a3b8',
+  legendHeadline: '#e5e7eb',
+  legendAccent: '#67e8f9',
+  containerBg: '#080814',
+  containerBorder: '#2a2a4a',
+  topRailGradient: 'from-transparent via-cyan-400/70 to-transparent',
+};
+
+const LIGHT_PALETTE: Palette = {
+  panelStops: ['#f8fafc', '#ffffff', '#f1f5f9'],
+  radarStops: [
+    { color: '#10b981', opacity: 0.06 },
+    { color: '#3b82f6', opacity: 0.03 },
+    { color: '#ffffff', opacity: 0 },
+  ],
+  arrowFill: '#10b981',
+  ringStroke: '#cbd5e1',
+  spokeStroke: { active: '#10b981', idle: '#cbd5e1' },
+  flowEdge: '#10b981',
+  flowPath: '#475569',
+  flowParticle: '#f59e0b',
+  nodeFill: { online: '#ffffff', offline: '#f8fafc' },
+  labelBox: { fill: '#ffffff', stroke: '#e2e8f0' },
+  legendBox: { fill: '#ffffff', stroke: '#e2e8f0' },
+  legendText: '#475569',
+  legendHeadline: '#0f172a',
+  legendAccent: '#0d9488',
+  containerBg: '#ffffff',
+  containerBorder: '#e3e6eb',
+  topRailGradient: 'from-transparent via-emerald-500/40 to-transparent',
+};
+
+function useTheme(): 'light' | 'dark' {
+  const [theme, setTheme] = useState<'light' | 'dark'>('dark');
+  useEffect(() => {
+    const read = () => {
+      const t = document.documentElement.getAttribute('data-theme') || 'cyber';
+      setTheme(t === 'light' || t === 'mint' ? 'light' : 'dark');
+    };
+    read();
+    const obs = new MutationObserver(read);
+    obs.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+    return () => obs.disconnect();
+  }, []);
+  return theme;
+}
+
 function buildFlowLinks(messages: MessageFlow[], positions: Record<string, Point>) {
   const links = new Map<string, FlowLink>();
 
@@ -127,6 +208,9 @@ function buildFlowLinks(messages: MessageFlow[], positions: Record<string, Point
 }
 
 export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
+  const theme = useTheme();
+  const isLight = theme === 'light';
+  const pal = isLight ? LIGHT_PALETTE : DARK_PALETTE;
   const [messages, setMessages] = useState<MessageFlow[]>([]);
 
   useEffect(() => {
@@ -206,30 +290,35 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
         </div>
       </div>
 
-      <div className="relative overflow-hidden rounded-lg border border-[#2a2a4a] bg-[#080814] shadow-2xl shadow-cyan-950/30">
-        <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-cyan-400/70 to-transparent" />
+      <div
+        className={`relative overflow-hidden rounded-lg border shadow-2xl ${isLight ? 'shadow-zinc-900/5' : 'shadow-cyan-950/30'}`}
+        style={{ background: pal.containerBg, borderColor: pal.containerBorder }}
+      >
+        <div className={`absolute inset-x-0 top-0 h-px bg-gradient-to-r ${pal.topRailGradient}`} />
 
         <svg viewBox="0 0 1000 680" className="w-full h-auto block" preserveAspectRatio="xMidYMid meet">
           <defs>
             <linearGradient id="topo-panel" x1="0" x2="1" y1="0" y2="1">
-              <stop offset="0%" stopColor="#0b1220" />
-              <stop offset="48%" stopColor="#080814" />
-              <stop offset="100%" stopColor="#101018" />
+              <stop offset="0%"   stopColor={pal.panelStops[0]} />
+              <stop offset="48%"  stopColor={pal.panelStops[1]} />
+              <stop offset="100%" stopColor={pal.panelStops[2]} />
             </linearGradient>
             <radialGradient id="topo-radar" cx="50%" cy="50%" r="55%">
-              <stop offset="0%" stopColor="#22d3ee" stopOpacity="0.18" />
-              <stop offset="45%" stopColor="#22c55e" stopOpacity="0.045" />
-              <stop offset="100%" stopColor="#020617" stopOpacity="0" />
+              <stop offset="0%"   stopColor={pal.radarStops[0].color} stopOpacity={pal.radarStops[0].opacity} />
+              <stop offset="45%"  stopColor={pal.radarStops[1].color} stopOpacity={pal.radarStops[1].opacity} />
+              <stop offset="100%" stopColor={pal.radarStops[2].color} stopOpacity={pal.radarStops[2].opacity} />
             </radialGradient>
-            <filter id="topo-glow">
-              <feGaussianBlur stdDeviation="4" result="blur" />
-              <feMerge>
-                <feMergeNode in="blur" />
-                <feMergeNode in="SourceGraphic" />
-              </feMerge>
-            </filter>
+            {!isLight && (
+              <filter id="topo-glow">
+                <feGaussianBlur stdDeviation="4" result="blur" />
+                <feMerge>
+                  <feMergeNode in="blur" />
+                  <feMergeNode in="SourceGraphic" />
+                </feMerge>
+              </filter>
+            )}
             <marker id="topo-arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
-              <path d="M 0 0 L 10 5 L 0 10 z" fill="#67e8f9" />
+              <path d="M 0 0 L 10 5 L 0 10 z" fill={pal.arrowFill} />
             </marker>
           </defs>
 
@@ -238,7 +327,7 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
 
           {/* radar rings */}
           {[90, 170, 250, 330].map(radius => (
-            <circle key={radius} cx={cx} cy={cy} r={radius} fill="none" stroke="#164e63" strokeWidth="1" opacity="0.35" />
+            <circle key={radius} cx={cx} cy={cy} r={radius} fill="none" stroke={pal.ringStroke} strokeWidth="1" opacity={isLight ? 0.6 : 0.35} />
           ))}
           {[0, 30, 60, 90, 120, 150].map(angle => (
             <line
@@ -247,9 +336,9 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
               y1={cy - 360 * Math.sin(angle * Math.PI / 180)}
               x2={cx + 360 * Math.cos(angle * Math.PI / 180)}
               y2={cy + 360 * Math.sin(angle * Math.PI / 180)}
-              stroke="#164e63"
+              stroke={pal.ringStroke}
               strokeWidth="1"
-              opacity="0.18"
+              opacity={isLight ? 0.35 : 0.18}
             />
           ))}
 
@@ -264,7 +353,7 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
                 key={`hub-${session.alias}`}
                 d={path}
                 fill="none"
-                stroke={activeAliases.has(session.alias) ? '#22d3ee' : '#155e75'}
+                stroke={activeAliases.has(session.alias) ? pal.spokeStroke.active : pal.spokeStroke.idle}
                 strokeWidth={activeAliases.has(session.alias) ? 2 : 1}
                 strokeDasharray={activeAliases.has(session.alias) ? 'none' : '8 10'}
                 opacity={activeAliases.has(session.alias) ? 0.65 : 0.35}
@@ -288,22 +377,22 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
                 <path
                   d={path}
                   fill="none"
-                  stroke="#67e8f9"
+                  stroke={pal.flowEdge}
                   strokeWidth={width}
-                  opacity="0.28"
-                  filter="url(#topo-glow)"
+                  opacity={isLight ? 0.22 : 0.28}
+                  filter={isLight ? undefined : 'url(#topo-glow)'}
                   markerEnd="url(#topo-arrow)"
                 />
                 <path
                   id={`flow-path-${index}`}
                   d={path}
                   fill="none"
-                  stroke="#e0f2fe"
+                  stroke={pal.flowPath}
                   strokeWidth="1"
                   strokeDasharray="2 12"
-                  opacity="0.75"
+                  opacity={isLight ? 0.4 : 0.75}
                 />
-                <circle r="4" fill="#fef08a" filter="url(#topo-glow)">
+                <circle r="4" fill={pal.flowParticle} filter={isLight ? undefined : 'url(#topo-glow)'}>
                   <animateMotion dur={`${duration}s`} repeatCount="indefinite" path={path} />
                 </circle>
               </g>
@@ -340,38 +429,38 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
 
             const sseCountFor = (session.network_id ? sseSessions[`${session.network_id}:${session.alias}`] : undefined) ?? sseSessions[session.alias];
             const isOnline = session.status !== 'offline' || !!sseCountFor;
-            const status = nodeStatus(session, isOnline);
+            const status = nodeStatus(session, isOnline, isLight);
             const isActive = activeAliases.has(session.alias);
             const radius = isOnline ? 26 : 18;
 
             return (
               <g key={session.alias} className="transition-opacity">
                 {isActive && (
-                  <circle cx={pos.x} cy={pos.y} r={radius + 14} fill={status.primary} opacity="0.12">
+                  <circle cx={pos.x} cy={pos.y} r={radius + 14} fill={status.primary} opacity={isLight ? 0.08 : 0.12}>
                     <animate attributeName="r" values={`${radius + 8};${radius + 22};${radius + 8}`} dur="2.4s" repeatCount="indefinite" />
-                    <animate attributeName="opacity" values="0.18;0.04;0.18" dur="2.4s" repeatCount="indefinite" />
+                    <animate attributeName="opacity" values={isLight ? '0.12;0.02;0.12' : '0.18;0.04;0.18'} dur="2.4s" repeatCount="indefinite" />
                   </circle>
                 )}
-                <circle cx={pos.x} cy={pos.y} r={radius + 8} fill={status.halo} opacity={isOnline ? 0.55 : 0.25} />
+                <circle cx={pos.x} cy={pos.y} r={radius + 8} fill={status.halo} opacity={isOnline ? (isLight ? 0.85 : 0.55) : (isLight ? 0.4 : 0.25)} />
                 <circle
                   cx={pos.x}
                   cy={pos.y}
                   r={radius}
-                  fill={isOnline ? '#020617' : '#080814'}
+                  fill={isOnline ? pal.nodeFill.online : pal.nodeFill.offline}
                   stroke={status.primary}
                   strokeWidth={isOnline ? 3 : 1.5}
                   strokeDasharray={isOnline ? 'none' : '5 5'}
-                  filter={isOnline ? 'url(#topo-glow)' : undefined}
+                  filter={isOnline && !isLight ? 'url(#topo-glow)' : undefined}
                 />
                 <circle cx={pos.x} cy={pos.y} r={isOnline ? 8 : 5} fill={status.primary} />
                 {session.status === 'working' && (
-                  <path d={`M${pos.x - 9},${pos.y + 11} h18`} stroke="#fef08a" strokeWidth="3" strokeLinecap="round">
+                  <path d={`M${pos.x - 9},${pos.y + 11} h18`} stroke={pal.flowParticle} strokeWidth="3" strokeLinecap="round">
                     <animate attributeName="opacity" values="1;0.25;1" dur="1.1s" repeatCount="indefinite" />
                   </path>
                 )}
 
                 <g transform={`translate(${pos.x}, ${pos.y + radius + 22})`}>
-                  <rect x="-62" y="-14" width="124" height="42" rx="6" fill="#020617" stroke="#1f2937" opacity="0.94" />
+                  <rect x="-62" y="-14" width="124" height="42" rx="6" fill={pal.labelBox.fill} stroke={pal.labelBox.stroke} opacity={isLight ? 1 : 0.94} />
                   <text x="0" y="1" textAnchor="middle" fill={status.text} fontSize="12" fontFamily="monospace" fontWeight="700">
                     {truncate(session.alias, 14)}
                   </text>
@@ -385,11 +474,11 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
 
           {/* latest flow labels */}
           <g transform="translate(28, 34)">
-            <rect x="0" y="0" width="285" height={60 + Math.min(flowLinks.length, 4) * 20} rx="8" fill="#020617" stroke="#1f2937" opacity="0.94" />
-            <text x="16" y="26" fill="#e5e7eb" fontSize="13" fontFamily="monospace" fontWeight="700">recent signal</text>
-            <text x="178" y="26" fill="#67e8f9" fontSize="11" fontFamily="monospace">{messages.length} messages</text>
+            <rect x="0" y="0" width="285" height={60 + Math.min(flowLinks.length, 4) * 20} rx="8" fill={pal.legendBox.fill} stroke={pal.legendBox.stroke} opacity={isLight ? 1 : 0.94} />
+            <text x="16" y="26" fill={pal.legendHeadline} fontSize="13" fontFamily="monospace" fontWeight="700">recent signal</text>
+            <text x="178" y="26" fill={pal.legendAccent} fontSize="11" fontFamily="monospace">{messages.length} messages</text>
             {flowLinks.slice(0, 4).map((link, index) => (
-              <text key={link.key} x="16" y={54 + index * 20} fill="#94a3b8" fontSize="10" fontFamily="monospace">
+              <text key={link.key} x="16" y={54 + index * 20} fill={pal.legendText} fontSize="10" fontFamily="monospace">
                 {truncate(link.from, 8)} {'->'} {truncate(link.to, 8)} / {link.count} / {truncate(link.content, 18)}
               </text>
             ))}
@@ -397,14 +486,14 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
 
           {/* legend */}
           <g transform="translate(720, 34)">
-            <rect x="0" y="0" width="250" height="112" rx="8" fill="#020617" stroke="#1f2937" opacity="0.94" />
-            <circle cx="18" cy="26" r="6" fill="#22c55e" />
-            <text x="34" y="30" fill="#94a3b8" fontSize="11" fontFamily="monospace">working node</text>
-            <circle cx="18" cy="52" r="6" fill="#2dd4bf" />
-            <text x="34" y="56" fill="#94a3b8" fontSize="11" fontFamily="monospace">online idle</text>
-            <circle cx="18" cy="78" r="6" fill="#6b7280" />
-            <text x="34" y="82" fill="#94a3b8" fontSize="11" fontFamily="monospace">offline / no SSE</text>
-            <path d="M150,78 Q176,52 210,78" fill="none" stroke="#67e8f9" strokeWidth="3" markerEnd="url(#topo-arrow)" />
+            <rect x="0" y="0" width="250" height="112" rx="8" fill={pal.legendBox.fill} stroke={pal.legendBox.stroke} opacity={isLight ? 1 : 0.94} />
+            <circle cx="18" cy="26" r="6" fill={isLight ? '#059669' : '#22c55e'} />
+            <text x="34" y="30" fill={pal.legendText} fontSize="11" fontFamily="monospace">working node</text>
+            <circle cx="18" cy="52" r="6" fill={isLight ? '#0d9488' : '#2dd4bf'} />
+            <text x="34" y="56" fill={pal.legendText} fontSize="11" fontFamily="monospace">online idle</text>
+            <circle cx="18" cy="78" r="6" fill={isLight ? '#94a3b8' : '#6b7280'} />
+            <text x="34" y="82" fill={pal.legendText} fontSize="11" fontFamily="monospace">offline / no SSE</text>
+            <path d="M150,78 Q176,52 210,78" fill="none" stroke={pal.flowEdge} strokeWidth="3" markerEnd="url(#topo-arrow)" />
           </g>
         </svg>
       </div>

package/app/globals.css

@@ -517,6 +517,41 @@ body {
   box-shadow: 0 6px 18px -10px rgba(15, 23, 42, 0.12);
 }
 
+/* ─────────────────────────────────────────────────────────────────────
+   Login surface (round 1 polish)
+   Restrained, minimal — first impression for new Agent Network users.
+   ─────────────────────────────────────────────────────────────────── */
+.anet-login-bg {
+  background:
+    radial-gradient(circle at 50% 30%, rgba(34, 211, 238, 0.05), transparent 55%),
+    radial-gradient(circle at 33% 75%, rgba(59, 130, 246, 0.045), transparent 55%);
+}
+[data-theme="light"] .anet-login-bg,
+[data-theme="mint"] .anet-login-bg {
+  background-image:
+    radial-gradient(circle at 50% 35%, rgba(0, 158, 126, 0.06), transparent 60%),
+    radial-gradient(circle, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
+  background-size: 100% 100%, 24px 24px;
+}
+[data-theme="light"] .anet-login-mark,
+[data-theme="mint"] .anet-login-mark {
+  background: var(--bg-secondary) !important;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px var(--border);
+}
+
+/* Sidebar brand "online" pulse — slow, restrained, NO glow.
+   1.6s opacity drift between 1.0 and 0.5; nothing scales, nothing blurs. */
+@keyframes anet-brand-pulse-kf {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.4; }
+}
+.anet-brand-pulse {
+  animation: anet-brand-pulse-kf 1.6s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .anet-brand-pulse { animation: none; }
+}
+
 /* P0-3 baseline: error / warning chip colors for light themes.
    The component-level copy (replacing raw JSON with human text) is fixed
    in the Logs / Server-Logs page components separately. */

package/app/login/page.tsx

@@ -44,21 +44,32 @@ export default function LoginPage() {
   };
 
   return (
-    <main className="min-h-screen bg-[#0a0a1a] text-gray-100 font-mono flex items-center justify-center relative overflow-hidden">
-      <div className="absolute inset-0 pointer-events-none">
-        <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[600px] h-[600px] rounded-full bg-cyan-500/5 blur-[120px]" />
-        <div className="absolute bottom-1/4 left-1/3 w-[400px] h-[400px] rounded-full bg-blue-500/5 blur-[100px]" />
-      </div>
+    <main className="min-h-screen bg-[#0a0a1a] text-gray-100 font-mono flex items-center justify-center relative overflow-hidden px-4 py-10 sm:py-16">
+      {/* Subtle off-grid background — restraint over AI-glow.
+          Dark themes get a faint radial wash; light themes show a low-contrast
+          dotted grid for surface texture without noise. */}
+      <div className="absolute inset-0 pointer-events-none anet-login-bg" aria-hidden />
 
-      <div className="relative w-full max-w-sm mx-4">
-        <div className="text-center mb-8">
-          <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 border border-cyan-500/20 mb-4">
-            <svg className="w-8 h-8 text-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-              <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
+      <div className="relative w-full max-w-sm">
+        <div className="text-center mb-7">
+          {/* Brand mark — uses the favicon 3-node mesh SVG which IS the
+              agent-network concept (nodes + edges). Replaces the previous
+              flat emerald square placeholder. */}
+          <div className="inline-flex items-center justify-center w-16 h-16 mb-4 rounded-2xl bg-[#111128] border border-[#2a2a4a] anet-login-mark">
+            <svg className="w-9 h-9" viewBox="0 0 32 32" aria-hidden>
+              <circle cx="16" cy="16" r="10" fill="none" stroke="currentColor" strokeWidth="1.5" opacity="0.25" className="text-cyan-400 anet-login-mark-ring" />
+              <line x1="16" y1="10" x2="10" y2="20" stroke="currentColor" strokeWidth="1" opacity="0.5" className="text-cyan-400 anet-login-mark-edge" />
+              <line x1="16" y1="10" x2="22" y2="20" stroke="currentColor" strokeWidth="1" opacity="0.5" className="text-cyan-400 anet-login-mark-edge" />
+              <line x1="10" y1="20" x2="22" y2="20" stroke="currentColor" strokeWidth="1" opacity="0.5" className="text-cyan-400 anet-login-mark-edge" />
+              <circle cx="16" cy="10" r="3" fill="currentColor" className="text-cyan-400 anet-login-mark-node-a" />
+              <circle cx="10" cy="20" r="3" fill="currentColor" className="text-green-400 anet-login-mark-node-b" />
+              <circle cx="22" cy="20" r="3" fill="currentColor" className="text-violet-400 anet-login-mark-node-c" />
             </svg>
           </div>
-          <h1 className="text-2xl font-bold text-white tracking-tight">Agent Network</h1>
-          <p className="text-sm text-gray-500 mt-1">Dashboard</p>
+          <h1 className="text-[22px] sm:text-2xl font-semibold text-white tracking-tight">Agent Network</h1>
+          <p className="text-[13px] text-gray-500 mt-1.5 leading-snug">
+            One control plane for your AI agents · <span className="text-gray-600">Tasks · Mesh · Messages</span>
+          </p>
         </div>
 
         {/* Mode toggle */}
@@ -96,7 +107,9 @@ export default function LoginPage() {
           </button>
         </form>
 
-        <p className="text-center text-xs text-gray-700 mt-6">Powered by Sleep2AGI</p>
+        <p className="text-center text-[11px] text-gray-700 mt-6">
+          Sleep2AGI · Apache-2.0 · <a href="https://anet.sh" className="hover:text-gray-500 transition-colors">anet.sh</a>
+        </p>
       </div>
     </main>
   );

package/app/logs/page.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, useCallback } from 'react';
 import Link from 'next/link';
 import { timeAgo } from '../components/utils';
 import { useNetworkId } from '../lib/network-context';
+import { EmptyState } from '../components/EmptyState';
 
 interface AuditLog {
   id: string;
@@ -121,11 +122,7 @@ export default function LogsPage() {
           {[1,2,3,4,5].map(i => <div key={i} className="h-14 bg-gray-800/20 rounded-lg" />)}
         </div>
       ) : logs.length === 0 ? (
-        <div className="text-center py-16">
-          <div className="text-gray-600 text-4xl mb-4">--</div>
-          <h3 className="text-gray-400 text-lg font-medium mb-2">No audit logs</h3>
-          <p className="text-gray-600 text-sm">Events will appear here when users register, login, or perform actions.</p>
-        </div>
+        <EmptyState variant="logs" />
       ) : (
         <div className="space-y-2">
           {logs.map(log => (

package/app/messages/page.tsx

@@ -3,6 +3,7 @@
 import { useMemo, useState } from 'react';
 import { useMessages } from '../lib/hooks';
 import { timeAgo } from '../components/utils';
+import { EmptyState } from '../components/EmptyState';
 
 interface MessageItem {
   id: string;
@@ -186,11 +187,7 @@ export default function MessagesPage() {
           {[1, 2, 3, 4, 5].map(i => <div key={i} className="h-20 rounded-2xl bg-gray-800/20" />)}
         </div>
       ) : filtered.length === 0 ? (
-        <div className="text-center py-16">
-          <div className="text-gray-600 text-4xl mb-4">--</div>
-          <h3 className="text-gray-400 text-lg font-medium mb-2">No messages</h3>
-          <p className="text-gray-600 text-sm">Messages between agents will appear here.</p>
-        </div>
+        <EmptyState variant="messages" />
       ) : viewMode === 'grouped' ? (
         <div className="space-y-4">
           {conversations.map((conv, ci) => (

package/app/nodes/page.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link';
 import { timeAgo } from '../components/utils';
 import { useSessions, useHealth } from '../lib/hooks';
 import { TaskChatPanel } from '../components/TaskChatPanel';
+import { EmptyState } from '../components/EmptyState';
 import type { Session } from '../components/types';
 
 const STATUS_COLORS: Record<string, string> = {
@@ -163,7 +164,11 @@ export default function NodesPage() {
           {[1,2,3,4].map(i => <div key={i} className="h-16 bg-gray-800/20 rounded-lg" />)}
         </div>
       ) : filtered.length === 0 ? (
-        <div className="text-center py-16 text-gray-600">No nodes match your filters.</div>
+        <EmptyState
+          variant="nodes"
+          title="No nodes match your filters"
+          sub="Try clearing search or status filters, or wait for an agent to register."
+        />
       ) : viewMode === 'grid' ? (
         <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
           {filtered.map(s => {