@sleep2agi/agent-network-dashboard 0.4.5-preview.0 → 0.4.5-preview.2

package/app/components/LoadingSkeleton.tsx

@@ -1,42 +1,86 @@
 'use client';
 
+/**
+ * Loading skeleton — mirrors the actual Overview layout structure so the
+ * page doesn't appear to "shift" once data arrives. Uses the same
+ * `anet-skeleton-pulse` rhythm as the brand pulse (1.6s opacity drift,
+ * no scale, no blur, no glow) so the loading animation feels native to
+ * the rest of the dashboard rather than a generic spinner.
+ *
+ * Bars are theme-aware: anet-skeleton-bar (existing CSS shim resolves this to
+ * var(--bg-elevated) on light/mint), so light theme shows soft grey blocks
+ * on white cards and dark theme shows lighter blocks on navy cards.
+ */
 export function LoadingSkeleton() {
   return (
-    <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-6 font-mono animate-pulse">
-      {/* Header skeleton */}
-      <div className="flex items-center justify-between mb-8">
-        <div>
-          <div className="h-7 w-48 bg-gray-800 rounded mb-2" />
-          <div className="h-4 w-64 bg-gray-800/60 rounded" />
-        </div>
-        <div className="flex gap-3">
-          {[1, 2, 3].map(i => (
-            <div key={i} className="w-[72px] h-[60px] bg-gray-800/40 rounded-lg border border-gray-800" />
-          ))}
+    <div className="min-h-screen bg-[#0a0a1a] text-gray-100 p-4 sm:p-6 font-mono">
+      {/* KPI top strip — 4 cards matching StatsBar */}
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-8 anet-skeleton-pulse">
+        {[1, 2, 3, 4].map(i => (
+          <div key={i} className="rounded-xl border border-[#2a2a4a] bg-[#111128] px-4 py-3">
+            <Bar w="2.5rem" h="1.75rem" />
+            <Bar w="3.5rem" h="0.75rem" className="mt-2" />
+            <Bar w="5rem" h="0.625rem" className="mt-1" />
+          </div>
+        ))}
+      </div>
+
+      {/* Dispatch + UserBar row */}
+      <div className="flex items-center gap-3 mb-3 anet-skeleton-pulse">
+        <Bar w="6rem" h="2.5rem" rounded="0.75rem" />
+        <div className="flex-1 rounded-lg border border-[#2a2a4a] bg-[#111128] px-4 py-2.5 flex items-center gap-3">
+          <div className="w-8 h-8 rounded-full anet-skeleton-bar" />
+          <div className="flex-1">
+            <Bar w="6rem" h="0.875rem" />
+            <Bar w="10rem" h="0.625rem" className="mt-1" />
+          </div>
         </div>
       </div>
 
-      {/* Broadcast bar skeleton */}
-      <div className="mb-6 flex gap-2">
-        <div className="flex-1 h-10 bg-gray-800/40 rounded-lg" />
-        <div className="w-28 h-10 bg-gray-800/40 rounded-lg" />
+      {/* Config bar */}
+      <div className="mb-6 rounded-lg border border-[#2a2a4a] bg-[#111128] px-4 py-3 anet-skeleton-pulse">
+        <Bar w="14rem" h="0.875rem" />
+      </div>
+
+      {/* Stat strip 3 cards */}
+      <div className="grid grid-cols-3 gap-2 sm:gap-3 mb-3 anet-skeleton-pulse">
+        {[1, 2, 3].map(i => (
+          <div key={i} className="rounded-xl border border-[#2a2a4a] bg-[#111128] px-3 py-3">
+            <Bar w="2rem" h="1.25rem" />
+            <Bar w="2.5rem" h="0.75rem" className="mt-1" />
+            <Bar w="3.5rem" h="0.625rem" className="mt-px" />
+          </div>
+        ))}
+      </div>
+
+      {/* Nav rail 3 cards */}
+      <div className="grid grid-cols-3 gap-2 sm:gap-3 mb-6 anet-skeleton-pulse">
+        {[1, 2, 3].map(i => (
+          <div key={i} className="rounded-xl border border-[#2a2a4a] bg-[#111128] px-3 py-2.5 flex items-center justify-center gap-2">
+            <div className="w-4 h-4 rounded anet-skeleton-bar" />
+            <Bar w="4rem" h="0.75rem" />
+          </div>
+        ))}
       </div>
 
-      {/* Topology skeleton */}
-      <div className="w-full max-w-4xl mx-auto mb-8 h-64 bg-gray-800/20 rounded-xl" />
+      {/* Broadcast bar */}
+      <div className="mb-6 flex gap-2 anet-skeleton-pulse">
+        <div className="flex-1 h-10 rounded-lg border border-[#2a2a4a] bg-[#111128]" />
+        <div className="w-28 h-10 rounded-lg anet-skeleton-bar" />
+      </div>
 
-      {/* Card grid skeleton */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+      {/* Agent card grid */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-3 sm:gap-4 anet-skeleton-pulse">
         {[1, 2, 3, 4].map(i => (
-          <div key={i} className="rounded-xl border border-gray-800/40 p-4 bg-gray-800/20">
+          <div key={i} className="rounded-xl border border-[#2a2a4a] bg-[#111128] p-4">
             <div className="flex items-center gap-2 mb-3">
-              <div className="w-2.5 h-2.5 rounded-full bg-gray-700" />
-              <div className="h-4 w-24 bg-gray-700 rounded" />
+              <div className="w-2 h-2 rounded-full anet-skeleton-bar" />
+              <Bar w="6rem" h="0.875rem" />
             </div>
             <div className="space-y-2">
-              <div className="h-3 w-full bg-gray-800/60 rounded" />
-              <div className="h-3 w-3/4 bg-gray-800/60 rounded" />
-              <div className="h-3 w-1/2 bg-gray-800/60 rounded" />
+              <Bar w="100%" h="0.625rem" />
+              <Bar w="75%" h="0.625rem" />
+              <Bar w="55%" h="0.625rem" />
             </div>
           </div>
         ))}
@@ -45,6 +89,18 @@ export function LoadingSkeleton() {
   );
 }
 
+/** Single shimmer bar — uses `anet-skeleton-bar` so theme-specific bar
+ *  color (dark navy on dark themes, mid-grey on light) overrides the
+ *  default. */
+function Bar({ w, h, rounded, className }: { w: string; h: string; rounded?: string; className?: string }) {
+  return (
+    <div
+      className={`anet-skeleton-bar ${className || ''}`}
+      style={{ width: w, height: h, borderRadius: rounded || '0.375rem' }}
+    />
+  );
+}
+
 // EmptyState export removed in 0.4.5 — replaced by EmptyState.tsx with
 // per-variant glyphs and a NodesEmptyState wrapper for the Overview
 // hint-aware behavior. See app/components/EmptyState.tsx.

package/app/components/Sidebar.tsx

@@ -151,6 +151,24 @@ export function Sidebar() {
               Sign out
             </button>
           )}
+          {!collapsed && (
+            <button
+              onClick={() => {
+                // Dispatch a synthetic keypress so the global Cmd+K listener fires
+                window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true, ctrlKey: true }));
+              }}
+              className="w-full flex items-center justify-between gap-2 px-5 py-2 text-[11px] text-gray-600 hover:text-gray-400 hover:bg-[#1a1a2a] transition-colors"
+              aria-label="Open command palette"
+            >
+              <span className="flex items-center gap-2">
+                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+                Quick search
+              </span>
+              <kbd className="text-[10px] border border-current rounded px-1 py-0.5 opacity-60 font-mono">⌘K</kbd>
+            </button>
+          )}
           <div className={`flex items-center gap-2 px-3 py-2 ${collapsed ? 'justify-center' : 'justify-between'}`}>
             <ThemeSwitcher compact={collapsed} />
             <button

package/app/components/UserBar.tsx

@@ -140,8 +140,22 @@ export function UserBar() {
             ))}
           </select>
         )}
-        <button onClick={() => { setEditName(auth.user?.display_name || ''); setEditEmail(''); setEditing(!editing); }} className="text-xs text-gray-500 hover:text-gray-300">Edit</button>
-        <button onClick={logout} className="text-xs text-gray-500 hover:text-gray-300">Sign out</button>
+        <button onClick={() => { setEditName(auth.user?.display_name || ''); setEditEmail(''); setEditing(!editing); }}
+          className="text-xs text-gray-500 hover:text-gray-300 whitespace-nowrap"
+          aria-label="Edit profile">
+          <span className="hidden sm:inline">Edit</span>
+          <svg className="sm:hidden w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.862 4.487z" />
+          </svg>
+        </button>
+        <button onClick={logout}
+          className="text-xs text-gray-500 hover:text-gray-300 whitespace-nowrap"
+          aria-label="Sign out">
+          <span className="hidden sm:inline">Sign out</span>
+          <svg className="sm:hidden w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
+          </svg>
+        </button>
       </div>
       {editing && (
         <div className="flex flex-wrap items-center gap-2 mt-2 pt-2 border-t border-[#2a2a4a]">

package/app/globals.css

@@ -309,6 +309,66 @@ body {
 [data-theme="light"] .text-indigo-400 {
   color: var(--accent) !important;
 }
+
+/* Light theme: every "-300/400" accent text color needs a darker mid-tone
+   variant. The default Tailwind `-300/-400` shades are designed for dark
+   backgrounds — putting them on white gives "barely visible" text (the
+   problem Vincent flagged: "浅色下很多字体看不见"). Map each family to its
+   `-700` equivalent so contrast against white card is ≥ AA. */
+[data-theme="light"] .text-green-400,
+[data-theme="light"] .text-green-300,
+[data-theme="mint"]  .text-green-400,
+[data-theme="mint"]  .text-green-300 { color: #047857 !important; }
+
+[data-theme="light"] .text-yellow-400,
+[data-theme="light"] .text-yellow-300,
+[data-theme="mint"]  .text-yellow-400,
+[data-theme="mint"]  .text-yellow-300 { color: #92400e !important; }
+
+[data-theme="light"] .text-amber-400,
+[data-theme="light"] .text-amber-300,
+[data-theme="mint"]  .text-amber-400,
+[data-theme="mint"]  .text-amber-300 { color: #92400e !important; }
+
+[data-theme="light"] .text-red-400,
+[data-theme="light"] .text-red-300,
+[data-theme="mint"]  .text-red-400,
+[data-theme="mint"]  .text-red-300 { color: #b91c1c !important; }
+
+[data-theme="light"] .text-purple-400,
+[data-theme="light"] .text-purple-300,
+[data-theme="mint"]  .text-purple-400,
+[data-theme="mint"]  .text-purple-300 { color: #6d28d9 !important; }
+
+[data-theme="light"] .text-orange-400,
+[data-theme="light"] .text-orange-300,
+[data-theme="mint"]  .text-orange-400,
+[data-theme="mint"]  .text-orange-300 { color: #c2410c !important; }
+
+[data-theme="light"] .text-blue-400,
+[data-theme="light"] .text-blue-300,
+[data-theme="mint"]  .text-blue-400,
+[data-theme="mint"]  .text-blue-300 { color: #1d4ed8 !important; }
+
+[data-theme="light"] .text-pink-400,
+[data-theme="light"] .text-pink-300,
+[data-theme="mint"]  .text-pink-400,
+[data-theme="mint"]  .text-pink-300 { color: #be185d !important; }
+
+[data-theme="light"] .text-violet-400,
+[data-theme="light"] .text-violet-300,
+[data-theme="mint"]  .text-violet-400,
+[data-theme="mint"]  .text-violet-300 { color: #6d28d9 !important; }
+
+[data-theme="light"] .text-teal-400,
+[data-theme="light"] .text-teal-300,
+[data-theme="mint"]  .text-teal-400,
+[data-theme="mint"]  .text-teal-300 { color: #0f766e !important; }
+
+/* Light theme: text-gray-700 (used in footers / muted body) is too pale
+   when sitting on slightly-grey page bg. Bump to fg-muted. */
+[data-theme="light"] .text-gray-700,
+[data-theme="mint"]  .text-gray-700 { color: var(--fg-muted) !important; }
 [data-theme="light"] .bg-emerald-500\/10,
 [data-theme="light"] .bg-emerald-500\/20,
 [data-theme="light"] .bg-cyan-500\/10,
@@ -539,6 +599,29 @@ body {
   box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px var(--border);
 }
 
+/* Health banner — sticky thin strip above content, with theme-aware
+   green/amber/red tints. Dark themes use the lower-opacity bg+border
+   that come from the component classes directly. Light/mint need
+   slightly more saturation so the tint reads on a white surface. */
+[data-theme="light"] .anet-health-banner.bg-emerald-500\/6,
+[data-theme="mint"] .anet-health-banner.bg-emerald-500\/6 {
+  background-color: rgba(16, 185, 129, 0.08) !important;
+  color: #047857 !important;
+  border-color: rgba(16, 185, 129, 0.25) !important;
+}
+[data-theme="light"] .anet-health-banner.bg-amber-500\/8,
+[data-theme="mint"] .anet-health-banner.bg-amber-500\/8 {
+  background-color: rgba(245, 158, 11, 0.12) !important;
+  color: #92400e !important;
+  border-color: rgba(245, 158, 11, 0.30) !important;
+}
+[data-theme="light"] .anet-health-banner.bg-red-500\/8,
+[data-theme="mint"] .anet-health-banner.bg-red-500\/8 {
+  background-color: rgba(220, 38, 38, 0.10) !important;
+  color: #b91c1c !important;
+  border-color: rgba(220, 38, 38, 0.30) !important;
+}
+
 /* Sidebar brand "online" pulse — slow, restrained, NO glow.
    1.6s opacity drift between 1.0 and 0.5; nothing scales, nothing blurs. */
 @keyframes anet-brand-pulse-kf {
@@ -552,6 +635,104 @@ body {
   .anet-brand-pulse { animation: none; }
 }
 
+/* Skeleton pulse — same 1.6s rhythm as the brand pulse but applied to a
+   container so all bars inside breathe together. Drifts between full
+   token value and 60% so light themes show a calm grey-to-bg-elevated
+   fade and dark themes show a calm navy-to-elevated fade. */
+@keyframes anet-skeleton-kf {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.55; }
+}
+.anet-skeleton-pulse {
+  animation: anet-skeleton-kf 1.6s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .anet-skeleton-pulse { animation: none; }
+}
+
+/* Skeleton bar fill — different per theme so it's visible against the
+   card bg without being loud. Dark: lighter navy block on dark card.
+   Light: mid-grey on white card (not too light or it disappears). */
+.anet-skeleton-bar {
+  background-color: #1a1a2a;
+}
+[data-theme="light"] .anet-skeleton-bar,
+[data-theme="mint"] .anet-skeleton-bar {
+  background-color: #d4d8df;
+}
+
+/* Command palette modal surface — bumped depth so it sits clearly above
+   the page content in both themes. Light/mint: white shell with a real
+   shadow (not the dark navy that the CSS shim would normally translate
+   `bg-[#0d0d1a]` into). */
+.anet-cmdk kbd {
+  font-size: 9px;
+  line-height: 1;
+  padding: 1px 4px;
+  border: 1px solid currentColor;
+  border-radius: 3px;
+  opacity: 0.6;
+}
+[data-theme="light"] .anet-cmdk > div:not([aria-hidden]),
+[data-theme="mint"]  .anet-cmdk > div:not([aria-hidden]) {
+  background-color: var(--bg-secondary) !important;
+  box-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.18),
+              0 2px 6px -2px rgba(15, 23, 42, 0.10);
+}
+[data-theme="light"] .anet-cmdk-row.bg-cyan-500\/10,
+[data-theme="mint"]  .anet-cmdk-row.bg-cyan-500\/10 {
+  background-color: rgba(0, 158, 126, 0.08) !important;
+}
+
+/* Help overlay — same white-card-with-shadow treatment as cmdk on light */
+[data-theme="light"] .anet-help > div:not([aria-hidden]),
+[data-theme="mint"]  .anet-help > div:not([aria-hidden]) {
+  background-color: var(--bg-secondary) !important;
+  box-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.18),
+              0 2px 6px -2px rgba(15, 23, 42, 0.10);
+}
+
+/* Tasks tab strip horizontal scroll fade — gradient overlays at left/right
+   edges hint that there's more content when the row overflows. Only
+   applied on <sm (where the strip actually scrolls). The wrapper is
+   `position: relative` and the fades are absolute siblings. */
+.anet-tabstrip-wrap {
+  position: relative;
+}
+.anet-tabstrip-wrap::before,
+.anet-tabstrip-wrap::after {
+  content: '';
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  width: 20px;
+  pointer-events: none;
+  z-index: 1;
+}
+.anet-tabstrip-wrap::before {
+  left: 0;
+  background: linear-gradient(to right, #111128, transparent);
+  border-radius: 8px 0 0 8px;
+}
+.anet-tabstrip-wrap::after {
+  right: 0;
+  background: linear-gradient(to left, #111128, transparent);
+  border-radius: 0 8px 8px 0;
+}
+@media (min-width: 640px) {
+  /* sm: stops scrolling, hide the fades */
+  .anet-tabstrip-wrap::before,
+  .anet-tabstrip-wrap::after { display: none; }
+}
+[data-theme="light"] .anet-tabstrip-wrap::before,
+[data-theme="mint"]  .anet-tabstrip-wrap::before {
+  background: linear-gradient(to right, var(--bg-secondary), transparent);
+}
+[data-theme="light"] .anet-tabstrip-wrap::after,
+[data-theme="mint"]  .anet-tabstrip-wrap::after {
+  background: linear-gradient(to left, var(--bg-secondary), transparent);
+}
+
 /* P0-3 baseline: error / warning chip colors for light themes.
    The component-level copy (replacing raw JSON with human text) is fixed
    in the Logs / Server-Logs page components separately. */

package/app/page.tsx

@@ -193,20 +193,93 @@ export default function Dashboard() {
           ("0/0", "--", "0") with placeholder arrows ("→ Messages").
           Users couldn't tell which were stats vs which were navigation. */}
       <section className="mb-3 grid grid-cols-3 gap-2 sm:gap-3">
-        {[
-          { href: '/nodes', label: 'Nodes', value: `${online}/${total}`, sub: `${online > 0 ? Math.round((online/total)*100) : 0}% online`, color: 'text-green-400 border-green-500/20' },
-          { href: '/tasks', label: 'Tasks', value: String(Object.values(taskStats).reduce((a, b) => a + b, 0) || 0), sub: 'all-time', color: 'text-cyan-400 border-cyan-500/20' },
-          { href: '/tasks?status=failed', label: 'Failed', value: String(taskStats['failed'] || 0), sub: taskStats['failed'] ? 'needs review' : 'none', color: taskStats['failed'] ? 'text-red-400 border-red-500/25' : 'text-gray-500 border-gray-700/30' },
-        ].map(a => (
-          <Link key={a.href} href={a.href} prefetch={false} className={`anet-stat-link group relative rounded-xl border ${a.color} bg-[#111128] px-3 py-3 transition-all hover:-translate-y-px`}>
-            <div className="flex items-baseline justify-between">
-              <div className={`text-xl font-semibold tabular-nums ${a.color.split(' ')[0]}`}>{a.value}</div>
-              <div className="text-[10px] text-gray-600 group-hover:text-gray-400 transition-colors">View →</div>
-            </div>
-            <div className="text-[11px] text-gray-400 mt-0.5">{a.label}</div>
-            <div className="text-[10px] text-gray-600 mt-px">{a.sub}</div>
-          </Link>
-        ))}
+        {(() => {
+          // Build breakdown popover content per card. Pure data — pure CSS
+          // popover (no JS state) wires the hover-show transition below.
+          const idleCount = sessions.filter(s => isOnline(s) && s.status !== 'working').length;
+          const offlineCount = total - online;
+          const orderedStatuses = ['running', 'replied', 'failed', 'cancelled', 'expired', 'closed', 'created', 'delivered', 'acked'];
+          const failedRecent = tasks.filter((t: { status: string }) => t.status === 'failed').length;
+
+          const cards = [
+            {
+              href: '/nodes', label: 'Nodes',
+              value: `${online}/${total}`,
+              sub: `${total > 0 ? Math.round((online / total) * 100) : 0}% online`,
+              color: 'text-green-400 border-green-500/20',
+              popover: total === 0 ? null : [
+                { k: 'working', v: working, dot: '', color: '#4ade80' },
+                { k: 'idle', v: idleCount, dot: '', color: '#22d3ee' },
+                { k: 'offline', v: offlineCount, dot: '', color: '#9ca3af' },
+              ],
+            },
+            {
+              href: '/tasks', label: 'Tasks',
+              value: String(Object.values(taskStats).reduce((a, b) => a + b, 0) || 0),
+              sub: 'all-time',
+              color: 'text-cyan-400 border-cyan-500/20',
+              popover: Object.keys(taskStats).length === 0 ? null
+                : orderedStatuses
+                    .filter(s => taskStats[s])
+                    .map(s => {
+                      // Inline hex avoids Tailwind purging dynamic
+                      // `bg-${color}-400` class names.
+                      const hex = ({
+                        running:   '#4ade80', replied:   '#a78bfa', failed:    '#f87171',
+                        cancelled: '#facc15', expired:   '#fb923c', closed:    '#9ca3af',
+                        created:   '#9ca3af', delivered: '#60a5fa', acked:     '#22d3ee',
+                      } as Record<string, string>)[s] || '#9ca3af';
+                      return { k: s, v: taskStats[s], dot: '', color: hex };
+                    }),
+            },
+            {
+              href: '/tasks?status=failed', label: 'Failed',
+              value: String(taskStats['failed'] || 0),
+              sub: taskStats['failed'] ? 'needs review' : 'none',
+              color: taskStats['failed'] ? 'text-red-400 border-red-500/25' : 'text-gray-500 border-gray-700/30',
+              popover: !failedRecent ? [{ k: 'no failures yet', v: '', dot: '', color: '#4b5563' }]
+                : [{ k: `${failedRecent} in current view`, v: '', dot: '', color: '#f87171' }],
+            },
+          ];
+
+          return cards.map(a => (
+            <Link
+              key={a.href}
+              href={a.href}
+              prefetch={false}
+              className={`anet-stat-link group relative rounded-xl border ${a.color} bg-[#111128] px-3 py-3 transition-all hover:-translate-y-px`}
+            >
+              <div className="flex items-baseline justify-between">
+                <div className={`text-xl font-semibold tabular-nums ${a.color.split(' ')[0]}`}>{a.value}</div>
+                <div className="hidden sm:block text-[10px] text-gray-600 group-hover:text-gray-400 transition-colors">View →</div>
+              </div>
+              <div className="text-[11px] text-gray-400 mt-0.5">{a.label}</div>
+              <div className="text-[10px] text-gray-600 mt-px">{a.sub}</div>
+
+              {/* Hover popover — CSS-only, restrained. Hidden on touch
+                  (no :hover) so mobile is unaffected. Positioned just
+                  below the card so it doesn't fight nav rail. */}
+              {a.popover && a.popover.length > 0 && (
+                <div className="anet-stat-popover hidden md:block pointer-events-none absolute left-2 right-2 top-full mt-1 z-20 rounded-lg border border-[#2a2a4a] bg-[#0d0d1a] shadow-lg shadow-black/30 px-3 py-2 opacity-0 translate-y-[-2px] group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-150 delay-100">
+                  <div className="text-[10px] text-gray-600 uppercase tracking-wider mb-1.5">Breakdown</div>
+                  <ul className="space-y-1">
+                    {a.popover.map(row => (
+                      <li key={row.k} className="flex items-center gap-2 text-[11px]">
+                        <span
+                          className="inline-block w-1.5 h-1.5 rounded-full shrink-0"
+                          style={{ backgroundColor: row.color }}
+                          aria-hidden
+                        />
+                        <span className="text-gray-400 capitalize">{row.k}</span>
+                        {row.v !== '' && <span className="ml-auto text-gray-300 tabular-nums font-medium">{row.v}</span>}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </Link>
+          ));
+        })()}
       </section>
 
       {/* Nav rail — pure navigation, icon + label, no data */}

package/app/tasks/page.tsx

@@ -48,6 +48,21 @@ const STATUS_COLORS: Record<string, string> = {
   expired: 'bg-orange-500/10 text-orange-300 border-orange-500/20',
 };
 
+/** Small colored dot per status — visible on every tab (active + inactive)
+ *  so users can scan the row at a glance. Hex inlined to avoid Tailwind
+ *  purging dynamic `bg-${family}-400` class names. */
+const STATUS_DOTS: Record<string, string> = {
+  created:   '#9ca3af',
+  delivered: '#60a5fa',
+  acked:     '#22d3ee',
+  running:   '#4ade80',
+  replied:   '#a78bfa',
+  closed:    '#6b7280',
+  failed:    '#f87171',
+  cancelled: '#facc15',
+  expired:   '#fb923c',
+};
+
 function statusBadge(status: string) {
   const color = STATUS_COLORS[status] || 'bg-gray-500/10 text-gray-400 border-gray-500/20';
   return `text-xs px-2 py-0.5 rounded-md border ${color}`;
@@ -134,19 +149,34 @@ function TasksContent() {
         </span>
       </div>
 
-      {/* Status Tabs */}
-      <div className="flex flex-wrap gap-1 mb-4 bg-[#111128] rounded-lg border border-[#2a2a4a] p-1">
+      {/* Status Tabs — color-coded dots per status family so users can
+          scan the row at a glance. Active tab gets full chip styling
+          (bg + border + text color), inactive tabs only carry the dot
+          + neutral label so the active state remains the strong cue.
+          On narrow viewports (<sm) the row scrolls horizontally with
+          subtle gradient fade-edges (via .anet-tabstrip-wrap pseudo
+          elements) hinting more content. */}
+      <div className="anet-tabstrip-wrap mb-4">
+      <div className="anet-tabstrip flex sm:flex-wrap gap-1 bg-[#111128] rounded-lg border border-[#2a2a4a] p-1 overflow-x-auto sm:overflow-x-visible scrollbar-thin">
         {['', ...STATUS_OPTIONS.filter(Boolean)].map(s => (
           <button key={s} onClick={() => setFilterStatus(s)}
-            className={`px-3 py-1.5 rounded-md text-xs transition-colors ${
+            className={`px-3 py-1.5 rounded-md text-xs transition-colors flex items-center gap-1.5 shrink-0 whitespace-nowrap ${
               filterStatus === s
                 ? `${STATUS_COLORS[s] || 'bg-cyan-500/10 text-cyan-300 border-cyan-500/20'} border`
-                : 'text-gray-500 hover:text-gray-300'
+                : 'text-gray-500 hover:text-gray-300 hover:bg-[#1a1a2a]/40'
             }`}>
-            {s || 'All'}
+            {s && (
+              <span
+                aria-hidden
+                className="inline-block w-1.5 h-1.5 rounded-full shrink-0"
+                style={{ backgroundColor: STATUS_DOTS[s] || '#6b7280' }}
+              />
+            )}
+            <span>{s || 'All'}</span>
           </button>
         ))}
       </div>
+      </div>
 
       {/* From/To Filters */}
       <div className="flex flex-wrap gap-3 mb-6">