feat(ui): refine trajectory inspection details
This commit is contained in:
_Kerman
@@ -52,13 +52,29 @@
|
||||
}
|
||||
|
||||
.tagContext {
|
||||
color: var(--dsw-alias-label-secondary);
|
||||
background: var(--dsw-alias-bg-layer-3);
|
||||
color: color-mix(
|
||||
in srgb,
|
||||
var(--dsw-alias-state-success-primary) 68%,
|
||||
var(--dsw-alias-label-secondary)
|
||||
);
|
||||
background: var(--dsw-alias-state-success-tertiary);
|
||||
}
|
||||
|
||||
.tagMessage {
|
||||
color: var(--dsw-alias-brand-primary-new-colorprimary-new-color);
|
||||
background: var(--dsw-specific-bubble);
|
||||
color: color-mix(
|
||||
in srgb,
|
||||
var(--dsw-alias-brand-primary-new-colorprimary-new-color) 60%,
|
||||
var(--dsw-alias-state-error-secondary)
|
||||
);
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
color-mix(
|
||||
in srgb,
|
||||
var(--dsw-alias-brand-primary-new-colorprimary-new-color) 55%,
|
||||
var(--dsw-alias-state-error-secondary)
|
||||
) 15%,
|
||||
var(--dsw-alias-bg-layer-1)
|
||||
);
|
||||
}
|
||||
|
||||
.tagTool {
|
||||
@@ -69,8 +85,16 @@
|
||||
/* run_code sub-dispatch cells: the business tint plus an indent so the
|
||||
nesting under the parent Tool cell reads at a glance. */
|
||||
.tagSubtool {
|
||||
color: var(--dsw-alias-state-business-primary);
|
||||
background: var(--dsw-alias-state-business-tertiary);
|
||||
color: color-mix(
|
||||
in srgb,
|
||||
var(--dsw-alias-state-warn-label) 62%,
|
||||
var(--dsw-alias-label-tertiary)
|
||||
);
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--dsw-alias-state-warn-tertiary) 58%,
|
||||
var(--dsw-alias-bg-layer-1)
|
||||
);
|
||||
}
|
||||
|
||||
.root[data-kind='subtool'] {
|
||||
|
||||
@@ -79,7 +79,7 @@
|
||||
transition: background-color 120ms var(--ds-ease-in-out);
|
||||
}
|
||||
|
||||
.table tbody tr:not([data-collapsed-summary]):hover {
|
||||
.table tbody tr:not([data-collapsed-summary]):not([data-selected='true']):hover {
|
||||
background: var(--dsw-alias-interactive-bg-hover);
|
||||
}
|
||||
|
||||
@@ -230,28 +230,53 @@
|
||||
background: var(--dsw-alias-state-business-tertiary);
|
||||
}
|
||||
|
||||
.context {
|
||||
border-color: var(--dsw-alias-border-l2);
|
||||
color: var(--dsw-alias-label-secondary);
|
||||
background: var(--dsw-alias-bg-layer-1);
|
||||
}
|
||||
|
||||
.message {
|
||||
border-color: var(--dsw-alias-border-l2);
|
||||
.systemNeutral {
|
||||
color: var(--dsw-alias-label-secondary);
|
||||
background: var(--dsw-alias-bg-module-platform);
|
||||
}
|
||||
|
||||
.tool {
|
||||
border-color: var(--dsw-alias-border-l2);
|
||||
color: var(--dsw-alias-label-primary);
|
||||
background: var(--dsw-alias-bg-layer-1);
|
||||
.contextGreen {
|
||||
color: color-mix(
|
||||
in srgb,
|
||||
var(--dsw-alias-state-success-primary) 68%,
|
||||
var(--dsw-alias-label-secondary)
|
||||
);
|
||||
background: var(--dsw-alias-state-success-tertiary);
|
||||
}
|
||||
|
||||
.subtool {
|
||||
border-color: var(--dsw-alias-border-l2);
|
||||
color: var(--dsw-alias-state-business-primary);
|
||||
background: transparent;
|
||||
.assistantVioletBright {
|
||||
color: color-mix(
|
||||
in srgb,
|
||||
var(--dsw-alias-brand-primary-new-colorprimary-new-color) 60%,
|
||||
var(--dsw-alias-state-error-secondary)
|
||||
);
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
color-mix(
|
||||
in srgb,
|
||||
var(--dsw-alias-brand-primary-new-colorprimary-new-color) 55%,
|
||||
var(--dsw-alias-state-error-secondary)
|
||||
) 15%,
|
||||
var(--dsw-alias-bg-layer-1)
|
||||
);
|
||||
}
|
||||
|
||||
.toolAmber {
|
||||
color: var(--dsw-alias-state-warn-label);
|
||||
background: var(--dsw-alias-state-warn-tertiary);
|
||||
}
|
||||
|
||||
.subtoolAmber {
|
||||
color: color-mix(
|
||||
in srgb,
|
||||
var(--dsw-alias-state-warn-label) 62%,
|
||||
var(--dsw-alias-label-tertiary)
|
||||
);
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--dsw-alias-state-warn-tertiary) 58%,
|
||||
var(--dsw-alias-bg-layer-1)
|
||||
);
|
||||
}
|
||||
|
||||
.contentText {
|
||||
@@ -326,6 +351,18 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.toolCallNameTypeface {
|
||||
color: var(--dsw-alias-label-primary);
|
||||
font: 400 13px/18px Menlo, Consolas, 'Liberation Mono', 'PingFang SC',
|
||||
'Microsoft YaHei';
|
||||
}
|
||||
|
||||
.toolCallPayload {
|
||||
margin-left: 7px;
|
||||
color: var(--dsw-alias-label-secondary);
|
||||
font: 400 12px/18px var(--ds-font-family-code);
|
||||
}
|
||||
|
||||
.table tbody tr[data-kind='tool'] .contentText,
|
||||
.table tbody tr[data-kind='subtool'] .contentText,
|
||||
.table tbody tr[data-kind='tool'] .resultPreview,
|
||||
@@ -475,7 +512,7 @@
|
||||
height: 34px;
|
||||
padding: 0 8px;
|
||||
overflow-x: auto;
|
||||
gap: 2px;
|
||||
gap: 1px;
|
||||
border-bottom: 1px solid var(--dsw-alias-border-l2);
|
||||
scrollbar-width: none;
|
||||
}
|
||||
@@ -534,27 +571,32 @@
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.overviewHierarchyLink {
|
||||
.overviewHierarchyNavLink {
|
||||
all: unset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--dsw-alias-label-primary);
|
||||
color: var(--dsw-alias-label-secondary);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
gap: 1px;
|
||||
opacity: 1;
|
||||
text-decoration-line: underline;
|
||||
text-decoration-color: currentColor;
|
||||
text-decoration-style: solid;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.overviewHierarchyLink:hover {
|
||||
.overviewHierarchyNavLink:hover {
|
||||
color: var(--dsw-alias-label-primary);
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
|
||||
.overviewHierarchyLink:focus-visible {
|
||||
.overviewHierarchyJumpIconTight {
|
||||
flex: none;
|
||||
color: var(--dsw-alias-label-caption);
|
||||
}
|
||||
|
||||
.overviewHierarchyNavLink:hover .overviewHierarchyJumpIconTight,
|
||||
.overviewHierarchyNavLink:focus-visible .overviewHierarchyJumpIconTight {
|
||||
color: var(--dsw-alias-label-primary);
|
||||
}
|
||||
|
||||
.overviewHierarchyNavLink:focus-visible {
|
||||
color: var(--dsw-alias-label-primary);
|
||||
outline: 1px solid var(--dsw-alias-state-business-primary);
|
||||
outline-offset: 2px;
|
||||
@@ -582,6 +624,16 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tokenEquation {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.tokenOperator {
|
||||
margin: 0 2px;
|
||||
color: var(--dsw-alias-label-caption);
|
||||
}
|
||||
|
||||
.overviewSections {
|
||||
border-top: 0;
|
||||
}
|
||||
@@ -651,8 +703,8 @@
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.overviewPreview .jsonPreview > :last-child,
|
||||
.overviewPreview .schemaTree > :last-child {
|
||||
.overviewPreview .jsonPreview > :first-child,
|
||||
.overviewPreview .schemaTree > :first-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -1022,6 +1074,91 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.systemPrompt {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.toolCatalog {
|
||||
min-height: 100%;
|
||||
padding: 8px 0 16px;
|
||||
}
|
||||
|
||||
.toolCatalogItem {
|
||||
border-bottom: 1px solid var(--dsw-alias-border-l1);
|
||||
}
|
||||
|
||||
.toolCatalogSummary {
|
||||
display: grid;
|
||||
grid-template-columns: 12px 12px max-content minmax(0, 1fr);
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
min-height: 30px;
|
||||
padding: 4px 12px;
|
||||
gap: 5px;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.toolCatalogSummary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toolCatalogSummary:hover {
|
||||
background: var(--dsw-alias-interactive-bg-hover);
|
||||
}
|
||||
|
||||
.toolCatalogSummary:focus-visible {
|
||||
background: var(--dsw-alias-interactive-bg-hover);
|
||||
outline: 1px solid var(--dsw-alias-state-business-primary);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.toolCatalogChevron,
|
||||
.toolCatalogIcon {
|
||||
color: var(--dsw-alias-label-caption);
|
||||
}
|
||||
|
||||
.toolCatalogChevron {
|
||||
transition: transform 100ms var(--ds-ease-in-out);
|
||||
}
|
||||
|
||||
.toolCatalogItem[open] .toolCatalogChevron {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.toolCatalogName {
|
||||
color: var(--dsw-alias-label-primary);
|
||||
font: 500 12px/18px var(--ds-font-family-code);
|
||||
}
|
||||
|
||||
.toolCatalogDescription {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: var(--dsw-alias-label-tertiary);
|
||||
font: var(--dsw-font-xs-13);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.toolCatalogDefinition {
|
||||
padding: 0 0 8px 29px;
|
||||
background: var(--dsw-alias-bg-base);
|
||||
}
|
||||
|
||||
.toolCatalogFullDescription {
|
||||
margin: 0;
|
||||
padding: 7px 14px 4px 0;
|
||||
color: var(--dsw-alias-label-secondary);
|
||||
font: var(--dsw-font-xs-13);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.toolCatalogTree {
|
||||
margin-left: -14px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.resultBlocks {
|
||||
display: flex;
|
||||
min-height: 100%;
|
||||
|
||||
@@ -5,6 +5,7 @@ import type { CSSProperties, ReactNode } from 'react'
|
||||
import {
|
||||
extractMarkdownPlainText, IconChevronRightOutline14, JsonTree, MarkdownText,
|
||||
} from '@deepseek-ai/dsh-client-ui-primitives'
|
||||
import type { ConversationPromptSnapshot } from '@deepseek-ai/dsh-client-runtime/client'
|
||||
import type {
|
||||
AssistantMetricDetail, TrajectoryCellKind, TrajectoryCellProps, TrajectorySourceBlock,
|
||||
} from './trajectory-record.ts'
|
||||
@@ -31,7 +32,16 @@ interface TableRecord {
|
||||
collapsedSummaryKind?: 'turn' | 'assistant'
|
||||
}
|
||||
|
||||
type DetailTab = 'overview' | 'rendered' | 'source' | 'input' | 'output' | 'schema' | 'timing'
|
||||
type DetailTab =
|
||||
| 'system-prompt'
|
||||
| 'tools'
|
||||
| 'overview'
|
||||
| 'rendered'
|
||||
| 'source'
|
||||
| 'input'
|
||||
| 'output'
|
||||
| 'schema'
|
||||
| 'timing'
|
||||
type RecordState = 'complete' | 'running' | 'error'
|
||||
|
||||
interface DetailTabItem {
|
||||
@@ -44,6 +54,11 @@ interface ParentRecords {
|
||||
tool?: TableRecord
|
||||
}
|
||||
|
||||
interface ToolCallTextParts {
|
||||
name: string
|
||||
args?: string
|
||||
}
|
||||
|
||||
interface DetailsResizeDrag {
|
||||
pointerId: number
|
||||
startX: number
|
||||
@@ -61,6 +76,11 @@ const TOOL_REQUEST_MIN_WIDTH = 180
|
||||
const TOOL_REQUEST_MAX_WIDTH = 480
|
||||
const DEFAULT_TOOL_REQUEST_SHARE = 0.36
|
||||
const DEFAULT_TOOL_REQUEST_OFFSET = 56
|
||||
const SYSTEM_PROMPT_INDEX = 0
|
||||
const SYSTEM_PROMPT_TABS: readonly DetailTabItem[] = [
|
||||
{ id: 'system-prompt', label: 'System Prompt' },
|
||||
{ id: 'tools', label: 'Tools' },
|
||||
]
|
||||
|
||||
type TrajectorySplitStyle = CSSProperties & {
|
||||
'--trajectory-tool-request-width': string
|
||||
@@ -156,6 +176,8 @@ function AssistantTimingPanel({ metrics }: { metrics: AssistantMetricDetail }) {
|
||||
|
||||
/** Props for the trajectory ledger. */
|
||||
export interface TrajectoryTableProps {
|
||||
/** Latest model request header in force for the selected context. */
|
||||
prompt?: ConversationPromptSnapshot
|
||||
/** Grouped records in display order. */
|
||||
turns: readonly TrajectoryTurnModel[]
|
||||
/** Turn ids whose rows after the first are folded into a summary. */
|
||||
@@ -326,9 +348,21 @@ function statusLabel(state: RecordState): string {
|
||||
return 'Completed'
|
||||
}
|
||||
|
||||
function tokenSummary(cell: TrajectoryCellProps): string {
|
||||
function tokenSummary(cell: TrajectoryCellProps): ReactNode {
|
||||
if (cell.kind !== 'message') return '—'
|
||||
return `${cell.input ?? '—'} / ${cell.output ?? '—'} / ${cell.think ?? '—'}`
|
||||
if (cell.output === undefined) return '—'
|
||||
if (cell.think === undefined) return String(cell.output)
|
||||
return (
|
||||
<span className={css.tokenEquation}>
|
||||
<span title="Total output tokens">{cell.output}</span>
|
||||
<span className={css.tokenOperator}>=</span>
|
||||
<span title="Non-reasoning output tokens">
|
||||
{Math.max(0, cell.output - cell.think)}
|
||||
</span>
|
||||
<span className={css.tokenOperator}>+</span>
|
||||
<span title="Reasoning tokens">{cell.think}</span>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
function isMarkdownRecord(record: TableRecord): boolean {
|
||||
@@ -409,6 +443,19 @@ function recordDisplayText(cell: TrajectoryCellProps): string {
|
||||
return plainText.replace(/\s+/g, ' ').trim()
|
||||
}
|
||||
|
||||
function toolCallTextParts(
|
||||
kind: TrajectoryCellKind,
|
||||
text: string,
|
||||
): ToolCallTextParts | undefined {
|
||||
if (kind !== 'tool' && kind !== 'subtool') return undefined
|
||||
const separator = text.indexOf(' · ')
|
||||
if (separator === -1) return { name: text }
|
||||
return {
|
||||
name: text.slice(0, separator),
|
||||
args: text.slice(separator + 3),
|
||||
}
|
||||
}
|
||||
|
||||
function isToolCallOnly(cell: TrajectoryCellProps): boolean {
|
||||
return cell.kind === 'message'
|
||||
&& !cell.outputDetail
|
||||
@@ -581,6 +628,55 @@ function AssistantToolCalls({
|
||||
)
|
||||
}
|
||||
|
||||
function ToolGlyph() {
|
||||
return (
|
||||
<svg
|
||||
className={css.toolCatalogIcon}
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.8"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function ToolCatalog({ tools }: { tools: ConversationPromptSnapshot['tools'] }) {
|
||||
if (tools.length === 0) return <p className={css.noPayload}>No tools in this request</p>
|
||||
return (
|
||||
<div className={css.toolCatalog}>
|
||||
{tools.map((tool, index) => (
|
||||
<details className={css.toolCatalogItem} key={`${tool.name}:${index}`}>
|
||||
<summary className={css.toolCatalogSummary}>
|
||||
<IconChevronRightOutline14 className={css.toolCatalogChevron} size={12} />
|
||||
<ToolGlyph />
|
||||
<span className={css.toolCatalogName}>{tool.name}</span>
|
||||
<span className={css.toolCatalogDescription}>{tool.description}</span>
|
||||
</summary>
|
||||
<div className={css.toolCatalogDefinition}>
|
||||
{tool.description !== '' && (
|
||||
<p className={css.toolCatalogFullDescription}>{tool.description}</p>
|
||||
)}
|
||||
<JsonTree
|
||||
data={tool.parameters}
|
||||
label={`${tool.name} parameters JSON`}
|
||||
className={css.toolCatalogTree}
|
||||
/>
|
||||
</div>
|
||||
</details>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ToolOutputBlocks({
|
||||
blocks,
|
||||
preview,
|
||||
@@ -879,6 +975,7 @@ function OverviewSection({
|
||||
* @returns The ledger and an optional local record inspector.
|
||||
*/
|
||||
export function TrajectoryTable({
|
||||
prompt,
|
||||
turns,
|
||||
collapsedTurns,
|
||||
onToggleTurn,
|
||||
@@ -895,9 +992,17 @@ export function TrajectoryTable({
|
||||
const allRecords = flattenRecords(turns)
|
||||
const turnRecords = collapseTurnRecords(allRecords, collapsedTurns)
|
||||
const records = collapseAssistantRecords(turnRecords, collapsedAssistants)
|
||||
const systemPromptPreview = prompt === undefined
|
||||
? 'Request header not recorded'
|
||||
: prompt.system === ''
|
||||
? 'No system prompt'
|
||||
: extractMarkdownPlainText(prompt.system).replace(/\s+/g, ' ').trim()
|
||||
const promptSelected = selectedIndex === SYSTEM_PROMPT_INDEX
|
||||
const selected = allRecords.find(record => record.cell.index === selectedIndex)
|
||||
const selectedState = selected === undefined ? undefined : stateOf(selected)
|
||||
const selectedTabs = selected === undefined ? [] : detailTabs(selected)
|
||||
const selectedTabs = promptSelected
|
||||
? SYSTEM_PROMPT_TABS
|
||||
: selected === undefined ? [] : detailTabs(selected)
|
||||
const selectedParents: ParentRecords = selected === undefined
|
||||
? {}
|
||||
: parentRecords(allRecords, selected)
|
||||
@@ -924,6 +1029,11 @@ export function TrajectoryTable({
|
||||
setActiveTab(recent ?? 'overview')
|
||||
}
|
||||
|
||||
const selectSystemPrompt = () => {
|
||||
setSelectedIndex(SYSTEM_PROMPT_INDEX)
|
||||
activateTab('system-prompt')
|
||||
}
|
||||
|
||||
const openRecordSummary = (target: TableRecord) => {
|
||||
const targetAt = allRecords.findIndex(record => record.cell.index === target.cell.index)
|
||||
if (collapsedTurns.has(target.turn)) onToggleTurn(target.turn)
|
||||
@@ -954,8 +1064,42 @@ export function TrajectoryTable({
|
||||
<col className={css.contentColumn} />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr
|
||||
tabIndex={0}
|
||||
aria-label="System prompt and tool catalog"
|
||||
aria-selected={promptSelected}
|
||||
data-kind="system"
|
||||
data-selected={promptSelected || undefined}
|
||||
onClick={selectSystemPrompt}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key !== 'Enter' && event.key !== ' ') return
|
||||
event.preventDefault()
|
||||
selectSystemPrompt()
|
||||
}}
|
||||
>
|
||||
<td className={css.event}>
|
||||
{promptSelected && <span className={css.selectionRail} aria-hidden="true" />}
|
||||
<div className={css.eventInner}>
|
||||
<span className={`${css.kindSlot} ${css.kindSlotLeft}`}>
|
||||
<span className={`${css.kindTag} ${css.systemNeutral}`}>SYSTEM</span>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className={css.content}>
|
||||
<span
|
||||
className={css.contentText}
|
||||
title={prompt?.system || systemPromptPreview}
|
||||
>
|
||||
{systemPromptPreview}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
{records.map((record) => {
|
||||
const displayText = recordDisplayText(record.cell)
|
||||
const toolCallText = toolCallTextParts(record.cell.kind, displayText)
|
||||
const listDisplayText = toolCallText === undefined
|
||||
? displayText
|
||||
: [toolCallText.name, toolCallText.args].filter(Boolean).join(' ')
|
||||
const isCollapsedSummary = record.collapsedSummary !== undefined
|
||||
return (
|
||||
<tr
|
||||
@@ -963,7 +1107,7 @@ export function TrajectoryTable({
|
||||
tabIndex={0}
|
||||
aria-label={isCollapsedSummary
|
||||
? `Collapsed ${record.collapsedSummaryKind} summary, ${record.collapsedSummary}`
|
||||
: `${KIND_LABEL[record.cell.kind]}, ${displayText || 'no content'}`}
|
||||
: `${KIND_LABEL[record.cell.kind]}, ${listDisplayText || 'no content'}`}
|
||||
aria-selected={!isCollapsedSummary && selectedIndex === record.cell.index}
|
||||
data-kind={record.cell.kind}
|
||||
data-group-start={record.groupStart || undefined}
|
||||
@@ -1028,7 +1172,18 @@ export function TrajectoryTable({
|
||||
: `${css.kindSlot} ${css.kindSlotRight}`
|
||||
}
|
||||
>
|
||||
<span className={`${css.kindTag} ${css[record.cell.kind]}`}>
|
||||
<span className={`${css.kindTag} ${
|
||||
record.cell.kind === 'context'
|
||||
? css.contextGreen
|
||||
: record.cell.kind === 'tool'
|
||||
? css.toolAmber
|
||||
: record.cell.kind === 'message'
|
||||
? css.assistantVioletBright
|
||||
: record.cell.kind === 'subtool'
|
||||
? css.subtoolAmber
|
||||
: css[record.cell.kind]
|
||||
}`}
|
||||
>
|
||||
{KIND_LABEL[record.cell.kind]}
|
||||
</span>
|
||||
{record.turnStart && record.cell.opensTurn && (
|
||||
@@ -1056,11 +1211,26 @@ export function TrajectoryTable({
|
||||
<span
|
||||
className={record.cell.result === undefined ? css.contentText : css.resultPreview}
|
||||
title={record.cell.result === undefined
|
||||
? displayText
|
||||
: `${displayText} → ${record.cell.result}`}
|
||||
? listDisplayText
|
||||
: `${listDisplayText} → ${record.cell.result}`}
|
||||
>
|
||||
<span className={record.cell.result === undefined ? undefined : css.resultRequest}>
|
||||
{isToolCallOnly(record.cell) ? null : displayText || '—'}
|
||||
{isToolCallOnly(record.cell)
|
||||
? null
|
||||
: toolCallText === undefined
|
||||
? listDisplayText || '—'
|
||||
: (
|
||||
<>
|
||||
<span className={css.toolCallNameTypeface}>
|
||||
{toolCallText.name || '—'}
|
||||
</span>
|
||||
{toolCallText.args !== undefined && (
|
||||
<span className={css.toolCallPayload}>
|
||||
{toolCallText.args}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
{record.cell.result !== undefined && (
|
||||
<span className={record.cell.isError ? `${css.inlineResult} ${css.error}` : css.inlineResult}>
|
||||
@@ -1077,7 +1247,7 @@ export function TrajectoryTable({
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{selected !== undefined && selectedState !== undefined && (
|
||||
{(promptSelected || (selected !== undefined && selectedState !== undefined)) && (
|
||||
<aside
|
||||
className={css.details}
|
||||
aria-label="Event details"
|
||||
@@ -1159,10 +1329,29 @@ export function TrajectoryTable({
|
||||
/>
|
||||
<div className={css.detailsHeader}>
|
||||
<div className={css.detailsTitle}>
|
||||
<span className={`${css.kindTag} ${css[selected.cell.kind]}`}>
|
||||
{KIND_LABEL[selected.cell.kind]}
|
||||
</span>
|
||||
<span className={css.detailsLocation}>{`Turn ${selected.turn} · ${selected.group}`}</span>
|
||||
{promptSelected
|
||||
? (
|
||||
<span className={`${css.kindTag} ${css.systemNeutral}`}>SYSTEM</span>
|
||||
)
|
||||
: selected !== undefined && (
|
||||
<>
|
||||
<span className={`${css.kindTag} ${
|
||||
selected.cell.kind === 'context'
|
||||
? css.contextGreen
|
||||
: selected.cell.kind === 'tool'
|
||||
? css.toolAmber
|
||||
: selected.cell.kind === 'message'
|
||||
? css.assistantVioletBright
|
||||
: selected.cell.kind === 'subtool'
|
||||
? css.subtoolAmber
|
||||
: css[selected.cell.kind]
|
||||
}`}
|
||||
>
|
||||
{KIND_LABEL[selected.cell.kind]}
|
||||
</span>
|
||||
<span className={css.detailsLocation}>{`Turn ${selected.turn} · ${selected.group}`}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
@@ -1195,7 +1384,23 @@ export function TrajectoryTable({
|
||||
role="tabpanel"
|
||||
aria-labelledby={`trajectory-detail-${activeTab}`}
|
||||
>
|
||||
{activeTab === 'overview' && (
|
||||
{promptSelected && activeTab === 'system-prompt' && (
|
||||
prompt === undefined
|
||||
? <p className={css.noPayload}>Request header not recorded</p>
|
||||
: prompt.system === ''
|
||||
? <p className={css.noPayload}>No system prompt in this request</p>
|
||||
: (
|
||||
<div className={`${css.markdownPayload} ${css.systemPrompt}`}>
|
||||
<MarkdownText text={prompt.system} />
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
{promptSelected && activeTab === 'tools' && (
|
||||
prompt === undefined
|
||||
? <p className={css.noPayload}>Request header not recorded</p>
|
||||
: <ToolCatalog tools={prompt.tools} />
|
||||
)}
|
||||
{!promptSelected && selected !== undefined && selectedState !== undefined && activeTab === 'overview' && (
|
||||
<>
|
||||
<dl className={css.overview}>
|
||||
{hasSelectedParents && (
|
||||
@@ -1205,19 +1410,27 @@ export function TrajectoryTable({
|
||||
{selectedParents.message !== undefined && (
|
||||
<button
|
||||
type="button"
|
||||
className={css.overviewHierarchyLink}
|
||||
className={css.overviewHierarchyNavLink}
|
||||
onClick={() => { openRecordSummary(selectedParents.message!) }}
|
||||
>
|
||||
Parent Message
|
||||
<span>Parent Message</span>
|
||||
<IconChevronRightOutline14
|
||||
className={css.overviewHierarchyJumpIconTight}
|
||||
size={11}
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
{selectedParents.tool !== undefined && (
|
||||
<button
|
||||
type="button"
|
||||
className={css.overviewHierarchyLink}
|
||||
className={css.overviewHierarchyNavLink}
|
||||
onClick={() => { openRecordSummary(selectedParents.tool!) }}
|
||||
>
|
||||
Parent Tool Call
|
||||
<span>Parent Tool Call</span>
|
||||
<IconChevronRightOutline14
|
||||
className={css.overviewHierarchyJumpIconTight}
|
||||
size={11}
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
</dd>
|
||||
@@ -1271,7 +1484,7 @@ export function TrajectoryTable({
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{activeTab === 'rendered' && (
|
||||
{!promptSelected && selected !== undefined && activeTab === 'rendered' && (
|
||||
<MarkdownRecordContent
|
||||
record={selected}
|
||||
rendered
|
||||
@@ -1280,7 +1493,7 @@ export function TrajectoryTable({
|
||||
onOpenCall={openCallSummary}
|
||||
/>
|
||||
)}
|
||||
{activeTab === 'source' && (
|
||||
{!promptSelected && selected !== undefined && activeTab === 'source' && (
|
||||
<MarkdownRecordContent
|
||||
record={selected}
|
||||
rendered={false}
|
||||
@@ -1289,16 +1502,16 @@ export function TrajectoryTable({
|
||||
onOpenCall={openCallSummary}
|
||||
/>
|
||||
)}
|
||||
{activeTab === 'input' && (
|
||||
{!promptSelected && selected !== undefined && activeTab === 'input' && (
|
||||
<RecordPayload record={selected} direction="input" />
|
||||
)}
|
||||
{activeTab === 'output' && (
|
||||
{!promptSelected && selected !== undefined && activeTab === 'output' && (
|
||||
<RecordPayload record={selected} direction="output" />
|
||||
)}
|
||||
{activeTab === 'schema' && (
|
||||
{!promptSelected && selected !== undefined && activeTab === 'schema' && (
|
||||
<RecordSchema record={selected} />
|
||||
)}
|
||||
{activeTab === 'timing' && (
|
||||
{!promptSelected && selected !== undefined && activeTab === 'timing' && (
|
||||
<RecordTiming record={selected} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -161,17 +161,15 @@ export function TrajectoryView({ useSession }: ConvViewProps) {
|
||||
/>
|
||||
)}
|
||||
<div className={css.ledger}>
|
||||
{turns.length === 0 && <p className={css.empty}>No trajectory events</p>}
|
||||
{turns.length > 0 && (
|
||||
<TrajectoryTable
|
||||
key={selectedContext.id}
|
||||
turns={turns}
|
||||
collapsedTurns={collapsedTurns}
|
||||
onToggleTurn={toggleTurn}
|
||||
collapsedAssistants={collapsedAssistants}
|
||||
onToggleAssistant={toggleAssistant}
|
||||
/>
|
||||
)}
|
||||
<TrajectoryTable
|
||||
key={selectedContext.id}
|
||||
{...selectedContext.prompt === undefined ? {} : { prompt: selectedContext.prompt }}
|
||||
turns={turns}
|
||||
collapsedTurns={collapsedTurns}
|
||||
onToggleTurn={toggleTurn}
|
||||
collapsedAssistants={collapsedAssistants}
|
||||
onToggleAssistant={toggleAssistant}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user