feat: abillity to configure "Start Dev Server" command in project settings #658
Conversation
- Updated the `/start-dev` route to accept a custom development command from project settings, allowing for greater flexibility in starting dev servers. - Implemented a new `parseCustomCommand` method in the `DevServerService` to handle custom command parsing, including support for quoted strings. - Added a new `DevServerSection` component in the UI for configuring the dev server command, featuring quick presets and auto-detection options. - Updated project settings interface to include a `devCommand` property for storing custom commands. This update improves the user experience by allowing users to specify custom commands for their development servers, enhancing the overall development workflow.
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 introduces a significant enhancement to the development server management by allowing users to define custom commands for starting their dev servers. This change provides more control and adaptability for projects with non-standard development setups, improving the overall developer experience by integrating this configuration directly into the project settings. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. 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
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthroughThis pull request introduces per-project development server command configuration. It adds an optional Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI as CommandsSection<br/>(UI Component)
participant Settings as SettingsService<br/>(Backend)
participant Routes as Start-Dev Route
participant DevService as DevServerService
User->>UI: Enter custom dev command & click Save
UI->>Settings: updateProjectSettings(projectPath, {devCommand})
Settings->>Settings: Normalize (remove null values)
Settings-->>UI: Save confirmation
User->>Routes: POST /start-dev (with projectPath, worktreePath)
Routes->>Settings: Get project settings for devCommand
Settings-->>Routes: Return ProjectSettings with optional devCommand
alt Custom Command Provided
Routes->>DevService: startDevServer(projectPath, worktreePath, customCommand)
DevService->>DevService: parseCustomCommand(customCommand)
DevService->>DevService: Validate & log custom command usage
else No Custom Command
Routes->>DevService: startDevServer(projectPath, worktreePath, undefined)
DevService->>DevService: Auto-detect via package.json
DevService->>DevService: Log auto-detection
end
DevService-->>Routes: Start dev server with command
Routes-->>User: Success/Error response
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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. Comment |
![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 introduces the ability to configure a custom "Start Dev Server" command within project settings, significantly enhancing flexibility for users. The changes span across the server-side logic to parse and execute custom commands, and the UI to provide a user-friendly interface for configuration, including quick presets and auto-detection. The implementation is generally well-structured, with clear separation of concerns and good use of React hooks in the new UI component. The addition of logging for custom command usage is also a good practice for debugging and monitoring.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@apps/ui/src/components/views/project-settings-view/dev-server-section.tsx`:
- Around line 166-186: The clear icon Button next to the dev-command Input lacks
an accessible name (title is unreliable); update the Button rendered when
devCommand is truthy to include a proper accessible label such as
aria-label="Clear dev command" (or aria-labelledby pointing to the related
Input) so screen readers announce its purpose; ensure the Button (the one using
handleClear and rendering <X />) keeps existing props (onClick={handleClear},
className, size/variant) but adds the aria-label attribute to provide an
explicit accessible name.
- Around line 27-71: When loading project settings in DevServerSection
(loadProjectSettings inside the useEffect), reset the local state at the start
of the load (call setDevCommand(''), setOriginalDevCommand(''),
setIsLoading(true)) to avoid showing stale values from a previous project; add
an isLoadError state (e.g., const [isLoadError, setIsLoadError] =
useState(false)) and clear it on successful load (setIsLoadError(false)), set it
to true in the catch block (setIsLoadError(true)) and surface a user-visible
error (use the app's toast/error display) and/or prevent saving when isLoadError
is true (ensure the save handler or UI disables the save button when isLoadError
is true); update references to DevServerSection, loadProjectSettings,
setDevCommand and setOriginalDevCommand accordingly.
🧹 Nitpick comments (3)
apps/server/src/routes/worktree/routes/start-dev.ts (1)
46-47: Consider empty string handling after trim.When
devCommandis an empty string (e.g., user cleared the field),trim()returns''which is falsy and correctly falls through. However, this relies on the falsy check on line 48. The logic is correct, but you might want to add a brief inline comment clarifying that empty strings intentionally fall back to auto-detection.apps/ui/src/components/views/project-settings-view/dev-server-section.tsx (1)
1-10: Use the UI components barrel for intra‑app imports.
Direct paths like@/components/ui/*are brittle in this app; prefer the components index barrel for UI elements.♻️ Suggested change
-import { Label } from '@/components/ui/label'; -import { Input } from '@/components/ui/input'; -import { Button } from '@/components/ui/button'; -import { Spinner } from '@/components/ui/spinner'; +import { Button, Input, Label, Spinner } from '@/components';Based on learnings, prefer the components index barrel for app-local UI imports.
apps/server/src/services/dev-server-service.ts (1)
358-390: NormalizecustomCommandbefore parsing.
Whitespace‑only or padded commands currently error; trimming and treating empty as undefined makes the service more robust for non‑UI callers and matches the UI’s normalization.♻️ Suggested change
- if (customCommand) { + const normalizedCustomCommand = customCommand?.trim(); + if (normalizedCustomCommand) { // Use the provided custom command - devCommand = this.parseCustomCommand(customCommand); + devCommand = this.parseCustomCommand(normalizedCustomCommand); if (!devCommand.cmd) { return { success: false, error: 'Invalid custom command: command cannot be empty', }; } logger.debug(`Using custom command: ${customCommand}`); } else {
apps/ui/src/components/views/project-settings-view/dev-server-section.tsx
Outdated
Show resolved
Hide resolved
apps/ui/src/components/views/project-settings-view/dev-server-section.tsx
Outdated
Show resolved
Hide resolved
…oading - Updated the `DevServerService` to normalize custom commands by trimming whitespace and treating empty strings as undefined. - Refactored the `DevServerSection` component to utilize TanStack Query for fetching project settings, improving data handling and error management. - Enhanced the save functionality to use mutation hooks for updating project settings, streamlining the save process and ensuring better state management. These changes enhance the reliability and user experience when configuring development server commands.
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
…ommandsSection - Introduced a new `CommandsSection` component to manage both development and test commands, replacing the previous `DevServerSection` and `TestingSection`. - Updated the `SettingsService` to handle special cases for `devCommand` and `testCommand`, allowing for null values to delete commands. - Removed deprecated sections and streamlined the project settings view to enhance user experience and maintainability. This refactor simplifies command management and improves the overall structure of the project settings interface.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@apps/ui/src/components/views/project-settings-view/commands-section.tsx`:
- Around line 175-185: The command input fields currently rely on placeholders
for accessible names; add explicit <Label htmlFor="dev-command"> and a matching
label for the other command input (use the input id present in that block) and
associate them with their respective Input components (e.g., the Input with
id="dev-command" and the other input referenced around the same file) — the
labels can be visually hidden (sr-only) if you don't want them visible. Ensure
the label text clearly identifies the field (e.g., "Development command" and
"Build command") and keep the htmlFor value identical to the Input id so screen
readers receive proper accessible names. Keep the existing props
(value={devCommand}, onChange, onKeyDown={handleKeyDown}, data-testid)
unchanged.
| <div className="space-y-3 pl-6"> | ||
| <div className="relative"> | ||
| <Input | ||
| id="dev-command" | ||
| value={devCommand} | ||
| onChange={(e) => setDevCommand(e.target.value)} | ||
| onKeyDown={handleKeyDown} | ||
| placeholder="e.g., npm run dev, yarn dev, cargo watch" | ||
| className="font-mono text-sm pr-8" | ||
| data-testid="dev-command-input" | ||
| /> |
There was a problem hiding this comment.
Add explicit labels for command inputs (a11y).
Placeholders alone aren’t reliable accessible names. Add <Label htmlFor=...> (can be visually hidden) for both inputs.
🧩 Suggested fix
<div className="relative">
+ <Label htmlFor="dev-command" className="sr-only">
+ Dev server command
+ </Label>
<Input
id="dev-command"
value={devCommand}
onChange={(e) => setDevCommand(e.target.value)}
@@
<div className="relative">
+ <Label htmlFor="test-command" className="sr-only">
+ Test runner command
+ </Label>
<Input
id="test-command"
value={testCommand}
onChange={(e) => setTestCommand(e.target.value)}Also applies to: 232-241
🤖 Prompt for AI Agents
In `@apps/ui/src/components/views/project-settings-view/commands-section.tsx`
around lines 175 - 185, The command input fields currently rely on placeholders
for accessible names; add explicit <Label htmlFor="dev-command"> and a matching
label for the other command input (use the input id present in that block) and
associate them with their respective Input components (e.g., the Input with
id="dev-command" and the other input referenced around the same file) — the
labels can be visually hidden (sr-only) if you don't want them visible. Ensure
the label text clearly identifies the field (e.g., "Development command" and
"Build command") and keep the htmlFor value identical to the Input id so screen
readers receive proper accessible names. Keep the existing props
(value={devCommand}, onChange, onKeyDown={handleKeyDown}, data-testid)
unchanged.
/start-devroute to accept a custom development command from project settings, allowing for greater flexibility in starting dev servers.parseCustomCommandmethod in theDevServerServiceto handle custom command parsing, including support for quoted strings.DevServerSectioncomponent in the UI for configuring the dev server command, featuring quick presets and auto-detection options.devCommandproperty for storing custom commands.This update improves the user experience by allowing users to specify custom commands for their development servers, enhancing the overall development workflow.
Summary by CodeRabbit
Release Notes
✏️ Tip: You can customize this high-level summary in your review settings.