bytelyst/learning_ai_invt_trdg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(ui): refresh migration roadmap status

Browse Source
This commit is contained in:
Saravana Achu Mac 2026-05-06 18:12:27 -07:00
parent 7f5f12509a
commit 45e389fd2a
1 changed files with 9 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
docs/UI_UX_PLATFORM_CORE_MIGRATION_ROADMAP.md
View File

@ -10,7 +10,7 @@ Live source of truth for migrating `learning_ai_invt_trdg` UI/UX and platform cl
- 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.
- Design token foundation in code: `web/src/index.css` imports `@bytelyst/design-tokens/generated/tokens.css` and defines product `--bl-*` aliases.
- Remaining UI duplicates to migrate: raw HTML controls in portfolio/screener/simple trade plan/chat surfaces, legacy global badge/surface CSS, hardcoded color literals, and local status/surface/list/table patterns where still product-local.
- Remaining UI duplicates to migrate: legacy global badge/surface CSS, hardcoded color literals, and local status/surface/list/table patterns where still product-local.
- Common UI target: `@bytelyst/ui` through the product adapter only; direct `@bytelyst/ui` imports outside the adapter remain disallowed.
- Design token target: `@bytelyst/design-tokens` with product aliases to `--bl-*`; chart/domain colors may remain product-owned when they encode trading semantics.
@ -45,11 +45,11 @@ Reviewed against current product code on 2026-05-06:
- `web/package.json` includes `@bytelyst/ui` and `@bytelyst/design-tokens`.
- `web/src/components/ui/Primitives.tsx` is present and is the only direct `@bytelyst/ui` import found in `web/src`.
- Product code currently imports adapter primitives in `Login`, `ResetPassword`, `PositionsTab`, `MyStrategiesTab`, and `VisualRuleBuilder`.
- Product code currently imports adapter primitives in `Login`, `ResetPassword`, `PositionsTab`, `MyStrategiesTab`, `VisualRuleBuilder`, `PortfolioView`, `ScreenerView`, `SimpleView`, `ChatControl`, `SettingsTab`, and `EntriesTab`.
- `web/src/index.css` imports shared generated design tokens and defines `--bl-*` aliases for product surfaces/status/focus/radius.
- Remaining raw-control/product-local areas observed include `views/PortfolioView.tsx`, `views/ScreenerView.tsx`, `views/SimpleView.tsx`, and `components/ChatControl.tsx`.
- Production raw-control audit now reports zero findings outside approved UI primitives.
- Remaining legacy CSS/status areas observed include `web/src/App.css`, `web/src/components/SymbolCard.css`, and `web/src/components/SymbolCard.tsx`.
- `scripts/ui-drift-audit.sh` currently depends on `rg`. In an environment where `rg` is missing, the report can show false-zero counts while printing `rg: command not found`; strict-audit verification is not trustworthy until the script fails fast or provides a portable fallback.
- `scripts/ui-drift-audit.sh` uses a portable Python implementation so missing `rg` cannot produce false-zero counts.
## Common UI Gap Closure Decision
@ -80,17 +80,16 @@ Note: common platform had a pre-existing local modification in `packages/ui/src/
| [x] | 7. Forms, modals, and settings migration | product | Migrated auth reset/sign-in/sign-up controls to adapter Button/Input primitives while preserving labels, placeholders, button names, and provider-error behavior. | Passed: `pnpm --filter @bytelyst/trading-web exec vitest run src/components/Login.dom.test.tsx src/components/ResetPassword.dom.test.tsx`; `pnpm --filter @bytelyst/trading-web typecheck`; `pnpm run audit:ui`; `git diff --check`. | `6511326a3e5de3e6d2cf4f5ec29c30c3ea98cfe7` | Audit raw controls reduced from 32 to 25. Settings/share/create/edit form debt remains for dashboard/workspace and cleanup phases. |
| [x] | 8. Dashboard, search, and workspace migration | product | Migrated My Strategies dashboard card action controls, diagnostic toggle, engine toggle, wizard back control, and empty-state/header CTAs to adapter Button/IconButton primitives. | Passed: `pnpm --filter @bytelyst/trading-web exec vitest run src/tabs/MyStrategiesTab.dom.test.tsx`; `pnpm --filter @bytelyst/trading-web typecheck`; `pnpm run audit:ui`; `git diff --check`. | `1ee57d5aeb548aefd505f53fa7d08d47cc8f4db7` | Audit raw controls reduced from 25 to 17. Dense operational layout and existing card composition preserved. |
| [x] | 9. Advanced product-specific surfaces | product | Migrated Visual Strategy Builder controls to adapter Select/Input/Button/IconButton primitives while keeping dnd-kit composition and strategy rule logic product-owned. | Passed: `pnpm --filter @bytelyst/trading-web exec vitest run src/components/strategy/VisualRuleBuilder.dom.test.tsx`; `pnpm --filter @bytelyst/trading-web typecheck`; `pnpm run audit:ui`; `git diff --check`. | `bb4efc2b0d5f8e2ebbd7487b5731e0e6446ec4fb` | Audit raw controls reduced from 17 to 13. Charts, rule semantics, and strategy execution remain product-owned. |
| [ ] | 10. Audit tooling hardening | product | Make `scripts/ui-drift-audit.sh` fail fast when `rg` is unavailable, document the prerequisite, or add a portable fallback so report/strict modes cannot produce false-zero counts. | `pnpm run audit:ui`; intentionally test missing-`rg` behavior; `git diff --check` | Pending | Current shell run printed `rg: command not found` and reported zero findings, so audit counts in that environment are invalid. |
| [ ] | 11. Remaining raw-control migration | product | Migrate remaining raw HTML controls in portfolio/screener/simple trade plan/chat surfaces to adapter primitives where behavior and accessibility can be preserved. | Targeted DOM tests for touched views; `pnpm --filter @bytelyst/trading-web typecheck`; `pnpm run audit:ui`; `git diff --check` | Pending | Keep test mocks out of production counts; keep trading workflow logic local. |
| [ ] | 12. Legacy global cleanup and strict audit | product | Remove or greatly reduce old global classes and hardcoded literals; replace generic badge/status/surface CSS with adapter/common primitives or token aliases; enable strict audit only after accepted debt is cleared. | `pnpm run audit:ui:strict`; `pnpm verify`; `pnpm lint`; `git diff --check` | Pending | Strict mode intentionally remains disabled until audit tooling is reliable and accepted debt is cleared. |
| [x] | 10. Audit tooling hardening | product | Replaced brittle `rg`-based shell counting with a portable Python audit that excludes approved UI/test surfaces and reports non-zero raw controls reliably. | Passed: `pnpm run audit:ui`; `pnpm --filter @bytelyst/trading-web typecheck`; `git diff --check`. | `9ea72f7` | Audit now reports 0 direct `@bytelyst/ui` imports outside the adapter and no false-zero dependency on local `rg`. |
| [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`. |
| [ ] | 12. Legacy global cleanup and strict audit | product | Remove or greatly reduce old global classes and hardcoded literals; replace generic badge/status/surface CSS with adapter/common primitives or token aliases; enable strict audit only after accepted debt is cleared. | `pnpm run audit:ui:strict`; `pnpm verify`; `pnpm lint`; `git diff --check` | Pending | Current audit baseline: 23 legacy global surface classes and 550 hardcoded color literals. Chart palettes and trading semantic colors remain product-owned unless extracted into product token aliases. |
## Remaining Work
- **Fix audit reliability**: Update `scripts/ui-drift-audit.sh` so missing `rg` exits non-zero instead of reporting zero findings.
- **Migrate remaining production raw controls**: Prioritize `PortfolioView`, `ScreenerView`, `SimpleView`, and `ChatControl`.
- **Clean legacy global CSS**: Reduce or replace `.badge`, `*-badge`, `surface-*`, and older dark-surface classes in `App.css` and `SymbolCard.css`.
- **Reduce hardcoded colors**: Move reusable surface/status colors to token aliases; keep chart palette and trading semantic colors product-owned when appropriate.
- **Expand adapter usage**: Continue routing product code through `web/src/components/ui/Primitives.tsx`; do not import `@bytelyst/ui` directly outside the adapter.
- **Standardize local status/list/table patterns**: Prefer adapter/common primitives for product-agnostic surfaces while keeping trading workflows product-owned.
- **Strict audit decision**: Enable `pnpm run audit:ui:strict` only after accepted legacy CSS/color debt is cleared or explicitly allowlisted.
- **Verify after each slice**: Run targeted DOM tests for touched views, web typecheck, UI audit, and `git diff --check`.
## Running Notes