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

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

@@ -429,20 +429,21 @@ body {
    keep the existing tinted-pill look. */
 [data-theme="light"] .anet-nav-active,
 [data-theme="mint"] .anet-nav-active {
-  /* Active nav: 1 strong accent cue (3px left bar) + faint bg wash + bold text.
-     Replaces the four-emerald-stack (bg + border + text + ring) with a
-     calmer Linear/Vercel-style "current page" indicator. */
-  background-color: rgba(0, 158, 126, 0.06) !important;
+  /* 通信龙 final spec (Q1 + 3-piece lockdown): active nav = ONE cue.
+     4px left bar emerald, text in --fg (NOT emerald), NO bg tint.
+     Reads as a calm "current page" indicator without competing emerald
+     surfaces. (Earlier 0.4.3 had 3px + faint tint + emerald text.) */
+  background-color: transparent !important;
   border-color: transparent !important;
-  border-left: 3px solid var(--accent) !important;
+  border-left: 4px solid var(--accent) !important;
   border-radius: 0 8px 8px 0 !important;
-  padding-left: calc(0.75rem - 3px) !important;
-  color: var(--accent) !important;
+  padding-left: calc(0.75rem - 4px) !important;
+  color: var(--fg) !important;
   font-weight: 600;
 }
 [data-theme="light"] .anet-nav-active:hover,
 [data-theme="mint"] .anet-nav-active:hover {
-  background-color: rgba(0, 158, 126, 0.10) !important;
+  background-color: var(--bg-elevated) !important;
 }
 /* When sidebar is collapsed (w-16, justify-center) the left bar would look
    weird against a centered icon — switch to a left-bg accent instead. */
@@ -450,6 +451,105 @@ body {
 [data-theme="mint"] aside.w-16 .anet-nav-active {
   border-radius: 8px !important;
   padding-left: 0 !important;
+  border-left: 0 !important;
+  background-color: var(--bg-elevated) !important;
+  color: var(--accent) !important;
+}
+
+/* Q6: native <select> theming for light/mint.
+   Without this, dropdowns on Nodes / Messages / Logs / Settings render with
+   the OS default chrome (heavy chevron, off-spec font weight, no border
+   radius). We strip the native chrome with appearance-none, then paint our
+   own chevron via a background-image SVG. ~10 LOC. */
+[data-theme="light"] select,
+[data-theme="mint"] select {
+  -webkit-appearance: none !important;
+  -moz-appearance: none !important;
+  appearance: none !important;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23525a66' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 8l5 5 5-5'/%3E%3C/svg%3E") !important;
+  background-repeat: no-repeat !important;
+  background-position: right 0.6rem center !important;
+  background-size: 1rem 1rem !important;
+  padding-right: 2rem !important;
+  background-color: var(--bg-secondary) !important;
+  border-radius: 8px;
+}
+[data-theme="light"] select:focus,
+[data-theme="mint"] select:focus {
+  outline: 2px solid rgba(0, 158, 126, 0.2);
+  outline-offset: -1px;
+  border-color: var(--accent) !important;
+}
+/* Mint reuses the same chevron — color picker would need its own gray, but
+   accent is similar enough that the default chevron color reads OK. */
+
+/* KPI stat cards in light mode: kill the gradient wash (which reads as
+   pale-mud on white), replace with a 2px top accent strip per color
+   family + real elevation shadow. Dark themes keep the gradient. */
+[data-theme="light"] .anet-stat-card,
+[data-theme="mint"] .anet-stat-card {
+  border-top-width: 2px;
+  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 4px 12px -8px rgba(15, 23, 42, 0.08);
+}
+[data-theme="light"] .anet-stat-card:hover,
+[data-theme="mint"] .anet-stat-card:hover {
+  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06), 0 12px 24px -12px rgba(15, 23, 42, 0.16);
+}
+/* Top-strip colors per stat family */
+[data-theme="light"] .anet-stat-card[data-anet-stat-card="green"] { border-top-color: #10b981; }
+[data-theme="light"] .anet-stat-card[data-anet-stat-card="cyan"]  { border-top-color: var(--accent); }
+[data-theme="light"] .anet-stat-card[data-anet-stat-card="gray"]  { border-top-color: #94a3b8; }
+[data-theme="light"] .anet-stat-card[data-anet-stat-card="white"] { border-top-color: #3b82f6; }
+[data-theme="mint"]  .anet-stat-card[data-anet-stat-card="green"] { border-top-color: #16a34a; }
+[data-theme="mint"]  .anet-stat-card[data-anet-stat-card="cyan"]  { border-top-color: var(--accent); }
+[data-theme="mint"]  .anet-stat-card[data-anet-stat-card="gray"]  { border-top-color: #4ade80; }
+[data-theme="mint"]  .anet-stat-card[data-anet-stat-card="white"] { border-top-color: #0891b2; }
+/* Drop the gradient wash in light themes — looks like dust on white. */
+[data-theme="light"] .anet-stat-card > .pointer-events-none,
+[data-theme="mint"] .anet-stat-card > .pointer-events-none {
+  display: none;
+}
+
+/* Generic card hover elevation — every white card on light bg gets a
+   subtle lift on hover so clickability is obvious. */
+[data-theme="light"] .bg-\[\#111128\]:hover,
+[data-theme="mint"] .bg-\[\#111128\]:hover {
+  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.

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

@@ -1,8 +1,10 @@
 'use client';
 
 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;
@@ -84,17 +86,32 @@ export default function LogsPage() {
       </div>
 
       {error && (() => {
-        // Don't dump raw error JSON to users — translate known patterns.
+        // Don't dump raw error JSON to users — translate known patterns,
+        // and give them a clickable recovery affordance.
         const isAuth = /unauthor|401|forbidden|403|admin/i.test(error);
-        const human = isAuth
-          ? '需要登录才能查看审计日志（admin 角色可看全部）'
-          : '加载失败 —— 请稍后重试';
         return (
           <div className="anet-warn-chip bg-yellow-900/20 border border-yellow-800/40 text-yellow-300 px-4 py-3 rounded-lg mb-6 text-sm flex items-start gap-3" role="alert">
             <span aria-hidden className="text-base leading-none">⚠</span>
             <div className="flex-1">
-              <div className="font-medium">{human}</div>
-              <div className="text-xs opacity-70 mt-1">如果你已经登录但仍看到此提示，请用 admin 账号重新登录后查看。</div>
+              {isAuth ? (
+                <>
+                  <div className="font-medium">需要 admin 权限查看审计日志</div>
+                  <div className="text-xs opacity-80 mt-1">
+                    审计日志记录用户注册 / 登录 / 网络变更等事件，需要 admin 角色。
+                  </div>
+                  <Link href="/login" className="inline-block mt-2 text-xs font-medium underline underline-offset-4 hover:opacity-80">
+                    切到 admin 账号 →
+                  </Link>
+                </>
+              ) : (
+                <>
+                  <div className="font-medium">加载失败</div>
+                  <div className="text-xs opacity-80 mt-1">请检查 CommHub 是否在线，或稍后重试。</div>
+                  <button onClick={() => window.location.reload()} className="inline-block mt-2 text-xs font-medium underline underline-offset-4 hover:opacity-80">
+                    重新加载 →
+                  </button>
+                </>
+              )}
             </div>
           </div>
         );
@@ -105,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) => (