Initial TrueGrowth source import

openspec/changes/refactor-truegrowth-ui-system/specs/ui-design-system/spec.md

@@ -0,0 +1,59 @@
+## ADDED Requirements
+
+### Requirement: App UI SHALL Use A Local TrueGrowth UI Entry
+
+New customer-facing app UI SHALL import reusable primitives from the local `@/ui` entry so that controls, overlays, cards, tables, forms, and feedback states share one visual system.
+
+#### Scenario: New app page needs controls
+
+- **WHEN** a new app page needs buttons, inputs, dialogs, drawers, tabs, cards, tables, badges, progress, or empty states
+- **THEN** it SHALL use components from `@/ui`
+- **AND** it SHALL NOT create page-local replacements for those primitives
+
+#### Scenario: Component needs brand emphasis
+
+- **WHEN** a component needs a primary action, selected state, or focus ring
+- **THEN** it SHALL use TrueGrowth orange tokens
+- **AND** it SHALL NOT introduce blue primary actions or hard-coded primary colors
+
+### Requirement: AI Image Page SHALL Be The Golden UI Reference
+
+The AI image-generation page at `/image` SHALL be the concrete golden UI reference for TrueGrowth page layout, component density, media/result presentation, hover actions, loading states, failed states, popovers, dialogs, and light/dark styling.
+
+#### Scenario: Contributor designs or refactors a page
+
+- **WHEN** a contributor designs or refactors a navigation-entered page, dialog, drawer, or popover
+- **THEN** they SHALL compare the result against the `/image` golden page standard in `docs/TRUEGROWTH_GOLDEN_IMAGE_PAGE_UI.md`
+- **AND** they SHALL preserve the same orange accent, quiet surfaces, compact controls, single-surface inputs, and browser-verified polish
+
+#### Scenario: Contributor changes a generator page
+
+- **WHEN** a contributor changes a generator page such as AI video, digital human, music, image editing, or batch creation
+- **THEN** the page SHALL use the `/image` split layout pattern with a full-height left creation panel and right task/result feed
+- **AND** generated media SHALL be grouped by batch, displayed at its real ratio, and expose secondary actions through hover or compact menus
+
+#### Scenario: Contributor changes a dialog or popover
+
+- **WHEN** a contributor changes settings, model, parameter, knowledge, picker, or action dialogs
+- **THEN** the surface SHALL use the same radius, light/dark surfaces, orange focus states, and single-layer input treatment as `/image`
+- **AND** it SHALL NOT introduce stacked white input wrappers or unrelated component-library styling
+
+### Requirement: New App UI SHALL Use Lucide Icons
+
+New app UI SHALL use `lucide-react` for icons so icon size, stroke, and visual weight remain consistent.
+
+#### Scenario: New action button needs an icon
+
+- **WHEN** a new action button, nav item, toolbar item, or empty state needs an icon
+- **THEN** it SHALL import an icon from `lucide-react`
+- **AND** it SHALL NOT import from `tdesign-icons-react`
+
+### Requirement: TDesign SHALL Be Legacy Compatibility Only
+
+TDesign SHALL remain only as a temporary compatibility boundary for old Drawnix/opentu surfaces while visible UI is migrated to the TrueGrowth UI system.
+
+#### Scenario: New app code is added
+
+- **WHEN** a new app page or component is added under `apps/web/src`
+- **THEN** it SHALL NOT import `tdesign-react`
+- **AND** it SHALL use `@/ui` primitives instead

openspec/changes/refactor-truegrowth-ui-system/specs/workbench-shell/spec.md

@@ -0,0 +1,45 @@
+## ADDED Requirements
+
+### Requirement: Workbench Pages SHALL Follow The Image Golden Page Layout
+
+Workbench pages SHALL use the approved `/image` AI 图片生成 page as the concrete layout and polish reference: wide left navigation, no global topbar, full-height page content, white or near-black operation surfaces, soft gray or near-black result surfaces, compact grids, thin borders, soft shadows, and orange primary actions.
+
+#### Scenario: Page has a primary workflow
+
+- **WHEN** a workbench page presents a primary workflow
+- **THEN** it SHALL place the workflow in structured sections or cards using TrueGrowth UI tokens
+- **AND** it SHALL keep forms dense, labeled, and readable
+
+#### Scenario: Page is a generator workflow
+
+- **WHEN** the page creates images, videos, digital-human outputs, audio, clips, or other generated media
+- **THEN** it SHALL follow the `/image` pattern of left configuration panel plus right result/task feed
+- **AND** it SHALL group results by batch with full-ratio media rails and compact batch actions
+
+#### Scenario: Page is a library/status/settings workflow
+
+- **WHEN** the page manages assets, tasks, publishing, models, settings, or workflow history
+- **THEN** it SHALL adapt the `/image` rhythm into media-first grids, dense status lists, or grouped configuration panels
+- **AND** it SHALL avoid nested cards, always-visible button clutter, and page-local basic controls
+
+#### Scenario: Page supports dark mode
+
+- **WHEN** the app is in dark mode
+- **THEN** the page SHALL use near-black surfaces, visible borders, and orange focus/active states
+- **AND** controls SHALL remain readable without overlapping or wrapping button text
+
+#### Scenario: Page is visually completed
+
+- **WHEN** a page migration is claimed complete
+- **THEN** the route SHALL have browser screenshot evidence from `http://127.0.0.1:7200/...`
+- **AND** the verification SHALL include no framework overlay, no relevant console errors, and at least one primary interaction check
+
+### Requirement: Page Templates SHALL Guide New Workbench Surfaces
+
+Workbench implementation SHALL start from documented page templates for list, form, generator, media-library, status, asset, task, and detail surfaces.
+
+#### Scenario: Codex adds a new page
+
+- **WHEN** Codex adds a new workbench page
+- **THEN** it SHALL follow the closest page template
+- **AND** it SHALL use `PageShell`, `Section`, `FormGrid`, and `Card` from `@/ui` where applicable