feat(ai-generations): Add generations table (#102389)

ArthurKnaus · isabellaenriquez · commit a25295e7e74c · 2025-10-31T10:38:16.000-04:00
<img width="1205" height="305" alt="Screenshot 2025-10-30 at 12 47 31" src="https://github.com/user-attachments/assets/3b601055-3848-44e8-b669-a5f7458c144f" /> - closes [TET-1286: AI Generations Page - Table](https://linear.app/getsentry/issue/TET-1286/ai-generations-page-table) - closes [TET-1287: AI Generations Page - Input/Output Columns](https://linear.app/getsentry/issue/TET-1287/ai-generations-page-inputoutput-columns)
diff --git a/static/app/views/insights/agents/components/drawer.tsx b/static/app/views/insights/agents/components/drawer.tsx
@@ -110,7 +110,7 @@ export function useTraceViewDrawer({onClose}: UseTraceViewDrawerProps = {}) {
   const {openDrawer, isDrawerOpen, drawerUrlState, closeDrawer} = useUrlTraceDrawer();
 
   const openTraceViewDrawer = useCallback(
-    (traceSlug: string) => {
+    (traceSlug: string, spanId?: string) => {
       trackAnalytics('agent-monitoring.drawer.open', {
         organization,
       });
@@ -124,6 +124,7 @@ export function useTraceViewDrawer({onClose}: UseTraceViewDrawerProps = {}) {
           drawerWidth: `${DRAWER_WIDTH}px`,
           resizable: true,
           traceSlug,
+          spanId,
           drawerKey: 'abbreviated-trace-view-drawer',
         }
       );
diff --git a/static/app/views/insights/agents/hooks/useUrlTraceDrawer.tsx b/static/app/views/insights/agents/hooks/useUrlTraceDrawer.tsx
@@ -17,6 +17,11 @@ export function useUrlTraceDrawer() {
     parseAsString.withOptions({history: 'replace'})
   );
 
+  const [_, setSelectedSpan] = useQueryState(
+    DrawerUrlParams.SELECTED_SPAN,
+    parseAsString.withOptions({history: 'replace'})
+  );
+
   const removeQueryParams = useCallback(() => {
     setSelectedTrace(null);
   }, [setSelectedTrace]);
@@ -29,13 +34,25 @@ export function useUrlTraceDrawer() {
   const openDrawer = useCallback(
     (
       renderer: Parameters<typeof baseOpenDrawer>[0],
-      options?: Parameters<typeof baseOpenDrawer>[1] & {traceSlug?: string}
+      options?: Parameters<typeof baseOpenDrawer>[1] & {
+        spanId?: string;
+        traceSlug?: string;
+      }
     ) => {
-      const {traceSlug: optionsTraceSlug, onClose, ariaLabel, ...rest} = options || {};
+      const {
+        traceSlug: optionsTraceSlug,
+        spanId: optionsSpanId,
+        onClose,
+        ariaLabel,
+        ...rest
+      } = options || {};
 
       if (optionsTraceSlug) {
         setSelectedTrace(optionsTraceSlug);
       }
+      if (optionsSpanId) {
+        setSelectedSpan(optionsSpanId);
+      }
 
       return baseOpenDrawer(renderer, {
         ...rest,
@@ -49,7 +66,7 @@ export function useUrlTraceDrawer() {
         },
       });
     },
-    [baseOpenDrawer, setSelectedTrace, removeQueryParams]
+    [baseOpenDrawer, setSelectedTrace, setSelectedSpan, removeQueryParams]
   );
 
   return {
diff --git a/static/app/views/insights/aiGenerations/views/components/generationsTable.tsx b/static/app/views/insights/aiGenerations/views/components/generationsTable.tsx
@@ -1,24 +1,208 @@
-import {PanelTable} from 'sentry/components/panels/panelTable';
+import {useCallback} from 'react';
+
+import {Button} from '@sentry/scraps/button';
+import {Container, Grid} from '@sentry/scraps/layout';
+import {Text} from '@sentry/scraps/text';
+import {Tooltip} from '@sentry/scraps/tooltip';
+
+import {
+  COL_WIDTH_UNDEFINED,
+  type GridColumnOrder,
+} from 'sentry/components/tables/gridEditable';
+import TimeSince from 'sentry/components/timeSince';
+import {getShortEventId} from 'sentry/utils/events';
+import {useTraceViewDrawer} from 'sentry/views/insights/agents/components/drawer';
+import {HeadSortCell} from 'sentry/views/insights/agents/components/headSortCell';
+import {ModelName} from 'sentry/views/insights/agents/components/modelName';
+import {useCombinedQuery} from 'sentry/views/insights/agents/hooks/useCombinedQuery';
+import {useTableCursor} from 'sentry/views/insights/agents/hooks/useTableCursor';
+import {getAIGenerationsFilter} from 'sentry/views/insights/agents/utils/query';
+import {Referrer} from 'sentry/views/insights/aiGenerations/views/utils/referrer';
+import {TextAlignRight} from 'sentry/views/insights/common/components/textAlign';
+import {useSpans} from 'sentry/views/insights/common/queries/useDiscover';
+import {PlatformInsightsTable} from 'sentry/views/insights/pages/platform/shared/table';
+import {SpanFields} from 'sentry/views/insights/types';
+
+const INITIAL_COLUMN_ORDER = [
+  {key: SpanFields.SPAN_ID, name: 'Span ID', width: 100},
+  {
+    key: SpanFields.GEN_AI_REQUEST_MESSAGES,
+    name: 'Input / Output',
+    width: COL_WIDTH_UNDEFINED,
+  },
+  {
+    key: SpanFields.GEN_AI_REQUEST_MODEL,
+    name: 'Model',
+    width: 200,
+  },
+  {key: SpanFields.TIMESTAMP, name: 'Timestamp'},
+] as const;
+
+function getLastUserMessage(messages?: string) {
+  if (!messages) {
+    return null;
+  }
+  try {
+    const messagesArray = JSON.parse(messages);
+    const lastUserMessage = messagesArray.findLast(
+      (message: any) => message.role === 'user'
+    )?.content;
+    return typeof lastUserMessage === 'string'
+      ? lastUserMessage
+      : lastUserMessage[0].text.toString();
+  } catch (error) {
+    return messages;
+  }
+}
 
 export function GenerationsTable() {
+  const {openTraceViewDrawer} = useTraceViewDrawer({});
+  const query = useCombinedQuery(
+    // Only show generation spans that result in a response to the user's message
+    `${getAIGenerationsFilter()}  AND !span.op:gen_ai.embeddings`
+  );
+
+  const {cursor} = useTableCursor();
+
+  const {data, isLoading, error, pageLinks, isPlaceholderData} = useSpans(
+    {
+      search: query,
+      fields: [
+        SpanFields.TRACE,
+        SpanFields.SPAN_ID,
+        SpanFields.SPAN_STATUS,
+        SpanFields.SPAN_DESCRIPTION,
+        SpanFields.GEN_AI_REQUEST_MESSAGES,
+        SpanFields.GEN_AI_RESPONSE_TEXT,
+        SpanFields.GEN_AI_RESPONSE_OBJECT,
+        SpanFields.GEN_AI_REQUEST_MODEL,
+        SpanFields.TIMESTAMP,
+      ],
+      sorts: [{field: SpanFields.TIMESTAMP, kind: 'desc'}],
+      cursor,
+      keepPreviousData: true,
+      limit: 20,
+    },
+    Referrer.GENERATIONS_TABLE
+  );
+
+  type TableData = (typeof data)[number];
+
+  const renderBodyCell = useCallback(
+    (column: GridColumnOrder<keyof TableData>, dataRow: TableData) => {
+      if (column.key === SpanFields.SPAN_ID) {
+        return (
+          <div>
+            <Button
+              priority="link"
+              onClick={() => {
+                openTraceViewDrawer(dataRow.trace, dataRow.span_id);
+              }}
+            >
+              {getShortEventId(dataRow.span_id)}
+            </Button>
+          </div>
+        );
+      }
+
+      if (column.key === SpanFields.GEN_AI_REQUEST_MESSAGES) {
+        const noValueFallback = <Text variant="muted">–</Text>;
+        const statusValue = dataRow[SpanFields.SPAN_STATUS];
+        const isError = statusValue && statusValue !== 'ok' && statusValue !== 'unknown';
+
+        const userMessage = getLastUserMessage(
+          dataRow[SpanFields.GEN_AI_REQUEST_MESSAGES]
+        );
+        const outputValue =
+          dataRow[SpanFields.GEN_AI_RESPONSE_TEXT] ||
+          dataRow[SpanFields.GEN_AI_RESPONSE_OBJECT];
+        return (
+          <div>
+            <Grid
+              areas={`
+                "inputLabel inputValue"
+                "outputLabel outputValue"
+              `}
+              columns="min-content 1fr"
+              gap="2xs md"
+            >
+              <Container area="inputLabel">
+                <Text variant="muted">Input</Text>
+              </Container>
+              <Container area="inputValue" minWidth="0px">
+                <Tooltip
+                  title={userMessage}
+                  disabled={!userMessage}
+                  showOnlyOnOverflow
+                  maxWidth={800}
+                  isHoverable
+                >
+                  <Text ellipsis>{userMessage || noValueFallback}</Text>
+                </Tooltip>
+              </Container>
+              <Container area="outputLabel">
+                <Text variant="muted">Output</Text>
+              </Container>
+              <Container area="outputValue" minWidth="0px">
+                <Tooltip
+                  title={outputValue}
+                  disabled={!outputValue}
+                  showOnlyOnOverflow
+                  maxWidth={800}
+                  isHoverable
+                >
+                  {isError ? (
+                    <Text variant="danger">{statusValue}</Text>
+                  ) : (
+                    <Text ellipsis>{outputValue || noValueFallback}</Text>
+                  )}
+                </Tooltip>
+              </Container>
+            </Grid>
+          </div>
+        );
+      }
+
+      if (column.key === SpanFields.GEN_AI_REQUEST_MODEL) {
+        return <ModelName modelId={dataRow[column.key] || '(no value)'} />;
+      }
+      if (column.key === SpanFields.TIMESTAMP) {
+        return (
+          <TextAlignRight>
+            <TimeSince unitStyle="extraShort" date={new Date(dataRow.timestamp)} />
+          </TextAlignRight>
+        );
+      }
+      return <div>{dataRow[column.key]}</div>;
+    },
+    [openTraceViewDrawer]
+  );
+
+  const renderHeadCell = useCallback((column: GridColumnOrder<keyof TableData>) => {
+    return (
+      <HeadSortCell
+        align={column.key === SpanFields.TIMESTAMP ? 'right' : 'left'}
+        sortKey={column.key}
+        forceCellGrow={column.key === SpanFields.GEN_AI_REQUEST_MESSAGES}
+      >
+        {column.name}
+      </HeadSortCell>
+    );
+  }, []);
+
   return (
-    <PanelTable headers={['id', 'input/output', 'model', 'cost', 'timestamp']}>
-      <div>1244</div>
-      <div>
-        <div>User Input</div>
-        <div>Some AI response</div>
-      </div>
-      <div>gpt-4o</div>
-      <div>1244$</div>
-      <div>2025-01-01 12:00:00</div>
-      <div>1245</div>
-      <div>
-        <div>Another user query</div>
-        <div>Short AI answer</div>
-      </div>
-      <div>gpt-4o</div>
-      <div>8$</div>
-      <div>2025-01-01 8:00:00</div>
-    </PanelTable>
+    <PlatformInsightsTable
+      data={data}
+      stickyHeader
+      isLoading={isLoading}
+      error={error}
+      initialColumnOrder={INITIAL_COLUMN_ORDER as any}
+      pageLinks={pageLinks}
+      grid={{
+        renderBodyCell,
+        renderHeadCell,
+      }}
+      isPlaceholderData={isPlaceholderData}
+    />
   );
 }
diff --git a/static/app/views/insights/aiGenerations/views/utils/referrer.tsx b/static/app/views/insights/aiGenerations/views/utils/referrer.tsx
@@ -1,3 +1,4 @@
 export enum Referrer {
   GENERATIONS_CHART = 'api.insights.ai-generations.generations-chart',
+  GENERATIONS_TABLE = 'api.insights.ai-generations.generations-table',
 }
diff --git a/static/app/views/insights/types.tsx b/static/app/views/insights/types.tsx
@@ -95,6 +95,9 @@ export enum SpanFields {
   GEN_AI_AGENT_NAME = 'gen_ai.agent.name',
   GEN_AI_FUNCTION_ID = 'gen_ai.function_id',
   GEN_AI_REQUEST_MODEL = 'gen_ai.request.model',
+  GEN_AI_REQUEST_MESSAGES = 'gen_ai.request.messages',
+  GEN_AI_RESPONSE_TEXT = 'gen_ai.response.text',
+  GEN_AI_RESPONSE_OBJECT = 'gen_ai.response.object',
   GEN_AI_RESPONSE_MODEL = 'gen_ai.response.model',
   GEN_AI_TOOL_NAME = 'gen_ai.tool.name',
   GEN_AI_COST_INPUT_TOKENS = 'gen_ai.cost.input_tokens',
@@ -251,6 +254,9 @@ export type SpanStringFields =
   | SpanFields.STATUS_MESSAGE
   | SpanFields.GEN_AI_AGENT_NAME
   | SpanFields.GEN_AI_REQUEST_MODEL
+  | SpanFields.GEN_AI_REQUEST_MESSAGES
+  | SpanFields.GEN_AI_RESPONSE_TEXT
+  | SpanFields.GEN_AI_RESPONSE_OBJECT
   | SpanFields.GEN_AI_RESPONSE_MODEL
   | SpanFields.GEN_AI_TOOL_NAME
   | SpanFields.MCP_CLIENT_NAME

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`export enum Referrer {`
`2`	`2`	`GENERATIONS_CHART = 'api.insights.ai-generations.generations-chart',`
	`3`	`+ GENERATIONS_TABLE = 'api.insights.ai-generations.generations-table',`
`3`	`4`	`}`