@sleep2agi/agent-network-dashboard 0.5.7-preview.7 → 0.5.7-preview.73

package/app/components/StatsBar.tsx

@@ -4,29 +4,35 @@ interface StatsBarProps {
   online: number;
   working: number;
   total: number;
-  version: string;
-  uptime: string;
 }
 
-export function StatsBar({ online, working, total, version, uptime }: StatsBarProps) {
+export function StatsBar({ online, working, total }: StatsBarProps) {
   const onlinePercent = total > 0 ? Math.round((online / total) * 100) : 0;
   const fleetEmpty = total === 0;
 
+  // #209 R29 (mobile vertical rhythm — goal "大幅提升移动端体验"):
+  // populated branch previously left mb-8 (32 px) below the 4-card grid,
+  // the single biggest gap on the Overview page. Drop to mb-4 (16 px)
+  // on phones, restore mb-8 from sm: up. Pairs with R28's section-gap
+  // tighten — together they reclaim ~48 px of pure scroll waste before
+  // the agent grid. The empty-fleet branch already used mb-4 since R72,
+  // so this only touches the populated case.
   return (
-    <div className={fleetEmpty ? 'mb-4' : 'mb-8'}>
-      {/* Title row */}
-      <div className="flex flex-wrap items-center gap-3 mb-4">
-        <h1 className="text-2xl font-bold text-white tracking-tight">Agent Network</h1>
-        <span className="text-xs text-gray-500">
-          CommHub {version} &middot; {uptime}
-        </span>
+    <div className={fleetEmpty ? 'mb-4' : 'mb-4 sm:mb-8'}>
+      {/* Title row. #217 S3 dropped the version/uptime subtitle (lives in
+          Settings → CommHub Connection). S9 (Vincent tg 613 "没居中"):
+          WeChat-style centered title on phones — centering also clears
+          the fixed hamburger symmetrically, replacing the old ml-10
+          indent that read as misalignment. Left-aligned from lg: up. */}
+      <div className="mb-4">
+        <h1 className="text-2xl font-bold text-white tracking-tight text-center lg:text-left">Agent Network</h1>
       </div>
 
       {fleetEmpty ? (
         /* Round 72: thin status strip replaces the 4-card grid when fleet
            is empty. Saves ~280px on mobile (CTA y=650 → ~370) and keeps
            the same data visible in a single inline row. */
-        <div className="anet-stat-strip flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-gray-500 border-t border-b border-[#2a2a4a] py-2">
+        <div className="anet-stat-strip flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-gray-500 border-t border-b border-[#26262b] py-2">
           <span className="inline-flex items-center gap-1.5">
             <span aria-hidden className="inline-block w-1.5 h-1.5 rounded-full bg-gray-600" />
             <span className="text-gray-300 tabular-nums">0</span> online
@@ -43,63 +49,84 @@ export function StatsBar({ online, working, total, version, uptime }: StatsBarPr
           </span>
         </div>
       ) : (
-        /* Populated state — full 4-card grid as before */
-        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+        <>
+        {/* #217 M1 (Vincent: "再简洁点你自己理解一下"): on phones the
+            populated state reuses the round-72 thin strip instead of
+            the card grid — one quiet line of numbers, ~70px reclaimed.
+            Cards return from sm: up where they have room to breathe. */}
+        <div className="sm:hidden anet-stat-strip flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-gray-500 border-t border-b border-[#26262b] py-2">
+          <span className="inline-flex items-center gap-1.5">
+            <span aria-hidden className="inline-block w-1.5 h-1.5 rounded-full bg-green-400" />
+            <span className="text-gray-200 tabular-nums">{online}</span> online
+          </span>
+          {working > 0 && (
+            <>
+              <span className="text-gray-700">·</span>
+              <span className="inline-flex items-center gap-1.5">
+                <span aria-hidden className="inline-block w-1.5 h-1.5 rounded-full bg-green-400 anet-brand-pulse" />
+                <span className="text-gray-200 tabular-nums">{working}</span> working
+              </span>
+            </>
+          )}
+          <span className="text-gray-700">·</span>
+          <span className="inline-flex items-center gap-1.5">
+            <span aria-hidden className="inline-block w-1.5 h-1.5 rounded-full bg-gray-600" />
+            <span className="text-gray-200 tabular-nums">{total - online}</span> offline
+          </span>
+          <span className="text-gray-700">·</span>
+          <span className="inline-flex items-center gap-1.5">
+            <span className="text-gray-200 tabular-nums">{total}</span> total
+          </span>
+        </div>
+        {/* Populated state, sm: up. #217 S2 (less is more): the Working
+           card only earns its grid cell when something is actually
+           working. */}
+        <div className={`hidden sm:grid gap-3 ${working > 0 ? 'sm:grid-cols-4' : 'sm:grid-cols-3'}`}>
           <StatCard
             value={online}
             label="Online"
             sub={`${onlinePercent}% of fleet`}
             color="text-green-400"
-            accent="from-green-500/20 to-green-500/0"
-            border="border-green-500/15"
-          />
-          <StatCard
-            value={working}
-            label="Working"
-            sub={online > 0 ? `${Math.round((working / online) * 100)}% utilization` : '--'}
-            color="text-cyan-400"
-            accent="from-cyan-500/20 to-cyan-500/0"
-            border="border-cyan-500/15"
           />
+          {working > 0 && (
+            <StatCard
+              value={working}
+              label="Working"
+              sub={online > 0 ? `${Math.round((working / online) * 100)}% utilization` : '--'}
+              color="text-cyan-400"
+            />
+          )}
           <StatCard
             value={total - online}
             label="Offline"
             sub={total - online === 0 ? 'All systems go' : `${total - online} disconnected`}
             color="text-gray-400"
-            accent="from-gray-500/10 to-gray-500/0"
-            border="border-gray-500/15"
           />
           <StatCard
             value={total}
             label="Total"
             sub="Registered nodes"
             color="text-white"
-            accent="from-blue-500/15 to-blue-500/0"
-            border="border-blue-500/15"
           />
         </div>
+        </>
       )}
     </div>
   );
 }
 
-function StatCard({ value, label, sub, color, accent, border }: {
-  value: number; label: string; sub: string; color: string; accent: string; border: string;
+function StatCard({ value, label, sub, color }: {
+  value: number; label: string; sub: string; color: string;
 }) {
-  // Extract the color family (green/cyan/gray/blue/white) from `color` prop
-  // so the light-theme top-strip CSS can pick the right accent.
-  const accentKey = color.replace('text-', '').split('-')[0];
+  // #217 D2 (OpenWebUI-style color restraint): the per-color gradient
+  // wash + tinted borders made the KPI row read as four neon billboards.
+  // Surfaces are now neutral (shared border + bg); color survives only
+  // on the number itself. Mobile density values are #209 R39.
   return (
-    <div
-      data-anet-stat-card={accentKey}
-      className={`anet-stat-card relative overflow-hidden rounded-xl border ${border} bg-[#111128] px-4 py-3 transition-all`}
-    >
-      <div className={`absolute inset-0 bg-gradient-to-br ${accent} pointer-events-none`} />
-      <div className="relative">
-        <div className={`text-3xl font-bold ${color} tabular-nums leading-tight`}>{value}</div>
-        <div className="text-sm text-gray-300 mt-0.5">{label}</div>
-        <div className="text-xs text-gray-600 mt-1">{sub}</div>
-      </div>
+    <div className="anet-stat-card rounded-xl border border-[#26262b] bg-[#161618] px-3 sm:px-4 py-2.5 sm:py-3 transition-all">
+      <div className={`text-2xl sm:text-3xl font-bold ${color} tabular-nums leading-tight`}>{value}</div>
+      <div className="text-xs sm:text-sm text-gray-300 mt-0.5">{label}</div>
+      <div className="text-[10px] sm:text-xs text-gray-600 mt-1">{sub}</div>
     </div>
   );
 }

package/app/components/TaskChatPanel.tsx

@@ -483,7 +483,14 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
   const chatContent = (
     <>
         {/* Messages area */}
-        <div className="flex-1 overflow-y-auto px-3 py-3 sm:px-4 sm:py-4 space-y-3 sm:space-y-4">
+        {/* R12 of #190 mobile polish: the chat scroll surface used
+            space-y-3 between task+reply pairs at mobile = 12 px, which
+            in a long thread (the panel's bread-and-butter use case)
+            adds up to a significant scroll length. Drop to space-y-2 at
+            mobile and the per-pair grouping (line 540) from space-y-2
+            to space-y-1.5 so messages read denser without losing the
+            speaker-turn rhythm. Desktop unchanged at sm: and up. */}
+        <div className="flex-1 overflow-y-auto px-3 py-3 sm:px-4 sm:py-4 space-y-2 sm:space-y-4">
           {!historyLoaded && (
             <div className="flex justify-center py-8">
               <div className="w-5 h-5 border-2 border-cyan-500/30 border-t-cyan-500 rounded-full animate-spin" />
@@ -537,7 +544,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
               );
             }
             return (
-            <div key={`${m.task_id}:task`} className="space-y-2">
+            <div key={`${m.task_id}:task`} className="space-y-1.5 sm:space-y-2">
               {/* Outgoing task — labeled with origin so peer-forwarded tasks are obvious */}
               <div className="flex justify-end">
                 <div className="max-w-[92%] sm:max-w-[85%] bg-cyan-500/8 border border-cyan-500/15 rounded-2xl rounded-br-md px-3 py-2.5 sm:px-4 shadow-sm">
@@ -626,8 +633,11 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
                 </select>
               </div>
             </div>
-            <button onClick={send} disabled={sending || (!input.trim() && attachedFiles.length === 0)}
-              className="p-2.5 bg-cyan-600 hover:bg-cyan-500 disabled:bg-[var(--border)] disabled:text-[var(--fg-dim)] text-[var(--fg)] rounded-xl transition-all shrink-0 active:scale-95">
+            {/* R17 of #190: send button was p-2.5 + w-5 icon = ~40 x 40
+                hit zone, 4 px short of the iOS 44 px guideline on
+                the short axis. Bump to inline-flex + min-h/w 44. */}
+            <button onClick={send} aria-label="Send message" disabled={sending || (!input.trim() && attachedFiles.length === 0)}
+              className="inline-flex min-h-[44px] min-w-[44px] items-center justify-center bg-cyan-600 hover:bg-cyan-500 disabled:bg-[var(--border)] disabled:text-[var(--fg-dim)] text-[var(--fg)] rounded-xl transition-all shrink-0 active:scale-95">
               {sending ? (
                 <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
               ) : (
@@ -673,7 +683,11 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
               <div className="text-[10px] text-[var(--fg-muted)]">{pollingIds.size > 0 ? 'Processing...' : 'Ready'}</div>
             </div>
           </div>
-          <button onClick={onClose} className="text-[var(--fg-muted)] hover:text-[var(--fg)] p-1.5 rounded-lg hover:bg-[var(--bg-elevated)]">
+          {/* R16 of #190: was p-1.5 + w-5 h-5 svg = ~32 px tap target.
+              The chat panel close is high-frequency on mobile (user
+              dismisses to scroll the underlying page); bump to a
+              uniform 44 x 44 hit zone via inline-flex + min-h/w. */}
+          <button onClick={onClose} aria-label="Close chat" className="inline-flex min-h-[44px] min-w-[44px] items-center justify-center text-[var(--fg-muted)] hover:text-[var(--fg)] rounded-lg hover:bg-[var(--bg-elevated)]">
             <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
               <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>

package/app/components/TaskDrawer.tsx

@@ -81,14 +81,16 @@ export function TaskDrawer({ taskId, onClose }: TaskDrawerProps) {
   return (
     <>
       <div className="fixed inset-0 bg-black/30 z-40 anet-fade-in" onClick={onClose} />
-      <div className="fixed top-0 right-0 h-[100dvh] w-full lg:w-[500px] bg-[#0a0a1a] border-l border-[#2a2a4a] z-50 flex flex-col shadow-2xl shadow-black/60 overflow-y-auto animate-slide-in">
+      <div className="fixed top-0 right-0 h-[100dvh] w-full lg:w-[500px] bg-[#0b0b0d] border-l border-[#26262b] z-50 flex flex-col shadow-2xl shadow-black/60 overflow-y-auto animate-slide-in">
         {/* Header */}
-        <div className="flex items-center justify-between px-5 py-4 border-b border-[#2a2a4a] bg-[#0d0d1a] sticky top-0">
+        <div className="flex items-center justify-between px-5 py-4 border-b border-[#26262b] bg-[#111113] sticky top-0">
           <div>
             <div className="text-sm font-semibold text-white">Task Detail</div>
             <div className="text-[10px] text-gray-500 mt-0.5">{taskId.slice(0, 16)}...</div>
           </div>
-          <button onClick={onClose} className="text-gray-500 hover:text-white p-1.5 rounded-lg hover:bg-[#1a1a2a]">
+          {/* R16 of #190: same chat-panel close pattern — was ~32 px
+              tap target; lift to a uniform 44 x 44 hit zone. */}
+          <button onClick={onClose} aria-label="Close task drawer" className="inline-flex min-h-[44px] min-w-[44px] items-center justify-center text-gray-500 hover:text-white rounded-lg hover:bg-[#1c1c1f]">
             <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
               <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>
@@ -127,7 +129,7 @@ export function TaskDrawer({ taskId, onClose }: TaskDrawerProps) {
 
             {/* Timeline — round 36 polish: relative timestamps, current-step
                 pulse if task is still in flight, full ISO in title=. */}
-            <div className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-4">
+            <div className="bg-[#161618] border border-[#26262b] rounded-xl p-4">
               <div className="flex items-center justify-between mb-3">
                 <div className="text-xs text-gray-500 uppercase tracking-wide">Timeline</div>
                 {duration !== null && (
@@ -180,14 +182,14 @@ export function TaskDrawer({ taskId, onClose }: TaskDrawerProps) {
             </div>
 
             {/* Content */}
-            <div className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-4">
+            <div className="bg-[#161618] border border-[#26262b] rounded-xl p-4">
               <div className="text-xs text-gray-500 uppercase mb-2">Input</div>
               <div className="text-sm text-gray-300 whitespace-pre-wrap">{task.content || '--'}</div>
             </div>
 
             {/* Result */}
             {task.result && (
-              <div className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-4">
+              <div className="bg-[#161618] border border-[#26262b] rounded-xl p-4">
                 <div className="text-xs text-gray-500 uppercase mb-2">Output</div>
                 <div className="text-sm text-gray-300 whitespace-pre-wrap max-h-64 overflow-y-auto">{task.result}</div>
               </div>
@@ -195,7 +197,7 @@ export function TaskDrawer({ taskId, onClose }: TaskDrawerProps) {
 
             {/* Events */}
             {events.length > 0 && (
-              <div className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-4">
+              <div className="bg-[#161618] border border-[#26262b] rounded-xl p-4">
                 <div className="text-xs text-gray-500 uppercase mb-2">Events ({events.length})</div>
                 <div className="space-y-1.5 max-h-40 overflow-y-auto">
                   {events.map(e => (

package/app/components/ThemeSwitcher.tsx

@@ -1,89 +1,25 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 
-const THEMES = [
-  { id: 'cyber',  label: 'Cyber',  emoji: '🌃', desc: '默认深色' },
-  { id: 'light',  label: 'Light',  emoji: '☀️',  desc: '浅色简洁' },
-  { id: 'mint',   label: 'Mint',   emoji: '🌿', desc: '薄荷绿' },
-  { id: 'sunset', label: 'Sunset', emoji: '🌅', desc: '暖色橙紫' },
-] as const;
+// #217 S6 — two verified themes: cyber (dark, default) and light (white,
+// Vincent-requested, tokens restored from pre-R8 history). The issue #4
+// cleanup locked this to cyber because the old light/mint/sunset themes
+// were unverified; light is now owned by Settings → Appearance, so the
+// provider honors the persisted choice again. Anything else in storage
+// (old mint/sunset values) falls back to cyber.
 
-type ThemeId = typeof THEMES[number]['id'];
-const THEME_KEY = 'anet-theme';
-
-function applyTheme(theme: ThemeId) {
-  if (typeof document !== 'undefined') {
-    document.documentElement.setAttribute('data-theme', theme);
-  }
-}
+const THEMES = new Set(['cyber', 'light']);
 
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  // Apply persisted theme on first render so we don't flash dark before
-  // user-selected light. Initial value comes from cookie/localStorage.
   useEffect(() => {
-    const stored = (localStorage.getItem(THEME_KEY) as ThemeId) || 'cyber';
-    applyTheme(stored);
+    if (typeof document === 'undefined') return;
+    let t = 'cyber';
+    try {
+      const saved = localStorage.getItem('anet-theme');
+      if (saved && THEMES.has(saved)) t = saved;
+    } catch {}
+    document.documentElement.setAttribute('data-theme', t);
   }, []);
   return <>{children}</>;
 }
-
-export function ThemeSwitcher({ compact = false }: { compact?: boolean }) {
-  const [theme, setTheme] = useState<ThemeId>('cyber');
-  const [open, setOpen] = useState(false);
-
-  useEffect(() => {
-    const stored = (localStorage.getItem(THEME_KEY) as ThemeId) || 'cyber';
-    setTheme(stored);
-    applyTheme(stored);
-  }, []);
-
-  function pick(next: ThemeId) {
-    setTheme(next);
-    localStorage.setItem(THEME_KEY, next);
-    applyTheme(next);
-    setOpen(false);
-  }
-
-  const current = THEMES.find(t => t.id === theme) || THEMES[0];
-
-  return (
-    <div className="relative">
-      <button
-        aria-label="切换主题"
-        onClick={() => setOpen(!open)}
-        className="px-2.5 py-1.5 rounded-md text-xs flex items-center gap-1.5 hover:opacity-80 transition-opacity"
-        style={{ background: 'var(--bg-elevated)', color: 'var(--fg)', border: '1px solid var(--border)' }}
-      >
-        <span aria-hidden>{current.emoji}</span>
-        {!compact && <span>{current.label}</span>}
-      </button>
-      {open && (
-        <>
-          <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
-          <div
-            className="absolute right-0 top-full mt-1 z-50 rounded-md min-w-[160px] py-1 shadow-lg"
-            style={{ background: 'var(--bg-secondary)', border: '1px solid var(--border)' }}
-          >
-            {THEMES.map(t => (
-              <button
-                key={t.id}
-                onClick={() => pick(t.id)}
-                className="w-full px-3 py-2 text-left text-xs flex items-center gap-2 hover:opacity-80"
-                style={{
-                  background: t.id === theme ? 'var(--bg-elevated)' : 'transparent',
-                  color: 'var(--fg)',
-                }}
-              >
-                <span aria-hidden>{t.emoji}</span>
-                <span className="flex-1">{t.label}</span>
-                <span style={{ color: 'var(--fg-dim)' }} className="text-[10px]">{t.desc}</span>
-                {t.id === theme && <span style={{ color: 'var(--accent)' }}>•</span>}
-              </button>
-            ))}
-          </div>
-        </>
-      )}
-    </div>
-  );
-}

package/app/components/TopoGraph.tsx

@@ -422,11 +422,11 @@ interface Palette {
 }
 
 const DARK_PALETTE: Palette = {
-  panelStops: ['#0b1220', '#080814', '#101018'],
+  panelStops: ['#0b1220', '#0a0a0c', '#101018'],
   radarStops: [
     { color: '#22d3ee', opacity: 0.18 },
     { color: '#22c55e', opacity: 0.045 },
-    { color: '#020617', opacity: 0 },
+    { color: '#060608', opacity: 0 },
   ],
   arrowFill: '#67e8f9',
   ringStroke: '#164e63',
@@ -434,14 +434,14 @@ const DARK_PALETTE: Palette = {
   flowEdge: '#67e8f9',
   flowPath: '#e0f2fe',
   flowParticle: '#fef08a',
-  nodeFill: { online: '#020617', offline: '#080814' },
-  labelBox: { fill: '#020617', stroke: '#1f2937' },
-  legendBox: { fill: '#020617', stroke: '#1f2937' },
+  nodeFill: { online: '#060608', offline: '#0a0a0c' },
+  labelBox: { fill: '#060608', stroke: '#1f2937' },
+  legendBox: { fill: '#060608', stroke: '#1f2937' },
   legendText: '#94a3b8',
   legendHeadline: '#e5e7eb',
   legendAccent: '#67e8f9',
-  containerBg: '#080814',
-  containerBorder: '#2a2a4a',
+  containerBg: '#0a0a0c',
+  containerBorder: '#26262b',
   topRailGradient: 'from-transparent via-cyan-400/70 to-transparent',
 };
 
@@ -462,7 +462,7 @@ const LIGHT_PALETTE: Palette = {
   labelBox: { fill: '#ffffff', stroke: '#e2e8f0' },
   legendBox: { fill: '#ffffff', stroke: '#e2e8f0' },
   legendText: '#475569',
-  legendHeadline: '#0f172a',
+  legendHeadline: '#18181b',
   legendAccent: '#0d9488',
   containerBg: '#ffffff',
   containerBorder: '#e3e6eb',
@@ -2059,8 +2059,18 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
     }
   };
 
+  // #209 R27 (Vincent msg 545+547 — TopoGraph "中间太小，往左右扩"):
+  // drop the unique `max-w-6xl mx-auto` cap. Every other section on
+  // the Overview page (KPI cards, agent grid, Recent Activity, etc.)
+  // is full-width; only TopoGraph was self-limiting to 1152 px,
+  // leaving ~70 px slack on each side of the typical (~1290 px main
+  // area) viewport. Now matches the rest of the page — the inner SVG
+  // layout is already resize-aware (ring/grid/tree all re-fit on
+  // container width change), so widening the card naturally spreads
+  // the node cluster. Less is more: one fewer arbitrary constraint.
+  // Picked option A over a 1536 px cap (option B) per Vincent msg 547.
   return (
-    <section className="w-full max-w-6xl mx-auto mb-8">
+    <section className="w-full mb-8">
       {/* Round 299 / Loop: title block bottom margin mb-3 (12px) →
           mb-4 (16px). After R298 tightened the title-block internal
           gap (12→10px) packing brand-logo + kicker + h2 into a more
@@ -2663,7 +2673,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               wrapper + Grid button's internal divider used hardcoded
               `border-gray-500/25` (pale gray, fixed in both themes)
               while the bottom-right chrome strip (nodeSize, zoom)
-              used pal.containerBorder (cyber #2a2a4a dark indigo ↔
+              used pal.containerBorder (cyber #26262b dark indigo ↔
               light #e3e6eb pale gray). Visible mismatch in cyber
               theme: Layout toggle border read as pale gray while
               chrome strip borders read as darker indigo — two
@@ -4942,7 +4952,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
         /* Round 254 / Loop: top-level TopoGraph wrapper gains theme-
            toggle transition. This is the BIGGEST theme-driven surface
            on the dashboard by pixel area — pal.containerBg fills the
-           entire visible canvas area (cyber #080814 ↔ light #ffffff),
+           entire visible canvas area (cyber #0a0a0c ↔ light #ffffff),
            and pal.containerBorder rims it. Pre-R254 every inner
            element eased through theme but the outer wrapper hard-cut,
            visually anchoring the snap. R253 declared
@@ -5860,7 +5870,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             <filter id="topo-groupbox-lift" x="-10%" y="-10%" width="120%" height="120%">
               <feDropShadow
                 dx="0" dy="3" stdDeviation="4"
-                floodColor={isLight ? '#0f172a' : '#000000'}
+                floodColor={isLight ? '#18181b' : '#000000'}
                 floodOpacity={isLight ? 0.18 : 0.55}
               />
             </filter>
@@ -7035,7 +7045,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                      data-group-box-rx exposes the resolved value. */
                   rx={isPinned ? '16' : '14'}
                   data-group-box-rx={isPinned ? '16' : '14'}
-                  fill={isLight ? '#0f172a' : '#a5b4fc'}
+                  fill={isLight ? '#18181b' : '#a5b4fc'}
                   // R68: 3-tier opacity + stroke ladder.
                   //   pinned   → fill 0.08 / 0.13, stroke 3 px (locked)
                   //   hovered  → fill 0.05 / 0.09, stroke 2 px (inspecting)
@@ -7248,7 +7258,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       : undefined,
                     /* Round 248 / Loop: append fill 200ms ease-out to
                        the existing R66 transition list. Pre-R248 the
-                       rect's fill (isLight ? '#0f172a' (slate-900) :
+                       rect's fill (isLight ? '#18181b' (slate-900) :
                        '#a5b4fc' (indigo-300)) snapped on theme toggle
                        while stroke / fill-opacity / filter all eased.
                        Closes the last theme-toggle snap on the group
@@ -8786,7 +8796,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                             r 180ms (R164 hover lift)
                             stroke 300ms (R188 hot/pinned colour flip)
                             stroke-width 300ms (R188 hot/pinned width flip)
-                          fill (pal.legendBox.fill: cyber #020617 ↔ light
+                          fill (pal.legendBox.fill: cyber #060608 ↔ light
                           #ffffff) and opacity (cyber 0.82 ↔ light 0.95)
                           were theme-driven but missed from the list —
                           the badge chrome snapped on theme switch while
@@ -11304,7 +11314,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                      gap so offline halos read more confidently as
                      present-but-stale anchors. Cyber theme stays at
                      R407's 0.30 (cyber backdrop is dark; the cyber
-                     offline halo against #080814 contains a stronger
+                     offline halo against #0a0a0c contains a stronger
                      contrast envelope than light, so doesn't need
                      the same lift). R440 hover 0.45→0.60 light + R12
                      status.halo color + R407 transition list all
@@ -12521,7 +12531,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                           fill + opacity in its transition list. R142
                           already eased filter (drop-shadow) + stroke
                           (R217 cyan tint on hover); the rect's fill
-                          (pal.labelBox.fill: cyber #020617 ↔ light
+                          (pal.labelBox.fill: cyber #060608 ↔ light
                           #ffffff) and theme-derived opacity (0.94
                           cyber / 1 light) still snapped on theme
                           toggle. R211 already closed the alias/sub
@@ -12908,7 +12918,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                           for legibility" pattern, now applied to the
                           per-node sub-text line. At fontSize=8-9
                           monospace against the label-card chrome
-                          (pal.labelBox.fill cyber #020617 / light
+                          (pal.labelBox.fill cyber #060608 / light
                           #ffffff), the default fw=400 sits at the
                           legibility floor; fw=500 (font-medium) lifts
                           it into a clearly readable band without
@@ -13546,7 +13556,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                    include fill + stroke + opacity at 200ms. R135
                    already eased filter (hover drop-shadow); the
                    three theme-driven properties (pal.legendBox.fill
-                   cyber #020617 ↔ light #ffffff, pal.legendBox.
+                   cyber #060608 ↔ light #ffffff, pal.legendBox.
                    stroke cyber #1f2937 ↔ light #e2e8f0, opacity
                    0.92 ↔ 0.97) still snapped on theme toggle. Same
                    per-element 4-property easing R246 added to the
@@ -13580,7 +13590,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             {/* Round 266 / Loop: panel title fill picks up theme-toggle
                 transition. Pre-R266 the title "recent signal" had
                 fill={pal.legendHeadline} (cyber #e5e7eb ↔ light
-                #0f172a) without any inline transition — so the BIGGEST
+                #18181b) without any inline transition — so the BIGGEST
                 text in the recent-signal panel (fontSize 12 fontWeight
                 700) hard-flipped color on theme toggle while the panel
                 rect (R247) and every row inside (various) eased.
@@ -16525,7 +16535,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               corners hold recent-signal + legend panels, bottom-
               right holds the chrome strip). No icon yet — public/
               has only favicon.svg (small abstract network icon
-              with hardcoded #0a0a1a dark bg that wouldn't blend on
+              with hardcoded #0b0b0d dark bg that wouldn't blend on
               light theme) + intern_avatar.png (书生 brand-specific).
               Without a sleep2agi-specific crescent/lockup asset,
               R282 ships a low-opacity text-only mark; R283+ can

package/app/components/UserBar.tsx

@@ -110,7 +110,7 @@ export function UserBar() {
   const initials = (auth.user.display_name || auth.user.username).slice(0, 2).toUpperCase();
 
   return (
-    <div className="flex items-center justify-between bg-[#111128] border border-[#2a2a4a] rounded-lg px-4 py-2.5 mb-4">
+    <div className="flex items-center justify-between bg-[#161618] border border-[#26262b] rounded-lg px-4 py-2.5 mb-4">
       {/* User info */}
       <div className="flex items-center gap-3">
         <div className="w-8 h-8 rounded-full bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center text-xs font-bold text-white">
@@ -133,7 +133,7 @@ export function UserBar() {
               setNetworkId(e.target.value);
               sessionStorage.setItem('anet_v3_auth', JSON.stringify(updated));
             }}
-            className="bg-[#0a0a15] border border-[#2a2a4a] rounded px-2 py-1 text-xs text-white focus:outline-none"
+            className="bg-[#0e0e10] border border-[#26262b] rounded px-2 py-1 text-base sm:text-xs text-white focus:outline-none"
           >
             {auth.networks.map(n => (
               <option key={n.network_id} value={n.network_id}>{n.network_name}</option>
@@ -158,11 +158,11 @@ export function UserBar() {
         </button>
       </div>
       {editing && (
-        <div className="flex flex-wrap items-center gap-2 mt-2 pt-2 border-t border-[#2a2a4a]">
+        <div className="flex flex-wrap items-center gap-2 mt-2 pt-2 border-t border-[#26262b]">
           <input type="text" value={editName} onChange={e => setEditName(e.target.value)} placeholder="Display name"
-            className="bg-[#0a0a15] border border-[#2a2a4a] rounded px-2 py-1 text-xs text-white placeholder-gray-600 focus:outline-none w-32" />
+            className="bg-[#0e0e10] border border-[#26262b] rounded px-2 py-1 text-base sm:text-xs text-white placeholder-gray-600 focus:outline-none w-32" />
           <input type="email" value={editEmail} onChange={e => setEditEmail(e.target.value)} placeholder="Email"
-            className="bg-[#0a0a15] border border-[#2a2a4a] rounded px-2 py-1 text-xs text-white placeholder-gray-600 focus:outline-none w-40" />
+            className="bg-[#0e0e10] border border-[#26262b] rounded px-2 py-1 text-base sm:text-xs text-white placeholder-gray-600 focus:outline-none w-40" />
           <button onClick={updateProfile} className="px-2 py-1 bg-cyan-600 hover:bg-cyan-500 text-white text-xs rounded">Save</button>
         </div>
       )}