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

package/app/admin/page.tsx

@@ -1,10 +1,11 @@
 'use client';
 
 import { useState } from 'react';
+import Link from 'next/link';
 import { useSessions, useHealth, useStats } from '../lib/hooks';
 import { timeAgo } from '../components/utils';
 import { AliasAvatar } from '../components/AliasAvatar';
-import { STATUS_CHIP_CLASS, SESSION_STATUS_CHIP_CLASS } from '../lib/status';
+import { SESSION_STATUS_CHIP_CLASS } from '../lib/status';
 
 export default function AdminPage() {
   const { sessions } = useSessions();
@@ -73,7 +74,7 @@ export default function AdminPage() {
   const offlineNodes = sessions.filter(s => !sseFor(s));
 
   return (
-    <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-4 sm:p-6 font-mono">
+    <div className="min-h-screen bg-[#0b0b0d] text-gray-100 p-4 sm:p-6">
       <h1 className="text-2xl font-bold text-white mb-3 lg:ml-0 ml-10">Admin</h1>
 
       {/* Section anchor nav — same pattern as Settings r28; R2 of #190 mobile
@@ -82,14 +83,18 @@ export default function AdminPage() {
           read as inert labels rather than tappable jumps. Wrapping each in a
           visible bordered chip restores the affordance and lifts tap height
           to ~44px without changing the desktop hierarchy. */}
-      <nav className="mb-8 flex flex-wrap gap-2 text-xs">
+      {/* #209 R31 (mobile vertical rhythm — same pattern as R28/R30):
+          chip-jump nav was mb-8 (32 px) — biggest single gap on /admin
+          above the fold. Drop to mb-4 sm:mb-8 — phones get 16 px, sm:
+          up keeps the original breathing room. */}
+      <nav className="mb-4 sm:mb-8 flex flex-wrap gap-2 text-xs">
         {[
           { href: '#status',  label: 'Status' },
           { href: '#actions', label: 'Actions' },
           { href: '#users',   label: 'Users' },
         ].map(a => (
           <a key={a.href} href={a.href}
-            className="inline-flex min-h-[44px] items-center rounded-md border border-[#2a2a4a] bg-[#0a0a15]/60 px-3 py-2 text-gray-400 hover:border-cyan-500/50 hover:text-cyan-300 hover:bg-cyan-500/10 transition-colors">
+            className="inline-flex min-h-[44px] items-center rounded-md border border-[#26262b] bg-[#0e0e10]/60 px-3 py-2 text-gray-400 hover:border-cyan-500/50 hover:text-cyan-300 hover:bg-cyan-500/10 transition-colors">
             {a.label}
           </a>
         ))}
@@ -101,50 +106,60 @@ export default function AdminPage() {
         <div id="status" className="space-y-4 scroll-mt-6">
           <div className="flex items-center gap-2 px-1">
             <div className="text-[11px] uppercase tracking-[0.14em] text-gray-400 font-semibold">Status</div>
-            <div className="flex-1 h-px bg-[#2a2a4a]" />
+            <div className="flex-1 h-px bg-[#26262b]" />
           </div>
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
 
-        {/* Server Overview */}
-        <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
-          <h2 className="text-sm font-semibold text-gray-300 mb-4">Server Overview</h2>
+        {/* Server Overview.
+            #209 R42: same mobile density pattern R39 brought to the
+            Overview StatsBar 4-card grid — p-5 → p-4 sm:p-5 and
+            text-3xl numbers → text-2xl sm:text-3xl on phones. The
+            2×2 numeric grid shrinks ~25 % on mobile (~60 px of fold
+            reclaimed) while reading identically on desktop. mb-4 on
+            the section heading also drops to mb-3 sm:mb-4. */}
+        <section className="bg-[#161618] border border-[#26262b] rounded-xl p-4 sm:p-5">
+          <h2 className="text-sm font-semibold text-gray-300 mb-3 sm:mb-4">Server Overview</h2>
           <div className="grid grid-cols-2 gap-4 text-sm">
             <div>
-              <div className="text-3xl font-bold text-green-400 tabular-nums">{onlineNodes.length}</div>
+              <div className="text-2xl sm:text-3xl font-bold text-green-400 tabular-nums">{onlineNodes.length}</div>
               <div className="text-xs text-gray-500">Online</div>
             </div>
             <div>
-              <div className="text-3xl font-bold text-gray-500 tabular-nums">{offlineNodes.length}</div>
+              <div className="text-2xl sm:text-3xl font-bold text-gray-500 tabular-nums">{offlineNodes.length}</div>
               <div className="text-xs text-gray-500">Offline</div>
             </div>
             <div>
-              <div className="text-3xl font-bold text-cyan-400 tabular-nums">{health?.sse_connections ?? '--'}</div>
+              <div className="text-2xl sm:text-3xl font-bold text-cyan-400 tabular-nums">{health?.sse_connections ?? '--'}</div>
               <div className="text-xs text-gray-500">
                 SSE Streams <span className="text-gray-600">· server</span>
               </div>
             </div>
             <div>
-              <div className="text-3xl font-bold text-white tabular-nums">{stats?.tasks?.total ?? '--'}</div>
+              <div className="text-2xl sm:text-3xl font-bold text-white tabular-nums">{stats?.tasks?.total ?? '--'}</div>
               <div className="text-xs text-gray-500">Total Tasks</div>
             </div>
           </div>
-          {stats?.tasks?.by_status && stats.tasks.by_status.length > 0 && (
-            /* Round 90: adopt the shared STATUS_CHIP_CLASS palette so
-               `acked`/`replied`/`failed` here color-match the same
-               chips on /tasks, Overview r69, and /tasks/[id] r68.
-               Unknown statuses fall back to the previous flat gray. */
-            <div className="mt-4 flex flex-wrap gap-2">
-              {stats.tasks.by_status.map((s: { status: string; count: number }) => (
-                <span key={s.status} className={`text-xs px-2 py-1 rounded border ${STATUS_CHIP_CLASS[s.status] || 'bg-[#0a0a15] border-[#1a1a2a] text-gray-400'}`}>
-                  {s.status}: {s.count}
-                </span>
-              ))}
-            </div>
-          )}
+          {stats?.tasks?.by_status && stats.tasks.by_status.length > 0 && (() => {
+            /* #217 D7 (less is more): the 6-9 chip per-status wall
+               duplicated the /tasks tab strip. Same one-line summary
+               idiom as the Overview task line — running/failed are the
+               only numbers that drive action, the rest is on /tasks. */
+            const byStatus = Object.fromEntries(stats.tasks.by_status.map((s: { status: string; count: number }) => [s.status, s.count]));
+            return (
+              <div className="mt-4 flex items-center justify-between border-t border-[#26262b] pt-3 text-xs">
+                <div className="text-gray-400 tabular-nums">
+                  <span className={byStatus['running'] ? 'text-green-400' : 'text-gray-500'}>{byStatus['running'] || 0} running</span>
+                  <span className="text-gray-600"> &middot; </span>
+                  <span className={byStatus['failed'] ? 'text-red-400' : 'text-gray-500'}>{byStatus['failed'] || 0} failed</span>
+                </div>
+                <Link href="/tasks" prefetch={false} className="text-cyan-400 hover:text-cyan-300">View all &rarr;</Link>
+              </div>
+            );
+          })()}
         </section>
 
         {/* Online Sessions — pulled into Status group (was below Send Task) */}
-        <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
+        <section className="bg-[#161618] border border-[#26262b] rounded-xl p-5">
           <h2 className="text-sm font-semibold text-gray-300 mb-4">
             Online Sessions <span className="text-gray-600">({onlineNodes.length})</span>
           </h2>
@@ -152,7 +167,7 @@ export default function AdminPage() {
             {onlineNodes.length === 0 ? (
               <div className="text-xs text-gray-600 text-center py-4">No online sessions</div>
             ) : onlineNodes.map(s => (
-              <div key={s.alias} className="flex items-center gap-3 bg-[#0a0a15] rounded-lg px-3 py-2 border border-[#1a1a2a]">
+              <div key={s.alias} className="flex items-center gap-3 bg-[#0e0e10] rounded-lg px-3 py-2 border border-[#1c1c1f]">
                 <AliasAvatar alias={s.alias} size={20} />
                 <div className="min-w-0 flex-1">
                   <div className="text-sm text-white font-medium truncate">{s.alias}</div>
@@ -177,28 +192,28 @@ export default function AdminPage() {
         <div id="actions" className="space-y-4 scroll-mt-6">
           <div className="flex items-center gap-2 px-1">
             <div className="text-[11px] uppercase tracking-[0.14em] text-gray-400 font-semibold">Actions</div>
-            <div className="flex-1 h-px bg-[#2a2a4a]" />
+            <div className="flex-1 h-px bg-[#26262b]" />
           </div>
           {sessions.length === 0 ? (
             /* Round 77: Broadcast and Send Task both require at least one
                registered agent. Surfacing the empty cards above an empty
                fleet is the same dead-control class as the Overview
                Dispatch button (r70). Replace with a single inline hint. */
-            <div className="bg-[#111128] border border-[#2a2a4a] rounded-xl px-5 py-4 text-sm text-gray-500">
+            <div className="bg-[#161618] border border-[#26262b] rounded-xl px-5 py-4 text-sm text-gray-500">
               Broadcast and Send Task become available after the first agent registers.
             </div>
           ) : (
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
 
         {/* Broadcast */}
-        <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
+        <section className="bg-[#161618] border border-[#26262b] rounded-xl p-5">
           <h2 className="text-sm font-semibold text-gray-300 mb-4">Broadcast</h2>
           <textarea
             value={broadcastMsg}
             onChange={e => setBroadcastMsg(e.target.value)}
             placeholder="Message to all online nodes..."
             rows={3}
-            className="w-full bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none resize-none"
+            className="w-full bg-[#0e0e10] border border-[#26262b] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none resize-none"
           />
           <div className="flex justify-between items-center mt-3">
             <span className="text-xs text-gray-600">{broadcastMsg.length}/500</span>
@@ -214,12 +229,12 @@ export default function AdminPage() {
         </section>
 
         {/* Send Task */}
-        <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
+        <section className="bg-[#161618] border border-[#26262b] rounded-xl p-5">
           <h2 className="text-sm font-semibold text-gray-300 mb-4">Send Task</h2>
           <select
             value={taskTarget}
             onChange={e => setTaskTarget(e.target.value)}
-            className="w-full bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-3 py-2 text-sm text-white focus:border-cyan-500/50 focus:outline-none mb-3"
+            className="w-full bg-[#0e0e10] border border-[#26262b] rounded-lg px-3 py-2 text-base sm:text-sm text-white focus:border-cyan-500/50 focus:outline-none mb-3"
           >
             <option value="">Select target node...</option>
             {onlineNodes.map(s => (
@@ -236,7 +251,7 @@ export default function AdminPage() {
             onChange={e => setTaskContent(e.target.value)}
             placeholder="Task content..."
             rows={3}
-            className="w-full bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none resize-none"
+            className="w-full bg-[#0e0e10] border border-[#26262b] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none resize-none"
           />
           <div className="flex justify-end mt-3">
             <button
@@ -258,12 +273,12 @@ export default function AdminPage() {
         <div id="users" className="space-y-4 scroll-mt-6">
           <div className="flex items-center gap-2 px-1">
             <div className="text-[11px] uppercase tracking-[0.14em] text-gray-400 font-semibold">Users</div>
-            <div className="flex-1 h-px bg-[#2a2a4a]" />
+            <div className="flex-1 h-px bg-[#26262b]" />
           </div>
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
 
         {/* User Management (V3 Auth) */}
-        <section className="bg-[#111128] border border-[#2a2a4a] rounded-xl p-5">
+        <section className="bg-[#161618] border border-[#26262b] rounded-xl p-5">
           <h2 className="text-sm font-semibold text-gray-300 mb-4">Register User (V3)</h2>
           <div className="space-y-3">
             <input
@@ -271,14 +286,14 @@ export default function AdminPage() {
               value={regUser}
               onChange={e => setRegUser(e.target.value)}
               placeholder="Username"
-              className="w-full bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none"
+              className="w-full bg-[#0e0e10] border border-[#26262b] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none"
             />
             <input
               type="password"
               value={regPass}
               onChange={e => setRegPass(e.target.value)}
               placeholder="Password"
-              className="w-full bg-[#0a0a15] border border-[#2a2a4a] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none"
+              className="w-full bg-[#0e0e10] border border-[#26262b] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-cyan-500/50 focus:outline-none"
             />
             <button
               onClick={registerUser}

package/app/components/AgentCard.tsx

@@ -28,10 +28,21 @@ export function AgentCard({ session: s, hasSse, sseCount, onChat }: AgentCardPro
     <Link
       href={`/node?alias=${encodeURIComponent(s.alias)}`}
       prefetch={false}
+      onClick={e => {
+        // #217 M2 (Vincent tg 646 "为什么还要留一个 chat 按钮，直接点击
+        // 不就行了"): tapping a reachable agent's card opens chat
+        // directly — the Chat button is gone. Offline/unreachable cards
+        // keep navigating to /node detail, and detail for reachable
+        // agents stays available via the Agents tab.
+        if (onChat && hasSse) {
+          e.preventDefault();
+          onChat(s.alias);
+        }
+      }}
       className={`anet-agent-card group relative block rounded-xl border p-3 sm:p-4 transition-all duration-300 cursor-pointer hover:-translate-y-0.5 ${
         hasSse
-          ? `bg-[#111128] border-[#2a2a4a] hover:border-cyan-500/30 hover:shadow-lg ${cfg.glow}`
-          : 'bg-[#0d0d1a] border-[#1a1a2a] opacity-40'
+          ? `bg-[#161618] border-[#26262b] hover:border-cyan-500/30 hover:shadow-lg ${cfg.glow}`
+          : 'bg-[#111113] border-[#1c1c1f] opacity-40'
       }`}
     >
       {/* Header: avatar + name + status. Avatar carries the alias→hue map
@@ -55,7 +66,7 @@ export function AgentCard({ session: s, hasSse, sseCount, onChat }: AgentCardPro
           chews ~28px per card × 99 sessions on Overview mobile. The
           agent type stays one tap away on /node detail. */}
       <div className="hidden sm:flex items-center gap-2 mb-3">
-        <span className="text-xs text-gray-600 bg-[#0a0a15] px-2 py-0.5 rounded border border-[#1a1a2a]">
+        <span className="text-xs text-gray-600 bg-[#0e0e10] px-2 py-0.5 rounded border border-[#1c1c1f]">
           {s.agent || 'unknown'}
         </span>
         {hasSse && (
@@ -67,12 +78,14 @@ export function AgentCard({ session: s, hasSse, sseCount, onChat }: AgentCardPro
           single-line padding (px-2 py-1) so the task strip is ~28px
           rather than ~56px. The full task is still in the title
           tooltip and on /node detail. */}
-      {s.task ? (
-        <div className="text-xs text-gray-400 bg-[#0a0a15] rounded-lg px-2 sm:px-3 py-1 sm:py-2 border border-[#1a1a2a] line-clamp-1 sm:line-clamp-2" title={s.task}>
+      {/* #217 M3: the "No active task" italic placeholder is gone — the
+          idle status chip in the header already says it, and the line
+          cost ~30px on every idle card across a 150-node fleet. The
+          task strip renders only when there is a task. */}
+      {s.task && (
+        <div className="text-xs text-gray-400 bg-[#0e0e10] rounded-lg px-2 sm:px-3 py-1 sm:py-2 border border-[#1c1c1f] line-clamp-1 sm:line-clamp-2" title={s.task}>
           {s.task}
         </div>
-      ) : (
-        <div className="text-xs text-gray-700 italic">No active task</div>
       )}
 
       {/* Progress bar — hidden below sm so an empty 0% bar doesn't
@@ -96,22 +109,25 @@ export function AgentCard({ session: s, hasSse, sseCount, onChat }: AgentCardPro
       {/* Footer: time + chat + hover chevron affordance (round 44).
           The card is a <Link> so it's clickable everywhere, but with no
           visible cue users may not realise. Chevron appears on hover and
-          slides right ~2px for a "drill in" hint. */}
-      <div className="mt-3 flex justify-between items-center text-[10px] text-gray-600">
-        <span className="truncate" title={s.server || ''}>{s.server || '--'}</span>
-        <div className="flex items-center gap-2">
-          {onChat && hasSse && (
-            <button
-              onClick={e => { e.preventDefault(); e.stopPropagation(); onChat(s.alias); }}
-              className="text-cyan-400 hover:text-cyan-300 px-1.5 py-0.5 rounded border border-cyan-500/20 hover:bg-cyan-500/10 transition-colors"
-            >
-              Chat
-            </button>
-          )}
+          slides right ~2px for a "drill in" hint.
+          #209 R40: two small mobile tweaks —
+            (1) the hover chevron is `hidden sm:inline-block` because
+                touch devices never trigger the :hover state, and the
+                12 px wide reserved slot was just an empty void on
+                mobile — but flex with opacity-0 was still spending
+                12 + 8 (gap) = 20 px on the right side of every card.
+            (2) mt-3 → mt-2 sm:mt-3 mirrors the same density pattern
+                R28 / R39 brought to the rest of the page. */}
+      <div className="mt-2 sm:mt-3 flex justify-between items-center text-[10px] text-gray-600">
+        {/* #217 D5 (Vincent: 乱七八糟的元素都可以删掉): the raw server
+            hostname (cloud instance IDs like iZrj93…) is noise on a
+            phone card — desktop keeps it, /node detail always has it. */}
+        <span className="hidden sm:inline truncate" title={s.server || ''}>{s.server || '--'}</span>
+        <div className="flex items-center gap-2 ml-auto">
           <span>{timeAgo(s.updated_at)}</span>
           <svg
             aria-hidden
-            className="w-3 h-3 text-gray-700 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200"
+            className="hidden sm:inline-block w-3 h-3 text-gray-700 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200"
             fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
           >
             <path d="M9 18l6-6-6-6" />

package/app/components/AppShell.tsx

@@ -20,7 +20,13 @@ export function AppShell({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex min-h-[100dvh] max-w-full overflow-x-hidden">
       <Sidebar />
-      <main className="flex-1 min-w-0 max-w-full overflow-x-hidden flex flex-col">
+      {/* R25 of #190: pair the existing bottom safe-area padding with a
+          top one so the HealthBanner clears the iOS status bar when
+          launched as an installed PWA (statusBarStyle: black-translucent
+          + viewportFit: cover, see app/layout.tsx). On non-PWA contexts
+          env(safe-area-inset-top) is 0, so this is a no-op for browser
+          tab visits. */}
+      <main className="flex-1 min-w-0 max-w-full overflow-x-hidden flex flex-col pt-[env(safe-area-inset-top)]">
         <HealthBanner />
         <div className="flex-1 min-w-0 max-w-full overflow-x-hidden pb-[calc(5rem+env(safe-area-inset-bottom))] lg:pb-0">{children}</div>
       </main>

package/app/components/ChatPopover.tsx

@@ -191,7 +191,7 @@ export function ChatPopover({ alias, onClose }: ChatPopoverProps) {
           // Chromium retargets the click to the header — the button never fires.
           onPointerDown={(e) => e.stopPropagation()}
           aria-label="Close chat"
-          className="text-[var(--fg-muted)] hover:text-[var(--fg)] p-1.5 rounded-lg hover:bg-[var(--bg-elevated)] shrink-0"
+          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)] shrink-0"
         >
           <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
             <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />

package/app/components/CollapsibleSearch.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+/**
+ * CollapsibleSearch
+ * ──────────────────
+ * #209 R34 — Reusable WeChat-style search-toggle pattern.
+ *
+ * Two pieces of UI from one component:
+ *   1. A magnifier button (`w-9 h-9 rounded-full`) that lives in a page
+ *      header — render it via `Button`.
+ *   2. A collapsible search row that reveals below the header on open —
+ *      render it via `Row`.
+ *
+ * Used together they replicate WeChat's chat-list search affordance:
+ * the search field is hidden by default behind a small circle at the
+ * top-right of the page header. Tapping it slides the input open,
+ * autofocuses, and lets Escape clear + close. A cyan dot appears in
+ * the corner of the icon when there is an active search term but the
+ * row is collapsed, so the user always knows a filter is in effect.
+ *
+ * Owner of the search string is the parent (this component is
+ * uncontrolled w.r.t. value — pure UI). That keeps the filter logic
+ * with the page so it's easy to plumb additional behaviour like
+ * `from:alias` shortcuts or highlight rendering.
+ *
+ * Shipped as a single component with two named children so callers
+ * can place `<Button>` inside their existing header flex row and
+ * `<Row>` just after, without restructuring around a tighter API.
+ *
+ * First adopters: /nodes (R32), /messages (R33). R34 ships
+ * /nodes + /messages migrated to use this component; future pages
+ * can add search by importing it instead of copy-pasting the JSX.
+ */
+
+import { useState, useCallback } from 'react';
+
+interface CollapsibleSearchAPI {
+  /** Round magnifier button. Place in your page header (e.g. right edge). */
+  Button: () => React.JSX.Element;
+  /** Collapsible search input row. Place immediately after the header. */
+  Row: () => React.JSX.Element | null;
+  /** Current search value — pass to your filter logic. */
+  value: string;
+  /** Programmatically clear + close (useful for "no results" reset link). */
+  reset: () => void;
+}
+
+interface UseCollapsibleSearchProps {
+  /** Controlled value + setter from the parent — owns the search string. */
+  value: string;
+  onChange: (next: string) => void;
+  /** Input placeholder. */
+  placeholder?: string;
+  /** Accessible label for the button (also drives `title=`). */
+  label?: string;
+  /** Hide everything when false (e.g. when there is nothing to search). */
+  enabled?: boolean;
+}
+
+export function useCollapsibleSearch({
+  value,
+  onChange,
+  placeholder = 'Search…',
+  label = 'Search',
+  enabled = true,
+}: UseCollapsibleSearchProps): CollapsibleSearchAPI {
+  const [open, setOpen] = useState(false);
+
+  const reset = useCallback(() => {
+    onChange('');
+    setOpen(false);
+  }, [onChange]);
+
+  const Button = useCallback(() => {
+    if (!enabled) return <></>;
+    const active = open || value;
+    return (
+      <button
+        type="button"
+        onClick={() => setOpen(v => !v)}
+        aria-label={open ? `Close ${label.toLowerCase()}` : `Open ${label.toLowerCase()}`}
+        aria-pressed={open}
+        title={open ? `Close ${label.toLowerCase()}` : label}
+        className={`relative shrink-0 inline-flex items-center justify-center rounded-full border w-9 h-9 transition-colors ${
+          active
+            ? 'border-cyan-500/40 bg-cyan-500/10 text-cyan-300'
+            : 'border-[#26262b] bg-[#161618] text-gray-400 hover:text-gray-200 hover:border-[#3a3a41]'
+        }`}
+      >
+        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+        </svg>
+        {value && !open && (
+          <span aria-hidden className="absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full bg-cyan-400 ring-2 ring-[#0b0b0d]" />
+        )}
+      </button>
+    );
+  }, [open, value, label, enabled]);
+
+  const Row = useCallback(() => {
+    if (!enabled) return null;
+    if (!open && !value) return null;
+    return (
+      <div className="mb-3 sm:mb-4 flex items-center gap-2">
+        <input
+          type="text"
+          value={value}
+          onChange={e => onChange(e.target.value)}
+          onKeyDown={e => { if (e.key === 'Escape') reset(); }}
+          placeholder={placeholder}
+          autoFocus={open}
+          className="flex-1 bg-[#161618] border border-[#26262b] rounded-lg px-3 py-2 text-base sm:text-sm text-white placeholder-gray-600 focus:border-cyan-500/40 focus:outline-none"
+        />
+        <button
+          type="button"
+          onClick={reset}
+          className="shrink-0 text-xs text-gray-500 hover:text-gray-300 px-2 py-2"
+          aria-label="Clear and close search"
+        >
+          Cancel
+        </button>
+      </div>
+    );
+  }, [open, value, onChange, placeholder, reset, enabled]);
+
+  return { Button, Row, value, reset };
+}

package/app/components/CommandCenter.tsx

@@ -26,9 +26,9 @@ export function CommandCenter({ tabs, activeTab, onOpenTab, onCloseTab, onSetAct
       <div className="fixed inset-0 bg-black/30 z-40 lg:hidden" onClick={onClose} />
 
       {/* Panel */}
-      <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 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 animate-slide-in">
         {/* Tab bar */}
-        <div className="flex items-center border-b border-[#2a2a4a] bg-[#0d0d1a] overflow-x-auto">
+        <div className="flex items-center border-b border-[#26262b] bg-[#111113] overflow-x-auto">
           <div className="flex-1 flex min-w-0">
             {tabs.map(alias => (
               <button
@@ -42,16 +42,26 @@ export function CommandCenter({ tabs, activeTab, onOpenTab, onCloseTab, onSetAct
               >
                 <div className={`w-2 h-2 rounded-full ${activeTab === alias ? 'bg-cyan-400' : 'bg-gray-600'}`} />
                 <span className="max-w-[80px] truncate">{alias}</span>
+                {/* R21 of #190 mobile a11y: nested close had no aria-label
+                    (screen-readers spoke just "button") and an ~8 px
+                    tap target (p-0.5 + text "×"). Both fixed; nested
+                    <button> inside <button> remains invalid HTML but
+                    is browser-tolerated and refactoring to role="tab"
+                    is out of scope for this round. */}
                 <button
                   onClick={e => { e.stopPropagation(); onCloseTab(alias); }}
-                  className="ml-1 text-gray-600 hover:text-gray-300 p-0.5"
+                  aria-label={`Close ${alias} chat tab`}
+                  className="ml-1 inline-flex h-7 w-7 items-center justify-center text-gray-600 hover:text-gray-300 rounded-md hover:bg-white/5"
                 >
                   ×
                 </button>
               </button>
             ))}
           </div>
-          <button onClick={onClose} className="text-gray-500 hover:text-white px-3 py-2.5 shrink-0 border-l border-[#2a2a4a]">
+          {/* R21 mobile a11y: outer command-center close was SVG-only
+              and screen-reader silent; also bumped to 44 x 44 hit zone
+              from 32 x ~36. */}
+          <button onClick={onClose} aria-label="Close command center" className="inline-flex min-h-[44px] min-w-[44px] items-center justify-center text-gray-500 hover:text-white shrink-0 border-l border-[#26262b]">
             <svg className="w-4 h-4" 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/CommandPalette.tsx

@@ -426,10 +426,10 @@ export function CommandPalette() {
     >
       <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" aria-hidden />
       <div
-        className="relative w-full max-w-xl rounded-xl border border-[#2a2a4a] bg-[#0d0d1a] shadow-2xl shadow-black/40 overflow-hidden"
+        className="relative w-full max-w-xl rounded-xl border border-[#26262b] bg-[#111113] shadow-2xl shadow-black/40 overflow-hidden"
         onClick={e => e.stopPropagation()}
       >
-        <div className="flex items-center gap-2 border-b border-[#2a2a4a] px-3 py-2.5">
+        <div className="flex items-center gap-2 border-b border-[#26262b] px-3 py-2.5">
           <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5" className="text-gray-500 shrink-0">
             <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
           </svg>
@@ -438,9 +438,9 @@ export function CommandPalette() {
             value={query}
             onChange={e => { setQuery(e.target.value); setSelected(0); }}
             placeholder="Type a command or search…"
-            className="flex-1 bg-transparent text-sm text-gray-200 placeholder-gray-600 focus:outline-none"
+            className="flex-1 bg-transparent text-base sm:text-sm text-gray-200 placeholder-gray-600 focus:outline-none"
           />
-          <kbd className="text-[10px] text-gray-600 border border-[#2a2a4a] rounded px-1.5 py-0.5 font-mono">esc</kbd>
+          <kbd className="text-[10px] text-gray-600 border border-[#26262b] rounded px-1.5 py-0.5 font-mono">esc</kbd>
         </div>
 
         <div className="max-h-[60vh] overflow-y-auto py-2">
@@ -461,7 +461,7 @@ export function CommandPalette() {
                       onMouseEnter={() => setSelected(idx)}
                       onClick={() => { pushRecent(c.id); c.perform(router); setOpen(false); }}
                       className={`anet-cmdk-row w-full flex items-center gap-3 px-3 py-2 text-left text-sm ${
-                        isActive ? 'bg-cyan-500/10 text-cyan-300' : 'text-gray-300 hover:bg-[#1a1a2a]/50'
+                        isActive ? 'bg-cyan-500/10 text-cyan-300' : 'text-gray-300 hover:bg-[#1c1c1f]/50'
                       }`}
                     >
                       <span className={isActive ? 'text-cyan-400' : 'text-gray-500'}>{c.icon}</span>
@@ -484,7 +484,7 @@ export function CommandPalette() {
           )}
         </div>
 
-        <div className="border-t border-[#2a2a4a] px-3 py-1.5 flex items-center justify-between text-[10px] text-gray-600">
+        <div className="border-t border-[#26262b] px-3 py-1.5 flex items-center justify-between text-[10px] text-gray-600">
           <span className="flex items-center gap-3">
             <span><kbd className="font-mono">↑↓</kbd> navigate</span>
             <span><kbd className="font-mono">↵</kbd> select</span>

package/app/components/DispatchPanel.tsx

@@ -73,14 +73,17 @@ export function DispatchPanel({ sessions, onClose }: DispatchPanelProps) {
   return (
     <>
       <div className="fixed inset-0 bg-black/50 z-40 anet-fade-in" onClick={onClose} />
-      <div className="fixed inset-x-3 inset-y-3 max-h-[calc(100dvh-1.5rem)] lg:inset-x-[15%] lg:inset-y-[5%] lg:max-h-none bg-[#0a0a1a] border border-[#2a2a4a] rounded-2xl z-50 flex flex-col shadow-2xl shadow-black/70 overflow-hidden anet-fade-in">
+      <div className="fixed inset-x-3 inset-y-3 max-h-[calc(100dvh-1.5rem)] lg:inset-x-[15%] lg:inset-y-[5%] lg:max-h-none bg-[#0b0b0d] border border-[#26262b] rounded-2xl z-50 flex flex-col shadow-2xl shadow-black/70 overflow-hidden anet-fade-in">
         {/* Header */}
-        <div className="flex items-center justify-between px-6 py-4 border-b border-[#2a2a4a] bg-[#0d0d1a]">
+        <div className="flex items-center justify-between px-6 py-4 border-b border-[#26262b] bg-[#111113]">
           <div>
             <h2 className="text-lg font-bold text-white">Dispatch Task</h2>
             <p className="text-xs text-gray-500 mt-0.5">Send a task to one or more agents</p>
           </div>
-          <button onClick={onClose} className="text-gray-500 hover:text-white p-1.5 rounded-lg hover:bg-[#1a1a2a]">
+          {/* R22 of #190: same SVG-only-no-aria-label pattern that R16
+              fixed on TaskChatPanel/TaskDrawer/ChatPopover; DispatchPanel
+              missed that pass. ~32 px hit zone + silent on screen-reader. */}
+          <button onClick={onClose} aria-label="Close dispatch panel" 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>
@@ -89,12 +92,12 @@ export function DispatchPanel({ sessions, onClose }: DispatchPanelProps) {
 
         <div className="flex-1 flex flex-col lg:flex-row overflow-hidden">
           {/* Left: Node selection */}
-          <div className="lg:w-[280px] border-b lg:border-b-0 lg:border-r border-[#2a2a4a] flex flex-col">
-            <div className="px-4 py-3 border-b border-[#2a2a4a]">
+          <div className="lg:w-[280px] border-b lg:border-b-0 lg:border-r border-[#26262b] flex flex-col">
+            <div className="px-4 py-3 border-b border-[#26262b]">
               <input
                 type="text" value={filter} onChange={e => setFilter(e.target.value)}
                 placeholder="Filter agents..."
-                className="w-full bg-[#111128] border border-[#2a2a4a] rounded-lg px-3 py-2 text-xs text-white placeholder-gray-600 focus:border-cyan-500/40 focus:outline-none"
+                className="w-full bg-[#161618] border border-[#26262b] rounded-lg px-3 py-2 text-base sm:text-xs text-white placeholder-gray-600 focus:border-cyan-500/40 focus:outline-none"
               />
               <div className="flex items-center justify-between mt-2">
                 <button onClick={selectAll} className="text-[10px] text-cyan-400 hover:text-cyan-300">
@@ -107,7 +110,7 @@ export function DispatchPanel({ sessions, onClose }: DispatchPanelProps) {
               {filtered.map(s => (
                 <button key={s.alias} onClick={() => toggleNode(s.alias)}
                   className={`w-full flex items-center gap-2 px-3 py-2 rounded-lg text-xs text-left transition-colors ${
-                    selected.has(s.alias) ? 'bg-cyan-500/10 text-cyan-300 border border-cyan-500/20' : 'text-gray-400 hover:bg-[#1a1a2a]'
+                    selected.has(s.alias) ? 'bg-cyan-500/10 text-cyan-300 border border-cyan-500/20' : 'text-gray-400 hover:bg-[#1c1c1f]'
                   }`}>
                   <AliasAvatar alias={s.alias} size={16} />
                   <div className={`w-1.5 h-1.5 rounded-full shrink-0 ${s.status === 'working' ? 'bg-green-400' : s.status === 'idle' ? 'bg-cyan-400' : 'bg-gray-500'}`} />
@@ -126,12 +129,12 @@ export function DispatchPanel({ sessions, onClose }: DispatchPanelProps) {
               <textarea
                 value={prompt} onChange={e => setPrompt(e.target.value)}
                 placeholder="Enter the task you want to dispatch..."
-                className="flex-1 min-h-[120px] bg-[#111128] border border-[#2a2a4a] rounded-xl px-4 py-3 text-sm text-white placeholder-gray-600 focus:border-cyan-500/40 focus:outline-none resize-none"
+                className="flex-1 min-h-[120px] bg-[#161618] border border-[#26262b] rounded-xl px-4 py-3 text-base sm:text-sm text-white placeholder-gray-600 focus:border-cyan-500/40 focus:outline-none resize-none"
               />
 
               <div className="flex items-center gap-3 mt-4">
                 <select value={priority} onChange={e => setPriority(e.target.value)}
-                  className="bg-[#111128] border border-[#2a2a4a] rounded-lg px-3 py-2 text-xs text-white focus:outline-none">
+                  className="bg-[#161618] border border-[#26262b] rounded-lg px-3 py-2 text-base sm:text-xs text-white focus:outline-none">
                   <option value="normal">Normal priority</option>
                   <option value="high">High priority</option>
                   <option value="low">Low priority</option>
@@ -155,7 +158,7 @@ export function DispatchPanel({ sessions, onClose }: DispatchPanelProps) {
 
             {/* Results */}
             {results.length > 0 && (
-              <div className="px-6 py-3 border-t border-[#2a2a4a] bg-[#0d0d1a]">
+              <div className="px-6 py-3 border-t border-[#26262b] bg-[#111113]">
                 <div className="text-xs text-gray-500 mb-2">
                   {successCount}/{results.length} dispatched successfully
                 </div>