Skip to content

add agent template config panel#439

Open
iceljc wants to merge 3 commits intoSciSharp:mainfrom
iceljc:features/refine-template-config
Open

add agent template config panel#439
iceljc wants to merge 3 commits intoSciSharp:mainfrom
iceljc:features/refine-template-config

Conversation

@iceljc
Copy link
Copy Markdown
Collaborator

@iceljc iceljc commented Apr 10, 2026

No description provided.

@iceljc iceljc marked this pull request as draft April 10, 2026 21:07
@qodo-code-review
Copy link
Copy Markdown

qodo-code-review Bot commented Apr 10, 2026

Review Summary by Qodo

(Agentic_describe updated until commit b30a55d)

Add agent template configuration panel with LLM settings

✨ Enhancement

Grey Divider

Walkthroughs

Description
• Add agent template configuration panel with LLM settings
• Support response format, provider, model, and reasoning level configuration
• Implement collapsible config panel with toggle button in template editor
• Refactor template deduplication logic and improve data structure handling
Diagram
flowchart LR
  A["Agent Template Component"] -->|imports| B["Template Config Component"]
  B -->|manages| C["LLM Configuration"]
  C -->|includes| D["Provider & Model Selection"]
  C -->|includes| E["Response Format & Reasoning Level"]
  A -->|displays| F["Collapsible Config Panel"]
  F -->|toggles| B
Loading

Grey Divider

File Changes

1. src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte ✨ Enhancement +256/-0

New template configuration component

• New component for managing template LLM configuration settings
• Handles provider, model, max output tokens, and reasoning effort level selection
• Dynamically loads LLM models based on selected provider
• Conditionally displays reasoning level options for reasoning-capable models
• Validates integer input for token count field

src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte


2. src/routes/page/agent/[agentId]/agent-components/templates/agent-template.svelte ✨ Enhancement +74/-21

Refactor template management and add config panel UI

• Refactor fetchTemplates() to remove duplicates by name and clean empty entries
• Add response_format and llm_config properties to template data structure
• Implement collapsible config panel with toggle button in template editor
• Import and integrate new AgentTemplateConfig component
• Add showConfig state to manage config panel visibility
• Remove lodash utility dependency

src/routes/page/agent/[agentId]/agent-components/templates/agent-template.svelte


3. src/routes/page/agent/[agentId]/+page.svelte Formatting +1/-1

Reorganize component imports

• Reorder import statements for better organization
• Move AgentTemplate import to correct position in import list

src/routes/page/agent/[agentId]/+page.svelte


View more (4)
4. src/lib/scss/custom/pages/_agent_template.scss ✨ Enhancement +111/-0

New styles for template editor and config panel

• New stylesheet for template content wrapper and config panel styling
• Implement responsive flexbox layout for editor and config panel
• Add smooth transitions and animations for config panel expansion
• Style toggle button with hover effects and icon rotation
• Include mobile-responsive design with vertical layout on smaller screens

src/lib/scss/custom/pages/_agent_template.scss


5. src/lib/scss/app.scss ⚙️ Configuration changes +1/-0

Add agent template stylesheet import

• Import new agent template stylesheet

src/lib/scss/app.scss


6. src/lib/helpers/enums.js ✨ Enhancement +8/-0

Add response format enumeration

• Add new ResponseFormat enum with json, xml, markdown, and yaml options
• Export frozen ResponseFormat object for use in components

src/lib/helpers/enums.js


7. src/lib/helpers/types/agentTypes.js ✨ Enhancement +10/-0

Extend agent template type definitions

• Add response_format optional property to AgentTemplate typedef
• Add llm_config optional property to AgentTemplate typedef
• Create new AgentTemplateConfig typedef with provider, model, max_output_tokens, and
 reasoning_effort_level properties

src/lib/helpers/types/agentTypes.js


Grey Divider

ⓘ You are approaching your monthly quota for Qodo. Upgrade your plan

Qodo Logo

@qodo-code-review
Copy link
Copy Markdown

qodo-code-review Bot commented Apr 10, 2026

Code Review by Qodo

🐞 Bugs (4) 📘 Rule violations (0)

Grey Divider


Action required

1. Cleared LLM override persists 🐞 Bug ≡ Correctness ⭐ New
Description
In agent-template-config.svelte, clearing the Provider only nulls provider/model/reasoning but keeps
template.llm_config (and may keep max_output_tokens), so fetchTemplates still serializes llm_config
because it only checks object truthiness. This makes “clearing” the template override ineffective
and can save stale per-template config fields back to the agent payload.
Code

src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte[R116-135]

+    function changeProvider(e) {
+        const provider = e.target.value;
+        if (!template.llm_config) {
+            template.llm_config = { provider: null, model: null };
+        }
+        template.llm_config.provider = provider || null;
+        if (!provider) {
+            models = [];
+            template.llm_config.model = null;
+            template.llm_config.reasoning_effort_level = null;
+            reasoningLevelOptions = defaultReasonLevelOptions;
+            handleAgentChange();
+            return;
+        }
+        models = getLlmModels(provider);
+        template.llm_config.model = models[0]?.name || null;
+        template.llm_config.reasoning_effort_level = null;
+        reasoningLevelOptions = getReasoningLevelOptions(template.llm_config.model);
+        handleAgentChange();
+    }
Evidence
When provider is cleared, template.llm_config remains a non-null object and max_output_tokens is not
cleared; later, fetchTemplates includes llm_config whenever it’s truthy, so an empty/partial config
is still saved.

src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte[116-135]
src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte[148-156]
src/routes/page/agent/[agentId]/agent-components/templates/agent-template.svelte[39-50]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
Clearing a template’s LLM Provider does not remove the per-template override from the saved payload because `template.llm_config` remains a non-null object (and may retain `max_output_tokens`). `fetchTemplates()` then serializes `llm_config` based on object truthiness, so an “empty override” is still sent.

### Issue Context
Users expect clearing Provider to mean “no per-template override”. Current behavior can persist stale `max_output_tokens` (and other fields) even when provider is unset.

### Fix Focus Areas
- src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte[116-135]
- src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte[148-156]
- src/routes/page/agent/[agentId]/agent-components/templates/agent-template.svelte[39-50]

### Suggested fix
1. In `changeProvider`, when provider is cleared, either:
  - set `template.llm_config = null` (preferred), or
  - clear **all** fields (`model`, `reasoning_effort_level`, `max_output_tokens`) and ensure serialization treats this as null.
2. In `fetchTemplates`, only include `llm_config` if it contains meaningful values (e.g., `provider` is set; optionally require `model` too).

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools



Remediation recommended

2. Serialization mutates editor state 🐞 Bug ☼ Reliability ⭐ New
Description
fetchTemplates mutates inner_templates and selected_template as part of producing the payload for
saving, before the saveAgent PUT resolves. If saveAgent fails, the UI remains in the cleaned/deduped
state even though nothing was persisted, which can drop local template edits unexpectedly.
Code

src/routes/page/agent/[agentId]/agent-components/templates/agent-template.svelte[R33-37]

+        // Update inner state to reflect cleanup
+        inner_templates = unique;
+        if (!unique.find(x => x.uid === selected_template.uid)) {
+            selected_template = unique.length > 0 ? unique[0] : { ...defaultTemplate };
        }
Evidence
fetchTemplates performs cleanup by assigning inner_templates/selected_template, and +page.svelte
calls fetchTemplates before saveAgent(); on catch it only toggles flags and does not restore prior
template state.

src/routes/page/agent/[agentId]/agent-components/templates/agent-template.svelte[19-37]
src/routes/page/agent/[agentId]/+page.svelte[89-123]
src/routes/page/agent/[agentId]/+page.svelte[150-152]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
`fetchTemplates()` both (a) cleans up template state and (b) returns the payload for saving. Because save flow calls it before the network request completes, a failed save leaves the editor mutated even though the backend wasn't updated.

### Issue Context
This is especially risky when cleanup removes duplicates/empty names or switches the selected template.

### Fix Focus Areas
- src/routes/page/agent/[agentId]/agent-components/templates/agent-template.svelte[19-37]
- src/routes/page/agent/[agentId]/+page.svelte[89-123]

### Suggested fix
- Make `fetchTemplates()` pure: compute `unique` and return a serialized array without assigning to `inner_templates` / `selected_template`.
- If cleanup is desired, apply it only after a successful `saveAgent()` (or keep a pre-save snapshot and restore it on failure).

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


3. Max tokens forced to zero 🐞 Bug ≡ Correctness
Description
changeMaxOutputToken coerces an empty/invalid max_output_tokens input to 0, which prevents
clearing the field and can persist an invalid value into template.llm_config.max_output_tokens.
This is inconsistent with the agent-level save path which normalizes non-positive max_output_tokens
to null.
Code

src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte[R133-140]

+    function changeMaxOutputToken(e) {
+        if (!template.llm_config) {
+            template.llm_config = { provider: null, model: null };
+        }
+        const value = Number(e.target.value) || 0;
+        template.llm_config.max_output_tokens = value;
+        handleAgentChange();
+    }
Evidence
The template config panel always writes Number(e.target.value) || 0, so clearing the input results
in 0 being saved. In contrast, the agent update flow explicitly maps non-positive
max_output_tokens to null, indicating 0 is treated as “unset/invalid” elsewhere in this
codebase.

src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte[132-140]
src/routes/page/agent/[agentId]/+page.svelte[95-110]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The template max output tokens input coerces empty/invalid values to `0`, making it impossible to clear the field and potentially persisting an invalid value.
### Issue Context
Agent-level `llm_config.max_output_tokens` is normalized to `null` when `<= 0` before saving; template-level config should follow the same pattern.
### Fix Focus Areas
- src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte[132-140]
- src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte[211-220]
### Suggested change
- Parse the input and set `max_output_tokens` to `null` when the value is empty/NaN or `<= 0`.
- Keep the input display logic consistent (show `''` when the underlying value is `null`).

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


4. Max tokens key filter blocks editing 🐞 Bug ☼ Reliability
Description
validateIntegerInput prevents all key presses except digits and Backspace, which blocks Tab focus
navigation, Delete, arrow keys, and common shortcuts like Ctrl/Meta+V for paste in the Max output
tokens field. This can make the field difficult or impossible to edit in normal workflows.
Code

src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte[R151-157]

+    /** @param {any} e */
+    function validateIntegerInput(e) {
+        const reg = new RegExp(INTEGER_REGEX, 'g');
+        if (e.key !== 'Backspace' && !reg.test(e.key)) {
+            e.preventDefault();
+        }
+    }
Evidence
The regex used for validation is [0-9]+, so non-digit keys like Tab, Delete, ArrowLeft, and
v (for Ctrl/Meta+V) do not match and get preventDefault() applied. The handler is wired directly
to the number input’s onkeydown, so these interactions are blocked at the input level.

src/lib/helpers/constants.js[45-51]
src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte[151-157]
src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte[211-220]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The max tokens input blocks non-digit keys (Tab/Delete/arrows) and common shortcuts (Ctrl/Meta+V), because keydown is prevented unless the key matches `[0-9]+`.
### Issue Context
The input is already `type="number"`, so browser-level constraints apply; additional key filtering should not break navigation and editing.
### Fix Focus Areas
- src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte[151-157]
- src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte[211-220]
### Suggested change
- Either remove `onkeydown` filtering entirely and validate/sanitize on `change`/`input`, or
- Explicitly allow control/navigation keys (Tab, Delete, Arrow*, Home/End), and allow any key when `e.ctrlKey || e.metaKey || e.altKey` is true.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


Grey Divider

Previous review results

Review updated until commit b30a55d

Results up to commit db5b11e


Details

🐞 Bugs (2)   📘 Rule violations (0)   📎 Requirement gaps (0)   🎨 UX Issues (0)
🐞\ ≡ Correctness (1) ☼ Reliability (1)

Remediation recommended
1. Max tokens forced to zero 🐞
Description
changeMaxOutputToken coerces an empty/invalid max_output_tokens input to 0, which prevents
clearing the field and can persist an invalid value into template.llm_config.max_output_tokens.
This is inconsistent with the agent-level save path which normalizes non-positive max_output_tokens
to null.
Code

src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte[R133-140]

+    function changeMaxOutputToken(e) {
+        if (!template.llm_config) {
+            template.llm_config = { provider: null, model: null };
+        }
+        const value = Number(e.target.value) || 0;
+        template.llm_config.max_output_tokens = value;
+        handleAgentChange();
+    }
Evidence
The template config panel always writes Number(e.target.value) || 0, so clearing the input results
in 0 being saved. In contrast, the agent update flow explicitly maps non-positive
max_output_tokens to null, indicating 0 is treated as “unset/invalid” elsewhere in this
codebase.

src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte[132-140]
src/routes/page/agent/[agentId]/+page.svelte[95-110]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
The template max output tokens input coerces empty/invalid values to `0`, making it impossible to clear the field and potentially persisting an invalid value.

### Issue Context
Agent-level `llm_config.max_output_tokens` is normalized to `null` when `<= 0` before saving; template-level config should follow the same pattern.

### Fix Focus Areas
- src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte[132-140]
- src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte[211-220]

### Suggested change
- Parse the input and set `max_output_tokens` to `null` when the value is empty/NaN or `<= 0`.
- Keep the input display logic consistent (show `''` when the underlying value is `null`).

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


2. Max tokens key filter blocks editing 🐞
Description
validateIntegerInput prevents all key presses except digits and Backspace, which blocks Tab focus
navigation, Delete, arrow keys, and common shortcuts like Ctrl/Meta+V for paste in the Max output
tokens field. This can make the field difficult or impossible to edit in normal workflows.
Code

src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte[R151-157]

+    /** @param {any} e */
+    function validateIntegerInput(e) {
+        const reg = new RegExp(INTEGER_REGEX, 'g');
+        if (e.key !== 'Backspace' && !reg.test(e.key)) {
+            e.preventDefault();
+        }
+    }
Evidence
The regex used for validation is [0-9]+, so non-digit keys like Tab, Delete, ArrowLeft, and
v (for Ctrl/Meta+V) do not match and get preventDefault() applied. The handler is wired directly
to the number input’s onkeydown, so these interactions are blocked at the input level.

src/lib/helpers/constants.js[45-51]
src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte[151-157]
src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte[211-220]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
The max tokens input blocks non-digit keys (Tab/Delete/arrows) and common shortcuts (Ctrl/Meta+V), because keydown is prevented unless the key matches `[0-9]+`.

### Issue Context
The input is already `type="number"`, so browser-level constraints apply; additional key filtering should not break navigation and editing.

### Fix Focus Areas
- src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte[151-157]
- src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte[211-220]

### Suggested change
- Either remove `onkeydown` filtering entirely and validate/sanitize on `change`/`input`, or
- Explicitly allow control/navigation keys (Tab, Delete, Arrow*, Home/End), and allow any key when `e.ctrlKey || e.metaKey || e.altKey` is true.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


ⓘ The new review experience is currently in Beta. Learn more
ⓘ You are approaching your monthly quota for Qodo. Upgrade your plan

Qodo Logo

template.llm_config = { provider: null, model: null };
}
const value = Number(e.target.value) || 0;
template.llm_config.max_output_tokens = value;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

max_output_tokens 是可空类型的,这里转换数字失败默认应该为null不是0

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

no worries here. We will validate the max output token value when update agent. Only value greater than zero will be saved, otherwise, save it as null.

@iceljc iceljc marked this pull request as ready for review May 6, 2026 18:52
@qodo-code-review
Copy link
Copy Markdown

qodo-code-review Bot commented May 6, 2026

Persistent review updated to latest commit b30a55d

Comment on lines +116 to +135
function changeProvider(e) {
const provider = e.target.value;
if (!template.llm_config) {
template.llm_config = { provider: null, model: null };
}
template.llm_config.provider = provider || null;
if (!provider) {
models = [];
template.llm_config.model = null;
template.llm_config.reasoning_effort_level = null;
reasoningLevelOptions = defaultReasonLevelOptions;
handleAgentChange();
return;
}
models = getLlmModels(provider);
template.llm_config.model = models[0]?.name || null;
template.llm_config.reasoning_effort_level = null;
reasoningLevelOptions = getReasoningLevelOptions(template.llm_config.model);
handleAgentChange();
}
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Action required

1. Cleared llm override persists 🐞 Bug ≡ Correctness

In agent-template-config.svelte, clearing the Provider only nulls provider/model/reasoning but keeps
template.llm_config (and may keep max_output_tokens), so fetchTemplates still serializes llm_config
because it only checks object truthiness. This makes “clearing” the template override ineffective
and can save stale per-template config fields back to the agent payload.
Agent Prompt
### Issue description
Clearing a template’s LLM Provider does not remove the per-template override from the saved payload because `template.llm_config` remains a non-null object (and may retain `max_output_tokens`). `fetchTemplates()` then serializes `llm_config` based on object truthiness, so an “empty override” is still sent.

### Issue Context
Users expect clearing Provider to mean “no per-template override”. Current behavior can persist stale `max_output_tokens` (and other fields) even when provider is unset.

### Fix Focus Areas
- src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte[116-135]
- src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte[148-156]
- src/routes/page/agent/[agentId]/agent-components/templates/agent-template.svelte[39-50]

### Suggested fix
1. In `changeProvider`, when provider is cleared, either:
   - set `template.llm_config = null` (preferred), or
   - clear **all** fields (`model`, `reasoning_effort_level`, `max_output_tokens`) and ensure serialization treats this as null.
2. In `fetchTemplates`, only include `llm_config` if it contains meaningful values (e.g., `provider` is set; optionally require `model` too).

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants