Add version state; update README and Announcement with new image feature

README.md

@@ -8,10 +8,11 @@
   <a href="https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev"><strong>Download VSCode Extension</strong></a>
 </p>
 
-Thanks to [Claude 3.5 Sonnet's agentic coding capabilities](https://www-cdn.anthropic.com/fed9cc193a14b84131812372d8d5857f8f304c52/Model_Card_Claude_3_Addendum.pdf) Claude Dev can handle complex software development tasks step-by-step. With tools that let him create & edit files, analyze project source code, and execute terminal commands (after you grant permission), he can assist you in ways that go beyond simple code completion or tech support. From building software projects to running system operations, Claude Dev is only limited by your imagination.
+Thanks to [Claude 3.5 Sonnet's agentic coding capabilities](https://www-cdn.anthropic.com/fed9cc193a14b84131812372d8d5857f8f304c52/Model_Card_Claude_3_Addendum.pdf) Claude Dev can handle complex software development tasks step-by-step. With tools that let him create & edit files, traverse complex projects, and execute terminal commands (after you grant permission), he can assist you in ways that go beyond simple code completion or tech support. From building software projects to running system operations, Claude Dev is only limited by your imagination.
 
 While autonomous AI scripts traditionally run in sandboxed environments, Claude Dev provides a human-in-the-loop GUI to supervise every file changed and command executed, providing a safe and accessible way to explore the potential of agentic AI.
 
+-   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 keep track with syntax highlighted previews in chat
 -   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 CLI command') before tool use or sending information to the API
@@ -23,7 +24,7 @@ _**Pro tip**: Use the `Cmd + Shift + P` shortcut to open the command palette and
 
 ## How it works
 
-Claude Dev uses an agentic loop style implementation 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 agentic 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 it might use certain tools (with your permission) to accomplish each step in its thought process.
 
 ### Tools
 
@@ -81,8 +82,13 @@ To build Claude Dev locally, follow these steps:
 ## Reviews
 
 -   ["Claude Sonnet 3.5 Artifacts in VSCode With This Extension"](https://www.youtube.com/watch?v=5FbZ8ALfSTs) by [CoderOne](https://www.youtube.com/@CoderOne)
+-   ["ClaudeDev: NEW Coding Agent Can Generate Applications within VS Code!"](https://www.youtube.com/watch?v=UNsQHosbIoE) by [WorldofAI](https://www.youtube.com/@intheworldofai)
 -   ["Claude Dev: This Coding Agent can Generate Applications Within VS Code!"](https://www.youtube.com/watch?v=ufq6sHGe0zs) by [AICodeKing](https://www.youtube.com/@AICodeKing)
+-   ["ClaudeDev + NextJS + Supabase: Generate FULL-STACK Apps with Claude 3.5 Sonnet"](https://www.youtube.com/watch?v=GeZBfO1kxA4) by [AICodeKing](https://www.youtube.com/@AICodeKing)
 -   ["Meet Claude Dev — An Open-Source AI Programmer In VS Code"](https://generativeai.pub/meet-claude-dev-an-open-source-autonomous-ai-programmer-in-vs-code-f457f9821b7b) and ["Build games with zero code using Claude Dev in VS Code"](https://www.youtube.com/watch?v=VT-JYVi81ew) by [Jim Clyde Monge](https://jimclydemonge.medium.com/)
+-   ["Claude Dev Builds NextJS App! Aider, Continue Dev & GitHub Copilot Open-Source Alternative"](https://www.youtube.com/watch?v=Rv0wJZRpnCQ) by [Josh Pocock](https://www.youtube.com/@joshfpocock)
+-   ["Claude Dev Is Mindblowing. The Best Coding Assistant tool?"](https://www.youtube.com/watch?v=Vp1Z3VGZroA) by [Yaron Been](https://www.youtube.com/@ecomxfactor-YaronBeen)
+-   ["ClaudeDev: The Ultimate Coding Agent for VS Code"](https://www.youtube.com/watch?v=aq0yw_DtphQ) by [Blas](https://www.youtube.com/@blascerecer)
 -   ["AI Development with Claude Dev"](https://www.linkedin.com/pulse/ai-development-claude-dev-shannon-lal-3ql3e/) by Shannon Lal
 -   ["Code Smarter with Claude Dev: An AI Programmer for Your Projects"](https://www.linkedin.com/pulse/code-smarter-claude-dev-ai-programmer-your-projects-iana-detochka-jiqpe) by Iana D.
 -   [Claude Dev also hit top 10 posts of all time on r/ClaudeAI (thank you for all the lovely comments)](https://www.reddit.com/r/ClaudeAI/comments/1e3h0f1/my_submission_to_anthropics_build_with_claude/)

package.json

@@ -2,7 +2,7 @@
   "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.",
-  "version": "1.0.99",
+  "version": "1.1.0",
   "icon": "icon.png",
   "engines": {
     "vscode": "^1.84.0"
@@ -105,8 +105,7 @@
     "install:all": "npm install && cd webview-ui && npm install",
     "start:webview": "cd webview-ui && npm run start",
     "build:webview": "cd webview-ui && npm run build",
-    "test:webview": "cd webview-ui && npm run test",
+    "test:webview": "cd webview-ui && npm run test"
-    "upver": "tsx scripts/update-version.ts"
   },
   "devDependencies": {
     "@types/diff": "^5.2.1",

scripts/update-version.ts

@@ -1,29 +0,0 @@
-import * as fs from "fs"
-import * as path from "path"
-
-const newVersion = process.argv[2]
-
-if (!newVersion) {
-	console.error("Please provide a version number")
-	process.exit(1)
-}
-
-// Update root package.json
-const rootPackagePath = path.join(__dirname, "..", "package.json")
-const rootPackage = JSON.parse(fs.readFileSync(rootPackagePath, "utf8"))
-rootPackage.version = newVersion
-fs.writeFileSync(rootPackagePath, JSON.stringify(rootPackage, null, 2))
-
-// Update Announcement.tsx
-const announcementPath = path.join(__dirname, "..", "webview-ui", "src", "components", "Announcement.tsx")
-let announcementContent = fs.readFileSync(announcementPath, "utf8")
-announcementContent = announcementContent.replace(/New in v[\d.]+<\/h3>/, `New in v${newVersion}</h3>`)
-fs.writeFileSync(announcementPath, announcementContent)
-
-// Update SettingsView.tsx
-const settingsViewPath = path.join(__dirname, "..", "webview-ui", "src", "components", "SettingsView.tsx")
-let settingsViewContent = fs.readFileSync(settingsViewPath, "utf8")
-settingsViewContent = settingsViewContent.replace(/>v[\d.]+<\/p>/, `>v${newVersion}</p>`)
-fs.writeFileSync(settingsViewPath, settingsViewContent)
-
-console.log(`Version updated to ${newVersion}`)

src/providers/ClaudeDevProvider.ts

@@ -22,7 +22,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 	private disposables: vscode.Disposable[] = []
 	private view?: vscode.WebviewView | vscode.WebviewPanel
 	private claudeDev?: ClaudeDev
-	private latestAnnouncementId = "jul-29-2024" // update to some unique identifier when we add a new announcement
+	private latestAnnouncementId = "aug-10-2024" // update to some unique identifier when we add a new announcement
 
 	constructor(
 		private readonly context: vscode.ExtensionContext,
@@ -324,6 +324,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 		this.postMessageToWebview({
 			type: "state",
 			state: {
+				version: this.context.extension?.packageJSON?.version ?? "",
 				apiConfiguration: { apiProvider, apiKey, openRouterApiKey, awsAccessKey, awsSecretKey, awsRegion },
 				maxRequestsPerTask,
 				themeName: vscode.workspace.getConfiguration("workbench").get<string>("colorTheme"),

src/shared/ExtensionMessage.ts

@@ -12,6 +12,7 @@ export interface ExtensionMessage {
 }
 
 export interface ExtensionState {
+	version: string
 	apiConfiguration?: ApiConfiguration
 	maxRequestsPerTask?: number
 	themeName?: string

webview-ui/src/App.tsx

@@ -20,6 +20,7 @@ const App: React.FC = () => {
 	const [didHydrateState, setDidHydrateState] = useState(false)
 	const [showSettings, setShowSettings] = useState(false)
 	const [showWelcome, setShowWelcome] = useState<boolean>(false)
+	const [version, setVersion] = useState<string>("")
 	const [apiConfiguration, setApiConfiguration] = useState<ApiConfiguration | undefined>(undefined)
 	const [maxRequestsPerTask, setMaxRequestsPerTask] = useState<string>("")
 	const [vscodeThemeName, setVscodeThemeName] = useState<string | undefined>(undefined)
@@ -34,6 +35,7 @@ const App: React.FC = () => {
 		const message: ExtensionMessage = e.data
 		switch (message.type) {
 			case "state":
+				setVersion(message.state!.version)
 				const hasKey =
 					message.state!.apiConfiguration?.apiKey !== undefined ||
 					message.state!.apiConfiguration?.openRouterApiKey !== undefined ||
@@ -80,6 +82,7 @@ const App: React.FC = () => {
 				<>
 					{showSettings && (
 						<SettingsView
+							version={version}
 							apiConfiguration={apiConfiguration}
 							setApiConfiguration={setApiConfiguration}
 							maxRequestsPerTask={maxRequestsPerTask}
@@ -89,6 +92,7 @@ const App: React.FC = () => {
 					)}
 					{/* Do not conditionally load ChatView, it's expensive and there's state we don't want to lose (user input, disableInput, askResponse promise, etc.) */}
 					<ChatView
+						version={version}
 						messages={claudeMessages}
 						isHidden={showSettings}
 						vscodeThemeName={vscodeThemeName}

webview-ui/src/components/Announcement.tsx

@@ -1,12 +1,13 @@
 import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 
 interface AnnouncementProps {
+	version: string
 	hideAnnouncement: () => void
 }
 /*
 You must update the latestAnnouncementId in ClaudeDevProvider for new announcements to show to users. This new id will be compared with whats in state for the 'last announcement shown', and if it's different then the announcement will render. As soon as an announcement is shown, the id will be updated in state. This ensures that announcements are not shown more than once, even if the user doesn't close it themselves.
 */
-const Announcement = ({ hideAnnouncement }: AnnouncementProps) => {
+const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
 	return (
 		<div
 			style={{
@@ -22,35 +23,17 @@ const Announcement = ({ hideAnnouncement }: AnnouncementProps) => {
 				style={{ position: "absolute", top: "8px", right: "8px" }}>
 				<span className="codicon codicon-close"></span>
 			</VSCodeButton>
-			<h3 style={{ margin: "0 0 8px" }}>🎉{"  "}New in v1.0.99</h3>
+			<h3 style={{ margin: "0 0 8px" }}>
+				🎉{"  "}New in v{version}
+			</h3>
 			<ul style={{ margin: "0 0 8px", paddingLeft: "20px" }}>
 				<li>
-					Open in the editor (using{" "}
+					Paste images in chat to use Claude's vision capabilities and turn mockups into fully functional
-					<span
+					applications or fix bugs with screenshots
-						className="codicon codicon-link-external"
-						style={{ display: "inline", fontSize: "12.5px", verticalAlign: "text-bottom" }}></span>{" "}
-					or <code>Claude Dev: Open In New Tab</code> in command palette) to see how Claude updates your
-					workspace more clearly
 				</li>
 				<li>
-					New <code style={{ wordBreak: "break-all" }}>list_files_recursive</code> and{" "}
+					Improved support for running interactive terminal commands and long-running processes like servers
-					<code style={{ wordBreak: "break-all" }}>view_source_code_definitions_top_level</code> tools to help
-					Claude get a comprehensive overview of your project's file structure and source code definitions
-					<VSCodeLink
-						href="https://github.com/saoudrizwan/claude-dev?tab=readme-ov-file#working-in-existing-projects"
-						style={{ display: "inline" }}>
-						(more on this here)
-					</VSCodeLink>
 				</li>
-				<li>
-					Interact with CLI commands by sending messages to stdin and terminating long-running processes like
-					servers
-				</li>
-				<li>Provide feedback to tool use like editing files or running commands</li>
-				<li>Shows diff view of new or edited files right in the editor</li>
-				<li>Added ability to retry failed API requests (helpful for rate limits)</li>
-				<li>Export task to a markdown file (useful as context for future tasks)</li>
-				<li>Added OpenRouter and AWS Bedrock support</li>
 			</ul>
 			<p style={{ margin: "0" }}>
 				Follow me for more updates!{" "}

webview-ui/src/components/ChatView.tsx

@@ -16,6 +16,7 @@ import Announcement from "./Announcement"
 import Thumbnails from "./Thumbnails"
 
 interface ChatViewProps {
+	version: string
 	messages: ClaudeMessage[]
 	isHidden: boolean
 	vscodeThemeName?: string
@@ -25,7 +26,14 @@ interface ChatViewProps {
 
 const MAX_IMAGES_PER_MESSAGE = 20 // Anthropic limits to 20 images
 
-const ChatView = ({ messages, isHidden, vscodeThemeName, showAnnouncement, hideAnnouncement }: ChatViewProps) => {
+const ChatView = ({
+	version,
+	messages,
+	isHidden,
+	vscodeThemeName,
+	showAnnouncement,
+	hideAnnouncement,
+}: ChatViewProps) => {
 	//const task = messages.length > 0 ? (messages[0].say === "task" ? messages[0] : undefined) : undefined
 	const task = messages.length > 0 ? messages[0] : undefined // leaving this less safe version here since if the first message is not a task, then the extension is in a bad state and needs to be debugged (see ClaudeDev.abort)
 	const modifiedMessages = useMemo(() => combineApiRequests(combineCommandSequences(messages.slice(1))), [messages])
@@ -427,7 +435,7 @@ const ChatView = ({ messages, isHidden, vscodeThemeName, showAnnouncement, hideA
 				/>
 			) : (
 				<>
-					{showAnnouncement && <Announcement hideAnnouncement={hideAnnouncement} />}
+					{showAnnouncement && <Announcement version={version} hideAnnouncement={hideAnnouncement} />}
 					<div style={{ padding: "0 20px" }}>
 						<h2>What can I do for you?</h2>
 						<p>

webview-ui/src/components/SettingsView.tsx

@@ -6,6 +6,7 @@ import { vscode } from "../utils/vscode"
 import ApiOptions from "./ApiOptions"
 
 type SettingsViewProps = {
+	version: string
 	apiConfiguration?: ApiConfiguration
 	setApiConfiguration: React.Dispatch<React.SetStateAction<ApiConfiguration | undefined>>
 	maxRequestsPerTask: string
@@ -14,6 +15,7 @@ type SettingsViewProps = {
 }
 
 const SettingsView = ({
+	version,
 	apiConfiguration,
 	setApiConfiguration,
 	maxRequestsPerTask,
@@ -129,7 +131,7 @@ const SettingsView = ({
 						https://github.com/saoudrizwan/claude-dev
 					</VSCodeLink>
 				</p>
-				<p style={{ fontStyle: "italic" }}>v1.0.99</p>
+				<p style={{ fontStyle: "italic" }}>v{version}</p>
 			</div>
 		</div>
 	)