Function StepRow

apps/vis/web/src/components/analysis/TimelineTab.tsx:282–334

({ step, turnDurationMs }: { step: StepNode; turnDurationMs?: number })

}

function StepRow({ step, turnDurationMs }: { step: StepNode; turnDurationMs?: number }) {
  const widthPct = turnDurationMs && step.durationMs ? Math.max(2, (step.durationMs / turnDurationMs) * 100) : 0;
  return (
    <div className="border-l-2 pl-2" style={{ borderColor: step.isError ? 'var(--color-sev-error)' : 'var(--color-border)' }}>
      <div className="flex flex-wrap items-center gap-2 font-mono text-[11px]">
        <span className="text-fg-2">step {step.step}</span>
        {step.finishReason ? (
          <span className={step.isError ? 'text-[var(--color-sev-error)]' : 'text-fg-3'}>{step.finishReason}</span>
        ) : null}
        <span className="text-fg-3 tabular" title="step wall-clock duration">{formatDuration(step.durationMs)}</span>
        {step.llmFirstTokenLatencyMs !== undefined ? (
          <span
            className="text-fg-3 tabular"
            title={
              step.llmServerFirstTokenMs !== undefined && step.llmRequestBuildMs !== undefined
                ? `time to first token (api ${step.llmServerFirstTokenMs}ms + client ${step.llmRequestBuildMs}ms)`
                : 'time to first token'
            }
          >
            ttft {step.llmFirstTokenLatencyMs}ms
            {step.llmServerFirstTokenMs !== undefined && step.llmRequestBuildMs !== undefined
              ? ` (api ${step.llmServerFirstTokenMs} + client ${step.llmRequestBuildMs})`
              : ''}
          </span>
        ) : null}
        {step.llmServerDecodeMs !== undefined && step.llmClientConsumeMs !== undefined ? (
          <span
            className="text-fg-3 tabular"
            title="decode window split (server awaiting parts + client processing parts)"
          >
            decode {step.llmServerDecodeMs}+{step.llmClientConsumeMs}ms
          </span>
        ) : null}
        {step.contextTokens !== undefined ? (
          <span className="text-fg-3 tabular" title="context-window fill after step">ctx {formatTokens(step.contextTokens)}</span>
        ) : null}
        {step.content.thinkChars > 0 ? <span className="text-[var(--color-cat-meta)]" title="reasoning chars">💭 {step.content.thinkChars}</span> : null}
      </div>
      {widthPct > 0 ? (
        <div className="mt-0.5 h-1 w-full bg-surface-2">
          <div className="h-1" style={{ width: `${widthPct}%`, backgroundColor: step.isError ? 'var(--color-sev-error)' : 'var(--color-cat-conversation)' }} />
        </div>
      ) : null}
      {step.toolCalls.length > 0 ? (
        <div className="mt-1 flex flex-col gap-0.5">
          {step.toolCalls.map((tc) => (
            <ToolRow key={tc.toolCallId} tc={tc} stepDurationMs={step.durationMs} />
          ))}
        </div>
      ) : null}
    </div>
  );
}

function ToolRow({ tc, stepDurationMs }: { tc: ToolCallNode; stepDurationMs?: number }) {
  const widthPct = stepDurationMs && tc.durationMs ? Math.max(2, (tc.durationMs / stepDurationMs) * 100) : 0;