feat(tracing): separate histogram into dedicated endpoint #2192

weeco · 2026-01-29T15:11:07Z

Summary

Add dedicated GetTraceHistogram RPC endpoint instead of bundling histogram with ListTraces
Extract reusable ToolEventCard component for tool call display
Add LinkedTraceBanner for viewing traces outside current time range
Enhance activity chart with highlighted trace time marker

Test plan

Verify histogram chart loads correctly on transcript list page
Verify linked trace banner appears when navigating to trace outside time range
Run frontend tests: bun test transcript

…le-code-section

…point

github-actions · 2026-01-29T15:11:32Z

The latest Buf updates on your PR. Results from workflow Buf CI / validate (pull_request).

Build	Format	Lint	Breaking	Updated (UTC)
`✅ passed`	`✅ passed`	`✅ passed`	`✅ passed`	Jan 29, 2026, 9:20 PM

Mark fields 1 and 2 as reserved in ListTracesRequest since start_time and end_time were moved to the nested Filter message.

malinskibeniamin · 2026-01-29T15:32:33Z

frontend/src/components/pages/transcripts/components/linked-trace-banner.tsx

+
+import { Button } from 'components/redpanda-ui/components/button';
+import { Text } from 'components/redpanda-ui/components/typography';
+import { Link, X } from 'lucide-react';


nit: use components/icons barrel file for this

malinskibeniamin · 2026-01-29T15:33:44Z

frontend/src/components/pages/transcripts/components/linked-trace-banner.tsx

+  // Truncate trace ID for display (show first 8 and last 4 characters)
+  const truncatedId = traceId.length > 16 ? `${traceId.slice(0, 8)}...${traceId.slice(-4)}` : traceId;


I think it's better if we can truncate using CSS, then show the ID on hover? or just let the ID show up based on how much space is provided, something like white-space:nowrap; text-overflow: ellipsis;

malinskibeniamin · 2026-01-29T15:34:10Z

frontend/src/components/pages/transcripts/components/linked-trace-banner.tsx

+          <code className="rounded bg-muted px-1 py-0.5 font-mono text-xs" title={traceId}>
+            {truncatedId}
+          </code>


Can you try using Code component from typography component, hopefully it looks ok

malinskibeniamin · 2026-01-29T15:34:44Z

frontend/src/components/pages/transcripts/components/linked-trace-banner.tsx

+          View Surrounding Traces
+        </Button>
+        <Button aria-label="Dismiss linked trace" className="h-7 w-7" onClick={onDismiss} size="icon" variant="ghost">
+          <X className="h-3.5 w-3.5" />


I think standard is multiples of 4 (most icons in the UI should have consistent size of 16px across the board)

malinskibeniamin · 2026-01-29T15:35:25Z

frontend/src/components/pages/transcripts/components/tool-event-card.test.tsx

+ * by the Apache License, Version 2.0
+ */
+
+import { render, screen } from '@testing-library/react';


nit: import from test-utils

malinskibeniamin · 2026-01-29T15:35:48Z

frontend/src/components/pages/transcripts/components/tool-event-card.test.tsx

+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';


ultra nit: use test() because that's what we have elsewhere

- Use components/icons barrel file instead of direct lucide-react import - Use CSS truncation with title hover instead of JavaScript truncation

malinskibeniamin · 2026-01-29T15:36:25Z

frontend/src/components/pages/transcripts/components/tool-event-card.test.tsx

+    it('renders tool name in header', () => {
+      render(<ToolEventCard content={smallPayload} testId="tool-card" toolName="readFile" type="call" />);
+
+      expect(screen.getByText('readFile')).toBeInTheDocument();


.toBeVisible() would be better than .toBeInTheDocument() since it will also verify it's not being obstructed by another z-index element in the DOM.

malinskibeniamin · 2026-01-29T15:38:14Z

frontend/src/components/pages/transcripts/transcript-list-page.tsx

+          onBucketClick={jumpedTo || isLinkedTraceMode ? undefined : handleBucketClick}
+          queryEndMs={
+            isLinkedTraceMode && activeTraceTimeMs
+              ? Math.min(activeTraceTimeMs + 60 * 60 * 1000, Date.now())


maybe just say ONE_HOUR

malinskibeniamin · 2026-01-29T15:39:13Z

frontend/src/components/pages/transcripts/transcript-list-page.tsx

+    // Exit linked mode and center time range on the linked trace's time
+    if (activeTraceTimeMs) {
+      const THIRTY_MINUTES_MS = 30 * 60 * 1000;
+      const startMs = activeTraceTimeMs - THIRTY_MINUTES_MS;


30 * ONE_MINUTE? we have time utils

malinskibeniamin · 2026-01-29T15:39:56Z

frontend/src/components/pages/transcripts/transcript-list-page.tsx

+    {
+      pageSize: TRANSCRIPTS_PAGE_SIZE,
+      pageToken: currentPageToken,
+      filter: {


malinskibeniamin · 2026-01-29T15:41:54Z

frontend/src/components/pages/transcripts/transcript-list-page.tsx

    setSelectedTraceId(null);
    setSelectedSpanId(null);
-  }, [setSelectedTraceId, setSelectedSpanId]);
+    setSelectedTab(null);


I see a lot of useState hooks, it can get a bit out of control eventually given there is a lot of state to manage. At that point we should either consider:

useReducer (staying within React bounds)

useContext (we will eventually use React 19 so this would need a refactor later)

recommended: zustand store for state management. (can be done in another PR) - simply add a new slice like useTranscriptStore, this will also let people save their settings globally.

Switched to useQueryStates() but did not use zustand because we want to keep using the url params for state management, so that we have

Sharable URLs that open the exact same view

Different tabs cannot interfere with each other due to shared state

malinskibeniamin · 2026-01-29T15:43:04Z

frontend/src/components/pages/transcripts/transcript-list-page.test.tsx

      const transport = createRouterTransport(({ rpc }) => {
        rpc(listTraces, listTracesMock);
        rpc(getTrace, getTraceMock);
+        rpc(getTraceHistogram, getTraceHistogramMock);


awesome, this is the way to do tests, super happy with this

frontend/src/components/pages/transcripts/components/transcripts-table.tsx

LinkedTraceBanner: - Use InlineCode component from typography instead of raw <code> - Use 16px icon size (h-4 w-4) for consistency tool-event-card.test.tsx: - Import from test-utils instead of @testing-library/react - Use test() instead of it() for consistency - Use toBeVisible() instead of toBeInTheDocument() for visible elements transcript-list-page.tsx: - Rename ONE_HOUR_MS to ONE_HOUR

frontend/src/components/pages/transcripts/components/tool-event-card.tsx

malinskibeniamin · 2026-01-29T15:45:07Z

frontend/src/components/pages/transcripts/components/tool-event-card.tsx

+
+      {/* Preview when collapsed */}
+      {!isExpanded && hasPreview ? (
+        <button


Should we use a redpanda UI registry button

frontend/src/components/pages/transcripts/components/tool-event-card.tsx

weeco · 2026-01-29T15:52:57Z

Re: Negative margins in transcripts-table.tsx:218

The negative margins (-top-1, -bottom-1) extend the tree connector lines slightly beyond the cell boundaries to create seamless visual connections between parent and child rows. Without them, there would be small gaps at the top/bottom of each row where the vertical lines don't quite meet. This is a common technique for tree visualizations to maintain visual continuity.

Re: Unordered list in tool-event-card.tsx:99

This is inline metadata display (Type • Call ID • Size) rather than a semantic list. Using <ul>/<li> would be semantically incorrect here since these aren't list items - they're metadata attributes with visual separators. The • separator pattern is standard for inline metadata (similar to breadcrumbs or article bylines).

tool-event-card.tsx: - Change icon sizes from h-3 w-3 to h-4 w-4 (16px standard) - Use Button component with variant="ghost" for preview area transcript-list-page.tsx: - Use ONE_MINUTE from time utils for time constants - Replace hardcoded values with 30 * ONE_MINUTE and 60 * ONE_MINUTE

Replace 4 separate useQueryState hooks with single useQueryStates for batched URL updates. This reduces hook count and ensures atomic updates when clearing multiple params (e.g., resetQueryState, handleDismissLinkedTrace).

… tabs Add consistent leading-relaxed line height and whitespace-pre-wrap text wrapping across detail tabs. Add section labels (DESCRIPTION, ARGUMENTS, RESPONSE) to tool call tab for better content organization.

Add updatePageTitle() to set uiState.pageTitle and pageBreadcrumbs, matching the pattern used by AI Agents and Remote MCP pages.

Update the transcripts page description to better explain the feature and add a "Learn more" link to the documentation, consistent with other pages like connect-clusters.

Allow users to double-click on transcript and span rows to toggle their expanded state, improving the table interaction UX.

weeco added 7 commits January 29, 2026 15:07

proto(tracing): add dedicated GetTraceHistogram endpoint

8efe2bd

proto(tracing): regenerate code

631bc95

frontend(tracing): add useGetTraceHistogramQuery hook

99903ac

frontend(transcripts): extract ToolEventCard component

88b7984

frontend(transcripts): add LinkedTraceBanner, remove unused collapsib…

0ddca15

…le-code-section

frontend(transcripts): add highlighted trace marker to activity chart

7019ef9

frontend(transcripts): update list page to use separate histogram end…

088e5f0

…point

proto(tracing): add reserved fields for removed ListTracesRequest fields

63d1401

Mark fields 1 and 2 as reserved in ListTracesRequest since start_time and end_time were moved to the nested Filter message.

weeco requested a review from malinskibeniamin January 29, 2026 15:24

malinskibeniamin reviewed Jan 29, 2026

View reviewed changes

frontend(transcripts): address PR review feedback for LinkedTraceBanner

a4c7c0d

- Use components/icons barrel file instead of direct lucide-react import - Use CSS truncation with title hover instead of JavaScript truncation

malinskibeniamin reviewed Jan 29, 2026

View reviewed changes

frontend/src/components/pages/transcripts/components/transcripts-table.tsx Show resolved Hide resolved

malinskibeniamin reviewed Jan 29, 2026

View reviewed changes

frontend/src/components/pages/transcripts/components/tool-event-card.tsx Show resolved Hide resolved

malinskibeniamin reviewed Jan 29, 2026

View reviewed changes

frontend/src/components/pages/transcripts/components/tool-event-card.tsx Outdated Show resolved Hide resolved

malinskibeniamin approved these changes Jan 29, 2026

View reviewed changes

weeco added 6 commits January 29, 2026 15:58

frontend(transcripts): improve text styling and readability in detail…

8db87ce

… tabs Add consistent leading-relaxed line height and whitespace-pre-wrap text wrapping across detail tabs. Add section labels (DESCRIPTION, ARGUMENTS, RESPONSE) to tool call tab for better content organization.

frontend(transcripts): add page title and breadcrumbs

8a078d9

Add updatePageTitle() to set uiState.pageTitle and pageBreadcrumbs, matching the pattern used by AI Agents and Remote MCP pages.

frontend(transcripts): improve page description with documentation link

a799dee

Update the transcripts page description to better explain the feature and add a "Learn more" link to the documentation, consistent with other pages like connect-clusters.

frontend(transcripts): add double-click to expand/collapse rows

32f7f1a

Allow users to double-click on transcript and span rows to toggle their expanded state, improving the table interaction UX.

		// Truncate trace ID for display (show first 8 and last 4 characters)
		const truncatedId = traceId.length > 16 ? `${traceId.slice(0, 8)}...${traceId.slice(-4)}` : traceId;

feat(tracing): separate histogram into dedicated endpoint #2192

Are you sure you want to change the base?

feat(tracing): separate histogram into dedicated endpoint #2192

Uh oh!

Conversation

weeco commented Jan 29, 2026

Summary

Test plan

Uh oh!

github-actions bot commented Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

malinskibeniamin Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

weeco commented Jan 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions bot commented Jan 29, 2026 •

edited

Loading

malinskibeniamin Jan 29, 2026 •

edited

Loading