Skip to content

feat: refactor the agents admin UI layout#22567

Merged
kylecarbs merged 11 commits intomainfrom
agent-admin-ux
Mar 3, 2026
Merged

feat: refactor the agents admin UI layout#22567
kylecarbs merged 11 commits intomainfrom
agent-admin-ux

Conversation

@kylecarbs
Copy link
Copy Markdown
Member

@kylecarbs kylecarbs commented Mar 3, 2026

I am working on a subsequent change to make the fields auto-generated with make gen from the Go code itself, rather than us needing to create a UI compatibility layer.

Once the above is done, I'll be adding in the payload so users can very easily just click "Opus 4.6" to add the model, and the config values will be set appropriately.

This is really just UI changes, nothing functionally should change here. But the code will be cleaned up a lot post the above changes.

image image image

@kylecarbs kylecarbs self-assigned this Mar 3, 2026
- Fix biome formatting (indentation) across all changed files
- Remove unused variable 'displayNameField' in ModelForm.tsx
- Remove unused import 'formatProviderLabel' in ModelForm.tsx
- Remove unused destructured 'label' in ProviderForm.tsx
- Add DeleteDialog confirmation to ProviderForm delete action
- Wire up model deletion from ModelForm to ModelsSection's DeleteDialog
- Fix ProvidersSection to fall back to list view when provider disappears
- Replace template string classNames with cn() utility in ProvidersSection
  and ModelsSection for consistency
@kylecarbs kylecarbs marked this pull request as ready for review March 3, 2026 18:36
- Add aria-label to provider list items for accessibility
- Update button labels: 'Connect' → 'Create provider config', 'Save' → 'Save changes'
- Add aria-label='Add model' to dropdown trigger button
- Update ModelForm submit button text: 'Add' → 'Add model'
- Remove ProviderSpecificModelConfigSchema story (feature was removed with modelConfigSchemas.ts)
- ModelConfigFields: inline renderProviderSpecificField (only called once)
- ModelForm: remove empty try/catch block, replace div role='button' with
  actual button elements, use formik getFieldProps for displayName
- ModelsSection: simplify ternary to function with if statements, use
  Tailwind divide-y utility instead of conditional borders, replace
  div role='button' with button element
- ProviderForm: replace useMemo with useState lazy initializer for
  initialValues, remove useEffect sync pattern (parent should handle
  re-keying), replace div role='button' with button element
- ProvidersSection: remove useEffect and do conditional setState during
  render, replace div role='button' with button element

These changes improve:
- Accessibility (semantic HTML buttons with native keyboard support)
- Code clarity (simpler conditionals, inlined single-use functions)
- React best practices (useState lazy init, no prop-to-state sync)
- Reduced LOC: 204 lines → 114 lines (-90)
The button elements from the previous commit made the UI look bad. Reverted
to div role='button' but with CORRECT keyboard handling based on useClickable:
- Enter key: onKeyDown (fires and repeats when held)
- Space key: onKeyUp (fires on release, no repeat)
- Both: stopPropagation to prevent bubbling

This matches native button behavior and maintains accessibility without
using the useClickable hook (which can't be used in conditionals or loops).

Updated files:
- ModelForm.tsx (3 clickable divs)
- ModelsSection.tsx (2 clickable divs in map)
- ProviderForm.tsx (1 clickable div)
- ProvidersSection.tsx (1 clickable div in map)
Copy link
Copy Markdown
Contributor

@DanielleMaywood DanielleMaywood left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, shame about the buttons but I'll revisit this in the future

One 'Back' button was using onKeyDown for both Enter and Space keys,
while all other clickable divs correctly use:
- onKeyDown for Enter (fires and repeats)
- onKeyUp for Space (fires on release, no repeat)

This inconsistency is now fixed for accessibility.
- EnvPresetProviders: navigate list→detail→back→detail per new pattern
- CreateAndUpdateProvider: wait for form to transition to update mode
  after create, then perform update without navigating away
- NoModelConfigByDefault, SubmitModelConfigExplicitly,
  ValidatesModelConfigFields: add openAddModelForm helper that clicks
  the dropdown trigger then selects provider from the menu
- Fix 'Model ID' → 'Model Identifier' label mismatch
- Fix 'Reasoning effort' → 'Reasoning Effort' label mismatch
- CreateAndUpdateProvider: clear API key field before retyping
- NoModelConfigByDefault, SubmitModelConfigExplicitly,
  ValidatesModelConfigFields: click 'Advanced' toggle to reveal
  Max Output Tokens field; use waitFor for dropdown menuitem

All 6 ChatModelAdminPanel interaction tests passing locally.
@kylecarbs kylecarbs merged commit 810b509 into main Mar 3, 2026
26 checks passed
@kylecarbs kylecarbs deleted the agent-admin-ux branch March 3, 2026 20:19
@github-actions github-actions bot locked and limited conversation to collaborators Mar 3, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants