feat: create AI agent configuration wizard with dynamic model preset selectors

[Cjay-Cyber-2]

Description

To improve the developer and operator experience during agent setup, we need a refined configuration panel. This issue involves building the configuration panel that handles provider options, dynamic models selection (based on the chosen provider, e.g. Nvidia, OpenAI, Ollama), behavior settings (temperature, max tokens), and prompt template presets.

Context & Requirements

• Target File: src/features/agents/components/AgentConfigPanel.tsx.
• Dynamic State logic: Selecting a provider should update the available model presets list immediately without clearing unrelated inputs in the same view.
• Templates: Users should have access to preconfigured system templates (e.g., risk analyst, high frequency arbitrageur, conservative auditor) to auto-populate prompt areas.

Acceptance Criteria

• Create the visual component AgentConfigPanel.tsx aligned with form components.
• Bind state models to dynamic datasets depending on selected AI providers.
• Include interactive sliders for settings like "Temperature" and "Max Tokens" using custom styled ranges.
• Build a dropdown that loads system prompt templates directly into the prompt text area with an option to override or custom edit the text afterwards.
• Ensure validation using Zod prevents setting critical fields empty.

Implementation Guidance

• Build inside src/features/agents/components/AgentConfigPanel.tsx.
• Maintain clear separation of concerns by placing template constants in a clean data utility module under the feature directory.
• Adhere strictly to the spacing and alignment styles set inside src/styles/tokens.css.

Testing & Validation

• Confirm selector changes update child inputs without causing unrelated component rerenders.
• Validate input bound protections (prevent setting temperatures below 0 or above 2).
• Test configuration flow accessibility using only keyboard navigation controls.

Submission Guidelines

• Open a PR that includes "Closes #".
• Assignment by a maintainer is required before starting development.
• Adhere to the project's strict TypeScript rules and formatting guidelines.

---

Wave complexity: Medium

[darius-daniel]

@darius-daniel has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

I’d like to work on this issue. I have experience with React, TypeScript, form state, and Zod validation, and I can build the configuration panel with dynamic provider/model selection, prompt presets, and validated range controls. I’ll keep the state logic isolated, preserve unrelated inputs on provider changes, and ensure the flow is keyboard accessible. I’ll review the existing feature structure and design tokens before starting.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @darius-daniel to this issue.

[smog123]

@smog123 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

pleasse assign me

ℹ️ Repo Maintainers: To accept this application, review their application or assign @smog123 to this issue.

[Kappa16]

@Kappa16 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

please maintainer ..pls assign this issue to me...i beg of you expect pr asap

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Kappa16 to this issue.

[drips-wave]

Congratulations, @darius-daniel! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on August 31, 2026.

🧑‍💻 @darius-daniel: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊