Prepare for release

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## [2.1.0]
+
+- Cline now uses Anthropic's new "Computer Use" feature to launch a browser, click, type, and scroll. This gives him more autonomy in runtime debugging, end-to-end testing, and even general web use. Try asking "look up the weather in San Diego" to see it in action! (Available with Claude 3.5 Sonnet v2)
+
 ## [2.0.19]
 
 - Fix model info for Claude 3.5 Sonnet v1 on OpenRouter

README.md

@@ -25,14 +25,14 @@
 
 Meet Cline, an AI assistant that can use your **CLI** a**N**d **E**ditor.
 
-Thanks to [Claude 3.5 Sonnet's agentic coding capabilities](https://www-cdn.anthropic.com/fed9cc193a14b84131812372d8d5857f8f304c52/Model_Card_Claude_3_Addendum.pdf), Cline can handle complex software development tasks step-by-step. With tools that let him create & edit files, explore large projects, and execute terminal commands (after you grant permission), he can assist you in ways that go beyond code completion or tech support. While autonomous AI scripts traditionally run in sandboxed environments, this extension provides a human-in-the-loop GUI to approve every file change and terminal command, providing a safe and accessible way to explore the potential of agentic AI.
+Thanks to [Claude 3.5 Sonnet's agentic coding capabilities](https://www-cdn.anthropic.com/fed9cc193a14b84131812372d8d5857f8f304c52/Model_Card_Claude_3_Addendum.pdf), Cline can handle complex software development tasks step-by-step. With tools that let him create & edit files, explore large projects, use the browser, and execute terminal commands (after you grant permission), he can assist you in ways that go beyond code completion or tech support. While autonomous AI scripts traditionally run in sandboxed environments, this extension provides a human-in-the-loop GUI to approve every file change and terminal command, providing a safe and accessible way to explore the potential of agentic AI.
 
 1. Enter your task and add images to convert mockups into functional apps or fix bugs with screenshots.
 2. Cline starts by analyzing your file structure & source code ASTs, running regex searches, and reading relevant files to get up to speed in existing projects. By carefully managing what information is added to context, Cline can provide valuable assistance even for large, complex projects without overwhelming the context window.
 3. Once Cline has the information he needs, he can:
     - Create and edit files + monitor linter/compiler errors along the way, letting him proactively fix issues like missing imports and syntax errors on his own.
     - Execute commands directly in your terminal and monitor their output as he works, letting him e.g., react to dev server issues after editing a file.
-    - For web development tasks, Cline can launch the site in a headless browser to capture screenshots and console logs, allowing him to fix runtime errors and visual bugs.
+    - For web development tasks, Cline can launch the site in a headless browser, click, type, scroll, and capture screenshots + console logs, allowing him to fix runtime errors and visual bugs.
 4. When a task is completed, Cline will 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.
 
 > [!TIP]
@@ -82,7 +82,7 @@ All changes made by Cline are recorded in your file's Timeline, providing an eas
 
 Models like Claude 3.5 Sonnet can now understand and analyze images, allowing for exciting possibilities of multimodal workflows. Paste images directly in chat to give Cline context that can't be explained in words, and turn mockups into apps, fix bugs with screenshots, and more.
 
-Cline can also use a headless browser to inspect any website, e.g., localhost, allowing him to capture screenshots and console logs. This gives him autonomy to fixing visual bugs and runtime issues without you needing to handhold and copy-pasting error logs yourself.
+Cline can also use a headless browser to launch and interact with any website, e.g., localhost, allowing him to capture screenshots and console logs. This gives him autonomy to fixing visual bugs and runtime issues without you needing to handhold and copy-pasting error logs yourself.
 
 <!-- Transparent pixel to create line break after floating image -->
 

package.json

@@ -1,8 +1,8 @@
 {
   "name": "claude-dev",
   "displayName": "Cline (prev. Claude Dev)",
-  "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.",
+  "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": "2.0.19",
+  "version": "2.1.0",
   "icon": "assets/icons/icon.png",
   "galleryBanner": {
     "color": "#617A91",

src/core/webview/ClineProvider.ts

@@ -69,7 +69,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 	private view?: vscode.WebviewView | vscode.WebviewPanel
 	private cline?: Cline
 	private workspaceTracker?: WorkspaceTracker
-	private latestAnnouncementId = "oct-9-2024" // update to some unique identifier when we add a new announcement
+	private latestAnnouncementId = "oct-28-2024" // update to some unique identifier when we add a new announcement
 
 	constructor(readonly context: vscode.ExtensionContext, private readonly outputChannel: vscode.OutputChannel) {
 		this.outputChannel.appendLine("ClineProvider instantiated")

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

@@ -33,24 +33,18 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
 				🎉{"  "}New in v{minorVersion}
 			</h3>
 			<p style={{ margin: "5px 0px" }}>
-				New name! Meet Cline, an AI assistant that can use your <strong>CLI</strong> a<strong>N</strong>d{" "}
+				Cline now uses Anthropic's new{" "}
-				<strong>E</strong>ditor.
+				<VSCodeLink
+					href="https://www.anthropic.com/news/3-5-models-and-computer-use"
+					style={{ display: "inline" }}>
+					"Computer Use"
+				</VSCodeLink>{" "}
+				feature to launch a browser, click, type, and scroll. This gives him more autonomy in runtime debugging,
+				end-to-end testing, and even general web use!{" "}
+				<VSCodeLink href="https://x.com/sdrzn/status/1843989769828602273" style={{ display: "inline" }}>
+					See a demo here.
+				</VSCodeLink>
 			</p>
-			<ul style={{ margin: "0 0 8px", paddingLeft: "12px" }}>
-				<li>
-					Responses are now streamed + a yellow text decoration animation to keep track of Cline's progress as
-					he edits files.
-				</li>
-				<li>
-					Cancel button to give Cline feedback if he goes off in the wrong direction, giving you more control
-					over tasks.
-				</li>
-				<li>
-					Re-imagined tool calling prompt resulting in ~40% fewer requests to accomplish tasks + better
-					performance with other models.
-				</li>
-				<li>Search and use any model with OpenRouter (search "free" for no-cost options).</li>
-			</ul>
 			{/*<ul style={{ margin: "0 0 8px", paddingLeft: "12px" }}>
 				 <li>
 					OpenRouter now supports prompt caching! They also have much higher rate limits than other providers,
@@ -99,14 +93,11 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
 				</li>
 			</ul>*/}
 			<p style={{ margin: "0" }}>
-				<VSCodeLink href="https://x.com/sdrzn/status/1843989769828602273" style={{ display: "inline" }}>
+				Join
-					See a demo of the changes here.
-				</VSCodeLink>
-				I'm excited for you to try this update, and would love to hear how you like it in our Discord. Come say
-				hi!{" "}
 				<VSCodeLink style={{ display: "inline" }} href="https://discord.gg/cline">
-					https://discord.gg/cline
+					discord.gg/cline
 				</VSCodeLink>
+				for more updates!
 			</p>
 		</div>
 	)

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

@@ -716,8 +716,9 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 								Claude 3.5 Sonnet's agentic coding capabilities,
 							</VSCodeLink>{" "}
 							I can handle complex software development tasks step-by-step. With tools that let me create
-							& edit files, explore complex projects, and execute terminal commands (after you grant
+							& edit files, explore complex projects, use the browser, and execute terminal commands
-							permission), I can assist you in ways that go beyond code completion or tech support.
+							(after you grant permission), I can assist you in ways that go beyond code completion or
+							tech support.
 						</p>
 					</div>
 					{taskHistory.length > 0 && <HistoryPreview showHistoryView={showHistoryView} />}

webview-ui/src/components/welcome/WelcomeView.tsx

@@ -30,8 +30,8 @@ const WelcomeView = () => {
 					style={{ display: "inline" }}>
 					Claude 3.5 Sonnet's agentic coding capabilities
 				</VSCodeLink>{" "}
-				and access to tools that let me create & edit files, explore complex projects, and execute terminal
+				and access to tools that let me create & edit files, explore complex projects, use the browser, and
-				commands (with your permission, of course).
+				execute terminal commands (with your permission, of course).
 			</p>
 
 			<b>To get started, this extension needs an API provider for Claude 3.5 Sonnet.</b>