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

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>
 	)
 }