Skip to content

feat(web): replace Vue product UI with React as the sole frontend - #127

Merged
cnjack merged 2 commits into
mainfrom
feat/react-web-default
Jul 9, 2026
Merged

feat(web): replace Vue product UI with React as the sole frontend#127
cnjack merged 2 commits into
mainfrom
feat/react-web-default

Conversation

@cnjack

@cnjack cnjack commented Jul 9, 2026

Copy link
Copy Markdown
Owner

Summary

  • Remove the Vue product UI and make React the only embedded frontend (web-react/web/).
  • Point make build-web, Go //go:embed, Tauri, theme codegen, and CI/release at a single React → internal/web/dist path.
  • Drop dual-stack build knobs (FRONTEND=, build-web-react, desktop-react-*, tauri.react.conf.json).
  • Include React parity work: workspace picker (native folder open + remote reconnect), remote SSH/Docker wizard styling/flow, message/tool UI, i18n, and related jcode-ui fixes.

Test plan

  • make generate && make build-web succeeds and writes internal/web/dist/
  • make build-binary embeds the React SPA and serves it via jcode web
  • make lint-web (tsc for web + packages) passes
  • Welcome: open folder (Tauri native / browser fallback) and remote connect (SSH + Docker)
  • Reconnect existing ssh:// / docker:// workspaces from picker / sidebar
  • make desktop-dev loads React from web/ on port 5173
  • CI web job installs monorepo deps and typechecks/builds React

Remove the Vue app and promote the React migration to web/, so make
build-web, Go embed, Tauri, and CI/release all ship one UI stack.

- Delete Vue sources; rename web-react → web (React 18 + jcode-ui)
- Point Vite, Makefile, Tauri, and theme codegen at web/ → internal/web/dist
- Update CI web job for monorepo packages + React typecheck/build
- Drop dual-path targets (FRONTEND=, build-web-react, tauri.react.conf)
- Parity work for workspace picker, remote wizard, messages/tools, i18n
@coderabbitai

coderabbitai Bot commented Jul 9, 2026

Copy link
Copy Markdown

Important

Review skipped

Too many files!

This PR contains 162 files, which is 12 over the limit of 150.

To get a review, narrow the scope:
• coderabbit review --type committed # exclude uncommitted changes
• coderabbit review --dir # limit to a subdirectory
• coderabbit review --base # compare against a closer base

Upgrade to a paid plan to raise the limit.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3cb80ea0-2f8a-49d1-b045-86a04d25f334

📥 Commits

Reviewing files that changed from the base of the PR and between caa2d88 and 4e149c1.

⛔ Files ignored due to path filters (3)
  • internal/theme/gen/main.go is excluded by !**/gen/**
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
  • web/pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (162)
  • .github/workflows/ci.yml
  • .gitignore
  • AGENTS.md
  • Makefile
  • desktop/src-tauri/tauri.conf.json
  • desktop/src-tauri/tauri.react.conf.json
  • packages/jcode-ui-core/src/primitives/ToolCallView.tsx
  • packages/jcode-ui/src/components/Message.tsx
  • packages/jcode-ui/src/components/Thread.tsx
  • packages/jcode-ui/src/components/ToolCallCard.tsx
  • packages/jcode-ui/src/components/ToolRegistryContext.tsx
  • packages/jcode-ui/src/lib/markdown.ts
  • packages/jcode-ui/src/styles/components.css
  • packages/jcode-ui/src/toolRenderers/browserShot.tsx
  • packages/jcode-ui/src/toolRenderers/diff.tsx
  • packages/jcode-ui/src/toolRenderers/fileViewer.tsx
  • packages/jcode-ui/src/toolRenderers/generic.tsx
  • packages/jcode-ui/src/toolRenderers/index.ts
  • packages/jcode-ui/src/toolRenderers/search.tsx
  • packages/jcode-ui/src/toolRenderers/skill.tsx
  • packages/jcode-ui/src/toolRenderers/team.tsx
  • packages/jcode-ui/src/toolRenderers/terminal.tsx
  • packages/jcode-ui/src/toolRenderers/todo.tsx
  • pnpm-workspace.yaml
  • site/docs/chat-ui/components.md
  • site/docs/themes.md
  • web-react/index.html
  • web-react/package.json
  • web-react/src/components/GoalBanner.tsx
  • web-react/src/components/RemoteConnectWizard.tsx
  • web-react/src/components/WorkspacePicker.tsx
  • web-react/src/i18n/index.ts
  • web-react/src/i18n/locales/en.ts
  • web-react/src/i18n/locales/ja.ts
  • web-react/src/i18n/locales/ko.ts
  • web-react/src/i18n/locales/zh-Hans.ts
  • web-react/src/i18n/locales/zh-Hant.ts
  • web-react/src/styles.css
  • web-react/src/styles/tokens.generated.css
  • web-react/tsconfig.app.json
  • web-react/tsconfig.json
  • web-react/tsconfig.node.json
  • web-react/vite.config.ts
  • web/.editorconfig
  • web/.gitattributes
  • web/.gitignore
  • web/.oxfmtrc.json
  • web/.oxlintrc.json
  • web/.vscode/extensions.json
  • web/README.md
  • web/env.d.ts
  • web/eslint.config.ts
  • web/index.html
  • web/package.json
  • web/pnpm-workspace.yaml
  • web/src/App.tsx
  • web/src/App.vue
  • web/src/app/hooks.ts
  • web/src/app/runtime.ts
  • web/src/app/store.ts
  • web/src/app/wsBridge.ts
  • web/src/components/ApprovalBanner.vue
  • web/src/components/AskUserCard.vue
  • web/src/components/AuthGate.tsx
  • web/src/components/AutomationEditorDialog.vue
  • web/src/components/AutomationRunView.vue
  • web/src/components/AutomationsView.tsx
  • web/src/components/AutomationsView.vue
  • web/src/components/BranchPicker.tsx
  • web/src/components/BranchPicker.vue
  • web/src/components/ChannelsView.tsx
  • web/src/components/ChannelsView.vue
  • web/src/components/ChatInput.tsx
  • web/src/components/ChatInput.vue
  • web/src/components/ChatMessage.vue
  • web/src/components/ChatView.tsx
  • web/src/components/CommandPalette.tsx
  • web/src/components/CommandPalette.vue
  • web/src/components/ContextCapacityPopup.vue
  • web/src/components/DiffViewer.vue
  • web/src/components/FileTreePanel.vue
  • web/src/components/GoalBanner.tsx
  • web/src/components/GoalBanner.vue
  • web/src/components/MenuSelect.vue
  • web/src/components/ModelEditDialog.vue
  • web/src/components/PageSurface.vue
  • web/src/components/ProjectHeader.tsx
  • web/src/components/ProjectPickerPanel.vue
  • web/src/components/ProjectSwitcher.vue
  • web/src/components/ProviderEditDialog.vue
  • web/src/components/ProviderIcon.tsx
  • web/src/components/ProviderIcon.vue
  • web/src/components/RemoteConnectWizard.tsx
  • web/src/components/RemoteConnectWizard.vue
  • web/src/components/RightPanel.tsx
  • web/src/components/RightPanel.vue
  • web/src/components/SettingsDialog.tsx
  • web/src/components/SettingsDialog.vue
  • web/src/components/SetupView.tsx
  • web/src/components/SetupView.vue
  • web/src/components/Sidebar.tsx
  • web/src/components/Sidebar.vue
  • web/src/components/SidebarFilterMenu.tsx
  • web/src/components/SidebarFilterMenu.vue
  • web/src/components/TaskList.vue
  • web/src/components/TerminalInstance.vue
  • web/src/components/TerminalPanel.tsx
  • web/src/components/TerminalPanel.vue
  • web/src/components/ThemeToggle.tsx
  • web/src/components/TokenGate.vue
  • web/src/components/ToolCallCard.vue
  • web/src/components/TopBar.tsx
  • web/src/components/TopBar.vue
  • web/src/components/UsageStatsPanel.vue
  • web/src/components/WorkspacePicker.tsx
  • web/src/components/WorkspacePicker.vue
  • web/src/composables/api.ts
  • web/src/composables/apiBase.ts
  • web/src/composables/authToken.ts
  • web/src/composables/markdown.ts
  • web/src/composables/notifications.ts
  • web/src/composables/toolInfo.ts
  • web/src/composables/useBranch.ts
  • web/src/composables/useDesktop.ts
  • web/src/composables/useFolderBrowser.ts
  • web/src/composables/useTheme.ts
  • web/src/composables/ws.ts
  • web/src/i18n/index.ts
  • web/src/i18n/locales/en.ts
  • web/src/i18n/locales/ja.ts
  • web/src/i18n/locales/ko.ts
  • web/src/i18n/locales/zh-Hans.ts
  • web/src/i18n/locales/zh-Hant.ts
  • web/src/lib/api.ts
  • web/src/lib/apiBase.ts
  • web/src/lib/authToken.ts
  • web/src/lib/automation.ts
  • web/src/lib/providerIcons.ts
  • web/src/lib/remote.ts
  • web/src/lib/toolInfo.ts
  • web/src/lib/types.ts
  • web/src/lib/useDesktop.ts
  • web/src/lib/useTheme.ts
  • web/src/lib/ws.ts
  • web/src/main.ts
  • web/src/main.tsx
  • web/src/stores/automation.ts
  • web/src/stores/chat.ts
  • web/src/stores/project.ts
  • web/src/stores/usage.ts
  • web/src/style.css
  • web/src/styles.css
  • web/src/styles/animations.css
  • web/src/styles/tokens.css
  • web/src/types/api.ts
  • web/src/types/automation.ts
  • web/src/utils/providerIcons.ts
  • web/src/vite-env.d.ts
  • web/tsconfig.app.json
  • web/tsconfig.json
  • web/tsconfig.node.json
  • web/vite.config.ts

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/react-web-default

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

CI clean checkouts lack web/src/styles/ because tokens.generated.css is
gitignored, so go generate failed with "no such file or directory".
@cnjack
cnjack merged commit 8c6a972 into main Jul 9, 2026
3 checks passed
@cnjack
cnjack deleted the feat/react-web-default branch July 9, 2026 15:21
cnjack added a commit that referenced this pull request Jul 12, 2026
feat(web): replace Vue product UI with React as the sole frontend
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant