fix(dashboard): keep quick-start visible on bridge connect and drop p…#10761
fix(dashboard): keep quick-start visible on bridge connect and drop p…#10761
Conversation
…laceholder Activity tab Users completing the agent quick-start lost all context the moment the bridge connected because the overview swapped to the connected view and the setup guide replaced itself with a "Coming soon" placeholder — leaving no prompt to go back and tag the bot with the new agent server. - Snapshot bridge-connected state on mount in the overview tab so in-flight setups stay on the guide while return visits skip the quick-start. - Drop the "Coming soon" placeholder in the setup guide and always render the flow so the final step remains visible. - Replace the terminal "Bridge connected" copy with a provider-aware prompt (Slack / WhatsApp / generic) telling users to message the bot again. - Remove the unfinished Activity tab and its references across the agent details page, integrations quick actions, and recent conversations section.
✅ 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 |
📝 WalkthroughWalkthroughRemoves the Activity tab and related routing/links; refactors RecentConversationsSection to take no props; updates agent setup wiring to pass an optional providerId into AgentCodeSetupSection and render provider-specific CTA when bridge is connected; freezes the setup vs connected UI based on mount state; Slack/WhatsApp guides hide setup steps when already connected. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
apps/dashboard/src/components/agents/agent-setup-guide.tsx (1)
136-143: Minor:isProviderCompletenow mirrorshasConnectedIntegration.You're passing
hasConnectedIntegrationas both the render gate and asisProviderComplete. InsideAgentCodeSetupSection,isProviderCompleteonly affectsfirstIncompleteStepwhen the bridge isn't connected — so in practice it's alwaystruehere, making theelse if (isProviderComplete)branch the only non-bridge path. Consider either dropping the prop or passing the more preciseisProviderCompletestate so the step-status logic remains meaningful if the gating condition diverges later.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dashboard/src/components/agents/agent-setup-guide.tsx` around lines 136 - 143, The AgentCodeSetupSection is being rendered only when hasConnectedIntegration is true but isProviderComplete is also set to hasConnectedIntegration, which makes the prop redundant and collapses the firstIncompleteStep logic; change the call site so isProviderComplete is either omitted (if the section can derive it internally) or pass the actual completeness state (a more specific boolean, e.g., isProviderFullyConfigured) instead of hasConnectedIntegration so AgentCodeSetupSection's firstIncompleteStep branching remains meaningful; update the usage around AgentCodeSetupSection and ensure the component reads the new prop (or computes it) rather than relying on the gating boolean.apps/dashboard/src/components/agents/agent-code-setup-section.tsx (1)
111-120: Consider typingproviderIdasChatProviderIdEnum | undefined.Since the CTA branches on
ChatProviderIdEnumvalues and this section is only rendered for chat providers, typing the parameter (and the prop chain up throughAgentCodeSetupSection) asChatProviderIdEnum | undefinedwould give exhaustiveness checking in the switch and catch mistakes at the call site. Non-blocking.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dashboard/src/components/agents/agent-code-setup-section.tsx` around lines 111 - 120, Change the getProviderCallToAction parameter from string | undefined to ChatProviderIdEnum | undefined and update the prop types on AgentCodeSetupSection (and any intermediate props) to use ChatProviderIdEnum | undefined so the switch in getProviderCallToAction is type-safe and can get exhaustiveness checking; ensure all call sites pass a ChatProviderIdEnum (or undefined) rather than raw strings and adjust any imports/types accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@apps/dashboard/src/components/agents/agent-code-setup-section.tsx`:
- Around line 111-120: Change the getProviderCallToAction parameter from string
| undefined to ChatProviderIdEnum | undefined and update the prop types on
AgentCodeSetupSection (and any intermediate props) to use ChatProviderIdEnum |
undefined so the switch in getProviderCallToAction is type-safe and can get
exhaustiveness checking; ensure all call sites pass a ChatProviderIdEnum (or
undefined) rather than raw strings and adjust any imports/types accordingly.
In `@apps/dashboard/src/components/agents/agent-setup-guide.tsx`:
- Around line 136-143: The AgentCodeSetupSection is being rendered only when
hasConnectedIntegration is true but isProviderComplete is also set to
hasConnectedIntegration, which makes the prop redundant and collapses the
firstIncompleteStep logic; change the call site so isProviderComplete is either
omitted (if the section can derive it internally) or pass the actual
completeness state (a more specific boolean, e.g., isProviderFullyConfigured)
instead of hasConnectedIntegration so AgentCodeSetupSection's
firstIncompleteStep branching remains meaningful; update the usage around
AgentCodeSetupSection and ensure the component reads the new prop (or computes
it) rather than relying on the gating boolean.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: eda0818f-3fab-4e23-9b35-8f2c04581fdb
📒 Files selected for processing (8)
apps/dashboard/src/components/agents/agent-code-setup-section.tsxapps/dashboard/src/components/agents/agent-connected-overview.tsxapps/dashboard/src/components/agents/agent-integrations-tab.tsxapps/dashboard/src/components/agents/agent-overview-tab.tsxapps/dashboard/src/components/agents/agent-setup-guide.tsxapps/dashboard/src/components/agents/recent-conversations-section.tsxapps/dashboard/src/pages/agent-details.tsxapps/dashboard/src/utils/routes.ts
💤 Files with no reviewable changes (2)
- apps/dashboard/src/components/agents/agent-integrations-tab.tsx
- apps/dashboard/src/pages/agent-details.tsx
Compute isConnected from integrationLink?.connectedAt in Slack and WhatsApp integration guides and show a connected-specific overview while hiding the setup steps when already connected. In agent-integrations-tab, switch the action-needed check to use link.connectedAt (instead of int.active) and change the status icon color from error to warning to better reflect connection state. These changes improve UX by surfacing the correct connection status and avoiding redundant setup instructions for already-connected integrations.
There was a problem hiding this comment.
🧹 Nitpick comments (2)
apps/dashboard/src/components/agents/agent-integration-guides/slack-agent-integration-guide.tsx (1)
40-72: Optional: Extract the shared connected/disconnected guide scaffold.Both Slack and WhatsApp guides now share an identical structure (Overview with
isConnectedternary +!isConnected && Stepsblock with a "Steps" heading wrapper). As more providers are added, consider lifting the Steps wrapper andisConnected-gated rendering intoAgentIntegrationGuideLayout(or a small helper component) so each provider guide only supplies its copy and step definitions. Not blocking.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dashboard/src/components/agents/agent-integration-guides/slack-agent-integration-guide.tsx` around lines 40 - 72, The Slack guide repeats the same connected/disconnected scaffold and Steps wrapper used by WhatsApp; extract that shared UI into a new AgentIntegrationGuideLayout (or helper) that accepts isConnected, overview content, and an array/children of AgentIntegrationGuideStep entries, move the isConnected ternary and the "!isConnected && Steps" wrapper into that layout, and update slack-agent-integration-guide.tsx (and the WhatsApp counterpart) to render AgentIntegrationGuideLayout passing the specific overview JSX and step definitions while keeping existing symbols AgentIntegrationGuideSection, AgentIntegrationGuideStep and the isConnected prop intact.apps/dashboard/src/components/agents/agent-integrations-tab.tsx (1)
449-461: Consider exposing status in the accessible name as well.Minor a11y nit: the warning icon uses
aria-label="Action needed"and the success dot usesaria-label="Active", but the parent<button>only exposes the provider name. Screen reader users navigating the provider list hear just the name; the status is announced only if they traverse into children. Consider adding the status to the button's accessible name (e.g.aria-label={${int.name} — ${showActionNeeded ? 'Action needed' : 'Active'}}) so the state is conveyed on the button itself.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dashboard/src/components/agents/agent-integrations-tab.tsx` around lines 449 - 461, The provider list's status icons (showActionNeeded and the success dot) have aria-labels but the parent button only exposes the provider name, so screen readers won't announce the status; update the button that renders each provider (the component rendering int.name and the status icon) to include the status in its accessible name by setting its aria-label to combine int.name with the status string (e.g., use showActionNeeded ? "Action needed" : "Active"), ensuring the button's accessible name conveys both the provider name and current status.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In
`@apps/dashboard/src/components/agents/agent-integration-guides/slack-agent-integration-guide.tsx`:
- Around line 40-72: The Slack guide repeats the same connected/disconnected
scaffold and Steps wrapper used by WhatsApp; extract that shared UI into a new
AgentIntegrationGuideLayout (or helper) that accepts isConnected, overview
content, and an array/children of AgentIntegrationGuideStep entries, move the
isConnected ternary and the "!isConnected && Steps" wrapper into that layout,
and update slack-agent-integration-guide.tsx (and the WhatsApp counterpart) to
render AgentIntegrationGuideLayout passing the specific overview JSX and step
definitions while keeping existing symbols AgentIntegrationGuideSection,
AgentIntegrationGuideStep and the isConnected prop intact.
In `@apps/dashboard/src/components/agents/agent-integrations-tab.tsx`:
- Around line 449-461: The provider list's status icons (showActionNeeded and
the success dot) have aria-labels but the parent button only exposes the
provider name, so screen readers won't announce the status; update the button
that renders each provider (the component rendering int.name and the status
icon) to include the status in its accessible name by setting its aria-label to
combine int.name with the status string (e.g., use showActionNeeded ? "Action
needed" : "Active"), ensuring the button's accessible name conveys both the
provider name and current status.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: d7a68e84-8a44-4bcc-b76b-6af3148940cb
📒 Files selected for processing (3)
apps/dashboard/src/components/agents/agent-integration-guides/slack-agent-integration-guide.tsxapps/dashboard/src/components/agents/agent-integration-guides/whatsapp-agent-integration-guide.tsxapps/dashboard/src/components/agents/agent-integrations-tab.tsx
Drop the isProviderComplete prop from AgentCodeSetupSection and simplify firstIncompleteStep logic (caller only renders this section once a provider is connected). Update AgentSetupGuide to stop passing the removed prop. In AgentIntegrationsTab, add a statusLabel and an accessible aria-label on the integration button, mark the icon container as aria-hidden, and remove redundant aria-labels from purely decorative elements to reduce duplicate announcements and improve accessibility.
There was a problem hiding this comment.
🧹 Nitpick comments (2)
apps/dashboard/src/components/agents/agent-code-setup-section.tsx (2)
122-130: MakeproviderIdoptional in the inline prop type for consistency.
AgentCodeSetupSectionProps.providerIdis declaredproviderId?: string(line 214), but the inline type here usesproviderId: string | undefined, which is a required prop that acceptsundefined. Functionally equivalent at call sites today, but the mismatch is a minor foot-gun if anyone usesBridgeConnectionStatusdirectly or spreads props.♻️ Proposed tweak
function BridgeConnectionStatus({ agent, agentIdentifier, providerId, }: { agent: AgentResponse; agentIdentifier: string; - providerId: string | undefined; + providerId?: string; }) {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dashboard/src/components/agents/agent-code-setup-section.tsx` around lines 122 - 130, The inline prop type for BridgeConnectionStatus should declare providerId as optional to match AgentCodeSetupSectionProps; update the function signature/type annotation for BridgeConnectionStatus so providerId is typed as providerId?: string (instead of providerId: string | undefined) to avoid the subtle required-prop foot-gun when spreading or calling the component directly.
136-175: Pre-existing: consider migrating the bridge polling to TanStack Query.Not introduced by this PR, but while you're here: this
setInterval+getAgent+ manualinvalidateQueriespattern is what the repo coding guidelines steer away from (useQuery/useMutationfor server state). AuseQuerywithrefetchInterval: BRIDGE_POLL_INTERVAL_MS,enabled: !isBridgeConnected, and aselectfor the connected boolean would give you cancellation, background-refetch pausing, and cache sharing withgetAgentDetailQueryKey(...)for free — and likely lets you drop the localconnectedstate entirely.Happy to defer to a follow-up; flagging so it doesn't get forgotten. As per coding guidelines: "Use TanStack Query (
useQuery,useMutation) for all server state — do not useuseEffect+fetchdirectly".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dashboard/src/components/agents/agent-code-setup-section.tsx` around lines 136 - 175, Replace the manual polling effect with a TanStack Query: create a useQuery keyed by getAgentDetailQueryKey(currentEnvironment._id, agentIdentifier) that calls getAgent(environment, agentIdentifier), set refetchInterval: BRIDGE_POLL_INTERVAL_MS, and enabled: !!currentEnvironment && !isBridgeConnected; use the query's select to return the connected boolean (Boolean(data.bridgeUrl || (data.devBridgeActive && data.devBridgeUrl))) so you can drop the setInterval, cancelled logic and local setConnected usage, and rely on the query cache and automatic refetch/invalidation instead.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@apps/dashboard/src/components/agents/agent-code-setup-section.tsx`:
- Around line 122-130: The inline prop type for BridgeConnectionStatus should
declare providerId as optional to match AgentCodeSetupSectionProps; update the
function signature/type annotation for BridgeConnectionStatus so providerId is
typed as providerId?: string (instead of providerId: string | undefined) to
avoid the subtle required-prop foot-gun when spreading or calling the component
directly.
- Around line 136-175: Replace the manual polling effect with a TanStack Query:
create a useQuery keyed by getAgentDetailQueryKey(currentEnvironment._id,
agentIdentifier) that calls getAgent(environment, agentIdentifier), set
refetchInterval: BRIDGE_POLL_INTERVAL_MS, and enabled: !!currentEnvironment &&
!isBridgeConnected; use the query's select to return the connected boolean
(Boolean(data.bridgeUrl || (data.devBridgeActive && data.devBridgeUrl))) so you
can drop the setInterval, cancelled logic and local setConnected usage, and rely
on the query cache and automatic refetch/invalidation instead.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 51642a0e-b242-429b-aba3-df4055fb8d44
📒 Files selected for processing (3)
apps/dashboard/src/components/agents/agent-code-setup-section.tsxapps/dashboard/src/components/agents/agent-integrations-tab.tsxapps/dashboard/src/components/agents/agent-setup-guide.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/dashboard/src/components/agents/agent-integrations-tab.tsx
- apps/dashboard/src/components/agents/agent-setup-guide.tsx
There was a problem hiding this comment.
🧹 Nitpick comments (1)
apps/dashboard/src/components/agents/create-agent-dialog.tsx (1)
178-182: Consider re-enabling auto-sync when the identifier is cleared.Marking
isIdentifierTouchedastrueon any change means that if the user clears the identifier field entirely (e.g., to start over), typing into the name field will no longer repopulate it. Treating an empty value as "untouched" would restore the auto-sync behavior in that case.♻️ Proposed tweak
onChange={(e) => { - setIdentifier(e.target.value); - setIsIdentifierTouched(true); + const nextIdentifier = e.target.value; + setIdentifier(nextIdentifier); + setIsIdentifierTouched(nextIdentifier.length > 0); setErrors((prev) => ({ ...prev, identifier: undefined })); }}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dashboard/src/components/agents/create-agent-dialog.tsx` around lines 178 - 182, The onChange handler for the identifier field currently always sets setIsIdentifierTouched(true), which prevents auto-sync from repopulating the identifier from the name once the user clears the field; change the handler in create-agent-dialog's identifier input so that setIsIdentifierTouched(true) is only called when e.target.value is non-empty (use setIsIdentifierTouched(false) or omit setting it when the value === ''), and keep setIdentifier and setErrors updates as-is so clearing the identifier treats it as "untouched" and restores auto-sync from the name field.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@apps/dashboard/src/components/agents/create-agent-dialog.tsx`:
- Around line 178-182: The onChange handler for the identifier field currently
always sets setIsIdentifierTouched(true), which prevents auto-sync from
repopulating the identifier from the name once the user clears the field; change
the handler in create-agent-dialog's identifier input so that
setIsIdentifierTouched(true) is only called when e.target.value is non-empty
(use setIsIdentifierTouched(false) or omit setting it when the value === ''),
and keep setIdentifier and setErrors updates as-is so clearing the identifier
treats it as "untouched" and restores auto-sync from the name field.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 68285173-c20e-46b0-a5dc-6055ac4f1fec
📒 Files selected for processing (1)
apps/dashboard/src/components/agents/create-agent-dialog.tsx
1 participant
Placeholder Activity tab
Users completing the agent quick-start lost all context the moment the bridge connected because the overview swapped to the connected view and the setup guide replaced itself with a "Coming soon" placeholder — leaving no prompt to go back and tag the bot with the new agent server.
What changed? Why was the change needed?
What changed
This PR improves agent setup UX by freezing the quick-start flow when a bridge connection occurs mid-setup, always rendering the full setup guide (removing the "Coming soon" placeholder), replacing the generic "Bridge connected" text with provider-aware prompts (Slack / WhatsApp / generic) instructing users to message the bot again, and removing the unfinished Activity tab and its related links. The intent is to prevent mid-setup UI jumps, give actionable post-connection guidance, and simplify the agent details UI by removing incomplete features.
Affected areas
dashboard: Snapshot bridge-connected state on mount in the overview tab so in-flight quick-starts remain visible; render the full Agent Setup Guide unconditionally; make bridge-connected copy provider-aware and thread providerId into connection UI; remove the Activity tab from tabs, routing constants, and UI links; simplify RecentConversationsSection to a presentation-only component (removed agent prop and routing/env coupling); adjust integrations/quick-actions to drop activity navigation and update provider status labeling and accessibility.
Key technical decisions
Testing
No new automated tests were added; changes are behavioral/UI-focused. Manual verification is recommended: ensure quick-start remains visible when bridge connects mid-setup, provider-specific post-connection copy appears for Slack/WhatsApp/generic, and the Activity tab and its links are removed across agent pages.
Screenshots
Expand for optional sections
Related enterprise PR
Special notes for your reviewer