Bug fixes for openai provider

webview-ui/src/components/ApiOptions.tsx

@@ -73,7 +73,7 @@ const ApiOptions: React.FC<ApiOptionsProps> = ({ showModelOptions, apiErrorMessa
 					id="api-provider"
 					value={selectedProvider}
 					onChange={handleInputChange("apiProvider")}
-					style={{ minWidth: 125 }}>
+					style={{ minWidth: 130 }}>
 					<VSCodeOption value="anthropic">Anthropic</VSCodeOption>
 					<VSCodeOption value="openrouter">OpenRouter</VSCodeOption>
 					<VSCodeOption value="bedrock">AWS Bedrock</VSCodeOption>
@@ -294,9 +294,8 @@ const ApiOptions: React.FC<ApiOptionsProps> = ({ showModelOptions, apiErrorMessa
 						}}>
 						You can use any OpenAI compatible API with models that support tool use.{" "}
 						<span style={{ color: "var(--vscode-errorForeground)" }}>
-							(<span style={{ fontWeight: 500 }}>Note:</span> Claude Dev uses complex prompts, so results
-							may vary depending on the quality of the model you choose. Less capable models may not work
-							as expected.)
+							(<span style={{ fontWeight: 500 }}>Note:</span> Claude Dev uses complex prompts, so less
+							capable models may not work as expected.)
 						</span>
 					</p>
 				</div>

webview-ui/src/components/ChatRow.tsx

@@ -93,7 +93,7 @@ const ChatRow: React.FC<ChatRowProps> = ({
 				]
 			case "api_req_started":
 				return [
-					cost ? (
+					cost != null ? (
 						<span
 							className="codicon codicon-check"
 							style={{ color: successColor, marginBottom: "-1.5px" }}></span>
@@ -104,7 +104,7 @@ const ChatRow: React.FC<ChatRowProps> = ({
 					) : (
 						ProgressIndicator
 					),
-					cost ? (
+					cost != null ? (
 						<span style={{ color: normalColor, fontWeight: "bold" }}>API Request Complete</span>
 					) : apiRequestFailedMessage ? (
 						<span style={{ color: errorColor, fontWeight: "bold" }}>API Request Failed</span>
@@ -266,7 +266,9 @@ const ChatRow: React.FC<ChatRowProps> = ({
 									<div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
 										{icon}
 										{title}
-										{cost && <VSCodeBadge>${Number(cost)?.toFixed(4)}</VSCodeBadge>}
+										{cost != null && cost > 0 && (
+											<VSCodeBadge>${Number(cost)?.toFixed(4)}</VSCodeBadge>
+										)}
 									</div>
 									<VSCodeButton
 										appearance="icon"

webview-ui/src/components/HistoryPreview.tsx

@@ -108,12 +108,12 @@ const HistoryPreview = ({ showHistoryView }: HistoryPreviewProps) => {
 									<span>
 										Tokens: ↑{item.tokensIn?.toLocaleString()} ↓{item.tokensOut?.toLocaleString()}
 									</span>
-									{item.cacheWrites && item.cacheReads && (
+									{!!item.cacheWrites && (
 										<>
 											{" • "}
 											<span>
 												Cache: +{item.cacheWrites?.toLocaleString()} →{" "}
-												{item.cacheReads?.toLocaleString()}
+												{(item.cacheReads || 0).toLocaleString()}
 											</span>
 										</>
 									)}

webview-ui/src/components/HistoryView.tsx

@@ -65,12 +65,13 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 
 	const ExportButton = ({ itemId }: { itemId: string }) => (
 		<VSCodeButton
+			className="export-button"
 			appearance="icon"
 			onClick={(e) => {
 				e.stopPropagation()
 				handleExportMd(itemId)
 			}}>
-			<div style={{ fontSize: "11px", fontWeight: 500, opacity: 1 }}>EXPORT .MD</div>
+			<div style={{ fontSize: "11px", fontWeight: 500, opacity: 1 }}>EXPORT</div>
 		</VSCodeButton>
 	)
 
@@ -81,11 +82,12 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 					.history-item:hover {
 						background-color: var(--vscode-list-hoverBackground);
 					}
-					.delete-button {
+					.delete-button, .export-button {
 						opacity: 0;
 						pointer-events: none;
 					}
-					.history-item:hover .delete-button {
+					.history-item:hover .delete-button,
+					.history-item:hover .export-button {
 						opacity: 1;
 						pointer-events: auto;
 					}
@@ -282,7 +284,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 											{!item.totalCost && <ExportButton itemId={item.id} />}
 										</div>
 
-										{item.cacheWrites && item.cacheReads && (
+										{!!item.cacheWrites && (
 											<div
 												style={{
 													display: "flex",
@@ -329,7 +331,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 															marginBottom: 0,
 														}}
 													/>
-													{item.cacheReads?.toLocaleString()}
+													{(item.cacheReads || 0).toLocaleString()}
 												</span>
 											</div>
 										)}

webview-ui/src/components/TaskHeader.tsx

@@ -103,7 +103,7 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 				marginBottom: "-2px",
 				marginRight: "-2.5px",
 			}}>
-			<div style={{ fontSize: "10.5px", fontWeight: "bold", opacity: 0.6 }}>EXPORT .MD</div>
+			<div style={{ fontSize: "10.5px", fontWeight: "bold", opacity: 0.6 }}>EXPORT</div>
 		</VSCodeButton>
 	)