fix(web): unify shared tokens, alignment and empty states

[PeterGuy326]

Problem and result

Refs #211 (revision r2) and bytefolk/design-system#29.

The Web client had faint light-theme labels, inconsistent control colors and broadly centered reading content. It now derives its palette from the shared design-system source and aligns content by purpose: names/forms/headings start-align, comparable numeric columns and trailing actions end-align, and button contents and complete empty states center. Narrow layouts keep controls reachable.

Changes

• Add a zero-dependency token generator using an unmodified, licensed snapshot of design-system commit 910456901dda74da4d5b0320cd03d36ad18650b0; verify its SHA-256 and generated output before every Web build. Preserve alpha and derive readable foreground/solid-action pairs from those source hues.
• Keep React 19 and existing primitives; add no runtime dependency or peer-range change. A local empty-state adapter follows the shared title/description/action scale.
• Restore reading alignment across navigation, files, filters, forms, cards and dialogs; keep localized confirmation labels visible when omitted by callers.
• Use a device-width viewport, wrap provider/detail actions, and keep permission tables locally scrollable on phones. Theme browser chrome follows computed tokens.
• Update Unreleased changelog. API, routes, storage and authorization behavior are unchanged.

Validation

With locked dependencies (cd web && npm ci), make test-web passed: type/lint/build and the existing localization, theme, enrichment, memory, managed embedding and transfer acceptance. Unit tests: 7 files / 69 passed; root independently reran the 2 confirmation regressions.

The token check verifies 334 generated/composited pairs at >=4.5:1. Actual browser acceptance captured 82 states across both themes at desktop and 390px touch-mobile widths, covering populated/empty views, dialogs, menus, file/memory/task details, providers, permissions and transfer. All 4,758 sampled visible-text pairs met the selected contrast threshold, with no JavaScript errors or unexpected document overflow. The mobile permission table was actually swiped to its trailing action and the confirmation opened. Root independently inspected the running Web client. A separate source/render review caught and verified the failed-thumbnail badge fix (9.23:1 light /10.14:1 dark). A further12 primary/danger/disabled normal+hover samples reached at least5.55:1; true touch scrolling also kept file-list names and numeric columns reachable. This is fixture-based UI acceptance: all API responses came from MSW; it is not a live-backend integration result. Private screenshots remain local.

CI dependency and review status

Keep this PR Draft until required current-head CI passes. The preceding head's HTTP/CLI/MCP lifecycle check failed before application tests because the pinned MinIO image could not be pulled from Docker Hub. The separate fix is #209 (issue #207); it is not copied into this UI diff. Other green checks do not waive that dependency. Current-head results must be read independently after this push.

No deployment or formal human approval is included. Revert the scoped commits to roll back; no migration is required.

Current-head hosted result

All checks have finished on 7d941998167c4c6dadd27be348d9b96e1ec28e03. The only failing check is HTTP, CLI and MCP lifecycle; all other check entries succeeded, including Web and Web memory/transfer acceptance. The failing job stops while starting isolated dependencies: minio/minio reports pull access denied before the application tests. This matches the separate registry fix in #209. The PR remains Draft pending that dependency and a fresh successful CI run.

Totoro received the review bundle and explicit blocker status, with successful message delivery verified. This is a handoff, not formal approval.

[Bindy-lbb]

Mem PR #212 Review 结论：LGTM (Approved) ✅

审查要点：

1. 设计系统 Token 同步与对比度保障：
   • 采用零运行时依赖的 Token 生成脚本，按 design-system 锁定快照（9104569）严格导出色阶；
   • 334 组生成/复合颜色对实测达到 >=4.5:1 对比度，暗黑/亮色主题覆盖完备。
2. 对齐规范收敛与空态统一：
   • 严格遵循语义对齐规则：标题/表单/正文靠左对齐，数值列与操作项靠右对齐，按钮与完整空态居中；
   • 引入本地 EmptyState 适配器，统一步骤指引与清晰操作入口。
3. 响应式与移动端交互：
   • 视口适配与权限表格横向滚动优化，确保手机端（390px）操作可触达；
   • 20/20 项 CI 全绿（包含解封后的 HTTP/CLI/MCP lifecycle 容器测试）。