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

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/components/UserBar.tsx

@@ -140,8 +140,22 @@ export function UserBar() {
             ))}
           </select>
         )}
-        <button onClick={() => { setEditName(auth.user?.display_name || ''); setEditEmail(''); setEditing(!editing); }} className="text-xs text-gray-500 hover:text-gray-300">Edit</button>
-        <button onClick={logout} className="text-xs text-gray-500 hover:text-gray-300">Sign out</button>
+        <button onClick={() => { setEditName(auth.user?.display_name || ''); setEditEmail(''); setEditing(!editing); }}
+          className="text-xs text-gray-500 hover:text-gray-300 whitespace-nowrap"
+          aria-label="Edit profile">
+          <span className="hidden sm:inline">Edit</span>
+          <svg className="sm:hidden w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.862 4.487z" />
+          </svg>
+        </button>
+        <button onClick={logout}
+          className="text-xs text-gray-500 hover:text-gray-300 whitespace-nowrap"
+          aria-label="Sign out">
+          <span className="hidden sm:inline">Sign out</span>
+          <svg className="sm:hidden w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
+          </svg>
+        </button>
       </div>
       {editing && (
         <div className="flex flex-wrap items-center gap-2 mt-2 pt-2 border-t border-[#2a2a4a]">

package/app/globals.css

@@ -309,6 +309,66 @@ body {
 [data-theme="light"] .text-indigo-400 {
   color: var(--accent) !important;
 }
+
+/* Light theme: every "-300/400" accent text color needs a darker mid-tone
+   variant. The default Tailwind `-300/-400` shades are designed for dark
+   backgrounds — putting them on white gives "barely visible" text (the
+   problem Vincent flagged: "浅色下很多字体看不见"). Map each family to its
+   `-700` equivalent so contrast against white card is ≥ AA. */
+[data-theme="light"] .text-green-400,
+[data-theme="light"] .text-green-300,
+[data-theme="mint"]  .text-green-400,
+[data-theme="mint"]  .text-green-300 { color: #047857 !important; }
+
+[data-theme="light"] .text-yellow-400,
+[data-theme="light"] .text-yellow-300,
+[data-theme="mint"]  .text-yellow-400,
+[data-theme="mint"]  .text-yellow-300 { color: #92400e !important; }
+
+[data-theme="light"] .text-amber-400,
+[data-theme="light"] .text-amber-300,
+[data-theme="mint"]  .text-amber-400,
+[data-theme="mint"]  .text-amber-300 { color: #92400e !important; }
+
+[data-theme="light"] .text-red-400,
+[data-theme="light"] .text-red-300,
+[data-theme="mint"]  .text-red-400,
+[data-theme="mint"]  .text-red-300 { color: #b91c1c !important; }
+
+[data-theme="light"] .text-purple-400,
+[data-theme="light"] .text-purple-300,
+[data-theme="mint"]  .text-purple-400,
+[data-theme="mint"]  .text-purple-300 { color: #6d28d9 !important; }
+
+[data-theme="light"] .text-orange-400,
+[data-theme="light"] .text-orange-300,
+[data-theme="mint"]  .text-orange-400,
+[data-theme="mint"]  .text-orange-300 { color: #c2410c !important; }
+
+[data-theme="light"] .text-blue-400,
+[data-theme="light"] .text-blue-300,
+[data-theme="mint"]  .text-blue-400,
+[data-theme="mint"]  .text-blue-300 { color: #1d4ed8 !important; }
+
+[data-theme="light"] .text-pink-400,
+[data-theme="light"] .text-pink-300,
+[data-theme="mint"]  .text-pink-400,
+[data-theme="mint"]  .text-pink-300 { color: #be185d !important; }
+
+[data-theme="light"] .text-violet-400,
+[data-theme="light"] .text-violet-300,
+[data-theme="mint"]  .text-violet-400,
+[data-theme="mint"]  .text-violet-300 { color: #6d28d9 !important; }
+
+[data-theme="light"] .text-teal-400,
+[data-theme="light"] .text-teal-300,
+[data-theme="mint"]  .text-teal-400,
+[data-theme="mint"]  .text-teal-300 { color: #0f766e !important; }
+
+/* Light theme: text-gray-700 (used in footers / muted body) is too pale
+   when sitting on slightly-grey page bg. Bump to fg-muted. */
+[data-theme="light"] .text-gray-700,
+[data-theme="mint"]  .text-gray-700 { color: var(--fg-muted) !important; }
 [data-theme="light"] .bg-emerald-500\/10,
 [data-theme="light"] .bg-emerald-500\/20,
 [data-theme="light"] .bg-cyan-500\/10,
@@ -517,6 +577,121 @@ 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);
+}
+
+/* Health banner — sticky thin strip above content, with theme-aware
+   green/amber/red tints. Dark themes use the lower-opacity bg+border
+   that come from the component classes directly. Light/mint need
+   slightly more saturation so the tint reads on a white surface. */
+[data-theme="light"] .anet-health-banner.bg-emerald-500\/6,
+[data-theme="mint"] .anet-health-banner.bg-emerald-500\/6 {
+  background-color: rgba(16, 185, 129, 0.08) !important;
+  color: #047857 !important;
+  border-color: rgba(16, 185, 129, 0.25) !important;
+}
+[data-theme="light"] .anet-health-banner.bg-amber-500\/8,
+[data-theme="mint"] .anet-health-banner.bg-amber-500\/8 {
+  background-color: rgba(245, 158, 11, 0.12) !important;
+  color: #92400e !important;
+  border-color: rgba(245, 158, 11, 0.30) !important;
+}
+[data-theme="light"] .anet-health-banner.bg-red-500\/8,
+[data-theme="mint"] .anet-health-banner.bg-red-500\/8 {
+  background-color: rgba(220, 38, 38, 0.10) !important;
+  color: #b91c1c !important;
+  border-color: rgba(220, 38, 38, 0.30) !important;
+}
+
+/* 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; }
+}
+
+/* Skeleton pulse — same 1.6s rhythm as the brand pulse but applied to a
+   container so all bars inside breathe together. Drifts between full
+   token value and 60% so light themes show a calm grey-to-bg-elevated
+   fade and dark themes show a calm navy-to-elevated fade. */
+@keyframes anet-skeleton-kf {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.55; }
+}
+.anet-skeleton-pulse {
+  animation: anet-skeleton-kf 1.6s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .anet-skeleton-pulse { animation: none; }
+}
+
+/* Skeleton bar fill — different per theme so it's visible against the
+   card bg without being loud. Dark: lighter navy block on dark card.
+   Light: mid-grey on white card (not too light or it disappears). */
+.anet-skeleton-bar {
+  background-color: #1a1a2a;
+}
+[data-theme="light"] .anet-skeleton-bar,
+[data-theme="mint"] .anet-skeleton-bar {
+  background-color: #d4d8df;
+}
+
+/* Command palette modal surface — bumped depth so it sits clearly above
+   the page content in both themes. Light/mint: white shell with a real
+   shadow (not the dark navy that the CSS shim would normally translate
+   `bg-[#0d0d1a]` into). */
+.anet-cmdk kbd {
+  font-size: 9px;
+  line-height: 1;
+  padding: 1px 4px;
+  border: 1px solid currentColor;
+  border-radius: 3px;
+  opacity: 0.6;
+}
+[data-theme="light"] .anet-cmdk > div:not([aria-hidden]),
+[data-theme="mint"]  .anet-cmdk > div:not([aria-hidden]) {
+  background-color: var(--bg-secondary) !important;
+  box-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.18),
+              0 2px 6px -2px rgba(15, 23, 42, 0.10);
+}
+[data-theme="light"] .anet-cmdk-row.bg-cyan-500\/10,
+[data-theme="mint"]  .anet-cmdk-row.bg-cyan-500\/10 {
+  background-color: rgba(0, 158, 126, 0.08) !important;
+}
+
+/* Help overlay — same white-card-with-shadow treatment as cmdk on light */
+[data-theme="light"] .anet-help > div:not([aria-hidden]),
+[data-theme="mint"]  .anet-help > div:not([aria-hidden]) {
+  background-color: var(--bg-secondary) !important;
+  box-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.18),
+              0 2px 6px -2px rgba(15, 23, 42, 0.10);
+}
+
 /* 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 => (