feat(llm-observability): open traces on the thread tab

The router's search goes stale once nuqs writes to the URL,
so span selection and links read the live URL instead.

frontend/src/pages/TraceDetailsV3/AIThreadMessage/CollapsibleBlock.tsx

@@ -22,7 +22,7 @@ function CollapsibleBlock({
 	children,
 }: CollapsibleBlockProps): JSX.Element {
 	// Toggling must not count as a click on the message card; the body still does.
-	const stopHeaderClick = (event: MouseEvent): void => {
+	const stopToggleFromSelectingCard = (event: MouseEvent): void => {
 		if ((event.target as HTMLElement).closest('.ant-collapse-header')) {
 			event.stopPropagation();
 		}
@@ -30,7 +30,7 @@ function CollapsibleBlock({
 
 	return (
 		// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-		<div onClick={stopHeaderClick}>
+		<div onClick={stopToggleFromSelectingCard}>
 			<Collapse
 				ghost
 				className={cx(styles.collapsible, isBoxed && styles.boxed)}

frontend/src/pages/TraceDetailsV3/AIThreadMessage/JsonBlock.tsx

@@ -25,7 +25,7 @@ function JsonBlock({ data }: JsonBlockProps): JSX.Element {
 	const isLong = treeHeight > COLLAPSED_MAX_HEIGHT;
 	const isClamped = isLong && !isExpanded;
 
-	const stopToggleClick = (event: MouseEvent): void => {
+	const stopTreeToggleFromSelectingCard = (event: MouseEvent): void => {
 		if ((event.target as HTMLElement).closest(TREE_TOGGLES)) {
 			event.stopPropagation();
 		}
@@ -42,7 +42,7 @@ function JsonBlock({ data }: JsonBlockProps): JSX.Element {
 			<div
 				className={cx(styles.json, isClamped && styles.jsonCollapsed)}
 				style={isClamped ? { maxHeight: COLLAPSED_MAX_HEIGHT } : undefined}
-				onClick={stopToggleClick}
+				onClick={stopTreeToggleFromSelectingCard}
 				data-testid="ai-json-block"
 			>
 				<span className={styles.jsonCopy}>

frontend/src/pages/TraceDetailsV3/AIThreadMessage/RoleLabel.tsx

@@ -6,7 +6,6 @@ interface RoleLabelProps {
 	label: string;
 }
 
-/** Message role in the design's Paragraph/Base/400 style. */
 function RoleLabel({ label }: RoleLabelProps): JSX.Element {
 	return (
 		<Typography.Text size="base" weight="normal" className={styles.roleLabel}>

frontend/src/pages/TraceDetailsV3/AIThreadMessage/types.ts

@@ -34,6 +34,7 @@ export type MessagePart =
 	| LoosePart<AiobservabilitytypesBlobPartDTO>
 	| LoosePart<AiobservabilitytypesFilePartDTO>
 	| LoosePart<AiobservabilitytypesUriPartDTO>
+	// The API's generic part is an untyped index signature, which defeats narrowing on `type`.
 	| { type: 'generic'; content?: unknown };
 
 export type MessagePartType = MessagePart['type'];

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanAIMessages/SpanAIMessages.tsx

@@ -19,7 +19,7 @@ function SpanAIMessages({ span }: SpanAIMessagesProps): JSX.Element | null {
 	const data = useMemo(() => getSpanMessages(span), [span]);
 
 	const rootRef = useRef<HTMLDivElement>(null);
-	const toolCallKeys = useMemo(() => buildToolCallIndex([span]), [span]);
+	const toolCallKeys = useMemo(() => buildToolCallIndex(span), [span]);
 	const { canLinkToToolCall, onToolLinkClick } = useToolCallLinks(
 		rootRef,
 		toolCallKeys,

frontend/src/pages/TraceDetailsV3/TraceDetailsThread/ThreadSpanCard.tsx

@@ -23,7 +23,7 @@ function ThreadSpanCard({
 }: ThreadSpanCardProps): JSX.Element {
 	const cardRef = useRef<HTMLDivElement>(null);
 	// A result links only to a call in its own span.
-	const toolCallKeys = useMemo(() => buildToolCallIndex([span]), [span]);
+	const toolCallKeys = useMemo(() => buildToolCallIndex(span), [span]);
 	const { canLinkToToolCall, onToolLinkClick } = useToolCallLinks(
 		cardRef,
 		toolCallKeys,

frontend/src/pages/TraceDetailsV3/TraceDetailsThread/utils.ts

@@ -17,13 +17,11 @@ export function isNotFoundError(error: unknown): boolean {
 	return isAxiosError(error) && error.response?.status === 404;
 }
 
-export function buildToolCallIndex(spans: ThreadSpan[]): Set<string> {
-	return new Set(
-		spans.flatMap((span) => [
-			...collectToolCallKeys(span.formattedInput ?? []),
-			...collectToolCallKeys(span.formattedOutput ?? []),
-		]),
-	);
+export function buildToolCallIndex(span: ThreadSpan): Set<string> {
+	return new Set([
+		...collectToolCallKeys(span.formattedInput ?? []),
+		...collectToolCallKeys(span.formattedOutput ?? []),
+	]);
 }
 
 export function getInterestedSpanStatus(