feat(dashboard): Add Agents page, early access endpoint, and update navigation#10673
feat(dashboard): Add Agents page, early access endpoint, and update navigation#10673
Conversation
Introduce a new Agents page and its teaser asset (apps/dashboard/src/pages/agents.tsx, apps/dashboard/public/images/agents-teaser.svg). Update dashboard navigation and app entry (side-navigation.tsx, main.tsx) and the routes utility to register and link the new Agents route so the section is reachable from the UI.
Introduce an AgentsEarlyAccess DTO and a new authenticated POST /support/agents-early-access endpoint that assembles organization/user info and triggers the Novu workflow (if NOVU_SECRET_KEY is set). Inject OrganizationRepository and PinoLogger into the SupportController and set logger context. On the dashboard side, add client-side form types, validation, react-query mutation to post requests, success/error toasts, loading state, and inline error UI for the Agents Early Access dialog.
✅ Deploy preview added
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Hey there and thank you for opening this pull request! 👋 We require pull request titles to follow specific formatting rules and it looks like your proposed title needs to be adjusted. Your PR title is: Requirements:
Expected format: Details: PR title must end with 'fixes TICKET-ID' (e.g., 'fixes NOV-123') or include ticket ID in branch name |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughAdds an Agents early access feature: frontend Agents page and dialog that POSTs requests to a new authenticated backend endpoint which validates DTOs, loads organization data, and conditionally triggers a Novu workflow. Changes
Sequence DiagramsequenceDiagram
actor User
participant Browser as "Browser UI"
participant AgentsPage as "Agents Page / Dialog"
participant API as "API Endpoint"
participant OrgRepo as "Organization Repository"
participant Novu as "Novu Service"
User->>Browser: Navigate to Agents page
Browser->>AgentsPage: Open Early Access dialog
User->>AgentsPage: Fill form and submit
AgentsPage->>AgentsPage: Validate fields (providers, description)
AgentsPage->>API: POST /support/agents-early-access
activate API
API->>OrgRepo: findById(organizationId)
activate OrgRepo
OrgRepo-->>API: organizationName
deactivate OrgRepo
API->>API: read NOVU_SECRET_KEY
alt NOVU_SECRET_KEY present
API->>Novu: trigger workflow early-access-request-agents-internal-email (payload + user/org)
activate Novu
Novu-->>API: workflow response
deactivate Novu
else secret missing
API-->>API: log warning, skip Novu
end
API-->>AgentsPage: { success: true }
deactivate API
AgentsPage->>Browser: show success toast, reset & close dialog
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Suggested reviewers
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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 |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
apps/dashboard/src/pages/agents.tsx (3)
214-218: Add blank line before earlyreturnstatement.Per coding guidelines, include a blank line before every
returnstatement.✏️ Suggested fix
if (Object.keys(nextErrors).length > 0) { setFormErrors(nextErrors); + return; }As per coding guidelines: "Include a blank line before every
returnstatement"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dashboard/src/pages/agents.tsx` around lines 214 - 218, Add a blank line before the early return inside the validation block so there is an empty line between the setFormErrors(nextErrors); call and the return statement; update the block containing Object.keys(nextErrors).length check (the code using nextErrors and setFormErrors) to insert that blank line and re-run formatting/linting to ensure it matches project style.
119-130: Add blank line beforereturnstatement.Per coding guidelines, include a blank line before every
returnstatement.✏️ Suggested fix
function AgentsPill({ children, className }: AgentsPillProps) { + return ( <spanAs per coding guidelines: "Include a blank line before every
returnstatement"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dashboard/src/pages/agents.tsx` around lines 119 - 130, The AgentsPill component violates the style rule requiring a blank line before return; update the AgentsPill function so there is an empty line immediately before the return statement in function AgentsPill({ children, className }: AgentsPillProps) to satisfy the coding guidelines.
426-431: Add blank line beforereturnstatement inAgentsPage.Per coding guidelines, include a blank line before every
returnstatement.✏️ Suggested fix
export function AgentsPage() { const [earlyAccessOpen, setEarlyAccessOpen] = useState(false); + return (As per coding guidelines: "Include a blank line before every
returnstatement"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dashboard/src/pages/agents.tsx` around lines 426 - 431, The function AgentsPage is missing a blank line immediately before its return; update the AgentsPage component by inserting a single blank line before the return statement in the AgentsPage function so the code follows the guideline of having a blank line before every return.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/api/src/app/support/support.controller.ts`:
- Around line 56-70: Wrap the novu.trigger call inside the support controller
method in a try-catch: catch any error from novu.trigger, log the error with
context (include the workflowId and payload like
howAgentRunsToday/whatAgentDoes/plannedProviders/organizationId/userEmail) and
return a controlled failure to the client (e.g., throw a BadGatewayException or
respond with a 502 and a brief message) instead of letting the exception
propagate; ensure you reference the novu.trigger invocation and its payload when
adding the log and error handling.
---
Nitpick comments:
In `@apps/dashboard/src/pages/agents.tsx`:
- Around line 214-218: Add a blank line before the early return inside the
validation block so there is an empty line between the
setFormErrors(nextErrors); call and the return statement; update the block
containing Object.keys(nextErrors).length check (the code using nextErrors and
setFormErrors) to insert that blank line and re-run formatting/linting to ensure
it matches project style.
- Around line 119-130: The AgentsPill component violates the style rule
requiring a blank line before return; update the AgentsPill function so there is
an empty line immediately before the return statement in function AgentsPill({
children, className }: AgentsPillProps) to satisfy the coding guidelines.
- Around line 426-431: The function AgentsPage is missing a blank line
immediately before its return; update the AgentsPage component by inserting a
single blank line before the return statement in the AgentsPage function so the
code follows the guideline of having a blank line before every return.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 7bce98ae-02cb-4a74-88a9-94a94d3a07ae
⛔ Files ignored due to path filters (1)
apps/dashboard/public/images/agents-teaser.svgis excluded by!**/*.svg
📒 Files selected for processing (6)
apps/api/src/app/support/dtos/agents-early-access.dto.tsapps/api/src/app/support/support.controller.tsapps/dashboard/src/components/side-navigation/side-navigation.tsxapps/dashboard/src/main.tsxapps/dashboard/src/pages/agents.tsxapps/dashboard/src/utils/routes.ts
| await novu.trigger({ | ||
| workflowId: 'early-access-request-agents-internal-email', | ||
| to: { | ||
| subscriberId: 'dima-internal', | ||
| email: 'dima@novu.co', | ||
| }, | ||
| payload: { | ||
| howAgentRunsToday: body.howAgentRunsToday.label, | ||
| whatAgentDoes: body.whatAgentDoes, | ||
| plannedProviders: body.plannedProviders.map((p) => p.label), | ||
| organizationId: user.organizationId, | ||
| organizationName, | ||
| userEmail: user.email ?? '', | ||
| }, | ||
| }); |
There was a problem hiding this comment.
Add error handling for the Novu workflow trigger.
If novu.trigger() fails (network issue, invalid workflow ID, etc.), the exception will propagate and return a 500 error to the client. Consider wrapping this in a try-catch to provide a graceful failure response or at minimum log the error.
🛡️ Proposed fix to add error handling
+ try {
await novu.trigger({
workflowId: 'early-access-request-agents-internal-email',
to: {
subscriberId: 'dima-internal',
email: 'dima@novu.co',
},
payload: {
howAgentRunsToday: body.howAgentRunsToday.label,
whatAgentDoes: body.whatAgentDoes,
plannedProviders: body.plannedProviders.map((p) => p.label),
organizationId: user.organizationId,
organizationName,
userEmail: user.email ?? '',
},
});
+ } catch (error) {
+ this.logger.error('Failed to trigger early-access-request-agents-internal-email workflow', error);
+
+ return {
+ success: false,
+ };
+ }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/api/src/app/support/support.controller.ts` around lines 56 - 70, Wrap
the novu.trigger call inside the support controller method in a try-catch: catch
any error from novu.trigger, log the error with context (include the workflowId
and payload like
howAgentRunsToday/whatAgentDoes/plannedProviders/organizationId/userEmail) and
return a controlled failure to the client (e.g., throw a BadGatewayException or
respond with a 502 and a brief message) instead of letting the exception
propagate; ensure you reference the novu.trigger invocation and its payload when
adding the log and error handling.
What changed? Why was the change needed?
What changed
A new Agents page is now accessible in the dashboard, allowing users to request early access. The feature includes a backend endpoint that collects early access requests with details about how agents run today and planned provider integrations, then triggers a Novu workflow to notify internal teams. The UI adds an "Agents" navigation link and a dedicated page with a form to submit early access requests.
Affected areas
api: Added
AgentsEarlyAccessDtowith nested validation for agent configuration data. UpdatedSupportControllerwith dependency injection ofOrganizationRepositoryandPinoLogger, and added a new authenticatedPOST /support/agents-early-accessendpoint that loads organization details, assembles request metadata, and triggers theearly-access-request-agents-internal-emailNovu workflow whenNOVU_SECRET_KEYis configured.dashboard: Added a new
AgentsPagecomponent with an early access request dialog featuring a form (agent run selector, multi-select provider picker with removable tags, and description textarea). Updated side navigation to include an "Agents" link and organized navigation groups with a new "Content" section. Registered the agents route in the main router and added the route constant to the routes utility.Key technical decisions
NOVU_SECRET_KEYenvironment variable; requests log a warning and return success without triggering the workflow if the key is missing.Testing
No automated tests were added. Manual verification of the form submission flow, Novu workflow trigger, and navigation would be appropriate before merging.
Screenshots
Expand for optional sections
Related enterprise PR
Special notes for your reviewer