changeset

.changeset/six-birds-move.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": minor
+---
+
+Add an edit button to the Cline Rules toggle modal to open rule files

webview-ui/src/components/cline-rules/RuleRow.tsx

@@ -1,3 +1,6 @@
+import { vscode } from "@/utils/vscode"
+import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
+
 const RuleRow: React.FC<{
 	rulePath: string
 	enabled: boolean
@@ -6,6 +9,13 @@ const RuleRow: React.FC<{
 	// Get the filename from the path for display
 	const displayName = rulePath.split("/").pop() || rulePath
 
+	const handleEditClick = () => {
+		vscode.postMessage({
+			type: "openFile",
+			text: rulePath,
+		})
+	}
+
 	return (
 		<div className="mb-2.5">
 			<div
@@ -17,7 +27,7 @@ const RuleRow: React.FC<{
 				</span>
 
 				{/* Toggle Switch */}
-				<div className="flex items-center ml-2">
+				<div className="flex items-center ml-2 space-x-2">
 					<div
 						role="switch"
 						aria-checked={enabled}
@@ -40,6 +50,14 @@ const RuleRow: React.FC<{
 							}`}
 						/>
 					</div>
+					<VSCodeButton
+						appearance="icon"
+						aria-label="Edit rule file"
+						title="Edit rule file"
+						onClick={handleEditClick}
+						style={{ height: "20px" }}>
+						<span className="codicon codicon-edit" style={{ fontSize: "14px" }} />
+					</VSCodeButton>
 				</div>
 			</div>
 		</div>