resolving merge conflicts (againnnnn)

.changeset/ten-books-act.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": minor
+---
+
+Adding .clineignore guide

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## [3.3.2]
+
+-   Fix bug where OpenRouter requests would periodically not return cost/token stats, leading to context window limit errors
+-   Make checkpoints more visible and keep track of restored checkpoints 
+
 ## [3.3.0]
 
 -   Add .clineignore to block Cline from accessing specified file patterns

docs/cline-customization/clineignore.md

@@ -0,0 +1,54 @@
+### .clineignore Support
+
+To give you more control over which files are accessible to Cline, we've implemented `.clineignore` functionality, similar to `.gitignore`. This allows you to specify files and directories that Cline should **not** access or process. This is useful for:
+
+*   **Privacy:** Preventing Cline from accessing sensitive or private files in your workspace.
+*   **Performance:**  Excluding large directories or files that are irrelevant to your tasks, potentially improving the efficiency of Cline.
+*   **Context Management:**  Focusing Cline's attention on the relevant parts of your project.
+
+**How to use `.clineignore`**
+
+1.  **Create a `.clineignore` file:** In the root directory of your workspace (the same level as your `.vscode` folder, or the top level folder you opened in VS Code), create a new file named `.clineignore`.
+
+2.  **Define ignore patterns:** Open the `.clineignore` file and specify the patterns for files and directories you want Cline to ignore. The syntax is the same as `.gitignore`:
+
+    *   Each line in the file represents a pattern.
+    *   **Standard glob patterns are supported:**
+        *   `*` matches zero or more characters
+        *   `?` matches one character
+        *   `[]` matches a character range
+        *   `**` matches any number of directories and subdirectories.
+
+    *   **Directory patterns:** Append `/` to the end of a pattern to specify a directory.
+    *   **Negation patterns:** Start a pattern with `!` to negate (un-ignore) a previously ignored pattern.
+    *   **Comments:** Start a line with `#` to add comments.
+
+    **Example `.clineignore` file:**
+
+    ```
+    # Ignore log files
+    *.log
+
+    # Ignore the entire 'node_modules' directory
+    node_modules/
+
+    # Ignore all files in the 'temp' directory and its subdirectories
+    temp/**
+
+    # But DO NOT ignore 'important.log' even if it's in the root
+    !important.log
+
+    # Ignore any file named 'secret.txt' in any subdirectory
+    **/secret.txt
+    ```
+
+3.  **Cline respects your `.clineignore`:** Once you save the `.clineignore` file, Cline will automatically recognize and apply these rules.
+
+    *   **File Access Control:** Cline will not be able to read the content of ignored files using tools like `read_file`. If you attempt to use a tool on an ignored file, Cline will inform you that access is blocked due to `.clineignore` settings.
+    *   **File Listing:** When you ask Cline to list files in a directory (e.g., using `list_files`), ignored files and directories will still be listed, but they will be marked with a **🔒** symbol next to their name to indicate that they are ignored. This helps you understand which files Cline can and cannot interact with.
+
+4.  **Dynamic Updates:** Cline monitors your `.clineignore` file for changes. If you modify, create, or delete your `.clineignore` file, Cline will automatically update its ignore rules without needing to restart VS Code or the extension.
+
+**In Summary**
+
+The `.clineignore` file provides a powerful and flexible way to control Cline's access to your workspace files, enhancing privacy, performance, and context management. By leveraging familiar `.gitignore` syntax, you can easily tailor Cline's focus to the most relevant parts of your projects.

package.json

@@ -2,7 +2,7 @@
 	"name": "claude-dev",
 	"displayName": "Cline",
 	"description": "Autonomous coding agent right in your IDE, capable of creating/editing files, running commands, using the browser, and more with your permission every step of the way.",
-	"version": "3.3.1",
+	"version": "3.3.2",
 	"icon": "assets/icons/icon.png",
 	"galleryBanner": {
 		"color": "#617A91",

src/api/providers/openrouter.ts

@@ -35,8 +35,31 @@ export class OpenRouterHandler implements ApiHandler {
 			this.options.o3MiniReasoningEffort,
 		)
 
-		await delay(500) // FIXME: necessary delay to ensure generation endpoint is ready
+		if (genId) {
+			await delay(500) // FIXME: necessary delay to ensure generation endpoint is ready
+			try {
+				const generationIterator = this.fetchGenerationDetails(genId)
+				const generation = (await generationIterator.next()).value
+				// console.log("OpenRouter generation details:", generation)
+				yield {
+					type: "usage",
+					// cacheWriteTokens: 0,
+					// cacheReadTokens: 0,
+					// openrouter generation endpoint fails often
+					inputTokens: generation?.native_tokens_prompt || 0,
+					outputTokens: generation?.native_tokens_completion || 0,
+					totalCost: generation?.total_cost || 0,
+				}
+			} catch (error) {
+				// ignore if fails
+				console.error("Error fetching OpenRouter generation details:", error)
+			}
+		}
+	}
 
+	@withRetry({ maxRetries: 4, baseDelay: 250, maxDelay: 1000, retryAllErrors: true })
+	async *fetchGenerationDetails(genId: string) {
+		// console.log("Fetching generation details for:", genId)
 		try {
 			const response = await axios.get(`https://openrouter.ai/api/v1/generation?id=${genId}`, {
 				headers: {
@@ -44,21 +67,11 @@ export class OpenRouterHandler implements ApiHandler {
 				},
 				timeout: 5_000, // this request hangs sometimes
 			})
-
-			const generation = response.data?.data
-			console.log("OpenRouter generation details:", response.data)
-			yield {
-				type: "usage",
-				// cacheWriteTokens: 0,
-				// cacheReadTokens: 0,
-				// openrouter generation endpoint fails often
-				inputTokens: generation?.native_tokens_prompt || 0,
-				outputTokens: generation?.native_tokens_completion || 0,
-				totalCost: generation?.total_cost || 0,
-			}
+			yield response.data?.data
 		} catch (error) {
 			// ignore if fails
 			console.error("Error fetching OpenRouter generation details:", error)
+			throw error
 		}
 	}
 

src/api/retry.ts

@@ -2,16 +2,18 @@ interface RetryOptions {
 	maxRetries?: number
 	baseDelay?: number
 	maxDelay?: number
+	retryAllErrors?: boolean
 }
 
 const DEFAULT_OPTIONS: Required<RetryOptions> = {
 	maxRetries: 3,
 	baseDelay: 1_000,
 	maxDelay: 10_000,
+	retryAllErrors: false,
 }
 
 export function withRetry(options: RetryOptions = {}) {
-	const { maxRetries, baseDelay, maxDelay } = { ...DEFAULT_OPTIONS, ...options }
+	const { maxRetries, baseDelay, maxDelay, retryAllErrors } = { ...DEFAULT_OPTIONS, ...options }
 
 	return function (_target: any, _propertyKey: string, descriptor: PropertyDescriptor) {
 		const originalMethod = descriptor.value
@@ -25,7 +27,7 @@ export function withRetry(options: RetryOptions = {}) {
 					const isRateLimit = error?.status === 429
 					const isLastAttempt = attempt === maxRetries - 1
 
-					if (!isRateLimit || isLastAttempt) {
+					if ((!isRateLimit && !retryAllErrors) || isLastAttempt) {
 						throw error
 					}
 

src/core/Cline.ts

@@ -354,6 +354,18 @@ export class Cline {
 					break
 			}
 
+			// Set isCheckpointCheckedOut flag on the message
+			// Find all checkpoint messages before this one
+			const checkpointMessages = this.clineMessages.filter((m) => m.say === "checkpoint_created")
+			const currentMessageIndex = checkpointMessages.findIndex((m) => m.ts === messageTs)
+
+			// Set isCheckpointCheckedOut to false for all checkpoint messages
+			checkpointMessages.forEach((m, i) => {
+				m.isCheckpointCheckedOut = i === currentMessageIndex
+			})
+
+			await this.saveClineMessages()
+
 			await this.providerRef.deref()?.postMessageToWebview({ type: "relinquishControl" })
 
 			this.providerRef.deref()?.cancelTask() // the task is already cancelled by the provider beforehand, but we need to re-init to get the updated messages
@@ -1063,40 +1075,67 @@ export class Cline {
 
 	// Checkpoints
 
-	async saveCheckpoint() {
+	async saveCheckpoint(isAttemptCompletionMessage: boolean = false) {
 		const commitHash = await this.checkpointTracker?.commit() // silently fails for now
+		// Set isCheckpointCheckedOut to false for all checkpoint_created messages
+		this.clineMessages.forEach((message) => {
+			if (message.say === "checkpoint_created") {
+				message.isCheckpointCheckedOut = false
+			}
+		})
 		if (commitHash) {
-			// Start from the end and work backwards until we find a tool use or another message with a hash
-			for (let i = this.clineMessages.length - 1; i >= 0; i--) {
-				const message = this.clineMessages[i]
-				if (message.lastCheckpointHash) {
-					// Found a message with a hash, so we can stop
-					break
+			if (!isAttemptCompletionMessage) {
+				// For non-attempt completion we just say checkpoints
+				await this.say("checkpoint_created", commitHash)
+				const lastCheckpointMessage = findLast(this.clineMessages, (m) => m.say === "checkpoint_created")
+				if (lastCheckpointMessage) {
+					lastCheckpointMessage.lastCheckpointHash = commitHash
+					await this.saveClineMessages()
 				}
-				// Update this message with a hash
-				message.lastCheckpointHash = commitHash
-
-				// We only care about adding the hash to the last tool use (we don't want to add this hash to every prior message ie for tasks pre-checkpoint)
-				const isToolUse =
-					message.say === "tool" ||
-					message.ask === "tool" ||
-					message.say === "command" ||
-					message.ask === "command" ||
-					message.say === "completion_result" ||
-					message.ask === "completion_result" ||
-					message.ask === "followup" ||
-					message.say === "use_mcp_server" ||
-					message.ask === "use_mcp_server" ||
-					message.say === "browser_action" ||
-					message.say === "browser_action_launch" ||
-					message.ask === "browser_action_launch"
-
-				if (isToolUse) {
-					break
+			} else {
+				// For attempt_completion, find the last completion_result message and set its checkpoint hash. This will be used to present the 'see new changes' button
+				const lastCompletionResultMessage = findLast(
+					this.clineMessages,
+					(m) => m.say === "completion_result" || m.ask === "completion_result",
+				)
+				if (lastCompletionResultMessage) {
+					lastCompletionResultMessage.lastCheckpointHash = commitHash
+					await this.saveClineMessages()
 				}
 			}
-			// Save the updated messages
-			await this.saveClineMessages()
+
+			// Previously we checkpointed every message, but this is excessive and unnecessary.
+			// // Start from the end and work backwards until we find a tool use or another message with a hash
+			// for (let i = this.clineMessages.length - 1; i >= 0; i--) {
+			// 	const message = this.clineMessages[i]
+			// 	if (message.lastCheckpointHash) {
+			// 		// Found a message with a hash, so we can stop
+			// 		break
+			// 	}
+			// 	// Update this message with a hash
+			// 	message.lastCheckpointHash = commitHash
+
+			// 	// We only care about adding the hash to the last tool use (we don't want to add this hash to every prior message ie for tasks pre-checkpoint)
+			// 	const isToolUse =
+			// 		message.say === "tool" ||
+			// 		message.ask === "tool" ||
+			// 		message.say === "command" ||
+			// 		message.ask === "command" ||
+			// 		message.say === "completion_result" ||
+			// 		message.ask === "completion_result" ||
+			// 		message.ask === "followup" ||
+			// 		message.say === "use_mcp_server" ||
+			// 		message.ask === "use_mcp_server" ||
+			// 		message.say === "browser_action" ||
+			// 		message.say === "browser_action_launch" ||
+			// 		message.ask === "browser_action_launch"
+
+			// 	if (isToolUse) {
+			// 		break
+			// 	}
+			// }
+			// // Save the updated messages
+			// await this.saveClineMessages()
 		}
 	}
 
@@ -1602,7 +1641,7 @@ export class Cline {
 						if (!accessAllowed) {
 							await this.say("clineignore_error", relPath)
 							pushToolResult(formatResponse.toolError(formatResponse.clineIgnoreError(relPath)))
-							await this.saveCheckpoint()
+
 							break
 						}
 
@@ -1706,21 +1745,21 @@ export class Cline {
 									this.consecutiveMistakeCount++
 									pushToolResult(await this.sayAndCreateMissingParamError(block.name, "path"))
 									await this.diffViewProvider.reset()
-									await this.saveCheckpoint()
+
 									break
 								}
 								if (block.name === "replace_in_file" && !diff) {
 									this.consecutiveMistakeCount++
 									pushToolResult(await this.sayAndCreateMissingParamError("replace_in_file", "diff"))
 									await this.diffViewProvider.reset()
-									await this.saveCheckpoint()
+
 									break
 								}
 								if (block.name === "write_to_file" && !content) {
 									this.consecutiveMistakeCount++
 									pushToolResult(await this.sayAndCreateMissingParamError("write_to_file", "content"))
 									await this.diffViewProvider.reset()
-									await this.saveCheckpoint()
+
 									break
 								}
 
@@ -1793,7 +1832,7 @@ export class Cline {
 
 									if (!didApprove) {
 										await this.diffViewProvider.revertChanges()
-										await this.saveCheckpoint()
+
 										break
 									}
 								}
@@ -1842,14 +1881,16 @@ export class Cline {
 								}
 
 								await this.diffViewProvider.reset()
+
 								await this.saveCheckpoint()
+
 								break
 							}
 						} catch (error) {
 							await handleError("writing file", error)
 							await this.diffViewProvider.revertChanges()
 							await this.diffViewProvider.reset()
-							await this.saveCheckpoint()
+
 							break
 						}
 					}
@@ -1877,7 +1918,7 @@ export class Cline {
 								if (!relPath) {
 									this.consecutiveMistakeCount++
 									pushToolResult(await this.sayAndCreateMissingParamError("read_file", "path"))
-									await this.saveCheckpoint()
+
 									break
 								}
 
@@ -1885,7 +1926,7 @@ export class Cline {
 								if (!accessAllowed) {
 									await this.say("clineignore_error", relPath)
 									pushToolResult(formatResponse.toolError(formatResponse.clineIgnoreError(relPath)))
-									await this.saveCheckpoint()
+
 									break
 								}
 
@@ -1906,19 +1947,18 @@ export class Cline {
 									this.removeLastPartialMessageIfExistsWithType("say", "tool")
 									const didApprove = await askApproval("tool", completeMessage)
 									if (!didApprove) {
-										await this.saveCheckpoint()
 										break
 									}
 								}
 								// now execute the tool like normal
 								const content = await extractTextFromFile(absolutePath)
 								pushToolResult(content)
-								await this.saveCheckpoint()
+
 								break
 							}
 						} catch (error) {
 							await handleError("reading file", error)
-							await this.saveCheckpoint()
+
 							break
 						}
 					}
@@ -1948,7 +1988,7 @@ export class Cline {
 								if (!relDirPath) {
 									this.consecutiveMistakeCount++
 									pushToolResult(await this.sayAndCreateMissingParamError("list_files", "path"))
-									await this.saveCheckpoint()
+
 									break
 								}
 								this.consecutiveMistakeCount = 0
@@ -1978,17 +2018,16 @@ export class Cline {
 									this.removeLastPartialMessageIfExistsWithType("say", "tool")
 									const didApprove = await askApproval("tool", completeMessage)
 									if (!didApprove) {
-										await this.saveCheckpoint()
 										break
 									}
 								}
 								pushToolResult(result)
-								await this.saveCheckpoint()
+
 								break
 							}
 						} catch (error) {
 							await handleError("listing files", error)
-							await this.saveCheckpoint()
+
 							break
 						}
 					}
@@ -2016,7 +2055,7 @@ export class Cline {
 								if (!relDirPath) {
 									this.consecutiveMistakeCount++
 									pushToolResult(await this.sayAndCreateMissingParamError("list_code_definition_names", "path"))
-									await this.saveCheckpoint()
+
 									break
 								}
 
@@ -2043,17 +2082,16 @@ export class Cline {
 									this.removeLastPartialMessageIfExistsWithType("say", "tool")
 									const didApprove = await askApproval("tool", completeMessage)
 									if (!didApprove) {
-										await this.saveCheckpoint()
 										break
 									}
 								}
 								pushToolResult(result)
-								await this.saveCheckpoint()
+
 								break
 							}
 						} catch (error) {
 							await handleError("parsing source code definitions", error)
-							await this.saveCheckpoint()
+
 							break
 						}
 					}
@@ -2085,13 +2123,13 @@ export class Cline {
 								if (!relDirPath) {
 									this.consecutiveMistakeCount++
 									pushToolResult(await this.sayAndCreateMissingParamError("search_files", "path"))
-									await this.saveCheckpoint()
+
 									break
 								}
 								if (!regex) {
 									this.consecutiveMistakeCount++
 									pushToolResult(await this.sayAndCreateMissingParamError("search_files", "regex"))
-									await this.saveCheckpoint()
+
 									break
 								}
 								this.consecutiveMistakeCount = 0
@@ -2120,17 +2158,16 @@ export class Cline {
 									this.removeLastPartialMessageIfExistsWithType("say", "tool")
 									const didApprove = await askApproval("tool", completeMessage)
 									if (!didApprove) {
-										await this.saveCheckpoint()
 										break
 									}
 								}
 								pushToolResult(results)
-								await this.saveCheckpoint()
+
 								break
 							}
 						} catch (error) {
 							await handleError("searching files", error)
-							await this.saveCheckpoint()
+
 							break
 						}
 					}
@@ -2189,7 +2226,7 @@ export class Cline {
 										this.consecutiveMistakeCount++
 										pushToolResult(await this.sayAndCreateMissingParamError("browser_action", "url"))
 										await this.browserSession.closeBrowser()
-										await this.saveCheckpoint()
+
 										break
 									}
 									this.consecutiveMistakeCount = 0
@@ -2205,7 +2242,6 @@ export class Cline {
 										this.removeLastPartialMessageIfExistsWithType("say", "browser_action_launch")
 										const didApprove = await askApproval("browser_action_launch", url)
 										if (!didApprove) {
-											await this.saveCheckpoint()
 											break
 										}
 									}
@@ -2224,7 +2260,7 @@ export class Cline {
 												await this.sayAndCreateMissingParamError("browser_action", "coordinate"),
 											)
 											await this.browserSession.closeBrowser()
-											await this.saveCheckpoint()
+
 											break // can't be within an inner switch
 										}
 									}
@@ -2233,7 +2269,7 @@ export class Cline {
 											this.consecutiveMistakeCount++
 											pushToolResult(await this.sayAndCreateMissingParamError("browser_action", "text"))
 											await this.browserSession.closeBrowser()
-											await this.saveCheckpoint()
+
 											break
 										}
 									}
@@ -2282,7 +2318,7 @@ export class Cline {
 												browserActionResult.screenshot ? [browserActionResult.screenshot] : [],
 											),
 										)
-										await this.saveCheckpoint()
+
 										break
 									case "close":
 										pushToolResult(
@@ -2290,17 +2326,16 @@ export class Cline {
 												`The browser has been closed. You may now proceed to using other tools.`,
 											),
 										)
-										await this.saveCheckpoint()
+
 										break
 								}
 
-								await this.saveCheckpoint()
 								break
 							}
 						} catch (error) {
 							await this.browserSession.closeBrowser() // if any error occurs, the browser session is terminated
 							await handleError("executing browser action", error)
-							await this.saveCheckpoint()
+
 							break
 						}
 					}
@@ -2328,7 +2363,7 @@ export class Cline {
 								if (!command) {
 									this.consecutiveMistakeCount++
 									pushToolResult(await this.sayAndCreateMissingParamError("execute_command", "command"))
-									await this.saveCheckpoint()
+
 									break
 								}
 								if (!requiresApprovalRaw) {
@@ -2336,7 +2371,7 @@ export class Cline {
 									pushToolResult(
 										await this.sayAndCreateMissingParamError("execute_command", "requires_approval"),
 									)
-									await this.saveCheckpoint()
+
 									break
 								}
 								this.consecutiveMistakeCount = 0
@@ -2347,7 +2382,7 @@ export class Cline {
 									pushToolResult(
 										formatResponse.toolError(formatResponse.clineIgnoreError(ignoredFileAttemptedToAccess)),
 									)
-									await this.saveCheckpoint()
+
 									break
 								}
 
@@ -2369,7 +2404,6 @@ export class Cline {
 											`${this.shouldAutoApproveTool(block.name) && requiresApproval ? COMMAND_REQ_APP_STRING : ""}`, // ugly hack until we refactor combineCommandSequences
 									)
 									if (!didApprove) {
-										await this.saveCheckpoint()
 										break
 									}
 								}
@@ -2398,12 +2432,14 @@ export class Cline {
 								this.providerRef.deref()?.workspaceTracker?.populateFilePaths()
 
 								pushToolResult(result)
+
 								await this.saveCheckpoint()
+
 								break
 							}
 						} catch (error) {
 							await handleError("executing command", error)
-							await this.saveCheckpoint()
+
 							break
 						}
 					}
@@ -2433,13 +2469,13 @@ export class Cline {
 								if (!server_name) {
 									this.consecutiveMistakeCount++
 									pushToolResult(await this.sayAndCreateMissingParamError("use_mcp_tool", "server_name"))
-									await this.saveCheckpoint()
+
 									break
 								}
 								if (!tool_name) {
 									this.consecutiveMistakeCount++
 									pushToolResult(await this.sayAndCreateMissingParamError("use_mcp_tool", "tool_name"))
-									await this.saveCheckpoint()
+
 									break
 								}
 								// arguments are optional, but if they are provided they must be valid JSON
@@ -2463,7 +2499,7 @@ export class Cline {
 												formatResponse.invalidMcpToolArgumentError(server_name, tool_name),
 											),
 										)
-										await this.saveCheckpoint()
+
 										break
 									}
 								}
@@ -2491,7 +2527,6 @@ export class Cline {
 									this.removeLastPartialMessageIfExistsWithType("say", "use_mcp_server")
 									const didApprove = await askApproval("use_mcp_server", completeMessage)
 									if (!didApprove) {
-										await this.saveCheckpoint()
 										break
 									}
 								}
@@ -2520,12 +2555,14 @@ export class Cline {
 											.join("\n\n") || "(No response)"
 								await this.say("mcp_server_response", toolResultPretty)
 								pushToolResult(formatResponse.toolResult(toolResultPretty))
+
 								await this.saveCheckpoint()
+
 								break
 							}
 						} catch (error) {
 							await handleError("executing MCP tool", error)
-							await this.saveCheckpoint()
+
 							break
 						}
 					}
@@ -2553,13 +2590,13 @@ export class Cline {
 								if (!server_name) {
 									this.consecutiveMistakeCount++
 									pushToolResult(await this.sayAndCreateMissingParamError("access_mcp_resource", "server_name"))
-									await this.saveCheckpoint()
+
 									break
 								}
 								if (!uri) {
 									this.consecutiveMistakeCount++
 									pushToolResult(await this.sayAndCreateMissingParamError("access_mcp_resource", "uri"))
-									await this.saveCheckpoint()
+
 									break
 								}
 								this.consecutiveMistakeCount = 0
@@ -2580,7 +2617,6 @@ export class Cline {
 									this.removeLastPartialMessageIfExistsWithType("say", "use_mcp_server")
 									const didApprove = await askApproval("use_mcp_server", completeMessage)
 									if (!didApprove) {
-										await this.saveCheckpoint()
 										break
 									}
 								}
@@ -2600,12 +2636,12 @@ export class Cline {
 										.join("\n\n") || "(Empty response)"
 								await this.say("mcp_server_response", resourceResultPretty)
 								pushToolResult(formatResponse.toolResult(resourceResultPretty))
-								await this.saveCheckpoint()
+
 								break
 							}
 						} catch (error) {
 							await handleError("accessing MCP resource", error)
-							await this.saveCheckpoint()
+
 							break
 						}
 					}
@@ -2619,7 +2655,7 @@ export class Cline {
 								if (!question) {
 									this.consecutiveMistakeCount++
 									pushToolResult(await this.sayAndCreateMissingParamError("ask_followup_question", "question"))
-									await this.saveCheckpoint()
+
 									break
 								}
 								this.consecutiveMistakeCount = 0
@@ -2634,12 +2670,12 @@ export class Cline {
 								const { text, images } = await this.ask("followup", question, false)
 								await this.say("user_feedback", text ?? "", images)
 								pushToolResult(formatResponse.toolResult(`<answer>\n${text}\n</answer>`, images))
-								await this.saveCheckpoint()
+
 								break
 							}
 						} catch (error) {
 							await handleError("asking question", error)
-							await this.saveCheckpoint()
+
 							break
 						}
 					}
@@ -2655,7 +2691,7 @@ export class Cline {
 								if (!response) {
 									this.consecutiveMistakeCount++
 									pushToolResult(await this.sayAndCreateMissingParamError("plan_mode_response", "response"))
-									// await this.saveCheckpoint()
+									//
 									break
 								}
 								this.consecutiveMistakeCount = 0
@@ -2684,12 +2720,12 @@ export class Cline {
 									pushToolResult(formatResponse.toolResult(`<user_message>\n${text}\n</user_message>`, images))
 								}
 
-								// await this.saveCheckpoint()
+								//
 								break
 							}
 						} catch (error) {
 							await handleError("responding to inquiry", error)
-							// await this.saveCheckpoint()
+							//
 							break
 						}
 					}
@@ -2750,7 +2786,7 @@ export class Cline {
 										// last message is completion_result
 										// we have command string, which means we have the result as well, so finish it (doesnt have to exist yet)
 										await this.say("completion_result", removeClosingTag("result", result), undefined, false)
-										await this.saveCheckpoint()
+										await this.saveCheckpoint(true)
 										await addNewChangesFlagToLastCompletionResultMessage()
 										await this.ask("command", removeClosingTag("command", command), block.partial).catch(
 											() => {},
@@ -2770,7 +2806,6 @@ export class Cline {
 								if (!result) {
 									this.consecutiveMistakeCount++
 									pushToolResult(await this.sayAndCreateMissingParamError("attempt_completion", "result"))
-									await this.saveCheckpoint()
 									break
 								}
 								this.consecutiveMistakeCount = 0
@@ -2787,31 +2822,29 @@ export class Cline {
 									if (lastMessage && lastMessage.ask !== "command") {
 										// havent sent a command message yet so first send completion_result then command
 										await this.say("completion_result", result, undefined, false)
-										await this.saveCheckpoint()
+										await this.saveCheckpoint(true)
 										await addNewChangesFlagToLastCompletionResultMessage()
 									} else {
 										// we already sent a command message, meaning the complete completion message has also been sent
-										await this.saveCheckpoint()
+										await this.saveCheckpoint(true)
 									}
 
 									// complete command message
 									const didApprove = await askApproval("command", command)
 									if (!didApprove) {
-										await this.saveCheckpoint()
 										break
 									}
 									const [userRejected, execCommandResult] = await this.executeCommandTool(command!)
 									if (userRejected) {
 										this.didRejectTool = true
 										pushToolResult(execCommandResult)
-										await this.saveCheckpoint()
 										break
 									}
 									// user didn't reject, but the command may have output
 									commandResult = execCommandResult
 								} else {
 									await this.say("completion_result", result, undefined, false)
-									await this.saveCheckpoint()
+									await this.saveCheckpoint(true)
 									await addNewChangesFlagToLastCompletionResultMessage()
 								}
 
@@ -2845,12 +2878,12 @@ export class Cline {
 								})
 								this.userMessageContent.push(...toolResults)
 
-								// await this.saveCheckpoint()
+								//
 								break
 							}
 						} catch (error) {
 							await handleError("attempting completion", error)
-							await this.saveCheckpoint()
+
 							break
 						}
 					}
@@ -2946,6 +2979,12 @@ export class Cline {
 		// get previous api req's index to check token usage and determine if we need to truncate conversation history
 		const previousApiReqIndex = findLastIndex(this.clineMessages, (m) => m.say === "api_req_started")
 
+		// Save checkpoint if this is the first API request
+		const isFirstRequest = this.clineMessages.filter((m) => m.say === "api_req_started").length === 0
+		if (isFirstRequest) {
+			await this.say("checkpoint_created") // no hash since we need to wait for CheckpointTracker to be initialized
+		}
+
 		// getting verbose details is an expensive operation, it uses globby to top-down build file structure of project which for large projects can take a few seconds
 		// for the best UX we show a placeholder api_req_started message with a loading spinner as this happens
 		await this.say(
@@ -2969,6 +3008,16 @@ export class Cline {
 			}
 		}
 
+		// Now that checkpoint tracker is initialized, update the dummy checkpoint_created message with the commit hash. (This is necessary since we use the API request loading as an opportunity to initialize the checkpoint tracker, which can take some time)
+		if (isFirstRequest) {
+			const commitHash = await this.checkpointTracker?.commit()
+			const lastCheckpointMessage = findLast(this.clineMessages, (m) => m.say === "checkpoint_created")
+			if (lastCheckpointMessage) {
+				lastCheckpointMessage.lastCheckpointHash = commitHash
+				await this.saveClineMessages()
+			}
+		}
+
 		const [parsedUserContent, environmentDetails] = await this.loadContext(userContent, includeFileDetails)
 		userContent = parsedUserContent
 		// add environment details as its own text block, separate from tool results

src/shared/ExtensionMessage.ts

@@ -85,6 +85,7 @@ export interface ClineMessage {
 	images?: string[]
 	partial?: boolean
 	lastCheckpointHash?: string
+	isCheckpointCheckedOut?: boolean
 	conversationHistoryIndex?: number
 	conversationHistoryDeletedRange?: [number, number] // for when conversation history is truncated for API requests
 }
@@ -128,6 +129,7 @@ export type ClineSay =
 	| "diff_error"
 	| "deleted_api_reqs"
 	| "clineignore_error"
+	| "checkpoint_created"
 
 export interface ClineSayTool {
 	tool:

webview-ui/package.json

@@ -3,6 +3,7 @@
 	"version": "0.1.0",
 	"private": true,
 	"dependencies": {
+		"@floating-ui/react": "^0.27.4",
 		"@vscode/webview-ui-toolkit": "^1.4.0",
 		"debounce": "^2.1.1",
 		"fast-deep-equal": "^3.1.3",

webview-ui/src/components/chat/BrowserSessionRow.tsx

@@ -1,17 +1,16 @@
+import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
 import deepEqual from "fast-deep-equal"
 import React, { memo, useEffect, useMemo, useRef, useState } from "react"
 import { useSize } from "react-use"
+import styled from "styled-components"
+import { BROWSER_VIEWPORT_PRESETS } from "../../../../src/shared/BrowserSettings"
 import { BrowserAction, BrowserActionResult, ClineMessage, ClineSayBrowserAction } from "../../../../src/shared/ExtensionMessage"
+import { useExtensionState } from "../../context/ExtensionStateContext"
 import { vscode } from "../../utils/vscode"
+import { BrowserSettingsMenu } from "../browser/BrowserSettingsMenu"
+import { CheckpointControls } from "../common/CheckpointControls"
 import CodeBlock, { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
 import { ChatRowContent, ProgressIndicator } from "./ChatRow"
-import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
-import styled from "styled-components"
-import { CheckpointControls, CheckpointOverlay } from "../common/CheckpointControls"
-import { findLast } from "../../../../src/shared/array"
-import { BrowserSettingsMenu } from "../browser/BrowserSettingsMenu"
-import { useExtensionState } from "../../context/ExtensionStateContext"
-import { BROWSER_VIEWPORT_PRESETS } from "../../../../src/shared/BrowserSettings"
 
 interface BrowserSessionRowProps {
 	messages: ClineMessage[]
@@ -144,10 +143,10 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 		return launchMessage?.say === "browser_action_launch"
 	}, [messages])
 
-	const lastCheckpointMessageTs = useMemo(() => {
-		const lastCheckpointMessage = findLast(messages, (m) => m.lastCheckpointHash !== undefined)
-		return lastCheckpointMessage?.ts
-	}, [messages])
+	// const lastCheckpointMessageTs = useMemo(() => {
+	// 	const lastCheckpointMessage = findLast(messages, (m) => m.lastCheckpointHash !== undefined)
+	// 	return lastCheckpointMessage?.ts
+	// }, [messages])
 
 	// Find the latest available URL and screenshot
 	const latestState = useMemo(() => {
@@ -231,10 +230,10 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 	// Use latest click position while browsing, otherwise use display state
 	const mousePosition = isBrowsing ? latestClickPosition || displayState.mousePosition : displayState.mousePosition
 
-	let shouldShowCheckpoints = true
-	if (isLast) {
-		shouldShowCheckpoints = lastModifiedMessage?.ask === "resume_completed_task" || lastModifiedMessage?.ask === "resume_task"
-	}
+	// let shouldShowCheckpoints = true
+	// if (isLast) {
+	// 	shouldShowCheckpoints = lastModifiedMessage?.ask === "resume_completed_task" || lastModifiedMessage?.ask === "resume_task"
+	// }
 
 	const shouldShowSettings = useMemo(() => {
 		const lastMessage = messages[messages.length - 1]
@@ -423,7 +422,7 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 				</div>
 			)}
 
-			{shouldShowCheckpoints && <CheckpointOverlay messageTs={lastCheckpointMessageTs} />}
+			{/* {shouldShowCheckpoints && <CheckpointOverlay messageTs={lastCheckpointMessageTs} />} */}
 		</BrowserSessionRowContainer>,
 	)
 

webview-ui/src/components/chat/ChatRow.tsx

@@ -25,6 +25,7 @@ import McpResourceRow from "../mcp/McpResourceRow"
 import McpToolRow from "../mcp/McpToolRow"
 import { highlightMentions } from "./TaskHeader"
 import CreditLimitError from "./CreditLimitError"
+import { CheckmarkControl } from "../common/CheckmarkControl"
 
 const ChatRowContainer = styled.div`
 	padding: 10px 6px 10px 15px;
@@ -60,8 +61,8 @@ const ChatRow = memo(
 				message.ask === "tool" ||
 				message.say === "command" ||
 				message.ask === "command" ||
-				message.say === "completion_result" ||
-				message.ask === "completion_result" ||
+				// message.say === "completion_result" ||
+				// message.ask === "completion_result" ||
 				message.say === "use_mcp_server" ||
 				message.ask === "use_mcp_server")
 
@@ -1026,6 +1027,12 @@ export const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifi
 							</div>
 						</>
 					)
+				case "checkpoint_created":
+					return (
+						<>
+							<CheckmarkControl messageTs={message.ts} isCheckpointCheckedOut={message.isCheckpointCheckedOut} />
+						</>
+					)
 				case "completion_result":
 					const hasChanges = message.text?.endsWith(COMPLETION_RESULT_CHANGES_FLAG) ?? false
 					const text = hasChanges ? message.text?.slice(0, -COMPLETION_RESULT_CHANGES_FLAG.length) : message.text

webview-ui/src/components/chat/ChatView.tsx

@@ -919,7 +919,7 @@ const ScrollToBottomButton = styled.div`
 	justify-content: center;
 	align-items: center;
 	flex: 1;
-	height: 24px;
+	height: 25px;
 
 	&:hover {
 		background-color: color-mix(in srgb, var(--vscode-toolbar-hoverBackground) 90%, transparent);

webview-ui/src/components/chat/TaskHeader.tsx

@@ -423,7 +423,7 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 									</span>
 								</div>
 							)}
-							{ContextWindowComponent}
+							{/* {ContextWindowComponent} */}
 							{isCostAvailable && (
 								<div
 									style={{

webview-ui/src/components/common/CheckmarkControl.tsx

@@ -0,0 +1,394 @@
+import { useCallback, useRef, useState, useEffect } from "react"
+import { useClickAway, useEvent } from "react-use"
+import styled from "styled-components"
+import { ExtensionMessage } from "../../../../src/shared/ExtensionMessage"
+import { vscode } from "../../utils/vscode"
+import { CODE_BLOCK_BG_COLOR } from "./CodeBlock"
+import { ClineCheckpointRestore } from "../../../../src/shared/WebviewMessage"
+import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
+import { createPortal } from "react-dom"
+import { useFloating, offset, flip, shift } from "@floating-ui/react"
+
+interface CheckmarkControlProps {
+	messageTs?: number
+	isCheckpointCheckedOut?: boolean
+}
+
+export const CheckmarkControl = ({ messageTs, isCheckpointCheckedOut }: CheckmarkControlProps) => {
+	const [compareDisabled, setCompareDisabled] = useState(false)
+	const [restoreTaskDisabled, setRestoreTaskDisabled] = useState(false)
+	const [restoreWorkspaceDisabled, setRestoreWorkspaceDisabled] = useState(false)
+	const [restoreBothDisabled, setRestoreBothDisabled] = useState(false)
+	const [showRestoreConfirm, setShowRestoreConfirm] = useState(false)
+	const [hasMouseEntered, setHasMouseEntered] = useState(false)
+	const containerRef = useRef<HTMLDivElement>(null)
+	const tooltipRef = useRef<HTMLDivElement>(null)
+
+	const { refs, floatingStyles, update, placement } = useFloating({
+		placement: "bottom-end",
+		middleware: [
+			offset({
+				mainAxis: 8,
+				crossAxis: 10,
+			}),
+			flip(),
+			shift(),
+		],
+	})
+
+	useEffect(() => {
+		const handleScroll = () => {
+			update()
+		}
+		window.addEventListener("scroll", handleScroll, true)
+		return () => window.removeEventListener("scroll", handleScroll, true)
+	}, [update])
+
+	useEffect(() => {
+		if (showRestoreConfirm) {
+			update()
+		}
+	}, [showRestoreConfirm, update])
+
+	const handleMessage = useCallback((event: MessageEvent<ExtensionMessage>) => {
+		if (event.data.type === "relinquishControl") {
+			setCompareDisabled(false)
+			setRestoreTaskDisabled(false)
+			setRestoreWorkspaceDisabled(false)
+			setRestoreBothDisabled(false)
+			setShowRestoreConfirm(false)
+		}
+	}, [])
+
+	const handleRestoreTask = () => {
+		setRestoreTaskDisabled(true)
+		vscode.postMessage({
+			type: "checkpointRestore",
+			number: messageTs,
+			text: "task",
+		})
+	}
+
+	const handleRestoreWorkspace = () => {
+		setRestoreWorkspaceDisabled(true)
+		vscode.postMessage({
+			type: "checkpointRestore",
+			number: messageTs,
+			text: "workspace",
+		})
+	}
+
+	const handleRestoreBoth = () => {
+		setRestoreBothDisabled(true)
+		vscode.postMessage({
+			type: "checkpointRestore",
+			number: messageTs,
+			text: "taskAndWorkspace",
+		})
+	}
+
+	const handleMouseEnter = () => {
+		setHasMouseEntered(true)
+	}
+
+	const handleMouseLeave = () => {
+		if (hasMouseEntered) {
+			setShowRestoreConfirm(false)
+			setHasMouseEntered(false)
+		}
+	}
+
+	const handleControlsMouseLeave = (e: React.MouseEvent) => {
+		const tooltipElement = tooltipRef.current
+
+		if (tooltipElement && showRestoreConfirm) {
+			const tooltipRect = tooltipElement.getBoundingClientRect()
+
+			if (
+				e.clientY >= tooltipRect.top &&
+				e.clientY <= tooltipRect.bottom &&
+				e.clientX >= tooltipRect.left &&
+				e.clientX <= tooltipRect.right
+			) {
+				return
+			}
+		}
+
+		setShowRestoreConfirm(false)
+		setHasMouseEntered(false)
+	}
+
+	useEvent("message", handleMessage)
+
+	return (
+		<Container isMenuOpen={showRestoreConfirm} $isCheckedOut={isCheckpointCheckedOut} onMouseLeave={handleControlsMouseLeave}>
+			<i
+				className="codicon codicon-bookmark"
+				style={{
+					color: isCheckpointCheckedOut ? "var(--vscode-textLink-foreground)" : "var(--vscode-descriptionForeground)",
+					fontSize: "12px",
+					flexShrink: 0,
+				}}
+			/>
+			<Label $isCheckedOut={isCheckpointCheckedOut}>
+				{isCheckpointCheckedOut ? "Checkpoint (restored)" : "Checkpoint"}
+			</Label>
+			<DottedLine $isCheckedOut={isCheckpointCheckedOut} />
+			<ButtonGroup>
+				<CustomButton
+					$isCheckedOut={isCheckpointCheckedOut}
+					disabled={compareDisabled}
+					style={{ cursor: compareDisabled ? "wait" : "pointer" }}
+					onClick={() => {
+						setCompareDisabled(true)
+						vscode.postMessage({
+							type: "checkpointDiff",
+							number: messageTs,
+						})
+					}}>
+					Compare
+				</CustomButton>
+				<DottedLine small $isCheckedOut={isCheckpointCheckedOut} />
+				<div ref={refs.setReference} style={{ position: "relative", marginTop: -2 }}>
+					<CustomButton
+						$isCheckedOut={isCheckpointCheckedOut}
+						isActive={showRestoreConfirm}
+						onClick={() => setShowRestoreConfirm(true)}>
+						Restore
+					</CustomButton>
+					{showRestoreConfirm &&
+						createPortal(
+							<RestoreConfirmTooltip
+								ref={refs.setFloating}
+								style={floatingStyles}
+								data-placement={placement}
+								onMouseEnter={handleMouseEnter}
+								onMouseLeave={handleMouseLeave}>
+								<RestoreOption>
+									<VSCodeButton
+										onClick={handleRestoreWorkspace}
+										disabled={restoreWorkspaceDisabled}
+										style={{
+											cursor: restoreWorkspaceDisabled ? "wait" : "pointer",
+											width: "100%",
+											marginBottom: "10px",
+										}}>
+										Restore Files
+									</VSCodeButton>
+									<p>
+										Restores your project's files back to a snapshot taken at this point (use "Compare" to see
+										what will be reverted)
+									</p>
+								</RestoreOption>
+								{/* <RestoreOption>
+									<VSCodeButton
+										onClick={handleRestoreTask}
+										disabled={restoreTaskDisabled}
+										style={{
+											cursor: restoreTaskDisabled ? "wait" : "pointer",
+											width: "100%",
+											marginBottom: "10px",
+										}}>
+										Restore Task Only
+									</VSCodeButton>
+									<p>Deletes messages after this point (does not affect workspace files)</p>
+								</RestoreOption> */}
+								<RestoreOption>
+									<VSCodeButton
+										onClick={handleRestoreBoth}
+										disabled={restoreBothDisabled}
+										style={{
+											cursor: restoreBothDisabled ? "wait" : "pointer",
+											width: "100%",
+											marginBottom: "10px",
+										}}>
+										Restore Files & Task
+									</VSCodeButton>
+									<p>Restores your project's files and deletes all messages after this point</p>
+								</RestoreOption>
+							</RestoreConfirmTooltip>,
+							document.body,
+						)}
+				</div>
+				<DottedLine small $isCheckedOut={isCheckpointCheckedOut} />
+			</ButtonGroup>
+		</Container>
+	)
+}
+
+const Container = styled.div<{ isMenuOpen?: boolean; $isCheckedOut?: boolean }>`
+	display: flex;
+	align-items: center;
+	padding: 4px 0;
+	gap: 4px;
+	position: relative;
+	min-width: 0;
+	margin-top: -10px;
+	margin-bottom: -10px;
+	opacity: ${(props) => (props.$isCheckedOut ? 1 : props.isMenuOpen ? 1 : 0.5)};
+
+	&:hover {
+		opacity: 1;
+	}
+`
+
+const Label = styled.span<{ $isCheckedOut?: boolean }>`
+	color: ${(props) => (props.$isCheckedOut ? "var(--vscode-textLink-foreground)" : "var(--vscode-descriptionForeground)")};
+	font-size: 9px;
+	flex-shrink: 0;
+`
+
+const DottedLine = styled.div<{ small?: boolean; $isCheckedOut?: boolean }>`
+	flex: ${(props) => (props.small ? "0 0 5px" : "1")};
+	min-width: ${(props) => (props.small ? "5px" : "5px")};
+	height: 1px;
+	background-image: linear-gradient(
+		to right,
+		${(props) => (props.$isCheckedOut ? "var(--vscode-textLink-foreground)" : "var(--vscode-descriptionForeground)")} 50%,
+		transparent 50%
+	);
+	background-size: 4px 1px;
+	background-repeat: repeat-x;
+`
+
+const ButtonGroup = styled.div`
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	flex-shrink: 0;
+`
+
+const CustomButton = styled.button<{ disabled?: boolean; isActive?: boolean; $isCheckedOut?: boolean }>`
+	background: ${(props) =>
+		props.isActive || props.disabled
+			? props.$isCheckedOut
+				? "var(--vscode-textLink-foreground)"
+				: "var(--vscode-descriptionForeground)"
+			: "transparent"};
+	border: none;
+	color: ${(props) =>
+		props.isActive || props.disabled
+			? "var(--vscode-editor-background)"
+			: props.$isCheckedOut
+				? "var(--vscode-textLink-foreground)"
+				: "var(--vscode-descriptionForeground)"};
+	padding: 2px 6px;
+	font-size: 9px;
+	cursor: pointer;
+	position: relative;
+
+	&::before {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		border-radius: 1px;
+		background-image: ${(props) =>
+			props.isActive || props.disabled
+				? "none"
+				: `linear-gradient(to right, ${props.$isCheckedOut ? "var(--vscode-textLink-foreground)" : "var(--vscode-descriptionForeground)"} 50%, transparent 50%),
+			linear-gradient(to bottom, ${props.$isCheckedOut ? "var(--vscode-textLink-foreground)" : "var(--vscode-descriptionForeground)"} 50%, transparent 50%),
+			linear-gradient(to right, ${props.$isCheckedOut ? "var(--vscode-textLink-foreground)" : "var(--vscode-descriptionForeground)"} 50%, transparent 50%),
+			linear-gradient(to bottom, ${props.$isCheckedOut ? "var(--vscode-textLink-foreground)" : "var(--vscode-descriptionForeground)"} 50%, transparent 50%)`};
+		background-size: ${(props) => (props.isActive || props.disabled ? "auto" : `4px 1px, 1px 4px, 4px 1px, 1px 4px`)};
+		background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
+		background-position:
+			0 0,
+			100% 0,
+			0 100%,
+			0 0;
+	}
+
+	&:hover:not(:disabled) {
+		background: ${(props) =>
+			props.$isCheckedOut ? "var(--vscode-textLink-foreground)" : "var(--vscode-descriptionForeground)"};
+		color: var(--vscode-editor-background);
+		&::before {
+			display: none;
+		}
+	}
+
+	&:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+`
+
+const RestoreOption = styled.div`
+	&:not(:last-child) {
+		margin-bottom: 10px;
+		padding-bottom: 4px;
+		border-bottom: 1px solid var(--vscode-editorGroup-border);
+	}
+
+	p {
+		margin: 0 0 2px 0;
+		color: var(--vscode-descriptionForeground);
+		font-size: 11px;
+		line-height: 14px;
+	}
+
+	&:last-child p {
+		margin: 0 0 -2px 0;
+	}
+`
+
+const RestoreConfirmTooltip = styled.div`
+	position: fixed;
+	background: ${CODE_BLOCK_BG_COLOR};
+	border: 1px solid var(--vscode-editorGroup-border);
+	padding: 12px;
+	border-radius: 3px;
+	width: min(calc(100vw - 54px), 600px);
+	z-index: 1000;
+
+	// Add invisible padding to create a safe hover zone
+	&::before {
+		content: "";
+		position: absolute;
+		top: -8px;
+		left: 0;
+		right: 0;
+		height: 8px;
+	}
+
+	// Adjust arrow to be above the padding
+	&::after {
+		content: "";
+		position: absolute;
+		top: -6px;
+		right: 24px;
+		width: 10px;
+		height: 10px;
+		background: ${CODE_BLOCK_BG_COLOR};
+		border-left: 1px solid var(--vscode-editorGroup-border);
+		border-top: 1px solid var(--vscode-editorGroup-border);
+		transform: rotate(45deg);
+		z-index: 1;
+	}
+
+	// When menu appears above the button
+	&[data-placement^="top"] {
+		&::before {
+			top: auto;
+			bottom: -8px;
+		}
+
+		&::after {
+			top: auto;
+			bottom: -6px;
+			right: 24px;
+			transform: rotate(225deg);
+		}
+	}
+
+	p {
+		margin: 0 0 6px 0;
+		color: var(--vscode-descriptionForeground);
+		font-size: 12px;
+		white-space: normal;
+		word-wrap: break-word;
+	}
+`