From 20f99a252358fd0d98c73428f644f714038b83f9 Mon Sep 17 00:00:00 2001
From: Daniel Riccio <ricciodaniel98@gmail.com>
Date: Fri, 25 Jul 2025 09:03:45 -0500
Subject: [PATCH] feat: improve command permissions UI with click-to-edit
 functionality

- Add click-to-edit behavior: command displays as text and becomes input on click
- Add proper padding between collapsible trigger and input field
- Fix layout shift between text and input states with transparent border
- Update focus styling to match standard input components (focus:outline-0)
- Add hover effect with background highlight for better UX
- Support Enter to confirm and Escape to cancel edits
---
 .../chat/CommandPatternSelector.tsx           | 37 +++++++++++++++----
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/webview-ui/src/components/chat/CommandPatternSelector.tsx b/webview-ui/src/components/chat/CommandPatternSelector.tsx
index cadc90c443..340e819d3e 100644
--- a/webview-ui/src/components/chat/CommandPatternSelector.tsx
+++ b/webview-ui/src/components/chat/CommandPatternSelector.tsx
@@ -23,6 +23,7 @@ export const CommandPatternSelector: React.FC<CommandPatternSelectorProps> = ({
 	const { t } = useTranslation()
 	const [isExpanded, setIsExpanded] = useState(false)
 	const [editedCommand, setEditedCommand] = useState(command)
+	const [isEditing, setIsEditing] = useState(false)
 
 	const getCommandStatus = (cmd: string): "allowed" | "denied" | "none" => {
 		if (allowedCommands.includes(cmd)) return "allowed"
@@ -78,16 +79,36 @@ export const CommandPatternSelector: React.FC<CommandPatternSelectorProps> = ({
 			</button>
 
 			{isExpanded && (
-				<div className="px-3 pb-3">
+				<div className="px-3 pb-3 pt-2">
 					<div className="ml-5 flex items-center gap-2">
 						<div className="flex-1">
-							<input
-								type="text"
-								value={editedCommand}
-								onChange={(e) => setEditedCommand(e.target.value)}
-								className="font-mono text-xs bg-vscode-input-background text-vscode-input-foreground border border-vscode-input-border rounded px-2 py-1 w-full focus:outline-none focus:border-vscode-focusBorder"
-								placeholder={command}
-							/>
+							{isEditing ? (
+								<input
+									type="text"
+									value={editedCommand}
+									onChange={(e) => setEditedCommand(e.target.value)}
+									onBlur={() => setIsEditing(false)}
+									onKeyDown={(e) => {
+										if (e.key === "Enter") {
+											setIsEditing(false)
+										}
+										if (e.key === "Escape") {
+											setEditedCommand(command)
+											setIsEditing(false)
+										}
+									}}
+									className="font-mono text-xs bg-vscode-input-background text-vscode-input-foreground border border-vscode-input-border rounded px-2 py-1.5 w-full focus:outline-0"
+									placeholder={command}
+									autoFocus
+								/>
+							) : (
+								<div
+									onClick={() => setIsEditing(true)}
+									className="font-mono text-xs text-vscode-foreground cursor-pointer hover:bg-vscode-list-hoverBackground px-2 py-1.5 rounded transition-colors border border-transparent"
+									title="Click to edit command">
+									{editedCommand}
+								</div>
+							)}
 						</div>
 						<div className="flex items-center gap-1">
 							<button