diff --git a/packages/client/ui-trajectory/src/client/TrajectoryTable.module.css b/packages/client/ui-trajectory/src/client/TrajectoryTable.module.css
index 40f4791d45..69d9d620e3 100644
--- a/packages/client/ui-trajectory/src/client/TrajectoryTable.module.css
+++ b/packages/client/ui-trajectory/src/client/TrajectoryTable.module.css
@@ -1248,9 +1248,19 @@
background: transparent;
cursor: pointer;
font: 600 12px/18px var(--dsw-font-family);
+ gap: 2px;
user-select: none;
}
+.thinkingChevron {
+ flex: none;
+ transition: transform 120ms var(--ds-ease-in-out);
+}
+
+.thinkingToggle[aria-expanded='true'] .thinkingChevron {
+ transform: rotate(90deg);
+}
+
.thinkingToggle:hover {
color: var(--dsw-alias-label-secondary);
}
diff --git a/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx b/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx
index 89154626f0..491462d7b5 100644
--- a/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx
+++ b/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx
@@ -1232,7 +1232,8 @@ function MarkdownRecordContent({
aria-expanded={thinkingExpanded}
onClick={() => { onThinkingExpandedChange(!thinkingExpanded) }}
>
- {thinkingExpanded ? 'Thinking' : 'Thinking ...'}
+ {thinkingExpanded ? 'Hide thinking' : 'Show thinking'}
+
{thinkingExpanded && (
{
render()
fireEvent.click(screen.getByRole('row', { name: /ASSISTANT/ }))
- const toggle = screen.getByRole('button', { name: 'Thinking ...' })
+ const toggle = screen.getByRole('button', { name: 'Show thinking' })
+ expect(toggle.getAttribute('aria-expanded')).toBe('false')
expect(screen.queryByText(thinking)).toBeNull()
fireEvent.click(toggle)
+ expect(screen.getByRole('button', { name: 'Hide thinking' })).toBe(toggle)
+ expect(toggle.getAttribute('aria-expanded')).toBe('true')
expect(toggle.parentElement?.textContent?.length).toBeGreaterThan(thinking.length)
})