From 98a4cc6569fc66c8d56e94175594102963235447 Mon Sep 17 00:00:00 2001
From: imccyu <276526105+imccyu@users.noreply.github.com>
Date: Tue, 11 Aug 2026 00:04:51 +0800
Subject: [PATCH] style(ui-trajectory): align  presentation render tree

---
 .../src/client/TrajectoryTable.tsx            | 432 +++++++++---------
 .../client/ui-trajectory/src/client/layout.ts |   4 +-
 .../src/client/trajectory-search-index.ts     |  14 +-
 3 files changed, 225 insertions(+), 225 deletions(-)

diff --git a/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx b/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx
index 67ec1cd2d6..a1db84f50c 100644
--- a/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx
+++ b/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx
@@ -2214,241 +2214,241 @@ export function TrajectoryTable({
                 cell={record.cell}
               >
                 {({ displayText, listDisplayText, resultText, toolCallOnly, toolCallText }) => {
-              const isCollapsedSummary = record.collapsedSummary !== undefined
-              const isRequestOnly = record.cell.requestOnly === true
-              const isInitialSystem = record.cell.kind === 'system'
+                  const isCollapsedSummary = record.collapsedSummary !== undefined
+                  const isRequestOnly = record.cell.requestOnly === true
+                  const isInitialSystem = record.cell.kind === 'system'
                 && record.cell.index === allRecords[0]?.cell.index
-              const request = record.groupStart
+                  const request = record.groupStart
                 && !isCollapsedSummary
                 && (record.turn === null || !collapsedTurns.has(record.turn))
-                ? requestNumbers.get(requestKey(record.turn, record.group))
-                : undefined
-              const requestInfo = request === undefined
-                ? undefined
-                : sessionRequestNumbers?.find(candidate => candidate.number === request)
-              const requestStatus = requestInfo?.status
+                    ? requestNumbers.get(requestKey(record.turn, record.group))
+                    : undefined
+                  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' : ''}`
-              const requestSelected = request !== 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' : ''}`
+                  const requestSelected = request !== undefined
                 && selectedRequest?.turn === record.turn
                 && selectedRequest.group === record.group
-              const sectionActive = record.turn === null
-                ? activeSection === record.section
-                : activeTurn === record.turn
-              return (
-                <tr
-                  tabIndex={isRequestOnly ? -1 : 0}
-                  aria-rowindex={position + 1}
-                  aria-label={isCollapsedSummary
-                    ? `Collapsed ${record.collapsedSummaryKind} summary, ${record.collapsedSummary}`
-                    : isRequestOnly
-                      ? `Request ${request ?? ''}, compaction`
-                      : `${request === undefined ? '' : `Request ${request}, `}${KIND_LABEL[record.cell.kind]}, ${listDisplayText || 'no content'}`}
-                  aria-selected={!isCollapsedSummary && !isRequestOnly && selectedIndex === record.cell.index}
-                  data-kind={record.cell.kind}
-                  data-trajectory-row-key={trajectoryVirtualRecordKey(record)}
-                  data-virtual-position={virtualizationEnabled ? position : undefined}
-                  data-record-index={!isCollapsedSummary && !isRequestOnly
-                    ? record.cell.index
-                    : undefined}
-                  data-request-only={isRequestOnly || undefined}
-                  data-terminal-request-boundary={terminalRequestBoundary || undefined}
-                  data-group-start={record.groupStart || undefined}
-                  data-turn-start={record.turnStart || undefined}
-                  data-error={record.cell.isError || undefined}
-                  data-running={stateOf(record) === 'running' || undefined}
-                  data-turn-end={record.turnEnd || undefined}
-                  data-collapsed-summary={record.collapsedSummaryKind}
-                  data-selected={!isCollapsedSummary && selectedIndex === record.cell.index || undefined}
-                  data-timeline-focus={isCollapsedSummary || timelineFocusIndexes === null
-                    ? undefined
-                    : timelineFocusIndexes.has(record.cell.index) ? 'inside' : 'outside'}
-                  onClick={isRequestOnly
-                    ? undefined
-                    : isCollapsedSummary
-                      ? () => {
-                        if (record.collapsedSummaryKind === 'turn' && record.turn !== null) {
+                  const sectionActive = record.turn === null
+                    ? activeSection === record.section
+                    : activeTurn === record.turn
+                  return (
+                    <tr
+                      tabIndex={isRequestOnly ? -1 : 0}
+                      aria-rowindex={position + 1}
+                      aria-label={isCollapsedSummary
+                        ? `Collapsed ${record.collapsedSummaryKind} summary, ${record.collapsedSummary}`
+                        : isRequestOnly
+                          ? `Request ${request ?? ''}, compaction`
+                          : `${request === undefined ? '' : `Request ${request}, `}${KIND_LABEL[record.cell.kind]}, ${listDisplayText || 'no content'}`}
+                      aria-selected={!isCollapsedSummary && !isRequestOnly && selectedIndex === record.cell.index}
+                      data-kind={record.cell.kind}
+                      data-trajectory-row-key={trajectoryVirtualRecordKey(record)}
+                      data-virtual-position={virtualizationEnabled ? position : undefined}
+                      data-record-index={!isCollapsedSummary && !isRequestOnly
+                        ? record.cell.index
+                        : undefined}
+                      data-request-only={isRequestOnly || undefined}
+                      data-terminal-request-boundary={terminalRequestBoundary || undefined}
+                      data-group-start={record.groupStart || undefined}
+                      data-turn-start={record.turnStart || undefined}
+                      data-error={record.cell.isError || undefined}
+                      data-running={stateOf(record) === 'running' || undefined}
+                      data-turn-end={record.turnEnd || undefined}
+                      data-collapsed-summary={record.collapsedSummaryKind}
+                      data-selected={!isCollapsedSummary && selectedIndex === record.cell.index || undefined}
+                      data-timeline-focus={isCollapsedSummary || timelineFocusIndexes === null
+                        ? undefined
+                        : timelineFocusIndexes.has(record.cell.index) ? 'inside' : 'outside'}
+                      onClick={isRequestOnly
+                        ? undefined
+                        : isCollapsedSummary
+                          ? () => {
+                            if (record.collapsedSummaryKind === 'turn' && record.turn !== null) {
+                              onToggleTurn(record.turn)
+                            } else onToggleAssistant(trajectoryRecordId(record.cell))
+                          }
+                          : () => { selectRecord(record.cell.index) }}
+                      onDoubleClick={(event) => {
+                        if (isCollapsedSummary || isRequestOnly) return
+                        if (record.turn !== null && collapsedTurns.has(record.turn)) {
+                          event.preventDefault()
                           onToggleTurn(record.turn)
-                        } else onToggleAssistant(trajectoryRecordId(record.cell))
-                      }
-                      : () => { selectRecord(record.cell.index) }}
-                  onDoubleClick={(event) => {
-                    if (isCollapsedSummary || isRequestOnly) return
-                    if (record.turn !== null && collapsedTurns.has(record.turn)) {
-                      event.preventDefault()
-                      onToggleTurn(record.turn)
-                      return
-                    }
-                    if (
-                      record.cell.kind === 'message'
+                          return
+                        }
+                        if (
+                          record.cell.kind === 'message'
                       && assistantToolCalls(allRecords, record.cell.index).length > 0
-                    ) {
-                      event.preventDefault()
-                      onToggleAssistant(trajectoryRecordId(record.cell))
-                      return
-                    }
-                    if (!record.turnStart) return
-                    if (record.turn === null) return
-                    if (allRecords.filter(candidate =>
-                      candidate.turn === record.turn
+                        ) {
+                          event.preventDefault()
+                          onToggleAssistant(trajectoryRecordId(record.cell))
+                          return
+                        }
+                        if (!record.turnStart) return
+                        if (record.turn === null) return
+                        if (allRecords.filter(candidate =>
+                          candidate.turn === record.turn
                       && candidate.cell.requestOnly !== true
                       && candidate.cell.kind !== 'system').length <= 1) return
-                    event.preventDefault()
-                    onToggleTurn(record.turn)
-                  }}
-                  onKeyDown={(event) => {
-                    if (isRequestOnly) return
-                    if (event.key !== 'Enter' && event.key !== ' ') return
-                    event.preventDefault()
-                    if (isCollapsedSummary) {
-                      if (record.collapsedSummaryKind === 'turn' && record.turn !== null) {
+                        event.preventDefault()
                         onToggleTurn(record.turn)
-                      } else onToggleAssistant(trajectoryRecordId(record.cell))
-                      return
-                    }
-                    selectRecord(record.cell.index)
-                  }}
-                >
-                  <td className={css.event}>
-                    {request !== undefined && (
-                      <button
-                        type="button"
-                        className={requestSelected
-                          ? `${css.requestBoundaryControl} ${css.requestBoundaryControlActive}`
-                          : css.requestBoundaryControl}
-                        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({
-                            turn: record.turn,
-                            group: record.group,
-                            ...(requestInfo?.seq === undefined ? {} : { seq: requestInfo.seq }),
-                          })
-                        }}
-                        onDoubleClick={(event) => { event.stopPropagation() }}
-                      />
-                    )}
-                    {record.turn !== null
+                      }}
+                      onKeyDown={(event) => {
+                        if (isRequestOnly) return
+                        if (event.key !== 'Enter' && event.key !== ' ') return
+                        event.preventDefault()
+                        if (isCollapsedSummary) {
+                          if (record.collapsedSummaryKind === 'turn' && record.turn !== null) {
+                            onToggleTurn(record.turn)
+                          } else onToggleAssistant(trajectoryRecordId(record.cell))
+                          return
+                        }
+                        selectRecord(record.cell.index)
+                      }}
+                    >
+                      <td className={css.event}>
+                        {request !== undefined && (
+                          <button
+                            type="button"
+                            className={requestSelected
+                              ? `${css.requestBoundaryControl} ${css.requestBoundaryControlActive}`
+                              : css.requestBoundaryControl}
+                            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({
+                                turn: record.turn,
+                                group: record.group,
+                                ...(requestInfo?.seq === undefined ? {} : { seq: requestInfo.seq }),
+                              })
+                            }}
+                            onDoubleClick={(event) => { event.stopPropagation() }}
+                          />
+                        )}
+                        {record.turn !== null
                     && activeTurn === record.turn
                     && !isInitialSystem && (
-                      <span className={css.turnRail} aria-hidden="true" />
-                    )}
-                    {!isCollapsedSummary && selectedIndex === record.cell.index && (
-                      <span className={css.selectionRail} aria-hidden="true" />
-                    )}
-                    {!isCollapsedSummary
+                          <span className={css.turnRail} aria-hidden="true" />
+                        )}
+                        {!isCollapsedSummary && selectedIndex === record.cell.index && (
+                          <span className={css.selectionRail} aria-hidden="true" />
+                        )}
+                        {!isCollapsedSummary
                     && !isRequestOnly
                     && record.turnStart && (
-                      <span
-                        className={sectionActive
-                          ? `${css.turnLabel} ${css.turnLabelActive}`
-                          : css.turnLabel}
-                        aria-label={sectionLabel(record.turn)}
-                      >
-                        {record.turn === null
-                          ? sectionLabel(record.turn)
-                          : (
-                            <>
-                              <span className={css.turnLabelFull} aria-hidden="true">
-                                {sectionLabel(record.turn)}
-                              </span>
-                              <span className={css.turnLabelCompact} aria-hidden="true">
-                                #{record.turn}
-                              </span>
-                            </>
-                          )}
-                      </span>
-                    )}
-                    <div className={css.eventInner}>
-                      {!isCollapsedSummary && !isRequestOnly && (
-                        <span
-                          className={css.kindSlot}
-                        >
                           <span
-                            className={`${css.kindTag} ${
-                              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}
+                            className={sectionActive
+                              ? `${css.turnLabel} ${css.turnLabelActive}`
+                              : css.turnLabel}
+                            aria-label={sectionLabel(record.turn)}
                           >
-                            <Tooltip
-                              label={KIND_LABEL[record.cell.kind]}
-                              side="right"
-                            >
-                              <span className={css.kindTagIcon} aria-hidden="true">
-                                {KIND_ICON[record.cell.kind]}
-                              </span>
-                            </Tooltip>
-                            <span className={css.kindTagLabel}>
-                              {KIND_LABEL[record.cell.kind]}
-                            </span>
-                          </span>
-                        </span>
-                      )}
-                    </div>
-                  </td>
-                  <td className={css.content}>
-                    {isRequestOnly
-                      ? null
-                      : record.collapsedSummary !== undefined
-                        ? (
-                          <span className={css.collapsedTurnContent} title={record.collapsedSummary}>
-                            <span className={css.collapsedTurnEllipsis}>…</span>
-                            <span className={css.collapsedTurnText}>{record.collapsedSummary}</span>
-                          </span>
-                        )
-                        : (
-                          <span
-                            className={resultText === undefined ? css.contentText : css.resultPreview}
-                            title={resultText === undefined
-                              ? listDisplayText
-                              : `${listDisplayText} → ${resultText}`}
-                          >
-                            <span className={resultText === undefined ? undefined : css.resultRequest}>
-                              <RecordListText
-                                displayText={displayText}
-                                toolCallOnly={toolCallOnly}
-                                toolCallText={toolCallText}
-                              />
-                            </span>
-                            {resultText !== undefined && (
-                              <span className={record.cell.isError ? `${css.inlineResult} ${css.error}` : css.inlineResult}>
-                                <span className={css.arrow}>→</span>
-                                <span className={resultText === 'No output'
-                                  ? `${css.inlineResultText} ${css.noOutputText}`
-                                  : css.inlineResultText}
-                                >
-                                  {resultText}
-                                </span>
-                              </span>
-                            )}
+                            {record.turn === null
+                              ? sectionLabel(record.turn)
+                              : (
+                                <>
+                                  <span className={css.turnLabelFull} aria-hidden="true">
+                                    {sectionLabel(record.turn)}
+                                  </span>
+                                  <span className={css.turnLabelCompact} aria-hidden="true">
+                                    #{record.turn}
+                                  </span>
+                                </>
+                              )}
                           </span>
                         )}
-                  </td>
-                </tr>
-              )
+                        <div className={css.eventInner}>
+                          {!isCollapsedSummary && !isRequestOnly && (
+                            <span
+                              className={css.kindSlot}
+                            >
+                              <span
+                                className={`${css.kindTag} ${
+                                  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}
+                              >
+                                <Tooltip
+                                  label={KIND_LABEL[record.cell.kind]}
+                                  side="right"
+                                >
+                                  <span className={css.kindTagIcon} aria-hidden="true">
+                                    {KIND_ICON[record.cell.kind]}
+                                  </span>
+                                </Tooltip>
+                                <span className={css.kindTagLabel}>
+                                  {KIND_LABEL[record.cell.kind]}
+                                </span>
+                              </span>
+                            </span>
+                          )}
+                        </div>
+                      </td>
+                      <td className={css.content}>
+                        {isRequestOnly
+                          ? null
+                          : record.collapsedSummary !== undefined
+                            ? (
+                              <span className={css.collapsedTurnContent} title={record.collapsedSummary}>
+                                <span className={css.collapsedTurnEllipsis}>…</span>
+                                <span className={css.collapsedTurnText}>{record.collapsedSummary}</span>
+                              </span>
+                            )
+                            : (
+                              <span
+                                className={resultText === undefined ? css.contentText : css.resultPreview}
+                                title={resultText === undefined
+                                  ? listDisplayText
+                                  : `${listDisplayText} → ${resultText}`}
+                              >
+                                <span className={resultText === undefined ? undefined : css.resultRequest}>
+                                  <RecordListText
+                                    displayText={displayText}
+                                    toolCallOnly={toolCallOnly}
+                                    toolCallText={toolCallText}
+                                  />
+                                </span>
+                                {resultText !== undefined && (
+                                  <span className={record.cell.isError ? `${css.inlineResult} ${css.error}` : css.inlineResult}>
+                                    <span className={css.arrow}>→</span>
+                                    <span className={resultText === 'No output'
+                                      ? `${css.inlineResultText} ${css.noOutputText}`
+                                      : css.inlineResultText}
+                                    >
+                                      {resultText}
+                                    </span>
+                                  </span>
+                                )}
+                              </span>
+                            )}
+                      </td>
+                    </tr>
+                  )
                 }}
               </RecordPresentation>
             ))}
diff --git a/packages/client/ui-trajectory/src/client/layout.ts b/packages/client/ui-trajectory/src/client/layout.ts
index 3a118aadfb..6a24967ac2 100644
--- a/packages/client/ui-trajectory/src/client/layout.ts
+++ b/packages/client/ui-trajectory/src/client/layout.ts
@@ -943,8 +943,8 @@ function expandSubCalls(
         callId: sub.callId,
         ...(settled
           ? (sub.call !== null
-              ? summarizeCall(sub.call.name, sub.call.argsRaw)
-              : resultAsText(resultPreview))
+            ? summarizeCall(sub.call.name, sub.call.argsRaw)
+            : resultAsText(resultPreview))
           : summarizeCall(sub.name, sub.argsRaw)),
         ...(settled
           ? (sub.call !== null ? { inputDetail: sub.call.argsRaw } : {})
diff --git a/packages/client/ui-trajectory/src/client/trajectory-search-index.ts b/packages/client/ui-trajectory/src/client/trajectory-search-index.ts
index 889fbff7e6..93dddb6856 100644
--- a/packages/client/ui-trajectory/src/client/trajectory-search-index.ts
+++ b/packages/client/ui-trajectory/src/client/trajectory-search-index.ts
@@ -97,13 +97,13 @@ export class TrajectorySearchIndex {
             const entry = previous !== undefined && sameSources(previous.sources, sources)
               ? previous
               : {
-                  sources,
-                  text: [
-                    ...sources,
-                    markdownPreview(cell),
-                    resultPreview(cell),
-                  ].join('\n').toLocaleLowerCase(),
-                }
+                sources,
+                text: [
+                  ...sources,
+                  markdownPreview(cell),
+                  resultPreview(cell),
+                ].join('\n').toLocaleLowerCase(),
+              }
             this.entries.set(id, entry)
             seen.add(id)
           }