Add Kodu announcement

src/providers/ClaudeDevProvider.ts

@@ -320,7 +320,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 						await this.clearTask()
 						await this.postStateToWebview()
 						break
-					case "didShowAnnouncement":
+					case "didCloseAnnouncement":
 						await this.updateGlobalState("lastShownAnnouncementId", this.latestAnnouncementId)
 						await this.postStateToWebview()
 						break
@@ -377,6 +377,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider {
 		await this.updateGlobalState("koduEmail", email)
 		await this.updateGlobalState("apiProvider", "kodu")
 		await this.postStateToWebview()
+		await this.postMessageToWebview({ type: "action", action: "koduAuthenticated" })
 		this.claudeDev?.updateApi({ apiProvider: "kodu", koduApiKey: apiKey })
 	}
 

src/shared/ExtensionMessage.ts

@@ -12,6 +12,7 @@ export interface ExtensionMessage {
 		| "settingsButtonTapped"
 		| "historyButtonTapped"
 		| "didBecomeVisible"
+		| "koduAuthenticated"
 		| "koduCreditsFetched"
 	state?: ExtensionState
 	images?: string[]

src/shared/WebviewMessage.ts

@@ -9,7 +9,7 @@ export interface WebviewMessage {
 		| "newTask"
 		| "askResponse"
 		| "clearTask"
-		| "didShowAnnouncement"
+		| "didCloseAnnouncement"
 		| "selectImages"
 		| "exportCurrentTask"
 		| "showTaskWithId"

webview-ui/src/App.tsx

@@ -59,7 +59,6 @@ const App: React.FC = () => {
 				// don't update showAnnouncement to false if shouldShowAnnouncement is false
 				if (message.state!.shouldShowAnnouncement) {
 					setShowAnnouncement(true)
-					vscode.postMessage({ type: "didShowAnnouncement" })
 				}
 				setDidHydrateState(true)
 				break
@@ -77,6 +76,10 @@ const App: React.FC = () => {
 						setShowSettings(false)
 						setShowHistory(false)
 						break
+					case "koduAuthenticated":
+						setShowSettings(true)
+						setShowHistory(false)
+						break
 				}
 				break
 		}
@@ -127,7 +130,11 @@ const App: React.FC = () => {
 						showAnnouncement={showAnnouncement}
 						selectedModelSupportsImages={selectedModelInfo.supportsImages}
 						selectedModelSupportsPromptCache={selectedModelInfo.supportsPromptCache}
-						hideAnnouncement={() => setShowAnnouncement(false)}
+						hideAnnouncement={() => {
+							vscode.postMessage({ type: "didCloseAnnouncement" })
+							setShowAnnouncement(false)
+						}}
+						apiConfiguration={apiConfiguration}
 					/>
 				</>
 			)}

webview-ui/src/components/Announcement.tsx

@@ -1,13 +1,16 @@
 import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
+import { vscode } from "../utils/vscode"
+import { ApiConfiguration } from "../../../src/shared/api"
 
 interface AnnouncementProps {
 	version: string
 	hideAnnouncement: () => void
+	apiConfiguration?: ApiConfiguration
 }
 /*
 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 = ({ version, hideAnnouncement }: AnnouncementProps) => {
+const Announcement = ({ version, hideAnnouncement, apiConfiguration }: AnnouncementProps) => {
 	return (
 		<div
 			style={{
@@ -26,24 +29,34 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
 			<h3 style={{ margin: "0 0 8px" }}>
 				🎉{"  "}New in v{version}
 			</h3>
+
 			<ul style={{ margin: "0 0 8px", paddingLeft: "20px" }}>
-				<li>Task history is here! New tasks will automatically save so you can always resume them later</li>
 				<li>
-					Adds support for{" "}
+					Excited to announce that{" "}
-					<VSCodeLink href="https://www.anthropic.com/news/prompt-caching" style={{ display: "inline" }}>
+					<VSCodeLink href="https://kodu.ai" style={{ display: "inline" }}>
-						Prompt Caching
+						Kodu
 					</VSCodeLink>{" "}
-					to make requests up to 90% cheaper and 85% faster (currently only available through Anthropic API
+					is offering $10 free credits to help new users get the most out of Claude Dev with high rate limits
-					for Claude 3.5 Sonnet and Claude 3.0 Haiku)
+					and prompt caching! Stay tuned for some exciting updates like easier billing and deploying live
+					websites.
+					{apiConfiguration?.koduApiKey === undefined && (
+						<VSCodeButton
+							appearance="secondary"
+							onClick={() => vscode.postMessage({ type: "didClickKoduSignIn" })}
+							style={{
+								transform: "scale(0.8)",
+								transformOrigin: "left center",
+								margin: "4px 0 2px 0",
+							}}>
+							Claim $10 Free Credits
+						</VSCodeButton>
+					)}
 				</li>
 				<li>
-					Paste images in chat and turn mockups into fully functional applications or fix bugs with
+					Added "Always allow read-only operations" setting to let Claude read files and view directories
-					screenshots
+					without needing to hit Allow.
-				</li>
-				<li>
-					You can now add custom instructions to the end of the system prompt (e.g. "Always use Python",
-					"Speak in Spanish")
 				</li>
+				<li>Added sliding window context management to keep tasks going past 200k tokens.</li>
 			</ul>
 			<p style={{ margin: "0" }}>
 				Follow me for more updates!{" "}

webview-ui/src/components/ApiOptions.tsx

@@ -165,9 +165,9 @@ const ApiOptions: React.FC<ApiOptionsProps> = ({
 			)}
 
 			{selectedProvider === "kodu" && (
-				<>
-					{apiConfiguration?.koduApiKey !== undefined ? (
 				<div>
+					{apiConfiguration?.koduApiKey !== undefined ? (
+						<>
 							<div style={{ marginBottom: 5, marginTop: 3 }}>
 								<span style={{ color: "var(--vscode-descriptionForeground)" }}>
 									Signed in as {apiConfiguration?.koduEmail || "Unknown"}
@@ -192,21 +192,8 @@ const ApiOptions: React.FC<ApiOptionsProps> = ({
 								}}>
 								Add Credits
 							</VSCodeButton>
-							<p
+						</>
-								style={{
-									fontSize: "12px",
-									marginTop: "7px",
-									color: "var(--vscode-descriptionForeground)",
-								}}>
-								Kodu is recommended for its high rate limits and access to the latest features like
-								prompt caching.
-								<VSCodeLink href="https://kodu.ai/" style={{ display: "inline", fontSize: "12px" }}>
-									Learn more about Kodu here.
-								</VSCodeLink>
-							</p>
-						</div>
 					) : (
-						<div>
 						<div style={{ margin: "4px 0px" }}>
 							<VSCodeButton
 								appearance="primary"
@@ -214,19 +201,21 @@ const ApiOptions: React.FC<ApiOptionsProps> = ({
 								Sign in to Kodu
 							</VSCodeButton>
 						</div>
+					)}
 					<p
 						style={{
 							fontSize: 12,
-									marginTop: 5,
+							marginTop: 6,
 							color: "var(--vscode-descriptionForeground)",
 						}}>
-								This will open your browser to sign in to Kodu. You will be redirected back to the
+						Kodu is recommended for its high rate limits and access to the latest features like prompt
-								extension after signing in.
+						caching.
+						<VSCodeLink href="https://kodu.ai/" style={{ display: "inline", fontSize: "12px" }}>
+							Learn more about Kodu here.
+						</VSCodeLink>
 					</p>
 				</div>
 			)}
-				</>
-			)}
 
 			{selectedProvider === "bedrock" && (
 				<div style={{ display: "flex", flexDirection: "column", gap: 5 }}>

webview-ui/src/components/ChatView.tsx

@@ -16,6 +16,7 @@ import HistoryPreview from "./HistoryPreview"
 import TaskHeader from "./TaskHeader"
 import Thumbnails from "./Thumbnails"
 import { HistoryItem } from "../../../src/shared/HistoryItem"
+import { ApiConfiguration } from "../../../src/shared/api"
 
 interface ChatViewProps {
 	version: string
@@ -28,6 +29,7 @@ interface ChatViewProps {
 	selectedModelSupportsPromptCache: boolean
 	hideAnnouncement: () => void
 	showHistoryView: () => void
+	apiConfiguration?: ApiConfiguration
 }
 
 const MAX_IMAGES_PER_MESSAGE = 20 // Anthropic limits to 20 images
@@ -43,6 +45,7 @@ const ChatView = ({
 	selectedModelSupportsPromptCache,
 	hideAnnouncement,
 	showHistoryView,
+	apiConfiguration,
 }: ChatViewProps) => {
 	//const task = messages.length > 0 ? (messages[0].say === "task" ? messages[0] : undefined) : 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)
@@ -486,7 +489,13 @@ const ChatView = ({
 				/>
 			) : (
 				<>
-					{showAnnouncement && <Announcement version={version} hideAnnouncement={hideAnnouncement} />}
+					{showAnnouncement && (
+						<Announcement
+							version={version}
+							hideAnnouncement={hideAnnouncement}
+							apiConfiguration={apiConfiguration}
+						/>
+					)}
 					<div style={{ padding: "0 20px", flexGrow: taskHistory.length > 0 ? undefined : 1 }}>
 						<h2>What can I do for you?</h2>
 						<p>

webview-ui/src/components/WelcomeView.tsx

@@ -31,23 +31,51 @@ const WelcomeView: React.FC<WelcomeViewProps> = ({ apiConfiguration, setApiConfi
 				<VSCodeLink
 					href="https://www-cdn.anthropic.com/fed9cc193a14b84131812372d8d5857f8f304c52/Model_Card_Claude_3_Addendum.pdf"
 					style={{ display: "inline" }}>
-					Claude 3.5 Sonnet's agentic coding capabilities.
+					Claude 3.5 Sonnet's agentic coding capabilities
 				</VSCodeLink>{" "}
-				I am prompted to think through tasks step-by-step and have access to tools that let me create & edit
+				and access to tools that let me create & edit files, explore complex projects, and execute terminal
-				files, explore complex projects, and execute terminal commands (with your permission, of course).
+				commands (with your permission, of course).
 			</p>
 
-			<b>To get started, this extension needs an API key for Claude 3.5 Sonnet:</b>
+			<b>To get started, this extension needs an API provider for Claude 3.5 Sonnet.</b>
 
-			<div style={{ marginTop: "15px" }}>
+			<div
+				style={{
+					display: "flex",
+					alignItems: "center",
+					backgroundColor: "var(--vscode-editor-inactiveSelectionBackground)",
+					color: "var(--vscode-editor-foreground)",
+					padding: "6px 8px",
+					borderRadius: "3px",
+					margin: "8px 0px",
+					fontSize: "12px",
+				}}>
+				<i
+					className="codicon codicon-info"
+					style={{
+						marginRight: "6px",
+						fontSize: "16px",
+						color: "var(--vscode-infoIcon-foreground)",
+					}}></i>
+				<span>
+					Explore Claude's capabilities with $10 free credits from{" "}
+					<VSCodeLink href="https://kodu.ai" style={{ display: "inline" }}>
+						Kodu
+					</VSCodeLink>
+				</span>
+			</div>
+
+			<div style={{ marginTop: "10px" }}>
 				<ApiOptions
 					apiConfiguration={apiConfiguration}
 					setApiConfiguration={setApiConfiguration}
 					showModelOptions={false}
 				/>
+				{apiConfiguration?.apiProvider !== "kodu" && (
 					<VSCodeButton onClick={handleSubmit} disabled={disableLetsGoButton} style={{ marginTop: "3px" }}>
 						Let's go!
 					</VSCodeButton>
+				)}
 			</div>
 		</div>
 	)