Prepare for release

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to the "claude-dev" extension will be documented in this fil
 
 <!-- Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file. -->
 
+## [1.9.0]
+
+- Claude can now use a browser! This update adds a new `inspect_site` tool that captures screenshots and console logs from websites (including localhost), making it easier for Claude to troubleshoot issues on his own.
+- Improved automatic linter/compiler debugging by only sending Claude new errors that result from his edits, rather than reporting all workspace problems.
+
 ## [1.8.0]
 
 - You can now use '@' in the textarea to add context!

package.json

@@ -2,7 +2,7 @@
   "name": "claude-dev",
   "displayName": "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.",
-  "version": "1.8.1",
+  "version": "1.9.0",
   "icon": "icons/icon.png",
   "galleryBanner": {
     "color": "#1E1E1E",

src/providers/ClaudeDevProvider.ts

@@ -54,7 +54,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 	private view?: vscode.WebviewView | vscode.WebviewPanel
 	private claudeDev?: ClaudeDev
 	private workspaceTracker?: WorkspaceTracker
-	private latestAnnouncementId = "sep-19-2024" // update to some unique identifier when we add a new announcement
+	private latestAnnouncementId = "sep-21-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("ClaudeDevProvider instantiated")

src/utils/UrlContentFetcher.ts

@@ -1,7 +1,7 @@
 import * as vscode from "vscode"
 import * as fs from "fs/promises"
 import * as path from "path"
-import { Browser, Page, TimeoutError, launch } from "puppeteer-core"
+import { Browser, Page, launch } from "puppeteer-core"
 import * as cheerio from "cheerio"
 import TurndownService from "turndown"
 // @ts-ignore
@@ -113,18 +113,18 @@ export class UrlContentFetcher {
 		})
 
 		try {
-			// networkidle0 is when there are no more than 0 network connections - this is better for local dev servers that often have fewer concurrent connections than production sites
-			await this.page.goto(url, { timeout: 10_000, waitUntil: ["domcontentloaded", "networkidle0"] })
+			// networkidle2 is a good point to take a screenshot without having to wait for the timeout to hit if the site never reaches networkidle0
+			await this.page.goto(url, { timeout: 10_000, waitUntil: ["domcontentloaded", "networkidle2"] })
 		} catch (err) {
-			// don't want to log in case of timeout error, that likely means the site just never reached networkidle0 but claude can still inspect the page and logs
-			if (!(err instanceof TimeoutError)) {
-				logs.push(`[Navigation Error] ${err.toString()}`)
-			}
+			// if (!(err instanceof TimeoutError)) {
+			// 	logs.push(`[Navigation Error] ${err.toString()}`)
+			// }
+			logs.push(`[Navigation Error] ${err.toString()}`)
 		}
 
 		// Wait for console inactivity, with a timeout
 		await pWaitFor(() => Date.now() - lastLogTs >= 500, {
-			timeout: 5_000,
+			timeout: 3_000,
 			interval: 100,
 		}).catch(() => {})
 

webview-ui/src/components/Announcement.tsx

@@ -31,22 +31,38 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
 			<h3 style={{ margin: "0 0 8px" }}>
 				🎉{"  "}New in v{version}
 			</h3>
-			<p style={{ margin: "5px 0px" }}>You can now use '@' in the textarea to add context!</p>
+			<p style={{ margin: "5px 0px" }}></p>
 			<ul style={{ margin: "0 0 8px", paddingLeft: "12px" }}>
 				<li>
-					<strong>@url:</strong> Paste in a URL for the extension to fetch and convert to markdown, useful
-					when you want to give Claude the latest docs!
+					Claude can now use a browser! This update adds a new <code>inspect_site</code> tool that captures
+					screenshots and console logs from websites (including localhost), making it easier for Claude to
+					troubleshoot issues on his own.
+					<VSCodeLink style={{ display: "inline" }} href="https://x.com/sdrzn/status/1835100787275419829">
+						See a demo here.
+					</VSCodeLink>
 				</li>
 				<li>
-					<strong>@problems:</strong> Add workspace errors and warnings for Claude to fix, no more
-					back-and-forth about debugging
+					Improved automatic linter/compiler debugging by only sending Claude new errors that result from his
+					edits, rather than reporting all workspace problems.
 				</li>
 				<li>
-					<strong>@file:</strong> Adds a file's contents so you don't have to waste API requests approving
-					read file (+ type to search files)
-				</li>
-				<li>
-					<strong>@folder:</strong> Adds folder's files all at once to speed up your workflow even more
+					You can now use '@' in the textarea to add context:
+					<ul style={{ margin: "0 0 8px", paddingLeft: "20px" }}>
+						<li>
+							<strong>@url:</strong> Paste in a URL for the extension to fetch and convert to markdown
+							(i.e. give Claude the latest docs)
+						</li>
+						<li>
+							<strong>@problems:</strong> Add workspace errors and warnings for Claude to fix
+						</li>
+						<li>
+							<strong>@file:</strong> Adds a file's contents so you don't have to waste API requests
+							approving read file (+ type to search files)
+						</li>
+						<li>
+							<strong>@folder:</strong> Adds folder's files all at once
+						</li>
+					</ul>
 				</li>
 			</ul>
 			{/* <p style={{ margin: "5px 0px" }}>