Minor UI changes; update copy

README.md

@@ -12,17 +12,17 @@ Thanks to [Claude 3.5 Sonnet's agentic coding capabilities](https://www-cdn.anth
 
 -   Paste images in chat to use Claude's vision capabilities and turn mockups into fully functional applications or fix bugs with screenshots
 -   Inspect diffs of every change Claude makes right in the editor, and provide feedback until you're satisfied with the result
--   Runs terminal commands directly in chat, so you never have to open a terminal yourself (+ respond to interactive commands by sending a message)
+-   Runs CLI commands directly in chat, so you never have to open a terminal yourself (+ respond to interactive commands by sending a message)
 -   Presents permission buttons (i.e. 'Approve terminal command') before tool use or sending information to the API
 -   Keep track of total tokens and API usage cost for the entire task loop and individual requests
 -   Set a maximum # of API requests allowed for a task before being prompted for permission to proceed
 -   When a task is completed, Claude determines if he can present the result to you with a terminal command like `open -a "Google Chrome" index.html`, which you run with a click of a button
 
-_**Pro tip**: Use the `Cmd + Shift + P` shortcut to open the command palette and type `Claude Dev: Open In New Tab` to start a new task right in your editor._
+_**Pro tip**: Use the `Cmd + Shift + P` shortcut to open the command palette and type `Claude Dev: Open In New Tab` to start a new task right in the editor._
 
 ## How it works
 
-Claude Dev uses an autonomous task execution loop with chain-of-thought prompting and access to powerful tools that give him the ability to accomplish nearly any task. Start by providing a task and the loop fires off, where it might use certain tools (with your permission) to accomplish each step in its thought process.
+Claude Dev uses an autonomous task execution loop with chain-of-thought prompting and access to powerful tools that give him the ability to accomplish nearly any task. Start by providing a task and the loop fires off, where Claude might use certain tools (with your permission) to accomplish each step in his thought process.
 
 ### Tools
 

package.json

@@ -1,8 +1,8 @@
 {
   "name": "claude-dev",
   "displayName": "Claude Dev",
-  "description": "Autonomous software engineer right in your IDE, capable of creating/editing files, executing commands, and more with your permission every step of the way.",
+  "description": "Autonomous coding agent right in your IDE, capable of creating/editing files, executing commands, and more with your permission every step of the way.",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "icon": "icon.png",
   "engines": {
     "vscode": "^1.84.0"

src/ClaudeDev.ts

@@ -162,7 +162,7 @@ const tools: Tool[] = [
 	{
 		name: "write_to_file",
 		description:
-			"Write content to a file at the specified path. If the file exists, only the necessary changes will be applied. If the file doesn't exist, it will be created. Always provide the full intended content of the file, without any truncation. This tool will automatically create any directories needed to write the file.",
+			"Write content to a file at the specified path. If the file exists, it will be completely overwritten with the provided content (so do NOT omit unmodified sections). If the file doesn't exist, it will be created. This tool will automatically create any directories needed to write the file.",
 		input_schema: {
 			type: "object",
 			properties: {
@@ -172,7 +172,8 @@ const tools: Tool[] = [
 				},
 				content: {
 					type: "string",
-					description: "The full content to write to the file",
+					description:
+						"The full content to write to the file. Must be the full intended content of the file, without any omission or truncation.",
 				},
 			},
 			required: ["path", "content"],

src/api/anthropic.ts

@@ -33,7 +33,7 @@ export class AnthropicHandler implements ApiHandler {
 					{
 						model: modelId,
 						max_tokens: this.getModel().info.maxTokens,
-						system: [{ text: systemPrompt, type: "text", cache_control: { type: "ephemeral" } }],
+						system: [{ text: systemPrompt, type: "text", cache_control: { type: "ephemeral" } }], // setting cache breakpoint for system prompt so new tasks can reuse it
 						messages: messages.map((message, index) => {
 							if (index === lastUserMsgIndex || index === secondLastMsgUserIndex) {
 								return {

src/api/openrouter.ts

@@ -379,6 +379,7 @@ export class OpenRouterHandler implements ApiHandler {
 		return {
 			model: this.getModel().id,
 			max_tokens: this.getModel().info.maxTokens,
+			system: "(see SYSTEM_PROMPT in src/ClaudeDev.ts)",
 			messages: [{ conversation_history: "..." }, { role: "user", content: withoutImageData(userContent) }],
 			tools: "(see tools in src/ClaudeDev.ts)",
 			tool_choice: "auto",

webview-ui/src/components/ChatView.tsx

@@ -618,15 +618,17 @@ const ChatView = ({
 						appearance="icon"
 						aria-label="Attach Images"
 						onClick={selectImages}
-						style={{ marginRight: "4px" }}>
+						style={{ marginRight: "2px" }}>
-						<span className="codicon codicon-device-camera" style={{ fontSize: 18, marginLeft: -2 }}></span>
+						<span
+							className="codicon codicon-device-camera"
+							style={{ fontSize: 18, marginLeft: -2, marginTop: -0.5 }}></span>
 					</VSCodeButton>
 					<VSCodeButton
 						disabled={textAreaDisabled}
 						appearance="icon"
 						aria-label="Send Message"
 						onClick={handleSendMessage}>
-						<span className="codicon codicon-send" style={{ fontSize: 15.5, marginBottom: -1 }}></span>
+						<span className="codicon codicon-send" style={{ fontSize: 16 }}></span>
 					</VSCodeButton>
 				</div>
 			</div>

webview-ui/src/components/SettingsView.tsx

@@ -72,7 +72,7 @@ const SettingsView = ({
 				left: 0,
 				right: 0,
 				bottom: 0,
-				padding: "10px 0px 15px 20px",
+				padding: "10px 0px 0px 20px",
 				display: "flex",
 				flexDirection: "column",
 				overflow: "hidden",
@@ -88,7 +88,8 @@ const SettingsView = ({
 				<h3 style={{ color: "var(--vscode-foreground)", margin: 0 }}>Settings</h3>
 				<VSCodeButton onClick={handleSubmit}>Done</VSCodeButton>
 			</div>
-			<div style={{ flexGrow: 1, overflowY: "scroll", paddingRight: 8 }}>
+			<div
+				style={{ flexGrow: 1, overflowY: "scroll", paddingRight: 8, display: "flex", flexDirection: "column" }}>
 				<div style={{ marginBottom: 5 }}>
 					<ApiOptions
 						apiConfiguration={apiConfiguration}
@@ -107,7 +108,7 @@ const SettingsView = ({
 					)}
 				</div>
 
-				<div style={{ marginBottom: 15 }}>
+				<div style={{ marginBottom: 5 }}>
 					<VSCodeTextArea
 						value={customInstructions}
 						style={{ width: "100%" }}
@@ -156,24 +157,24 @@ const SettingsView = ({
 						</p>
 					)}
 				</div>
-			</div>
 
-			<div
+				<div
-				style={{
+					style={{
-					textAlign: "center",
+						textAlign: "center",
-					color: "var(--vscode-descriptionForeground)",
+						color: "var(--vscode-descriptionForeground)",
-					fontSize: "12px",
+						fontSize: "12px",
-					lineHeight: "1.2",
+						lineHeight: "1.2",
-					paddingTop: 10,
+						marginTop: "auto",
-					paddingRight: 18,
+						padding: "10px 8px 15px 0px",
-				}}>
+					}}>
-				<p style={{ wordWrap: "break-word", margin: 0, padding: 0 }}>
+					<p style={{ wordWrap: "break-word", margin: 0, padding: 0 }}>
-					If you have any questions or feedback, feel free to open an issue at{" "}
+						If you have any questions or feedback, feel free to open an issue at{" "}
-					<VSCodeLink href="https://github.com/saoudrizwan/claude-dev" style={{ display: "inline" }}>
+						<VSCodeLink href="https://github.com/saoudrizwan/claude-dev" style={{ display: "inline" }}>
-						https://github.com/saoudrizwan/claude-dev
+							https://github.com/saoudrizwan/claude-dev
-					</VSCodeLink>
+						</VSCodeLink>
-				</p>
+					</p>
-				<p style={{ fontStyle: "italic", margin: "10px 0 0 0", padding: 0 }}>v{version}</p>
+					<p style={{ fontStyle: "italic", margin: "10px 0 0 0", padding: 0 }}>v{version}</p>
+				</div>
 			</div>
 		</div>
 	)

webview-ui/src/components/TaskHeader.tsx

@@ -195,7 +195,7 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 						<span style={{ display: "flex", alignItems: "center", gap: "3px" }}>
 							<i
 								className="codicon codicon-arrow-up"
-								style={{ fontSize: "12px", fontWeight: "bold", marginBottom: "-1.5px" }}
+								style={{ fontSize: "12px", fontWeight: "bold", marginBottom: "-2px" }}
 							/>
 							{tokensIn.toLocaleString()}
 						</span>
@@ -209,7 +209,7 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 					</div>
 					{(doesModelSupportPromptCache || cacheReads !== undefined || cacheWrites !== undefined) && (
 						<div style={{ display: "flex", alignItems: "center", gap: "4px", flexWrap: "wrap" }}>
-							<span style={{ fontWeight: "bold" }}>Prompt Cache:</span>
+							<span style={{ fontWeight: "bold" }}>Cache:</span>
 							<span style={{ display: "flex", alignItems: "center", gap: "3px" }}>
 								<i
 									className="codicon codicon-database"