@sleep2agi/agent-network-dashboard 0.5.7-preview.4 → 0.5.7-preview.41

package/app/components/MobileNav.tsx

@@ -3,23 +3,41 @@
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
+// #209 R25 (Vincent msg 529 "command 留着干嘛" / 530 "Agents 放到最前面？"
+// / 531 "设置放到最后面" / 533+534 "A / 加一个设置啊"):
+//   - drop the synthetic-Cmd+K Command tap (no Cmd/Ctrl key on phone — the
+//     palette functions it surfaced are reachable from Settings on touch:
+//     theme switch, sign-out, navigation to Messages/Logs are all there)
+//   - reorder so Agents is the first-thumb tap (Vincent's primary surface)
+//   - put Settings rightmost as the consolidated secondary-destinations hub
+//     (R16 absorbed Messages / Audit Log / Server Logs into the Resources
+//     card grid there, so /settings is the legitimate "everything else"
+//     leaf on mobile)
+// Stays at 4 cells (R24's grid-cols-4) — same width per tab.
+// Settings icon path is copied from app/components/Sidebar.tsx:22 so the
+// icon shape matches the desktop sidebar entry.
 const MOBILE_NAV_ITEMS = [
+  { href: '/nodes', label: 'Agents', icon: 'M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01' },
   { href: '/', label: 'Overview', icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6' },
   { href: '/tasks', label: 'Tasks', icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4' },
-  { href: '/nodes', label: 'Agents', icon: 'M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01' },
-  { href: '/messages', label: 'Chats', icon: 'M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z' },
+  { href: '/settings', label: 'Settings', icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z' },
 ];
 
 export function MobileNav() {
   const pathname = usePathname();
-  const isActive = (href: string) => href === '/' ? pathname === '/' : pathname.startsWith(href);
-  const openCommand = () => {
-    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true, ctrlKey: true }));
+  // Match Sidebar.tsx isActive — /settings must be exact-match because
+  // Settings subpages (/settings/tokens, /settings/networks) have their
+  // own headers; startsWith would keep the bottom-nav highlighted there
+  // and steal back-affordance from the user.
+  const isActive = (href: string) => {
+    if (href === '/') return pathname === '/';
+    if (href === '/settings') return pathname === '/settings';
+    return pathname.startsWith(href);
   };
 
   return (
     <nav className="fixed inset-x-0 bottom-0 z-40 border-t border-[#2a2a4a] bg-[#0d0d1a]/95 px-1 pb-[calc(env(safe-area-inset-bottom)+0.35rem)] pt-1.5 backdrop-blur lg:hidden">
-      <div className="mx-auto grid max-w-md grid-cols-5 gap-1">
+      <div className="mx-auto grid max-w-md grid-cols-4 gap-1">
         {MOBILE_NAV_ITEMS.map(item => {
           const active = isActive(item.href);
           return (
@@ -28,9 +46,9 @@ export function MobileNav() {
               href={item.href}
               prefetch={false}
               aria-current={active ? 'page' : undefined}
-              className={`flex min-h-12 flex-col items-center justify-center gap-0.5 rounded-xl px-1 text-[10px] transition-colors ${
+              className={`relative flex min-h-12 flex-col items-center justify-center gap-0.5 rounded-xl px-1 text-[10px] transition-colors ${
                 active
-                  ? 'bg-cyan-500/12 text-cyan-300'
+                  ? 'bg-cyan-500/12 text-cyan-300 before:absolute before:top-0 before:left-3 before:right-3 before:h-0.5 before:rounded-full before:bg-cyan-400'
                   : 'text-gray-500 active:bg-[#1a1a3a] active:text-gray-200'
               }`}
             >
@@ -41,17 +59,6 @@ export function MobileNav() {
             </Link>
           );
         })}
-        <button
-          type="button"
-          onClick={openCommand}
-          className="flex min-h-12 flex-col items-center justify-center gap-0.5 rounded-xl px-1 text-[10px] text-gray-500 transition-colors active:bg-[#1a1a3a] active:text-gray-200"
-          aria-label="Open command palette"
-        >
-          <svg className="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.6}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v3m0 12v3m9-9h-3M6 12H3m15.364-6.364l-2.121 2.121M7.757 16.243l-2.121 2.121m12.728 0l-2.121-2.121M7.757 7.757L5.636 5.636M12 8.5A3.5 3.5 0 1112 15.5 3.5 3.5 0 0112 8.5z" />
-          </svg>
-          <span className="max-w-full truncate">Command</span>
-        </button>
       </div>
     </nav>
   );

package/app/components/Sidebar.tsx

@@ -5,19 +5,19 @@ import { usePathname } from 'next/navigation';
 import { useState } from 'react';
 import useSWR from 'swr';
 import { useNetworkId } from '../lib/network-context';
-import { ThemeSwitcher } from './ThemeSwitcher';
 
 const networkFetcher = (url: string) => fetch(url).then(r => r.ok ? r.json() : { networks: [] });
 
+// Cleanup (issue #4): sidebar collapsed to the 6 core destinations. The
+// low-frequency / unverified entries (Messages, Networks, Audit Log,
+// Server Logs) were removed from primary nav — those pages still exist
+// and stay reachable via direct URL and the command palette (⌘K); they
+// were just cluttering the main rail. Restore here if usage warrants.
 const NAV_ITEMS = [
   { href: '/', label: 'Overview', icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6' },
   { href: '/tasks', label: 'Tasks', icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4' },
   { href: '/nodes', label: 'Nodes', icon: 'M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01' },
   { href: '/servers', label: 'Servers', icon: 'M4 6.5A2.5 2.5 0 016.5 4h11A2.5 2.5 0 0120 6.5v1A2.5 2.5 0 0117.5 10h-11A2.5 2.5 0 014 7.5v-1zM4 16.5A2.5 2.5 0 016.5 14h11a2.5 2.5 0 012.5 2.5v1a2.5 2.5 0 01-2.5 2.5h-11A2.5 2.5 0 014 17.5v-1zM7 7h.01M7 17h.01' },
-  { href: '/messages', label: 'Messages', icon: 'M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z' },
-  { href: '/settings/networks', label: 'Networks', icon: 'M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9' },
-  { href: '/logs', label: 'Audit Log', icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z' },
-  { href: '/server-logs', label: 'Server Logs', icon: 'M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z' },
   { href: '/admin', label: 'Admin', icon: 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z' },
   { href: '/settings', label: 'Settings', icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z' },
 ];
@@ -91,10 +91,12 @@ export function Sidebar() {
 
   return (
     <>
-      {/* Mobile hamburger */}
+      {/* Mobile hamburger — R13 of #190: was p-2.5 = ~40px tap target,
+          just below the iOS 44px guideline. Bump padding and add an
+          explicit min-w/min-h so it can never be miss-tapped. */}
       <button
         onClick={() => setMobileOpen(!mobileOpen)}
-        className="fixed top-4 left-3 z-50 lg:hidden bg-[#111128] border border-[#2a2a4a] rounded-lg p-2.5 text-gray-400 hover:text-white active:bg-[#1a1a3a]"
+        className="fixed top-3 left-3 z-50 lg:hidden bg-[#111128] border border-[#2a2a4a] rounded-lg p-3 min-h-[44px] min-w-[44px] inline-flex items-center justify-center text-gray-400 hover:text-white active:bg-[#1a1a3a]"
         aria-label="Toggle menu"
       >
         <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -143,7 +145,7 @@ export function Sidebar() {
                   key={n.network_id}
                   onClick={() => { setNetworkId(n.network_id); setMobileOpen(false); }}
                   title={n.network_id}
-                  className={`w-full flex items-center gap-2 px-3 py-1.5 rounded-md text-xs transition-colors text-left ${
+                  className={`w-full flex items-center gap-2 px-3 py-2.5 lg:py-1.5 rounded-md text-xs transition-colors text-left ${
                     networkId === n.network_id
                       ? 'bg-cyan-500/10 text-cyan-300'
                       : 'text-gray-500 hover:text-gray-300 hover:bg-[#1a1a2a]'
@@ -164,7 +166,13 @@ export function Sidebar() {
           </div>
         )}
 
-        <div className="pb-20">
+        {/* #209 R26 (Vincent msg 540 screenshot — "设置页面没展示全"): the
+            absolute-bottom footer below stacks 3 rows (Quick search /
+            Sign out / collapse) ≈ 92-100px tall, but this spacer was
+            pb-20 (80px), so the last nav entry (Settings on /settings)
+            was being eaten by the footer overlay. Bump to pb-28 (112px)
+            to clear the actual footer height. */}
+        <div className="pb-28">
           {nav}
         </div>
 
@@ -178,7 +186,7 @@ export function Sidebar() {
             }}
             title={collapsed ? 'Quick search (⌘K)' : undefined}
             className={`w-full flex items-center text-[11px] text-gray-600 hover:text-gray-400 hover:bg-[#1a1a2a] transition-colors ${
-              collapsed ? 'justify-center px-0 py-2.5' : 'justify-between gap-2 px-5 py-2'
+              collapsed ? 'justify-center px-0 py-2.5' : 'justify-between gap-2 px-5 py-3 lg:py-2'
             }`}
             aria-label="Open command palette"
           >
@@ -206,8 +214,7 @@ export function Sidebar() {
             </svg>
             {!collapsed && 'Sign out'}
           </button>
-          <div className={`flex items-center gap-2 ${collapsed ? 'flex-col px-0 py-2' : 'px-3 py-2 justify-between'}`}>
-            <ThemeSwitcher compact={collapsed} />
+          <div className={`flex items-center ${collapsed ? 'flex-col px-0 py-2' : 'px-3 py-2 justify-end'}`}>
             <button
               onClick={() => setCollapsed(!collapsed)}
               title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}

package/app/components/StatsBar.tsx

@@ -12,8 +12,15 @@ export function StatsBar({ online, working, total, version, uptime }: StatsBarPr
   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'}>
+    <div className={fleetEmpty ? 'mb-4' : 'mb-4 sm: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>

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

@@ -88,7 +88,9 @@ export function TaskDrawer({ taskId, onClose }: TaskDrawerProps) {
             <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-[#1a1a2a]">
             <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/ThemeSwitcher.tsx

@@ -1,89 +1,20 @@
 '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;
+// Cleanup (issue #4) — less is more. The dashboard is designed dark/cyber;
+// the light / mint / sunset themes were never verified and the picker just
+// added a knob nobody validated. We lock to the single cyber theme and drop
+// the switcher control. (The unused [data-theme] CSS branches in globals.css
+// are now dead but harmless — left for a later dedicated CSS sweep.)
 
-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 THEME = 'cyber';
 
 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') {
+      document.documentElement.setAttribute('data-theme', THEME);
+    }
   }, []);
   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

@@ -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

package/app/components/UserBar.tsx

@@ -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-[#0a0a15] border border-[#2a2a4a] 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>
@@ -160,9 +160,9 @@ export function UserBar() {
       {editing && (
         <div className="flex flex-wrap items-center gap-2 mt-2 pt-2 border-t border-[#2a2a4a]">
           <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-[#0a0a15] border border-[#2a2a4a] 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-[#0a0a15] border border-[#2a2a4a] 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>
       )}