@sleep2agi/agent-network-dashboard 0.4.3-preview.0 → 0.4.4-preview.0

package/docs/light-theme-audit-v0.4.2.md

@@ -1,229 +0,0 @@
-# Light Theme Audit & Polish Proposal · v0.4.2 → v0.4.3-preview.0
-
-**Author**: N站马 (Dashboard owner)
-**Reviewers**: 通信龙 (gate), Vincent (final)
-**Status**: 🟡 design-review — DO NOT implement until 通信龙 OKs direction
-
-## TL;DR
-
-Light theme is **functionally correct** (Issue #4 fix shipped in 0.3.4 made all themed surfaces light), but the visual story is unfinished. The 0.4.x line plugged bug-leaks; 0.4.3 should make light feel **deliberate**, not "Cyber-minus-the-dark".
-
-I propose direction = **cool-professional, breathable** (Stripe Dashboard / Vercel / Linear). Three high-impact moves:
-
-1. Sidebar gets **white** (`bg-secondary`) — currently same color as page bg, so it doesn't visually separate.
-2. Active-nav state simplifies from **4 emerald cues** to **1**: thin left border + slight bg tint, NO emerald text.
-3. Empty / disabled / error states stop showing **raw `[{"error":...}]`** and double-dash `--` — replace with iconified empathy states.
-
-The big optional swing is a Command Mesh **light SVG variant** (currently a dark radar canvas inside an otherwise light page). High polish, ~150 lines SVG rewrite. Recommend: do it, gated on 通信龙's call.
-
-If those land, the rest is per-component cleanup (~10 small commits). Target release: `@sleep2agi/agent-network-dashboard@0.4.3-preview.0`, preview tag only.
-
----
-
-## 1. Audit method
-
-- Local `next dev` on port 3030
-- Playwright (chromium headless 1440×1100, fullPage)
-- 11 pages screenshotted: login, overview, nodes, tasks, messages, networks, logs, server-logs, admin, settings, settings/tokens
-- For each page also collected: dark-residual elements (computed bg with R<80, RGB sum <220) and low-contrast text pairs (luminance delta < 120)
-- Empty-state coverage (no real agents in local network) — known limitation; need to re-audit with seeded data once we have a staging hub
-
-Screenshots and `findings.json` archived at `/tmp/audit-light/` (12 files).
-
----
-
-## 2. Direction call — needs 通信龙 sign-off
-
-### Proposal: **cool-professional, breathable**
-
-| dimension          | direction                                                      |
-|---|---|
-| feel               | crisp, technical, ops-oriented — like Stripe Dashboard / Vercel / Linear |
-| temperature        | cool (zinc + emerald), NOT warm (amber/orange/peach)            |
-| density            | breathable — same info density as Cyber but card padding +1 step, vertical gaps +30% |
-| accent usage       | minimal — emerald only on (1) CTA buttons, (2) current-page nav, (3) key status numbers |
-| typography         | keep `font-mono` for code/IDs/timestamps; consider sans-serif for body labels (deferred — separate decision) |
-| elevation          | real soft shadows (2 levels: rest + hover), NOT border-only |
-| illustration       | none — no icons-with-faces, no doodles, no curved arrows |
-
-### Why not "warm/friendly"
-
-This is an **ops tool** for managing AI agent armies (Vincent's framing). Warm undermines the "monitoring console" feel. Cyber dark and Light cool are the same designer-brain — two surfaces of one product.
-
-### Why not "minimalist/flat"
-
-Minimal would mean stripping the gradient accents and shadows; we'd lose the data-density signaling that makes the Cyber theme legible. Keep the structure, polish the surfaces.
-
-### Alternatives if 通信龙 wants different
-
-- **warm/friendly**: switch emerald → coral or amber, add soft illustrations, larger padding, friendlier copy
-- **brutalist**: kill all gradients, kill all rounded corners >6px, monochrome with one hot accent
-- **glass-morphism**: backdrop-blur on cards, layered translucent panels — feels modern but heavy on perf and visually busy
-
-Pick one before I touch code.
-
----
-
-## 3. Per-page findings
-
-### 3.1 Sidebar (global — affects every page)
-
-**Issues:**
-- **P0** Sidebar bg currently = `var(--bg)` (#f6f7f9) = page bg → sidebar reads as part of the page, only the thin right border separates it. Cards on the right (white) look "in front of" the page; sidebar looks like negative space.
-- **P1** Header "Agent Network / Dashboard" is plain text with no logo/mark. No visual anchor.
-- **P0** Active nav state stacks 4 emerald cues: `bg-cyan-500/10` + `border border-cyan-500/20` + `text-cyan-300 (→ var(--accent))`. Muddy.
-- **P2** Network list inside sidebar (collapsed by default in screenshots, but exists) — when present, role icons (⭐/🔧/👤/👁) feel out of register with otherwise sober typography.
-- **P2** Bottom theme switcher button + collapse arrow are tight together — easy to misclick on mobile.
-
-**Proposed fixes:**
-
-```diff
-- bg-[#0d0d1a]                                // resolves to var(--bg) in light
-+ bg-[var(--bg-secondary)]                    // white, sits as its own surface
-
-- /* active nav: bg-cyan-500/10 + border + text-cyan */
-+ /* active nav: 4px left border emerald + text-fg, NO bg tint */
-```
-
-### 3.2 Login
-
-**Issues:**
-- **P2** Logo area: 64×64 emerald rounded square is OK; could carry product mark (svg from `/favicon.svg`?) instead of being a flat square. Low priority.
-- **P3** Big empty space above logo (~250px) — could center tighter on small screens.
-- ✅ Sign in button (solid emerald) and field focus rings work in light.
-
-### 3.3 Overview
-
-**Issues:**
-- **P0** KPI cards (Online/Working/Offline/Total) — the radial gradient tint (`from-green-500/20 to-green-500/0`) on white reads as a pale wash; **add a 2px colored top-strip** instead of/in addition to the wash. Clearer color coding without the muddy gradient.
-- **P1** "fake / Edit / Sign out" user bar — Edit + Sign out links are right-aligned text-only; very low affordance for "click here to do action". Convert to ghost buttons.
-- **P1** Config bar is a one-line collapsible section taking full row width. Visually thin; should either merge into a header strip or get more presence.
-- **P0** Quick Actions row mixes data ("0/0", "0", "—") and placeholders ("→"). The arrows feel like "go to" affordances but the same row also acts as a stat dashboard. Two competing intents. Pick: either it's a stat strip or it's a nav strip, not both.
-- **P1** Empty state "— / No agents in this network" — the "—" double-dash is visually loud (24pt+) for what is essentially an "empty" message. Use an icon, smaller text.
-- **P1** "Hide Topology" toggle is a tiny outlined button mid-page. Should be a small icon-toggle in the topology section header.
-
-### 3.4 Nodes
-
-**Issues:**
-- **P2** Header "Nodes  0 online  0 total" — chip alignment OK, but "0 online" emerald chip vs "0 total" grey chip have different vertical alignment with the H1 (looks off-by-a-pixel).
-- **P2** Search nodes input + "All" dropdown — `<select>` element is **native browser styled**, doesn't match our themed inputs (you can see it visually clashes — a chunky arrow, default font weight). Need to replace with custom dropdown OR style the native select.
-- **P3** List/Grid toggle top-right — fine.
-
-### 3.5 Tasks
-
-**Issues:**
-- **P1** Tab strip has 10 tabs (All + 9 statuses). On 1440px desktop it fits; on narrower viewports it wraps. **Pills should color-code by status** to match the chip system used elsewhere (running=green, failed=red, etc.) — currently they're all neutral except active.
-- **P2** From/To node filters are bare inputs with no labels — fine for power users, opaque for new users.
-
-### 3.6 Messages
-
-**Issues:**
-- **P2** "All types" select again native-styled, same issue as Nodes.
-- **P2** "Debug" toggle button looks identical to "Timeline/Grouped" view toggle — should visually differentiate (debug = dev affordance, view = display mode).
-
-### 3.7 Networks (Settings → Networks)
-
-**Issues:**
-- **P2** Create form button "Create" is muted (disabled-looking) when fields empty — by design. But the "Create" button when active is solid emerald, when disabled it's the muted grey we shipped in 0.3.4. Works correctly but the **transition between disabled→enabled feels abrupt** (no animation).
-- ✅ My Networks empty state ("No networks found. Create one or sign in with V3 auth.") is well-written.
-
-### 3.8 Logs (Audit Log)
-
-**Issues:**
-- **P0** Error state shows **raw JSON**: `[{"error":"unauthorized"}] (Audit log may require V3 auth token)` in a yellow chip. Two problems:
-  1. JSON should never leak to users — pretty-print or replace with human message
-  2. The "(Audit log may require V3 auth token)" parenthetical is helpful but undersold — should be the primary message with a "Sign in" CTA
-- **P3** "All actions" select native styled.
-
-### 3.9 Server Logs
-
-**Issues:**
-- **P0** Error chip: `X hub 401 (admin 角色才能看 server logs)` — exposes HTTP status to user. Should be "You need admin role to view server logs."
-- **P1** "加载失败" (Chinese for "loading failed") shown plain-text on white card — should be styled error state with icon + retry CTA.
-- **P2** Top controls (Pause / auto-refresh / Reload) jammed together — Pause is a chip-style button, auto-refresh is a checkbox-label, Reload is an outlined button. Visually heterogeneous; should be one button group.
-- **P2** Tab filter (all/log/info/warn/error) — same as Tasks tab strip, should color-code.
-
-### 3.10 Admin
-
-**Issues:**
-- **P0** "Server Overview" mini-stats (`0 Online / 0 Offline / 6 SSE Connections / -- Total Tasks`) — the "6" for SSE Connections lights up emerald with no context. New users won't know what SSE Connections means. Add tooltip or sub-label.
-- **P1** "Register User (V3)" button is full-width muted grey (disabled when empty). Visually weak — looks like a placeholder. When enabled it'll be full-width emerald, which is a lot of emerald.
-- **P2** Two-column layout works but left column is denser than right — could rebalance.
-
-### 3.11 Settings
-
-**Issues:**
-- **P1** Long card list with no section grouping → feels like a list, not an org. Add section headings: "Connection", "Account", "Resources", "Advanced".
-- **P1** License "type · trial" shown as orange text — should be a chip.
-- **P2** "anet-XXXX-XXXX-XXXX-XXXX" license code input is empty-styled (light grey bg with placeholder); enter key UX unclear.
-- **P3** Session card at bottom — red "Session" label is a slight misdirection (looks like an error). Should probably read "Sign out" with a less alarming color.
-
-### 3.12 Settings → Tokens
-
-**Issues:**
-- **P2** Same disabled-button pattern as Networks. Works correctly, just the abrupt enable transition.
-
----
-
-## 4. Cross-cutting issues (apply globally)
-
-1. **CSS hex-class shim is fragile** — every theme bug fix so far has been "add `bg-[#xxxxxx]` to the override list in globals.css". Real fix: migrate components from `bg-[#0a0a1a]` → `bg-[var(--bg)]` or themed Tailwind tokens. Scope: ~30 files, ~150 instances. Not urgent for 0.4.3 but the right long-term play.
-2. **Native `<select>` not themed** — 4 occurrences across pages (Nodes filter, Messages filter, Logs filter, Settings password change). Either style them or replace with custom dropdown.
-3. **Empty states inconsistent** — sometimes "--" + text, sometimes only text. Standardize: icon + headline + sub-text + optional CTA.
-4. **Error states inconsistent** — sometimes raw JSON, sometimes plain text, sometimes styled chip. Standardize: red chip + human message + recovery CTA.
-5. **Disabled button confusion** — disabled + enabled muted-grey-vs-emerald is too binary. Add an outline or subtle text-decoration to disabled state to make affordance clearer.
-
----
-
-## 5. Command Mesh — decide separately
-
-**Current state:** Cyber radar SVG (linear gradient `#0b1220→#080814→#101018`, cyan rings, neon edges, animated flow particles) rendered as-is in light theme. Looks great in Cyber, looks like a black hole inside a white page in light.
-
-**Option A (recommend):** Build a light variant.
-- White SVG bg with very subtle grid lines (`#e3e6eb` 1px every 80px)
-- Emerald node circles (no glow)
-- Soft grey edges (no animated particles, or slowed-down + lower contrast)
-- Cost: ~150 LOC new SVG block, conditional on `data-theme="light"` (detect via `matchMedia` or pass theme prop)
-
-**Option B:** Hide topology in light theme.
-- Cheaper. Add "(hidden in light theme)" message + show-anyway button. Cost: 5 LOC.
-- Worse UX — users lose a feature in light mode.
-
-**Option C:** Keep dark canvas in light page.
-- Free. Status quo. Visually disruptive but functional.
-
-**My recommendation: A.** It's the highest-perceived-polish change in this whole proposal.
-
----
-
-## 6. Implementation plan (after 通信龙 OK)
-
-Sequence (10 small commits, each independently shippable):
-
-1. **Sidebar surface** — change bg to `bg-secondary`, simplify active nav state, add right divider shadow. Touches `app/components/Sidebar.tsx` + globals.css.
-2. **KPI card accent** — replace gradient wash with 2px top strip; touches `app/components/StatsBar.tsx`.
-3. **Empty states standardization** — extract `<EmptyState>` component with icon prop; touches `app/components/LoadingSkeleton.tsx` (already exports EmptyState) + 6 page files.
-4. **Error states standardization** — same pattern, `<ErrorBanner>` component. Touches logs page, server-logs page.
-5. **Native select theming** — apply `appearance-none` + custom chevron SVG bg. globals.css.
-6. **Tab strip color coding** — Tasks + Server Logs tabs get color tints matching status. Touches `app/tasks/page.tsx`, `app/server-logs/page.tsx`.
-7. **Disabled button outline** — globals.css; add dashed border to `disabled:bg-gray-800` in light/mint.
-8. **Settings section grouping** — wrap cards in `<section>` groups with H3 headings. Touches `app/settings/page.tsx`.
-9. **Quick Actions disambiguation** — split into pure-stat-row + pure-nav-row, OR make all 6 carry data. Touches `app/page.tsx`.
-10. **Command Mesh light variant** (if Option A) — new SVG block conditional on theme. Touches `app/components/TopoGraph.tsx`.
-
-Each commit builds + Playwright-screenshots + diffs against the audit screenshots stored in `/tmp/audit-light/`.
-
-Bump to `0.4.3-preview.0`, `npm publish --tag preview`. **Do NOT** touch CLI `PINNED_DASHBOARD_VERSION` (stays 0.4.2 stable). **Do NOT** `vercel deploy --prod` (preview testing via `npx ...@preview` only).
-
----
-
-## 7. Questions for 通信龙
-
-1. **Direction** — cool-professional confirmed? Or pick alternative (warm / brutalist / glass).
-2. **Command Mesh light variant** — Option A (build it) / B (hide) / C (keep dark canvas in light page).
-3. **CTA color** — keep emerald `#009e7e` or swap brand?
-4. **Sans-serif body** — defer to a separate decision (typography is a multi-week call)?
-5. **Mobile audit** — do this in 0.4.3 or defer to 0.4.4?
-6. **Native `<select>` replacement** — style them (cheap) or build custom dropdown (right)?
-
-Awaiting your call on 1–6. Phase 3 implementation starts when you OK direction.

package/docs/v4-plan.md

@@ -1,38 +0,0 @@
-# Dashboard V4 优化方案
-
-## 上一阶段成果
-- 51 commits，8+ 页面，preview.8→27 全对接
-- V3 Auth 完整：登录/注册/token管理/网络管理/成员查看
-- SSE 实时 + SWR 数据层 + network_id 隔离
-- Docker 测试环境自动化
-
-## preview.27 新发现
-- 注册返回 `utok_`（用户 token）+ `ntok_`（网络 token）
-- 首个注册用户自动成为 `admin` 角色
-- `/api/task_events` 端点可用
-- `/api/auth/tokens` 返回多种 token
-
-## V4 优化清单
-
-### 产品
-1. 注册流程：展示 utok_ 和 ntok_ 双 token（用户 token + 网络 token）
-2. Network 多租户：完整的网络→成员→邀请→角色 流程
-3. 任务事件时间线：/api/task_events 接入 Task 详情页
-
-### 设计
-4. 统一色彩系统：定义 design tokens（primary/success/warning/error）
-5. 首页信息层次优化：减少视觉噪音
-6. 空状态设计统一
-
-### 前端
-7. 注册响应支持 utok_/ntok_ 双 token
-8. 新增 /api/hub/task-events 代理
-9. Task 详情页接入 task_events 时间线
-
-### 运维
-10. Docker 测试自动化脚本
-11. 健康检查监控
-
-### 运营
-12. Demo 数据丰富化
-13. Onboarding 引导

package/test-results/.last-run.json

@@ -1,4 +0,0 @@
-{
-  "status": "passed",
-  "failedTests": []
-}