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

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/TaskChatPanel.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { timeAgo } from './utils';
+import { AliasAvatar } from './AliasAvatar';
 
 interface ChatTask {
   task_id: string;
@@ -386,7 +387,10 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
               {m.result && (
                 <div className="flex justify-start">
                   <div className="max-w-[85%] bg-green-500/8 border border-green-500/15 rounded-2xl rounded-bl-md px-4 py-2.5 shadow-sm">
-                    <div className="text-[10px] text-green-400 font-medium mb-1.5">{m.to_name}</div>
+                    <div className="flex items-center gap-1.5 mb-1.5">
+                      {m.to_name && <AliasAvatar alias={m.to_name} size={14} />}
+                      <span className="text-[10px] text-gray-200 font-medium">{m.to_name}</span>
+                    </div>
                     <div className="text-[13px] text-gray-200">
                       <MarkdownContent text={m.result} />
                     </div>
@@ -422,7 +426,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
                   {filteredMentions.map(node => (
                     <button key={node} onClick={() => insertMention(node)}
                       className="w-full flex items-center gap-2 px-3 py-2 text-xs text-left hover:bg-cyan-500/10 transition-colors">
-                      <span className="w-2 h-2 rounded-full bg-cyan-400 shrink-0" />
+                      <AliasAvatar alias={node} size={16} />
                       <span className="text-gray-300">{node}</span>
                     </button>
                   ))}
@@ -476,9 +480,7 @@ export function TaskChatPanel({ alias, onClose, inline, availableNodes }: TaskCh
         {/* Header */}
         <div className="flex items-center justify-between px-4 py-3 border-b border-[#2a2a4a] bg-[#0d0d1a]">
           <div className="flex items-center gap-3">
-            <div className="w-8 h-8 rounded-full bg-gradient-to-br from-cyan-500/30 to-blue-500/30 flex items-center justify-center text-xs font-bold text-cyan-300">
-              {alias.slice(0, 2)}
-            </div>
+            <AliasAvatar alias={alias} size={32} />
             <div>
               <div className="text-sm font-semibold text-white">{alias}</div>
               <div className="text-[10px] text-gray-500">{pollingIds.size > 0 ? 'Processing...' : 'Ready'}</div>

package/app/components/TopoGraph.tsx

@@ -33,10 +33,14 @@ const cy = 330;
 const onlineRadius = 220;
 const offlineRadius = 315;
 
-function polarPoint(index: number, total: number, radius: number) {
+/** Polar coordinate for a node on a ring. `rotateBy` lets the caller offset
+ *  the whole ring so two stacked rings don't align radially (round 25: the
+ *  offline ring gets a half-step rotation so its nodes sit in the gaps
+ *  between online ones). */
+function polarPoint(index: number, total: number, radius: number, rotateBy = 0) {
   const spread = total <= 2 ? Math.PI : Math.PI * 1.78;
   const start = -Math.PI / 2 - spread / 2;
-  const angle = total <= 1 ? -Math.PI / 2 : start + (spread * index) / (total - 1);
+  const angle = total <= 1 ? -Math.PI / 2 : start + (spread * index) / (total - 1) + rotateBy;
   return {
     x: cx + radius * Math.cos(angle),
     y: cy + radius * Math.sin(angle),
@@ -248,8 +252,17 @@ export function TopoGraph({ sessions, sseSessions }: TopoGraphProps) {
       positions[s.alias] = polarPoint(index, Math.max(online.length, 1), onlineRadius);
     });
 
+    // Offset the offline ring radially by half the online step so offline
+    // bubbles sit in the angular gaps between online bubbles instead of
+    // stacking directly behind them. Also push the outer ring further when
+    // there are many offline nodes so labels don't crowd the legend.
+    const spread = online.length <= 2 ? Math.PI : Math.PI * 1.78;
+    const onlineStep = online.length > 1 ? spread / (online.length - 1) : 0;
+    const offlineRotation = online.length > 0 ? onlineStep / 2 : 0;
+    const offlineR = offlineRadius + Math.max(0, offline.length - 4) * 6;
+
     offline.forEach((s, index) => {
-      positions[s.alias] = polarPoint(index, Math.max(offline.length, 1), offlineRadius);
+      positions[s.alias] = polarPoint(index, Math.max(offline.length, 1), offlineR, offlineRotation);
     });
 
     const links = buildFlowLinks(messages, positions);

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,
@@ -517,6 +577,30 @@ body {
   box-shadow: 0 6px 18px -10px rgba(15, 23, 42, 0.12);
 }
 
+/* Task row hover bg (round 19) — dark hex would land on a white card and
+   look like a stripe. Re-map to a faint accent tint per theme. */
+[data-theme="light"] .anet-task-row:hover {
+  background-color: #f5f7fb !important;
+}
+[data-theme="mint"] .anet-task-row:hover {
+  background-color: #ecf6f1 !important;
+}
+[data-theme="sunset"] .anet-task-row:hover {
+  background-color: #fff4ec !important;
+}
+/* Open state — slightly stronger fill so users can see "this one is the
+   open row" while scrolling. */
+[data-theme="light"] .anet-task-row[aria-expanded="true"] {
+  background-color: #fafbfd !important;
+  box-shadow: 0 4px 14px -10px rgba(15, 23, 42, 0.14) !important;
+}
+[data-theme="mint"] .anet-task-row[aria-expanded="true"] {
+  background-color: #f3faf6 !important;
+}
+[data-theme="sunset"] .anet-task-row[aria-expanded="true"] {
+  background-color: #fff8f1 !important;
+}
+
 /* ─────────────────────────────────────────────────────────────────────
    Login surface (round 1 polish)
    Restrained, minimal — first impression for new Agent Network users.
@@ -539,6 +623,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 +659,143 @@ 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;
+}
+
+/* Round 20 — matched-char highlight inside cmdk titles/hints. Inherits
+   line color (`color`) instead of forcing one — keeps text readable on
+   both inactive (gray) and active (cyan-300) rows. <mark> default is a
+   garish yellow block, which we override. */
+.anet-cmdk-mark {
+  background: transparent;
+  color: inherit;
+  font-weight: 600;
+  /* Subtle underline so the mark stays visible even on the active row
+     where the background tint matches the accent color. */
+  text-decoration: underline;
+  text-decoration-color: currentColor;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+  text-decoration-skip-ink: none;
+}
+/* Cyber: accent the matched glyph color so it pops on the dark bg. */
+[data-theme="cyber"] .anet-cmdk-mark,
+:root:not([data-theme]) .anet-cmdk-mark {
+  color: #22d3ee;
+}
+/* Light/mint: use the brand teal — undertone matches the active row. */
+[data-theme="light"] .anet-cmdk-mark,
+[data-theme="mint"]  .anet-cmdk-mark {
+  color: #0d9488;
+}
+[data-theme="sunset"] .anet-cmdk-mark {
+  color: #ea580c;
+}
+/* On the active (cyan-tinted) row, the title is already cyan-300 — use
+   white-with-underline so the highlight reads as emphasis, not redundancy. */
+.anet-cmdk-row.bg-cyan-500\/10 .anet-cmdk-mark {
+  color: #f0fdff;
+}
+[data-theme="light"] .anet-cmdk-row.bg-cyan-500\/10 .anet-cmdk-mark,
+[data-theme="mint"]  .anet-cmdk-row.bg-cyan-500\/10 .anet-cmdk-mark {
+  color: #064e3b;
+}
+
+/* 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. */