From a533cb6ce4e4d098b1b5eeec24766c399a3ab9a6 Mon Sep 17 00:00:00 2001 From: _Kerman Date: Mon, 3 Aug 2026 15:01:35 +0800 Subject: [PATCH 1/6] fix(ui-trajectory): distinguish overlapping request markers --- .../src/client/TrajectoryTable.module.css | 19 +++++---- .../src/client/TrajectoryTable.tsx | 31 ++++++++++++++ .../client/ui-trajectory/tests/table.spec.tsx | 41 +++++++++++++++++++ 3 files changed, 83 insertions(+), 8 deletions(-) diff --git a/packages/client/ui-trajectory/src/client/TrajectoryTable.module.css b/packages/client/ui-trajectory/src/client/TrajectoryTable.module.css index 0b1cbf8030..40f4791d45 100644 --- a/packages/client/ui-trajectory/src/client/TrajectoryTable.module.css +++ b/packages/client/ui-trajectory/src/client/TrajectoryTable.module.css @@ -100,17 +100,12 @@ } .table tbody tr[data-request-only='true'] td { - height: 1px; + height: 0; padding-top: 0; padding-bottom: 0; border-bottom: 0; } -.table tbody tr[data-request-only='true']:has(+ tr[data-request-only='true']) td { - /* Keep consecutive boundary markers from painting their halos over one another. */ - height: 9px; -} - .table tbody tr[data-request-only='true']:last-child td { /* Retain the lower half of the 16px boundary marker at the table's end. */ height: 9px; @@ -130,10 +125,12 @@ } .requestBoundaryControl { + --request-boundary-base-left: 12px; + position: absolute; z-index: 6; top: -8px; - left: 12px; + left: calc(var(--request-boundary-base-left) + var(--request-boundary-offset, 0px)); width: 16px; height: 16px; padding: 0; @@ -198,6 +195,12 @@ box-shadow: 0 0 0 1.5px var(--dsw-alias-brand-primary-new-colorprimary-new-color); } +.requestBoundaryControl[data-request-status='error']::before, +.requestBoundaryControl[data-request-status='error']:hover::before, +.requestBoundaryControl[data-request-status='error']:focus-visible::before { + background: var(--dsw-alias-state-error-primary); +} + .requestBoundaryControl:hover::after, .requestBoundaryControl:focus-visible::after { opacity: 1; @@ -402,7 +405,7 @@ } .requestBoundaryControl { - left: 6px; + --request-boundary-base-left: 6px; } .kindSlot { diff --git a/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx b/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx index 7973649cf5..13dfee2606 100644 --- a/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx +++ b/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx @@ -191,6 +191,10 @@ type TrajectorySplitStyle = CSSProperties & { '--trajectory-tool-request-width': string } +type RequestBoundaryStyle = CSSProperties & { + '--request-boundary-offset': string +} + function clampDetailsWidth(width: number, splitWidth: number): number { const maxWidth = Math.max( DETAILS_MIN_WIDTH, @@ -453,6 +457,23 @@ function indexRequestNumbers( return numbers } +function indexRequestBoundaryRuns(records: readonly TableRecord[]): ReadonlyMap { + const indexes = new Map() + let previous: TableRecord | undefined + let runIndex = 0 + for (const record of records) { + if (record.cell.requestOnly !== true) { + previous = record + runIndex = 0 + continue + } + runIndex = previous?.cell.requestOnly === true ? runIndex + 1 : 0 + indexes.set(record.cell.index, runIndex) + previous = record + } + return indexes +} + function summarizeTurn(records: readonly TableRecord[]): string { const steps = new Set( records @@ -1545,6 +1566,7 @@ export function TrajectoryTable({ collapsedAssistants, ) : filterRecords(allRecords, searchMatchIndexes) + const requestBoundaryRuns = indexRequestBoundaryRuns(records) const selected = allRecords.find(record => record.cell.index === selectedIndex) const selectedPrompt = selected?.cell.kind === 'system' ? selected.cell.promptDetail @@ -1791,6 +1813,12 @@ export function TrajectoryTable({ const requestInfo = request === undefined ? undefined : sessionRequestNumbers?.find(candidate => candidate.number === request) + const requestStatus = requestInfo?.status + ?? (record.cell.isError === true ? 'error' : undefined) + const requestRunIndex = requestBoundaryRuns.get(record.cell.index) ?? 0 + const requestBoundaryStyle: RequestBoundaryStyle = { + '--request-boundary-offset': `${requestRunIndex * 8}px`, + } const requestLabel = request === undefined ? undefined : `Request #${request}${requestInfo?.purpose === 'compaction' ? ' ยท Compaction' : ''}` @@ -1882,6 +1910,9 @@ export function TrajectoryTable({ aria-label={requestLabel} aria-pressed={requestSelected} data-label={requestLabel} + data-request-run-index={requestRunIndex} + data-request-status={requestStatus} + style={requestBoundaryStyle} onClick={(event) => { event.stopPropagation() selectRequest({ diff --git a/packages/client/ui-trajectory/tests/table.spec.tsx b/packages/client/ui-trajectory/tests/table.spec.tsx index 65c3da3255..aaea399a83 100644 --- a/packages/client/ui-trajectory/tests/table.spec.tsx +++ b/packages/client/ui-trajectory/tests/table.spec.tsx @@ -222,6 +222,47 @@ describe('TrajectoryTable', () => { expect(errorResult.closest('[class*="errorPayload"]')).toBeTruthy() }) + it('marks failed requests and lays coincident request markers left to right', () => { + const turns: readonly TrajectoryTurnModel[] = [ + { + turn: null, + groups: [{ + title: 'Step 1', + cells: [{ + index: 1, + kind: 'message', + text: '', + requestOnly: true, + isError: true, + timeSeconds: 0.1, + }], + }], + }, + { + turn: null, + groups: [{ + title: 'Step 2', + cells: [{ + index: 2, + kind: 'message', + text: '', + requestOnly: true, + timeSeconds: 0.1, + }], + }], + }, + ] + render() + + const failed = screen.getByRole('button', { name: 'Request #1' }) + const retry = screen.getByRole('button', { name: 'Request #2' }) + expect(failed.getAttribute('data-request-status')).toBe('error') + expect(failed.getAttribute('data-request-run-index')).toBe('0') + expect(failed.style.getPropertyValue('--request-boundary-offset')).toBe('0px') + expect(retry.getAttribute('data-request-run-index')).toBe('1') + expect(retry.style.getPropertyValue('--request-boundary-offset')).toBe('8px') + }) + it('renders responsive role icons with a custom tooltip', () => { const view = render() const toolTag = view.container.querySelector('[data-role-kind="tool"]') From ad6858b6d319caf8389e7c691f41c6ca9dbb963d Mon Sep 17 00:00:00 2001 From: _Kerman Date: Mon, 3 Aug 2026 15:02:05 +0800 Subject: [PATCH 2/6] fix(ui-trajectory): limit role tooltips to compact icons --- .../src/client/TrajectoryTable.tsx | 48 +++++++++---------- .../client/ui-trajectory/tests/table.spec.tsx | 9 ++-- 2 files changed, 30 insertions(+), 27 deletions(-) diff --git a/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx b/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx index 13dfee2606..7f314b6a40 100644 --- a/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx +++ b/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx @@ -1961,36 +1961,36 @@ export function TrajectoryTable({ - - - - {KIND_LABEL[record.cell.kind]} - + + + {KIND_LABEL[record.cell.kind]} - + )} diff --git a/packages/client/ui-trajectory/tests/table.spec.tsx b/packages/client/ui-trajectory/tests/table.spec.tsx index aaea399a83..794fd8ca09 100644 --- a/packages/client/ui-trajectory/tests/table.spec.tsx +++ b/packages/client/ui-trajectory/tests/table.spec.tsx @@ -263,19 +263,22 @@ describe('TrajectoryTable', () => { 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() const toolTag = view.container.querySelector('[data-role-kind="tool"]') + const toolIcon = toolTag?.querySelector('[data-role-icon="wrench"]') expect(toolTag).not.toBeNull() expect(toolTag?.getAttribute('title')).toBeNull() - expect(toolTag?.querySelector('[data-role-icon="wrench"]')).toBeTruthy() + expect(toolIcon).toBeTruthy() fireEvent.mouseEnter(toolTag as HTMLElement) + expect(screen.queryByRole('tooltip')).toBeNull() + fireEvent.mouseEnter(toolIcon as HTMLElement) const tooltip = screen.getByRole('tooltip') expect(tooltip.textContent).toBe('TOOL') expect(tooltip.getAttribute('data-side')).toBe('right') - fireEvent.mouseLeave(toolTag as HTMLElement) + fireEvent.mouseLeave(toolIcon as HTMLElement) expect(screen.queryByRole('tooltip')).toBeNull() }) From 0e05bb81a31ddfed80da7fe52737aac598e4e446 Mon Sep 17 00:00:00 2001 From: _Kerman Date: Mon, 3 Aug 2026 15:31:36 +0800 Subject: [PATCH 3/6] fix(ui-trajectory): offset recovered request boundaries --- .../src/client/TrajectoryTable.tsx | 15 ++++++------- .../client/ui-trajectory/tests/table.spec.tsx | 22 ++++++++++++++++--- 2 files changed, 26 insertions(+), 11 deletions(-) diff --git a/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx b/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx index 7f314b6a40..89154626f0 100644 --- a/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx +++ b/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx @@ -459,17 +459,16 @@ function indexRequestNumbers( function indexRequestBoundaryRuns(records: readonly TableRecord[]): ReadonlyMap { const indexes = new Map() - let previous: TableRecord | undefined - let runIndex = 0 + let runLength = 0 for (const record of records) { - if (record.cell.requestOnly !== true) { - previous = record - runIndex = 0 + if (record.cell.requestOnly === true) { + indexes.set(record.cell.index, runLength++) continue } - runIndex = previous?.cell.requestOnly === true ? runIndex + 1 : 0 - indexes.set(record.cell.index, runIndex) - previous = record + if (runLength > 0 && record.groupStart && requestStep(record.group) !== undefined) { + indexes.set(record.cell.index, runLength) + } + runLength = 0 } return indexes } diff --git a/packages/client/ui-trajectory/tests/table.spec.tsx b/packages/client/ui-trajectory/tests/table.spec.tsx index 794fd8ca09..7ad4d79b6b 100644 --- a/packages/client/ui-trajectory/tests/table.spec.tsx +++ b/packages/client/ui-trajectory/tests/table.spec.tsx @@ -225,7 +225,7 @@ describe('TrajectoryTable', () => { it('marks failed requests and lays coincident request markers left to right', () => { const turns: readonly TrajectoryTurnModel[] = [ { - turn: null, + turn: 1, groups: [{ title: 'Step 1', cells: [{ @@ -239,14 +239,27 @@ describe('TrajectoryTable', () => { }], }, { - turn: null, + turn: 2, groups: [{ - title: 'Step 2', + title: 'Step 1', cells: [{ index: 2, kind: 'message', text: '', requestOnly: true, + isError: true, + timeSeconds: 0.1, + }], + }], + }, + { + turn: 3, + groups: [{ + title: 'Step 1', + cells: [{ + index: 3, + kind: 'message', + text: 'Recovered response', timeSeconds: 0.1, }], }], @@ -256,11 +269,14 @@ describe('TrajectoryTable', () => { const failed = screen.getByRole('button', { name: 'Request #1' }) const retry = screen.getByRole('button', { name: 'Request #2' }) + const recovered = screen.getByRole('button', { name: 'Request #3' }) expect(failed.getAttribute('data-request-status')).toBe('error') expect(failed.getAttribute('data-request-run-index')).toBe('0') expect(failed.style.getPropertyValue('--request-boundary-offset')).toBe('0px') expect(retry.getAttribute('data-request-run-index')).toBe('1') expect(retry.style.getPropertyValue('--request-boundary-offset')).toBe('8px') + expect(recovered.getAttribute('data-request-run-index')).toBe('2') + expect(recovered.style.getPropertyValue('--request-boundary-offset')).toBe('16px') }) it('shows the custom role tooltip only from the responsive icon', () => { From c2b0cc7b51fded129b3d8033c561a629c6aaf83b Mon Sep 17 00:00:00 2001 From: _Kerman Date: Mon, 3 Aug 2026 16:19:41 +0800 Subject: [PATCH 4/6] fix(ui-trajectory): clarify collapsed thinking controls --- .../src/client/TrajectoryTable.module.css | 10 ++++++++++ .../ui-trajectory/src/client/TrajectoryTable.tsx | 3 ++- packages/client/ui-trajectory/tests/table.spec.tsx | 5 ++++- 3 files changed, 16 insertions(+), 2 deletions(-) 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) }) From 9c261516ce3f8cddf8c4f66fdad8601c980f8cb8 Mon Sep 17 00:00:00 2001 From: _Kerman Date: Mon, 3 Aug 2026 16:22:03 +0800 Subject: [PATCH 5/6] fix(ui-trajectory): preserve thinking label --- packages/client/ui-trajectory/src/client/TrajectoryTable.tsx | 2 +- packages/client/ui-trajectory/tests/table.spec.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx b/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx index 491462d7b5..1296ea24d3 100644 --- a/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx +++ b/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx @@ -1232,7 +1232,7 @@ function MarkdownRecordContent({ aria-expanded={thinkingExpanded} onClick={() => { onThinkingExpandedChange(!thinkingExpanded) }} > - {thinkingExpanded ? 'Hide thinking' : 'Show thinking'} + Thinking {thinkingExpanded && ( diff --git a/packages/client/ui-trajectory/tests/table.spec.tsx b/packages/client/ui-trajectory/tests/table.spec.tsx index 1f1eb7d3ca..a80a256634 100644 --- a/packages/client/ui-trajectory/tests/table.spec.tsx +++ b/packages/client/ui-trajectory/tests/table.spec.tsx @@ -101,12 +101,12 @@ describe('TrajectoryTable', () => { render() fireEvent.click(screen.getByRole('row', { name: /ASSISTANT/ })) - const toggle = screen.getByRole('button', { name: 'Show thinking' }) + const toggle = screen.getByRole('button', { name: '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(screen.getByRole('button', { name: 'Thinking' })).toBe(toggle) expect(toggle.getAttribute('aria-expanded')).toBe('true') expect(toggle.parentElement?.textContent?.length).toBeGreaterThan(thinking.length) }) From b5f9fcdea45855a0ad9b481f7867c852374053ca Mon Sep 17 00:00:00 2001 From: _Kerman Date: Mon, 3 Aug 2026 16:24:26 +0800 Subject: [PATCH 6/6] fix(ui-trajectory): clarify assistant request timing --- packages/client/ui-trajectory/src/client/TrajectoryTable.tsx | 2 +- packages/client/ui-trajectory/tests/table.spec.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx b/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx index 1296ea24d3..6f37c852c5 100644 --- a/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx +++ b/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx @@ -2528,7 +2528,7 @@ export function TrajectoryTable({ )} {selectedAssistantRequestTarget !== undefined && ( { selectRequest(selectedAssistantRequestTarget, 'timing') }} diff --git a/packages/client/ui-trajectory/tests/table.spec.tsx b/packages/client/ui-trajectory/tests/table.spec.tsx index a80a256634..b9f5e5d7b7 100644 --- a/packages/client/ui-trajectory/tests/table.spec.tsx +++ b/packages/client/ui-trajectory/tests/table.spec.tsx @@ -64,7 +64,7 @@ describe('TrajectoryTable', () => { it('shows assistant timing facts after keyboard selection', () => { render() fireEvent.keyDown(screen.getByRole('row', { name: /ASSISTANT/ }), { key: 'Enter' }) - fireEvent.click(screen.getByRole('button', { name: 'Timing' })) + fireEvent.click(screen.getByRole('button', { name: 'Request Timing' })) expect(screen.getByText('500 ms')).toBeTruthy() expect(screen.getByText('1.00 s')).toBeTruthy()