diff --git a/docs/UI_UX_PLATFORM_CORE_MIGRATION_ROADMAP.md b/docs/UI_UX_PLATFORM_CORE_MIGRATION_ROADMAP.md index 3154186..c68b6be 100644 --- a/docs/UI_UX_PLATFORM_CORE_MIGRATION_ROADMAP.md +++ b/docs/UI_UX_PLATFORM_CORE_MIGRATION_ROADMAP.md @@ -1,11 +1,11 @@ # UI/UX Platform Core Migration Roadmap -Live source of truth for migrating `learning_ai_invt_trdg` UI/UX and platform clients onto the shared ByteLyst common platform at `/Users/saravana/BytelystAI/learning_ai/learning_ai_common_plat`. +Live source of truth for migrating `learning_ai_invt_trdg` UI/UX and platform clients onto the shared ByteLyst common platform at `/opt/bytelyst/learning_ai_common_plat`. ## Current Baseline -- Product repo: `/Users/saravana/BytelystAI/learning_ai/learning_ai_invt_trdg` -- Common platform repo: `/Users/saravana/BytelystAI/learning_ai/learning_ai_common_plat` +- Product repo: `/opt/bytelyst/trading/learning_ai_invt_trdg` +- Common platform repo: `/opt/bytelyst/learning_ai_common_plat` - Local package default: `@bytelyst/*` resolves from the sibling `learning_ai_common_plat` checkout by default via `.pnpmfile.cjs`; set `BYTELYST_PACKAGE_SOURCE=gitea` only when registry resolution is explicitly required. - Current common-platform usage: `@bytelyst/api-client`, `@bytelyst/design-tokens`, `@bytelyst/errors`, `@bytelyst/kill-switch-client`, `@bytelyst/react-auth`, `@bytelyst/react-native-platform-sdk`, `@bytelyst/telemetry-client`, `@bytelyst/ui` - UI adapter in code: `web/src/components/ui/Primitives.tsx` imports from `@bytelyst/ui`, re-exports common primitives, and owns product status-to-tone mapping. @@ -84,6 +84,8 @@ Note: common platform had a pre-existing local modification in `packages/ui/src/ | [x] | 11. Remaining raw-control migration | product | Migrated remaining production raw controls in portfolio, screener, simple trade plan, chat, settings, and entries surfaces to adapter primitives while preserving trading workflow behavior. | Passed: `pnpm --filter @bytelyst/trading-web exec vitest run src/tabs/SettingsTab.dom.test.tsx src/tabs/EntriesTab.dom.test.tsx`; `pnpm --filter @bytelyst/trading-web typecheck`; `pnpm run audit:ui`; `git diff --check`. | `324e34d`, `7f5f125` | Audit raw interactive controls outside approved primitives reduced to 0. `EntriesTab.tsx` line endings were normalized to satisfy `git diff --check`. | | [x] | 12. Legacy global cleanup and strict audit | product | Removed unused global `.badge` CSS, removed legacy `SymbolCard` badge selectors, preserved adapter `Badge`/`ProductStatusBadge` usage, tightened legacy-class audit so product token names such as `--bl-surface-card` are not false positives, tokenized reset-password auth surface colors, eliminated hardcoded color literals from `App.css` and `AlertFeed.css`, tokenized `SettingsTab` role/status colors, added shared surface/text aliases to migrate `Login`, `ProductAccessibilityGate`, `LivePulseTicker`, and `AdminTab` off raw hex/rgba operational surface colors, typed the remaining simple form/chat/positions visual-builder change handlers so trivial implicit-`any` errors no longer block `tsc`, reconciled `web/src/components/ui/Primitives.tsx` to the actual linked `@bytelyst/ui` export surface while keeping product-only variants and control sizing local to the adapter, converted `OverviewTab` status/warning/consumer-card color debt onto existing theme variables and `color-mix(...)` surfaces, migrated `SymbolCard.css` surface/status styling from raw hex/rgba values onto shared theme variables, moved `TradeProfileManager` rule/summary/status palette literals onto shared CSS variables and `color-mix(...)` accents, tokenized `HomeView` shell/error/earnings status plus `Header`/`RightPanel`/`Sidebar` shell status literals, migrated shared `PriceChart` shell, tooltip, axis, empty-state, and up/down color usage onto shared theme variables, converted the remaining `HomeView` indicator-chart literals onto existing info/warning/emphasis/border tokens so the landing analytics no longer depends on raw hex palette values, migrated `BacktestResultsDashboard` grid/tick/reference/series chart colors to the shared attention/success/warning/text/border tokens, tokenized `CodeStrategyEditor` trade-log header plus buy/sell and P&L accents onto shared quiet/success/danger tokens, migrated `VisualRuleBuilder` drag shadow/handles/labels plus BUY/SELL chip surfaces onto the shared card/text/success/danger token palette, tokenized `BacktestTab` disabled/access messaging plus `ScreenerView` percentage gain/loss coloring onto shared danger/faint/success tokens, replaced repeated `MarketplaceTab`/`HistoryTab` neon attention, gain/loss, and focus-ring literals with shared warning/success/danger/focus tokens, converted the remaining `ConfigTab` hero/loading/backtest-action/footer surfaces away from hardcoded dark backgrounds and neon accents onto shared card/overlay/info/success tokens, removed the bulk of `MyStrategiesTab` surface/status/market-feed literals by moving the strategy fleet cards, overview hero, activity panels, and volatility rails to shared card/border/text/success/danger/info tokens, and finished the last residual files by tokenizing `PositionsTab`, `SettingsTab`, `MembershipTab`, `EntriesTab`, and `TierPolicy`. The audit now treats `web/src/index.css` as intentional theme-token source data instead of product debt. | Passed: `pnpm run audit:ui`; `pnpm --filter @bytelyst/trading-web typecheck`; `pnpm --filter @bytelyst/trading-web lint`; `pnpm --filter @bytelyst/trading-web build`; `TMPDIR="$PWD/.tmp/vitest" pnpm --filter @bytelyst/trading-web exec vitest run src/components/Login.dom.test.tsx src/App.dom.test.tsx src/components/ComponentsSmoke.test.ts src/tabs/SettingsTab.dom.test.tsx src/tabs/EntriesTab.dom.test.tsx`; `TMPDIR="$PWD/.tmp/vitest" pnpm --filter @bytelyst/trading-web exec vitest run src/tabs/OverviewTab.dom.test.tsx src/tabs/OverviewTab.test.ts src/App.dom.test.tsx`; `TMPDIR="$PWD/.tmp/vitest" pnpm --filter @bytelyst/trading-web exec vitest run src/components/ComponentsSmoke.test.ts src/tabs/TabSuite.test.ts`; `TMPDIR="$PWD/.tmp/vitest" pnpm --filter @bytelyst/trading-web exec vitest run src/components/TradeProfileManager.test.ts src/components/TradeProfileManager.dom.test.tsx`; `TMPDIR="$PWD/.tmp/vitest" pnpm --filter @bytelyst/trading-web exec vitest run src/views/HomeView.dom.test.tsx src/components/layout/Header.dom.test.tsx src/components/layout/AppShell.dom.test.tsx`; `TMPDIR="$PWD/.tmp/vitest" pnpm --filter @bytelyst/trading-web exec vitest run src/components/PriceChart.dom.test.tsx src/components/ComponentsSmoke.test.ts`; `TMPDIR="$PWD/.tmp/vitest" pnpm --filter @bytelyst/trading-web exec vitest run src/components/ComponentsSmoke.test.ts`; `TMPDIR="$PWD/.tmp/vitest" pnpm --filter @bytelyst/trading-web exec vitest run src/components/strategy/CodeStrategyEditor.dom.test.tsx`; `TMPDIR="$PWD/.tmp/vitest" pnpm --filter @bytelyst/trading-web exec vitest run src/components/strategy/VisualRuleBuilder.dom.test.tsx`; `TMPDIR="$PWD/.tmp/vitest" pnpm --filter @bytelyst/trading-web exec vitest run src/views/ScreenerView.dom.test.tsx src/components/ComponentsSmoke.test.ts`; `TMPDIR="$PWD/.tmp/vitest" pnpm --filter @bytelyst/trading-web exec vitest run src/tabs/TabSuite.test.ts src/components/ComponentsSmoke.test.ts`; `TMPDIR="$PWD/.tmp/vitest" pnpm --filter @bytelyst/trading-web exec vitest run src/tabs/SettingsTab.dom.test.tsx src/tabs/TabSuite.test.ts src/components/ComponentsSmoke.test.ts`; `git diff --check`; `BYTELYST_PACKAGE_SOURCE=common-plat pnpm install -r --no-frozen-lockfile --offline`; `pnpm --filter @bytelyst/ui build` (in `/opt/bytelyst/learning_ai_common_plat`). Earlier passed in this phase: `pnpm --filter @bytelyst/trading-web test`; `pnpm --filter @bytelyst/trading-web exec vitest run src/components/ResetPassword.dom.test.tsx`; `TMPDIR="$PWD/.tmp/vitest" pnpm --filter @bytelyst/trading-web exec vitest run src/App.dom.test.tsx src/views/HomeView.dom.test.tsx src/components/AlertFeed.dom.test.tsx src/components/ComponentsSmoke.test.ts src/tabs/OverviewTab.test.ts`; `TMPDIR="$PWD/.tmp/vitest" pnpm --filter @bytelyst/trading-web exec vitest run src/tabs/SettingsTab.dom.test.tsx`. | `5f38ada`, `e4c4c60`, `6091f24`, `8f707e0`, `7375ad6`, `eef63cb`, `35fbe87`, `a230679`, `902523d`, `931a3cd`, `4802f02`, `1b9efca`, `de040ea`, `9a0dfe6`, `b5f55e5`, `90ba1d5`, `8d84c3b`, `b14d333`, `cd2f38d`, `5fc123e`, `5453bb4` | Audit now reports 0 raw production controls, 0 legacy global surface classes, 0 direct common-UI imports outside the adapter, and 0 hardcoded color literals. `web/src/index.css` token definitions are intentionally excluded from the hardcoded-color audit because they are the theme-source baseline, not product drift. The adapter/common-package API divergence blocker is resolved for the current common-platform checkout by narrowing the product adapter to the real shared export surface and owning product-only variants locally. Strict audit can now be enabled from a clean baseline. | +| [x] | 13. Strict baseline enforcement | product | Added `pnpm audit:ui:strict` to the root `pnpm verify` workflow and updated README verification guidance so the clean UI migration baseline is enforced in standard repo verification instead of remaining advisory-only. | Passed: `sh -n scripts/verify.sh`; `BYTELYST_PACKAGE_SOURCE=common-plat pnpm --filter @bytelyst/trading-web typecheck`; `BYTELYST_PACKAGE_SOURCE=common-plat pnpm run audit:ui`; `BYTELYST_PACKAGE_SOURCE=common-plat pnpm run audit:ui:strict`; `git diff --check`. | `c6a05d5eb04989f4226d50f0dd7be490a0489dc1` | Strict audit is now part of the default root verification path. This slice changed only repo verification/docs; no trading-domain behavior changed. | + ## Remaining Work - **Keep strict audit on the clean baseline**: With the current zero-debt audit, future slices should keep `pnpm run audit:ui` and `pnpm run audit:ui:strict` green unless new debt is intentionally introduced and documented. @@ -106,12 +108,12 @@ git fetch origin git pull --rebase origin main ``` -Then read this file end-to-end and continue from the clean post-phase-12 baseline: +Then read this file end-to-end and continue from the enforced post-phase-13 baseline: -- **Current phase**: 12 is complete. New work should start from the zero-debt baseline rather than reopening legacy drift. +- **Current phase**: 13 is complete. New work should start from the enforced zero-debt baseline rather than reopening legacy drift. - **Current audit baseline**: 0 direct `@bytelyst/ui` imports outside the adapter, 0 raw production controls outside approved primitives, 0 legacy global surface classes, and 0 hardcoded color literals in product code. - **Audit note**: `web/src/index.css` token-definition literals are intentionally excluded from the hardcoded-color audit because they are the theme-source baseline. -- **Next focus**: keep future UI slices on the strict baseline, prefer adapter/common primitives first, and only introduce new product-local styling when it encodes trading semantics. +- **Next focus**: keep future UI slices on the enforced strict baseline, prefer adapter/common primitives first, and only introduce new product-local styling when it encodes trading semantics. - **Verification after each slice**: run `pnpm run audit:ui`, targeted DOM tests for touched files, `pnpm --filter @bytelyst/trading-web typecheck`, and `git diff --check`; add `pnpm --filter @bytelyst/trading-web lint`, targeted Vitest slices, and `pnpm --filter @bytelyst/trading-web build` before major commits or adapter-related changes. - **Roadmap update requirement**: after every implementation commit, update the roadmap row/checkboxes with the new status, final audit counts, exact verification commands, commit hash, and any deferrals or environment blockers. - **Commit/push rule**: keep commits small and scoped, push each completed slice, then update this document in a follow-up docs commit so the next agent can resume without reconstructing context.