@sleep2agi/agent-network-dashboard 0.5.7-preview.6 → 0.5.7-preview.66

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' },
 ];
@@ -74,10 +74,10 @@ export function Sidebar() {
           prefetch={false}
           onClick={() => setMobileOpen(false)}
           title={collapsed ? item.label : undefined}
-          className={`relative flex items-center gap-3 px-3 py-3 rounded-lg text-sm transition-colors active:bg-[#1a1a3a] ${
+          className={`relative flex items-center gap-3 px-3 py-3 rounded-lg text-sm transition-colors active:bg-[#232327] ${
             isActive(item.href)
               ? 'bg-cyan-500/10 text-cyan-300 border border-cyan-500/20 anet-nav-active'
-              : 'text-gray-400 hover:text-gray-200 hover:bg-[#1a1a2a]'
+              : 'text-gray-400 hover:text-gray-200 hover:bg-[#1c1c1f]'
           } ${collapsed ? 'justify-center px-0' : ''}`}
         >
           <svg className="w-5 h-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
@@ -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-[#161618] border border-[#26262b] rounded-lg p-3 min-h-[44px] min-w-[44px] inline-flex items-center justify-center text-gray-400 hover:text-white active:bg-[#232327]"
         aria-label="Toggle menu"
       >
         <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -113,15 +115,15 @@ export function Sidebar() {
         />
       )}
 
-      {/* Sidebar — `bg-[#0d0d1a]` resolves to var(--bg) in dark themes,
+      {/* Sidebar — `bg-[#111113]` resolves to var(--bg) in dark themes,
           but in light/mint we want a distinct surface, so we layer
-          `lg:bg-white` / `lg:dark:bg-[#0d0d1a]` via the theme attribute.
+          `lg:bg-white` / `lg:dark:bg-[#111113]` via the theme attribute.
           The CSS shim in globals.css upgrades sidebar bg to bg-secondary
           in light themes so the sidebar reads as its own card.
           Round 47: explicit ease-out curve + slight shadow so the drawer
           edge "leaves a trail" as it slides in. */}
       <aside data-anet-sidebar="true" className={`
-        fixed top-0 left-0 h-full z-40 bg-[#0d0d1a] border-r border-[#2a2a4a]
+        fixed top-0 left-0 h-full z-40 bg-[#111113] border-r border-[#26262b]
         transition-transform duration-200 ease-out
         ${collapsed ? 'w-16' : 'w-52'}
         ${mobileOpen ? 'translate-x-0 shadow-2xl shadow-black/40 lg:shadow-none' : '-translate-x-full'}
@@ -131,11 +133,11 @@ export function Sidebar() {
             with an inline live "online" pulse so every page surfaces
             fleet health without leaving for /nodes. */}
         <SidebarBrand collapsed={collapsed} />
-        <div className={`border-b border-[#2a2a4a]`} />
+        <div className={`border-b border-[#26262b]`} />
 
         {/* Network list */}
         {!collapsed && networks.length > 0 && (
-          <div className="px-2 py-3 border-b border-[#2a2a4a]">
+          <div className="px-2 py-3 border-b border-[#26262b]">
             <div className="px-3 text-[10px] text-gray-600 uppercase mb-2">Networks</div>
             <div className="space-y-0.5 max-h-32 overflow-y-auto">
               {networks.map((n: SidebarNetwork) => (
@@ -143,10 +145,10 @@ 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]'
+                      : 'text-gray-500 hover:text-gray-300 hover:bg-[#1c1c1f]'
                   }`}
                 >
                   <span>{ROLE_ICON[n.role || 'member'] || '👤'}</span>
@@ -164,21 +166,27 @@ 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>
 
         {/* Sign out + collapse — round 27: collapsed-state gets icon-only
             variants so users still have Sign out / Quick search access at
             56px width, plus title= tooltips. */}
-        <div className="absolute bottom-0 left-0 right-0 border-t border-[#2a2a4a] bg-[#0d0d1a]">
+        <div className="absolute bottom-0 left-0 right-0 border-t border-[#26262b] bg-[#111113]">
           <button
             onClick={() => {
               window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true, ctrlKey: true }));
             }}
             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'
+            className={`w-full flex items-center text-[11px] text-gray-600 hover:text-gray-400 hover:bg-[#1c1c1f] transition-colors ${
+              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'}
@@ -255,7 +262,7 @@ function SidebarBrand({ collapsed }: { collapsed: boolean }) {
   return (
     <Link
       href="/"
-      className="block px-4 py-4 flex items-center gap-3 hover:bg-[#11112a]/40 transition-colors rounded-r-xl"
+      className="block px-4 py-4 flex items-center gap-3 hover:bg-[#161618]/40 transition-colors rounded-r-xl"
       aria-label="Agent Network — home"
     >
       <BrandMark size={32} />

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,39 +49,36 @@ 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">
+        /* Populated state. #217 S2 (less is more): the Working card only
+           earns its grid cell when something is actually working — a
+           "0 / 0% utilization" card is dead weight, and dropping it
+           collapses the mobile 2×2 grid to one 3-up row. */
+        <div className={`grid gap-3 ${working > 0 ? 'grid-cols-2 sm:grid-cols-4' : '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>
       )}
@@ -83,23 +86,18 @@ export function StatsBar({ online, working, total, version, uptime }: StatsBarPr
   );
 }
 
-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>
-  );
-}