browser/openspec/changes/polish-platform-interaction-design/tasks.md

1. Interaction Audit and Acceptance Criteria

• 1.1 Audit 首页、服务器管理、插件市场、用户管理、AI 提供商管理, and server detail against the accepted interaction polish requirements.
• 1.2 Identify any visible overlap, clipped labels, weak hierarchy, unclear primary actions, missing empty/error/loading states, or color-only status cues.
• 1.3 Confirm the implementation scope remains platform_web polish only and does not add billing, cloud host sales, provider marketplace workflows, direct run access, or plugin transport shortcuts.
• 1.4 Map every planned UI change to shared route components, shared theme primitives, or documented shared CSS additions.

2. Shared Theme and Layout Polish

• 2.1 Reuse or extend theme/tokens.ts and theme/base.css for any new shared materials, frames, command states, tables, drawers, dialogs, or responsive primitives.
• 2.2 Preserve black mecha as the default theme and magical-girl as the alternate theme, with distinct token-driven materials and readable translucent surfaces.
• 2.3 Keep grouped large-entry navigation, large icon badges, bold Chinese labels, expandable child rows, active frames, and single-column/double-column density behavior.
• 2.4 Keep full-workspace decorative effects centralized in components/MagicalParticleLayer.tsx; do not add page-local fixed decorative DOM/CSS motifs.
• 2.5 Keep framed repeated items at 8px-or-less radii unless a native pill/circle control shape is required.

3. First-Party Route Polish

• 3.1 Polish 首页 hierarchy so loaded platform overview, resource/health signals, game/plugin counts, and refresh/recovery affordance are clear at desktop and mobile widths.
• 3.2 Polish 服务器管理 so server identity, lifecycle state, run assignment, filters, creation entry point, and drill-in affordance are scannable without a fixed left-list/right-detail layout.
• 3.3 Polish 插件市场 so plugin identity, installed state, manifest reference, lifecycle capabilities, permissions, bridge actions, and validation state are readable and safe.
• 3.4 Polish 用户管理 so API-connected account rows, role/status cues, create/edit affordances, and loading/empty/error states are clear and not color-only.
• 3.5 Polish AI 提供商管理 so provider status, relay mode, model/default-model details, and redacted key references are readable without exposing raw keys.

4. Server Detail Workflow Polish

• 4.1 Polish server detail header and tabs so server name, ID, plugin version, run node, lifecycle state, and tab navigation remain visible across desktop and mobile widths.
• 4.2 Polish lifecycle command states so start/stop controls have clear labels, disabled/progress behavior, confirmations or feedback where appropriate, and operation-history visibility.
• 4.3 Polish logs, config, plugin controls, AI assistant, artifacts, and operation history surfaces with meaningful loaded/empty/error states, safe logical IDs, readable timestamps, and traceable outcomes.
• 4.4 Confirm server detail and plugin controls remain platform-mediated and do not expose raw host paths, sockets, credentials, direct run URLs, or plugin-owned transports.

5. Browser Walkthrough and Automated Acceptance

• 5.1 Run a browser walkthrough at a desktop viewport across 首页、服务器管理、插件市场、用户管理、AI 提供商管理, server detail, lifecycle controls, plugin controls, logs/config/AI/operation-history tabs, and record evidence.
• 5.2 Run a browser walkthrough at a mobile viewport across the same required first-party areas and server detail workflow surfaces, and record evidence.
• 5.3 Verify both black mecha and magical-girl themes preserve readable surfaces, distinct theme treatments, navigation clarity, and background visibility.
• 5.4 Run LOCAL_DEBUG_PLATFORM_PORT=18189 LOCAL_DEBUG_WEB_PORT=5183 LOCAL_DEBUG_ROOT=/private/tmp/browser-local-debug-acceptance scripts/browser-acceptance.sh and record the evidence path.

6. Verification and Stream Update

• 6.1 Run cd platform_web && npm run typecheck && npm test && npm run build and record evidence.
• 6.2 Run scripts/check-structure.sh and record evidence.
• 6.3 Run openspec validate polish-platform-interaction-design --strict and record evidence.
• 6.4 If structural theme rules or shared style contracts change, update platform_web/theme/README.md and any relevant tests in the same change.
• 6.5 Update openspec/changes/architecture-delivery-stream/delivery-plan.md and openspec/changes/architecture-delivery-stream/NEXT_CHANGE.md after implementation evidence exists.

Evidence

• platform_web/pages/UsersPage.tsx: added explicit loading, API fallback error, empty-state, and accessible row action labels for 用户管理.
• platform_web/pages/AiProvidersPage.tsx: added an explicit empty-state for filtered AI provider lists while preserving redacted apiKeyRef display.
• platform_web/pages/ServersPage.tsx: polished create workflow feedback with an inline result strip.
• platform_web/pages/PluginsPage.tsx: polished plugin detail framing and action strip behavior.
• platform_web/theme/base.css: hardened shared action strips, server toolbars, catalog cards, plugin detail panels, result strips, responsive grids, and table/workspace min-width behavior.
• platform_web/acceptance/browser-acceptance.mjs: expanded browser acceptance to record desktop/mobile walkthroughs for black mecha and magical-girl themes, route marker checks, visible-layout checks, API-backed route proof, plugin controls, and operation-history proof.
• Browser evidence: LOCAL_DEBUG_PLATFORM_PORT=18189 LOCAL_DEBUG_WEB_PORT=5183 LOCAL_DEBUG_ROOT=/private/tmp/browser-local-debug-acceptance scripts/browser-acceptance.sh passed; evidence file /private/tmp/browser-local-debug-acceptance/browser-acceptance/browser-acceptance-evidence.json records 7 required routes plus 4 walkthrough scenarios: desktop/mobile black mecha and desktop/mobile magical-girl.
• Frontend evidence: cd platform_web && npm run typecheck, cd platform_web && npm test (11 files / 49 tests), and cd platform_web && npm run build passed.
• Structure evidence: scripts/check-structure.sh passed.
• OpenSpec evidence: openspec validate polish-platform-interaction-design --strict passed.