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

package/app/tasks/page.tsx

@@ -6,6 +6,7 @@ import Link from 'next/link';
 import { useNetworkId } from '../lib/network-context';
 import { TaskDrawer } from '../components/TaskDrawer';
 import { EmptyState } from '../components/EmptyState';
+import { AliasAvatar } from '../components/AliasAvatar';
 
 interface Task {
   task_id: string;
@@ -48,6 +49,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,36 +150,66 @@ 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">
-        <input
-          type="text"
-          value={filterFrom}
-          onChange={e => setFilterFrom(e.target.value)}
-          placeholder="From node..."
-          className="bg-[#111128] border border-[#2a2a4a] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-blue-500/50 focus:outline-none w-40"
-        />
-        <input
-          type="text"
-          value={filterTo}
-          onChange={e => setFilterTo(e.target.value)}
-          placeholder="To node..."
-          className="bg-[#111128] border border-[#2a2a4a] rounded-lg px-3 py-2 text-sm text-white placeholder-gray-600 focus:border-blue-500/50 focus:outline-none w-40"
-        />
+      {/* From/To Filters — same visual block as the status tabs above. */}
+      <div className="flex flex-wrap items-center gap-2 mb-6">
+        <div className="flex items-center gap-1.5 rounded-lg border border-[#2a2a4a] bg-[#111128] px-2.5 py-1.5 focus-within:border-blue-500/40">
+          <span className="text-[10px] uppercase tracking-wide text-gray-600">From</span>
+          <input
+            type="text"
+            value={filterFrom}
+            onChange={e => setFilterFrom(e.target.value)}
+            placeholder="any node"
+            className="w-28 bg-transparent text-sm text-white placeholder-gray-700 focus:outline-none"
+          />
+        </div>
+        <div className="flex items-center gap-1.5 rounded-lg border border-[#2a2a4a] bg-[#111128] px-2.5 py-1.5 focus-within:border-blue-500/40">
+          <span className="text-[10px] uppercase tracking-wide text-gray-600">To</span>
+          <input
+            type="text"
+            value={filterTo}
+            onChange={e => setFilterTo(e.target.value)}
+            placeholder="any node"
+            className="w-28 bg-transparent text-sm text-white placeholder-gray-700 focus:outline-none"
+          />
+        </div>
+        {(filterStatus || filterFrom || filterTo) && (
+          <button
+            type="button"
+            onClick={() => { setFilterStatus(''); setFilterFrom(''); setFilterTo(''); }}
+            className="rounded-lg border border-gray-700 px-2.5 py-1.5 text-[11px] text-gray-500 hover:text-gray-200 hover:border-gray-600"
+          >
+            Clear filters
+          </button>
+        )}
       </div>
 
       {/* Status distribution */}
@@ -220,22 +266,39 @@ function TasksContent() {
             <div className="col-span-2">Time</div>
           </div>
 
-          {tasks.map(t => (
+          {tasks.map(t => {
+            const isOpen = expanded.has(t.task_id);
+            return (
             <div
               key={t.task_id}
-              className="bg-[#111128] border border-[#2a2a4a] rounded-lg px-4 py-3 hover:border-[#3a3a5a] transition-colors cursor-pointer"
+              className={`anet-task-row group bg-[#111128] border rounded-lg px-4 py-3 transition-all duration-200 cursor-pointer ${
+                isOpen
+                  ? 'border-[#3a3a5a] shadow-lg shadow-black/20'
+                  : 'border-[#2a2a4a] hover:border-[#3a3a5a] hover:bg-[#15152e]'
+              }`}
               onClick={() => toggleExpand(t.task_id)}
+              role="button"
+              tabIndex={0}
+              aria-expanded={isOpen}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  toggleExpand(t.task_id);
+                }
+              }}
             >
               {/* Desktop row */}
               <div className="hidden sm:grid sm:grid-cols-12 gap-2 items-center">
                 <div className="col-span-1">
                   <span className={statusBadge(t.status)}>{t.status}</span>
                 </div>
-                <div className="col-span-2 text-sm text-blue-400 truncate" title={t.from_name}>
-                  {t.from_name || '--'}
+                <div className="col-span-2 flex items-center gap-1.5 min-w-0" title={t.from_name}>
+                  {t.from_name && <AliasAvatar alias={t.from_name} size={18} />}
+                  <span className="truncate text-sm text-gray-200">{t.from_name || '--'}</span>
                 </div>
-                <div className="col-span-2 text-sm text-cyan-400 truncate" title={t.to_name}>
-                  {t.to_name || '--'}
+                <div className="col-span-2 flex items-center gap-1.5 min-w-0" title={t.to_name}>
+                  {t.to_name && <AliasAvatar alias={t.to_name} size={18} />}
+                  <span className="truncate text-sm text-gray-200">{t.to_name || '--'}</span>
                 </div>
                 <div className="col-span-4 text-xs text-gray-400 truncate" title={t.content}>
                   {t.content || '--'}
@@ -243,8 +306,15 @@ function TasksContent() {
                 <div className="col-span-1">
                   <span className={`text-xs ${priorityBadge(t.priority)}`}>{t.priority || 'normal'}</span>
                 </div>
-                <div className="col-span-2 text-xs text-gray-500" title={t.created_at}>
-                  {timeAgo(t.created_at)}
+                <div className="col-span-2 text-xs text-gray-500 flex items-center justify-between gap-2" title={t.created_at}>
+                  <span className="truncate">{timeAgo(t.created_at)}</span>
+                  <svg
+                    aria-hidden
+                    className={`shrink-0 text-gray-600 group-hover:text-gray-400 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
+                    width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
+                  >
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M6 9l6 6 6-6" />
+                  </svg>
                 </div>
               </div>
 
@@ -252,20 +322,38 @@ function TasksContent() {
               <div className="sm:hidden space-y-2">
                 <div className="flex items-center justify-between">
                   <span className={statusBadge(t.status)}>{t.status}</span>
-                  <span className={`text-xs ${priorityBadge(t.priority)}`}>{t.priority || 'normal'}</span>
+                  <div className="flex items-center gap-2">
+                    <span className={`text-xs ${priorityBadge(t.priority)}`}>{t.priority || 'normal'}</span>
+                    <svg
+                      aria-hidden
+                      className={`text-gray-600 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
+                      width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
+                    >
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M6 9l6 6 6-6" />
+                    </svg>
+                  </div>
                 </div>
-                <div className="text-xs text-gray-500">
-                  <span className="text-blue-400">{t.from_name || '--'}</span>
-                  <span className="text-gray-600 mx-1">&rarr;</span>
-                  <span className="text-cyan-400">{t.to_name || '--'}</span>
+                <div className="flex items-center gap-1.5 text-xs text-gray-300 min-w-0">
+                  {t.from_name && <AliasAvatar alias={t.from_name} size={16} />}
+                  <span className="truncate max-w-[40%]">{t.from_name || '--'}</span>
+                  <span className="text-gray-600">&rarr;</span>
+                  {t.to_name && <AliasAvatar alias={t.to_name} size={16} />}
+                  <span className="truncate max-w-[40%]">{t.to_name || '--'}</span>
                 </div>
-                <div className="text-xs text-gray-400 truncate">{t.content || '--'}</div>
+                <div className="text-xs text-gray-400 line-clamp-1">{t.content || '--'}</div>
                 <div className="text-xs text-gray-600">{timeAgo(t.created_at)}</div>
               </div>
 
-              {/* Expanded detail */}
-              {expanded.has(t.task_id) && (
-                <div className="mt-3 pt-3 border-t border-[#2a2a4a] space-y-3">
+              {/* Expanded detail — always mounted; grid-rows 0fr↔1fr trick gives
+                  content-aware smooth max-height animation without measuring DOM. */}
+              <div
+                className={`grid transition-all duration-300 ease-out ${
+                  isOpen ? 'grid-rows-[1fr] opacity-100 mt-3' : 'grid-rows-[0fr] opacity-0'
+                }`}
+                aria-hidden={!isOpen}
+              >
+                <div className="overflow-hidden">
+                <div className="pt-3 border-t border-[#2a2a4a] space-y-3">
                   {t.content && (
                     <div>
                       <div className="text-xs text-gray-600 mb-1">Content</div>
@@ -327,9 +415,11 @@ function TasksContent() {
                     </div>
                   </div>
                 </div>
-              )}
+                </div>
+              </div>
             </div>
-          ))}
+            );
+          })}
         </div>
       )}
 

package/docs/loop-design-rounds.md

@@ -497,6 +497,301 @@ Natural ship-point. Round 8 = the publish itself:
 4. Tell 通信龙 to bump CLI preview's PINNED_DASHBOARD_VERSION
 5. Telegram Vincent: `npm i -g @sleep2agi/agent-network@preview`
 
-After ship, rounds 9+ accumulate toward `0.4.6-preview.0`. Backlog
-ideas: layout collision avoidance in TopoGraph, hover affordances on
-KPI cards, Cmd+K command palette, header health banner, mobile audit.
+After ship, rounds 9+ accumulate toward the **next** preview in the
+SAME `0.4.5-preview.N` series (Vincent's policy: don't burn base version
+numbers on preview-only work). Backlog ideas: layout collision
+avoidance in TopoGraph, hover affordances on KPI cards, Cmd+K command
+palette, header health banner, mobile audit.
+
+> **Version policy (round 8 + Vincent telegram)**: stable stays at
+> `0.4.2` until Vincent explicitly promotes a preview. All new previews
+> bump only the `-preview.N` suffix on the same `0.4.5` base. The
+> `latest` npm tag never moves without sign-off.
+
+---
+
+## Round 9 — Header health banner
+
+### What changed
+- New `app/components/HealthBanner.tsx`: thin sticky strip mounted in
+  `AppShell` between sidebar and page content, visible on every
+  non-login page.
+- Three states, priority-ranked:
+  - **red** — `CommHub unreachable — agents may be offline` + CTA
+    "Open Settings →"
+  - **amber** — `N task(s) failed recently` + CTA "Review failures →"
+    (links to `/tasks?status=failed`). Dot pulses with the same 1.6s
+    opacity drift as the sidebar online pulse.
+  - **green** — `All systems go`. Quiet. No CTA. Doesn't render until
+    at least one stats response confirms (avoids flashing green on
+    first paint before data arrives).
+- Pulls from `/api/hub/stats` + `/api/hub/health` via SWR (15s refresh,
+  5s dedupe). Both endpoints are already polled elsewhere — request
+  dedupes free, banner has zero net cost.
+- Dismissible per-session via `sessionStorage.anet-hb-dismissed = '1'`.
+  Re-shows on next session.
+- Light/mint themes get bumped color saturation via `.anet-health-banner`
+  override rules in globals.css so red/amber/green read crisply on
+  white surfaces.
+
+### Self-score: **8.7 / 10**
+
+| Dimension                | Score | Notes                                                                  |
+|--------------------------|------:|------------------------------------------------------------------------|
+| Information value        | 9     | Fleet health visible from every page without navigating to /nodes      |
+| Restraint                | 9     | 32px-tall strip; opacity-only pulse; no glow; auto-dismissible         |
+| Affordance (CTAs)        | 9     | Each non-green state has a clear "fix this" link                       |
+| Theme parity             | 9     | All 3 states verified in light + cyber                                 |
+| Failure-state robustness | 8     | "Red" fires only when both `/stats` AND `/health` fail; safer than either alone |
+| Mobile                   | 7     | Strip wraps at 390px viewport; could collapse "Review failures →" copy further |
+
+**Deductions**:
+- −0.6: on very narrow mobile (<340px) the CTA + dismiss can wrap or
+  overlap. Could collapse CTA to icon-only at that breakpoint.
+- −0.4: red state has a single message; doesn't distinguish "hub down"
+  vs "auth expired" vs "network error". Future round could add error
+  classification.
+- −0.3: dismiss is session-scoped. Some users may want
+  "dismiss for this session only" vs "dismiss forever". Defer.
+
+### Round 10 plan: **KPI card rich hover preview**
+
+Overview's stat strip (round 3) shows top-level numbers — `Nodes 4/5`,
+`Tasks 0`, `Failed 0` — but a power user wants to see the breakdown
+without clicking through. Add small CSS-only popovers that appear on
+hover:
+- Nodes hover → "3 working · 2 idle · 0 offline"
+- Tasks hover → "by status: 4 running, 2 replied, 1 failed, 0 expired"
+- Failed hover → "5 in last hour · last failure 12m ago"
+
+Pure CSS popover (no JS state), 200ms delay-show, fades out on
+unhover. Both themes. Doesn't affect mobile (touch shows full card
+already).
+
+Estimated work: 25 min. Fires next `*/5`.
+
+---
+
+## Round 10 — KPI card rich hover preview
+
+### What changed
+- The 3-stat strip on Overview (Nodes / Tasks / Failed) now gets a
+  **hover popover** showing the breakdown that the headline number
+  abstracts away.
+  - **Nodes** hover → `● working {n}` / `● idle {n}` / `● offline {n}`
+  - **Tasks** hover → list of all populated statuses in priority
+    order (running → replied → failed → cancelled → expired → closed
+    → created → delivered → acked), each with its color dot + count
+  - **Failed** hover → `no failures yet` or `{n} in current view`
+- **Pure CSS** popover: hidden by default, `opacity-0 translate-y-[-2px]`
+  transitions to `opacity-100 translate-y-0` on `group-hover`. 100ms
+  delay-show so a quick mouse-pass doesn't flicker. No React state.
+- `pointer-events-none` on the popover so it never intercepts the
+  click through to the underlying Link target.
+- **Mobile gate**: `hidden md:block` — touch devices don't get the
+  popover (no `:hover`). The card itself still navigates on tap, so no
+  functionality lost.
+- Dot colors inlined as hex (`#4ade80` green, `#a78bfa` purple, etc.)
+  to dodge Tailwind's purge of dynamic `bg-${family}-400` class names.
+
+### Self-score: **8.5 / 10**
+
+**Deductions**: no `:focus-within` trigger (keyboard users miss
+popover); "Failed" copy doesn't show time bucket; dot hex inlined
+rather than centralized in a constants palette.
+
+### Round 11 plan: **Mobile audit + polish pass**
+
+Nine rounds in, the desktop story is solid. Mobile hasn't gotten a
+dedicated round since the initial audit. Likely findings:
+
+- Health banner at <340px: CTA + dismiss button + truncated message
+  competes for ~280px usable width. Collapse CTA to icon-only or
+  move it below the message.
+- Stat strip 3-col at 360-390px: "View →" affordance shrinks below
+  legibility. Either drop "View →" on mobile or stack 1-col.
+- Sidebar mobile drawer: not screenshot-audited against the latest
+  brand-mark + pulse changes.
+- Footer text spacing on /login at 320px: wraps awkwardly.
+
+Action: capture mobile screenshots across 5-6 key pages at 390×844
+AND 360×740, identify worst offenders, fix the top 3.
+
+Estimated work: 30 min. Fires next `*/5`.
+
+---
+
+## Round 11 — Mobile audit + polish pass
+
+### Findings (390×844 + 360×740)
+Captured 12 screenshots (6 pages × 2 themes × 2 viewports). Three
+clear regressions at narrow widths:
+
+1. **Health banner** ran into the fixed-position hamburger button at
+   top-left (top:4 left:3, ~44×44 hit area). Message text was
+   truncated to "...sks failed recently" because the leading 6
+   characters sat under the hamburger.
+2. **UserBar** "Edit" + "Sign out" text links cramped against the
+   user name + role on narrow screens, wrapping "Sign out" onto
+   two lines.
+3. **Stat strip** "View →" affordance in each card's top-right took
+   horizontal space the headline number needed, making the 3-col
+   grid feel cramped at 360px.
+
+### What changed
+- **HealthBanner**: `pl-3` → `pl-14` on mobile (clears the hamburger
+  button), CTA text "Review failures" / "Open Settings" collapses to
+  a bare arrow on `<sm` with a proper `aria-label` so screen
+  readers still hear the destination.
+- **UserBar Edit / Sign out**: text on `>=sm`, single inline-svg icon
+  on `<sm` (pencil for edit, doorway-arrow for sign out). Both stay
+  same hit area, just label-trimmed.
+- **Stat strip "View →"**: `hidden sm:block` so the affordance only
+  appears on desktop. Mobile cards are fully tappable, so the
+  affordance is implicit.
+
+### Self-score: **9.0 / 10**
+
+| Dimension              | Score | Notes                                                            |
+|------------------------|------:|------------------------------------------------------------------|
+| Defect closure         | 10    | All three observed mobile regressions resolved                  |
+| Desktop non-regression | 9     | All changes wrapped in `sm:` breakpoint — pixel-identical >640px |
+| Restraint              | 9     | Icons are simple line SVGs matching the design system           |
+| Accessibility          | 9     | `aria-label` on collapsed CTAs and icon-only buttons             |
+| Touch target           | 8     | Icons are 16px visual; full `<button>` is still 44px hit area    |
+
+**Deductions**:
+- −0.5: not tested below 360px (e.g. 320px iPhone SE first-gen).
+  Probably still fine but unverified.
+- −0.3: sidebar drawer mobile state (when hamburger is tapped) not
+  re-screenshotted post round-4 brand changes.
+- −0.2: existing chip filter rows on Tasks/Messages still wrap at
+  narrow widths. Not the most painful, deferred.
+
+### Round 12 plan: **Loading skeleton refresh**
+
+The `LoadingSkeleton` component in `app/components/LoadingSkeleton.tsx`
+still uses `bg-gray-800` / `bg-gray-800/40` patterns from the
+pre-theme-token era. It works (CSS shim catches `bg-gray-800` in
+light), but it's the only surface that didn't get a deliberate
+restyle. Refresh to use:
+- subtle bg + animated pulse using the same `anet-brand-pulse`
+  rhythm (1.6s opacity drift) for visual cohesion
+- proper card structure matching round 3's stat-strip shape
+- both themes, no AI-noise
+
+Estimated work: 20 min. Fires next `*/5`.
+
+---
+
+## Round 14 — Cmd+K command palette (scaffold)
+
+### What changed
+- New `app/components/CommandPalette.tsx` mounted in `AppShell` so it's
+  globally available on every non-login page.
+- **Keyboard shortcuts** (global, not per-page):
+  - `⌘K` / `Ctrl+K` toggles open/closed
+  - `/` opens when no input is focused (Linear-style)
+  - `↑↓` navigates results, `Enter` activates, `Esc` closes
+- **Layout**: centered modal at 10vh-15vh from top, max-w-xl, backdrop
+  blur over content. Search input + grouped results + footer hint bar.
+- **Initial command set**: 10 navigation entries covering every
+  primary page (Overview / Tasks / Failed tasks / Nodes / Messages /
+  Networks / Audit Log / Server Logs / Admin / Settings). Each carries
+  a hint subtitle and a thin-stroke icon.
+- **Filter behavior**: case-insensitive search over title + hint + id.
+  Active row gets emerald tint + `↵` glyph; mouse hover updates the
+  selected index so keyboard and pointer stay in sync.
+- **Light/mint surface**: white modal with real soft shadow (vs the
+  default `bg-[#0d0d1a]` navy that CSS shim would translate). Override
+  ruled in globals.css.
+
+### Self-score: **8.7 / 10**
+
+| Dimension              | Score | Notes                                                                  |
+|------------------------|------:|------------------------------------------------------------------------|
+| Adoption signal        | 9     | Stripe/Linear/Vercel staple — sets reader expectation that we're modern |
+| Keyboard-first         | 9     | All keys wired; mouse + keyboard stay in sync                          |
+| Restraint              | 9     | Mono-stroke icons, single accent color, no AI shimmer                   |
+| Theme parity           | 9     | Light gets a proper white surface w/ shadow; cyber uses navy           |
+| Discoverability        | 7     | No visible "press ⌘K" hint anywhere on the page yet                    |
+| Mobile                 | 6     | Works on mobile (tap to open via UI) — but no on-screen launcher yet  |
+
+**Deductions**:
+- −0.7: zero on-page hint that the palette exists. Most users will
+  never find `⌘K` without docs. Should add a tiny "⌘K" badge in
+  sidebar footer or in the UserBar.
+- −0.4: no mobile launcher. Mobile has no obvious affordance.
+- −0.2: command set is navigation-only. Round 15 will add actions
+  (theme toggle / sign out / Dispatch open) and recent-commands.
+
+### Round 15 plan: **Cmd+K actions + recent-commands**
+
+Extend the scaffold with the "Actions" group:
+- Toggle theme (cyber ↔ light)
+- Open Dispatch dialog (current page's Dispatch button)
+- Sign out
+- Copy current URL
+
+Plus add a `Recents` group at the top that surfaces the last 3-5
+commands the user invoked (ring buffer in `sessionStorage`).
+
+Plus a discoverability nudge — tiny `⌘K` chip in sidebar footer +
+UserBar tooltip.
+
+Estimated work: 25 min. Fires next `*/5`.
+
+---
+
+## Round 12 — Loading skeleton refresh
+
+### What changed
+- `LoadingSkeleton` now **mirrors the actual Overview layout** so the
+  page doesn't shift on data arrival. Old version was generic header
+  + broadcast + topology + 4-card grid; new version shows: 4 KPI
+  cards, Dispatch+UserBar row, Config bar, 3-card stat strip, 3-tile
+  nav rail, Broadcast bar, 4-card agent grid.
+- Switched from Tailwind's `animate-pulse` (1s opacity drift) to a
+  custom `anet-skeleton-pulse` (1.6s) to match the same rhythm as
+  `anet-brand-pulse` in the sidebar and the health banner amber dot.
+  Visual cohesion across the design system.
+- Introduced `anet-skeleton-bar` class with explicit per-theme
+  background: `#1a1a2a` on dark (lighter navy on dark card),
+  `#d4d8df` on light/mint (mid-grey on white card). The previous
+  attempt to reuse the `bg-[#1a1a2a]` shim was too subtle (light
+  card #ffffff vs bar mapped to bg-elevated #eef0f4 = only ~7
+  brightness levels different = invisible bars).
+- All bar dimensions use rem-based explicit values via inline style
+  so they don't depend on Tailwind purge correctness.
+- `prefers-reduced-motion: reduce` kills the pulse on both classes.
+
+### Self-score: **9.0 / 10**
+
+| Dimension              | Score | Notes                                                            |
+|------------------------|------:|------------------------------------------------------------------|
+| No content shift       | 9     | Skeleton matches Overview structure cell-for-cell                |
+| Theme parity           | 10    | Both themes get visible bars (the original sin of round 11 plan) |
+| Restraint              | 9     | No shimmer-gradient, no animation noise, just 1.6s opacity drift |
+| Design-system cohesion | 9     | Same pulse rhythm as brand pulse + health banner amber           |
+| Accessibility          | 9     | prefers-reduced-motion respected on both classes                 |
+
+**Deductions**:
+- −0.5: skeleton shows the FULL Overview (8+ blocks). Most actual
+  page-loads complete in <300ms so user barely sees this. Slower
+  hubs may see the whole thing; some users might prefer a shorter
+  skeleton. Could trim agent grid to 2 cards if it feels long in
+  practice.
+- −0.5: the agent-card skeleton is generic (status dot + alias bar
+  + 3 detail bars). Real cards carry status chip + agent type +
+  server hostname + uptime — could mirror more specifically.
+
+### Round 13 plan: **Tasks status tabs — color coding**
+
+The Tasks page filter tab strip (`All / created / delivered / acked /
+running / replied / closed / failed / cancelled / expired`) is all
+neutral-styled — no visual scannability. Color-code each by its
+status family using the same tokens as the chips system used
+elsewhere (running=green, replied=purple, failed=red, etc.), so the
+user can spot "failed" without reading every label.
+
+Estimated work: 20 min. Fires next `*/5`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sleep2agi/agent-network-dashboard",
-  "version": "0.4.5-preview.0",
+  "version": "0.4.5-preview.10",
   "description": "Agent Network Dashboard — Web UI for managing AI Agent networks",
   "scripts": {
     "dev": "next dev",

package/.next/server/chunks/ssr/[root-of-the-server]__013i9e9._.js

@@ -1,9 +0,0 @@
-module.exports=[18622,(a,b,c)=>{b.exports=a.x("next/dist/compiled/next-server/app-page-turbo.runtime.prod.js",()=>require("next/dist/compiled/next-server/app-page-turbo.runtime.prod.js"))},56704,(a,b,c)=>{b.exports=a.x("next/dist/server/app-render/work-async-storage.external.js",()=>require("next/dist/server/app-render/work-async-storage.external.js"))},32319,(a,b,c)=>{b.exports=a.x("next/dist/server/app-render/work-unit-async-storage.external.js",()=>require("next/dist/server/app-render/work-unit-async-storage.external.js"))},24725,(a,b,c)=>{b.exports=a.x("next/dist/server/app-render/after-task-async-storage.external.js",()=>require("next/dist/server/app-render/after-task-async-storage.external.js"))},20635,(a,b,c)=>{b.exports=a.x("next/dist/server/app-render/action-async-storage.external.js",()=>require("next/dist/server/app-render/action-async-storage.external.js"))},43285,(a,b,c)=>{b.exports=a.x("next/dist/server/app-render/dynamic-access-async-storage.external.js",()=>require("next/dist/server/app-render/dynamic-access-async-storage.external.js"))},42602,(a,b,c)=>{"use strict";b.exports=a.r(18622)},87924,(a,b,c)=>{"use strict";b.exports=a.r(42602).vendored["react-ssr"].ReactJsxRuntime},72131,(a,b,c)=>{"use strict";b.exports=a.r(42602).vendored["react-ssr"].React},9270,(a,b,c)=>{"use strict";b.exports=a.r(42602).vendored.contexts.AppRouterContext},38783,(a,b,c)=>{"use strict";b.exports=a.r(42602).vendored["react-ssr"].ReactServerDOMTurbopackClient},36313,(a,b,c)=>{"use strict";b.exports=a.r(42602).vendored.contexts.HooksClientContext},18341,(a,b,c)=>{"use strict";b.exports=a.r(42602).vendored.contexts.ServerInsertedHtml},22397,a=>{"use strict";var b=a.i(87924),c=a.i(72131);let d=(0,c.createContext)({networkId:"",setNetworkId:()=>{}});a.s(["NetworkProvider",0,function({children:a}){let[e,f]=(0,c.useState)("");return(0,c.useEffect)(()=>{let a=sessionStorage.getItem("anet_network_id");a&&f(a)},[]),(0,b.jsx)(d.Provider,{value:{networkId:e,setNetworkId:a=>{f(a),sessionStorage.setItem("anet_network_id",a)}},children:a})},"useNetworkId",0,function(){return(0,c.useContext)(d)}])},76194,a=>{"use strict";var b=a.i(87924),c=a.i(72131);let d=[{id:"cyber",label:"Cyber",emoji:"🌃",desc:"默认深色"},{id:"light",label:"Light",emoji:"☀️",desc:"浅色简洁"},{id:"mint",label:"Mint",emoji:"🌿",desc:"薄荷绿"},{id:"sunset",label:"Sunset",emoji:"🌅",desc:"暖色橙紫"}],e="anet-theme";function f(a){"u">typeof document&&document.documentElement.setAttribute("data-theme",a)}a.s(["ThemeProvider",0,function({children:a}){return(0,c.useEffect)(()=>{f(localStorage.getItem(e)||"cyber")},[]),(0,b.jsx)(b.Fragment,{children:a})},"ThemeSwitcher",0,function({compact:a=!1}){let[g,h]=(0,c.useState)("cyber"),[i,j]=(0,c.useState)(!1);(0,c.useEffect)(()=>{let a=localStorage.getItem(e)||"cyber";h(a),f(a)},[]);let k=d.find(a=>a.id===g)||d[0];return(0,b.jsxs)("div",{className:"relative",children:[(0,b.jsxs)("button",{"aria-label":"切换主题",onClick:()=>j(!i),className:"px-2.5 py-1.5 rounded-md text-xs flex items-center gap-1.5 hover:opacity-80 transition-opacity",style:{background:"var(--bg-elevated)",color:"var(--fg)",border:"1px solid var(--border)"},children:[(0,b.jsx)("span",{"aria-hidden":!0,children:k.emoji}),!a&&(0,b.jsx)("span",{children:k.label})]}),i&&(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)("div",{className:"fixed inset-0 z-40",onClick:()=>j(!1)}),(0,b.jsx)("div",{className:"absolute right-0 top-full mt-1 z-50 rounded-md min-w-[160px] py-1 shadow-lg",style:{background:"var(--bg-secondary)",border:"1px solid var(--border)"},children:d.map(a=>(0,b.jsxs)("button",{onClick:()=>{var b;h(b=a.id),localStorage.setItem(e,b),f(b),j(!1)},className:"w-full px-3 py-2 text-left text-xs flex items-center gap-2 hover:opacity-80",style:{background:a.id===g?"var(--bg-elevated)":"transparent",color:"var(--fg)"},children:[(0,b.jsx)("span",{"aria-hidden":!0,children:a.emoji}),(0,b.jsx)("span",{className:"flex-1",children:a.label}),(0,b.jsx)("span",{style:{color:"var(--fg-dim)"},className:"text-[10px]",children:a.desc}),a.id===g&&(0,b.jsx)("span",{style:{color:"var(--accent)"},children:"•"})]},a.id))})]})]})}])},42588,a=>{"use strict";var b=a.i(87924),c=a.i(50944),d=a.i(38246),e=a.i(72131),f=a.i(72596),g=a.i(22397),h=a.i(76194);let i=a=>fetch(a).then(a=>a.ok?a.json():{networks:[]}),j=[{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:"/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"}],k={owner:"⭐",admin:"🔧",member:"👤",viewer:"👁"};function l(){let a=(0,c.usePathname)(),[l,m]=(0,e.useState)(!1),[o,p]=(0,e.useState)(!1),{networkId:q,setNetworkId:r}=(0,g.useNetworkId)(),{data:s}=(0,f.default)("/api/hub/networks",i,{refreshInterval:15e3,dedupingInterval:1e4}),t=s?.networks||[],u=(0,b.jsx)("nav",{className:"flex flex-col gap-1 px-2 py-4",children:j.map(c=>{var e;return(0,b.jsxs)(d.default,{href:c.href,prefetch:!1,onClick:()=>p(!1),className:`relative flex items-center gap-3 px-3 py-3 rounded-lg text-sm transition-colors active:bg-[#1a1a3a] ${("/"===(e=c.href)?"/"===a:"/settings"===e?"/settings"===a:a.startsWith(e))?"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]"} ${l?"justify-center":""}`,children:[(0,b.jsx)("svg",{className:"w-5 h-5 shrink-0",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:1.5,children:(0,b.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:c.icon})}),!l&&(0,b.jsx)("span",{children:c.label})]},c.href)})});return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)("button",{onClick:()=>p(!o),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]","aria-label":"Toggle menu",children:(0,b.jsx)("svg",{className:"w-5 h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,children:o?(0,b.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 18L18 6M6 6l12 12"}):(0,b.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M4 6h16M4 12h16M4 18h16"})})}),o&&(0,b.jsx)("div",{className:"fixed inset-0 bg-black/50 z-30 lg:hidden",onClick:()=>p(!1)}),(0,b.jsxs)("aside",{"data-anet-sidebar":"true",className:`
-        fixed top-0 left-0 h-full z-40 bg-[#0d0d1a] border-r border-[#2a2a4a]
-        transition-all duration-200
-        ${l?"w-16":"w-52"}
-        ${o?"translate-x-0":"-translate-x-full"}
-        lg:translate-x-0 lg:static lg:shrink-0
-      `,children:[(0,b.jsx)(n,{collapsed:l}),(0,b.jsx)("div",{className:"border-b border-[#2a2a4a]"}),!l&&t.length>0&&(0,b.jsxs)("div",{className:"px-2 py-3 border-b border-[#2a2a4a]",children:[(0,b.jsx)("div",{className:"px-3 text-[10px] text-gray-600 uppercase mb-2",children:"Networks"}),(0,b.jsx)("div",{className:"space-y-0.5 max-h-32 overflow-y-auto",children:t.map(a=>(0,b.jsxs)("button",{onClick:()=>{r(a.network_id),p(!1)},className:`w-full flex items-center gap-2 px-3 py-1.5 rounded-md text-xs transition-colors text-left ${q===a.network_id?"bg-cyan-500/10 text-cyan-300":"text-gray-500 hover:text-gray-300 hover:bg-[#1a1a2a]"}`,children:[(0,b.jsx)("span",{children:k[a.role||"member"]||"👤"}),(0,b.jsx)("span",{className:"truncate",children:a.network_name})]},a.network_id))})]}),(0,b.jsx)("div",{className:"pb-20",children:u}),(0,b.jsxs)("div",{className:"absolute bottom-0 left-0 right-0 border-t border-[#2a2a4a] bg-[#0d0d1a]",children:[!l&&(0,b.jsxs)("button",{onClick:async()=>{await fetch("/api/auth/logout",{method:"POST"}).catch(()=>{}),sessionStorage.removeItem("anet_v3_auth"),window.location.assign("/login")},className:"w-full flex items-center gap-3 px-5 py-3 text-xs text-gray-500 hover:text-red-400 hover:bg-red-500/5 transition-colors",children:[(0,b.jsx)("svg",{className:"w-4 h-4",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:1.5,children:(0,b.jsx)("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"})}),"Sign out"]}),(0,b.jsxs)("div",{className:`flex items-center gap-2 px-3 py-2 ${l?"justify-center":"justify-between"}`,children:[(0,b.jsx)(h.ThemeSwitcher,{compact:l}),(0,b.jsx)("button",{onClick:()=>m(!l),className:"hidden lg:flex p-1.5 rounded text-gray-600 hover:text-gray-400 transition-colors","aria-label":l?"Expand sidebar":"Collapse sidebar",children:(0,b.jsx)("svg",{className:`w-4 h-4 transition-transform ${l?"rotate-180":""}`,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,children:(0,b.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15 19l-7-7 7-7"})})})]})]})]})]})}let m=a=>fetch(a).then(a=>a.ok?a.json():{sessions:[]});function n({collapsed:a}){let{data:c}=(0,f.default)("/api/hub/status",m,{refreshInterval:1e4,dedupingInterval:4e3}),e=c?.sessions||[],g=e.filter(a=>a.status&&"offline"!==a.status).length,h=e.length;return a?(0,b.jsx)(d.default,{href:"/",className:"block px-3 py-4 flex justify-center hover:opacity-80 transition-opacity","aria-label":"Agent Network — home",children:(0,b.jsx)(o,{size:32})}):(0,b.jsxs)(d.default,{href:"/",className:"block px-4 py-4 flex items-center gap-3 hover:bg-[#11112a]/40 transition-colors rounded-r-xl","aria-label":"Agent Network — home",children:[(0,b.jsx)(o,{size:32}),(0,b.jsxs)("div",{className:"min-w-0",children:[(0,b.jsx)("div",{className:"text-white text-[13px] font-semibold leading-tight",children:"Agent Network"}),(0,b.jsxs)("div",{className:"text-[10px] text-gray-500 flex items-center gap-1.5 mt-0.5",children:[(0,b.jsx)("span",{className:`inline-block w-1.5 h-1.5 rounded-full ${g>0?"bg-emerald-400 anet-brand-pulse":"bg-gray-600"}`,"aria-hidden":!0}),0===h?(0,b.jsx)("span",{children:"waiting for agents"}):(0,b.jsxs)("span",{children:[(0,b.jsx)("span",{className:"text-gray-300 font-medium tabular-nums",children:g}),(0,b.jsxs)("span",{className:"text-gray-600",children:["/",h]})," online"]})]})]})]})}function o({size:a}){return(0,b.jsxs)("svg",{width:a,height:a,viewBox:"0 0 32 32","aria-hidden":!0,className:"shrink-0",children:[(0,b.jsx)("circle",{cx:"16",cy:"16",r:"10",fill:"none",stroke:"currentColor",strokeWidth:"1.5",opacity:"0.2",className:"text-cyan-400"}),(0,b.jsx)("line",{x1:"16",y1:"10",x2:"10",y2:"20",stroke:"currentColor",strokeWidth:"1",opacity:"0.45",className:"text-cyan-400"}),(0,b.jsx)("line",{x1:"16",y1:"10",x2:"22",y2:"20",stroke:"currentColor",strokeWidth:"1",opacity:"0.45",className:"text-cyan-400"}),(0,b.jsx)("line",{x1:"10",y1:"20",x2:"22",y2:"20",stroke:"currentColor",strokeWidth:"1",opacity:"0.45",className:"text-cyan-400"}),(0,b.jsx)("circle",{cx:"16",cy:"10",r:"2.5",fill:"currentColor",className:"text-cyan-400"}),(0,b.jsx)("circle",{cx:"10",cy:"20",r:"2.5",fill:"currentColor",className:"text-green-400"}),(0,b.jsx)("circle",{cx:"22",cy:"20",r:"2.5",fill:"currentColor",className:"text-violet-400"})]})}let p=["/login"];a.s(["AppShell",0,function({children:a}){let d=(0,c.usePathname)();return p.includes(d)?(0,b.jsx)(b.Fragment,{children:a}):(0,b.jsxs)("div",{className:"flex min-h-screen",children:[(0,b.jsx)(l,{}),(0,b.jsx)("main",{className:"flex-1 min-w-0",children:a})]})}],42588)}];
-
-//# sourceMappingURL=%5Broot-of-the-server%5D__013i9e9._.js.map