From 7e61b2e332a6a2085691c370838995eead9b99d8 Mon Sep 17 00:00:00 2001
From: "kiloconnect[bot]" <240665456+kiloconnect[bot]@users.noreply.github.com>
Date: Thu, 12 Feb 2026 15:32:18 +0000
Subject: [PATCH] fix: prevent Create New Mode form fields from resetting while
 typing

Replace VSCodeTextArea/VSCodeTextField web components with standard HTML
textarea and Input components in the Create Mode dialog. VS Code web
components reset their value to the last rendered value prop on every
re-render, which overwrites user input when extension state broadcasts
trigger frequent re-renders.

Also fix blank screen when clicking the 'edit' link from marketplace
modes tab. The link navigated to a 'modes' tab that had no rendering
handler in App.tsx. Now redirects to 'settings' tab with 'modes' section.
---
 .changeset/fix-create-mode-form-reset.md      |  5 ++++
 webview-ui/src/App.tsx                        |  8 +++++-
 webview-ui/src/components/modes/ModesView.tsx | 26 +++++++++----------
 3 files changed, 24 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/fix-create-mode-form-reset.md

diff --git a/.changeset/fix-create-mode-form-reset.md b/.changeset/fix-create-mode-form-reset.md
new file mode 100644
index 00000000000..9f3f7acb5f4
--- /dev/null
+++ b/.changeset/fix-create-mode-form-reset.md
@@ -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
diff --git a/webview-ui/src/App.tsx b/webview-ui/src/App.tsx
index 6df358dc88a..04c12cc770b 100644
--- a/webview-ui/src/App.tsx
+++ b/webview-ui/src/App.tsx
@@ -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) {
diff --git a/webview-ui/src/components/modes/ModesView.tsx b/webview-ui/src/components/modes/ModesView.tsx
index 053f646f278..5060200d29d 100644
--- a/webview-ui/src/components/modes/ModesView.tsx
+++ b/webview-ui/src/components/modes/ModesView.tsx
@@ -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]"
 								/>
 								{roleDefinitionError && (
 									<div className="text-xs text-vscode-errorForeground mt-1">
@@ -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"
 								/>
@@ -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">
@@ -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>