Skip to content

Improve React desktop startup and UI parity - #126

Merged
cnjack merged 1 commit into
mainfrom
codex/react-ui-startup-polish
Jul 9, 2026
Merged

Improve React desktop startup and UI parity#126
cnjack merged 1 commit into
mainfrom
codex/react-ui-startup-polish

Conversation

@cnjack

@cnjack cnjack commented Jul 9, 2026

Copy link
Copy Markdown
Owner

Summary

  • Show the Tauri desktop window immediately with a lightweight boot screen instead of waiting on sidecar readiness, reducing the perceived white-screen startup.
  • Load MCP servers asynchronously after the web server starts so slow MCP connections do not block desktop/web startup.
  • Continue the Vue-to-React parity pass for the desktop UI: sidebar/welcome layout, settings content, workspace and branch pickers, model/provider icons, remote connection flow, and localized UI strings.

Root Cause

The desktop shell waited for the Go sidecar health check before showing the main window, while the web server also synchronously initialized MCP tools during startup. Slow MCP/tool loading could therefore leave the Tauri window blank or hidden for an extended period. The React migration also still had several visual and state parity gaps versus the Vue UI.

Validation

  • go test ./internal/web ./internal/tools ./internal/command
  • pnpm --filter web-react typecheck
  • pnpm --filter web-react build
  • cargo check --manifest-path desktop/src-tauri/Cargo.toml
  • Pre-push hook: go build ./..., go vet ./..., golangci-lint, go test ./...

Note: the React production build still reports the existing large chunk size warning from Vite.

Summary by CodeRabbit

  • New Features

    • Added a faster startup experience with a visible loading screen and earlier app window focus.
    • Introduced workspace, branch, and remote connection pickers for easier project switching and remote setup.
    • Added automation run replay, context usage details, and richer settings/status panels.
    • Expanded localization support with multiple new languages.
  • Bug Fixes

    • Improved startup and health-check reliability.
    • Made session, task, and approval handling more accurate during loading and replay.
  • Style

    • Refreshed app layout and visual polish across the desktop and web interfaces.

@coderabbitai

coderabbitai Bot commented Jul 9, 2026

Copy link
Copy Markdown

Review Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 7dbdd5da-4f02-45c4-895d-a1f0f0b6f6a4

📥 Commits

Reviewing files that changed from the base of the PR and between 65841cf and 911278f.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (35)
  • desktop/src-tauri/src/sidecar.rs
  • internal/command/web.go
  • internal/web/server.go
  • pnpm-workspace.yaml
  • web-react/index.html
  • web-react/package.json
  • web-react/src/App.tsx
  • web-react/src/app/store.ts
  • web-react/src/app/wsBridge.ts
  • web-react/src/components/AuthGate.tsx
  • web-react/src/components/AutomationsView.tsx
  • web-react/src/components/BranchPicker.tsx
  • web-react/src/components/ChannelsView.tsx
  • web-react/src/components/ChatInput.tsx
  • web-react/src/components/ChatView.tsx
  • web-react/src/components/CommandPalette.tsx
  • web-react/src/components/ProviderIcon.tsx
  • web-react/src/components/RemoteConnectWizard.tsx
  • web-react/src/components/SettingsDialog.tsx
  • web-react/src/components/SetupView.tsx
  • web-react/src/components/Sidebar.tsx
  • web-react/src/components/TopBar.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/lib/providerIcons.ts
  • web-react/src/lib/useDesktop.ts
  • web-react/src/lib/ws.ts
  • web-react/src/main.tsx
  • web-react/src/styles.css
  • web/index.html

📝 Walkthrough

Walkthrough

This PR defers MCP tool loading to a background reload after web server startup (with config cloning for concurrency safety) and hardens the desktop sidecar's health-check parsing and window-show timing. The React web app is substantially reworked with i18next localization, boot screens, redesigned state management/thunks, new remote-connect/workspace/branch/automation-replay UI, updated chat/settings/channels/sidebar components, and new global styling.

Estimated code review effort: 5 (Critical) | ~120 minutes

Changes

Backend MCP Reload and Health Check

Layer / File(s) Summary
Background MCP reload and config cloning
internal/command/web.go, internal/web/server.go
MCP tool loading moves from server-construction time to a background ReloadMCPInBackground() call after the server starts listening, using a new cloneMCPServers deep-copy helper and broadcasting a mcp_changed event on completion.
Sidecar window timing and health parsing
desktop/src-tauri/src/sidecar.rs
The main window is shown/focused immediately after sidecar spawn instead of on health-poll success, and /api/health response validation now parses the status line's status-code token instead of substring matching.

React Web App Overhaul

Layer / File(s) Summary
i18next bootstrap and desktop init
web-react/src/i18n/index.ts, web-react/src/lib/useDesktop.ts, web-react/src/main.tsx, web-react/src/lib/ws.ts
Adds locale detection/persistence and i18next setup, initializes Tauri-specific HTML classes early in bootstrap, and invalidates the cached WS handler map on handler updates.
Locale dictionaries
web-react/src/i18n/locales/*.ts
Adds complete English, Japanese, Korean, Simplified/Traditional Chinese translation dictionaries covering all app UI namespaces.
Boot loading screens and build config
web-react/index.html, web/index.html, pnpm-workspace.yaml
Adds styled boot-screen overlays to both app entry HTML files and trusts @parcel/watcher for builds.
Store thunks, WS bridge, and session boot flow
web-react/src/app/store.ts, web-react/src/app/wsBridge.ts, web-react/src/App.tsx
Rewrites Redux state/thunks (goal arming, effort overrides, channel/BLE flags, workspace loading, session replay), updates WS event payloads, and gates App boot session restore on auth/setup status.
Auth gate and first-run setup
web-react/src/components/AuthGate.tsx, web-react/src/components/SetupView.tsx
Both components now call api.health() and dispatch full app-state initialization plus loadWorkspaceState(); SetupView adds custom-provider configuration and connection testing.
Chat input, context capacity, provider icons, chat view
web-react/src/components/ChatInput.tsx, ChatView.tsx, ProviderIcon.tsx, web-react/src/lib/providerIcons.ts, web-react/package.json
Adds a provider-icon SVG library and component, reworks reasoning-effort/context-capacity popup logic against Redux, and localizes ChatView layout.
Sidebar, command palette, top bar navigation
web-react/src/components/Sidebar.tsx, CommandPalette.tsx, TopBar.tsx
Redesigns sidebar filtering/grouping/sorting with task-first data enrichment, rewrites CommandPalette as a searchable grouped palette, and localizes TopBar labels.
Workspace picker, branch picker, remote connect, automation replay
web-react/src/components/WorkspacePicker.tsx, BranchPicker.tsx, RemoteConnectWizard.tsx, AutomationsView.tsx, web-react/src/App.tsx
Adds new workspace/branch pickers and a multi-step SSH/Docker remote-connect wizard, plus App-level automation-run replay routing and remote-connect event wiring.
Settings dialog and channels view
web-react/src/components/SettingsDialog.tsx, ChannelsView.tsx
Localizes settings tabs/GeneralTab/UsageTab, adds an SSH remote-connect entrypoint, and dispatches channel/BLE state to Redux from ChannelsView.
Global layout and welcome styling
web-react/src/styles.css
Adds workspace-frame/chat-panel/welcome CSS structures, responsive breakpoints, and Tauri macOS layout adjustments.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant App
  participant Store
  participant Api

  App->>Api: health()
  Api-->>App: auth_required / needs_setup / session_id
  alt gated
    App->>User: show AuthGate/SetupView
    User->>Api: verify token / complete setup
    Api-->>App: success
  end
  App->>Store: loadWorkspaceState()
  Store->>Api: loadModels/loadStatus/loadGoal/loadChannelState/...
  App->>Store: replaySession(session_id)
  Store->>Api: session(uuid)
  Api-->>Store: SessionEntry[]
  Store->>App: timeline rebuilt, isRunning=false
Loading
sequenceDiagram
  participant CLI
  participant Server
  participant Goroutine
  participant WSClient

  CLI->>Server: start listening
  CLI->>Server: ReloadMCPInBackground()
  Server->>Goroutine: reloadMCPAndRebuild()
  Goroutine->>Goroutine: cloneMCPServers(config)
  Goroutine->>Server: reloadMCP(cloned)
  Goroutine->>WSClient: broadcast mcp_changed
Loading

Possibly related PRs

  • cnjack/jcode#103: Frontend effortOverrides usage via api.setModelEffort connects to this PR's backend /api/model-state/effort persistence work.
  • cnjack/jcode#105: Server-side /api/health auth changes relate directly to this PR's hardened health-check response parsing in sidecar.rs.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch codex/react-ui-startup-polish

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.

@cnjack
cnjack marked this pull request as ready for review July 9, 2026 10:21
@cnjack
cnjack merged commit dff0c97 into main Jul 9, 2026
3 checks passed
@cnjack
cnjack deleted the codex/react-ui-startup-polish branch July 9, 2026 10:22
cnjack added a commit that referenced this pull request Jul 12, 2026
Improve React desktop startup and UI parity
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