Implementation Plans

v3 Design System for the Bookmark Workbench

Goal

Apply the MOSS v3 Editorial Calm design system to the existing bookmark calibration workbench without replacing its information architecture, views, data model, or interaction flows. prototypes/moss-workbench.html is the visual source of truth for this implementation.

Scope

Keep the existing three Workbench views: calibration, profile, and history.
Keep the current SQLite reads, /api/feedback writes, filters, selection behavior, and Feedback interactions unchanged.
Restyle the existing sidebar, filter controls, bookmark list, inspector, and mobile navigation using the v3 token system.
Port the prototype's restrained three-column composition, compact row-based feed, hairline dividers, sidebar rhythm, and inspector hierarchy. Retain the current labels: 书签校准、兴趣画像、运行历史.
Add a visible theme control on desktop and mobile.
Default to the operating-system color preference; persist a user override (light or dark) in localStorage and reflect it through data-theme on the document root.
Respect reduced-motion preferences and existing v3 focus/interaction tokens.

Non-goals

Do not replace the workbench with prototypes/moss-personal-os-v3.html or rename current views to the prototype's 今日推荐 information architecture.
Do not change bookmark ranking, filtering, Feedback semantics, API contracts, database schema, or import behavior.
Do not add a global search workflow or new product domains in this change.

Implementation Design

Add a client-side theme controller that reads the stored preference, otherwise defers to prefers-color-scheme, and sets document.documentElement.dataset.theme.
Add a compact v3-styled ThemeToggle to the desktop sidebar and mobile header. It must expose a clear accessible label and pressed state.
Refactor Workbench layout classes to consume component and semantic tokens only. Preserve the current three-column desktop layout and responsive mobile behavior.
Use v3 typography hierarchy, mineral surfaces, subtle wash/grain texture, domain accents, hairline borders, elevation, and focus rings to style existing UI primitives.
Present bookmark title as the list headline, render a maximum two-line text summary only when it adds information, and show the complete text in the context panel.
Keep Feedback as an inline expansion of the five fixed choices, matching the approved workbench prototype rather than introducing a dropdown/floating menu.
Verify light and dark themes, persisted theme selection, system-preference fallback, keyboard operation, filters, view transitions, and Feedback-menu expansion.

Acceptance Criteria

The route remains the existing bookmark calibration page, not the Personal OS prototype.
All existing Workbench interactions remain functional.
Both manual themes work on desktop and mobile and persist after a reload.
No raw color values are introduced into page or component code; styling consumes design-system tokens.
Unit tests, production build, and browser interaction checks pass.