refactor: migrate frontend from next.js to vite + tanStack router #148
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
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
README.md (3)
236-246: Update Tech Stack and documentation links to reflect Vite migration.The README still lists "Next.js" as the framework and references Next.js documentation, but the PR migrates the frontend to Vite and TanStack Router. Update the Tech Stack section and "Learn More" links to reflect the new stack.
🔎 Proposed changes
## Tech Stack -- [Next.js](https://nextjs.org) - React framework +- [Vite](https://vitejs.dev) - Frontend build tool - [Electron](https://www.electronjs.org/) - Desktop application framework - [Tailwind CSS](https://tailwindcss.com/) - Styling - [Zustand](https://zustand-demo.pmnd.rs/) - State management - [dnd-kit](https://dndkit.com/) - Drag and drop functionality +- [TanStack Router](https://tanstack.com/router/latest) - Routing ## Learn More -To learn more about Next.js, take a look at the following resources: +To learn more about Vite and TanStack Router, take a look at the following resources: -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. +- [Vite Documentation](https://vitejs.dev/guide/) - learn about Vite features and configuration. +- [TanStack Router Docs](https://tanstack.com/router/latest) - file-based routing with TanStack Router.
164-164: Update build and production command comments to reflect Vite, not Next.js.The comments on these lines still reference "Next.js app" and "Next.js server," but the build system is now Vite. Verify the actual command behavior and update the comments accordingly.
🔎 Proposed changes
### Building for Production ```bash -# Build Next.js app +# Build Vite app for production npm run build # Build Electron app for distributionRunning Production Build
-# Start production Next.js server +# Run the production build npm run start</details> Also applies to: 174-174 --- `268-269`: **Highlight copyright assignment as a significant policy change.** The Contributing section now includes a copyright assignment requirement granting "Core Contributors full, irrevocable rights" to contributor code. This is a significant legal change that should be clearly communicated (e.g., in a CONTRIBUTING.md file or highlighted in a CHANGELOG) so contributors understand the implications before submitting PRs. <details> <summary>Recommended action</summary> Consider: 1. Adding a dedicated `CONTRIBUTING.md` file with clear explanation of the copyright assignment terms. 2. Adding a notice at the top of the README or in the Quick Start section alerting contributors to review the contributing terms. 3. Ensuring this aligns with your project's governance and contributor agreements. </details> </blockquote></details> <details> <summary>apps/ui/src/components/views/wiki-view.tsx (1)</summary><blockquote> `367-382`: **Update directory structure to reflect migration to apps/ui and Vite.** The directory structure shown is outdated. It still references `apps/app` (now `apps/ui`), mentions Next.js App Router (replaced by TanStack Router), and shows the old internal structure. <details> <summary>🔎 Proposed fix</summary> ```diff <CodeBlock title="Directory Structure"> {`/automaker/ ├── apps/ -│ ├── app/ # Frontend (Next.js + Electron) +│ ├── ui/ # Frontend (Vite + Electron) │ │ ├── electron/ # Electron main process │ │ └── src/ -│ │ ├── app/ # Next.js App Router pages +│ │ ├── routes/ # TanStack Router routes │ │ ├── components/ # React components │ │ ├── store/ # Zustand state management │ │ ├── hooks/ # Custom React hooks │ │ └── lib/ # Utilities and helpers │ └── server/ # Backend (Express) │ └── src/ │ ├── routes/ # API endpoints │ └── services/ # Business logic (AutoModeService, etc.) ├── docs/ # Documentation └── package.json # Workspace root`} </CodeBlock>
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
.github/workflows/release.yml(0 hunks)README.md(2 hunks)apps/server/src/routes/worktree/common.ts(1 hunks)apps/server/src/services/auto-mode-service.ts(10 hunks)apps/ui/scripts/setup-e2e-fixtures.mjs(1 hunks)apps/ui/src/components/session-manager.tsx(0 hunks)apps/ui/src/components/ui/branch-autocomplete.tsx(0 hunks)apps/ui/src/components/views/board-view.tsx(0 hunks)apps/ui/src/components/views/board-view/dialogs/add-feature-dialog.tsx(3 hunks)apps/ui/src/components/views/board-view/dialogs/delete-worktree-dialog.tsx(0 hunks)apps/ui/src/components/views/board-view/dialogs/edit-feature-dialog.tsx(0 hunks)apps/ui/src/components/views/board-view/worktree-panel/components/worktree-tab.tsx(0 hunks)apps/ui/src/components/views/board-view/worktree-panel/worktree-panel.tsx(0 hunks)apps/ui/src/components/views/wiki-view.tsx(13 hunks)
💤 Files with no reviewable changes (8)
- apps/ui/src/components/views/board-view/dialogs/delete-worktree-dialog.tsx
- apps/ui/src/components/ui/branch-autocomplete.tsx
- apps/ui/src/components/session-manager.tsx
- apps/ui/src/components/views/board-view.tsx
- apps/ui/src/components/views/board-view/dialogs/edit-feature-dialog.tsx
- apps/ui/src/components/views/board-view/worktree-panel/components/worktree-tab.tsx
- .github/workflows/release.yml
- apps/ui/src/components/views/board-view/worktree-panel/worktree-panel.tsx
✅ Files skipped from review due to trivial changes (1)
- apps/ui/scripts/setup-e2e-fixtures.mjs
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/ui/src/components/views/board-view/dialogs/add-feature-dialog.tsx
🧰 Additional context used
🧬 Code graph analysis (2)
apps/server/src/services/auto-mode-service.ts (2)
apps/server/src/lib/automaker-paths.ts (1)
getContextDir(59-61)apps/server/src/providers/types.ts (1)
ExecuteOptions(25-36)
apps/server/src/routes/worktree/common.ts (3)
apps/server/src/routes/templates/common.ts (1)
logger(11-11)apps/server/src/lib/logger.ts (1)
createLogger(32-60)apps/server/src/services/feature-loader.ts (1)
FeatureLoader(49-463)
🔇 Additional comments (7)
apps/server/src/services/auto-mode-service.ts (4)
26-26: LGTM: Context directory import added.The
getContextDirimport is correctly added and aligns with the implementation shown in the relevant code snippets.
763-764: LGTM: Context loading consistent in follow-up path.The context files are loaded and passed as
systemPromptin the follow-up execution path, maintaining consistency with the main execution flow.Also applies to: 884-897
1748-1748: LGTM: System prompt integration properly implemented.The
systemPromptis correctly integrated into therunAgentmethod:
- Added to options parameter
- Debug logging added for troubleshooting
- Passed to
ExecuteOptionsfor provider executionThe debug logging (first 200 chars) is helpful without overwhelming logs.
Also applies to: 1856-1861, 1870-1870
561-562: Context loading integration is correct.The
systemPromptis properly used in the Claude provider implementation—it's destructured fromExecuteOptionsand passed to the Claude SDK options. Context files are correctly loaded and passed assystemPromptat line 610. Note that only the Claude provider is currently implemented; ensure any future providers (Gemini, etc.) follow the same pattern.apps/server/src/routes/worktree/common.ts (3)
28-30: LGTM!Clean utility for cross-platform path normalization.
35-78: LGTM!Well-designed utility functions. The pattern of suppressing ENOENT errors for mock paths in
logWorktreeErroris a good approach for reducing noise in test output.
88-109: LGTM!The function correctly ensures a repository has at least one commit before worktree operations. Error handling with a descriptive message is helpful. The commit message interpolation is safe since
AUTOMAKER_INITIAL_COMMIT_MESSAGEis a controlled constant in this file.
| /** | ||
| * Load context files from .automaker/context/ directory | ||
| * These are user-defined context files (CLAUDE.md, CODE_QUALITY.md, etc.) | ||
| * that provide project-specific rules and guidelines for the agent. | ||
| */ | ||
| private async loadContextFiles(projectPath: string): Promise<string> { | ||
| // Use path.resolve for cross-platform absolute path handling | ||
| const contextDir = path.resolve(getContextDir(projectPath)); | ||
|
|
||
| try { | ||
| // Check if directory exists first | ||
| await fs.access(contextDir); | ||
|
|
||
| const files = await fs.readdir(contextDir); | ||
| // Filter for text-based context files (case-insensitive for Windows) | ||
| const textFiles = files.filter((f) => { | ||
| const lower = f.toLowerCase(); | ||
| return lower.endsWith(".md") || lower.endsWith(".txt"); | ||
| }); | ||
|
|
||
| if (textFiles.length === 0) return ""; | ||
|
|
||
| const contents: string[] = []; | ||
| for (const file of textFiles) { | ||
| // Use path.join for cross-platform path construction | ||
| const filePath = path.join(contextDir, file); | ||
| const content = await fs.readFile(filePath, "utf-8"); | ||
| contents.push(`## ${file}\n\n${content}`); | ||
| } | ||
|
|
||
| console.log( | ||
| `[AutoMode] Loaded ${textFiles.length} context file(s): ${textFiles.join(", ")}` | ||
| ); | ||
|
|
||
| return `# ⚠️ CRITICAL: Project Context Files - READ AND FOLLOW STRICTLY | ||
| **IMPORTANT**: The following context files contain MANDATORY project-specific rules and conventions. You MUST: | ||
| 1. Read these rules carefully before taking any action | ||
| 2. Follow ALL commands exactly as shown (e.g., if the project uses \`pnpm\`, NEVER use \`npm\` or \`npx\`) | ||
| 3. Follow ALL coding conventions, commit message formats, and architectural patterns specified | ||
| 4. Reference these rules before running ANY shell commands or making commits | ||
| Failure to follow these rules will result in broken builds, failed CI, and rejected commits. | ||
| ${contents.join("\n\n---\n\n")} | ||
| --- | ||
| **REMINDER**: Before running any command, verify you are using the correct package manager and following the conventions above. | ||
| --- | ||
| `; | ||
| } catch { | ||
| // Context directory doesn't exist or is empty - this is fine | ||
| return ""; | ||
| } | ||
| } |
There was a problem hiding this comment.
Add error handling for individual file reads.
The loadContextFiles method has two error handling gaps:
- Line 1122: If
fs.readFilefails for a single file (permissions, corruption, etc.), the entire method throws, potentially crashing feature execution. - Line 1149: The catch block silently returns
""without logging, making it difficult to diagnose why context files aren't loading.
🔎 Suggested improvements
private async loadContextFiles(projectPath: string): Promise<string> {
// Use path.resolve for cross-platform absolute path handling
const contextDir = path.resolve(getContextDir(projectPath));
try {
// Check if directory exists first
await fs.access(contextDir);
const files = await fs.readdir(contextDir);
// Filter for text-based context files (case-insensitive for Windows)
const textFiles = files.filter((f) => {
const lower = f.toLowerCase();
return lower.endsWith(".md") || lower.endsWith(".txt");
});
if (textFiles.length === 0) return "";
const contents: string[] = [];
for (const file of textFiles) {
// Use path.join for cross-platform path construction
const filePath = path.join(contextDir, file);
- const content = await fs.readFile(filePath, "utf-8");
- contents.push(`## ${file}\n\n${content}`);
+ try {
+ const content = await fs.readFile(filePath, "utf-8");
+ contents.push(`## ${file}\n\n${content}`);
+ } catch (error) {
+ console.error(
+ `[AutoMode] Failed to read context file ${file}:`,
+ error
+ );
+ // Continue with other files instead of failing completely
+ }
}
+
+ if (contents.length === 0) {
+ console.warn(`[AutoMode] No context files could be loaded from ${contextDir}`);
+ return "";
+ }
console.log(
`[AutoMode] Loaded ${textFiles.length} context file(s): ${textFiles.join(", ")}`
);
return `# ⚠️ CRITICAL: Project Context Files - READ AND FOLLOW STRICTLY
**IMPORTANT**: The following context files contain MANDATORY project-specific rules and conventions. You MUST:
1. Read these rules carefully before taking any action
2. Follow ALL commands exactly as shown (e.g., if the project uses \`pnpm\`, NEVER use \`npm\` or \`npx\`)
3. Follow ALL coding conventions, commit message formats, and architectural patterns specified
4. Reference these rules before running ANY shell commands or making commits
Failure to follow these rules will result in broken builds, failed CI, and rejected commits.
${contents.join("\n\n---\n\n")}
---
**REMINDER**: Before running any command, verify you are using the correct package manager and following the conventions above.
---
`;
- } catch {
+ } catch (error) {
// Context directory doesn't exist or is empty - this is fine
+ // Log for debugging but don't treat as error since context is optional
+ if ((error as NodeJS.ErrnoException).code !== 'ENOENT') {
+ console.warn(`[AutoMode] Could not load context files from ${contextDir}:`, error);
+ }
return "";
}
}🤖 Prompt for AI Agents
In apps/server/src/services/auto-mode-service.ts around lines 1096-1153, the
method loadContextFiles lacks per-file error handling and silent catch; update
it to wrap each fs.readFile in a try/catch so a single unreadable file is
skipped (push a warning entry or continue) rather than failing the whole method,
and enhance the outer catch to log a debug/warn message with the error (or
reason for missing directory) before returning an empty string so diagnostics
are available; ensure logs include file path and error details and do not change
the returned semantics (still return "" when no usable context content).
| <strong className="text-foreground">apps/ui</strong> - Next.js + | ||
| Electron frontend for the desktop application |
There was a problem hiding this comment.
Update architecture description to reflect Vite migration.
The documentation still references Next.js, but the PR migrated the frontend to Vite + TanStack Router. Update this to accurately describe the current stack.
🔎 Proposed fix
<li>
- <strong className="text-foreground">apps/ui</strong> - Next.js +
- Electron frontend for the desktop application
+ <strong className="text-foreground">apps/ui</strong> - Vite +
+ Electron frontend for the desktop application
</li>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <strong className="text-foreground">apps/ui</strong> - Next.js + | |
| Electron frontend for the desktop application | |
| <strong className="text-foreground">apps/ui</strong> - Vite + | |
| Electron frontend for the desktop application |
🤖 Prompt for AI Agents
In apps/ui/src/components/views/wiki-view.tsx around lines 184 to 185, the
architecture blurb still says "Next.js + Electron frontend" even though the app
was migrated to Vite + TanStack Router; update the description to reflect the
current stack by replacing "Next.js + Electron frontend" with something like
"Vite + TanStack Router + Electron frontend" (or equivalent wording used
elsewhere in the repo), ensuring capitalization and any existing punctuation
remain consistent with surrounding text.
| <li>Electron wraps Next.js for cross-platform desktop support</li> | ||
| <li>Real-time communication via WebSocket for live agent updates</li> | ||
| <li> | ||
| Real-time communication via WebSocket for live agent updates | ||
| </li> |
There was a problem hiding this comment.
Update Electron description to reflect Vite migration.
The statement "Electron wraps Next.js" is outdated after the migration to Vite.
🔎 Proposed fix
<li>Electron wraps Next.js for cross-platform desktop support</li>
+ <li>Electron wraps Vite for cross-platform desktop support</li>
<li>
Real-time communication via WebSocket for live agent updates
</li>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <li>Electron wraps Next.js for cross-platform desktop support</li> | |
| <li>Real-time communication via WebSocket for live agent updates</li> | |
| <li> | |
| Real-time communication via WebSocket for live agent updates | |
| </li> | |
| <li>Electron wraps Vite for cross-platform desktop support</li> | |
| <li> | |
| Real-time communication via WebSocket for live agent updates | |
| </li> |
🤖 Prompt for AI Agents
In apps/ui/src/components/views/wiki-view.tsx around lines 195 to 198, the
bullet "Electron wraps Next.js for cross-platform desktop support" is outdated
after the migration to Vite; update the text to accurately state that Electron
now wraps the Vite-built frontend (or simply "Electron wraps the Vite app for
cross-platform desktop support") so documentation reflects the current build
system, and run a quick search to ensure no other references to Next.js remain
in this component.
…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.
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.