refactor: migrate frontend from next.js to vite + tanStack router#148
refactor: migrate frontend from next.js to vite + tanStack router#148webdevcody merged 60 commits intomainfrom
Conversation
- Resolved conflicts from apps/app to apps/ui migration - Moved worktree-panel component to apps/ui - Moved dependency-resolver.ts to apps/ui - Removed worktree-selector.tsx (replaced by worktree-panel) - Merged theme updates, file browser improvements, and Gemini fixes - Merged server dependency resolver and auto-mode-service updates 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…ation - Finalized core migration to Vite, ensuring feature parity and functionality. - Updated migration plan to reflect completed tasks and deferred items. - Renamed `apps/app` to `apps/ui` and adjusted related configurations. - Verified Zustand stores and HTTP API client functionality remain unchanged. - Added additional tasks completed during migration, including environment variable updates and memory history configuration for Electron. This commit marks the transition to the new build infrastructure, setting the stage for further component refactoring.
- Change workspace from apps/app to apps/ui - Update env vars from NEXT_PUBLIC_* to VITE_* - Update artifact paths for playwright reports 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Added new build commands for Electron to support directory output for Windows, macOS, and Linux. - This update improves the flexibility of the build process for different deployment scenarios.
- Introduced new build commands for Electron in package.json to support directory output. - Updated CI workflow to utilize the new directory-only build command for faster execution.
Shironex
added
Testers-Requested
Remove git+ssh:// URLs that fail CI lint check 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Summary of ChangesHello @Shironex, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request represents a major architectural shift for the frontend, moving away from Next.js to a more lightweight and performant Vite-based setup. The core motivation is to optimize developer experience and application performance by shedding unused framework features. This migration also modernizes the Electron integration with TypeScript and introduces a robust file-based routing solution, setting the stage for future component refactoring and modularization. Highlights
Ignored Files
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request successfully migrates the frontend from Next.js to Vite and TanStack Router, which is a significant improvement for development speed and bundle size. The changes are extensive and well-executed. I've identified a few issues: the CLAUDE.md documentation is outdated and needs to be updated to reflect the new architecture. Additionally, there are a couple of minor bugs in the theme-switching logic, both in the new root layout component and in the anti-flicker script in index.html, which could cause visual glitches. I've provided suggestions to fix these. Overall, this is a great step forward for the project's frontend infrastructure.
- Use /api/setup/verify-claude-auth instead of removed Next.js route - Add placeholder for Gemini test (needs backend endpoint) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- index.html: Apply actual theme class instead of only 'dark' - __root.tsx: Use themeOptions to dynamically generate theme classes - Fixes missing themes: cream, sunset, gray 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Deleted the CLAUDE.md file which provided guidance for the Claude Code project. - This file contained project overview, architecture details, development commands, code conventions, and environment variables.
The vite-plugin-electron was trying to spawn Electron during the Vite dev server startup, which fails in CI because there's no X11 display. - Use Vite's function config to check command type (serve vs build) - Only skip electron plugin during dev server (command=serve) in CI - Always include electron plugin during build for dist-electron/main.js - Add VITE_SKIP_ELECTRON env var support for explicit control - Update playwright.config.ts to pass VITE_SKIP_ELECTRON in CI 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Shironex
force-pushed
the
refactor/frontend
branch
from
6f0f3af to
ea1b10f
Compare
The index route (/) now shows WelcomeView instead of auto-redirecting to board view. Updated test utilities to navigate directly to the correct routes: - navigateToBoard -> /board - navigateToContext -> /context - navigateToSpec -> /spec - navigateToAgent -> /agent - navigateToSettings -> /settings - waitForBoardView -> navigates to /board first 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The zustand store may not have hydrated from localStorage by the time the board view first renders, causing board-view-no-project to appear briefly. Use waitForFunction to poll until board-view appears. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The router was using memory history with initial entry "/" which caused all routes to render the index component regardless of the browser URL. Changes: - Use browser history when not in Electron (for e2e tests and dev) - Use memory history only in Electron environment - Update test utilities to use persist version 2 to match app store This fixes e2e tests that navigate directly to /board, /context, /spec 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Updated the branch listing command to remove quotes around branch names, ensuring compatibility across platforms. - Enhanced worktree path comparisons in tests to normalize path separators, improving consistency between server and client environments. - Adjusted workspace root resolution to reflect the correct directory structure for the UI. This addresses potential discrepancies in branch names and worktree paths, particularly on Windows systems.
The git branch --format option needs proper quoting to work cross-platform. Single quotes are preserved literally on Windows, while unquoted format strings may be misinterpreted on Linux. Using double quotes works correctly on both platforms. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Shironex
changed the title
Shironex
changed the title
…ctor Closes #151 - Refactor spec-view.tsx from 1,230 lines to ~170 lines following folder-pattern.md - Create unified CreateSpecDialog with all features from both dialogs: - featureCount selector (20/50/100) - was missing in spec-view - analyzeProject checkbox - was missing in sidebar - Extract components: spec-header, spec-editor, spec-empty-state - Extract hooks: use-spec-loading, use-spec-save, use-spec-generation - Extract dialogs: create-spec-dialog, regenerate-spec-dialog - Update sidebar to use new CreateSpecDialog with analyzeProject state - Delete deprecated project-setup-dialog.tsx 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Added useNavigate hook to facilitate programmatic navigation. - Implemented a useEffect to redirect to the board view if a project was previously open and the root path is accessed. - Updated theme class application to ensure proper filtering of theme options. This improves user experience by ensuring the correct view is displayed upon navigation and enhances theme management.
…sed max turns - Updated MAX_TURNS to allow for more iterations in suggestion generation: quick (5 to 50), standard (20 to 100), and extended (50 to 250). - Introduced a JSON schema for structured output in suggestions, improving the format and consistency of generated suggestions. - Modified the generateSuggestions function to utilize structured output when available, with a fallback to text parsing for compatibility. This enhances the suggestion generation process, allowing for more thorough exploration and better output formatting.
Shironex
force-pushed
the
refactor/frontend
branch
from
fb51ca9 to
019ac56
Compare
…th bounds and improve margin calculations - Changed minimum column width from 240px to 280px to better align with design requirements. - Enhanced margin calculations to account for the actual container width and sidebar positioning, ensuring more accurate layout testing.
- Deleted the CoursePromoBadge component from the sidebar and its associated logic. - Removed references to the hideMarketingContent setting from the settings view and appearance section. - Cleaned up related tests for marketing content visibility as they are no longer applicable.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/ui/src/components/layout/sidebar.tsx (1)
1814-1814: Typo in Tailwind class:mt1should bemt-1.The class
mt1is invalid in Tailwind CSS. This will cause the margin-top not to be applied when the sidebar is collapsed.🔎 Proposed fix
- <nav className={cn("flex-1 overflow-y-auto px-3 pb-2", sidebarOpen ? "mt-5" : "mt1")}> + <nav className={cn("flex-1 overflow-y-auto px-3 pb-2", sidebarOpen ? "mt-5" : "mt-1")}>
🧹 Nitpick comments (1)
apps/ui/src/components/layout/sidebar.tsx (1)
1209-1213: Consider usingstartsWithfor nested route matching.The current implementation uses exact pathname matching, which won't highlight parent routes when viewing child routes (e.g.,
/settings/generalwon't highlight the Settings nav item).If all routes are leaf-level this is fine, but if nested routes exist or are planned, consider:
🔎 Suggested enhancement for nested route support
const isActiveRoute = (id: string) => { // Map view IDs to route paths const routePath = id === "welcome" ? "/" : `/${id}`; - return location.pathname === routePath; + return routePath === "/" + ? location.pathname === "/" + : location.pathname.startsWith(routePath); };
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/ui/src/components/layout/sidebar.tsx(17 hunks)apps/ui/src/components/views/settings-view.tsx(0 hunks)apps/ui/src/components/views/settings-view/appearance/appearance-section.tsx(0 hunks)
💤 Files with no reviewable changes (2)
- apps/ui/src/components/views/settings-view.tsx
- apps/ui/src/components/views/settings-view/appearance/appearance-section.tsx
🧰 Additional context used
🧬 Code graph analysis (1)
apps/ui/src/components/layout/sidebar.tsx (2)
apps/server/src/services/auto-mode-service.ts (1)
analyzeProject(1158-1239)apps/ui/src/components/views/spec-view/dialogs/create-spec-dialog.tsx (1)
CreateSpecDialog(17-202)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: e2e
🔇 Additional comments (11)
apps/ui/src/components/layout/sidebar.tsx (11)
1-2: LGTM!The TanStack Router hooks are correctly imported and will be used throughout the component for route-based navigation.
83-84: LGTM!Imports correctly reference the reorganized spec-view component structure and use proper type-only import syntax.
222-224: LGTM!Router hooks are correctly initialized at the component's top level, following React's rules of hooks.
251-257: LGTM!Environment variable access correctly migrated to Vite's
import.meta.envpattern with properVITE_prefix.
290-291: LGTM!The
analyzeProjectstate is correctly initialized with a sensible default value oftrue, enabling project analysis by default during spec creation.
493-529: LGTM!The
analyzeProjectflag is correctly passed to the spec regeneration API and properly included in theuseCallbackdependency array.
1175-1204: LGTM!Keyboard shortcuts correctly use
navigate()for route-based navigation. The dependency array properly includesnavigate.
1291-1292: LGTM!Logo click correctly navigates to the root route using TanStack Router's
navigatefunction.
1849-1849: LGTM!Nav item click handlers correctly use route-based navigation consistent with the rest of the component.
1948-1948: LGTM!Wiki, Running Agents, and Settings buttons consistently use route-based navigation with correct route paths.
Also applies to: 2008-2008, 2103-2103
2264-2281: LGTM!The
CreateSpecDialogis correctly integrated with all required props. The customizabletitleanddescriptionprops allow this unified dialog to serve the initial project setup flow with appropriate messaging.
PR Description: Frontend Migration (Next.js → Vite)
Summary
This PR completes the migration of the frontend application from Next.js to Vite with TanStack Router. The migration eliminates unnecessary framework overhead since we were using less than 5% of Next.js capabilities (no SSR, no API routes, no image optimization).
Key Changes
apps/app→apps/uipage.tsx→renderer.tsx+App.tsxWhat's Changed
Build Infrastructure
vite.config.mtswith Electron, React, and TailwindCSS pluginsmain.tsandpreload.tsto TypeScriptindex.htmlas Vite entry pointTEST_PORTenv varCode Migration
src/routes/for all viewssetCurrentView()Zustand calls with TanStack Routernavigate()"use client"directives (not needed in Vite)NEXT_PUBLIC_*toVITE_*require()withimport)@tailwindcss/viteplugin instead)CI/CD Updates
.github/actions/setup-project/to DRY up workflow filesnode-version,check-lockfile,rebuild-node-pty-pathe2e-tests.ymlforapps/uiworkspace andVITE_*env varspr-check.ymlto use fasterbuild:electron:dirfor CItest.ymlwith lockfile checkbuild:electron:dirscript for faster CI builds (unpacked only)package-lock.json(converted to HTTPS)AutoMode Improvements
.automaker/context/files (CLAUDE.md, etc.) as system promptgetContextDir()utility inautomaker-paths.tsloadContextFiles()method with cross-platform path handlingsystemPromptfor higher priority (not user prompt)executeFeature→resumeFeature→executeFeatureWithContextloopcontinuationPromptis providedComponent Refactoring
folder-pattern.mdconventions (1,230 → 170 lines)CreateSpecDialogwith feature count selector (Closes [Feature Request] Add "Re-open Project Setup" option #151)Bug Fixes
mainWindowin Electron IPC handlers (CodeRabbit suggestion)Routes Created
//board/agent/settings/setup/terminal/spec/context/profiles/interview/wiki/analysis/agent-tools/running-agentsIssues Closed
Expected Benefits
Migration Status
See
docs/migration-plan-nextjs-to-vite.mdfor full details.Files Changed Summary
New Files
.github/actions/setup-project/action.yml- Reusable CI setup composite actionapps/ui/src/routes/*.tsx- TanStack Router route filesapps/ui/vite.config.mts- Vite configurationapps/ui/index.html- Vite entry pointModified Files
apps/server/src/lib/automaker-paths.ts- AddedgetContextDir()apps/server/src/services/auto-mode-service.ts- Context loading + infinite loop fixapps/ui/src/main.ts- Electron main process (TypeScript + null checks)apps/ui/src/preload.ts- Electron preload (TypeScript).github/workflows/*.yml- CI workflow refactoringTesting
npm run dev --workspace=apps/ui)Summary by CodeRabbit
Refactor
New Features
Improvements
Chores
✏️ Tip: You can customize this high-level summary in your review settings.