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

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{" "}
-					<span
-						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
+					Paste images in chat to use Claude's vision capabilities and turn mockups into fully functional
+					applications or fix bugs with screenshots
 				</li>
 				<li>
-					New <code style={{ wordBreak: "break-all" }}>list_files_recursive</code> and{" "}
-					<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>
+					Improved support for running interactive terminal commands and long-running processes like servers
 				</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>
 	)