fix(frontend): fix agent creation UX wizard — all ACs (EVO-995)#45
Merged
Conversation
- Always render AI helper buttons (Generate/Review) in Step5; disable with tooltip when OpenAI is not configured instead of hiding them - Move 'Create new tool' button to dialog header in CustomToolsSelectionDialog so it is always visible alongside search - Rewrite agent-type card descriptions in all 6 locales (en, pt-BR, pt, es, fr, it) to clearly differentiate LLM, Task, Sequential, Parallel, Loop and External types - Add aiNotConfigured tooltip i18n key to all 6 locales Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Reviewer's GuideUpdates the agent creation wizard to always show AI helper buttons with disabled-state tooltips when AI is not configured, relocates the custom tool creation action into the tools selection dialog header, and revises i18n strings across all supported locales for clearer agent-type descriptions and an AI-not-configured tooltip message. Sequence diagram for custom tool creation from selection dialog headersequenceDiagram
actor User
participant AgentWizard
participant CustomToolsSelectionDialog
participant Router
participant CustomToolsPage
User->>AgentWizard: Open_custom_tools_selection_dialog
AgentWizard->>CustomToolsSelectionDialog: render_dialog
User->>CustomToolsSelectionDialog: Click_create_new_tool_button
CustomToolsSelectionDialog->>CustomToolsSelectionDialog: onOpenChange_false
CustomToolsSelectionDialog->>Router: navigate_agents_custom_tools
Router->>CustomToolsPage: render_custom_tools_page
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've found 1 issue, and left some high level feedback:
- The
aiNotConfiguredtooltip logic is duplicated for both AI buttons inStep5_Instructions; consider extracting a small helper/Wrapper component or shared function to render the tooltip+trigger combo so behavior stays consistent and easier to maintain.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The `aiNotConfigured` tooltip logic is duplicated for both AI buttons in `Step5_Instructions`; consider extracting a small helper/Wrapper component or shared function to render the tooltip+trigger combo so behavior stays consistent and easier to maintain.
## Individual Comments
### Comment 1
<location path="src/pages/Customer/Agents/Agent/wizard/Step5_Instructions.tsx" line_range="82-80" />
<code_context>
- </>
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <span tabIndex={showAIActions ? undefined : 0}>
+ <Button
+ type="button"
+ variant="outline"
</code_context>
<issue_to_address>
**suggestion:** Reconsider wrapping a disabled Button in a focusable span for better accessibility semantics.
The current pattern (focusable span + disabled Button + Tooltip) makes focus land on a non-control element while the actual Button is disabled, which is suboptimal for screen readers. Consider using `aria-disabled` instead of `disabled` on the Button and still gating `onClick` with `showAIActions`, so focus and semantics remain on the Button while preserving the tooltip behavior when AI actions are unavailable.
Suggested implementation:
```typescript
<Tooltip>
<TooltipTrigger asChild>
<Button
type="button"
variant="outline"
```
```typescript
aria-disabled={!showAIActions}
```
```typescript
</Button>
</TooltipTrigger>
```
To fully implement the suggestion:
1. Ensure the `Button`'s `onClick` handler only triggers when `showAIActions` is true, e.g.:
```tsx
onClick={showAIActions ? handleGenerateInstructions : undefined}
```
or inside the handler:
```tsx
const handleGenerateInstructionsClick = () => {
if (!showAIActions) return;
// existing logic...
};
```
2. If any tests assert that the button is `disabled`, update them to check `aria-disabled` instead and verify click behavior via `showAIActions`.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
- Make role field required in Step4_RoleGoal: inline validation + disabled Continue button prevents empty role from reaching the backend (500 fix) - Rework CustomToolsSelectionDialog: replace navigate-away with inline sub-dialog using CustomToolForm, preserving wizard state on create - Fix Step5_Instructions accessibility: replace <span tabIndex> wrappers with aria-disabled on Button elements; remove redundant onClick guard - Fix translation "chata" -> "conversa" in pt-BR and pt LLM card description - Translate Sequential/Parallel labels in pt-BR, pt, es, fr, it locales - Add Step5_Instructions.spec.tsx: 5 tests covering disabled/aria-disabled state per OpenAI config and Review button conditional visibility - Add CustomToolsSelectionDialog.spec.tsx: 3 tests covering header button presence and inline sub-dialog open/cancel flow - Add story file under _evo-output/implementation-artifacts/ Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
marcelogorutuba
changed the title
dpaes
approved these changes
May 13, 2026
dpaes
left a comment
dpaes
left a comment
Contributor
There was a problem hiding this comment.
Round 2 aprovado. 4 dos 5 ACs do round 1 corrigidos com qualidade (AC1 com investigação confirmando que não existe dropdown; AC2 tooltip aria-disabled; AC3 inline sub-dialog preserva estado; AC4 traduções enriquecidas). AC5 parcial (Step4 com pattern completo; Step5 + demais viram follow-up Low). 8 testes adicionados. Detalhes completos no card Linear EVO-995. Follow-up Low aberto. Mergeando.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Addresses all 5 ACs from EVO-995 and all review corrections from @daniel.paes.
AC Coverage
Review Corrections Applied
Step4_RoleGoal— role is now required; inline error + disabled Continue button prevent empty-role 500CustomToolsSelectionDialog— "Create new tool" opens a sub-dialog (CustomToolForm) on top of the selection dialog, preserving wizard state; allnavigate()calls removed<span tabIndex>wrappers inStep5_Instructions; addedaria-disableddirectly on Button elements"chata"→"conversa"in LLM card descriptiononClickguard on Generate button in Step5Step5_Instructions.spec.tsx(5 tests) andCustomToolsSelectionDialog.spec.tsx(3 tests) — 8/8 passing_evo-output/implementation-artifacts/EVO-995-agent-creation-ux.mdValidation
evo-ai-frontend-community: pnpm exec tsc -b --noEmit— ✅ no errorsevo-ai-frontend-community: pnpm exec eslint <changed files>— ✅ no errorsevo-ai-frontend-community: pnpm test Step5_Instructions.spec.tsx CustomToolsSelectionDialog.spec.tsx— ✅ 8/8Changed Files
src/pages/Customer/Agents/Agent/wizard/Step4_RoleGoal.tsxsrc/pages/Customer/Agents/Agent/wizard/Step5_Instructions.tsxsrc/pages/Customer/Agents/Agent/wizard/Step5_Instructions.spec.tsxsrc/components/ai_agents/Dialogs/CustomToolsSelectionDialog.tsxsrc/components/ai_agents/Dialogs/CustomToolsSelectionDialog.spec.tsxsrc/i18n/locales/pt-BR/aiAgents.jsonsrc/i18n/locales/pt/aiAgents.jsonsrc/i18n/locales/es/aiAgents.jsonsrc/i18n/locales/fr/aiAgents.jsonsrc/i18n/locales/it/aiAgents.json_evo-output/implementation-artifacts/EVO-995-agent-creation-ux.mdLinked Issue
🤖 Generated with Claude Code