Use 'user credits' header to update balance and show user under task header

webview-ui/src/App.tsx

@@ -169,6 +169,7 @@ const App: React.FC = () => {
 						apiConfiguration={apiConfiguration}
 						vscodeUriScheme={vscodeUriScheme}
 						shouldShowKoduPromo={shouldShowKoduPromo}
+						koduCredits={koduCredits}
 					/>
 				</>
 			)}

webview-ui/src/components/ApiOptions.tsx

@@ -36,7 +36,7 @@ const ApiOptions: React.FC<ApiOptionsProps> = ({
 	apiErrorMessage,
 	vscodeUriScheme,
 }) => {
-	const [didFetchKoduCredits, setDidFetchKoduCredits] = useState(false)
+	const [, setDidFetchKoduCredits] = useState(false)
 	const handleInputChange = (field: keyof ApiConfiguration) => (event: any) => {
 		setApiConfiguration((prev) => ({ ...prev, [field]: event.target.value }))
 	}
@@ -78,11 +78,11 @@ const ApiOptions: React.FC<ApiOptionsProps> = ({
 	}
 
 	useEffect(() => {
-		if (selectedProvider === "kodu" && apiConfiguration?.koduApiKey) {
+		if (selectedProvider === "kodu" && apiConfiguration?.koduApiKey && koduCredits === undefined) {
 			setDidFetchKoduCredits(false)
 			vscode.postMessage({ type: "fetchKoduCredits" })
 		}
-	}, [selectedProvider, apiConfiguration?.koduApiKey])
+	}, [selectedProvider, apiConfiguration?.koduApiKey, koduCredits])
 
 	const handleMessage = useCallback((e: MessageEvent) => {
 		const message: ExtensionMessage = e.data
@@ -178,7 +178,7 @@ const ApiOptions: React.FC<ApiOptionsProps> = ({
 							</div>
 							<div style={{ marginBottom: 7 }}>
 								Credits remaining:{" "}
-								<span style={{ fontWeight: 500, opacity: didFetchKoduCredits ? 1 : 0.6 }}>
+								<span style={{ fontWeight: 500, opacity: koduCredits !== undefined ? 1 : 0.6 }}>
 									{formatPrice(koduCredits || 0)}
 								</span>
 							</div>
@@ -307,7 +307,7 @@ const ApiOptions: React.FC<ApiOptionsProps> = ({
 	)
 }
 
-const formatPrice = (price: number) => {
+export const formatPrice = (price: number) => {
 	return new Intl.NumberFormat("en-US", {
 		style: "currency",
 		currency: "USD",

webview-ui/src/components/ChatView.tsx

@@ -33,6 +33,7 @@ interface ChatViewProps {
 	apiConfiguration?: ApiConfiguration
 	vscodeUriScheme?: string
 	shouldShowKoduPromo: boolean
+	koduCredits?: number
 }
 
 const MAX_IMAGES_PER_MESSAGE = 20 // Anthropic limits to 20 images
@@ -51,6 +52,7 @@ const ChatView = ({
 	apiConfiguration,
 	vscodeUriScheme,
 	shouldShowKoduPromo,
+	koduCredits,
 }: 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)
@@ -487,6 +489,9 @@ const ChatView = ({
 					totalCost={apiMetrics.totalCost}
 					onClose={handleTaskCloseButtonClick}
 					isHidden={isHidden}
+					koduCredits={koduCredits}
+					vscodeUriScheme={vscodeUriScheme}
+					apiProvider={apiConfiguration?.apiProvider}
 				/>
 			) : (
 				<>

webview-ui/src/components/TaskHeader.tsx

@@ -1,9 +1,12 @@
-import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 import React, { useEffect, useRef, useState } from "react"
 import { useWindowSize } from "react-use"
 import { ClaudeMessage } from "../../../src/shared/ExtensionMessage"
 import { vscode } from "../utils/vscode"
 import Thumbnails from "./Thumbnails"
+import { formatPrice } from "./ApiOptions"
+import { getKoduAddCreditsUrl } from "../../../src/shared/kodu"
+import { ApiProvider } from "../../../src/shared/api"
 
 interface TaskHeaderProps {
 	task: ClaudeMessage
@@ -15,6 +18,9 @@ interface TaskHeaderProps {
 	totalCost: number
 	onClose: () => void
 	isHidden: boolean
+	koduCredits?: number
+	vscodeUriScheme?: string
+	apiProvider?: ApiProvider
 }
 
 const TaskHeader: React.FC<TaskHeaderProps> = ({
@@ -27,6 +33,9 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 	totalCost,
 	onClose,
 	isHidden,
+	koduCredits,
+	vscodeUriScheme,
+	apiProvider,
 }) => {
 	const [isExpanded, setIsExpanded] = useState(false)
 	const [showSeeMore, setShowSeeMore] = useState(false)
@@ -107,6 +116,7 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 					flexDirection: "column",
 					gap: "8px",
 					position: "relative",
+					zIndex: 1,
 				}}>
 				<div
 					style={{
@@ -248,6 +258,34 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 					</div>
 				</div>
 			</div>
+			{apiProvider === "kodu" && (
+				<div
+					style={{
+						backgroundColor: "color-mix(in srgb, var(--vscode-badge-background) 50%, transparent)",
+						color: "var(--vscode-badge-foreground)",
+						borderRadius: "0 0 3px 3px",
+						display: "flex",
+						justifyContent: "space-between",
+						alignItems: "center",
+						padding: "4px 12px 6px 12px",
+						fontSize: "0.9em",
+						marginLeft: "10px",
+						marginRight: "10px",
+					}}>
+					<div style={{ fontWeight: "500" }}>Credits Remaining:</div>
+					<div>
+						{formatPrice(koduCredits || 0)}
+						{(koduCredits || 0) < 1 && (
+							<>
+								{" "}
+								<VSCodeLink style={{ fontSize: "0.9em" }} href={getKoduAddCreditsUrl(vscodeUriScheme)}>
+									(get more?)
+								</VSCodeLink>
+							</>
+						)}
+					</div>
+				</div>
+			)}
 		</div>
 	)
 }