fix(webapp): polish AI agent setup panel on tasks blank state - #4807
Conversation
Refine the "Set it up with your AI agent" onboarding panel: top-align the badge icon and switch it to the custom Ask AI sparkle icon, stop the copy button from resizing when it swaps to "Copied prompt" (bright check icon now sits beside the label), drop the sparkle from the button's idle state, remove the spinner next to "Start the dev server", and widen the gap between the panel text and the copy button. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
WalkthroughUpdated the development setup panels to use Merge Risk: 🔵 Low · up to The PR polishes the onboarding panel, but the setup prompt button may not preserve tooltip behavior and accessibility attributes after the layout change. It is mergeable with explicit owner follow-up to forward or wrap the trigger props. 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
Full details: Description checkExplanation The description explains the visual changes, testing guidance, changelog, and screenshots. It does not include the required issue reference or checklist, and the testing details are not under the template's Testing heading, but the content is mostly complete and directly relevant.
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
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 |
![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
🧹 Nitpick comments (1)
apps/webapp/app/components/BlankStatePanels.tsx (1)
135-145: 🎯 Functional Correctness | 🔵 TrivialRun the required visual check for the responsive setup panel. Use Chrome DevTools MCP on the new-project Tasks page at narrow and
smwidths. Inspect snapshots, screenshots, and console messages. Check badge alignment, prompt spacing, and spinner removal.Source: Coding guidelines
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 4265ad1b-6083-4817-80ae-2d6d47811944
📒 Files selected for processing (2)
apps/webapp/app/components/BlankStatePanels.tsxapps/webapp/app/components/SetupCommands.tsx
Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.
📜 Review details
⏰ Context from checks skipped due to timeout. (19)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (17, 24)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (20, 24)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (5, 24)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (15, 24)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (13, 24)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (10, 24)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (9, 24)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (14, 24)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (7, 24)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (11, 24)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (12, 24)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (21, 24)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (18, 24)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (19, 24)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (6, 24)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (8, 24)
- GitHub Check: webapp / 🧪 Unit Tests: Webapp (16, 24)
- GitHub Check: e2e-webapp / 🧪 E2E Tests: Webapp (1, 2)
- GitHub Check: e2e-webapp / 🧪 E2E Tests: Webapp (2, 2)
🧰 Additional context used
📓 Path-based instructions (7)
For dashboard changes, visually verify the running Remix app with Chrome DevTools MCP, using snapshots, screenshots, interaction, and console-message checks as appropriate.
📄 CodeRabbit inference engine (apps/webapp/CLAUDE.md)
Files:
apps/webapp/app/components/SetupCommands.tsxapps/webapp/app/components/BlankStatePanels.tsx
**Prefer static imports over dynamic imports.** Only use dynamic `import()` when:
📄 CodeRabbit inference engine (AGENTS.md)
Files:
apps/webapp/app/components/SetupCommands.tsxapps/webapp/app/components/BlankStatePanels.tsx
Add crumbs as you write code — not just when debugging. Mark lines with
📄 CodeRabbit inference engine (AGENTS.md)
Files:
apps/webapp/app/components/SetupCommands.tsxapps/webapp/app/components/BlankStatePanels.tsx
Use zod for validation in packages/core and apps/webapp
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
apps/webapp/app/components/SetupCommands.tsxapps/webapp/app/components/BlankStatePanels.tsx
Access environment variables through the `env` export of `env.server.ts` instead of directly accessing `process.env`
📄 CodeRabbit inference engine (.cursor/rules/webapp.mdc)
Files:
apps/webapp/app/components/SetupCommands.tsxapps/webapp/app/components/BlankStatePanels.tsx
Use function declarations instead of default exports
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
apps/webapp/app/components/SetupCommands.tsxapps/webapp/app/components/BlankStatePanels.tsx
Use types over interfaces for TypeScript
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
apps/webapp/app/components/SetupCommands.tsxapps/webapp/app/components/BlankStatePanels.tsx
🔇 Additional comments (3)
apps/webapp/app/components/BlankStatePanels.tsx (2)
12-12: LGTM!
184-184: 🎯 Functional CorrectnessNo change is needed.
StepNumberdefaultsdisplaySpinnertofalse, so removing the prop does not render a spinner when disconnected.apps/webapp/app/components/SetupCommands.tsx (1)
1-1: LGTM!
@trigger.dev/build
trigger.dev
@trigger.dev/core
@trigger.dev/python
@trigger.dev/react-hooks
@trigger.dev/redis-worker
@trigger.dev/rsc
@trigger.dev/schema-to-json
@trigger.dev/sdk
commit: |
2 participants
Visual-only changes to the Tasks-page onboarding blank state (brand-new project, dev environment). Formatting, lint, and knip pass via the pre-push hooks; open the Tasks page for a new project to confirm the panel, copy button, and step 2 render as intended.
Changelog
Polished the "Set it up with your AI agent" onboarding panel: top-aligned the badge and switched it to the custom Ask AI sparkle icon, stopped the copy-prompt button from resizing when it swaps to "Copied prompt" (the bright check icon now sits beside the label), removed the sparkle from the button's idle state, removed the spinner next to "Start the dev server", and widened the gap between the panel text and the copy button.
Screenshots
🤖 Generated with Claude Code
Open workspace in Conductor