fix(ui-trajectory): limit role tooltips to compact icons

This commit is contained in:
_Kerman
2026-08-03 15:02:05 +08:00
parent a533cb6ce4
commit ad6858b6d3
2 changed files with 30 additions and 27 deletions

View File

@@ -1961,36 +1961,36 @@ export function TrajectoryTable({
<span <span
className={css.kindSlot} className={css.kindSlot}
> >
<Tooltip <span
label={KIND_LABEL[record.cell.kind]} className={`${css.kindTag} ${
side="right" record.cell.kind === 'system'
? css.systemNeutral
: record.cell.kind === 'context'
? css.contextGreen
: record.cell.kind === 'compacted'
? css.compacted
: record.cell.kind === 'tool'
? css.toolAmber
: record.cell.kind === 'message'
? css.assistantVioletBright
: record.cell.kind === 'subtool'
? css.subtoolAmber
: css[record.cell.kind]
}`}
data-role-kind={record.cell.kind}
> >
<span <Tooltip
className={`${css.kindTag} ${ label={KIND_LABEL[record.cell.kind]}
record.cell.kind === 'system' side="right"
? css.systemNeutral
: record.cell.kind === 'context'
? css.contextGreen
: record.cell.kind === 'compacted'
? css.compacted
: record.cell.kind === 'tool'
? css.toolAmber
: record.cell.kind === 'message'
? css.assistantVioletBright
: record.cell.kind === 'subtool'
? css.subtoolAmber
: css[record.cell.kind]
}`}
data-role-kind={record.cell.kind}
> >
<span className={css.kindTagIcon} aria-hidden="true"> <span className={css.kindTagIcon} aria-hidden="true">
{KIND_ICON[record.cell.kind]} {KIND_ICON[record.cell.kind]}
</span> </span>
<span className={css.kindTagLabel}> </Tooltip>
{KIND_LABEL[record.cell.kind]} <span className={css.kindTagLabel}>
</span> {KIND_LABEL[record.cell.kind]}
</span> </span>
</Tooltip> </span>
</span> </span>
)} )}
</div> </div>

View File

@@ -263,19 +263,22 @@ describe('TrajectoryTable', () => {
expect(retry.style.getPropertyValue('--request-boundary-offset')).toBe('8px') expect(retry.style.getPropertyValue('--request-boundary-offset')).toBe('8px')
}) })
it('renders responsive role icons with a custom tooltip', () => { it('shows the custom role tooltip only from the responsive icon', () => {
const view = render(<TrajectoryTable turns={TURNS} {...FOLD_PROPS} />) const view = render(<TrajectoryTable turns={TURNS} {...FOLD_PROPS} />)
const toolTag = view.container.querySelector<HTMLElement>('[data-role-kind="tool"]') const toolTag = view.container.querySelector<HTMLElement>('[data-role-kind="tool"]')
const toolIcon = toolTag?.querySelector<HTMLElement>('[data-role-icon="wrench"]')
expect(toolTag).not.toBeNull() expect(toolTag).not.toBeNull()
expect(toolTag?.getAttribute('title')).toBeNull() expect(toolTag?.getAttribute('title')).toBeNull()
expect(toolTag?.querySelector('[data-role-icon="wrench"]')).toBeTruthy() expect(toolIcon).toBeTruthy()
fireEvent.mouseEnter(toolTag as HTMLElement) fireEvent.mouseEnter(toolTag as HTMLElement)
expect(screen.queryByRole('tooltip')).toBeNull()
fireEvent.mouseEnter(toolIcon as HTMLElement)
const tooltip = screen.getByRole('tooltip') const tooltip = screen.getByRole('tooltip')
expect(tooltip.textContent).toBe('TOOL') expect(tooltip.textContent).toBe('TOOL')
expect(tooltip.getAttribute('data-side')).toBe('right') expect(tooltip.getAttribute('data-side')).toBe('right')
fireEvent.mouseLeave(toolTag as HTMLElement) fireEvent.mouseLeave(toolIcon as HTMLElement)
expect(screen.queryByRole('tooltip')).toBeNull() expect(screen.queryByRole('tooltip')).toBeNull()
}) })