From 0c982de7e6a919dc58faee379fea046e0a8b59fc Mon Sep 17 00:00:00 2001 From: saravanakumardb1 Date: Sat, 23 May 2026 01:55:36 -0700 Subject: [PATCH] feat(web/ui8): remove legacy global classes + tighten audit regex + lock CI gate MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit UI8 closes the migration cycle started by UI0. The four legacy global classes (.surface-card, .surface-muted, .badge, .input-shell) are removed from web/src/app/globals.css and the CI ratchet now enforces zero new occurrences across three of the four drift categories. Changes: 1. Audit regex precision (scripts/ui-drift-audit.sh, scripts/ui-drift-ratchet.sh) The previous pattern 'className="[^"]*(badge|surface-card|surface-muted|input-shell)' matched the literal token anywhere inside className, which caused 21 false positives against Tailwind arbitrary values like 'bg-[color:var(--nl-surface-muted)]' where the legacy name appears inside a 'var(--nl-...)' reference. New pattern requires the legacy class to be a whole class token — either at the start of className, or preceded by a space, and followed by a space or closing quote. Result: 21 false positives eliminated; the ratchet now reports an honest 0 for the legacy category. 2. globals.css cleanup (web/src/app/globals.css) Removed .surface-card, .surface-muted, .badge, .input-shell rules. Only truly global utilities remain (typography, focus-visible, sr-only, skip-link, motion preferences, layout grids). A header comment documents that re-introductions should be solved at the call-site with a primitive, not by restoring the global rule. 3. Ratchet baseline (scripts/ui-drift-baseline.json) Final counts after UI5–UI8 across the session: raw interactive controls 14 (was 38 at start) legacy global surface classes 0 (was 92 at start) hardcoded color literals 0 (no change, was already 0) direct @bytelyst/ui imports 0 (no change, was already 0) The 14 remaining raw controls are intentional and tracked: NoteEditor toolbar buttons (10) ArtifactPanel hidden file input (1) search/page radio inputs (2) NoteVersionsPanel disclosure button (1) 4. CI gate (.github/workflows/ci.yml release-guards job) Documented that the ratchet is the canonical gate post-UI8: because legacy/colors/imports baselines are 0, any new occurrence in those three categories now fails CI. The strict-audit script is kept as a local diagnostic tool but not wired as a gate (would fail on the 14 intentional raw controls). 5. Roadmap (docs/UI_UX_PLATFORM_CORE_ROADMAP.md) Marked UI5, UI6, UI7, UI8 all complete with per-phase commit hashes and explicit deliverables. Cumulative migration impact (from initial baseline): raw interactive controls 38 → 14 (-24, -63%) legacy global surface classes 92 → 0 (-92, -100%) Verified: - pnpm run verify: backend 380/380, web 96/96, mobile 97/97 - bash scripts/ui-drift-ratchet.sh: all four categories at baseline - bash scripts/ui-drift-audit.sh: only "Raw interactive controls" category has matches (intentional, tracked above) - Live Docker stack at http://localhost:3050 still serves 200, backend health 200 --- .github/workflows/ci.yml | 10 ++++- docs/UI_UX_PLATFORM_CORE_ROADMAP.md | 57 +++++++++++++++-------------- scripts/ui-drift-audit.sh | 7 +++- scripts/ui-drift-baseline.json | 4 +- scripts/ui-drift-ratchet.sh | 4 +- web/next-env.d.ts | 2 +- web/src/app/globals.css | 41 +++++---------------- 7 files changed, 60 insertions(+), 65 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index e3e2fd1..a36bc0b 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -35,9 +35,17 @@ jobs: run: COMMON_PLAT="$GITHUB_WORKSPACE/learning_ai_common_plat" bash scripts/release-guard-audit.sh - name: Run UI drift ratchet (one-way gate vs scripts/ui-drift-baseline.json) + # As of UI8 the baseline for legacy global classes, hardcoded + # color literals, and direct @bytelyst/ui imports outside the + # adapter is ZERO. Any new occurrence in any of those three + # categories fails the ratchet. The fourth category (raw + # interactive controls) is held at its intentional minimum + # (NoteEditor toolbar + hidden file input + search radios). run: bash scripts/ui-drift-ratchet.sh - - name: Run UI drift audit (report mode, informational) + - name: Run UI drift audit (report mode, prints current matches) + # Informational only — does not gate. The ratchet step above + # is the actual gate. run: bash scripts/ui-drift-audit.sh || true backend: diff --git a/docs/UI_UX_PLATFORM_CORE_ROADMAP.md b/docs/UI_UX_PLATFORM_CORE_ROADMAP.md index ff0314a..8c8d315 100644 --- a/docs/UI_UX_PLATFORM_CORE_ROADMAP.md +++ b/docs/UI_UX_PLATFORM_CORE_ROADMAP.md @@ -167,40 +167,43 @@ The review surface is the highest-value pilot because it is operator-critical an - [x] Replace global sidebar/mobile overlay CSS with common shell primitives. Commit: `db9b4557d840b31e8a66ff0d85c3d80f1336b19a`. Verification: `pnpm --filter @notelett/web run typecheck`, `pnpm --filter @notelett/web run test`, `pnpm --filter @notelett/web exec playwright test e2e/release-flows.spec.ts --reporter=list --workers=1`, `pnpm --filter @notelett/web exec playwright test e2e/reviews-visual.spec.ts --reporter=list --workers=1`, targeted `rg` audit confirmed old shell/sidebar/toggle/overlay selectors were removed from `web/src/app/globals.css` and shell components, and `git diff --check` passed. - [ ] Verify mobile sidebar behavior, keyboard focus order, and no horizontal overflow. -### Phase UI5 — Forms, Modals, And Settings +### Phase UI5 — Forms, Modals, And Settings ✅ Complete (May 23, 2026) -- [ ] Migrate login/register/forgot-password fields to common `Input`, `Label`, `Button`, and `Card`. -- [ ] Migrate settings forms to `Field`, `Input`, `Textarea`, `Select`, `Switch`, and `ConfirmDialog`. -- [ ] Migrate create/link/share modals to common `Modal`, form primitives, and action bars. -- [ ] Verify auth/settings/share tests and accessibility labels. +- [x] Migrate login/register/forgot-password fields to common `Input`, `Button`, `Card` + `AlertBanner` for messages. Commits `9c65899`, `30a30ce`. +- [x] Migrate settings page (profile, appearance, change password, danger zone, MCP, API tokens, offline queue, feedback) to `Card`, `Input`, `Select`, `Textarea`, `AlertBanner`. Commit `30a30ce`. +- [x] Migrate CreateNoteModal, LinkNoteModal, ShareDialog, CreateWorkspaceModal, PromptTemplateEditor to common form primitives. Commits `30a30ce`, `2408f43`. +- [x] Migrate remaining form-bearing components (NoteEditor title, ArtifactPanel, CommandPalette, TaskReviewPanel, SurveyBanner, BroadcastBanner). Commits `2408f43`, `3288e28`. +- [x] Adapter improvements: Input and Textarea use forwardRef so callers can attach refs. Commit `2408f43`. +- [x] Verify auth/settings/share tests + Playwright release-flows: 96/96 web vitest + 43/43 Playwright. -### Phase UI6 — Search, Workspaces, Dashboard +### Phase UI6 — Search, Workspaces, Dashboard ✅ Complete (May 23, 2026) -- [ ] Replace saved-search/workspace/dashboard cards with common `Panel`, `DataList`, `StatCard`, `Badge`, and `EmptyState`. -- [ ] Replace filter chips with common `StatusBadge` or `FilterChip`. -- [ ] Move repeated two-column operational layout to a reusable common or NoteLett adapter primitive. -- [ ] Verify web tests and responsive visual checks. +- [x] Dashboard page — welcome card, saved-views, quick-links, operator workflows, recent notes all use `Card` + `Badge`. Status badges use `warning|success` semantic variants. Commit `8d484c3`. +- [x] Workspaces list page — saved-views aside, filter section, each workspace article, note rows use `Card` + `Input` + `Badge`. Commit `8d484c3`. +- [x] Search page — saved-searches aside, results pane, filter chips, search input use `Card` + `Input` + `Badge` + `Button`. Commit `8d484c3`. +- [x] Chat page — workspace `