@sleep2agi/agent-network-dashboard 0.4.6 → 0.5.0

package/app/globals.css

@@ -828,6 +828,41 @@ body {
 }
 .anet-fade-in { animation: anet-fade-in 0.15s ease-out; }
 
+/* Round 184 — chrome reset button click-spin. The reset button's
+   onClick triggers R168 smoothView crossfade on the canvas, but the
+   BUTTON itself had no visual feedback that the click registered. A
+   single 360° rotation on the refresh-arrow icon (450ms ease-out) is
+   a quick "yes, I heard you" confirmation. Counter-clockwise (-360°)
+   reads as "rewind" / "undo" — natural for a reset gesture. Mirror
+   to R52's hub click ripple at the chrome scope. */
+@keyframes anet-reset-spin {
+  from { transform: rotate(0deg);     }
+  to   { transform: rotate(-360deg); }
+}
+.anet-reset-spin {
+  animation: anet-reset-spin 0.45s cubic-bezier(0.4, 0, 0.2, 1);
+  transform-origin: center;
+  transform-box: fill-box;
+}
+
+/* Round 186 — chrome zoom-in / zoom-out buttons get a brief icon pop
+   on click. Same click-feel idiom R184 added for the reset button —
+   the canvas already smoothes via R168/R169 smoothView, but the
+   chrome BUTTON itself needs its own confirmation. A quick scale
+   up-then-back (1 → 1.18 → 1 over 220ms) reads as "tapped". Same
+   transform-box: fill-box anchoring as R184 keeps the icon
+   centered in place. */
+@keyframes anet-chrome-pop {
+  0%   { transform: scale(1);    }
+  50%  { transform: scale(1.18); }
+  100% { transform: scale(1);    }
+}
+.anet-chrome-pop {
+  animation: anet-chrome-pop 0.22s ease-out;
+  transform-origin: center;
+  transform-box: fill-box;
+}
+
 /* Round 36 — current-step ring pulse on TaskDrawer timeline. Halo gently
    breathes around the active step's dot so users can spot "task is here". */
 @keyframes anet-current-step-pulse-kf {
@@ -840,24 +875,93 @@ body {
 
 /* Round 45 — TopoGraph rotating radar sweep wedge. 6s slow rotation
    gives the topology canvas a real "radar scan" feel without distracting
-   from the agent nodes. */
+   from the agent nodes.
+   R146: split shorthand into longhand so per-render inline style can
+   override animation-duration via --sweep-dur, joining the R145
+   --spoke-dur / R132 --march-dur pattern. Default 6s preserves R45's
+   original cadence for any caller that forgets the var. */
 @keyframes anet-topo-sweep-kf {
   0%   { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
 .anet-topo-sweep {
-  animation: anet-topo-sweep-kf 6s linear infinite;
+  animation-name: anet-topo-sweep-kf;
+  animation-duration: var(--sweep-dur, 6s);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+/* R155 — focus-visible outline for TopoGraph chip-row interactives.
+   Cyber theme's dark canvas often swallows the browser default focus
+   ring; R154 fixed it for chrome buttons via Tailwind's focus-visible:
+   ring (box-shadow). Chip-row chips reuse `box-shadow` for the R88 /
+   R139 / R140 pin-mirror inset — so a focus box-shadow would conflict
+   with the pinned-state shadow. `outline` is a separate CSS property
+   and doesn't fight box-shadow, so we use it here. `currentColor`
+   inherits the chip's own accent (green for working, cyan for online,
+   per-vendor for letters, etc.). Only fires on :focus-visible
+   (keyboard) — mouse focus stays unstyled. */
+.anet-topo-chip-focus:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 1px;
+}
+
+/* R156 — focus-visible outline for SVG-side TopoGraph interactives.
+   Same idiom as R155's chip-row class but for SVG <g> elements
+   (recent-signal rows, legend rows, group labels, edge badges,
+   node bodies, "+N more" footer). Each <g> already has role=
+   "button"/"link" + tabIndex=0 + onKeyDown (R116/R121/R133/R143/
+   R144/R151/R152). Browser default focus outline on SVG is hard
+   to spot against the canvas; explicit cyan-300 ring matches the
+   dashboard's legendAccent. 2-px outline-offset gives breathing
+   room around the painted bounding box. */
+.anet-topo-svg-focus:focus-visible {
+  outline: 2px solid #67e8f9;
+  outline-offset: 2px;
 }
 
 /* Round 46 — animated dashed spokes flowing from hub outward. Each spoke
    gets a small animationDelay (set inline) so the dashes don't all flow
-   in sync — reads as "command relay" pulse rather than a metronome. */
+   in sync — reads as "command relay" pulse rather than a metronome.
+   R145: split shorthand into longhand so per-render inline style can
+   override animation-duration via the --spoke-dur custom property —
+   same idiom R132 uses for --march-dur on group boxes. Default 2.4s
+   when --spoke-dur isn't set, so any future caller that forgets the
+   var keeps R46's original cadence. */
 @keyframes anet-topo-spoke-flow-kf {
   from { stroke-dashoffset: 0;   }
   to   { stroke-dashoffset: -40; }
 }
 .anet-topo-spoke-flow {
-  animation: anet-topo-spoke-flow-kf 2.4s linear infinite;
+  animation-name: anet-topo-spoke-flow-kf;
+  animation-duration: var(--spoke-dur, 2.4s);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+/* Round 85 — group-box "marching ants" perimeter drift.
+   Applied to a grid-layout group box whose `statuses.working > 0`
+   AND that is neither hovered nor pinned (those treatments already
+   carry their own visual emphasis via solid stroke). Slow 12s
+   linear cycle reads as ambient motion, not animation — the eye
+   parses "this group has live work" without registering the box
+   as moving. R86 stride matches the box's `strokeDasharray="6 6"`
+   so a single full cycle returns to a frame-identical state.
+   prefers-reduced-motion handled by the blanket override below.
+   R132: split shorthand into longhand so per-group inline style can
+   override animation-duration via the --march-dur custom property
+   without re-declaring keyframe + timing + iteration count. Default
+   stays at 12s when --march-dur isn't set, so existing single-group
+   call sites keep their cadence. */
+@keyframes anet-topo-groupbox-march-kf {
+  from { stroke-dashoffset: 0;   }
+  to   { stroke-dashoffset: -12; }
+}
+.anet-topo-groupbox-live {
+  animation-name: anet-topo-groupbox-march-kf;
+  animation-duration: var(--march-dur, 12s);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
 }
 
 /* ─────────────────────────────────────────────────────────────────────
@@ -894,7 +998,8 @@ body {
   .anet-fade-in,
   .anet-current-step-pulse,
   .anet-topo-sweep,
-  .anet-topo-spoke-flow {
+  .anet-topo-spoke-flow,
+  .anet-topo-groupbox-live {
     animation: none !important;
   }
   /* Tasks row grid 0fr↔1fr keep working (it's the toggle mechanism),

package/app/lib/vendorIdentity.ts

@@ -54,7 +54,10 @@ const VENDOR_RULES: Array<{ test: (m: string) => boolean; vendor: VendorIdentity
       label: 'MiniMax',
       mono: { bg: 'hsl(18 50% 26%)', ring: 'hsl(18 65% 52%)', text: 'hsl(20 80% 82%)' },
       initial: 'M',
-      logo: null, // → public/vendors/minimax.* when assets land
+      // P0 (Vincent 5222) custom-designed vendor badge — NOT a copy of
+      // the MiniMax trademark; geometric min/max zigzag in their warm-
+      // red palette. Replaces plain-letter "M" fallback.
+      logo: '/vendors/minimax.svg',
     },
   },
   {
@@ -64,7 +67,11 @@ const VENDOR_RULES: Array<{ test: (m: string) => boolean; vendor: VendorIdentity
       label: 'Anthropic',
       mono: { bg: 'hsl(16 32% 26%)', ring: 'hsl(16 48% 54%)', text: 'hsl(18 60% 84%)' },
       initial: 'A',
-      logo: null,
+      // P0 (Vincent 5222) custom-designed vendor badge — NOT a copy of
+      // the Anthropic trademark; 4-pointed sparkle in their warm-orange
+      // palette evokes AI/Claude without imitating the official mark.
+      // Real Anthropic logo still pending Vincent-direct asset OK.
+      logo: '/vendors/claude.svg',
     },
   },
   {
@@ -74,7 +81,11 @@ const VENDOR_RULES: Array<{ test: (m: string) => boolean; vendor: VendorIdentity
       label: 'OpenAI',
       mono: { bg: 'hsl(165 26% 22%)', ring: 'hsl(165 40% 44%)', text: 'hsl(165 45% 80%)' },
       initial: 'O',
-      logo: null,
+      // P0 (Vincent 5222) custom-designed vendor badge — NOT a copy of
+      // the OpenAI trademark; hexagonal frame + center dot in their
+      // teal palette evokes geometric AI lattice without imitating the
+      // knot. Real OpenAI logo still pending Vincent-direct asset OK.
+      logo: '/vendors/openai.svg',
     },
   },
 ];

package/docs/rfc/v0.10.0-hero3-dashboard-upgrade.md

@@ -0,0 +1,230 @@
+# RFC: v0.10.0 Hero 3 — Dashboard 网络节点前端展示升级
+
+**Status**: DRAFT — review pending
+**Author**: N站马 (`@sleep2agi/agent-network-dashboard` maintainer)
+**Filed against**: [#140](https://github.com/sleep2agi/agent-network/issues/140) (v0.10.0 tracking)
+**Related**: [#119](https://github.com/sleep2agi/agent-network/issues/119) (ServersDrawer), [#99](https://github.com/sleep2agi/agent-network/issues/99) (守护节点), [#114](https://github.com/sleep2agi/agent-network/issues/114) (Token stats), [#87](https://github.com/sleep2agi/agent-network/issues/87) (grid layout), [#81](https://github.com/sleep2agi/agent-network/issues/81) (fullscreen+zoom)
+**Output target**: `@sleep2agi/agent-network-dashboard@0.4.7+`
+**Generated**: 2026-05-16
+
+---
+
+## 0. Scope-status caveat (READ FIRST)
+
+This RFC drafts the **Hero 3 (TopoGraph 升级)** scope. As of writing, [#140](https://github.com/sleep2agi/agent-network/issues/140) issue body **explicitly defers** "F Dashboard 0.5.x major" to **v0.11.0** in its `🚫 Defer 到 v0.11.0` section.
+
+The RFC is written under the **counterfactual assumption** that Vincent decides to pull Hero 3 forward into v0.10.0. If Vincent keeps the defer, all RFC content moves to v0.11.0 planning. **Vincent's call.**
+
+The author has not started implementation. No `preview.X+1` code ship has occurred for any Hero 3 item. Two related items (sweep arc retire + recent-signal hide-when-empty) were attempted earlier in the day under the Vincent 5222 Twitter-polish P0 and reverted by concurrent codex edits — those are documented in §3.B below and proposed for re-attempt only after Vincent ✅ on the v0.10.0 scope and codex coordination on the SVG edit region.
+
+---
+
+## 1. Goal & success criteria
+
+The single sentence: **A first-time Twitter visitor sees the 16:9 screenshot and groks "多 agent 实时通信可视化 by sleep2agi"** — without "wow 太多花" reaction.
+
+Success criteria (each measurable):
+
+1. **First-glance brand recognition** — `sleep2agi` mark visible without scrolling, top-half of card.
+2. **Multi-vendor multi-agent legibility** — every node's vendor identity is distinguishable at thumbnail size; no two vendors look identical at the 16:9 crop.
+3. **Visual quietness when idle** — empty/no-flow state has ≤ 1 SMIL animation visible; no animated chrome competing for attention.
+4. **Information density legible** — chip-row, panels, and overlays don't crowd the canvas; the eye lands on nodes + edges first.
+5. **Server-health integration** — hovering a node surfaces its host server's health badge (Hero 1+2 integration).
+6. **Zero regression** on the 6 existing interaction contracts (per `feedback_5291_amendment` regression list).
+
+---
+
+## 2. Current baseline (what shipped, what's held)
+
+### Already shipped this cycle (live in npm preview)
+
+| Round / commit | Surface | What |
+|---|---|---|
+| R301 `bbde2b7` | Vendor avatars | claude.svg + openai.svg + minimax.svg custom-designed badges (NOT trademark copies); rendered via `<image href={vendor.logo}>` per existing vendorIdentity.ts logo path |
+| R310 `b6da676` | Title block | Inline 36×36 crescent moon SVG left of the kicker+h2 pair (HTML side, theme-aware cyan/emerald color, racing-safe placement) |
+| R275-R281 | Canvas 减法 | freshness-conditional, orbit retired, halo retired, ping retired, dispatch-pulse retired, spokes retired, vendor-chip threshold tightened |
+| R282 `e1d324b` | Brand watermark | "sleep2agi" text at bottom-left (16, 672) |
+| R283-R289 | Typography | monogram stroke 1→1.5, monogram font monospace→sans-serif, kicker tracking-widest, h2 tracking-tight, watermark letterSpacing 0.5 |
+| R290-R291 | Canvas 减法 | Inner radar ring r=90 retired; starfield 28→14 dots |
+| R294-R296 (codex) | Canvas + chrome | Per-node pulse-dot retired; legend swatch r 5.5→6; kicker color gray-600→500 |
+
+### Held by codex-race / pending Vincent ✅ on this RFC
+
+| Item | Why held | Risk |
+|---|---|---|
+| sweep arc retire (rotating wedge) | Codex parallel SVG edits revert each attempt | Low — `false &&` gate idiom proven safe in R278/R279/R280; just needs no-race window |
+| recent-signal panel hide-when-empty | Same codex race | Low — single `flowLinks.length > 0 &&` JSX guard |
+| Canvas (16,16) watermark variant | recent-signal panel occupies that corner; current title-block placement is racing-safer alternative | Already mitigated by §2 title-block shipped |
+
+---
+
+## 3. Proposed changes — per surface
+
+Each surface listed with: **A** = additive, **S** = subtractive, **U** = unification. Concrete edit, test impact, race risk.
+
+### 3.A — Hub center polish (A)
+
+- Embed a faint crescent silhouette **behind** the working-count digit at the hub center (r=12 mask, opacity 0.18). Reads as "sleep2agi heartbeat" without competing with the digit (R213 hub center).
+- Theme-aware via currentColor on the embedding `<g>`.
+- Risk: minimal — same `<defs>` + mask construction already used in title-block.
+
+### 3.B — Sweep arc retire (S)
+
+- Gate the existing radar sweep wedge with `{false && (() => {...})}` — same idiom as R278/R279/R280.
+- Reason: rotating decoration competes with the working-halo pulse + edge flow animation. On a 16:9 Twitter screenshot it reads "wow lots of motion" not "agents communicating".
+- Race-mitigation: ship this in a single small commit, paired with §3.C, immediately after Vincent ✅ on RFC; require codex to hold polish during that window (5min).
+
+### 3.C — Recent-signal panel hide-when-empty (S)
+
+- Wrap the `<g data-topo-panel="recent">` block in `{flowLinks.length > 0 && (...)}`.
+- First flow arrival triggers existing R175 fade-in. Empty corner stays clean for the Twitter-grok first impression.
+- Race-mitigation: same window as §3.B.
+
+### 3.D — Grid layout default for ≥ 20 nodes (S of ring-default)
+
+- Per [#87](https://github.com/sleep2agi/agent-network/issues/87) shipping ring/grid toggle, now switch the default **when** `sessions.length >= 20`. Below 20 nodes, ring stays prettier; above, grid scales cleaner.
+- Persist user override in `anet-topo-layout` localStorage (existing).
+- Risk: low — toggle UI unchanged; only the bootstrap default expression changes.
+
+### 3.E — Node detail card on hover (A)
+
+- Hover a node ≥ 200ms → show a small detail card (220×140 px) anchored next to the node:
+  - alias (large)
+  - vendor.label · model id
+  - runtime label
+  - host server line: hostname + CPU% + RAM% (from Hero 1+2 endpoint)
+  - last_task / message preview (1 line)
+- Reuses R57 panel chrome + R26 micro-lift idiom.
+- Risk: zero-overlap — card is positioned via existing label-card geometry, just larger when sustained-hover; cancel on mouseleave.
+
+### 3.F — Server-health node-ring tint (A · Hero 1+2 integration)
+
+- When a node's host server health is **red** (per Hero 1+2 endpoint), the node's status ring gains a faint amber outer ring (r+8, strokeWidth=2.5, opacity 0.6).
+- Yellow/green pass through unchanged.
+- Operator gets "this agent's machine is in trouble" signal without leaving the topology view.
+- Risk: zero-overlap — outer ring sits OUTSIDE existing R209 hover-ring radius window; tested geometry.
+
+### 3.G — Fullscreen viewport polish (#81 close-out) (U)
+
+- Existing fullscreen (R103) currently swaps to `width: 100vw; height: 100vh`. In fullscreen, the topology card chrome (kicker / h2 / chip-row) should hide — only canvas + brand logo visible.
+- Add CSS `:fullscreen` selector or `data-topo-fullscreen=true` attr-driven hide of title-block + chip-row.
+- Brand crescent moon moves into a small top-left overlay inside the SVG (16, 16) since the title-block disappears.
+- Risk: needs careful keyboard-focus handling — ensure Esc still exits.
+
+### 3.H — Chip-row default collapse on idle (S/U)
+
+- Chip row (`Ring | Grid | 3 working | 5 online | pressure …`) is fully visible by default. On a fleet with no traffic that's chrome bloat.
+- Default: show only **2 chips** (Ring/Grid layout toggle + working count). The rest hide behind an "Expand" toggle / `…` chevron.
+- Expand state persists in localStorage.
+- Risk: medium — needs UX think. Maybe ship as opt-in via setting, not silent default change.
+
+### 3.I — Canvas (16,16) corner brand mark (A)
+
+- In addition to the title-block crescent (R310), add a small (24×24) crescent at canvas viewBox (16, 16) **only when no recent-signal panel is showing** (composes with §3.C).
+- Doubles the brand mark presence on Twitter screenshots — title-block + canvas corner = brand-first.
+- Risk: zero-overlap — gated on the same `flowLinks.length === 0` predicate as §3.C; never co-exists with the panel.
+
+---
+
+## 4. Hero 1+2 integration touchpoints
+
+This RFC is the dashboard "consumer" side. The actual data contracts (per [#119](https://github.com/sleep2agi/agent-network/issues/119) + [#99](https://github.com/sleep2agi/agent-network/issues/99)) are owned by:
+
+- **agent-node telemetry** → SDK马 / 工程马 (CPU/mem/disk per-agent into `report_status`)
+- **CommHub aggregation** → 通信牛 (`GET /api/servers`, `GET /api/server/:host/health`, `/agents`)
+- **N站马 dashboard UI** consumes these and renders §3.E (hover detail), §3.F (red-server tint), and the standalone ServersDrawer page (Track 1, separate from Hero 3).
+
+This RFC does **not** block on those endpoints — §3.E and §3.F render in degraded form (no host fields) when the endpoint is absent, and light up automatically when the endpoint ships.
+
+For ServersDrawer (Track 1), I'll mock with a fixture against the §[3] schema in [#119](https://github.com/sleep2agi/agent-network/issues/119) and replace with the real endpoint once 通信牛 confirms the contract.
+
+---
+
+## 5. Risk & rollback
+
+### Concurrent-editor race (per `project_dashboard_concurrent_editors` memory)
+
+- All §3 surface items live inside `app/components/TopoGraph.tsx` — high parallel-edit traffic with codex.
+- **Mitigation**: bunch §3.B + §3.C + §3.I into one commit, immediately after Vincent ✅ on RFC; coordinate via commhub that codex holds polish edits for 10 min during the ship.
+- **Rollback**: each subtractive item uses `false && (() => {...})` gating — single-character flip restores.
+
+### Regression coverage (per `feedback_5291_amendment`)
+
+Each preview ship verifies:
+
+- 9 components render: TopoGraph / ServersDrawer / NodeCard / ChatModal / EventStream / TopBar / VersionSwitcher / ServerCard / AgentTokenChip
+- 6 interactions don't break: avatar click → ChatPopover (#100), drag-resize (#106), node delete cleanup (#74), vendor LOGO render (#96), grid toggle (#87), fullscreen zoom+pan (#81)
+- 5 pages render: `/`, `/admin`, `/chat`, `/messages`, `/profile`
+- `topo-overlap-test.mjs` green grid+ring (0:0:0:0:0)
+- `curl http://dm.vansin.top:3000/` returns 307 (auth redirect; normal)
+- `curl https://anet.sh` returns 200
+
+### Test regressions known from R301 + R310
+
+- `topo-monogram-stroke-test` (R283) and `topo-monogram-font-test` (R284) FAIL for known vendors after R301 vendor-logo upgrade (avatar circle replaced with `<image>` for vendors with logos). **Expected** — those R283/R284 fine-grain monogram tests are obsolete for vendors with real logo assets. Unknown-vendor prefix-group fallback assertions still pass. Will retire those two test files in the next ship.
+- `topo-kicker-tracking-test` and `topo-title-tracking-test`: occasional Playwright `waitForSelector` timeout after R310 flex-row title block. Element exists + renders correctly per diagnostic + screenshot. Hydration-timing flake. Will add `await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length >= 2)` before the visibility check.
+
+---
+
+## 6. Phasing
+
+Recommended chunking for `preview.X` slots, smallest-blast-radius first:
+
+**Wave 1 — racing-safe quick wins (10 min ship + verify, single commit)**:
+- §3.B sweep retire
+- §3.C recent-signal hide-when-empty
+- §3.I canvas (16,16) brand mark (gated on §3.C)
+- → preview.X.0
+
+**Wave 2 — incremental polish (no Hero 1+2 dependency)**:
+- §3.A hub-center crescent silhouette
+- §3.D grid default for ≥ 20 nodes
+- §3.G fullscreen viewport polish (#81 close-out)
+- → preview.X.1 / preview.X.2
+
+**Wave 3 — Hero 1+2 integration (after 通信牛 endpoint ships)**:
+- §3.E hover detail card
+- §3.F server-health node-ring tint
+- → preview.X.3 / preview.X.4
+
+**Wave 4 — UX-think items (opt-in, not silent)**:
+- §3.H chip-row default collapse — gated behind a setting toggle, not auto-applied
+- → preview.X.5
+
+---
+
+## 7. Open questions for Vincent
+
+1. **Defer status**: #140 currently defers Hero 3 (Dashboard 0.5.x major) to v0.11.0. Is the channel-relay correct that you've pulled it forward to v0.10.0? Or does it stay deferred? **If deferred, this RFC moves to v0.11.0 planning.**
+
+2. **Scope inclusion**: of the 9 items (§3.A through §3.I), which are in v0.10.0 scope and which (if any) are dropped? My recommended cut, if any: §3.H (chip-row default collapse) — high UX risk, low first-glance impact.
+
+3. **Server-health hover**: do you want host CPU/RAM in the **hover** card (§3.E), or only on the dedicated ServersDrawer page (Track 1)? Both surfaces the data; hover is denser but adds load on every node lookup.
+
+4. **Brand-mark double-up**: title-block crescent (already shipped R310) + canvas corner crescent (proposed §3.I) — too much logo, or two complementary anchors?
+
+5. **Codex coordination**: §3.B/§3.C/§3.I need a no-race ship window. Acceptable to dispatch a 10-min "codex hold polish" via 通信龙 for the Wave 1 ship?
+
+---
+
+## 8. Non-goals (explicitly out of scope for this RFC)
+
+- Hero 1+2 ServersDrawer **page-level** implementation — that's Track 1, a separate RFC slot if needed (current ServersDrawer per #119 v1 already exists).
+- Token usage UI (#114) — Track 3 of v0.10.0, separate UI consumer.
+- Backend changes (commhub endpoints, agent-node telemetry) — Hero 1+2 owned by 通信牛 + SDK马.
+- Fine-grain typography / opacity / tabular-nums work — those are the post-5222 polish loop items that remain HOLD.
+
+---
+
+## 9. Approval gate
+
+Implementation does **not** start on any §3 item until:
+
+1. Vincent acks the RFC scope (defer-or-include decision per Question 1) AND
+2. Vincent picks the §3 subset to actually ship (Question 2) AND
+3. For Wave 1 specifically, 通信龙 dispatches a 10-min codex polish-hold to avoid edit race AND
+4. The `topo-overlap-test` invariant is verified green pre-ship.
+
+---
+
+*This RFC is markdown-only. No code in this PR / commit. Next step: post as a comment on [#140](https://github.com/sleep2agi/agent-network/issues/140), wait for Vincent review.*

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@sleep2agi/agent-network-dashboard",
-  "version": "0.4.6",
+  "version": "0.5.0",
   "description": "Agent Network Dashboard — Web UI for managing AI Agent networks",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "eslint",
-    "prepublishOnly": "rm -rf .next && npm run build"
+    "prepublishOnly": "[ -f .next/BUILD_ID ] || (echo 'prepublishOnly: .next/BUILD_ID missing — run npm run build first (see commit 05c1ebf body for R224 chunk-500 root cause)' >&2 && exit 1)"
   },
   "bin": {
     "agent-network-dashboard": "./bin/start.js"

package/public/sleep2agi-logo.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <!-- sleep2agi brand mark: a crescent moon — the "sleep" metaphor in the
+       name. Two-shape construction: outer disc minus offset inner disc =
+       crescent. uses currentColor so the embedding context can theme it. -->
+  <mask id="s2a-moon-mask">
+    <rect width="32" height="32" fill="black" />
+    <circle cx="16" cy="16" r="13" fill="white" />
+    <circle cx="20.5" cy="14.5" r="11" fill="black" />
+  </mask>
+  <rect width="32" height="32" fill="currentColor" mask="url(#s2a-moon-mask)" />
+</svg>

package/public/vendors/claude.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <!-- Anthropic / Claude vendor mark.
+       NOT a copy of the Anthropic trademark — custom designed badge
+       in warm-orange palette. 4-rayed sparkle = "AI spark of insight".
+       Real Anthropic logo asset still gated on Vincent-direct. -->
+  <circle cx="32" cy="32" r="32" fill="hsl(16 32% 22%)" />
+  <circle cx="32" cy="32" r="30" fill="none" stroke="hsl(16 48% 54%)" stroke-width="2" />
+  <g fill="hsl(20 80% 78%)" transform="translate(32 32)">
+    <path d="M 0 -18 L 4 -4 L 18 0 L 4 4 L 0 18 L -4 4 L -18 0 L -4 -4 Z" />
+  </g>
+</svg>

package/public/vendors/minimax.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <!-- MiniMax vendor mark. NOT a copy of the MiniMax trademark —
+       custom designed badge: angular min/max zigzag in warm-red
+       palette evokes the function-shape without imitating the official
+       mark. Real MiniMax logo asset still gated on Vincent-direct. -->
+  <circle cx="32" cy="32" r="32" fill="hsl(18 50% 22%)" />
+  <circle cx="32" cy="32" r="30" fill="none" stroke="hsl(18 65% 52%)" stroke-width="2" />
+  <polyline points="14,42 22,22 32,42 42,22 50,42"
+            fill="none" stroke="hsl(20 80% 80%)" stroke-width="4"
+            stroke-linecap="round" stroke-linejoin="round" />
+</svg>

package/public/vendors/openai.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <!-- OpenAI / GPT / Codex vendor mark. NOT a copy of the OpenAI
+       trademark — custom designed badge: hexagonal frame + center dot
+       in teal palette evokes "geometric AI lattice" without imitating
+       the OpenAI knot. Real OpenAI logo asset still gated on Vincent-
+       direct. -->
+  <circle cx="32" cy="32" r="32" fill="hsl(165 26% 20%)" />
+  <circle cx="32" cy="32" r="30" fill="none" stroke="hsl(165 40% 44%)" stroke-width="2" />
+  <polygon points="32,12 47,21 47,43 32,52 17,43 17,21"
+           fill="none" stroke="hsl(165 50% 78%)" stroke-width="3" stroke-linejoin="round" />
+  <circle cx="32" cy="32" r="4" fill="hsl(165 50% 78%)" />
+</svg>

package/scripts/p0-servers-drawer-screenshot.mjs

@@ -0,0 +1,99 @@
+/* v0.10.0 Hero 1+2 — ServersDrawer extension screenshot evidence for #140.
+ * Mocks the /api/hub/servers response with disk + history + agents
+ * to surface the new expandable detail view. */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const out = process.argv[2] || 'screenshots/r293-p0/servers-drawer-expanded';
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const browser = await chromium.launch({ headless: true });
+const ctx = await browser.newContext({ viewport: { width: 1600, height: 1000 }, deviceScaleFactor: 2 });
+await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+await ctx.addInitScript(() => {
+  try {
+    localStorage.setItem('anet-theme', 'cyber');
+    sessionStorage.setItem('anet_v3_auth', '1');
+    // Force drawer open + expand the first card by hostname guess.
+    localStorage.setItem('anet-servers-drawer', '1');
+    localStorage.setItem('anet-servers-drawer-expanded', JSON.stringify(['mock-1', 'mock-2']));
+  } catch {}
+});
+
+// Mock servers payload with full v0.10.0 schema.
+await ctx.route('**/api/hub/servers*', (route) => {
+  route.fulfill({
+    json: {
+      servers: [
+        {
+          hostname: 'mock-1',
+          ip: '10.0.0.10',
+          cpu_load_1min: 2.4,
+          cpu_cores: 8,
+          mem_used_gb: 18.2,
+          mem_total_gb: 32,
+          disk_used_gb: 220,
+          disk_total_gb: 500,
+          cpu_history: [25, 28, 32, 30, 35, 38, 40, 36, 33, 30],
+          mem_history: [50, 52, 55, 56, 58, 57, 59, 60, 58, 57],
+          agents: [
+            { alias: 'claude-1', runtime: 'claude-code-cli', status: 'working', progress: 0.42 },
+            { alias: 'codex-1', runtime: 'codex-sdk', status: 'working', progress: 0.18 },
+            { alias: 'intern-1', runtime: 'claude-agent-sdk', status: 'idle' },
+          ],
+          agent_count: 3,
+          status: 'online',
+        },
+        {
+          hostname: 'mock-2',
+          ip: '10.0.0.11',
+          cpu_load_1min: 7.1,
+          cpu_cores: 4,
+          mem_used_gb: 14.5,
+          mem_total_gb: 16,
+          disk_used_gb: 460,
+          disk_total_gb: 500,
+          cpu_history: [80, 88, 92, 95, 96, 94, 93, 91, 90, 89],
+          mem_history: [85, 87, 89, 91, 90, 92, 93, 91, 90, 91],
+          agents: [
+            { alias: 'minimax-busy', runtime: 'claude-code-cli', status: 'working', progress: 0.78 },
+          ],
+          agent_count: 1,
+          status: 'online',
+        },
+        {
+          hostname: 'mock-offline',
+          ip: '10.0.0.20',
+          cpu_load_1min: null,
+          cpu_cores: 0,
+          mem_used_gb: null,
+          mem_total_gb: null,
+          agent_count: 2,
+          status: 'offline',
+          note: 'last seen 12m ago',
+        },
+      ],
+    },
+  });
+});
+await ctx.route('**/api/hub/status*', (r) => r.fulfill({ json: { sessions: [], hub: { networks: [] } } }));
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [] } }));
+await ctx.route('**/api/hub/tasks*', (r) => r.fulfill({ json: { tasks: [] } }));
+
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'networkidle' });
+await page.waitForSelector('[data-server-card]', { timeout: 15000 });
+await page.waitForTimeout(800);
+
+// Crop to the drawer region only.
+const box = await page.evaluate(() => {
+  const aside = document.querySelector('[aria-label="Servers panel"]');
+  if (!aside) return null;
+  const r = aside.getBoundingClientRect();
+  return { x: r.x - 8, y: r.y - 8, width: r.width + 16, height: Math.min(r.height + 16, 980) };
+});
+if (box && box.width > 100) {
+  await page.screenshot({ path: `${out}.png`, clip: box });
+}
+await page.screenshot({ path: `${out}-full.png`, fullPage: false });
+console.log(`✅ wrote ${out}.png + ${out}-full.png`);
+await browser.close();