Skip to content

Refactor agent form UX: add section rail layout and Memory placeholder#228

Draft
esafwan wants to merge 1 commit into
claude/refactor-agent-form-6rnVnfrom
codex/implement-ux-updates-for-form
Draft

Refactor agent form UX: add section rail layout and Memory placeholder#228
esafwan wants to merge 1 commit into
claude/refactor-agent-form-6rnVnfrom
codex/implement-ux-updates-for-form

Conversation

@esafwan
Copy link
Copy Markdown
Contributor

@esafwan esafwan commented Mar 28, 2026

Motivation

  • Provide a reusable, future-proof base for the Agent form UI so tabs can be composed from smaller sections and the form surface scales without becoming a god-component.
  • Surface the forthcoming Memory tab in the UI as a disabled/coming-soon preview while preventing use until backend integration is merged.
  • Preserve existing behavior, validation and provider/model wiring while making layout and section metadata reusable across tabs.

Description

  • Added a small form-base component set: SectionRailLayout and SectionBlock to render a left-side section rail with status dots and anchor navigation (frontend/src/components/agent/form-base/SectionRailLayout.tsx).
  • Refactored GeneralTab to the new section-rail layout and split it into Identity, Model, and Instructions sections while keeping provider/model filtering, sliders and the instructions textarea (frontend/src/components/agent/GeneralTab.tsx).
  • Refactored BehaviorTab to the section-rail pattern and split it into Chat Access, History, and Execution sections while keeping the existing cross-field logic and toasts (frontend/src/components/agent/BehaviorTab.tsx).
  • Added a non-interactive Memory tab placeholder marked “Coming Soon” so the structure is visible but inputs are disabled until the feature is merged (frontend/src/components/agent/MemoryTab.tsx) and wired the tab into AgentFormPage (updated tab config and tab bar columns) (frontend/src/pages/AgentFormPage.tsx).

Testing

  • Ran ESLint for the new/updated files with npx eslint src/components/agent/GeneralTab.tsx src/components/agent/BehaviorTab.tsx src/components/agent/MemoryTab.tsx src/components/agent/form-base/SectionRailLayout.tsx and the checked files passed without errors.
  • Ran type checking with npm run typecheck and it failed due to a pre-existing, unrelated TypeScript type mismatch in src/components/agent/TriggerModal.tsx; the type error is not introduced by these changes and requires a separate fix.

Codex Task

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant