Skip to content

Introduce React shell with incremental CLJS migration strategy#1427

Merged
rogefm merged 4 commits into
mainfrom
claude/sync-clean-rebuild
May 14, 2026
Merged

Introduce React shell with incremental CLJS migration strategy#1427
rogefm merged 4 commits into
mainfrom
claude/sync-clean-rebuild

Conversation

@rogefm
Copy link
Copy Markdown
Contributor

@rogefm rogefm commented May 4, 2026

📝 Description

This PR introduces webapp_v2, a React shell that wraps the existing ClojureScript frontend and serves as the foundation for an incremental, page-by-page migration.

The strategy is simple: React owns the global chrome (Sidebar, Command Palette, auth flows) while ClojureScript continues rendering all non-migrated pages inside a <ClojureApp> bridge component. Pages are cut over one route at a time — no big-bang rewrite, nothing breaks during the transition.

CLJS and React builds are now bundled together — one build, one deploy artifact.

🚀 Type of Change

  • 🐛 Bug fix (non-breaking change which fixes an issue)
  • ✨ New feature (non-breaking change which adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • 📚 Documentation update
  • 🎨 Style/UI update
  • ♻️ Code refactor
  • ⚡ Performance improvement
  • ✅ Test update
  • 🔧 Build configuration change
  • 🧹 Chore

📋 Changes Made

  • React shell (webapp_v2/): Vite + React 19 + Mantine v8 + Zustand + React Router v7
  • Sidebar: collapsible, persists state to localStorage; suppresses CLJS sidebar via react-shell flag to avoid double rendering
  • Command Palette (⌘K): search across connections, agents, and navigation; keyboard-navigable multi-page flow
  • Auth pages: Login (local + IDP detection), Register, Signup (IDP org setup), OAuth callbacks — token stored in localStorage.jwt-token, same key
    as the legacy app
  • Agents page: first fully migrated page — list view + create wizard; serves as the reference implementation for all future migrations
  • ClojureApp bridge: window.hoopSetRoute, window.hoopRemount, window.hoopDispatch contracts to keep React Router and CLJS Pushy router in sync
  • CLJS stylesheet isolation: /css/site.css is disabled on React-only routes and re-enabled when ClojureApp mounts — prevents Tailwind/Radix rules
    from leaking into React pages
  • Unified build: CLJS and React builds packaged together into the gateway's static assets
  • Docs: CONTEXT_MIGRATION.md, CLAUDE.md, COMPONENTS.md, MIGRATION_CHECKLIST.md, CLJS_PATTERNS.md added to guide ongoing migration work

🧪 Testing

Test Configuration:

  • Browser(s): Chrome, Firefox, Safari
  • OS: macOS

How to run locally:

# Terminal 1 — React shell                                
cd webapp_v2 && npm run dev   # http://localhost:5173                                                                                                    
 
# Terminal 2 — ClojureScript bundle                                                                                                                      
cd webapp && npm run dev       # http://localhost:8280    
                                                                                                                                                         
# Terminal 3 — Gateway
make run-dev                   # http://localhost:8009                                                                                                   
Open http://localhost:5173 — Vite proxies both the CLJS bundle and the API automatically. 

Tests performed:

  • Unit tests pass
  • Integration tests pass
  • Manual testing completed

Manual test checklist:

  • Login with local auth — verify redirect to saved URL after login
  • Login with OAuth — verify callback and redirect
  • Sidebar collapses and persists state across page refresh
  • ⌘K opens Command Palette; search returns results; keyboard navigation works
  • /agents renders the React page (not CLJS) with list and create flow
  • All other routes (e.g. /connections, /sessions) still load via ClojureScript with no double sidebar
  • Visiting a CLJS route then a React route does not leave Tailwind/Radix styles active on the React page
  • 401 from any API call redirects to /login and restores the original URL after re-login
  • Build artifact packages both CLJS and React correctly (make build-dev-webapp)

📸 Screenshots
https://www.tella.tv/video/my-video-exed

✅ Checklist

  • I have run make generate-openapi-docs to update the OpenAPI docs
  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • My changes generate no new warnings
  • New and existing unit tests pass locally with my changes
  • I have checked my code and corrected any misspellings

📄 Additional Notes

Attention infra/build reviewers: the most impactful change here is that the CLJS and React builds are now packaged together. The build pipeline, Docker images, and deploy process are all touched — please review those changes carefully and test the full build end-to-end.

Migration roadmap (next pages): Dashboard → Connections → Resources → Features (Access Control, Runbooks, Data Masking) → Settings. Each migration follows the same pattern: add a in Router.jsx above the /* catch-all, build the React page, then delete the corresponding panel from webapp/src/webapp/app.cljs.

The reference implementation for how a migrated page should look is webapp_v2/src/pages/Agents/.

UPDATE

  • I migrated all settings pages

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 4, 2026

Migration Safety Analysis

No database migrations were changed in this PR. Safe to deploy to sandbox.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 4, 2026

All contributors have signed the CLA ✍️ ✅
Posted by the CLA Assistant Lite bot.

@rogefm rogefm marked this pull request as ready for review May 4, 2026 19:45
@sandromello
Copy link
Copy Markdown
Contributor

✅ Build Completed with Success, Version=1427.0.0-6e7dcbf

@sandromello
Copy link
Copy Markdown
Contributor

✅ Build Completed with Success, Version=1427.0.0-1ef994e

@rogefm rogefm force-pushed the claude/sync-clean-rebuild branch from 1ef994e to f505277 Compare May 7, 2026 12:47
@rogefm rogefm removed the request for review from mtmr0x May 7, 2026 12:48
@sandromello
Copy link
Copy Markdown
Contributor

✅ Build Completed with Success, Version=1427.0.0-f505277

luanlorenzo

This comment was marked as resolved.

@rogefm rogefm force-pushed the claude/sync-clean-rebuild branch from f505277 to af094b8 Compare May 14, 2026 13:58
@sandromello
Copy link
Copy Markdown
Contributor

✅ Build Completed with Success, Version=1427.0.0-af094b8

rogefm added 4 commits May 14, 2026 12:03
Rebuilds the webapp_v2 React shell branch on top of current main,
replacing the previous branch which had unrelated history due to
the dev/main divergence.

Changes:
- webapp_v2/: new React shell (Vite, Mantine v8, Zustand, React Router v7)
  wrapping the legacy CLJS app; migrated pages (Agents, Settings,
  Infrastructure, License Management, etc.), CommandPalette, Sidebar.
- webapp/: CLJS-side adjustments to interoperate with the React shell
  (loading screens, version tracking, route bridge).
- Makefile + scripts/dev/build-webapp.sh: build both CLJS and React
  bundles and merge them into the gateway UI tarball.
- CLAUDE.md: monorepo + frontend migration guidelines.

No backend changes.
@rogefm rogefm force-pushed the claude/sync-clean-rebuild branch from 6acf1f8 to 442abd5 Compare May 14, 2026 15:04
@rogefm rogefm added the minor Bumps the minor version on release (new features) label May 14, 2026
@sandromello
Copy link
Copy Markdown
Contributor

✅ Build Completed with Success, Version=1427.0.0-6acf1f8

@sandromello
Copy link
Copy Markdown
Contributor

✅ Build Completed with Success, Version=1427.0.0-442abd5

@rogefm rogefm merged commit 112960a into main May 14, 2026
23 of 24 checks passed
@rogefm rogefm deleted the claude/sync-clean-rebuild branch May 14, 2026 15:21
@github-actions github-actions Bot locked and limited conversation to collaborators May 14, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

minor Bumps the minor version on release (new features)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants