IMPLEMENTATION_PLAN.md

IMPLEMENTATION_PLAN.md — BRIDGE Platform (Modules E & S)

PHASE 2 deliverable. Executed autonomously per the brief's guardrails ("do not pause for confirmation between phases").

0. Strategy

Converge both sibling apps into ONE platform build (they share ~95 % of code and deploy to the same HF Space sitcod3/BRIDGE_Modul-S_prod):

• Base = E repo (GREENTHEME-test) — superset: ThemeContext engine, tests, Skeleton, Pricing, Stripe.
• Module S's real pages are ported into the platform under src/modules/s/** (design preserved 100 %: true-indigo palette, slate→black gradient, original UX).
• Module E's pages stay in src/pages/** and mount at /modules/e/**.
• Platform shell (Sidebar with MODULES section, per-module nav + palette, TopBar) adapts per module via the registry.
• The identical platform build is replicated into the S repo so either pipeline produces the same Space.

1. File-by-file change list

NEW

File	Purpose
src/modules/registry.tsx	ModuleId, MODULES registry: id, label, wordmark, accent config, tagline, nav items, icon
src/modules/LaunchContext.tsx	Launch sequencer: startLaunch(moduleId) bumps seq (re-seed), controlled exit choreography, useLaunch()
src/modules/ModuleLaunchAnimation.tsx	Random-reassembly engine (§3)
src/modules/ModuleShell.tsx	Route shell /modules/:id: data-module attr + theme override, platform chrome, launch guard → animation → <Outlet/>
src/modules/ModuleHub.tsx	/ platform launcher: two real-primitive module cards + Launch buttons
src/modules/PlatformSidebar.tsx	MODULES section (2 direct-launch buttons) + active module nav
src/modules/PlatformTopBar.tsx	TopBar shell per module (module-aware API-key badge)
src/modules/s/components/{StatCard,AnimatedLogo,GlassCard}.tsx	S variants (original implementations)
src/modules/s/pages/*.tsx	11 ported S pages (imports re-pointed; StatCard → S variant)

MODIFIED

File	Change
src/App.tsx	New route table (§2), LaunchProvider, legacy redirects
src/context/ThemeContext.tsx	Add PROD_THEME (Module S palette); default stays mint
src/index.css	[data-module="s"] palette var overrides + .bg-module-s gradient + reduced-motion safeguard
src/components/Logo.tsx	Wordmark ModulE→ModuleE, label prop
src/pages/Dashboard.tsx, src/pages/CampaignDetail.tsx	3 absolute links → /modules/e/…
metadata.json	name BRIDGE Modules + description migrated
server.ts	add GET /api/health
README.md	platform note

Tests (new)

• src/modules/ModuleLaunchAnimation.test.tsx — primitives render; reduced-motion instant reveal; re-seed between launches.
• src/modules/routing.test.tsx — /modules/e + /modules/s index pages render in-shell; hub cards; direct menu routes; legacy /campaigns → /modules/e/campaigns.
• src/modules/naming.test.ts — zero Modul stragglers in registry; /modules/e + /modules/s routes.

2. Route table

/                          ModuleHub
/modules/e                 E Dashboard (index)
/modules/e/{campaigns,campaigns/:id,leads,email-accounts,warmup,inbox,webhooks,analytics,clients,pricing,settings}
/modules/s                 S Dashboard (index)
/modules/s/{campaigns,campaigns/:id,leads,email-accounts,warmup,inbox,webhooks,analytics,clients,settings}
Legacy: /campaigns, /leads, … → replace → /modules/e/<same>      * → /

3. Launch-animation architecture (PHASE 4)

<ModuleLaunchAnimation module mode="enter"|"exit" onComplete />

1. Real primitives only: 4× StatCard, chart frame (GlassCard + live Recharts AreaChart), list frame (5 lead rows + StatusBadge), StatusBadge strip, KPI chips, Skeleton shimmer bar — 12 pieces in a dashboard-like grid.
2. Random re-assembly: mulberry32(seed), seed = Date.now() ^ hash(moduleId) ^ launchSeq — re-seeded every launch. Per piece: off-canvas angle 0–360°, distance 240–720 px, rotation ±8–45°, scale 0.55–1.35, stagger i*55 ms + rand(40–90) ms, duration 2.4–3.2 s, easing cubic-bezier(0.22, 1, 0.36, 1).
3. 60 fps: transform + opacity only (motion/react WAAPI/rAF — no setTimeout chains); will-change during animation only; chart renders after first frame (double-rAF); pages React.lazy-preloaded on hub mount + menu hover.
4. Reduced motion: instant reveal, zero duration.
5. Exit choreography: startLaunch from inside a module → exiting → shell swaps to primitive grid with reverse-assembly (scatter outward, 0.85 s) → navigate → target enter animation. Direct URL/back bypass controlled exit.
6. Per-module theming: same engine; E = mint accents, S = indigo accents on slate gradient.

4. Menu integration (PHASE 5)

PlatformSidebar gains BRIDGE MODULES section: Module E (mint dot) → /modules/e, Module S (indigo dot) → /modules/s; active state per namespace; click = startLaunch + navigate (re-seeded animation); cross-launch visible in both modules; hub cards mirror the action.

5. Risk register & rollback

Risk	Mitigation	Rollback
Tailwind v4 remap collides with S indigo	[data-module="s"] scoped var overrides	remove scope block
E absolute links break	3 links rewritten + legacy redirects	revert pages
Route move breaks tests	component tests render directly; new routing tests	revert App.tsx
Space stale build	identical platform in both repos; 200 + bundle markers verified	HF UI rollback
Naming misses	naming.test + grep gate	—

6. Execution order

1. ThemeContext + index.css scopes → 2. registry/LaunchContext/animation/shell/hub/chrome → 3. port S pages → 4. App.tsx routes + links → 5. server/metadata/Logo → 6. tests + tsc + build + QA (PHASE 6) → 7. replicate to S repo, push both, verify live (PHASE 7).