Skip to content

Mirror: fix: prevent Create New Mode form fields from resetting (#5826) #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jeremylongshore merged 1 commit into from
Feb 15, 2026
Merged

Mirror: fix: prevent Create New Mode form fields from resetting (#5826) #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/fix-create-mode-form-reset.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"kilo-code": patch
---

Fix Create New Mode form fields resetting while typing due to VS Code web component re-renders, and fix blank screen when navigating to modes tab from marketplace
8 changes: 7 additions & 1 deletion webview-ui/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,13 @@ const App = () => {

// Handle switchTab action with tab parameter
if (message.action === "switchTab" && message.tab) {
const targetTab = message.tab as Tab
let targetTab = message.tab as Tab
// kilocode_change start - Redirect "modes" tab to settings with modes section
if (targetTab === "modes") {
targetTab = "settings"
setCurrentSection("modes")
}
// kilocode_change end
// kilocode_change start - Handle auth tab with returnTo and profileName parameters
if (targetTab === "auth") {
if (message.values?.returnTo) {
Comment on lines +178 to 187
Copy link
Copy Markdown

@qodo-code-review qodo-code-review Bot Feb 15, 2026

Choose a reason for hiding this comment

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

Action required

2. Modes redirect drops section 🐞 Bug ✓ Correctness

When handling action:switchTab(tab="modes"), App.tsx sets the section but then switchTab() clears it
and the handler overwrites it with message.values.section (undefined for the marketplace link).
Additionally, "modes" is not a valid SettingsView section id, so even preserving it would not show
the Modes UI.
Agent Prompt 
### Issue description
`action:switchTab` handling for `tab="modes"` currently attempts to set `currentSection("modes")`, but that value is cleared by `switchTab()` and then overwritten by `setCurrentSection(message.values?.section)` (typically `undefined`). Even if it weren’t overwritten, `SettingsView` does not recognize `"modes"` as a valid section/tab; the Modes UI is under the `"agentBehaviour"` settings section.

### Issue Context
- Marketplace sends `vscode.postMessage({ type: "switchTab", tab: "modes" })` without `values.section`.
- `switchTab()` clears `currentSection`.
- `SettingsView` only renders `AgentBehaviourView` when `activeTab === "agentBehaviour"`, and `AgentBehaviourView` defaults to its internal `"modes"` sub-tab.

### Fix Focus Areas
- webview-ui/src/App.tsx[132-153]
- webview-ui/src/App.tsx[176-202]
- webview-ui/src/components/settings/SettingsView.tsx[106-151]
- webview-ui/src/components/settings/SettingsView.tsx[1252-1254]

### Suggested approach
- In the `switchTab` action handler, introduce a local `let targetSection = message.values?.section as string | undefined`.
- If `message.tab === "modes"`, set `targetTab = "settings"` and `targetSection = "agentBehaviour"`.
- Call `switchTab(targetTab)` first, then `setCurrentSection(targetSection)` once (avoid setting it twice).
- Optionally: if `targetTab === "settings"` and `targetSection` is `"modes"` or `"mcp"`, normalize it to `"agentBehaviour"` to support existing senders.

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

Expand Down
26 changes: 12 additions & 14 deletions webview-ui/src/components/modes/ModesView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1568,14 +1568,13 @@ const ModesView = ({ hideHeader = false }: { hideHeader?: boolean }) => {
}}>
{t("prompts:createModeDialog.roleDefinition.description")}
</div>
<VSCodeTextArea
resize="vertical"
<textarea
value={newModeRoleDefinition}
onChange={(e) => {
setNewModeRoleDefinition((e.target as HTMLTextAreaElement).value)
setNewModeRoleDefinition(e.target.value)
}}
rows={4}
className="w-full"
className="w-full resize-y bg-vscode-input-background text-vscode-input-foreground border border-vscode-input-border rounded p-2 font-[var(--vscode-font-family)] text-[13px]"
/>
Comment on lines +1571 to 1578
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Feb 15, 2026

Choose a reason for hiding this comment

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

medium

While replacing VSCodeTextArea with a native <textarea> is a good fix for the state reset issue, the styling is applied via a long className string that is duplicated across three text areas in this form (here, and on lines 1609 and 1655).

To improve maintainability and consistency, consider creating a reusable Textarea component in @src/components/ui that encapsulates these styles, similar to how the Input component is used. This would make the code cleaner and ensure all text areas in the form have a consistent appearance.

If the existing Textarea component in webview-ui/src/components/ui/textarea.tsx doesn't meet the styling needs, it could be updated, or a new, more specific component could be created.

Comment on lines +1571 to 1578
Copy link
Copy Markdown

@qodo-code-review qodo-code-review Bot Feb 15, 2026

Choose a reason for hiding this comment

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

Action required

1. Modesview edits lack marker 📘 Rule violation ✓ Correctness

Edits in webview-ui/src/components/modes/ModesView.tsx were made without adding kilocode_change
markers around the modified blocks, increasing upstream sync merge-conflict risk. Upstream-shared
code changes under webview-ui/ must be explicitly marked.
Agent Prompt 
## Issue description
Edits were made in an upstream-shared `webview-ui/` file without adding `kilocode_change` markers around the modified blocks.

## Issue Context
Per repo compliance rules, Kilo-specific edits in upstream-shared paths must be clearly marked to reduce merge conflicts during upstream syncs.

## Fix Focus Areas
- webview-ui/src/components/modes/ModesView.tsx[1571-1662]

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

{roleDefinitionError && (
<div className="text-xs text-vscode-errorForeground mt-1">
Expand All @@ -1589,10 +1588,11 @@ const ModesView = ({ hideHeader = false }: { hideHeader?: boolean }) => {
<div className="text-[13px] text-vscode-descriptionForeground mb-2">
{t("prompts:createModeDialog.description.description")}
</div>
<VSCodeTextField
<Input
type="text"
value={newModeDescription}
onChange={(e) => {
setNewModeDescription((e.target as HTMLInputElement).value)
setNewModeDescription(e.target.value)
}}
className="w-full"
/>
Expand All @@ -1606,14 +1606,13 @@ const ModesView = ({ hideHeader = false }: { hideHeader?: boolean }) => {
<div className="text-[13px] text-vscode-descriptionForeground mb-2">
{t("prompts:createModeDialog.whenToUse.description")}
</div>
<VSCodeTextArea
resize="vertical"
<textarea
value={newModeWhenToUse}
onChange={(e) => {
setNewModeWhenToUse((e.target as HTMLTextAreaElement).value)
setNewModeWhenToUse(e.target.value)
}}
rows={3}
className="w-full"
className="w-full resize-y bg-vscode-input-background text-vscode-input-foreground border border-vscode-input-border rounded p-2 font-[var(--vscode-font-family)] text-[13px]"
/>
</div>
<div className="mb-4">
Expand Down Expand Up @@ -1653,14 +1652,13 @@ const ModesView = ({ hideHeader = false }: { hideHeader?: boolean }) => {
<div className="text-[13px] text-vscode-descriptionForeground mb-2">
{t("prompts:createModeDialog.customInstructions.description")}
</div>
<VSCodeTextArea
resize="vertical"
<textarea
value={newModeCustomInstructions}
onChange={(e) => {
setNewModeCustomInstructions((e.target as HTMLTextAreaElement).value)
setNewModeCustomInstructions(e.target.value)
}}
rows={4}
className="w-full"
className="w-full resize-y bg-vscode-input-background text-vscode-input-foreground border border-vscode-input-border rounded p-2 font-[var(--vscode-font-family)] text-[13px]"
/>
</div>
</div>
Expand Down
Loading