fix: display current LLM model in task header UI

- Added model display in both collapsed and expanded task header views
- Shows model name next to token count in collapsed view
- Added dedicated Model row in expanded task details table
- Added localization support for "Model" label in chat.json

Fixes #7438
This commit is contained in:
Roo Code 2025-08-27 00:23:42 +00:00
parent 11c454ffa2
commit 30f792dcd9
2 changed files with 66 additions and 43 deletions

View file

@ -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>}
{/* 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>
)}
@ -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>
</td>
</tr>
)}
{contextWindow > 0 && (
<tr>
<th

View file

@ -6,6 +6,7 @@
"collapse": "Collapse task",
"seeMore": "See more",
"seeLess": "See less",
"model": "Model",
"tokens": "Tokens",
"cache": "Cache",
"apiCost": "API Cost",