[P2] Align Workflow Activity vNext layout and tables with NyxID

[AbigailDeng]

Context

Workflow Activity vNext uses the approved Aevatar palette and real API behavior, but its shell, spacing, typography, control sizing, table density, scrolling, and responsive presentation do not yet match the requested NyxID reference.

Reference inspected in the existing signed-in browser session: https://nyx.chrono-ai.fun/

Canonical Aevatar visual contract: docs/canon/frontend-design.md, section 13. Workflow Activity vNext 的 NyxID 视觉对齐规范.

Measured NyxID patterns

• 52px global top bar.
• 200px desktop side rail; hidden below 768px and replaced by a top-bar menu.
• Main content padding: 40px desktop, 32/24px intermediate, 16px mobile; 24px desktop and 16px mobile top padding.
• Page title: 28/28px desktop, 22/22px mobile, weight 700.
• Supporting copy: 12/17px.
• Tabs: 32px high with an underline active state.
• Compact controls: 32-36px; icon controls: fixed 32px square.
• Tables: 32px header, 10/14px uppercase labels, 12/17px body, 53-60px rows, 12px horizontal and 10px vertical cell padding.
• Mobile wide tables remain semantic tables inside a bounded horizontal scroller instead of becoming card lists.
• Bordered single-layer sections with very low shadow; no nested cards or decorative gradients.

Aevatar-preserved boundaries

• Preserve Aevatar colors and status semantics.
• Preserve AlibabaSans delivery while matching NyxID's type scale, weight, and line height.
• Cap radii at 8px under the repository design rule even where NyxID measures 14px.
• Preserve every current route, query, API, identity, authentication, locale, state, and completion-evidence contract.
• Real APIs and API-acknowledged user actions remain the only production data source.

Implementation scope

• Shared vNext shell: top bar, breadcrumb, 200px rail, mobile menu, page title and action hierarchy.
• Workflows: toolbar, compact table, stable local scrolling, one primary row target and overflow actions.
• New workflow: Describe, Start blank, Import YAML, and Template chooser/form states.
• Workflow editor: title actions, Canvas/YAML toolbar, full-width canvas, node library/detail surfaces, run console, dialogs.
• Activity: filters, ledger table, loading/empty/error states, local table scrolling.
• Run detail: status/actions, immutable summary, tabs, Steps, Diagnostics, Timeline, Statistics and usage, Graph, recovery states.
• Settings: AI defaults, Account, Advanced, dirty/accepted/observed/save-failure states.

Acceptance criteria

• Every page above uses the documented vNext visual tokens and NyxID-derived hierarchy while retaining Aevatar colors.
• Desktop 1440x900, tablet 834x1112, and mobile 390x844 have no page-level horizontal overflow or incoherent overlap.
• Workflows and Activity show at least 6-8 rows in a normal desktop viewport when real data is available; table scrolling stays inside the named region.
• Mobile tables scroll horizontally inside their bordered region and retain semantic headers.
• Header, navigation, controls, status, loading, empty, error, disabled, focus-visible, and reduced-motion states are complete.
• Existing user-path behavior and real API state semantics remain unchanged.
• Focused related tests and explicit changed-file static checks pass locally; the full frontend suite, package-wide typecheck, and production build are delegated to GitHub CI under the personal incremental frontend policy.
• Desktop, tablet, and mobile browser screenshots plus overflow measurements are recorded in the PR.

Design baseline

Design baseline:
  apps/aevatar-console-web/docs/design-baselines/workflow-activity-vnext/
Primary design:
  aevatar-workflow-activity-vnext.excalidraw
Design SHA-256:
  30e74d7b410ae72c4c91432355436679033679c54c10b1702908435b001577de
Contract specification:
  apps/aevatar-console-web/docs/superpowers/specs/
  2026-08-04-workflow-activity-vnext-design.md
User paths:
  apps/aevatar-console-web/docs/superpowers/specs/
  2026-08-04-workflow-activity-vnext-user-paths.md
Production data source:
  Real APIs and API-acknowledged user actions only; no mock fallback.

Priority

P2. Functional user paths are complete, so this visual alignment is ready for implementation on feat/2026-08-04_workflow-activity-vnext-implementation.

[AbigailDeng]

Implemented on feat/2026-08-04_workflow-activity-vnext-implementation in commit 7073c672c and pushed to draft PR #3189.

Completed scope:

• 52px top bar, 200px desktop rail, and 240px mobile drawer.
• NyxID-derived spacing, typography scale, controls, underline tabs, form hierarchy, and 32px/56px table density while preserving Aevatar colors, AlibabaSans, and the 8px radius cap.
• All vNext pages covered: Workflows, New workflow, editor, Activity, Run detail, and Settings.
• Mobile Workflows/Activity/Steps/Diagnostics remain semantic tables inside bounded horizontal scrollers.
• Real browser verification completed at 1440x900, 834x1112, and 390x844; every viewport had page scrollWidth === clientWidth.
• Focused Jest: 3 suites, 43 tests passed.
• Changed-file Biome, test stability guard, docs lint, design baseline verification, and whitespace checks passed.
• Full frontend suite, package-wide typecheck/lint, and production build are delegated to GitHub CI under the incremental frontend policy.

The PR body contains the exact commands and detailed browser measurements. Closes #3194 is included so the issue closes when PR #3189 merges.