Skip to content

fix: display current LLM model in task header UI #7439

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

fix: display current LLM model in task header UI #7439

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 65 additions & 43 deletions webview-ui/src/components/chat/TaskHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,51 +120,61 @@ const TaskHeader = ({
</div>
</div>
</div>
{!isTaskExpanded && contextWindow > 0 && (
{!isTaskExpanded && (
<div className="flex items-center gap-2 text-sm" onClick={(e) => e.stopPropagation()}>
<StandardTooltip
content={
<div className="space-y-1">
<div>
{t("chat:tokenProgress.tokensUsed", {
used: formatLargeNumber(contextTokens || 0),
total: formatLargeNumber(contextWindow),
})}
</div>
{(() => {
const maxTokens = model
? getModelMaxOutputTokens({ modelId, model, settings: apiConfiguration })
: 0
const reservedForOutput = maxTokens || 0
const availableSpace = contextWindow - (contextTokens || 0) - reservedForOutput
{/* Model display */}
{modelId && <span className="text-vscode-descriptionForeground opacity-80">{modelId}</span>}
Copy link
Contributor Author

@roomote roomote bot Aug 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The opacity-80 styling might make the model name less visible, which contradicts the goal of addressing the visibility issue from #7438. Since this is meant to fix a critical UX problem about not being able to see the model, should we make it more prominent?

{/* Token progress */}
{contextWindow > 0 && (
<StandardTooltip
content={
<div className="space-y-1">
<div>
{t("chat:tokenProgress.tokensUsed", {
used: formatLargeNumber(contextTokens || 0),
total: formatLargeNumber(contextWindow),
})}
</div>
{(() => {
const maxTokens = model
? getModelMaxOutputTokens({
modelId,
model,
settings: apiConfiguration,
})
: 0
const reservedForOutput = maxTokens || 0
const availableSpace =
contextWindow - (contextTokens || 0) - reservedForOutput

return (
<>
{reservedForOutput > 0 && (
<div>
{t("chat:tokenProgress.reservedForResponse", {
amount: formatLargeNumber(reservedForOutput),
})}
</div>
)}
{availableSpace > 0 && (
<div>
{t("chat:tokenProgress.availableSpace", {
amount: formatLargeNumber(availableSpace),
})}
</div>
)}
</>
)
})()}
</div>
}
side="top"
sideOffset={8}>
<span className="mr-1">
{formatLargeNumber(contextTokens || 0)} / {formatLargeNumber(contextWindow)}
</span>
</StandardTooltip>
return (
<>
{reservedForOutput > 0 && (
<div>
{t("chat:tokenProgress.reservedForResponse", {
amount: formatLargeNumber(reservedForOutput),
})}
</div>
)}
{availableSpace > 0 && (
<div>
{t("chat:tokenProgress.availableSpace", {
amount: formatLargeNumber(availableSpace),
})}
</div>
)}
</>
)
})()}
</div>
}
side="top"
sideOffset={8}>
<span className="mr-1">
{formatLargeNumber(contextTokens || 0)} / {formatLargeNumber(contextWindow)}
</span>
</StandardTooltip>
)}
{!!totalCost && <span>${totalCost.toFixed(2)}</span>}
</div>
)}
Expand All @@ -190,6 +200,18 @@ const TaskHeader = ({
<div className="border-t border-b border-vscode-panel-border/50 py-4 mt-2 mb-1">
<table className="w-full">
<tbody>
{/* Model row */}
{modelId && (
<tr>
<th className="font-bold text-left align-top w-1 whitespace-nowrap pl-1 pr-3 h-[24px]">
{t("chat:task.model")}
</th>
<td className="align-top">
<span>{modelId}</span>
Copy link
Contributor Author

@roomote roomote bot Aug 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Model IDs can be quite long (e.g., "anthropic/claude-3-opus-20240229"). Consider adding a tooltip with the full model name or truncating with ellipsis for better UX when space is limited in the collapsed view.

</td>
</tr>
)}

{contextWindow > 0 && (
<tr>
<th
Expand Down
1 change: 1 addition & 0 deletions webview-ui/src/i18n/locales/en/chat.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"collapse": "Collapse task",
"seeMore": "See more",
"seeLess": "See less",
"model": "Model",
Copy link
Contributor Author

@roomote roomote bot Aug 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This only adds the translation to the English locale. What about our non-English speaking users? All other language files (es, fr, de, ja, ko, zh-CN, etc.) need this "model" key added too, or they'll see missing translation warnings.

You'll need to add the "model" key to all locale files in webview-ui/src/i18n/locales/*/chat.json

"tokens": "Tokens",
"cache": "Cache",
"apiCost": "API Cost",
Expand Down
Loading