feat(ai-conversations): use conversations endpoint

[obostjancic]

closes TET-1720: Call new conversation endpoint

• calls new conversation details endpoint instead of fetching multiple traces
• moves AI span list behind a tab
• aligns messages to resemble a chat

[linear]

TET-1720 Call new conversation endpoint

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}

[ArthurKnaus]

I got a few problems with this function:

1. Too complex and costly for what it does as it has to iterate the segments on each call of getCompressedTimestamp. Instead we could just loop over it once and store the new timestamp for each span in a map.
2. It ignores nested spans, simply summing up all durations and inflating the total time span. This results in the last span not ending the timeline (see screenshot).
3. A few more comments on such a complex logic would help me figure out what it does 😅

Something like this could better suit your needs:

function getCompressedTimeBounds(nodes: AITraceSpanNode[]): CompressedTimeBounds {
  const emptyResult: CompressedTimeBounds = {
    startTime: 0,
    endTime: 0,
    duration: 0,
    compressedStartByNodeId: new Map(),
  };

  if (nodes.length === 0) {
    return emptyResult;
  }

  const sortedNodes = [...nodes]
    .filter(n => n.startTimestamp && n.endTimestamp)
    .sort((a, b) => (a.startTimestamp ?? 0) - (b.startTimestamp ?? 0));

  if (sortedNodes.length === 0) {
    return emptyResult;
  }

  const compressedStartByNodeId = new Map<string, number>();

  // Track current segment bounds
  const firstNode = sortedNodes[0]!;
  let segmentRealStart = firstNode.startTimestamp!;
  let segmentRealEnd = firstNode.endTimestamp!;
  let segmentCompressedStart = 0;

  compressedStartByNodeId.set(firstNode.id, 0);

  for (let i = 1; i < sortedNodes.length; i++) {
    const node = sortedNodes[i]!;
    const nodeStart = node.startTimestamp!;
    const nodeEnd = node.endTimestamp!;

    if (nodeStart > segmentRealEnd) {
      // Gap detected - finish current segment and start new one
      const gap = nodeStart - segmentRealEnd;
      const compressedGap = gap > MAX_GAP_SECONDS ? COMPRESSED_GAP_SECONDS : gap;
      const segmentDuration = segmentRealEnd - segmentRealStart;

      // Advance compressed time by segment duration + gap
      segmentCompressedStart += segmentDuration + compressedGap;

      // Start new segment
      segmentRealStart = nodeStart;
      segmentRealEnd = nodeEnd;
    } else {
      // Overlapping - extend current segment
      segmentRealEnd = Math.max(segmentRealEnd, nodeEnd);
    }

    // Calculate this node's compressed start
    const offsetInSegment = nodeStart - segmentRealStart;
    compressedStartByNodeId.set(node.id, segmentCompressedStart + offsetInSegment);
  }

  // Total duration is the compressed start of last segment + its duration
  const totalDuration = segmentCompressedStart + (segmentRealEnd - segmentRealStart);

  return {
    startTime: 0,
    endTime: totalDuration,
    duration: totalDuration,
    compressedStartByNodeId,
  };
}

[ArthurKnaus]

We should rather use the design system primitives like Flex.
Same goes for the other styled components.