feat(openai-compatible): tune UI UX custom model info

webview-ui/src/components/settings/ApiOptions.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, Dropdown } from "vscrui"
+import { Checkbox, Dropdown, Pane } from "vscrui"
 import type { DropdownOption } from "vscrui"
 import { VSCodeLink, VSCodeRadio, VSCodeRadioGroup, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 import { Fragment, memo, useCallback, useEffect, useMemo, useState } from "react"
@@ -559,29 +559,58 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 						/>
 					)}
 
-					{/* Model Info Configuration */}
 					<div
 						style={{
 							marginTop: 15,
-							padding: 10,
+						}}
-							border: "1px solid var(--vscode-input-border)",
+					/>
-							borderRadius: 4,
+					<Pane
+						title="Model Configuration"
+						open={false}
+						actions={[
+							{
+								iconName: "refresh",
+								onClick: () =>
+									handleInputChange("openAiCusModelInfo")({
+										target: { value: openAiModelInfoSaneDefaults },
+									}),
+							},
+						]}>
+						<div
+							style={{
+								padding: 15,
+								backgroundColor: "var(--vscode-editor-background)",
 							}}>
-						<div style={{ marginBottom: 10 }}>
-							<span style={{ fontWeight: 500, fontSize: "14px" }}>Model Configuration</span>
 							<p
 								style={{
 									fontSize: "12px",
 									color: "var(--vscode-descriptionForeground)",
-									margin: "5px 0",
+									margin: "0 0 15px 0",
+									lineHeight: "1.4",
 								}}>
 								Configure the capabilities and pricing for your custom OpenAI-compatible model
 							</p>
-						</div>
 
 							{/* Capabilities Section */}
-						<div style={{ marginBottom: 15 }}>
+							<div
-							<div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 5 }}>
+								style={{
+									marginBottom: 20,
+									padding: 12,
+									backgroundColor: "var(--vscode-editor-inactiveSelectionBackground)",
+									borderRadius: 4,
+								}}>
+								<span
+									style={{
+										fontWeight: 500,
+										fontSize: "12px",
+										display: "block",
+										marginBottom: 12,
+										color: "var(--vscode-editor-foreground)",
+									}}>
+									Model Capabilities
+								</span>
+								<div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+									<div className="token-config-field">
 										<VSCodeTextField
 											value={
 												apiConfiguration?.openAiCusModelInfo?.maxTokens?.toString() ||
@@ -589,9 +618,18 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 												""
 											}
 											type="text"
-									style={{ width: "100%" }}
+											style={{
+												width: "100%",
+												borderColor: (() => {
+													const value = apiConfiguration?.openAiCusModelInfo?.maxTokens
+													if (!value) return "var(--vscode-input-border)"
+													return value > 0
+														? "var(--vscode-charts-green)"
+														: "var(--vscode-errorForeground)"
+												})(),
+											}}
 											title="Maximum number of tokens the model can generate in a single response"
-									onInput={(e: any) => {
+											onChange={(e: any) => {
 												const value = parseInt(e.target.value)
 												handleInputChange("openAiCusModelInfo")({
 													target: {
@@ -606,7 +644,24 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 											placeholder="e.g. 4096">
 											<span style={{ fontWeight: 500 }}>Max Output Tokens</span>
 										</VSCodeTextField>
+										<div
+											style={{
+												fontSize: "11px",
+												color: "var(--vscode-descriptionForeground)",
+												marginTop: 4,
+												display: "flex",
+												alignItems: "center",
+												gap: 4,
+											}}>
+											<i className="codicon codicon-info" style={{ fontSize: "12px" }}></i>
+											<span>
+												Maximum number of tokens the model can generate in a response. Higher
+												values allow longer outputs but may increase costs.
+											</span>
+										</div>
+									</div>
 
+									<div className="token-config-field">
 										<VSCodeTextField
 											value={
 												apiConfiguration?.openAiCusModelInfo?.contextWindow?.toString() ||
@@ -614,9 +669,18 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 												""
 											}
 											type="text"
-									style={{ width: "100%" }}
+											style={{
+												width: "100%",
+												borderColor: (() => {
+													const value = apiConfiguration?.openAiCusModelInfo?.contextWindow
+													if (!value) return "var(--vscode-input-border)"
+													return value > 0
+														? "var(--vscode-charts-green)"
+														: "var(--vscode-errorForeground)"
+												})(),
+											}}
 											title="Total number of tokens (input + output) the model can process in a single request"
-									onInput={(e: any) => {
+											onChange={(e: any) => {
 												const parsed = parseInt(e.target.value)
 												handleInputChange("openAiCusModelInfo")({
 													target: {
@@ -636,14 +700,51 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 											placeholder="e.g. 128000">
 											<span style={{ fontWeight: 500 }}>Context Window Size</span>
 										</VSCodeTextField>
+										<div
+											style={{
+												fontSize: "11px",
+												color: "var(--vscode-descriptionForeground)",
+												marginTop: 4,
+												display: "flex",
+												alignItems: "center",
+												gap: 4,
+											}}>
+											<i className="codicon codicon-info" style={{ fontSize: "12px" }}></i>
+											<span>
+												Total tokens (input + output) the model can process. Larger windows
+												allow processing more content but may increase memory usage.
+											</span>
+										</div>
+									</div>
 
-								<div style={{ display: "flex", gap: 20, marginTop: 5 }}>
+									<div
+										style={{
+											backgroundColor: "var(--vscode-editor-background)",
+											padding: "12px",
+											borderRadius: "4px",
+											marginTop: "8px",
+											border: "1px solid var(--vscode-input-border)",
+											transition: "background-color 0.2s ease",
+										}}>
+										<span
+											style={{
+												fontSize: "11px",
+												fontWeight: 500,
+												color: "var(--vscode-editor-foreground)",
+												display: "block",
+												marginBottom: "10px",
+											}}>
+											Model Features
+										</span>
+
+										<div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+											<div className="feature-toggle">
+												<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
 													<Checkbox
 														checked={
 															apiConfiguration?.openAiCusModelInfo?.supportsImages ??
 															openAiModelInfoSaneDefaults.supportsImages
 														}
-										title="Enable if the model can process and understand images in the input"
 														onChange={(checked: boolean) => {
 															handleInputChange("openAiCusModelInfo")({
 																target: {
@@ -655,12 +756,43 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 																},
 															})
 														}}>
-										Supports Images
+														<span style={{ fontWeight: 500 }}>Image Support</span>
 													</Checkbox>
+													<i
+														className="codicon codicon-info"
+														title="Enable if the model can process and understand images in the input. Required for image-based assistance and visual code understanding."
+														style={{
+															fontSize: "12px",
+															color: "var(--vscode-descriptionForeground)",
+															cursor: "help",
+														}}
+													/>
+												</div>
+												<p
+													style={{
+														fontSize: "11px",
+														color: "var(--vscode-descriptionForeground)",
+														marginLeft: "24px",
+														marginTop: "4px",
+														lineHeight: "1.4",
+													}}>
+													Allows the model to analyze and understand images, essential for
+													visual code assistance
+												</p>
+											</div>
 
+											<div
+												className="feature-toggle"
+												style={{
+													borderTop: "1px solid var(--vscode-input-border)",
+													paddingTop: "12px",
+												}}>
+												<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
 													<Checkbox
-										checked={apiConfiguration?.openAiCusModelInfo?.supportsComputerUse ?? false}
+														checked={
-										title="Enable if the model can interact with the computer (execute commands, modify files, etc.)"
+															apiConfiguration?.openAiCusModelInfo?.supportsComputerUse ??
+															false
+														}
 														onChange={(checked: boolean) => {
 															handleInputChange("openAiCusModelInfo")({
 																target: {
@@ -672,25 +804,74 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 																},
 															})
 														}}>
-										Supports Computer Use
+														<span style={{ fontWeight: 500 }}>Computer Interaction</span>
 													</Checkbox>
+													<i
+														className="codicon codicon-info"
+														title="Enable if the model can interact with your computer through commands and file operations. Required for automated tasks and file modifications."
+														style={{
+															fontSize: "12px",
+															color: "var(--vscode-descriptionForeground)",
+															cursor: "help",
+														}}
+													/>
+												</div>
+												<p
+													style={{
+														fontSize: "11px",
+														color: "var(--vscode-descriptionForeground)",
+														marginLeft: "24px",
+														marginTop: "4px",
+														lineHeight: "1.4",
+													}}>
+													Enables the model to execute commands and modify files for automated
+													assistance
+												</p>
+											</div>
+										</div>
 									</div>
 								</div>
 							</div>
 
 							{/* Pricing Section */}
-						<div>
+							<div
+								style={{
+									backgroundColor: "var(--vscode-editor-inactiveSelectionBackground)",
+									padding: "12px",
+									borderRadius: "4px",
+									marginTop: "15px",
+								}}>
+								<div style={{ marginBottom: "12px" }}>
 									<span
 										style={{
 											fontWeight: 500,
 											fontSize: "12px",
-									color: "var(--vscode-descriptionForeground)",
+											color: "var(--vscode-editor-foreground)",
+											display: "block",
+											marginBottom: "4px",
 										}}>
-								Pricing (USD per million tokens)
+										Model Pricing
 									</span>
-							<div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 5 }}>
+									<span
-								{/* Input/Output Prices */}
+										style={{
-								<div style={{ display: "flex", gap: 10 }}>
+											fontSize: "11px",
+											color: "var(--vscode-descriptionForeground)",
+											display: "block",
+										}}>
+										Configure token-based pricing in USD per million tokens
+									</span>
+								</div>
+
+								<div
+									style={{
+										display: "grid",
+										gridTemplateColumns: "1fr 1fr",
+										gap: "12px",
+										backgroundColor: "var(--vscode-editor-background)",
+										padding: "12px",
+										borderRadius: "4px",
+									}}>
+									<div className="price-input">
 										<VSCodeTextField
 											value={
 												apiConfiguration?.openAiCusModelInfo?.inputPrice?.toString() ??
@@ -698,8 +879,16 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 												""
 											}
 											type="text"
-										style={{ width: "100%" }}
+											style={{
-										title="Cost per million tokens in the input/prompt"
+												width: "100%",
+												borderColor: (() => {
+													const value = apiConfiguration?.openAiCusModelInfo?.inputPrice
+													if (!value && value !== 0) return "var(--vscode-input-border)"
+													return value >= 0
+														? "var(--vscode-charts-green)"
+														: "var(--vscode-errorForeground)"
+												})(),
+											}}
 											onChange={(e: any) => {
 												const parsed = parseFloat(e.target.value)
 												handleInputChange("openAiCusModelInfo")({
@@ -718,9 +907,22 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 												})
 											}}
 											placeholder="e.g. 0.0001">
+											<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
 												<span style={{ fontWeight: 500 }}>Input Price</span>
+												<i
+													className="codicon codicon-info"
+													title="Cost per million tokens in the input/prompt. This affects the cost of sending context and instructions to the model."
+													style={{
+														fontSize: "12px",
+														color: "var(--vscode-descriptionForeground)",
+														cursor: "help",
+													}}
+												/>
+											</div>
 										</VSCodeTextField>
+									</div>
 
+									<div className="price-input">
 										<VSCodeTextField
 											value={
 												apiConfiguration?.openAiCusModelInfo?.outputPrice?.toString() ||
@@ -728,8 +930,16 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 												""
 											}
 											type="text"
-										style={{ width: "100%" }}
+											style={{
-										title="Cost per million tokens in the model's response"
+												width: "100%",
+												borderColor: (() => {
+													const value = apiConfiguration?.openAiCusModelInfo?.outputPrice
+													if (!value && value !== 0) return "var(--vscode-input-border)"
+													return value >= 0
+														? "var(--vscode-charts-green)"
+														: "var(--vscode-errorForeground)"
+												})(),
+											}}
 											onChange={(e: any) => {
 												const parsed = parseFloat(e.target.value)
 												handleInputChange("openAiCusModelInfo")({
@@ -748,14 +958,26 @@ const ApiOptions = ({ apiErrorMessage, modelIdErrorMessage }: ApiOptionsProps) =
 												})
 											}}
 											placeholder="e.g. 0.0002">
+											<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
 												<span style={{ fontWeight: 500 }}>Output Price</span>
+												<i
+													className="codicon codicon-info"
+													title="Cost per million tokens in the model's response. This affects the cost of generated content and completions."
+													style={{
+														fontSize: "12px",
+														color: "var(--vscode-descriptionForeground)",
+														cursor: "help",
+													}}
+												/>
+											</div>
 										</VSCodeTextField>
 									</div>
 								</div>
 							</div>
 						</div>
+					</Pane>
 
-					{/* TODO: model info here */}
+					{/* end Model Info Configuration */}
 
 					<p
 						style={{