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

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

@@ -213,6 +213,18 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
   const [mentionNodes, setMentionNodes] = useState<string[]>([]);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  // #217 M4 (Vincent: 倒序加载, 上滑再拉旧的): history is paged. We load
+  // only the newest PAGE on open and grow the window when the user
+  // scrolls to the top. The hub API has no `before` cursor (offset is
+  // ignored), so "older" = refetch with a larger limit and prepend the
+  // delta — each step is on-demand and tiny vs one full pull.
+  const HISTORY_PAGE = 20;
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const histLimitRef = useRef(HISTORY_PAGE);
+  const skipAutoScrollRef = useRef(false);
+  const anchoredRef = useRef(false);
+  const [hasOlder, setHasOlder] = useState(true);
+  const [loadingOlder, setLoadingOlder] = useState(false);
 
   // Load available nodes for @ mention
   useEffect(() => {
@@ -231,14 +243,22 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
     markChatRead(alias, networkId);
   }, [alias, networkId]);
 
-  // Load task history for this node
-  const loadHistory = useCallback(async () => {
+  // Load task history for this node — newest `limit` only (M4).
+  const loadHistory = useCallback(async (limit: number) => {
     try {
-      const res = await fetch(`/api/hub/tasks?to_name=${encodeURIComponent(alias)}&limit=30`);
+      const res = await fetch(`/api/hub/tasks?to_name=${encodeURIComponent(alias)}&limit=${limit}`);
       const data = await res.json();
       if (data.tasks) {
-        // Show oldest first
-        setMessages(data.tasks.reverse());
+        const fetched = data.tasks.reverse(); // oldest first for display
+        if (data.tasks.length < limit) setHasOlder(false);
+        // Merge: keep current messages the fetch doesn't know about yet
+        // (optimistic sends / SSE patches) so growing the window never
+        // drops an in-flight bubble.
+        setMessages(prev => {
+          const ids = new Set(fetched.map((t: { task_id?: string }) => t.task_id));
+          const extras = prev.filter(t => t.task_id && !ids.has(t.task_id));
+          return [...fetched, ...extras];
+        });
       }
     } catch {} finally {
       setHistoryLoaded(true);
@@ -248,13 +268,52 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
   useEffect(() => {
     setMessages([]);
     setHistoryLoaded(false);
-    loadHistory();
+    histLimitRef.current = HISTORY_PAGE;
+    anchoredRef.current = false;
+    setHasOlder(true);
+    loadHistory(HISTORY_PAGE);
     // Focus textarea
     setTimeout(() => textareaRef.current?.focus(), 300);
   }, [alias, loadHistory]);
 
-  // Auto-scroll to bottom
+  // M4: user scrolled to the top → grow the history window, keeping the
+  // viewport anchored on the message they were looking at.
+  const loadOlder = useCallback(async () => {
+    if (loadingOlder || !hasOlder) return;
+    setLoadingOlder(true);
+    const el = scrollRef.current;
+    const prevHeight = el?.scrollHeight ?? 0;
+    skipAutoScrollRef.current = true;
+    histLimitRef.current += HISTORY_PAGE;
+    await loadHistory(histLimitRef.current);
+    requestAnimationFrame(() => {
+      if (el) el.scrollTop += el.scrollHeight - prevHeight;
+      setLoadingOlder(false);
+    });
+  }, [loadingOlder, hasOlder, loadHistory]);
+
+  const onMessagesScroll = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    // The initial bottom-anchor is a smooth scroll, so its own scroll
+    // events pass through scrollTop≈0 territory. Arm the older-page
+    // trigger only after the container has actually reached the bottom
+    // once — everything before that is layout/auto-scroll noise.
+    if (!anchoredRef.current) {
+      if (el.scrollHeight - el.scrollTop - el.clientHeight < 80) anchoredRef.current = true;
+      return;
+    }
+    if (el.scrollTop < 40) loadOlder();
+  }, [loadOlder]);
+
+  // Auto-scroll to bottom on new messages — but not when we just
+  // prepended older history (that would yank the user away from what
+  // they scrolled up to read).
   useEffect(() => {
+    if (skipAutoScrollRef.current) {
+      skipAutoScrollRef.current = false;
+      return;
+    }
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   }, [messages]);
 
@@ -483,12 +542,39 @@ 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 ref={scrollRef} onScroll={onMessagesScroll} 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" />
             </div>
           )}
+          {/* M4: top-of-thread row — scroll-to-top auto-loads older, and
+              the row is also tappable for short threads that don't
+              overflow (nothing to scroll). Quiet "beginning" marker
+              once history is exhausted. */}
+          {historyLoaded && hasOlder && messages.length > 0 && (
+            <button
+              type="button"
+              onClick={loadOlder}
+              className="w-full flex justify-center py-2 text-[11px] text-[var(--fg-dim)] hover:text-[var(--fg-muted)]"
+            >
+              {loadingOlder ? (
+                <span className="w-4 h-4 border-2 border-cyan-500/30 border-t-cyan-500 rounded-full animate-spin" />
+              ) : (
+                <span>↑ Load earlier messages</span>
+              )}
+            </button>
+          )}
+          {historyLoaded && !hasOlder && messages.length > 0 && (
+            <div className="text-center text-[10px] text-[var(--fg-dim)] py-1">— beginning of history —</div>
+          )}
           {historyLoaded && messages.length === 0 && (
             <div className="text-center py-12">
               <div className="text-3xl mb-3">💬</div>
@@ -537,7 +623,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 +712,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 +762,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 => (