fix(ui): grey subagent tool calls and soften failure copy (#4457)

* fix(ui): Adjust tool opacity, failed tool wording

* fix(ui): scope opacity to subagent groups, lowercase fallback error label
This commit is contained in:
Theodore Li
2026-05-05 19:53:53 -04:00
committed by GitHub
parent 09f4c94b3c
commit 8f78635dee
2 changed files with 13 additions and 10 deletions
@@ -42,6 +42,7 @@ export function AgentGroup({
}: AgentGroupProps) {
const AgentIcon = getAgentIcon(agentName)
const hasItems = items.length > 0
const isSubagent = agentName !== 'mothership'
const toolItems = items.filter(
(item): item is Extract<AgentGroupItem, { type: 'tool' }> => item.type === 'tool'
)
@@ -112,7 +113,7 @@ export function AgentGroup({
<Expandable expanded={expanded}>
<ExpandableContent>
<BoundedViewport isStreaming={isStreaming}>
<div className='flex flex-col gap-1.5 py-0.5'>
<div className={cn('flex flex-col gap-1.5 py-0.5', isSubagent && 'opacity-60')}>
{items.map((item, idx) => {
if (item.type === 'tool') {
return (
@@ -128,7 +129,7 @@ export function AgentGroup({
return (
<span
key={`text-${idx}`}
className='pl-6 font-base text-[13px] text-[var(--text-secondary)] leading-[18px] opacity-60'
className='pl-6 font-base text-[13px] text-[var(--text-secondary)] leading-[18px]'
>
{item.content.trim()}
</span>
@@ -71,7 +71,7 @@ function formatReadingLabel(target: string | undefined, state: ClientToolCallSta
case ClientToolCallState.success:
return `Read${suffix}`
case ClientToolCallState.error:
return `Failed reading${suffix}`
return `Attempted to read${suffix}`
case ClientToolCallState.rejected:
case ClientToolCallState.aborted:
return `Skipped reading${suffix}`
@@ -127,14 +127,16 @@ function humanizedFallback(
toolName: string,
state: ClientToolCallState
): ClientToolDisplay | undefined {
const formattedName = toolName.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
const titleCaseName = toolName.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
if (state === ClientToolCallState.error) {
const lowerCaseName = toolName.replace(/_/g, ' ').toLowerCase()
return { text: `Attempted to ${lowerCaseName}`, icon: Loader }
}
const stateVerb =
state === ClientToolCallState.success
? 'Executed'
: state === ClientToolCallState.error
? 'Failed'
: state === ClientToolCallState.rejected || state === ClientToolCallState.aborted
? 'Skipped'
: 'Executing'
return { text: `${stateVerb} ${formattedName}`, icon: Loader }
: state === ClientToolCallState.rejected || state === ClientToolCallState.aborted
? 'Skipped'
: 'Executing'
return { text: `${stateVerb} ${titleCaseName}`, icon: Loader }
}