Add 'copySystemPrompt' icon button next to Preview System Prompt

src/core/webview/ClineProvider.ts

@@ -1265,47 +1265,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 						break
 					case "getSystemPrompt":
 						try {
-							const {
-								apiConfiguration,
-								customModePrompts,
-								customInstructions,
-								preferredLanguage,
-								browserViewportSize,
-								diffEnabled,
-								mcpEnabled,
-								fuzzyMatchThreshold,
-								experiments,
-								enableMcpServerCreation,
-							} = await this.getState()
-
-							// Create diffStrategy based on current model and settings
-							const diffStrategy = getDiffStrategy(
-								apiConfiguration.apiModelId || apiConfiguration.openRouterModelId || "",
-								fuzzyMatchThreshold,
-								Experiments.isEnabled(experiments, EXPERIMENT_IDS.DIFF_STRATEGY),
-							)
-							const cwd =
-								vscode.workspace.workspaceFolders?.map((folder) => folder.uri.fsPath).at(0) || ""
-
-							const mode = message.mode ?? defaultModeSlug
-							const customModes = await this.customModesManager.getCustomModes()
-
-							const systemPrompt = await SYSTEM_PROMPT(
-								this.context,
-								cwd,
-								apiConfiguration.openRouterModelInfo?.supportsComputerUse ?? false,
-								mcpEnabled ? this.mcpHub : undefined,
-								diffStrategy,
-								browserViewportSize ?? "900x600",
-								mode,
-								customModePrompts,
-								customModes,
-								customInstructions,
-								preferredLanguage,
-								diffEnabled,
-								experiments,
-								enableMcpServerCreation,
-							)
+							const systemPrompt = await generateSystemPrompt(message)
 
 							await this.postMessageToWebview({
 								type: "systemPrompt",
@@ -1319,6 +1279,19 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 							vscode.window.showErrorMessage("Failed to get system prompt")
 						}
 						break
+					case "copySystemPrompt":
+						try {
+							const systemPrompt = await generateSystemPrompt(message)
+
+							await vscode.env.clipboard.writeText(systemPrompt)
+							await vscode.window.showInformationMessage("System prompt successfully copied to clipboard")
+						} catch (error) {
+							this.outputChannel.appendLine(
+								`Error getting system prompt:  ${JSON.stringify(error, Object.getOwnPropertyNames(error), 2)}`,
+							)
+							vscode.window.showErrorMessage("Failed to get system prompt")
+						}
+						break
 					case "searchCommits": {
 						const cwd = vscode.workspace.workspaceFolders?.map((folder) => folder.uri.fsPath).at(0)
 						if (cwd) {
@@ -1524,6 +1497,50 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			null,
 			this.disposables,
 		)
+
+		const generateSystemPrompt = async (message: WebviewMessage) => {
+			const {
+				apiConfiguration,
+				customModePrompts,
+				customInstructions,
+				preferredLanguage,
+				browserViewportSize,
+				diffEnabled,
+				mcpEnabled,
+				fuzzyMatchThreshold,
+				experiments,
+				enableMcpServerCreation,
+			} = await this.getState()
+
+			// Create diffStrategy based on current model and settings
+			const diffStrategy = getDiffStrategy(
+				apiConfiguration.apiModelId || apiConfiguration.openRouterModelId || "",
+				fuzzyMatchThreshold,
+				Experiments.isEnabled(experiments, EXPERIMENT_IDS.DIFF_STRATEGY),
+			)
+			const cwd = vscode.workspace.workspaceFolders?.map((folder) => folder.uri.fsPath).at(0) || ""
+
+			const mode = message.mode ?? defaultModeSlug
+			const customModes = await this.customModesManager.getCustomModes()
+
+			const systemPrompt = await SYSTEM_PROMPT(
+				this.context,
+				cwd,
+				apiConfiguration.openRouterModelInfo?.supportsComputerUse ?? false,
+				mcpEnabled ? this.mcpHub : undefined,
+				diffStrategy,
+				browserViewportSize ?? "900x600",
+				mode,
+				customModePrompts,
+				customModes,
+				customInstructions,
+				preferredLanguage,
+				diffEnabled,
+				experiments,
+				enableMcpServerCreation,
+			)
+			return systemPrompt
+		}
 	}
 
 	/**

src/shared/WebviewMessage.ts

@@ -81,6 +81,7 @@ export interface WebviewMessage {
 		| "updateSupportPrompt"
 		| "resetSupportPrompt"
 		| "getSystemPrompt"
+		| "copySystemPrompt"
 		| "systemPrompt"
 		| "enhancementApiConfigId"
 		| "updateExperimental"

webview-ui/src/components/prompts/PromptsView.tsx

@@ -852,23 +852,35 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 						paddingBottom: "40px",
 						marginBottom: "20px",
 						borderBottom: "1px solid var(--vscode-input-border)",
-						display: "flex",
-						justifyContent: "flex-start",
 					}}>
-					<VSCodeButton
-						appearance="primary"
-						onClick={() => {
-							const currentMode = getCurrentMode()
-							if (currentMode) {
+					<div style={{ display: "flex", gap: "8px" }}>
+						<VSCodeButton
+							appearance="primary"
+							onClick={() => {
+								const currentMode = getCurrentMode()
+								if (currentMode) {
+									vscode.postMessage({
+										type: "getSystemPrompt",
+										mode: currentMode.slug,
+									})
+								}
+							}}
+							data-testid="preview-prompt-button">
+							Preview System Prompt
+						</VSCodeButton>
+						<VSCodeButton
+							appearance="icon"
+							title="Copy system prompt to clipboard"
+							onClick={() => {
 								vscode.postMessage({
-									type: "getSystemPrompt",
-									mode: currentMode.slug,
+									type: "copySystemPrompt",
+									text: selectedPromptContent,
 								})
-							}
-						}}
-						data-testid="preview-prompt-button">
-						Preview System Prompt
-					</VSCodeButton>
+							}}
+							data-testid="copy-prompt-button">
+							<span className="codicon codicon-copy"></span>
+						</VSCodeButton>
+					</div>
 				</div>
 
 				<div